@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro|Josefin+Sans:300,600|Raleway:700');

/* --- General Styling --- */

body{
	background-color: white;
	margin: 0;
    padding: 0;
	overflow-x: hidden;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #121212;
	-webkit-font-smoothing: antialiased;
}

p{
	color: #444;
}

img{
	width: 100%;
	height: auto;
}

section {
    padding: 50px 0;
}

area {
    display: inline;
    cursor: pointer;
}

figure{
	margin: 0;
}

iframe{
	border: none;
}

.body h2{
	font-size: 1.8em;
}

.body h3{
	font-size: 1.5em;
}

.body p, .body li{
	font-size: 15px;
	line-height: 1.5;
}

.body li{
	padding-bottom: 10px;
}

.body a {
	font-weight: bold;
	color: #cc1c2b;
}

.body a:link {
    text-decoration: none;
}

.body a:hover {
	color: #b70e1c;
	text-decoration: underline;
}

.body blockquote{
	border-left: 0.5em solid #cc1c2b;
	margin: 1.5em 0 1.5em 2em;
    padding: .75em .5em .75em 1em;
    background: #fff;
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
	font-size: 130%;
}

.body blockquote:before {
    display: block;
    height: 0;
    content: "“";
    margin-left: -.95em;
    font: italic 400%/1 Georgia,"Times New Roman", serif;
    color: #cc1c2b;
}

.bg-dark .body  blockquote p{
	border-color: #4eb5de;
	color: #444;
}

.bg-dark .body  blockquote{
	border-color: #4eb5de;
}

.bg-dark .body blockquote:before {
    color: #4eb5de;
}

.body cite{
	font-size: 80%;
	font-weight: 400;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* Dark Background Styling */
.bg-dark{
	background-color: #2e2e2e;
}

.bg-dark p, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark li, .bg-dark figcaption{
	color: #fff;
}

.bg-dark a{
	color: #4eb5de;
}

.bg-dark a:hover{
	color: #82d2f2;
}

.split-section{
	padding-bottom: 50px;
}

.split-section + section{ /*Target section directly below (as it will be content to be split*/
	padding-top: 50px;
	background-color: #3e3e3e;
}

.red{
	color: #F92C3E !important;
}

.white{
	color: white;
}

/* To control word breaks */
.new-line{
	display: inline-block; 
}

.underline{
	text-decoration: underline
}

/* To ensure screen readers display the correct text when icons have been used */
@media screen {
  .sr-only {
    display: none;
  }
}

.no-highlight {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
}

.no-highlight p, .no-highlight h1, .no-highlight h2, .no-highlight img{
	pointer-events: none;
}

.aligner {
  display: -ms-flex !important;
  display: -webkit-flex !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.aligner-item {
  max-width: 100%;
}

.videoWrapper {
    position: relative;
    padding-bottom: calc(56.25% + 1rem);
    height: 0;
}

.videoWrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	padding-bottom: 15px;
}

.figure {
	margin: 1.5em 0;
}

/*Return to top */
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 15;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: rgba(229, 229, 229, 0.7);
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    opacity: 0;
}

#back-to-top:hover {
    background: #e9ebec;
}
#back-to-top.show {
    opacity: 1;
}

/* --- Animations --- */
.super-slow{
  transition: opacity 3s ease-out, transform 3s, background-color 3s, filter 5s;
}

.slow{
  transition: opacity 1.5s ease-out, transform 1.5s, background-color 1.5s;
}

.medium{
  transition: opacity .75s ease-out, transform .75s, background-color 1.5s;
}

.fast{
  transition: opacity .4s ease-out, transform .4s cubic-bezier(0, 0, 0, 1.45), background-color 1.5s;
}

.fadeUp{
    opacity: 0;
    transform: translateY(15%) !important;
}

.slideIn{
   opacity: 0;
   transform: translateX(10%);
}

.fade{
  opacity: 0; 
}

/* --------------------------------------- */

