@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

/* NEW CSS */
body { font-family:'Roboto', sans-serif; color:#000; font-size:16px; font-weight:400; background-color:#fff; position:relative; }
a { font-family:'Roboto', sans-serif; color:#000; font-size:16px; text-decoration:none; }
a:hover { font-family:'Roboto', sans-serif; color:#000; font-size:16px; text-decoration:none;}

a, img, input, button, textarea, select { outline:none; }

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.clearfix:after { clear:both; content:""; display:block; font-size:0; height:0; visibility:hidden;}

#wrapper { position:relative; margin:auto; overflow: hidden; width: 100%}

.wrapper { width:1200px; margin:auto; position:relative; z-index:1; }

.fl { float:left}
.fr { float:right}

button, a, .trans {
	-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;
}

a.btn { font-family:'Roboto', serif; position:relative; background: #0f6da3; height: 44px; line-height: 44px; padding: 0 25px; color: #fff; display: inline-block; border-radius: 5px;}
a.btn:hover { color: #000; background: #f6f6f6}


.content p { padding-bottom:16px}

.content ul, .content ol { padding-left:20px; color:#000; list-style-type:none; padding-bottom:20px}
.content ul li { list-style-type:circle}
.content ol li { list-style-type:decimal}


/* HEADER */
#header  { position:fixed; left:0; top:0; right:0; z-index:11; border-bottom: 1px solid rgba(255,255,255,0.3); background-color: #0f6da3; padding: 10px 0}
#header .wrapper { width:1200px;}

#header .logo { float:left}
#header .logo img { display:block; height: 60px;}

#header .menu { float:right;  }
#header .menu ul { }
#header .menu li { float:left; list-style-type:none; margin-left: 20px; margin-top:20px}
#header .menu li a { color: #fff}
#header .menu li a:hover, #header .menu li a.active { color:#f6f6f6; }



#header .toggle-nav { display:none; float:right; position:relative; z-index:12; width:40px; height:40px; top:13px; margin-right:0  }
#header .toggle-nav i { position:absolute; display:block; height:2px; background:#fff; width:30px; right:5px; }

#header .toggle-nav i:nth-child(1) { top:10px; }
#header .toggle-nav i:nth-child(2) { top:19px; }
#header .toggle-nav i:nth-child(3) { top:28px; }

#header .toggle-nav.active i:nth-child(1) { top:19px; -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg); }
#header .toggle-nav.active i:nth-child(2) { background:transparent; }
#header .toggle-nav.active i:nth-child(3) { top:19px; -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg); }


#header.downscroll { background-color: #0f6da3; box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.15);}





.block { padding:80px 0 20px 0}
.block .block-header { font-weight: bold; font-size: 36px; padding: 20px 0; text-align: center; text-transform: uppercase}




/* FIRST SCREEN */
.bg-parallax { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; overflow: hidden; position: relative; padding-top: 140px; padding-bottom: 120px; min-height:90vh;}
.bg-parallax:after { background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); content: ''; height: 110px; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 1}


.bg-parallax .slogan { text-align: center; font-size: 36px; color: #000; font-weight: normal; padding-bottom: 50px; text-shadow: 0 0 5px rgba(255,255,255,.5)}
.bg-parallax .button { text-align: center; }



.benefits-list { text-align: center}
.benefits-list .benefits-item { display: inline-block; width: 30%; vertical-align: top; padding: 10px}
.benefits-list .benefits-item {}


footer { background:#f6f6f6; padding: 10px; color: #000 }



/* WEB FORM */
.web-form { margin:auto; }

.web-form .col { float:left; width:48%}
.web-form .col:nth-child(2) { float:right; width:48%}

.web-form .field { padding:20px 0}
.web-form .field label { display:block; padding-bottom:10px}
.web-form .field input { background:#eee; padding:0 10px;  border:none; border:1px solid #eee; height:50px; width:100%; color:#999; font-size:14px; font-weight:400}
.web-form .field textarea { background:#eee; padding:10px; border:none; border:1px solid #eee; min-height:150px; width:100%; color:#999; font-size:14px; font-weight:400; display:block;}

.web-form .checkbox {  padding:10px 0; }
.web-form .agree { font-size:12px; padding:10px 0 }
.web-form .agree a { color:#f09d03; text-decoration:underline; font-size:12px;}

.web-form .field.col { float:left; width:49%}
.web-form .field.col:nth-child(2n) { float:right}

.web-form .button { padding-top:10px; text-align:right}
.web-form .button button { height:50px; border:2px solid #e09900; color:#e09900; padding:0 20px; font-size:20px; background:none; overflow: hidden; position: relative; cursor: pointer}
.web-form .button button:hover { border-color:transparent; background:#eee; padding-right: 34px}

.web-form .button button:after { content:''; display: inline-block; width: 14px; height: 14px; background-image: url("../images/right-arrow-orange.svg"); background-repeat: no-repeat; background-position: 50% 50%; margin-left: 5px; position: absolute; right: 100px; top: 15px; opacity: 0; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;}
.web-form .button button:hover:after { right: 10px; opacity: 1}


/* POP */
.no-scroll { overflow:hidden}
.no-scroll #header { display:none}

.pop-overlay { display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:100; }
.pop-overlay.scroll { overflow-y:scroll}
.pop-overlay .overlay { position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.8); z-index:1;}
.pop-overlay .pop-wrapper { width:480px; left:50%; top:100px; transform:translate(-50%, 0); padding-bottom:40px; z-index:100; position:relative; }
.pop-overlay .pop-wrapper .close { position:absolute; right:-30px; top:-40px; color:#fff; font-size:36px; transform:rotate(45deg);}
.pop-overlay .pop-wrapper .pop-header { background:#fff; position:relative; text-align:center; padding:20px 20px 0 20px }

.pop-overlay .pop-wrapper .border { border:1px solid #000;  }

.pop-overlay .pop-wrapper .pop-header .logo { text-align:center}
.pop-overlay .pop-wrapper .pop-header .logo img{ height:80px }


.pop-overlay .pop-wrapper .pop-content { padding:20px; background:#fff }



/* FOOTER */




/* RESPONSIVE */

@media (max-width:1200px) {
	.wrapper { width:100% !important; padding:0 10px}
}

/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px) { 
	.wrapper { width:100% !important; padding:0 10px}

}
  


/* Landscape phone to portrait tablet */
@media (max-width:767px) {
	.wrapper { width:100% !important; padding:0 10px;}
	
	
	#header .menu { position: absolute; background:#0f6da3; width: 280px; right: -280px; top:70px}
	#header .menu li { display:block; float:none; margin:0; text-align:center; border-bottom: 1px solid rgba(255,255,255,0.3); border-left: 1px solid rgba(255,255,255,0.3)}
	#header .menu li a { display:block; padding: 10px;}
	
	#header .menu.active { right: 0 }
	
	#header .toggle-nav { display:block}
	
	.bg-parallax { height: 100vh}
	.bg-parallax .logo img { height:160px}
	.bg-parallax .slogan { font-size:22px}
	
	.benefits-list .benefits-item { width: 48%;} 

}
 
/* Landscape phones and down */
@media (max-width:480px) { 
	.wrapper { width:100% !important; padding:0 10px;}
	
	
	.benefits-list .benefits-item { width: 100%;} 
	
	.block .block-header { font-size:32px;}
	
	.pop-overlay .pop-wrapper { width:calc(100% - 20px);   }
	.pop-overlay .pop-wrapper .close {  right:0; }
}