html {
  height: 100vh;
  scroll-behavior: smooth;
}

body {
  height: 5000px;
  background: white;
	padding:0;
	margin:0;
	margin-left:auto;
	margin-right:auto;
}

div,p {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: .25s; /* Safari */
	transition: .25s;
}

canvas {
	-webkit-transition: .5s; /* Safari */
	transition: .5s;
}

	@font-face {
    font-family: 'SharpSans-Book';
    src: url('fonts/SharpSans-Book.ttf') format('ttf'),
		url('fonts/SharpSans-Book.woff2') format('woff2'),
        url('fonts/SharpSans-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	}

	@font-face {
    font-family: 'SharpSans-Bold';
    src: url('fonts/SharpSansDisplayNo1-Bold.otf') format('otf'),
		url('fonts/SharpSansDisplayNo1-Bold.woff2') format('woff2'),
        url('fonts/SharpSansDisplayNo1-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
	}

@font-face {
    font-family: 'SharpSans-Semibold';
    src: url('fonts/SharpSansDisplayNo1-Semibold.otf') format('otf'),
		url('fonts/SharpSansDisplayNo1-Semibold.woff2') format('woff2'),
        url('fonts/SharpSansDisplayNo1-Semibold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
	}

	@font-face {
    font-family: 'SharpSans-Medium';
    src: url('fonts/SharpSans-Medium.otf') format('otf'),
		url('fonts/SharpSans-Medium.woff2') format('woff2'),
        url('fonts/SharpSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
	}

h1 {
		font-family:'SharpSans-Bold', Helvetica, Arial;
		font-size: 7em;
		margin: 0;
	}
	
	h2 {
		font-family:'SharpSans-Bold', Helvetica, Arial;
		margin:0;
		font-size:3em;
		line-height:1;
	}
	
	h3 {
		font-family:'SharpSans-Bold', Helvetica, Arial;
		font-size: 2em;
		margin: 0;
	}
	
	p {
		font-family:'SharpSans-Book', Helvetica, Arial;
		font-size:1em;
		line-height:175%;
		widows: 3; 
		orphans: 3;
}

a {
	font-family:'SharpSans-Semibold', Helvetica, Arial;
	color:#002139;
}

p,h1,h2,h3,h4 {
	color:#002139;
}


.clear {
	clear:both;
}

.no-mob {
	display:inherit;
}
	
	.no-desk {
	display:none;
}

.center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.center-vert {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.container {
	width:100%;
	max-width:1280px;
	margin:auto;
	height:100%;
}

.row {
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
	height:auto;
	padding:40px;
	margin-bottom:20px;
}

.col-1 {
	width:8.33%;
	min-height:1px;
	float:left;
}

.col-2 {
	width:16.6%;
	float:left;
	height:auto;
	min-height:1px;
}

.col-4 {
	width:33.3%;
	float:left;
	height:auto;
	min-height:1px;
	position:relative;
}

.col-6 {
	width:50%;
	float:left;
	height:auto;
	min-height:1px;
}

#hero-lightpass {

}

#hero-lightpass-2 {
	position: -webkit-sticky;
    position: sticky;
	float:right;
	top:0;
}

.spacer {
	height:200px;
	width:100%;
}

.nav {
	width:100%;
	height:70px;
	padding:25px 30px 0px 30px;
	background-color:white;
	z-index:9998;
	position:relative;
}

.nav-ico {
	height:100%;
	width:25%;
	float:left;	
}

.nav-lockup {
	height:100%;
	width:50%;
	float:left;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:10px;
}

.nav-button {
	width:25%;
	float:right;
}

.nav-button p {
	border-style:solid;
	border-width:2px;
	border-color:#002139;
	padding:10px 30px;
	border-radius:25px;
	width:auto;
	float:right;
	margin:0;
	cursor:pointer;
	font-family:'SharpSans-Semibold', Helvetica, Arial;
}

.nav-button p:hover {
	color:white;
	border-color:#26CCF0;
	background-color:#26CCF0;
}

.full-wrap.dblue-bg {
	background-color:#032441;
}

.inner-wrap {
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
}

#hero {
	z-index:9998;
	height:1000px;
}

.hero {
	height: calc(100vh - 100px);
	width:100%;
	background-color:white;
	padding:25px 30px 0px 30px;
    max-width:100%;
	min-height:600px;
	max-height:850px;
	position:relative;
	overflow:hidden;
}

.hero-inner {
	width:100%;
	height: calc(100%);
	background-image:url("imgs/hero_bg1.jpg");
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
	border-radius:25px;
	text-align:center;
	overflow:hidden;
	position:relative;
	max-height:800px;
}

.hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:100vw;
	height:140vh;
	min-width:1500px;
}

.hero-play {
	position:relative;
	top:85%;
	z-index:9998;
	color:white;
	font-size:18px;
}

.svg-wrap {
	width:150px;
	margin-left:auto;
	margin-right:auto;
}

.svg-wrap svg {
	width:50px;
}

.hero-play p {
	color:white;
	margin-top:10px;
}

.st0 {
	-webkit-transition: .25s; /* Safari */
	transition: .25s;
}

.st1 {
	-webkit-transition: .25s; /* Safari */
	transition: .25s;
}

.hero-play:hover .st1 {
	cursor:pointer;
}

.hero-play:hover p {
	color:#26CCF0;
}

.hero-play:hover .st0 {
	cursor:pointer;
	stroke:#26CCF0;
	fill:#26CCF0;
}

.hero-overlay {
	z-index:9997;
	height:100%;
	width:100%;
	background-image:url("imgs/cutout_scoot.png");
	background-size:100% 100%;
}

.intro-text {
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:155px;
	margin-bottom:155px;
	text-align:center;
	padding:15px;
}

.intro-text p {
	font-family:'SharpSans-Medium', Helvetica, Arial;
	font-size:1.3em;
}

.intro-text p span {
	color:#26CCF0;
}

.canvas-container {
	max-width: 100vw;
	height:5200px;
	top:0;
	z-index:0;
	position:relative;
	text-align:center;
}

.canvas-container .trigger:nth-of-type(1) {
	margin-top:100px;
}

.canvas-container .trigger:nth-of-type(2) {
	margin-top:1200px;
}

.canvas-container .trigger:nth-of-type(3) {
	margin-top:1800px;
}

.canvas-container .trigger:nth-of-type(4) {
	margin-top:2400px;
}

.canvas-container .trigger:nth-of-type(5) {
	margin-top:3000px;
}

.canvas-container .trigger:nth-of-type(6) {
	margin-top:4400px;
}

.canvas-container .trigger:nth-of-type(7) {
	margin-top:4200px;
}

.canvas-container .trigger:nth-of-type(8) {
	margin-top:4800px;
}

.canvas-container .trigger:nth-of-type(9) {
	margin-top:5400px;
}

.canvas-container .trigger:nth-of-type(10) {
	margin-top:6000px;
}

.canvas-container .trigger:nth-of-type(11) {
	margin-top:6200px;
}

.canvas-inner {
	height:100vh;
	width:100%;
	position:relative;
	position: -webkit-sticky;
    position: sticky;
	top:0;
	overflow:hidden;
	min-height:720px;
}

.canvas-wrapper {
	width:1280px;
	height:720px;
}

.canvas-text-hero {
	width:100%;
}

.canvas-text-hero h1 {
	font-size:6em;
	color:#26CCF0;
	line-height:83%;
}

.canvas-text-hero span {
	color:#002139;
}

.trigger {
	height:3px;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;	
}

.note {
	width:30vw;
	position:fixed;
	z-index:9997;
	text-align:left;
	font-size:22px;
}

.note p {
	font-size:16px;
	line-height:175%;
	margin-top:12px;
}

.note span {
	color:#26CCF0;
}

.note.left {
	transform: translate(-30vw, -50%);
}

.note.right {
	transform: translate(10vh, -50%);
}

#note-1 {
	z-index:9998;
	position:relative;
}

#note-1 .note-1-inner {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:9998;
}
#note-1 .note {
	width:500px;
}