/* --- Naviagtion --- ( based on http://keenanstaffieri.com/building-mobile-first-flexbox-hamburger-navigation/ )*/ 
.nav-burger{
	float: right;
    position: relative;
    width: 45px;
    height: 60px;
}

.nav-burger:before,.nav-burger:after {
    content: '';
    position: absolute;
    left: 5px;
    width: 35px;
    height: 4px;
    background-color: #fff;
    transform-origin: 50% 50%;
    transition: transform 275ms ease, background-color .15s ease-in-out;
}
  
.nav-burger:before {top: 20px;}
    
.nav-burger:after {top: 34px;}

.nav-burger.opened:before,.nav-burger.opened:after{
	background-color: #F92C3E;
}

/* Rotate the Hamburger Menu */
.nav-burger.opened:before{
	transform: translate3d(0, 7px, 0) rotate(-45deg);
}

.nav-burger.opened:after{
	transform: translate3d(0, -7px, 0) rotate(45deg);
}

.nav-link.active, .nav-link:hover {
    color: #F92C3E;
	font-weight: bold;
}
.navbar {
    position: relative;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
	padding: 0.8rem 0;
}

#mainNav {
    background-color: rgba(41, 41, 41, 1);
    padding-top: 0;
    padding-bottom: 0;
}

#mainNav a {
    text-decoration: none;
	text-align: center;
    font-size: 120%;
    font-weight: 400;
    padding: 0.75em 0;
    letter-spacing: 1px;
    color: #ffffff;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
	transition: all .15s ease-in-out;
}

#mainNav .logo{
	font-size: 150%;
}

#mainNav a.active, #mainNav a:hover:not(.nav-mobile) {
    color: #F92C3E;
	font-weight: bold !important;
}

.stickytop {
	position: fixed;
    top: 0;
    width: 100%;
}

.fixed-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}

#mainNav.stickytop {
    position: fixed;
    top: 0;
    width: 100%;
}

#mainNav .logo{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: bold;
	display: inline-block;
    padding-top: .3rem;
    padding-bottom: .3rem;
    margin-right: 1rem;
    white-space: nowrap;
	margin-right: auto;
}

.nav-list.opened{
	height: 100vh;
	opacity: 1;
    transition: opacity 300ms ease-out, height 300ms ease-out;
}
/* ----------------------------------- */

/* --- Header --- */
header.masthead, header.sub-title {
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

header.masthead {
    background-color: rgba(0, 0, 0, 1);
}

header.masthead .title-card{
	padding-top: 17vh;
	padding-bottom: 11vh;
	z-index: 5;
	min-height: 570px;
}

header.sub-title .title-card{
	padding-top: 110px;
	padding-bottom: 11vh;
	z-index: 5;
}

.btn{
	display: inline-block;
    transition: all .15s ease-in-out;
	text-decoration: none;
	border-radius: 0px;
	border: solid 5px;
}

header.masthead .title-card .btn{
	font-size: 18px;
	padding: 20px 50px;
	margin: 2%;
	color: white;
	border-color: #F92C3E;
	background-color: rgba(204, 46, 60, 0.6);
	font-family: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 5vh;
	-webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

header.masthead .title-card .btn:hover{
	color: white;
    border-color: #F92C3E;
    background-color: #F92C3E;
}

.title-card h1{
	color: #fff;
    text-transform: uppercase;
	font-weight: bold;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
	font-size: 350%;
	font-family: 'Josefin Sans', sans-serif;
}

.sub-title .title-card h1{
	font-size: 300%;
}

.title-card h2{
	text-transform: uppercase;
	font-weight: bold;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
	font-size: 150%;
	font-family: 'Josefin Sans', sans-serif;
}

.title-card .bg-vid video{
  -webkit-filter: saturate(0.9) blur(5px);
  filter: saturate(0.9) blur(5px);
}

.sub-title .bg-vid video{
  -webkit-filter: saturate(0.9) blur(1px);
  filter: saturate(0.9) blur(1px);
}

.iphone{
	display: none;
}

.iphone img{
    z-index: 1;
	transform: rotate(0deg);
	max-width: 550px;
}
/* ----------------------------------------- */

/* --- Home Page --- */
#stats .row{
	margin-bottom:1em;
	margin-top:1em;
}

.svg-image{
	max-width: 300px;
	margin: 0 auto;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	position: relative;
}

.ore-img{
	height: 222.66px;
}

.ore-img img{
	position: absolute;
}

#EBar, #OtherBar{
	transform: scaleY(0);
	transform-origin: center bottom;
}

