/* Primary colors:
#cccccc
#333333
#01a1df
*/

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#@{icon-font-svg-id}') format('svg');
}

html {
  position: relative;
  min-height: 100%;
 	overflow-x: hidden;
}
body {
  margin-bottom: 100px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.42857;
}

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}


/*----------------------------------- only desktops! -----------------------------------*/
@media (min-width: 768px) {
	/*----------- NAV ---------*/
	nav.navbar.shrink .container .navbar-header .navbar-brand > .logo{
  	display: block;
	height: 50px;
    	width: 70px;
	margin-top: -12px;
	margin-right: 5px;
	margin-left: 5px;
	}
	nav.navbar.shrink .container .navbar-header .navbar-brand::before{
  	border-radius: 0px;
	top: -50px;
	border-bottom: 80px solid #333333;
	}
	/*----------- NAV ---------*/
}
/*----------------------------------- Wellcome truck only for desktops! -----------------------------------*/
@media (min-width: 960px) {
	.content{
		    animation-name: content-in;
			animation-duration: 3s;
			max-width: 100vw;
			min-width:500px;
			overflow: hidden;
			border-bottom:35px solid #333;
	}
	.content::before{
			position: absolute;
			z-index: 100;
			width: 0px;
			height: 500px;
			background-image: url("../img/truck-front.svg");
			background-repeat: no-repeat;
			background-position: left center;
			background-size: 100% 100%;
			content: " ";
			margin-left:100%;
			margin-top:-50px;
			visibility:hidden;
			animation-name: hideAfter;
			animation-duration: 3s;
	}
}

@keyframes hideAfter{
    0%{width: 500px;visibility:visible;}
    99% {width: 500px;visibility:visible;}
    100% {width: 0px;visibility:hidden;}
}

@keyframes content-in{
    0%{max-height: 437px;margin-left: -100%;margin-bottom: 65px;}
    50% {max-height: 437px;margin-left: 0%;margin-bottom: 65px;}
    100% {max-height: 100vh;margin-left: 0%;margin-bottom: 0px;}
}

.content > .well {
    border-radius: 0px;
    background-color: #01a1df;
    color: #fff;
    border: 0px;
    margin: 0px;
	font-size: 16px;
	padding-top: 20px;
}

.content > .well.black {
    border-radius: 0px;
    background-color: #333;
    color: #fff;
}

.content > .well.white {
    border-radius: 0px;
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
}

.content > .well > .well.centered {
    text-align:center;
}
.content > .well > .well {
    border-radius: 0px;
    background-color: #01a1df;
    color: #fff;
    border-top:1px solid black;
    border: 0px;
    margin: 0px;
    margin-right:-20px;
    margin-left:-20px;
}

.content > .well > .well.black {
    border-radius: 0px;
    background-color: #333;
    color: #fff;
    border-top:1px solid black;
    border: 0px;
    margin: 0px;
    margin-right:-20px;
    margin-left:-20px;
}

.content .well > .well.white {
    border-radius: 0px;
    background-color: #fff;
    color: #333;
    border-top:1px solid black;
    border: 0px;
    margin: 0px;
    margin-right:-20px;
    margin-left:-20px;
}

.content .well > .well h1,
.content .well > .well h2,
.content .well > .well h3,
.content .well > .well h4,
.content .well > .well h5,
.content .well > .well h1 a,
.content .well > .well h2 a,
.content .well > .well h3 a,
.content .well > .well h4 a,
.content .well > .well h5 a,
.content .well > .well i{
    color: #fff;
}

.content .well > .well.black h1,
.content .well > .well.black h2,
.content .well > .well.black h3,
.content .well > .well.black h4,
.content .well > .well.black h5,
.content .well > .well.black h1 a,
.content .well > .well.black h2 a,
.content .well > .well.black h3 a,
.content .well > .well.black h4 a,
.content .well > .well.black h5 a,
.content .well > .well.black i{
    color: #fff;
}

