@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap');


.header {height: 200px; width: 100vw; z-index: 10; position: absolute; top: 0px;
background: rgba(0,0,0,0.1);
background: -moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 80%);
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 80%);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);}

.header .top_logo {height: 50px; margin: 50px 0px 50px 100px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2)); float: left}
.header .registration {height: 50px; margin: 50px 100px 50px 0px; float: right}

.header .registration .signing, .header .registration .signing:hover { height: 28px; margin: 11px 0px; background: var(--pink); display: inline-block; line-height: 26px; padding: 0px 15px; margin-right: 15px; text-decoration: none; color: #fff; font-size: 1.05em; font-weight: 600; letter-spacing: 1px; border: 1px solid var(--pink)!important; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); text-transform: uppercase}

.header .registration .login, .header .registration .login:hover { height: 28px; margin: 11px 0px; background: rgba(255,255,255,0.05); display: inline-block; line-height: 26px; padding: 0px 15px; margin-right: 15px; text-decoration: none; color: #fff; font-size: 1.05em; font-weight: 500; letter-spacing: 0px; border: 1px solid #fff!important; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); text-transform: uppercase}

.lema { position: absolute; top: 0px; left: 0px; height: 100vh; width: 100vw; text-align: center}

.extra_sign {position: absolute; z-index: 10; top: 55%; text-align: center; width: 100%; opacity:0;
	animation: fadein 2s; animation-delay: 8s;animation-fill-mode: forwards}

.extra_sign a, .extra_sign a:hover {height: 32px; margin: 11px 0px; background: var(--pink); display: inline-block; line-height: 30px; padding: 0px 15px; margin-right: 15px; text-decoration: none; color: #fff; font-size: 1.25em; font-weight: 500; letter-spacing: 1.5px; border: 1px solid var(--pink)!important; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); text-transform: uppercase; border-radius: 2px!important}

.improve {width: 100%; padding: 20px 100px 20px; text-align: center; margin: 0px 0px 50px 0px   }
.improve h1, .trust h1 { font-size: 1.6em; font-weight: 400; color: var(--pink)}

.trust {width: 100%; padding: 30px 100px 10px; text-align: center; background: #ececec; margin: 0px 0px 20px 0px}

.companies_web {width: 100%; padding: 60px 250px 40px; text-align: center; background: #fff;  margin: 0px 0px 50px 0px}

.companies_web .premium_logo {margin: 20px auto; max-height: 50px ; max-width: 200px; position: absolut; top: 50%; transform: translateY(-50%)}

.companies_mob {display: none}
/* selling */
.wrappersell {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50px calc(50% - 50px) ;
  padding: 0px;
  margin: 20px 150px 30px;
  width: calc(100% - 300px);
}
.boxsell {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.s1a {grid-row: 1 ;  grid-column: 1} 
.s1bc {grid-row: 1;  grid-column: 2 / span2} 
.s2a {grid-row: 2 / span 4;  grid-column: 1; position: relative; text-align: center} 
.s2b {grid-row: 2;  grid-column: 2} 
.s2c {grid-row: 2;  grid-column: 3} 
.s3b {grid-row: 3;  grid-column: 2} 
.s3c {grid-row: 3;  grid-column: 3} 
.s4b {grid-row: 4;  grid-column: 2} 
.s4c {grid-row: 4;  grid-column: 3} 
.s5b {grid-row: 5;  grid-column: 2} 
.s5c {grid-row: 5;  grid-column: 3} 

.sell_img {background: var(--lblue); position: absolute; top: 50%; transform: translateY(-50%) translateX(0%); height: 75%; width: 85%; left: 0%; background-size: cover; background-position: top left; background-repeat: no-repeat}

/* end selling */


.sec_title {font-size: 2.0em; font-weight: 350; color: var(--pink); margin: 0px 0px 20px}
.sec_logos {font-size: 2.0em; font-weight: 350; color: var(--pink); margin: 0px 0px 50px}
.icon {margin: 0px 0px 10px 0px}
.icon img {height: 35px; max-width:35px; margin: 5px 0px}

.despription h2 {font-size: 1.4em; font-weight: 450; color: var(--blue); margin: 0px 0px 1px 0px!important; padding: 0px; line-height: 45px}
.despription p {font-size: 1.1em; font-weight: 300; margin: 0px 0px 15px 0px!important; padding: 0px}
.despription b { font-weight: 400; }
.despription br {margin: 0px 0px 5px 0px}

.trust_card {text-align: center}
.trust_card img {height: 80px; margin: 10px auto; max-width: 80px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2))}
.trust_card h1 {color: var(--blue); margin: 10px 0px; text-transform: uppercase; font-size: 1.3em; font-weight: 400}
.trust_card h3 {margin: 10px 0px; font-size: 1.2em; font-weight: 300; padding: 0px 10%; line-height: 1.5em}


.need_card {text-align: center; border: 1px solid #ececec; border-radius: 10px; background: var(--svlblue); min-height: 320px }
.need_card img {height: 80px; margin: 30px auto 20px; max-width: 80px}
.need_card h1 {color: var(--blue); margin: 10px 0px; text-transform: uppercase; font-size: 1.3em; font-weight: 400}
.need_card h3 {margin: 10px 0px 20px; font-size: 1.2em; font-weight: 300; padding: 0px 10%; line-height: 1.5em}


/* 4 responsive columns */

.row4home {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row4home:after {
  content: "";
  display: table;
  clear: both;
}
.column4home {
  float: left;
  width: calc(25% - 0px); 
  padding: 0px 20px!important; border: 0px solid #f09; margin: 0px; position: relative;
}

/* end 4 responsive columns */

/* 5 responsive columns */

.row5home {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row5home:after {
  content: "";
  display: table;
  clear: both;
}
.column5home {
  float: left;
  width: calc(20% - 0px); 
  padding: 0px 20px!important; border: 0px solid #f09; margin: 0px; position: relative;
}

/* end 5 responsive columns */

.video_bg, #videobg {width: 100vw; height: 90vh; z-index: 0; position: relative; margin: 0px 0px 10px!important; padding: 0px; }

/* animated text */
.mob-phrases { display: none}
.os-phrases {min-height: 90vh; z-index: 2; border: 0px solid #f90; position: absolute; top: 50px; width: 100vw}
.os-phrases h2 {
	font-family : "Sofia Sans Condensed", sans-serif;
	font-size: 50px!important;
	font-weight: 300;
	width: 100%;
	overflow: hidden;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	letter-spacing: 2px;
	text-align: center; 
}

.os-phrases h2,
.os-phrases h2 > span {
	height: 100%;  
	/* Centering with flexbox */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.os-phrases h2 > span {
	margin: 0 8px;
}

.os-phrases h2 > span > span {
	display: inline-block;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.os-phrases h2 > span > span > span {
	display: inline-block;
	color: rgba(0,0,0,0);
	
	animation: OpeningSequence 4s linear forwards;
}

.os-phrases h2:nth-child(1) > span > span > span {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	animation-delay: 0s;
}


.os-phrases h2:nth-child(2) > span > span > span {
	animation-delay: 4s;
}

.os-phrases h2:nth-child(3) > span > span > span {
	font-size: 50px;
	-webkit-animation: FadeIn 4s linear 0s forwards;
	-moz-animation: FadeIn 4s linear 0s forwards;
	animation: FadeIn 4s linear 8s forwards;
}


@keyframes OpeningSequence {
	0% {
		text-shadow: 0 0 50px #fff;
		letter-spacing: 60px;
		opacity: 0;
	}
	20% {
		text-shadow: 0 0 5px #000;color: #fff;
		letter-spacing: 5px;
		opacity: 1;
	}
	90% {
		text-shadow: 0 0 5px #000;color: #fff;
		opacity: 1;
	}
	100% {
		text-shadow: 0 0 5px #fff;
		opacity: 0;
		
		pointer-events: none;
	}
}


@keyframes FadeIn { 
	0% {
		text-shadow: 0 0 50px #fff;
		letter-spacing: 60px;
		opacity: 0.0;
		
	}
	25% {
		text-shadow: 0 0 5px #000;color: #fff;
		letter-spacing: 5px;
		opacity: 1;
		
	}
	90% {
		text-shadow: 0 0 5px #000;
		opacity: 1;
		color: white
	}
	100% {
		text-shadow: 0 0 5px #000;
		opacity: 1;
		
    color: white
	}
}

@keyframes fadein {
    0% {
        opacity:0;
    }
    70% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}


/* end animated text */


/******************************************************************************************************/
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
.header {height: 170px; width: 100vw; z-index: 10; position: absolute; top: 0px; text-align: center; margin: 0px; padding: 0px} 
.header .top_logo {height: 45px;  float: none; position: absolute; left: 50%; top: 45px; margin: 0px; transform: translateX(-50%)}
.header .registration {height: 50px; margin: 0px; float: none; bottom: 0px; position: absolute;transform: translateX(-50%); left: 50% ; width: 100vw;}

.header .registration .signing, .header .registration .signing:hover {  margin: 11px 10px;display: inline-block;}

.header .registration .login, .header .registration .login:hover {  margin: 11px 10px; display: inline-block; }
    
/* animated text */

.os-phrases { display: none}
.mob-phrases { display: block; border: 0px solid #f90;	position: absolute; text-transform: uppercase;
	top: 60%; width: calc(100% - 0px);
	font-family : "Sofia Sans Condensed", sans-serif;
	font-size: 4.5vh!important; color: #fff; font-weight: 300; text-align: center; line-height: 1.2em;
	left: 0; transform: translateY(-70%); padding: 0px 30px;animation: fadein 0.7s; animation-delay: 0s; transition-timing-function: ease-in}

.extra_sign {position: absolute; z-index: 10; top: 100%; text-align: center; width: 100%; opacity:0; left: 0px;
	animation: fadein 0.7s; animation-delay: 0.5s;animation-fill-mode: forwards; }

.extra_sign a, .extra_sign a:hover { font-size: 24px; line-height: 32px}
    
/* selling */
.wrappersell {
  display: grid;
  grid-gap: 0px;
  grid-template-columns:  50px calc(100% - 50px)  ;
  padding: 0px;
  margin: 10px 20px 10px;
  width: calc(100% - 40px);
}
.boxsell {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.s1a {grid-row: 1 / span 5;  grid-column: 1; position: relative; text-align: center; display: none} 
.s1bc {grid-row: 1;  grid-column: 1 / span2; text-align: center} 
.s2a {grid-row: 2;  grid-column: 1; display: none} 
.s2b {grid-row: 2;  grid-column: 1} 
.s2c {grid-row: 2;  grid-column: 2} 
.s3b {grid-row: 3;  grid-column: 1} 
.s3c {grid-row: 3;  grid-column: 2} 
.s4b {grid-row: 4;  grid-column: 1} 
.s4c {grid-row: 4;  grid-column: 2} 
.s5b {grid-row: 5;  grid-column: 1} 
.s5c {grid-row: 5;  grid-column: 2} 

.sell_img {background: var(--lblue); position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); height: 300px; width: 450px; left: 50%; background-size: cover; background-position: top left; background-repeat: no-repeat}

/* end selling */
    
.despription h2 {font-size: 1.2em; font-weight: 450; color: var(--blue); margin: 0px 0px 1px 0px!important; padding: 0px; line-height: 45px}
.despription p {font-size: 1.0em; font-weight: 300; margin: -5px 0px 15px 0px!important; padding: 0px}
.despription b { font-weight: 400; }
.despription br {margin: 0px 0px 5px 0px}
    
/* 4 responsive columns */

.row4home {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 10px); border: 0px solid #f99}

.row4home:after {
  content: "";
  display: table;
  clear: both;
}
.column4home {
  float: left;
  width: calc(50% - 0px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px; position: relative;
}

/* end 4 responsive columns */
    
/* 3 responsive columns */

.row3home {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row3home:after {
  content: "";
  display: table;
  clear: both;
}
.column3home {
  float: left;
  width: calc(33.3% - 0px); 
  padding: 0px 20px!important; border: 0px solid #f09; margin: 0px; position: relative; min-height: 72px
}


/* end 3 responsive columns */

.improve {width: 100%; padding:0px 20px; text-align: center}
.trust {width: calc(100% - 0px); padding: 30px 20px 10px; text-align: center; background: #ececec}
.companies_web {width: calc(100% - 0px); padding: 60px 20px 40px; text-align: center; background: #fff; display: none}
.companies_mob {width: calc(100% - 0px); padding: 60px 20px 40px; text-align: center; background: #fff; display: block}
    
.sec_title {font-size: 1.6em; font-weight: 350; color: var(--pink); margin: 0px 0px 20px; line-height: 1.3em}
.sec_logos {font-size: 1.6em; font-weight: 350; color: var(--pink); margin: 0px 0px 50px}
    
.companies_web .premium_logo {margin: 20px auto; max-height: 40px ; max-width: 120px; position: relative; top: 0%; transform: translateY(0%)}
.companies_mob .premium_logo {margin: 15px auto; max-height: 35px ; max-width: 110px; position: relative; top: 0%; transform: translateY(0%)}
    
.trust_card {text-align: center}
.trust_card img {height: 60px; margin: 10px auto; max-width: 80px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2))}
.trust_card h1 {color: var(--blue); margin: 10px 0px; text-transform: uppercase; font-size: 1em; font-weight: 400}
.trust_card h3 {margin: 10px 0px; font-size: 1em; font-weight: 300; padding: 0px 5%; line-height: 1.5em}
    
.need_card {text-align: center; border: 1px solid #ececec; border-radius: 10px; background: var(--svlblue); margin-bottom: 20px; padding: 5px; min-height: 350px }
.need_card img {height: 60px; margin: 20px auto 10px; max-width: 80px}
.need_card h1 {color: var(--blue); margin: 10px 0px; text-transform: uppercase; font-size: 1.0em; font-weight: 400}
.need_card h3 {margin: 10px 0px 20px; font-size: 1em; font-weight: 300; padding: 0px 2%; line-height: 1.5em}
    
}