#EBar{
	transition: transform 0.3s;
}

#OtherBar{
	transition: transform 0.7s;
}

#EBar.active, #OtherBar.active{
	transform: scaleY(1);
}

.tablet_text{
	font-size: 20px;
	text-align: center;
	position: absolute;
	left: calc(50% + 6px);
	top: calc(50% - 40px);
	transform: translate(-50%,-50%);
	color: #2e2e2e;
}

#overlay{
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
	transition: all 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

#overlay.active{
	-webkit-clip-path: inset(0 30% 0 0);
	clip-path: inset(0 30% 0 0);
}

#tab_text1{
	display: block;
}

#tab_text2{
	display: block;
	margin-top: 15px;
}

#oretext{
	opacity: 0;
	font-size: 60px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(calc(-50% - 40px), calc(-50% - 5px));
}

#months{
	width: 300px;
	height: 290px;
}

.drawer-text{
	z-index: 5;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#months span:first-child{
	display: block;
	font-size: 30px;
	padding-bottom: 10px;
    transform: translateY(calc(-100% - 10px));
}

#monthsNum{
	font-size: 40px;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% - 40px), calc(-50% + 10px));
}

#drawers, #desk{
	z-index: 1;
	position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
	width: 90%;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transform-origin: center top;
}

#drawers.active{
	transform: translate(-50%, -127%);
}

/* ----------------------------------- */

/* --- Concerns Page --- */
#iphone-inside, #mapster_wrap_0 {
	position:relative;
	height: 500px !important;
	padding: 0;
}

#iphone-inside img{
	height: 100% !important;
	width: auto !important;
	position: absolute;
	margin: 0 auto;
}

.top{
	z-index: 5;
	transition: opacity 0.4s linear;
}

#inside-body {
	font-size: 85% !important;
}

.sketchfab-embed-wrapper iframe{
	width: 100%;
	height: 350px;
}

/*Whale Animation CSS */
figure.whale{
	margin: 1.5em 0;
}

.whale{
	height: 270px;
	position: relative;
	overflow: visible;
}

.whale .whale-image,.whale .whale-splash,.whale .whale-text{
    position: absolute;
    background-repeat: no-repeat;   
	width: 306px;
	height: 270px;
	left: 50%;
	top: 50%;
}

.whale .whale-image{
    background-image: url(img/whale.png);
	background-position: bottom;
	height: 270px;
	opacity: 1;
	transform: translate(-50%,-50%);
}

.whale .whale-splash{
    background-image: url(img/splash.png);
	background-position: top;
	-ms-transform: translate(calc(-50% - 30px),calc(-50% + 50px)) scale(0); /* IE 9 */
    -ms-transform-origin: 49% 27%; /* IE 9 */
    -webkit-transform: translate(calc(-50% - 30px),calc(-50% + 50px)) scale(0); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 49% 27%; /* Chrome, Safari, Opera */
    transform: translate(calc(-50% - 30px),calc(-50% + 50px)) scale(0);
    transform-origin: 49% 27%;
	opacity: 0;
}

.whale-splash.active{
	opacity: 1;
	-ms-transform: translate(calc(-50% - 30px),calc(-50% + 50px)) scale(1);
	-webkit-transform: translate(calc(-50% - 30px),calc(-50% + 50px)) scale(1);
	transform: translate(calc(-50% - 30px),calc(-50% + 50px)) scale(1);
}