#note-1 .note p span {
	font-size:24px;
	font-family:'SharpSans-Medium', Helvetica, Arial;
}

#note-2 {
	width:600px;
	top:50%;
	z-index:9998;
}

.note h2 {
	font-size:2.4em;
}

#note-3 {
	text-align:center;
	width:520px;
	top:33%;
	z-index:9998;
}

#note-4 {
	z-index:9997;
}

#ico-features {
	margin-top: 70px;
	margin-bottom: 70px;
	background-color:white;
	height:auto;
}

#ico-features p,h3 {
	text-align:center;
}

#ico-features p {
	font-size:0.9em;
	line-height:150%;
	color:#85A0B8;
	margin-top:15px;
}

#ico-features h3 {
	font-size:1.4em;
}

.ico-wrap {
	max-width:100px;
	height:auto;
	width:auto;
	margin-left:auto;
	margin-right:auto;
}

.text-wrap {
	padding:0px 20px;
}

#module-5,#module-6 {
	background-position:left bottom;
	background-size: contain;
	background-repeat: no-repeat;
	height:700px;
}

#module-5 .col-6 {

}

#module-5 p {
	color:#002139;
	font-size:14px;
	margin-top:14px;
}

#module-5 h2 {
	color:#002139;
	font-size:4em;
}

