.show-onload{
    opacity:0 !important;
}
.add-onload{
    display:none !important;
}
[ng-if="noscript"]{
    display:none !important;
}

*{
	-webkit-tap-highlight-color: transparent;
}

/* SCREEN SIZES */

@mobile-width:   800px;
@mobile-width_1: 801px;

@for-mobile:  (max-width:@mobile-width);
@for-desktop: (min-width:@mobile-width_1);

@mobile-cover-width:   1100px;
@mobile-cover-width_1: 1101px;

@for-mobile-cover:  (max-width:@mobile-cover-width);
@for-desktop-cover: (min-width:@mobile-cover-width_1);

@for-mobile-keyboard: (max-height:430px);


/* COLORS */

@default:#4D2BF3;
@blue:#00FFBF;
@purple:#9326FF;
@app-bg:#070707;

@green:#2fcfc3;
@dark-green:#31bcb1;

.font-family{
	font-family: Montserrat, Geneva, Arial, Helvetica, sans-serif;
}
.font-color(@opacity:1){
	color:rgba(77,43,243,@opacity);
}
.font-color-dark(@opacity:1){
	color:rgba(77,43,243,@opacity);
}
.default-bg(@opacity:1){
	background-color:rgba(77,43,243,@opacity);
}


.alt{
	display:inline-block;
	box-sizing:border-box;
	width:1px;
	height:1px;
	padding-left:1px;
	color:transparent !important;
	overflow:hidden;
}