.whale .whale-text{
    background-image: url(img/whale-text.svg);
	background-position: top;
	background-size: 100%;
	-ms-transform: translate(calc(-50%),calc(-50% - 10px)) scale(0); /* IE 9 */
    -ms-transform-origin: 40% 55%; /* IE 9 */
    -webkit-transform: translate(calc(-50%),calc(-50% - 10px)) scale(0); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 40% 55%; /* Chrome, Safari, Opera */
    transform: translate(calc(-50%),calc(-50% - 10px)) scale(0);
    transform-origin: 40% 55%;
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0, 0, 0, 1.45), opacity 0.5s cubic-bezier(0, 0, 0, 1.45) ;
}

.whale-text.active{
	opacity: 1;
	-ms-transform: translate(calc(-50%),calc(-50% - 10px)) scale(1);
	-webkit-transform: translate(calc(-50%),calc(-50% - 10px)) scale(1);
	transform: translate(calc(-50%),calc(-50% - 10px)) scale(1);
}

/* ---------------------------- */

/* --- Reduction --- */
#map{
	width: 100%;
	height: 450px;
	border: 1px solid #a5a5a5;
	margin: 2em auto 1em;
}

/*Info window styling from https://developers.google.com/maps/documentation/javascript/examples/places-searchbox */
#infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

.pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-size: 15px;
        font-weight: 300;
        margin-top: 10px;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 60%;
		height: 30px;
      }

#pac-input:focus {
	border-color: #4d90fe;
}

#title {
	color: #fff;
	background-color: #4d90fe;
	font-size: 25px;
	font-weight: 500;
	padding: 6px 12px;
}

#target {
	width: 345px;
}

.liamArms{
	transform: scale(0.5);
    height: 370px;
}


#liamArmLeft {
    position: absolute;
	left: -715px;
    top: calc(50% - 140px);
    z-index: 3;
}

#liamArmLeft span{
    display: block;
	-webkit-transform: translateZ(1000px);
    transform: translateZ(1000px);
    z-index: 10;
    position: relative;
    display: block;
    width: 839px;
    height: 364px;
    background-size: 839px 364px;
    background-repeat: no-repeat;
    background-image: url(img/liam_arm1.png);
}

#liamArmRight{
	-webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(33deg);
    transform: rotate(33deg);
    left: -80px;
    top: 50%;
    z-index: 2;
	position: absolute;
}	
   
#liamArmRight span{	  
	display: block;
	-webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translate(6%, -13%);
    transform: translate(6%, -13%);
    width: 920px;
    height: 668px;
    background-size: 920px 668px;
    background-repeat: no-repeat;
    background-image: url(img/liam_arm2.png);
}
/*-----------------------------*/

/* --- Quiz  --- */
#navContent{	
	margin: 0 auto;
	width:100%;
	height:500px;
	position:relative;
	overflow:hidden;
}

#game1{
	margin:0 auto;	
	width:100%;
	height:400px;
	right:0px;
	position:absolute;
}

#game2{
	margin:0 auto;	
	width:100%;
	height:400px;
	right:-800px;
	position:absolute;
} 

#quizImg{
	width: calc(100% - 30px);
	margin: 0 auto;
	background-position:center center;
	background-repeat: no-repeat;
	height: 400px;
	background-size: contain;
}

.questionText h2{
	margin-top: 0;
}

.questionText p{
	font-size: 1.5em !important;
}

.option{
	width:90%;
	height:60px;
	margin:15px 0;
	margin-left: 20px;
	font-size:18px;
	color:#FFFFFF; 
	padding:1em;
	cursor:pointer;
	background-color:#3f3f3f;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.option:hover{
	box-shadow: 0 14px 14px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	background-color: #3498DB;
	transform: scale(1.05);
}

#topbar{
	height:50px;
	margin:auto;
	margin-top:50px;
	color:#FFF;
	font-size:36px;
	width:800px;
	border-bottom:solid white 1px;
}
 
.spacer{
	height:30px;
}

