html {
  scroll-behavior: smooth;
}

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

@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,h2,h3,p {
	color:#002139;
}

h1 {
	font-family:'SharpSans-Bold', Helvetica, Arial;
	font-size: 7em;
	margin: 0;
}
	
h2 {
	font-family:'SharpSans-Bold', Helvetica, Arial;
	margin-bottom:18px;
	font-size:3em;
	line-height:1;
}
	
h3 {
	font-family:'SharpSans-Bold', Helvetica, Arial;
	font-size: 2em;
	margin: 0;
}

h4 {
	font-family:'SharpSans-Bold', Helvetica, Arial;
	font-size: 2em;
	margin:10px 0;
}
	
p {
	font-family:'SharpSans-Book', Helvetica, Arial;
	font-size:0.87em;
	line-height:175%;
	widows: 3; 
	orphans: 3;
}

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

a:visited {
	color:#26cff0;
}

a:hover {
	color:#26cff0;
}

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

.clear {
	clear:both;
}

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

.center-hor {
	margin-left:auto;
	margin-right:auto;
}

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

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

.row {
	width:100%;
	margin: 50px auto 50px auto;
	margin-left:auto;
	margin-right:auto;
	height:auto;
	padding:40px;
}

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

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

.col-3 {
	width:25%;
	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;
}

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

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

/* Nav */

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

.nav-ico {
	height:100%;
	width:25%;
	float:left;	
	margin-top:9px;
}

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

.nav-button {
	width:25%;
	float:right;
	margin-top:4px;
}

.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;
}

/* hero video */

#hero {
	z-index:9998;
}

.hero {
	height:800px;
	width:100%;
	background-color:white;
    max-width:100%;
	min-height:600px;
	max-height:850px;
	position:relative;
	overflow:hidden;
}

.hero-text {
	position:absolute;
	width:100%;
	text-align:center;
	margin-top:19%; 
}

.hero-text h1 {
	line-height:1;
}

.hero-text h1 span:nth-of-type(1) {
	color:white;
}

.hero-text h1 span:nth-of-type(2) {
	color:#90E8FB;
}

.hero-text h1 span:nth-of-type(3) {
	color:#26ccf0;
}

.hero-inner {
	width:100%;
	height: calc(100%);
	background-image:url("imgs/hero_bg1.jpg");
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
	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;
}

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

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

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

/* Intro */

#bshare-intro {
	text-align:center;
}

/* Photo-1 */

#bshare-photo1 {
	max-width:100%;
	padding:25px;
}

#bshare-photo1 .row {
	max-width:100%;
	padding:25px;
	background-image:url(imgs/bshare-photo1.jpg);
	height:600px;
	background-position:center center;
	background-size:cover;
	border-radius:25px;
	margin:0;
}

#bshare-photo1 img {
	border-radius:25px;
}

/* features */

#bshare-features {
	margin-bottom:25px;
}

#bshare-features .feature {
	float:left;
	width:20%;
	padding:0 15px;
	text-align:center;
	position:relative;
	height:160px;
}

#bshare-features .row {
	margin: 0;
}

#bshare-features .line {
	border-style:solid;
	border-width:0 0 1px 0;
	border-color:#001239;
	position:absolute;
	bottom:0;
	width:calc(100% - 30px);
}

#bshare-features h4 {
	font-size:1.4em;
}

/* Riders */

#bshare-riders {
	text-align:center;
	margin-top:75px;
}

#bshare-riders .row {
	width:100%;
}

.riders-row {
	width:100%;
	overflow:hidden;
}

.riders {
	margin-left:-10%;
	width:120%;
	margin-right:auto;
}

.rider {
	width:calc(25% - 30px);
	margin:10px;
	height:370px;
	background-color:red;
	border-radius:15px;
	float:left;
	background-position:top center;
	background-size:cover;
}

.riders div:nth-of-type(1) {
	background-image:url("imgs/riders/img1.jpg");
}

.riders div:nth-of-type(2) {
	background-image:url("imgs/riders/img2.jpg");
}

.riders div:nth-of-type(3) {
	background-image:url("imgs/riders/img3.jpg");
}

.riders div:nth-of-type(4) {
	background-image:url("imgs/riders/img4.jpg");
}


#bshare-riders-images {
	max-width:100%;
}

/* Feature-1 */

.main-feature {
	height:600px;
	overflow:hidden;
	position:relative;
	margin-top:255px;
}

.main-feature h2 {
	font-size:4em;
}

.main-feature .row {
	height:100%;
	margin:85px auto;
	position:relative;
}

#feature-1 .image {
	border-radius: 999px 0 0 999px;
	background-color:red;
	height:100%;
	width:70%;
	left:44%;
	position:absolute;
	background-image:url("imgs/feature-1.jpg");
	background-size:cover;
	background-position:center center;
}

#feature-2 .image {
	border-radius: 0 999px 999px 0;
	background-color:red;
	height:100%;
	width:60%;
	right:45%;
	position:absolute;
	background-image:url("imgs/feature-2.jpg");
	background-size:cover;
	background-position:center center;
}

#feature-1 .row .col-4 {
	margin-top:-65px;
}

#feature-2 .row .col-4 {
	margin-top:-65px;
}

.wrap {
	background-color:#F4FBFF;	
}