.content .well > .well.white h1,
.content .well > .well.white h2,
.content .well > .well.white h3,
.content .well > .well.white h4,
.content .well > .well.white h5,
.content .well > .well.white h1 a,
.content .well > .well.white h2 a,
.content .well > .well.white h3 a,
.content .well > .well.white h4 a,
.content .well > .well.white h5 a,
.content .well > .well.white i{
    color: #333;
}



.content{
	padding: 50px 0px 0px;
	width:100%;
}
.content ul {
    list-style: none;
   
}
.content li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

.content ul > li:before{
	content: "\e165";
    color: #01a1df;
    font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	padding-right: 3px;
	font-size: 10px;
}

.content ul > li li:before{
	content: "\e081";
    color: #01a1df;
    font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	padding-right: 3px;
	font-size: 10px;
}
.content ul > li li li:before{
	content: "\e132";
    color: #01a1df;
    font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	padding-right: 3px;
	font-size: 10px;
}

.content .well li:before{
	color: #fff;
}
.content .well.white li:before{
	color: #333;
}


.content H1,
.content H2,
.content H3,
.content H4,
.content H5{
	color: #01a1df;
	text-shadow: 0px 0px 1px black;
}

.content .well H1,
.content .well H2,
.content .well H3,
.content .well H4,
.content .well H5{
	color: #fff;
	text-shadow: none;
}

.content .well.white H1,
.content .well.white H2,
.content .well.white H3,
.content .well.white H4,
.content .well.white H5{
	color: #333;
	text-shadow: none;
}

.content .well a{
	color: #fff;
}
.content .well.white a{
	color: #333;
}

.content .well a:hover,
.content .well a:focus{
	color: #01a1df;
}

.thumb{
	border: 1px solid white;
	width: 260px;
	height: 195px;
	display: inline-block;
	overflow: hidden;
	background-image: linear-gradient(to right,rgba(255,255,255,0.15),rgba(255,255,255,0.3),rgba(255,255,255,0.15));
	box-shadow: 0px 20px 20px -20px black;
	margin: 10px;
	cursor: Pointer;
	border-radius:2px;
	transition: all 0.2s ease-in;

}

.thumb:hover{
	box-shadow: 0px 20px 40px -20px #01a1df;
}


.content > .well > .citation{
	display:inline-block;
	border-left: 4px solid #fff;
	margin-left: 10px;
	padding-left: 5px;
}

.content > .well.black > .citation{
	border-left: 4px solid #fff;
}
.content > .well.white > .citation{
	border-left: 4px solid #333;
}

.bg-blue{
	background-color: #01a1df;
}
.bg-grey{
	background-color: #333;
}


.content .info{
background: rgba(0,149,213,0.4);
padding: 5px;
border-radius: 3px;
border: 1px solid #01a1df;
display: inline-flex;
}

.content .info:before{
	content: "\e086";
    color: #01a1df;
    font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	padding-right: 3px;
}

.content .danger{
background: rgba(213,50,50,0.4);
padding: 5px;
border-radius: 3px;
border: 1px solid rgb(213,50,50);
display: inline-flex;
}

.content .danger:before{
	content: "\e104";
    color: rgb(213,50,50);
    font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	padding-right: 3px;
}

.content .quest{
background: rgba(50,213,50,0.4);
padding: 5px;
border-radius: 3px;
border: 1px solid rgb(50,213,50);
display: inline-flex;
}

.content .quest:before{
	content: "\e085";
    color: rgb(50,213,50);
    font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	padding-right: 3px;
}

/*----------- NAV ---------*/

.navbar.navbar-inverse{
	background-color: #333333;
	border-radius: 0px;
}
.navbar-inverse .navbar-nav > li > a{
	color: #bbb;
    background-color: transparent;
    border-top: 4px solid transparent;
}

.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover {
    color: #fff;
    background-color: transparent;
    border-top: 4px solid #01a1df;
}


.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: #01a1df;
    border-top: 4px solid #333;
}