.feedback1, .feedback2{
	width:150px;
	padding:5px;
	font-size:30px;
	text-align:center;
	color: white;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.feedback1{
	background-color:#3FC380;
}

.feedback2{
	background-color:#e74c3c;
}

.unclickable{
	pointer-events: none;
}

#retry button{
	display: inline-block;
	max-width: 330px;
	width:90%;
	text-decoration: none;
	border-radius: 0px;
	border: solid 5px;
	padding: 20px 50px;
	color: white;
	border-color: #F92C3E;
	background-color: rgba(204, 46, 60, 0.9);
	font-family: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#retry button:hover{
	box-shadow: 0 14px 14px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	transform: scale(1.05);
}

#facebookFrame{
	transform: scale(1.4) translate(11px);
}

#twitterFrame{
	transform: scale(1.4) translate(45px);
}

/* ------ Footer -------- */

footer{
  height: 92px;
  font-size: 80%;
  clear: both;
  z-index: 10;
  margin-top: -10px;
  padding: 0;
  background-color: white;
}

#footer div.container, #footer div.row {
	height: 100%;
}

#container {
   min-height:100vh;
   position:relative;
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:92px;   /* Height of the footer */
}

#footer a{
	color: #121212;
}

#footer.bg-dark a{
	color: white;
}

#footer a:hover{
	color: #F92C3E;
}

/* ----------------------------------- */

/* END OF DEFAULT STYLING */

/* --- Responsive Flex Grid --- */ /* Addapted from https://mono.software/2016/12/02/building-a-simple-css-grid-with-flexbox/ and https://codepen.io/heydon/pen/EVqwOW */
* {
  box-sizing: border-box;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 920px) {
  .container {
    max-width: 890px;
  }
}