.text-gradient{
	.angled-gradient(@default,@blue,@purple);
	-webkit-background-clip:text;
			background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
.text-gradient-light{
	.angled-gradient(@default,#69ecff,@default);
	-webkit-background-clip:text;
			background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
.text-gradient-dark{
	.angled-gradient(@default,#008eff,@purple);
	-webkit-background-clip:text;
			background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
.bg-gradient{
	.angled-gradient(@default,@blue,@purple);
}
.bg-gradient-reversed{
	.angled-gradient-reversed(@default,@blue,@purple);
}
.bg-gradient-light{
	.angled-gradient(#eeecfe,#e8f8fe,#f1e5fe);
}
.bg-gradient-dark{
	.angled-gradient(@default,#008eff,@purple);
}
.green-gradient{
	.vertical-gradient(#00C86F,#00D9A3,#00B22D);
}


.add-shine(@height:2px;@offset-x:0px;@offset-y:0px;@opacity:1;){
	position:relative;
	&:after{
		content:'';
		position:absolute;
		top:@offset-x;
		left:@offset-y;
		right:@offset-y;
		height:@height;
		background-image:url('/img/shine.png');
		background-size:100% 100%;
		opacity:@opacity;
	}
}
.add-blue-shine(@height:2px;@offset-x:0px;@offset-y:0px;){
	position:relative;
	&:after{
		content:'';
		position:absolute;
		top:@offset-x;
		left:@offset-y;
		right:@offset-y;
		height:@height;
		background-image:url('/img/shine-blue.png');
		background-size:100% 100%;
	}
}


/* ELEMENTS */

.outline(
  @spacing:3px,
  @radius:100px,
  @color:rgba(0,0,0,.1),
  @width:1px){
	  
	&:before{
		content:'';
		position:absolute;
		top:-@spacing;bottom:-@spacing;
		left:-@spacing;right:-@spacing;
		border:@width solid @color;
		.border-radius(@radius);
	}
}

.crossed-out{
	content:'';
	position:absolute;
	top:50%;left:-5%;
	width:110%;height:2px;
	background:rgba(0,0,0,.2);
	.transform(rotate(-10deg));
}

@transition-in:all .3s ease;
@transition-out:all .7s ease;

.shine-middle(@opacity:1){
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5*@opacity) 20%, rgba(255,255,255,0.8*@opacity) 50%, rgba(255,255,255,0.5*@opacity) 80%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5*@opacity) 20%,rgba(255,255,255,0.8*@opacity) 50%,rgba(255,255,255,0.5*@opacity) 80%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5*@opacity) 20%,rgba(255,255,255,0.8*@opacity) 50%,rgba(255,255,255,0.5*@opacity) 80%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
}

.shine-left{
	background: -moz-linear-gradient(left, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.85) 6%, rgba(255,255,255,0.5) 12%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.85) 6%,rgba(255,255,255,0.5) 12%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.85) 6%,rgba(255,255,255,0.5) 12%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=1 );
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.border-radius-top(@radius: 100px) {
  -webkit-border-top-left-radius: @radius;
     -moz-border-top-left-radius: @radius;
          border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
     -moz-border-top-right-radius: @radius;
          border-top-right-radius: @radius;
}
.border-radius-bottom(@radius: 100px) {
  -webkit-border-bottom-left-radius: @radius;
	 -moz-border-bottom-left-radius: @radius;
		  border-bottom-left-radius: @radius;
  -webkit-border-bottom-right-radius: @radius;
	 -moz-border-bottom-right-radius: @radius;
		  border-bottom-right-radius: @radius;
}
.border-radius-left(@radius: 100px) {
  -webkit-border-top-left-radius: @radius;
     -moz-border-top-left-radius: @radius;
          border-top-left-radius: @radius;
  -webkit-border-bottom-left-radius: @radius;
	 -moz-border-bottom-left-radius: @radius;
		  border-bottom-left-radius: @radius;
}
.border-radius-right(@radius: 100px) {
  -webkit-border-top-right-radius: @radius;
     -moz-border-top-right-radius: @radius;
          border-top-right-radius: @radius;
  -webkit-border-bottom-right-radius: @radius;
	 -moz-border-bottom-right-radius: @radius;
		  border-bottom-right-radius: @radius;
}
.blur(@value:15px){
	-webkit-filter:blur(@value);
    		filter:blur(@value);
}
.background-blur(@value:5px){
	-webkit-backdrop-filter:blur(@value);
			backdrop-filter:blur(@value);
}
.transform(@value){
	-webkit-transform: @value;
	   -moz-transform: @value;
		 -o-transform: @value;
			transform: @value;
}
.enable-3d(@value:1000px){

	.enable-3d-A(@value:1000px);

	.enable-3d-B();

}
.enable-3d-A(@value:1000px){
	-webkit-perspective: @value;
	   -moz-perspective: @value;
		 -o-perspective: @value;
			perspective: @value;
	
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
		 -o-transform-style: preserve-3d;
			transform-style: preserve-3d;
}
.enable-3d-B(){
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
    		backface-visibility: hidden;
}

.placeholder-color(@color:rgba(0,0,0,.5)){
	&::-webkit-input-placeholder { /* Edge */
		color: @color;
	}

	&:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: @color;
	}

	&::placeholder {
		color: @color;
	}
}

.hide-scroll-bar{
	.slim-scroll-bar(rgba(0,0,0,0),0px);
}
.slim-scroll-bar(@color:rgba(0,0,0,.1),@size:3px,@bg-color:rgba(0,0,0,0),@radius:100px){
	&::-webkit-scrollbar,
	&::-webkit-scrollbar-thumb:vertical {
		height:@size;
	}&::-webkit-scrollbar-track-piece {
		background-color:@bg-color;
	}&::-webkit-scrollbar-thumb{
		background-color:@color !important;
		border-radius:@radius;
	}
	&::-webkit-scrollbar,
	&::-webkit-scrollbar-thumb:horizontal {
		width:@size;
	}
}

.vertical-gradient(@color,@colorA,@colorB){
	background: @color;
	background: -moz-linear-gradient(top, @colorA 0%, @colorB 100%);
	background: -webkit-linear-gradient(top, @colorA 0%,@colorB 100%);
	background: linear-gradient(to bottom, @colorA 0%,@colorB 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorA', endColorstr='@colorB',GradientType=0 );
}
.gentle-shadow-vertical-gradient(){
	background: rgba(0,0,0,.3);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0)', endColorstr='rgba(0,0,0,1)',GradientType=0 );
}
.horizontal-gradient(@color,@colorA,@colorB){
	background: @color;
	background: -moz-linear-gradient(left, @colorA 0%, @colorB 100%);
	background: -webkit-linear-gradient(left, @colorA 0%,@colorB 100%);
	background: linear-gradient(to right, @colorA 0%,@colorB 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorA', endColorstr='@colorB',GradientType=0 );
}
.angled-gradient(@color,@colorA,@colorB){
	background: @color;
	background: -moz-linear-gradient(top left, @colorA 5%, @colorB 95%);
	background: -webkit-linear-gradient(top left, @colorA 5%,@colorB 95%);
	background: linear-gradient(to bottom right, @colorA 5%,@colorB 95%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorA', endColorstr='@colorB',GradientType=0 );
}
.angled-gradient-reversed(@color,@colorA,@colorB){
	background: @color;
	background: -moz-linear-gradient(top right, @colorA 5%, @colorB 95%);
	background: -webkit-linear-gradient(top right, @colorA 5%,@colorB 95%);
	background: linear-gradient(to bottom left, @colorA 5%,@colorB 95%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorA', endColorstr='@colorB',GradientType=0 );
}
.angled-triple-gradient(@color,@colorA,@colorB,@colorC){
	background: @color;
	background: -moz-linear-gradient(top left, @colorA 0%, @colorB 33%, @colorB 66%, @colorC 100%);
	background: -webkit-linear-gradient(top left, @colorA 0%, @colorB 33%, @colorB 66%, @colorC 100%);
	background: linear-gradient(to bottom right, @colorA 0%, @colorB 33%, @colorB 66%, @colorC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorA', endColorstr='@colorB',GradientType=0 );
}
.angled-triple-gradient-shine(@color,@colorA,@colorB,@colorC){
	background: @color;
	background: -moz-linear-gradient(top left, @colorA 0%, @colorB 50%, @colorC 100%);
	background: -webkit-linear-gradient(top left, @colorA 0%, @colorB 50%, @colorC 100%);
	background: linear-gradient(to bottom right, @colorA 0%, @colorB 50%, @colorC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorA', endColorstr='@colorB',GradientType=0 );
}
.radial-gradient(@color,@colorA,@colorB){
	background: @color;
	background: -moz-radial-gradient(top, ellipse cover, @colorA 0%, @colorB 100%);
	background: -webkit-radial-gradient(top, ellipse cover, @colorA 0%,@colorB 100%);
	background: radial-gradient(at top, @colorA 0%,@colorB 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorA', endColorstr='@colorB',GradientType=1 );
}

.light-box-shadow{
	box-shadow:0px 1px 1px rgba(0,0,0,0.25);
}
.light-box-shadow-hover{
	box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}
.light-box-shadow-dark{
	box-shadow:0 3px 8px 0 rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3);
}
.heavy-box-shadow{
	box-shadow:0 3px 30px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}
.heavy-box-shadow-B{
	box-shadow:0 3px 30px 0 rgba(0,0,0,0.1);
}
.soft-box-shadow{
	box-shadow:0px 10px 10px rgba(0,0,0,.05);
}


.disable-interactions{
	pointer-events:none;
}
.enable-interactions{
	pointer-events:auto;
}
.disable-highlight{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes zoom-bounce {
  0% {	 .transform( scale(1)    ); }
  25% {  .transform( scale(1.1)  ); }
  50% {  .transform( scale(1.03) ); }
  75% {  .transform( scale(1.08) ); }
  100% { .transform( scale(1.05) ); }
}

@keyframes zoom-in-center {
	0% {   .transform( translate(-50%,-50%) scale(.2)); opacity:0; }
	100% { .transform( translate(-50%,-50%) scale(1) ); opacity:1; }
  }


@keyframes fade-in-out {
	0% {   opacity:.1; }
	50% {  opacity:.3; }
	100% { opacity:.1; }
}
@keyframes fade-in {
	from {opacity:0;}
	to   {opacity:1;}
}
@keyframes slide-fade-in {
	from {opacity:1;.transform(translateY(150px));}
	to   {opacity:1;.transform(translateY(0px));}
}
@keyframes slide-fade-in-small {
	from {opacity:1;.transform(translateY(30px));}
	to   {opacity:1;.transform(translateY(0px));}
}
@keyframes slide-fade-in-small-50x {
	from {opacity:1;.transform(translate(-50%,30px));}
	to   {opacity:1;.transform(translate(-50%,0px));}
}

@keyframes spin {
    from {.transform(rotate(0deg));}
    to {.transform(rotate(360deg));}
}