#feature-3 {
	text-align:center;
	padding: 80px 0;
	margin-top:100px;
}

#feature-3 .row {
	margin-top:0;
}

#feature-3 h2 {
	margin-bottom:45px;
}

#feature-3 div:nth-of-type(1) {
	margin-bottom:0;
}

#feature-3 img {
	width:80px;
}

#feature-3 .col-4 {
	padding:0 10px;
}

.mission {
	height:600px;
}


.mission .inner-image {
	height:100%;
	width:100%;
	background-size:cover;
	background-position: center center;
	border-radius:15px;
}

#mission-1 .inner-image {
	background-image:url("imgs/mission-1.jpg");
}

#mission-2 .inner-image {
	background-image:url("imgs/mission-2.jpg");
}

.mission .row {
	height:100%;
}

.mission .col-8 {
	height:100%;
}

#mission-1 h1 {
	margin-left:-15%;
	color:#26CCF0;
}

#mission-2 h1 {
	margin-left:45%;
	color:#E7C5AE;
}

.mission h1 {
	line-height:1;
}

#mission-3 {
	height:600px;
	margin-top:55px;
	position:relative;
}

#mission-3 .inner-image:nth-of-type(1) {
	height:100%;
	background-image:url("imgs/mission-3-1.jpg");
	background-size:cover;
	background-position: center center;
}

#mission-3 .inner-image:nth-of-type(2) {
	height:100%;
	background-image:url("imgs/mission-3-2.jpg");
	background-size:cover;
	background-position: center center;
}

#mission-3 .text-wrap {
	position:absolute;
	top:220px;
	width:100%;
	text-align:center;
}

#mission-3 h1 span:nth-of-type(1) {
	color:white;
}

#mission-3 h1 span:nth-of-type(2) {
	color:#26ccf0;
}

#city-cta {
	text-align:center;
}

#city-cta .row {
	margin:0;
}

#city-cta p {
	border-style:solid;
	border-width:2px;
	border-color:#002139;
	padding:10px 30px;
	border-radius:25px;
	width:200px;
	margin:20px auto;
	cursor:pointer;
	font-family:'SharpSans-Semibold', Helvetica, Arial;
}

#city-cta a {
	text-decoration:none;
}

#city-cta p:hover {
	color:white;
	border-color:#26CCF0;
	background-color:#26CCF0;
}

#sign-off {
	text-align:center;
}

.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) 
{
	
	.no-mob {
		display:none;
	}
	
	.no-desk {
		display:inherit;
	}
	
	.col-1 {
		width:100%;
	}
	
	.col-2 {
		width:100%;
	}
	
	.col-3 {
		width:100%;
	}
	
	.col-4 {
		width:100%;
	}
	
	.col-5 {
		width:100%;
	}
	
	.col-6 {
		width:100%;
	}
	
	.col-7 {
		width:100%;
	}
	
	.col-8 {
		width:100%;
	}
	
	.col-9 {
		width:100%;
	}
	
	.col-10 {
		width:100%;
	}
	
	.col-11 {
		width:100%;
	}
	
	.col-12 {
		width:100%;
	}
	
	.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;
		margin-top:12px;
	}
	
	.nav-ico img {
		width:52px;
	}
	
	.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:5px;
	}
	
	.hero-text h1 {
		font-size:6em;
		margin-top:200px;
	}
	
	#bshare-features .feature {
		width:100%;
		margin-bottom:45px;
	}
	
	.riders {
		text-align:center;
		width:calc(100% - 20px);
		margin-left:0;
	}
	
	.rider {
		width:100%;
		display:inline-block;
	}
	
	#feature-1 .image {
		border-radius:0 0 0 0;
		left:0;
		width:100%;
	}
	
	#feature-1 h2 {
		color:white;
	}
	
	#feature-1 p {
		color:white;
	}
	
	#feature-2 h2 {
		color:white;
	}
	
	#feature-2 p {
		color:white;
	}
	
	#feature-2 .image {
		border-radius:0 0 0 0;
		left:0;
		width:100%;
	}
	
	.main-feature {
		margin-top:55px;
	}
	
	.main-feature h2 {
		text-align:center;
	}
	
	.main-feature p {
		text-align:center;
	}
	
	#feature-3 {
		padding:0;
		margin-top:0;
	}
	
	#feature-3 .row h2 {
		margin-top:100px;
	}
	
	#feature-3 .col-4 {
		margin-bottom:55px !important;
	}
	
	#mission-1 h1 {
		margin-left:0;
		text-align:center;
		margin-top:25px;
		margin-bottom:25px;
		font-size:4em;
	}
	
	#mission-2 h1 {
		margin-left:0;
		text-align:center;
		margin-top:25px;
		margin-bottom:25px;
		font-size:4em;
	}
	
	#mission-3 h1 {
		line-height:0.9;
		font-size:4em;
		margin-top:150px;
	}
	
	#mission-2 .col-8 {
		margin-bottom:55px;
	}
	
	#mission-3 {
		margin-bottom:200px;
	}
	
	#mission-3 .text-wrap {
		margin-top:200px;
	}
	
	
	#sign-off img {
		width:300px;
		margin-top:100px;
	}
	
	.footer p {
		width:100%;
	}
	
	.footer .nav-lockup a {
		width:100%;
		float:left;
		margin-bottom:5px;
	}
	
}