@media (min-width: 992px) {
  container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: flex;
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

[class*="col"] {
  position: relative;
  width: 100%; 
  min-height: 1px;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  overflow: hidden;
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 576px) {
	.col-sm-1 {width: calc(1/12 * 100%);} 
	.col-sm-2 {width: calc(2/12 * 100%);} 
	.col-sm-3 {width: calc(3/12 * 100%);} 
	.col-sm-4 {width: calc(4/12 * 100%);} 
	.col-sm-5 {width: calc(5/12 * 100%);} 
	.col-sm-6 {width: calc(6/12 * 100%);} 
	.col-sm-7 {width: calc(7/12 * 100%);} 
	.col-sm-8 {width: calc(8/12 * 100%);} 
	.col-sm-9 {width: calc(9/12 * 100%);} 
	.col-sm-10 {width: calc(10/12 * 100%);} 
	.col-sm-11 {width: calc(11/12 * 100%);} 
	.col-sm-12 {width: calc(12/12 * 100%);}
	
	/*Push and Pull defintions */
	.col-sm-push-1 {left: calc(1/12 * 100%);} 
	.col-sm-push-2 {left: calc(2/12 * 100%);} 
	.col-sm-push-3 {left: calc(3/12 * 100%);} 
	.col-sm-push-4 {left: calc(4/12 * 100%);} 
	.col-sm-push-5 {left: calc(5/12 * 100%);} 
	.col-sm-push-6 {left: calc(6/12 * 100%);} 
	.col-sm-push-7 {left: calc(7/12 * 100%);} 
	.col-sm-push-8 {left: calc(8/12 * 100%);} 
	.col-sm-push-9 {left: calc(9/12 * 100%);} 
	.col-sm-push-10 {left: calc(10/12 * 100%);} 
	.col-sm-push-11 {left: calc(11/12 * 100%);} 
	.col-sm-push-12 {left: calc(12/12 * 100%);} 
	
	.col-sm-pull-1 {right: calc(1/12 * 100%);} 
	.col-sm-pull-2 {right: calc(2/12 * 100%);} 
	.col-sm-pull-3 {right: calc(3/12 * 100%);} 
	.col-sm-pull-4 {right: calc(4/12 * 100%);} 
	.col-sm-pull-5 {right: calc(5/12 * 100%);} 
	.col-sm-pull-6 {right: calc(6/12 * 100%);} 
	.col-sm-pull-7 {right: calc(7/12 * 100%);} 
	.col-sm-pull-8 {right: calc(8/12 * 100%);} 
	.col-sm-pull-9 {right: calc(9/12 * 100%);} 
	.col-sm-pull-10 {right: calc(10/12 * 100%);} 
	.col-sm-pull-11 {right: calc(11/12 * 100%);} 
	.col-sm-pull-12 {right: calc(12/12 * 100%);} 
	
	.fixed-top{
		position: fixed;
	} 
}

@media only screen and (max-width: 919px){
	.nav-list{
		position: absolute;
		top: 85px;
		width: 100vw;
		height: 0;
		padding: 15px;
		margin: 0;
		background-color: rgb(41, 41, 41);
		opacity: 0;
		overflow: hidden;
		transition: opacity 300ms ease-out;
		overflow-y: scroll;
  		-webkit-overflow-scrolling:touch; 
	}

	.navbar-extend .nav-list {
		background-color: rgba(41, 41, 41, 1);
	}

	.nav-list a{
		display: block;
	}
}

/* Media Queries */

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	/* Grid defintions */
	.col-md-1 {width: calc(1/12 * 100%); flex: 0 0 calc(1/12 * 100%);} 
	.col-md-2 {width: calc(2/12 * 100%); flex: 0 0 calc(2/12 * 100%);} 
	.col-md-3 {width: calc(3/12 * 100%); flex: 0 0 calc(3/12 * 100%);} 
	.col-md-4 { width: calc(4/12 * 100%); flex: 0 0 calc(4/12 * 100%);} 
	.col-md-5 {width: calc(5/12 * 100%); flex: 0 0 calc(5/12 * 100%);} 
	.col-md-6 {width: calc(6/12 * 100%); flex: 0 0 calc(6/12 * 100%);} 
	.col-md-7 {width: calc(7/12 * 100%); flex: 0 0 calc(7/12 * 100%);} 
	.col-md-8 {width: calc(8/12 * 100%); flex: 0 0 calc(8/12 * 100%);} 
	.col-md-9 {width: calc(9/12 * 100%); flex: 0 0 calc(9/12 * 100%);} 
	.col-md-10 {width: calc(10/12 * 100%); flex: 0 0 calc(10/12 * 100%);} 
	.col-md-11 {width: calc(11/12 * 100%); flex: 0 0 calc(11/12 * 100%);} 
	.col-md-12 {width: calc(12/12 * 100%); flex: 0 0 calc(12/12 * 100%);} 
	
	/*Push and Pull defintions */
	.col-md-push-1 {left: calc(1/12 * 100%);} 
	.col-md-push-2 {left: calc(2/12 * 100%);} 
	.col-md-push-3 {left: calc(3/12 * 100%);} 
	.col-md-push-4 {left: calc(4/12 * 100%);} 
	.col-md-push-5 {left: calc(5/12 * 100%);} 
	.col-md-push-6 {left: calc(6/12 * 100%);} 
	.col-md-push-7 {left: calc(7/12 * 100%);} 
	.col-md-push-8 {left: calc(8/12 * 100%);} 
	.col-md-push-9 {left: calc(9/12 * 100%);} 
	.col-md-push-10 {left: calc(10/12 * 100%);} 
	.col-md-push-11 {left: calc(11/12 * 100%);} 
	.col-md-push-12 {left: calc(12/12 * 100%);} 
	
	.col-md-pull-1 {right: calc(1/12 * 100%);} 
	.col-md-pull-2 {right: calc(2/12 * 100%);} 
	.col-md-pull-3 {right: calc(3/12 * 100%);} 
	.col-md-pull-4 {right: calc(4/12 * 100%);} 
	.col-md-pull-5 {right: calc(5/12 * 100%);} 
	.col-md-pull-6 {right: calc(6/12 * 100%);} 
	.col-md-pull-7 {right: calc(7/12 * 100%);} 
	.col-md-pull-8 {right: calc(8/12 * 100%);} 
	.col-md-pull-9 {right: calc(9/12 * 100%);} 
	.col-md-pull-10 {right: calc(10/12 * 100%);} 
	.col-md-pull-11 {right: calc(11/12 * 100%);} 
	.col-md-pull-12 {right: calc(12/12 * 100%);} 
	
	
	/*Small+ Specific Settings */
	section {padding: 150px 0;}
	
	.section-top {padding: 100px 0 150px 0;}
	
	/*.body h1{font-size: 36px !important;}*/
	.body h2{font-size: 36px !important;}
	.body p, .body li{font-size: 1.3em !important;}
	.body .row{padding: 0 10px;}
	
	.title-card h1{
		font-size: 450%;
	}
	
	.title-card h2{
		font-size: 200%;
	}	
	
	header.masthead .title-card {
		padding-top: 25vh;
	}
	
	header.masthead .title-card .btn{
		margin-top: 5vh;
	}
	
	header.sub-title .title-card{
		padding-top: 150px;
		padding-bottom: 50px;
		min-height: 300px;
	}
	
	header.sub-title .title-card h1{
		margin: 25px 0;
	}	
	
	.iphone img{
		transform: rotate(90deg);
	}
	
	#iphone-inside, #mapster_wrap_0 {
		height: 600px !important;
	}
	
	#inside-body p{
		line-height: 175%;
	}
	
}

