@font-face {
  font-family: 'Lyon Display Web';
  src: url('fonts/LyonDisplay-BoldItalic-Web.woff2') format('woff2'),
       url('fonts/LyonDisplay-BoldItalic-Web.woff') format('woff');
  font-weight:  700;
  font-style:   italic;
  font-stretch: normal;
}

@font-face {
  font-family: 'Lyon Display Web';
  src: url('fonts/LyonDisplay-Bold-Web.woff2') format('woff2'),
       url('fonts/LyonDisplay-Bold-Web.woff') format('woff');
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
	font-family: 'GraphikRegular';
	src: url("fonts/Graphik-Regular.eot");
	src: url("fonts/Graphik-Regular.eot?#iefix") format('embedded-opentype'),
	url("fonts/Graphik-Regular.woff") format('woff'),
	url("fonts/Graphik-Regular.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GraphikSemibold';
	src: url("fonts/Graphik-Semibold.eot");
	src: url("fonts/Graphik-Semibold.eot?#iefix") format('embedded-opentype'),
	url("fonts/Graphik-Semibold.woff") format('woff'),
	url("fonts/Graphik-Semibold.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GraphikMedium';
	src: url("fonts/Graphik-Medium.eot");
	src: url("fonts/Graphik-Medium.eot?#iefix") format('embedded-opentype'),
	url("fonts/Graphik-Medium.woff") format('woff'),
	url("fonts/Graphik-Medium.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GraphikBold';
	src: url("fonts/Graphik-Bold.eot");
	src: url("fonts/Graphik-Bold.eot?#iefix") format('embedded-opentype'),
	url("fonts/Graphik-Bold.woff") format('woff'),
	url("fonts/Graphik-Bold.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.lyon-bolditalic {
  font-family: 'Lyon Display Web';
  font-weight:  700;
  font-style:   italic;
  font-stretch: normal;
}

.lyon-bold {
  font-family: 'Lyon Display Web';
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
}

.graphik-regular {
  font-family: 'GraphikRegular';
  font-style:   normal;
  font-stretch: normal;
}

.graphik-semibold {
  font-family: 'GraphikSemibold';
  font-style:   normal;
  font-stretch: normal;
}

.graphik-medium {
  font-family: 'GraphikMedium';
  font-style:   normal;
  font-stretch: normal;
}

.graphik-bold {
  font-family: 'GraphikBold';
  font-style:   normal;
  font-stretch: normal;
}

.center {
	text-align: center;
}



.wow {visibility:hidden;}
#widget-portal {position:fixed;bottom:10px;right:10px;z-index:9999}
body {font-family: 'GraphikRegular';color:#464646;font-size:21px;line-height:33px}
.button {font-family: 'GraphikMedium';display:inline-block;transition: all 0.2s ease;color:#004665;background:#add4e0;font-size:21px;border-radius:30px;height:60px;line-height:60px;padding:0 36px;}
.button:hover {background:#004665;color:#fff}
.button.white {color:#004665;background:#fff}
.button.white:hover {color:#fff;background:#004665}
.button.darkblue {color:#fff;background:#00475e}
.button.darkblue:hover {color:#00475e;background:#add4e0}
header {z-index: 99999999999;width:100%;top:50px;left:0;text-align:center}
header a {z-index:5}
#hero {color:#004665;background:#f1f0e3;height:743px;    z-index: 10;    position: relative;}
#hero .flex {height:100%;align-items:center}
#hero .button {margin-top:30px}
#hero .left {z-index:1}
#hero h1 {font-size:66px;line-height:76px}
#hero p {padding-top:10px;font-size:25px;line-height:33px}
#hero img {right:15px;top:0;bottom:-150px;margin:auto}
#products {overflow:hidden;text-align:center;padding:60px 0 0 0}
#products #default {padding-bottom:60px}
#products h2 {color:#004665;font-size:54px;line-height:62px}
#products .title {padding-bottom:80px;padding-top:15px;max-width:800px;margin:0 auto}
#products .title p {padding-top:15px}
#products h4 {max-width:500px;margin:0 auto;color:#004665;font-size:29px;line-height:37px}
#products .inner > div {max-width:770px;width:100%}
#products .top {margin-bottom:25px}
#products .top span {position:relative;margin-right:20px}
#products .top span:after {position:absolute;width:100%;height:3px;background:#add4e0;content:'';left:0;bottom:-8px}
#products .top h3 {color:#004a66;font-size:38px}
#products .view {color:#004665;display:inline-block;margin-top:10px;cursor:pointer;padding:7px 45px 3px 0px;background:url('images/view-plus.png') no-repeat right center}
#products .view.close {background:url('images/view-close.png') no-repeat right center}
#products .view.back {margin:0;padding-left:45px;background:url('images/view-back2.png') no-repeat left center}
#products p.back {z-index:9;position:fixed;top:0;right:0;margin:auto;width:100%;text-align:left;background:#fff;box-shadow: 0px 2px 10px 5px rgba(0,0,0,0.10);left:0;padding-left:15px; }
#products p.back span {display:inline-block;padding-top:20px;padding-bottom:20px;}
#products .hover {display:none}
#products .hover .text{text-align:left}
#products .hover .text h3 {padding:25px 0;color:#004665;font-size:41px;line-height:46px}
#products .hover .button {margin-top:35px}
#products #portal-go .right {padding-left:50px}
#products #portal-go .right .text{max-width:570px}
#products #portal-go img.main{margin-top:28px}
#products #portal-plus img.main{margin-top:132px}
#products #portal-plus .text {max-width:650px}
#products ul li {margin-bottom:15px;padding-left:45px;background:url(images/icon-check.png) no-repeat left}
#products .why {padding-top:80px;padding-bottom:80px;margin-top:70px;padding-left:2000px;padding-right:2000px;margin-left:-2000px;margin-right:-2000px;background:#faf9f4;text-align:left}
#products .why h3 {padding-bottom:30px;font-size:41px;color:#004665}
#products .why .icons {margin-top:30px}
#products .why .icons img {margin-left:25px}
#products #portal-go .why .left {padding-left:100px}
#products #portal-plus .why .right {padding-left:50px}
#products .img img {position:relative;z-index:2}


.bounce-in {
  animation: bounce-in 0.8s ease;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
}

.bounce-in.c2 {
	animation-delay: 0.8s;
}

@keyframes bounce-in {
  0% {
	 opacity: 0;
    transform: scale(.3);
  }
  
  
  25% {
    opacity: 0.5;
    transform: scale(1.05);
  }
  50% {
	  opacity: 1;
    transform: scale(.9);
  }
  75% {
    transform: scale(1.02);
  }
  100% { transform: scale(1);   opacity: 1; }
}
.circle {
	position:absolute;
  width: 335px;
  height: 335px;
  border-radius: 50%;
  background: #add3df;
  opacity:0;
   transition: opacity 1s ease;
  
}
.circle.on {opacity:1}
.circle.c1 {top:50px;left:50px}
.circle.c2 {top:120px;right:0}

#portal-plus .circle.c1 {top:150px}
#portal-plus .circle.c2 {top:240px}

#c2l {z-index:10;height:670px;overflow:hidden;background:#677b8c;color:#fff;}
#c2l .container {height:100%;position:relative;z-index:1}
#c2l h3 {padding:25px 0;font-size:41px;line-height:1.2}
#c2l:after {content:'';width:2000px;height:2000px;position:absolute;left:66%;right:0;top:0;background:#768797;transform:rotate(142deg)}
#c2l .left {max-width:600px}
#c2l .button {margin-top:40px}
#c2l .right img {right:-100px;top:0;bottom:0;margin:auto}
#c2l .c2l {   width:100%;max-width: 400px;    margin-left: -42px;margin-bottom: -40px;}
#coming { z-index: 10;    position: relative;overflow:hidden;padding:80px 0 40px 0;text-align:center; background:#f2f0e5 url(images/circle.png) no-repeat;background-size:1920px;background-position:bottom center}
#coming h3 {font-size:54px;line-height:62px}
#coming .title {color:#004665;margin:0 auto;max-width:945px}
#coming  p {padding:20px 0 30px 0;color:#464646}
#win {background:#add4e0;padding:70px 0}
#win .flex {justify-content: space-around;}
#win h4 {max-width:603px;font-size:58px;line-height:60px;color:#004665}
#win p {padding-top:15px;max-width:530px;color:#04465e}
#win .flex > div {width:50%}
#win .left img {max-width:100%}
footer { z-index: 99999999;    position: relative;padding:50px 0;font-size:12px;line-height:21px;background:#272e39;color:#9ca5b0}
footer .inner {max-width:820px;margin:0 auto}
footer .logo {left:-95px;top:0}
footer p {padding-bottom:20px}
.container{max-width:1470px;margin:auto;padding:0 15px}
.container.w1280{max-width:1280px;margin:auto;padding:0 15px}

#content {overflow:hidden}
.home-form header span {
	color: #004665;
	font-size: 26px;
}
#hero.form {
	height: 100vh;
	padding-top: 110px;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 70vh;
	    z-index: 999999999;
		
}
#hero.form #popupclose {cursor:pointer;width:16px;height:15px;position:absolute;top:20px;right:20px;background:url('images/close.png')}
#hero.form .form-page-container h1{
	font-size:100px;
	line-height:0.9
}
#hero.form .form-page-container {
	width: 100%;
	margin-bottom: 30px;
}
#hero.form .form-page-container p {
	padding-top: 15px;
	font-size:33px;
	line-height:45px;
	max-width:550px;
	margin-left:auto;
	margin-right:auto
}
#hero.form .w1280-half {
	max-width: 685px;
	margin: auto;
}
#hero.form .field-input {
	padding: 0 7px;
}

#hero.form input[type="text"],
#hero.form input[type="email"]  {
	width: 100%;
	margin: 1px 0;
	padding: 0px 30px;
	color: #333;
	font-family: 'GraphikRegular';
	font-size: 21px;
	height:58px;
	line-height: 58px;
	border: 1px solid #fff;
	border-radius: 30px;
}
#hero.form input[type="submit"], #hero.form .button {
	margin: 25px 0;
	padding: 0px 35px 0;
	color: #fff;
	height:60px;
	font-family: 'GraphikMedium';
	font-size: 21px;
	border:0;
	line-height: 60px;
	border-radius: 30px;
	background-color: #004665;
	cursor:pointer;
}
.gf_progressbar_wrapper,
.gform_validation_errors,
.gfield_description.validation_message.gfield_validation_message {display:none}
.gform_wrapper.gravity-theme .gform_page_footer {text-align:center}
#hero.form input::placeholder { /* Most modern browsers support this now. */
	color: #333;
	font-family: 'GraphikRegular';
	font-size: 21px;
}
#hero.form #gform_page_1_2 {
	
	align-items: center;
	
	z-index: 9999;
}
#hero.form #step3.popup {
	/*background-color: transparent;*/
	background-image: url(/wp-content/themes/basic-template/images/bg3@2x.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#hero.form #step3.popup .success-header {
	position: absolute;
	top: 45px;
	left: 0;
	right: 0;
	margin: auto;
}
#hero.form .popup .popup-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 700px;
	max-width: 100%;
	height: 100vh;
	margin: 0 auto;
	text-align: center;
	/*background-color: yellow;*/
}
#hero.form .popup .popup-container .terms-container {
	position: relative;
    align-self: stretch;
	height: 70%;
	padding: 20px 0;
	background-color: #fff;
}
#hero.form .popup .popup-container .terms {
	height: 100%;
	padding: 0 30px;
	overflow-y: scroll;
}
#hero.form .popup .popup-container .footer {
    align-self: stretch;
}
#hero.form .popup .popup-container h1 {
	color: #004665;
	font-family: 'Lyon Display Web';
	font-size: 55px;
	font-weight:  700;
	font-style:   normal;
	font-stretch: normal;
	line-height: 1em;
}
#hero.form .popup .popup-container .terms h1 {
	padding-top: 10px;
	font-size: 45px;
}
#hero.form .popup .popup-container p {
	font-size: 21px;
}
#hero.form .popup .popup-container .terms p {
	padding-top: 15px;
	color: #333333;
	font-size: 18px;
	line-height: 1.5em;
	text-align: left;
}
#hero.form #step3.popup .popup-container p {
	padding-top: 25px;
}
#hero.form .popup .popup-container a.close-button {
	position: absolute;
	top: -7px;
	right: calc((100% - 700px + 7px)/2);
	margin: 0;
	padding: 0;
	border-width: 0;
	border-radius: 0;
	background-color: transparent;
	color: #888;
	font-size: 18px;
}
#hero.form .popup .popup-container a {
	display: inline-block;
	margin: 25px 0;
	padding: 3px 35px 0;
	color: #fff;
	font-family: 'GraphikRegular';
	font-size: 16px;
	line-height: 35px;
	border: 1px solid #004665;
	border-radius: 20px;
	background-color: #004665;
}
.gform_previous_button.button {display:none}
.terms-container {    background: #fff;
    height: 70vh;
    overflow: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    max-width: 820px;
	padding:50px;
	    bottom: 0;
    }
