body, h1,h2,h3,h4,h5,h6,p{
	font-family: 'Roboto', sans-serif !important;
}
/* Small only */
@media screen and (max-width: 39.9375em) {
	.menu > li, .menu.horizontal > li{
		display: initial;
		text-align: center;
	}
	.maps{
		width: 80% !important;
		margin: 0px auto;

	}
	.maps2{
		width: 80% !important;
		margin: 0px auto;

	}
	.maps3{
		width: 80% !important;
		margin: 0px auto;

	}
	.switch{
		display: none
	}
	#menu li {
		display: initial !important;
	}
	#menu{
		height: initial !important;
	}
	.backTop{
		display: none;
	}
	.smartLogo{
		margin-left: -25px;
	}
	.float-left{
		width: 100%;
		text-align: center;
		padding: 50px;
	}
	.float-right{
		width: 100%;
		text-align: center;
	}
}

/* Medium and up */
@media screen and (min-width: 40em) {
	.smartLogo{
		margin-left: -75px;
	}
	.float-left{
		width: 50%;
		padding: 50px;
	}
	.float-right{
		width: 50%;
	}
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {


}
a.active{
	color: #816aae !important;
}
.backTop{
	position: fixed;
	z-index: 200;
	right: 0;
	left: 0;
	text-align: center;
	bottom: 0;
	width: 125px;
	margin: 0px auto;
}
.backTop p{
	padding: 5px 10px;
	background-color: #fff;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	margin: 0px;
	color: #816aae;
}

.switch-input2 {
	position: absolute;
	margin-bottom: 0;
	opacity: 0;
}
input:checked ~ .switch2 {
	background: #f7af51;
}
h4.scaffolder__container__title.ng-binding {
	background-color: #fff;
	margin-top: 40px;
}
section{
	/*height: 100vh;*/
	padding: 145px 0px;
	overflow: hidden;
}
section h2{
	padding-bottom: 40px;
}
.menu > li > a {
	padding: 20px 0px;
}
.menu > li > a:hover {

	color: #816aae;
}
.white{
	color: #fff;
}
.purp{
	color: #816aae;
}
.orange{
	color: #f7af51;
}
.purpleBtn{
	background-color: #816aae;
	color: #fff;
	border-radius: 5px;
	border: none;
}
.purpleBtn:hover{
	color: #816aae;
	background-color: transparent;
	border: 1px solid #816aae;
	border-radius: 5px;
}
.iconRow{
	padding-bottom: 40px;
}
.iconIMG{
	max-height: 85px;
}
.one, .two{
	min-height: 100vh;
}
.two{
	background-image: url(../imgs/map.png);
}
#header{
	/*padding: 0px;*/
	position: relative;
	overflow: hidden;
}
#first{
	background-color: #f7af51;
	padding: 0px;
}
#second{
	background-image: url(../imgs/trucksBG.png);
	background-size: cover;
	padding: 0px;
}
#third{
	background-color: #816aae;
}
#fourth{
	background-color: #f7af51;
}
#fifth{
	background-color: #fff;
}
#sixth{
	background-color: #dbdbdb;
}
.tOne p, .tTwo p, .tThree p, .tFour p{
	font-size: 12px;
	width: 250px;
	padding: 20px;
	background-color: rgba(255,255,255,.9);
}
/*  #myVideo {
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
.layer {
color: #fff;
text-transform: uppercase;
z-index: 1;
}*/
/**
Coded by /u/j0be in scss.
See scss source here -> http://codepen.io/j0be/pen/MKRVyN
*/

/* Fullscreen Video - Foundation 6 styles are embedded in the head of this doc - said Foundation 6 styles are completely unecessary for this to work - internet explorer (and it's lack of 'object-fit') essentially turns this from 6 lines of CSS into the monster below .. typical. */ 
.video-container { position: relative; /*height: 90vh;*/  z-index: 0;} 
.flex-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 0; z-index: -1; } 
.flex-video video { 
	left: 50%; 
	min-height: 100%; 
	object-fit: cover; 
	position: absolute; 
	top: 50%; 
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	/* the rules below are a replacement for 'object-fit' which is unavailable in all versions of IE .. the ':not' is to cover devices which arbitrarily update VH on scroll - see the JS */ 
} 
/* Dummy Content */ .dummy-container-class { /*padding: 10.5%;*/ } 
.dummy-container-class .flex-video { margin-bottom: 0; } .dummy-container-class .row { margin: 1em auto; padding: 1em; } 
.dummy-container-class .columns { overflow: hidden; }  
.dummy-container-class.video-container:last-of-type .row { position: absolute; bottom: 1em; } 
@media (max-aspect-ratio: 1280 / 720) { .video-container:not(.fixed-device) .flex-video video { width: calc(100vh*1280/720); height: 100vh; } } @media (min-aspect-ratio: 1280 / 720) { .video-container:not(.fixed-device) .flex-video video { width: 100vw; height: calc(100vw*720/1280); } }