/* Breakpoint for Navbar */
@media only screen and (min-width : 919px) {
	.nav-mobile{display: none ;}
	.nav-list{display: flex!important;}
	
	#mainNav{
		-webkit-transition: padding-top 0.3s, padding-bottom 0.3s, background-color 0.3s;
		-moz-transition: padding-top 0.3s, padding-bottom 0.3s, background-color 0.3s;
		transition: padding-top 0.3s, padding-bottom 0.3s, background-color 0.3s;
		border: none;
	}
	
	.navbar {
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	
	#mainNav .logo{
		font-size: 1.3em;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
	}
	
	#mainNav.navbar-extend {
		background-color: rgba(41, 41, 41, 0.9);
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	#mainNav.navbar-extend .logo {
		font-size: 1.75em;
	}
	
	#mainNav .navbar .nav-list a {
		padding: 1.1em 1em!important;
	}
	
	#mainNav .nav-burger{
		display: none;
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.col-lg-1 {width: calc(1/12 * 100%); flex: 0 0 calc(1/12 * 100%);} 
	.col-lg-2 {width: calc(2/12 * 100%); flex: 0 0 calc(2/12 * 100%);} 
	.col-lg-3 {width: calc(3/12 * 100%); flex: 0 0 calc(3/12 * 100%);} 
	.col-lg-4 {width: calc(4/12 * 100%); flex: 0 0 calc(4/12 * 100%);} 
	.col-lg-5 {width: calc(5/12 * 100%); flex: 0 0 calc(5/12 * 100%);} 
	.col-lg-6 {width: calc(6/12 * 100%); flex: 0 0 calc(6/12 * 100%);} 
	.col-lg-7 {width: calc(7/12 * 100%); flex: 0 0 calc(7/12 * 100%);} 
	.col-lg-8 {width: calc(8/12 * 100%); flex: 0 0 calc(8/12 * 100%);} 
	.col-lg-9 {width: calc(9/12 * 100%); flex: 0 0 calc(9/12 * 100%);} 
	.col-lg-10 {width: calc(10/12 * 100%); flex: 0 0 calc(10/12 * 100%);} 
	.col-lg-11 {width: calc(11/12 * 100%); flex: 0 0 calc(11/12 * 100%);} 
	.col-lg-12 {width: calc(12/12 * 100%); flex: 0 0 calc(12/12 * 100%);} 
	
	.title-card h1{
		font-size: 500%;
	}
	
	header.masthead .title-card {
		padding-top: 30vh;
		padding-bottom: 30vh;
		min-height: 570px;
	}

	.iphone{
		position: absolute;
		display: block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	#iphone-inside, #mapster_wrap_0 {
		height: 80vh !important;
		max-height: 600px;
	}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

/* iPad in Landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { .iphone{display: none;}}

/* --- James Steward | 2017 --- */