.gfield_error input {border:1px solid red !important}
.terms-container h3 {font-size:52px;text-align:center;padding-bottom:20px}
#hero .terms-container p {color:#333;font-size: 21px;line-height:33px;padding-top:20px}	
body.step2 #hero.form {padding-top:0} 
body.step2:after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(255, 255, 255, 0.5);}	

body.step2 .gform_page_footer {  z-index:1;bottom:0;  left: 0;    width: 100%; right:0;   position: absolute}
#hero .terms-container{ border-top:20px solid #fff;border-bottom:20px solid #fff;   z-index: 1;}
.step3{ opacity:0;visibility:hidden;top:0;left:0;right:0;bottom:0;margin:auto; position: absolute;    z-index: 9999; }
.step3 .inner{    height: 100vh;    width: 100%;  position: relative;    z-index: 9999;    display: flex;    align-items: center;    justify-content: center; }
.step3 h4 {line-height:1;font-size:75px;color:#004665}
.step3 p {padding-top:20px;font-size:33px;color:#004665;line-height:45px}
body.step-3 {padding:0px}
body.step-3 #hero {overflow:hidden;padding-top:0 !important}
body.step-3 #step1 {display:none}
body.step-3 .step3 {opacity:1;visibility:visible}
body.step-3 #hero.form {background-image:none !important}
.formhide {display:none}
body.step-3 .formhide{display:block}
body.step-3 .facebook-presents {display:none}
body.step-3 header {z-index: 99999999;}
.facebook-presents {color:#004766;font-size:26px}
#halfmoon { transition: all 2s ease-out;   background: #add4e0;
    z-index: 9999999999999999999999; 
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 0%;
    border-radius: 50%;}

.halfmoon #halfmoon {top: -20%;    height: 150%;}
.halfmoon header {z-index:99999999}
.halfmoon header .facebook-presents {display:none}
.lp { transition: all 3s ease-out;opacity:0;visibility:hidden;height:0;background:#fff;position:relative;z-index:9999999}
.lp.act {height:100%;opacity:1;visibility:visible}


@media only screen and (min-width:768px) and (max-height:930px) and (min-height:770px){
	#hero.form .form-page-container h1{font-size:10vh;}
	.home-form header span {font-size:3vh}
	header {top:1vh}
	#hero.form .form-page-container p {    font-size: 3.5vh;    line-height: 5vh;}
	#hero.form input[type="text"], #hero.form input[type="email"] {height:45px;line-height:45px}
}

@media only screen and (min-width:768px) and (max-height:770px){
	body:not(.step2,.step-3) #hero.form {height:100%;padding:130px 0 80px 0}
	.terms-container {height:60vh}
	 #hero.form  {background-size: 733px}
	
}


@media only screen and (max-width:768px){
	#hero.form img.gform_ajax_spinner {width:20px}
	#hero.form:after {content:'';position:absolute;width:120%;height:100vw;border-radius:50%;background:#add4e0;bottom:0;left:-10%;    margin-bottom: -60%;}
	body.step-3 #hero.form:after{display:none}
	#hero.form > .container {z-index:1}
	#hero.form .flex>.half {
		width: 100%;
	}
	#hero.form .field-input {
		padding: 0;
	}
	#hero.form {
		background:#f2f0e5 !important
	}
	#hero.form #step2.popup {
		background-color: #fff;
		background-image: none;
	}
	#hero.form .popup .popup-container {
		padding: 0 15px;
	}
	#hero.form #step2.popup .popup-container .terms-container {
		height: 80%;
	}
	#hero.form #step2.popup .popup-container .terms {
		padding: 0 10px;
	}
	#hero.form #step2.popup .popup-container .terms h1 {
		font-size: 30px;
	}
	#hero.form #step3.popup .popup-container h1 {
		font-size: 45px;
	}
	#hero.form #step3.popup .success-header img {
		position: relative;
		width: auto;
		max-width: none;
	}
	#hero.form .form-page-container h1 {font-size:60px}
	#hero.form {height:100%;padding:80px 0 30px 0}
	.home-form header span {font-size:22px}
	#hero.form .form-page-container p {font-size:19px;line-height:24px}
	#hero.form input[type="text"], #hero.form input[type="email"],#hero.form input[type="submit"], #hero.form .button ,	#hero.form input::placeholder 	{font-size:16px;height:45px;line-height:45px}
	#hero.form .container > div {width:100%}
	#hero .terms-container p {text-align:left;font-size:12px;line-height:20px}
	.terms-container h3 {line-height:1.1;font-size:33px}
	.terms-container {position:static;padding:25px;    height: calc(100vh - 150px);}
	body.step2 .terms-container {margin-top:30px}
	body.step2 .terms-container .terms {height:300px;}
	body.step2 .terms-container .terms p {padding-top:0 !important;padding-bottom:30px !important}
	body.step2:after  {display:none}
	body.step2 .gform_page_footer {position:static}
	body.step2 .center.relative.form-page-container {display:none}
	body.step-3 #hero.form{height:100vh}
	.step3 h4 {font-size:45px}
	body.step-3.end #hero {    padding-top: 140px !important;}
}

.video-container {border-radius: 15px;overflow:hidden;cursor: pointer;position: relative;}
.video-container video { border-radius: 15px;   transform: translateY(3px);display:block;width: 100%;}
.video-container svg {position: absolute;top: 50%;left: 50%;max-width: 70px;transform: translate(-50%,-50%);}

.fade-video {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

.light-video {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  overflow: visible;
	width: 80%;
}

.light-video video {
  border-radius: 0;
  width: 100%;
  transform: translate(-50%, -50%);
	max-width: 1280px;
}

.boxclose {
  color: #3A3D44;
  border-radius: 50%;
  background: #fff;
  font-size: 31px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 48px;
  padding: 0 17px;
  position: fixed;
  right: 30px;
  top: 20px;
  z-index: 1002;
  cursor: pointer;
}

.boxclose:before {
  content: "×";
}

.fade:hover ~ .boxclose {
  display:none;
}

.test:hover ~ .test2 {
  display: none;
}