#module-6 {
	background-color:#032441;
	background-position:right bottom;
}

#myVideo {
	position:absolute;
	top:0;
	right:0;
	width:auto;
	height:100%;
}

#module-6 p {
	font-size:14px;
	margin-top:14px;
}

#module-6 h2 {
	color:white;
	font-size:4em;
}

#module-6 p {
	color:white;
}

#module-6 span {
	color:#26CCF0;
}

#module-5 .col-4,.col-6 {
	height:100%;
}

#module-6 .col-4,.col-6 {
	height:100%;
}

#module-5 h2 span {
	color:#26CCF0;
}

#infograph {
	margin-bottom:20px;
}

#infograph .hero-inner {
	background-image:url();
}

.infograph-track {
	width:calc(100vw - 600px);
	height:calc(500px);
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	margin-bottom:100px;
	border-style:solid;
	border-width:4px;
	border-color:#26CCF0;
	border-radius:60px;
	min-height:500px;
	max-width:1334px;
}

.infograph-dot-wrap {
	position:absolute;
	width:auto;
	height:40px;
	min-width:200px;
	right:105.5px;
}

.infograph-dot {
	width:20px;
	height:20px;
	background-color:#26CCF0;
	border-radius:999px;
	border-width:4px;
	border-color:white;
	border-style:solid;
}

.infograph-dot-big {
	width:120px;
	height:120px;
	position:absolute;
	left: 235px;
    top: 43%;
	border-width:4px;
	border-color:white;
	border-style:solid;
	border-radius:999px;
	background-color:#26CCF0;
}

.infograph-arrow-wrap {
	width:200px;
	height:100px;
	position:absolute;
	left: 105px;
}

.top-arrow {
    top: 100px;
}

.bottom-arrow {
    bottom: 100px;
}

.infograph-arrow-icon {
	width:100%;
	height:40%;
}

.infograph-arrow {
	width:100%;
	height:30%;
}

.infograph-arrow-text {
	width:100%;
	height:30%;
	font-family:'SharpSans-Semibold', Helvetica, Arial;
}

.infograph-arrow-text p {
	font-size:1.2em;
	font-family:'SharpSans-Semibold', Helvetica, Arial;
	margin:0;
}

.infograph-img {
	position:absolute;
	left:30px;
}

.infograph-text-wrap {
	position:absolute;
	left:85px;
}

.infograph-dot-big .infograph-text-wrap {
	left:-110px;
	top:40px;
	font-size:22px;
	text-align:right;
}

.infograph-text-wrap p {
	font-family:'SharpSans-Semibold', Helvetica, Arial;
}

.dot-1 {
	top:calc(26% - 15px);
}

.dot-2 {
	top:calc(38% - 15px);
}

.dot-3 {
	top:calc(50% - 15px);
}

.dot-4 {
	top:calc(62% - 15px);
}

.dot-5 {
	top:calc(74% - 15px);
}

.infograph-dot:nth-of-type(1) {
	
}

.footer {
	padding:25px;
	text-align:center;
}

.footer .nav-ico {
	width:15%;
	height:1px;
	float:left;
}

.footer .nav-ico img {
	float:left;
}

.footer .nav-button {
	width:15%;
	float:left;
}