.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-radius: 0;
    background-color: #333333;
    padding: 0px;
}
.dropdown-menu > li > a {
    display: block;
    padding: 10px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #cccccc;
    white-space: nowrap;
    border-left: 4px solid #01a1df;
}
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    color: #fff;
text-decoration: none;
background-color: transparent;
border-left: 12px solid #01a1df;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
padding: 4px 12px;
}
.navbar-brand > .logo {
	background-image: url("../img/logo.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
    display: block;
    height: 60px;
    width: 80px;
	transition: all 0.4s ease-in;
}
.navbar-brand::before {
display: block;
height: 100px;
width: 100px;
background: transparent;
content: " ";
position: absolute;
border: 2px solid #333333;
border-bottom: 80px solid #333333;
border-radius: 100px;
top: -22px;
margin-left: -10px;
opacity: 1;
transition: all 0.6s ease-in;
z-index: -1;
}


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    background: #333;
    border-radius: 0px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #fff;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #01a1df;
}

.dropdown-submenu.pull-left {
    float: none;
}
/*----------- NAV ---------*/

.footer {
padding-top: 5px;
width: 100%;
height: 110px;
background-color: #01A1DF;
overflow: hidden;
border-top: 1px solid #333;
position: absolute;
margin-top: -20px;
}

footer .text-muted {
color: #eee;
padding-left: 100px;
}
footer .text-muted a,
footer .text-muted a:hover{
  color: #eee;
}

footer .copyright {
color: #eee;
position: absolute;
bottom: 10px;
right: 10px;
}
footer .copyright a,
footer .copyright a:hover{
  color: #eee;
}

.footer .logo{
background-image: url("../img/whitelogo.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
display: inline-block;
height: 60px;
width: 80px;
position: absolute;
top: 20px;
left: 10px;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
  height: 100%;
  overflow: hidden;
}


/* Carousel Styles */
.carousel-indicators .active {
    background-color: #01a1df;
}


/* Carousel Header Styles */
.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
}

.header-text H2 {
    font-size: 40px;
}

.header-text H2 span {
	padding: 10px;
}

.header-text H3 span {
	padding: 15px;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}

.btn-theme {
    color: #fff;
    background-color: #01a1df;
    border: 2px solid #fff;
    margin-right: 15px;
}

.btn-theme:hover {
    color: #fff;
    background-color: #333;
    border-color: #fff;
}
a.btn-theme:hover {
    color: #fff;
}

.modal-content{
	border-radius: 0;
	background-color: #01a1df;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #333;
}

.modal-body {
    position: relative;
    padding: 0;
    background: #333;
}

.close {
    float: right;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    color: #333;
    text-shadow: none;
	filter: alpha(opacity=100);
	opacity: 1;
}




/*-------------------- Mobile Devices CSS--------------*/
@media (max-width: 768px) {
	/*----------- NAV ---------*/
  	nav .static-logo{
	height: 100%;
	}
	.nav.navbar-nav {
		float: left !important;
		width: 100%;
	}
	.navbar-brand > .logo {
    display: block;
	height: 44px;
	width: 60px;
	margin-top: -12px;
	margin-right: 10px;
	margin-left: 10px;
	}
	.navbar-brand::before {
		border-radius: 0;
		top: -50px;
		border-bottom: 80px solid #333333;
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu > li {
        padding: 5px 20px;
		line-height: 1.0;
		color: #cccccc;
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        padding: 0px 10px;
		line-height: 1.0;
		color: #cccccc;
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a::before {
        content: " ";
		display: block;
		position: absolute;
		background: #01a1df;
		width: 20px;
		height: 35px;
		left: 0px;
		margin-top: -11px;
	}
	.dropdown-submenu li a::before{
		margin-left:20px;
		margin-top: -11px;
	}
	.open .dropdown-submenu .dropdown-menu > li > a::before{
		margin-left:19px;
		margin-top: -11px;
	}
	.open .dropdown-submenu .dropdown-menu .dropdown-submenu > a::before{
		margin-left:0px;
		margin-top: -11px;
	}
	.navbar-inverse .navbar-toggle {
    border-color: white;
    background: #01a1df;
	}
	/*----------- NAV ---------*/
	
}