/* DEFAULT STYLES */
.text-dark-blue { color: #001C2D; }
.text-blue { color: #007ECA;}
.text-dark-opposite { color: #B11215; }
.text-opposite { color: #E7523A;}
.text-complimentary { color: #00E4BF;}

.bg-dark-blue { background: #001C2D; }
.bg-blue { background: #007ECA;}
.bg-dark-opposite { background: #B11215;}
.bg-opposite { background: #E7523A;}
.bg-complimentary { background: #00E4BF;}

.text-big { font-size: 1.4em; }
.text-medium { font-size: 1.2em; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }



.img-responsive { width: 100%; }

.font-complimentary { font-family: 'Source Sans Pro', sans-serif; }

.no-padding {padding: 0; }
.show-mobile { display: none; }
.breath { padding: 0 30px; }

/* OVER WRITING */
body {
    font-family: 'Lato', Arial;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;

    color: #3c434f; 

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
}

a { color: #B11215; }

body,
html { width: 100%; height: 100%; margin: 0px; padding: 0px; }

.sticky-header { position: fixed; top: 0; width: 100%; z-index: 999;  -webkit-box-shadow: 0 5px 20px -6px #333; -moz-box-shadow: 0 5px 20pxx -6px #333; box-shadow: 0 5px 20px -6px #333; }
.sticky-header-mail { display: block; width: 100%; }
.sticky-header + .main-container { padding-top: 130px; }

.content-wrapper-top { max-width: 1180px; margin: 0 auto; }
.content-wrapper { max-width: 1180px; margin: 0 auto;}
.pure-menu-heading img { height: 40px; }
.pure-button-pills { border-radius: 0; }
.pure-button-call.pure-button-pills:before, a.pure-button-call.pure-button-pills:before { background-color: #001C2D; }
.pure-button {padding: .8rem 2.5rem; margin-bottom: 10px; }

.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { background-color: #6FB8E4; }
.pure-button-secondary, a.pure-button-secondary { background-color: #568FB1; }
.pure-button-complimentary, a.pure-button-complimentary { background-color: #001C2D; }
.pure-button-call, a.pure-button-call { background-color: #B11215; color: #FFF; }

.round-icon { width: 150px; border-radius: 50%;  background: #568FB1; height: 150px; margin: 0 auto; }
.round-icon div { margin: 0 auto; top: 20%; position: relative; }


/* .top bar */
.top { display: block; width: 100%; height: 48px; }
.top a { color: #FFF; }
.top .section-tab a { float: left; width: 33%; text-align: center; margin: 0; padding: 0;  padding: 15px 0;  text-decoration: none; font-size: 12px; font-weight: bold; }
.top .section-tab .business-tab { background: #315164; }
.top .section-tab .private-tab { background: #568FB1; }
.top .social { padding-top: 10px; }
.top .social a { margin-right: 20px; font-size: 18px; }
.top .hvr-sweep-to-right:before { background: #001C2D !important; }
.hamburger-nav { display: none; }

/* .header */
.header { width: 100%; padding: 20px 0 10px 0; background: #FFF; }
.header .content-wrapper { background: transparent; }
.mobile-menu { display: block; }
.header .pure-menu-heading { margin-top: 10px; }
.header .pure-menu-item { padding-bottom: 10px ; }
.header .pure-menu-link { font-size: 16px; color: #001C2D; }
.pure-menu-item .pure-button-pills { font-size: 16px; margin-top: 6px; }
.header .pure-menu-link:hover, .header .pure-menu-selected a { background: transparent; color: #6FB8E4 !important; }
.header .hvr-underline-from-left:before { height: 3px; background: #6FB8E4 !important; }

/* Submenu */
.submenu { width: 100%; background: #6FB8E4; display: block; position: fixed; margin-top: 145px; z-index: 999; }
.submenu a { float: left; text-align: center; margin: 0; padding: 12px 25px 12px 25px; text-decoration: none; font-size: 12px; font-weight: bold; color: #FFF; }
.submenu .sel, .submenu a:hover { background: #315164; }

/* Overlay layer */
.overlay-layer { position: absolute; width: 100%; top: 680px; }
.overlay-layer-no-image { position: absolute; width: 100%; top: 200px; }

/*.splash-container { width: 100%; background: transparent url('/assets/img/main-01.jpg') no-repeat bottom center; background-size: cover; height: 550px; margin-top: 130px; }
*/
.splash-container { width: 100%; height: 550px; margin-top: 130px; overflow:hidden; display: block; position: fixed; }
.roadmap-splash { background: #000 url('/assets/img/team.jpg') no-repeat; background-position-y: center; background-size: cover; }
.about-splash { background: #000 url('/assets/img/about.jpg') no-repeat; background-position-y: center; background-size: cover; }
.ecosystem-splash { background: #000 url('/assets/img/ecosystem.jpg') no-repeat; background-position-y: center; background-size: cover; }
.business-splash { background: #000 url('/assets/img/business.jpg') no-repeat; background-position-y: center; background-size: cover; }
.private-splash { background: #000 url('/assets/img/private.jpg') no-repeat; background-position-y: center; background-size: cover; }
.protocol-splash { background: #000 url('/assets/img/protocol.jpg') no-repeat; background-position-y: center; background-size: cover; }
.clcard-splash { background: #000 url('/assets/img/cl-background.jpg') no-repeat; background-position-y: center; background-size: cover; }

#bg-main-video { position: absolute; top: 10%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -99; overflow: hidden; }

.splash-container .over-video {
	width: 94%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 10% 3%;
	min-height: 80px;
	background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, #000000 100%)
}
.splash-container .over-video h1 {
	color: #FFF;
	margin-top: 10%;
	font-weight: lighter;
	font-size: 42px;
}
.splash-container .over-video h2 {
	color: #FFF;
}
.splash-container .over-video .card {
	width: 80%;
	margin: 15% 0 0 10%;
}


/* SPLASH TEXT OVER */
.splash { width: 40%; float: right; padding: 0 30px 30px 30px; background: rgba(0, 29, 47, 0.8); margin-top: 10%; }
.splash-head { font-family: 'Source Sans Pro', sans-serif; color: #FFF; font-weight: bold; font-size: 38px; margin-bottom: 0; }
.splash-subhead { color: #FFF; font-size: 18px;}

.download-bar { width: 100%; padding: 30px 0; background-color: #001C2D; text-align: center; }
.download-bar ul { margin: 0; padding: 0; margin: 0 auto; }
.download-bar ul li a { color: #FFF; }
.download-bar ul li { display: inline; font-size: 12px; color: #FFF; letter-spacing: normal; margin-right: 40px; padding: 10px 0; vertical-align: top; }
.download-bar ul li span { margin-left: 15px; position: relative; line-height: 60px; vertical-align: top; }
.download-bar ul li i { font-size: 50px; }

.main-container { width: 100%; background: #FFF; padding-bottom: 60px; }

.intro { text-align: center; }
.intro h1 { font-family: 'Source Sans Pro', sans-serif; font-size: 52px; margin-bottom: 0; }
.intro h2 { font-size: 22px;  font-weight: lighter; font-family: 'Lato'; }
.content-subhead { font-size: 42px;  font-weight: lighter; font-family: 'Lato'; }
.main-features { margin-top: 60px; border-top: 1px dotted #CCC; padding-top: 60px; }
.main-features .breath { padding: 0 40px; height: 100%; min-height: 100%; display: flex; justify-content: center; flex-direction: column; }
.thanks { width: 100%; background: #ffe9b8 url('/assets/img/sparkle.png') no-repeat top right; text-align: center; padding: 80px 0; }
.thanks h1 { font-size: 62px; color: #d0a23c; font-weight: lighter; margin: 0; padding: 0 0 20px 0; }
.thanks h2 { font-size: 24px; margin: 0; padding: 0 0 10px 0; }
.thanks p { font-size: 18px; }

.lapox { width: 100%; text-align: center; overflow:hidden; display: block; z-index: 1; position: relative }
.lapox .dynamic-bg {width: 100%; height: 100%; background: rgba(0,0,0,.6); padding: 80px 0; }
.lapox h1 { font-size: 62px; color: #FFF; font-weight: lighter; margin: 0; padding: 0 0 20px 0; }
.lapox h2 { font-size: 24px; color: #FFF; margin: 0; padding: 0 0 10px 0; }
.lapox p { font-size: 18px; color: #FFF; }
#lapox-video { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1; overflow: hidden; }

.icon-container { text-align: center; }
.icon-container .livicon-evo { margin: 0 auto; }

/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(0,28,47);
  background: -moz-linear-gradient(top, rgba(0,28,47,0) 0%, rgb(0,28,47) 8%, rgb(0,28,47) 92%, rgba(0,28,47,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(0,28,47,0) 0%, rgb(0,28,47) 8%, rgb(0,28,47) 92%, rgba(0,28,47,0) 100%);
  background: -o-linear-gradient(top, rgba(0,28,47,0) 0%, rgb(0,28,47) 8%, rgb(0,28,47) 92%, rgba(0,28,47,0) 100%);
  background: -ms-linear-gradient(top, rgba(0,28,47,0) 0%, rgb(0,28,47) 8%, rgb(0,28,47) 92%, rgba(0,28,47,0) 100%);
  background: linear-gradient(to bottom, rgba(0,28,47,0) 0%, rgb(0,28,47) 8%, rgb(0,28,47) 92%, rgba(0,28,47,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 45%;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 45%;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  
  font-weight: 600;
  text-align: left;
}

.faq-table td {
	border-bottom: 1px solid #F1F1F1;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(254,0,0);
  z-index: 10;
}
.direction-l .flag-green:before,
.direction-r .flag-green:before {
  border: 4px solid rgb(84,183,74);
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30%;
  height: 0;
  width: 20%;
  border-bottom: 1px dotted #000;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 110%;
  height: 0;
  width: 20%;
  border-bottom: 1px dotted #000;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

.progress-item { width: 100%; display: block; float: left; margin-bottom: 15px; }
.progress-item .title { display: inline-block; width: 35%; float: left; }

/* PROGRESS BARS */
.progress-bar {
	display: inline-block;
	height: 20px;
	width: 65%;		
	-webkit-border-radius: 5px;
	border-radius: 5px;
	float: left;
	background: #CCC;
}

.progress-bar span {
	display: inline-block;
	height: 100%;	
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  -webkit-transition: width .4s ease-in-out;
  -moz-transition: width .4s ease-in-out;
  -ms-transition: width .4s ease-in-out;
  -o-transition: width .4s ease-in-out;
  transition: width .4s ease-in-out;   
  font-size: 13px;
  font-weight: bold;
  text-align: center; 
}

.blue span {
	background-color: #6FB8E4;   
}
.stripes span {
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            
	
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
}
@-webkit-keyframes animate-stripes { 
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
.shine span {
	position: relative;
	top: -6px;
}
.shine span::after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;			
	-webkit-animation: animate-shine 2s ease-out infinite;
	-moz-animation: animate-shine 2s ease-out infinite; 			
}
@-webkit-keyframes animate-shine { 
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}
@-moz-keyframes animate-shine {
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}

.team h3 { margin-bottom: 30px; }
.team .breath { padding: 0 30px; }
.team .team-member { text-align: center; margin-bottom: 30px; }
.team .team-member .profile { border-radius: 50%; max-width: 150px; }

.news { width: 100%; background: #FFF; padding: 60px 0; }
.news .news-container a { text-decoration:  none; color: #000; }
.news .img-container { width: 100%; display: block; height: 180px; background-position: center center; background-size: cover; margin-bottom: 20px; }
.news .date { width: 50px; background: #FFF; position: absolute; display: block; padding: 6px 10px; text-align: center; top: 0; margin-left: 20px; font-size: 16px; z-index: 1; }
.news h2 {    font-size: 24px; margin: 0; padding: 0 0 10px 0; }
.news .author { color: #CCC; margin: 0; padding: 0; font-weight: bold; font-size: 12px; }


.footer { width: 100%; font-size: 14px; }
.footer a { color: #FFF; }
.footer .first-line { padding: 12px 0; text-align: center; background: #000; color: #FFF; }
.footer .second-line { padding: 12px 0; text-align: center; background: #1c1d2a; color: #FFF; }
.footer .second-line .social { text-align: left; }
.footer .second-line .social a { font-size: 24px; margin-right: 12px; }
.footer .second-line .footer-menu {text-align: right; }
.footer .second-line .footer-menu a { margin-right: 8px; font-weight: bold; text-decoration: none; }
.footer .second-line .footer-menu .small-text { font-size: 12px; color: #CCC; }

/* MOBILE */
@media only screen and (max-width: 980px) {
	.show-mobile { display: block; }
	.hide-mobile { display: none !important; }
	
	.content-wrapper-top { width: 100%; }
	.content-wrapper { max-width: 880px; width: 85%; margin: 0 auto; }
	.pure-menu-heading { width: 100%; text-align: center;}
	.top { height: 96px; }
	.top .social { text-align: left; margin-left: 20px; }
	.hamburger-nav { display: inline-block; position: absolute; right: 20px; }
	.mobile-menu { display: none; background: #FFF; width: 100%; position: relative; z-index: 9999; }
	.mobile-menu ul { width: 100%; margin: 0; padding: 0; }
	.mobile-menu ul li { width: 100%; text-align: center; padding: 6px 0; border-bottom: 1px solid #CCC; display: block !important; }
	.mobile-menu ul li:last-child { border-bottom: 0; padding-top: 18px; }
	.download-bar ul li span { margin-left: 15px; position: relative; line-height: 30px; vertical-align: top; }
	.download-bar ul li i { font-size: 24px; }
	.thanks { background: #ffe9b8 url('/assets/img/sparkle.png') no-repeat center center; }
	.footer * { text-align: center; }
	.footer .second-line * { text-align: right; }
	.footer .social h4 { text-align: left; }
	.footer .social a { text-align: center; }
	
}
/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {
.progress-item .title { width: 100%; }

/* PROGRESS BARS */
.progress-bar {
	width: 100%;		
}
.timeline {
 	width: 100%;
	padding: 4em 0 1em 0;
}

.timeline li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	float: none;
	width: 100%;

	text-align: center;
}

.flag-wrapper {
	text-align: center;
}

.flag {
	background: rgb(255,255,255);
	z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid rgb(255,80,80);
	z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: "";
	display: none;
}
.direction-l .flag-green:before,
.direction-r .flag-green:before {
  border: 4px solid rgb(84,183,74);
}

.time-wrapper {
	display: block;
	position: relative;
	margin: 4px 0 0 0;
	z-index: 14;
}

.direction-l .time-wrapper {
	float: none;
}

.direction-r .time-wrapper {
	float: none;
}

.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: rgb(245,245,245);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	box-shadow: 0 0 1px rgba(0,0,0,0.20);
	
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
	
  z-index: 15;
}

}

@media screen and (min-width: 400px ?? max-width: 660px) {

.direction-l .desc,
.direction-r .desc {
	margin: 1em 4em 0 4em;
}

}