.footer .nav-lockup {
	width:70%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.footer p {
	font-size:12px;
}

.footer p span {
	margin-left:15px;
	margin-right:15px;
}

.footer .nav-button img {
	margin-left: 15px;
}

@media screen 
    and (max-width : 768px) 
{
/*	
	canvas {
   		max-width: 600vw;
		margin-left: -550px;
	}
	*/
	
	.nav {
	width:100%;
	height: 65px;
padding: 5px 10px 10px 10px;
	background-color:white;
		z-index:9999;
		overflow:hidden;
	}
	
	.nav-ico {
		height:50px;
		width:25%;
		float:left;	
	}
	
	.nav-ico img {
		width:52px;
		margin-top:15px;
	}
	
	.nav-lockup {
		margin-top:7px;
		height:50px;
	}
	
	
	.nav-lockup img {
		width:110px;
		margin-top:15px;
	}
	
	.nav-button p {
		border-style:solid;
		border-width:1.5px;
		padding:8px 20px;
		border-radius:25px;
		font-size:10px;
		width:auto;
		float:right;
		margin:0;
		margin-top:10px;
	}
	
	#hero {
		height:70vh;
		min-height:none;
	}
	
	#hero.hero {
		padding-top:0px;
	}
	
	.hero {
	padding:25px 10px 0px 10px;
}
	.hero-overlay {
		opacity:0% !important;
	}
	
	.hero-play p {
		margin-top:0px;
	}
	
	.svg-wrap svg {
    width: 40px;
}
	
	#intro-text {
		margin-bottom:0;
	}
	
	#intro-text h3 {
		font-size:2em;
	}
	

	#hero-lightpass {
		width:800px;
	}
	
	.col-4 {
		width:100%;
	}
	
	.note {
		width:100%;
		position:fixed;
		z-index:9997;
		text-align:left;
		font-size:22px;
		padding:10px;
	}
	
	
	.canvas-container {
	height:5000px;
}
		/*
	
	.canvas-container .trigger:nth-of-type(1) {
	margin-top:1000px;
}

.canvas-container .trigger:nth-of-type(2) {
	margin-top:2000px;
}

.canvas-container .trigger:nth-of-type(3) {
	margin-top:3000px;
}

.canvas-container .trigger:nth-of-type(4) {
	margin-top:4000px;
}

.canvas-container .trigger:nth-of-type(5) {
	margin-top:5000px;
}

.canvas-container .trigger:nth-of-type(6) {
	margin-top:6000px;
}

.canvas-container .trigger:nth-of-type(7) {
	margin-top:7000px;
}

.canvas-container .trigger:nth-of-type(8) {
	margin-top:8000px;
}

.canvas-container .trigger:nth-of-type(9) {
	margin-top:9000px;
}

.canvas-container .trigger:nth-of-type(10) {
	margin-top:10000px;
}

.canvas-container .trigger:nth-of-type(11) {
	margin-top:11000px;
}
	
	*/

	.canvas-inner.center {
		transform: translate(-50%, -60%);
	}
	
	.canvas-text-hero {
		width:375px;
	}
	
	.canvas-text-hero h1 {
		font-size:44px;
	}
	
	.note {
		padding:20px;
	}
	
	.note p {
		font-size:14px;
		line-height:145%;
	}
	
	.note h1 {
		font-size:4em;
	}
	
	.note h2 {
		font-size:2em;
	}
	
	#note-1 {
		top:5%;
		transform:none;
		left:0;
		width:100%;
	}
	
	#note-1 .note.center {
		top:20%;
	}
	
	#note-2 {
		width:100%;
		text-align:center;
		top:30%;
	}
	
	#note-3 {
		width:100%;
	}
	
	#note-3 img {
		width:100%;
	}
	
	#note-4 {
		top:20%;
	}
	
	#note-2 h2 {
		font-size:2em;
	}
	
	#note-4 h2 {
		font-size:2em;
	}

.note span {
	color:#26CCF0;
}

.note.left {
	transform: translate(-50%, -50%);
}

.note.right {
	transform: translate(-50%, -50%);
}
	
	#module-5,#module-6 {
		height:800px;
		min-height:500px;
	    background-position: 40% bottom;
	    background-size: 140%;
		text-align:center;
	}
	
	#module-5 .hero-text-wrap {
		top:20%;
		padding:20px;
	}
	#module-6 .hero-text-wrap {
		top:20%;
			padding:20px;
	}
	
	#module-6 .col-4 {
		height:auto;
		text-align:center;
	}
	
	#module-6 .col-4 h2 {
		font-size:3em;
	}
	
	#module-6 .col-6 {
		height: 300px !important;
    width: 100%;
    position: relative;
	}
	
	#module-6 #myVideo {
		height:60%;
		bottom:0;
		top:inherit;
		height:40%;
	}
	
	#module-5 .col-6 {
		height: auto !important;
    width: 100%;
    position: relative;
	}
	
	#module-5 .col-4 h2 {
		font-size:3em;
	}
	
	
	#infograph .infograph-mobile {
		height:auto;
		width:100%;
		max-width:375px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#ico-features .row {
		margin-bottom:0;
		padding:0 20px;
	}
	
	#ico-features .col-4 {
		margin-bottom:40px;
	}
	
	.no-mob {
		display:none;
	}
	
	.no-desk {
		display:inherit;
	}
	
	#sign-off {
		display:none;
	}
	
	#module-6 {
		height:1200px;
	}
	
	#module-5 {
		height:800px;
	}
	
	#module-6 .col-4 {
		margin-top:55px;
	}
	
	#note-1 .note p {
	}
	
	#note-1 {
		padding:0px;
	}
	

	
	.note.center {
		top:40%;
	}
	
	#note-1 .note.center {
		width:90vw;
	}
	
	.footer p {
		width:100%;
	}
	
	.footer .nav-lockup a {
		width:100%;
		float:left;
		margin-bottom:5px;
	}
	
}