/* General
================================================== */
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: white;
}


@font-face {
    font-family: 'oswald_stencilregular';
    src: url('../fonts/oswald-stencil-webfont.eot');
    src: url('../fonts/oswald-stencil-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-stencil-webfont.woff2') format('woff2'),
         url('../fonts/oswald-stencil-webfont.woff') format('woff'),
         url('../fonts/oswald-stencil-webfont.ttf') format('truetype'),
         url('../fonts/oswald-stencil-webfont.svg#oswald_stencilregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p {
	margin: 0 0 15px;
}

h1, h2, h3, h4, h5, h6 {
	color: black;
	font-family:Oswald;
	font-weight: 300;
}

h4 {
	color: white;
	text-transform: uppercase;
}

strong {
	color: black;
}

a, a:visited {
	text-decoration: none;
	color: #ffd822;
}

.flexnav {
	display:none;
}

.menu-button {
	display:none;
}

ul li {
	list-style: outside;
	margin: 0 0 10px 30px;
}

hr {
    margin: 40px auto;
	border-color: #383838;
}


/* Header
================================================== */

.header {
	background: white;
	border-top:15px solid black;
	height:50px;
	box-shadow:3px 2px 4px #000;
}

.logo {
    background: url(../images/sprite.png) -10px 0;
    float: left;
    height: 110px;
    margin: -14px 0 0;
    width: 173px;
}


/* Navigation
================================================== */

.nav {
	float:right;
}

.nav li {
	float:left;
	margin: 0 0 0 15px;
	position: relative;
	list-style: none;
}

.nav li a {
	font-family: 'Oswald', sans-serif;
	font-size: 17px;
    margin: auto;
    padding: 18px 0 14px;
    text-align: center;
    width: 78px;
	display:inline-block;
	color:black;
}

.nav li#current > a {
    background: none repeat scroll 0 0 black;
    color: white;
    padding: 4px 0 7px;
}

.nav li#current a i {
    display: block;
    margin: 0 0 5px;
}

.nav span {
    background: url(../images/sprite.png) 3px -280px;
    display: block;
    height: 13px;
    width: 81px;
}




/* --- Submenu --- */

.nav ul {
    background: white;
    padding: 0;
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 9;
    display: none;
    width: 210px;
    margin: 0;
}

.nav li:hover > ul {
	display: block;
}

/*keep parent highlighted on SEARCH submenu hover*/
.nav li:hover > a  {
    background: #000;
	color: white;
}

.nav ul li {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
}

.nav ul li a {
    width: 190px;
    display: block;
    padding: 10px;
    font-size: 13px;
    text-align: left;
}








/* Feature
================================================== */

.feature {
    background: url(../images/shattered.jpg);
	background: #e8c419;
}

.feature h1 {
	font-family: oswald_stencilregular;	
	color: white;
	font-size: 50px;
	margin: 80px 0 10px;
}

.feature h2 {
	font-family: oswald_stencilregular;
	color: white;
	font-size: 31px;
	margin: 0 0 20px;
}

.feature img {
    margin: 10px 0 0;
}

.trucks {
	z-index:1;
}

.road {
    background: url(../images/road.jpg) top center no-repeat #8f8b86;
	height: 185px;
    position: relative;
    top: -100px;
}


/* Content
================================================== */
.content {
    background: #383838;
    padding: 60px 0;
}

.home .content {
    margin: -100px 0 0;
    padding: 200px 0 60px;
    color: black;
}

.content h3 {
    color: white;
    margin: 40px 0 15px;
}

.home .content h3 {
	color: black;
}

.content h3:first-child {
    margin-top: 0;
}

.content strong {
	color: white;
}


.home .content strong {
	color: black;
}


.home .content .container .one-third.column {
    width: 313px;
}

.home .content h3 {
	text-align: center;
}

.home .content h3 span{
	color: #777777;
}

.home .content strong{
	text-align: center;
	display: block;
	font-size: 14px;
	line-height: 21px;
	margin: 12px 0 15px;
}

.home .content ul {
	margin: 0;
}

.home .content ul li {
	font-size: 12px;
	list-style:none;
	margin: 0 0 7px;
}


/* COLUMN ONE */
.ser_col {
	background: #fff8d5;
	padding: 0 30px 10px;
	position: relative;	
	height: 361px;
}

.ser_col:before {
    border-bottom: 70px solid #fff8d5;
    border-left: 157px solid transparent;
    border-right: 157px solid transparent;
    content: "";   
	position: absolute;
    left: 0;
    top: -70px;
}

.ser_col:after { 	
	border-top: 70px solid #fff8d5; 
    border-left: 157px solid transparent;
    border-right: 157px solid transparent;
	content: ""; 		
	position: absolute; 
	left: 0; 
	bottom: -70px; 
} 


/* COLUMN TWO */
.adv_col {
    background: none repeat scroll 0 0 #ffd822;
	padding: 0 30px 10px;
    position: relative;
    z-index: 0;
	height: 361px;
}

.adv_col:before {
    border-bottom: 70px solid #ffd822;
    border-left: 157px solid transparent;
    border-right: 157px solid transparent;
    content: "";
    left: 0;
    position: absolute;
    top: -70px;
}

.adv_col:after {
    border-left: 157px solid transparent;
    border-right: 157px solid transparent;
    border-top: 70px solid #ffd822;
    bottom: -70px;
    content: "";
    left: 0;
    position: absolute;
}

.home .content .adv_col ul {
	margin: 0 0 58px;
}

.cor {
    background: url(../images/sprite.png) 0 -114px;
    bottom: -21px;
    height: 69px;
    left: 56px;
    position: absolute;
    width: 105px;
    z-index: 999;
}

.isn {
    background: url(../images/sprite.png) 0 -194px;
    bottom: -21px;
    height: 69px;
    right: 37px;
    position: absolute;
    width: 105px;
    z-index: 999;
}


/* COLUMN THREE */

.gallery {
	position:relative;
}

.gal_col {
	position:relative;
}

.gal_col h3 {
	z-index:2;
	position: relative; 	
}
 
.outside {
    background: none repeat scroll 0 0 #ffd822;
    color: white;
    padding: 10px;
    position: absolute;
    right: 0;
    width: auto;
    z-index: 2;
	top:10px;
}

.outside:before {
	width: 0; 
	height: 0; 
	border-top: 50px solid transparent; 
	border-right: 100px solid #ffd822; 
	border-bottom: 50px solid transparent;
}

.outside a {
    color: white;
    font-size: 20px;
    padding: 2px;
}

.bx-wrapper {
    margin: -113px 0 0;
    z-index: 0;
}

.bx-wrapper .bx-viewport {
    background: none;
    border: none;
    left: 0;
	box-shadow: none;
}

.bx-controls {
	display: none;
}




/* Content
================================================== */
.content_header {
    background: url(../images/shattered.jpg);
	background: #e8c419;
}

.content_header h2 {
    color: white;
	margin: 0;
	padding: 30px 0 20px;
	font-family: 'oswald_stencilregular';
}

.content_bg {
    background: #555;
    margin: 0 10px 0;
    padding: 30px;
	min-height:470px;
}



/* Gallery
================================================== */
.gall {
    float: left;
    margin: 0 5px 40px;
}

.gall li {
    float: left;
    margin: 5px;
    width: 135px;
	list-style:none;
}

.gall li img {
	display:block;
}

.gallery .content_bg h4 {
	clear:both;
	padding:0 10px;
}




/* Contact
================================================== */
form{
	margin: 0;
}

.formmail label {
	margin: 0 0 5px;
	color:white;
}

input[type="text"], input[type="password"], input[type="email"],input[type="message"], textarea, select {
    background: none repeat scroll 0 0 #fff;
    border: medium none;
    border-radius: 0;
    color: #000;
    display: block;
    margin: 0 0 20px;
    outline: medium none;
    padding: 15px 0;
    width: 100%;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    background: #ffd822;
    border: none;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 20px;
    padding:15px;
	text-indent: 10px;
    text-shadow: none;
}

input[type="submit"]:hover, input[type="reset"]:hover {
    background: #fff8d5;
    border: none;
    color: #000;
}

textarea {
    height: 163px;
}







/* Footer
================================================== */

.footer {
    background: black;
	color: white;
	position:relative;
}

.footer h5 {
	color: white;
	margin: 0 30px 15px;
}

.footer a {
	color: white;
}

.footer p {
	margin: 0 0 12px;
}

.footer ul {
	margin: 0 30px;
}

.footer li {
	list-style:none;
	margin:0 0 10px;
}

.footer a:hover {
	color:#ffd822;
}

.footer .one-third.column {
    border-left: 1px solid #322e2d;
    border-right: 1px solid #322e2d;
    min-height: 189px;
    padding: 60px 0 45px;
    width: 312px;
}

.footer .one-third.column.alpha.omega {
	border: none;
}

.footer .cor {
    display: block;
    float: none;
    left: auto;
    margin: 0;
    position: absolute;
    right: 35px;
    top: 65px;
}

.footer .isn {
    display: block;
    float: none;
    margin: 0;
    position: absolute;
    right: 19px;
    top: 165px;
}


/* Reaxion
================================================== */
.reaxion {
    background: none repeat scroll 0 0 #000;
    border-top: 1px solid #322e2d;
    padding: 12px 0 7px;
}

.reaxion a {
    background: url(../images/sprite.png) 0 -300px;
    color: #999999;
    display: block;
    font-size: 10px;
    margin: auto;
    padding: 0 0 0 20px;
    width: 93px;
}








@media only screen and (max-width: 959px) {

/* HEX
================================================== */
.home .content .container .one-third.column {
    margin-bottom: 17px;
    width: 375px;
}

.home .content .container .gallery.one-third.column {
    width: 313px;
}

.home .content .container .gallery.one-third.column {
    clear: both;
    display: block;
    float: none;
    margin: auto;
    position: relative;
    width: 313px;
}

.gal_col h3 {
    left: 85px;
    position: absolute;
    top: 54px;
}

.outside {
    position: absolute;
    right: -10px;
    top: 80px;
}

.adv_col,
.ser_col {
	 padding: 0 30px 20px;
}

.ser_col:before, .ser_col:after, .adv_col:before, .adv_col:after {
    border-left: 188px solid transparent;
    border-right: 188px solid transparent;
}

.ser_col:after {
  	border-top: 82px solid #fff8d5;
	bottom: -82px;
}

.adv_col:after {
  	border-top: 82px solid #ffd822;
	bottom: -82px;
}

.ser_col ul.col {
    right: 30px;
}

.cor {
    bottom: -10px;
    left: 69px;
}

.isn {
    bottom: -12px;
    right: 63px;
}



/* Gallery
================================================== */
.gall li {
    width: 125px;
}




/* Footer
================================================== */
.footer .one-third.column {
    width: 248px;
}







}



@media only screen and (max-width: 767px) {

.container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
    width: 100%;
}


.header {
    height: auto;
}

.logo {
    margin: -13px 0 0;
}

.nav {
	display:none;
}

.flexnav {
	display:block;
}

.flexnav.show {
	margin: 0 0 15px;
}

.menu-button {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: black;
    float: right;
    font-size: 60px;
    height: auto;
    margin: 20px 0 0;
    padding: 0;
    width: 52px;
	display:block;
}

.menu-button .touch-button {
    display:none;
}

.flexnav li {
    margin: 0
}

.flexnav li a {
    background: none repeat scroll 0 0 black;
    border-bottom: 1px solid white;
    color: white;
}

.flexnav li#current a {
    color: yellow;
}


.flexnav li a i {
	margin: 0 10px 0 0;
}


/* HEX
================================================== */
.feature h1 {
    margin: 40px 0 0;
	font-size:38px;
}

.feature h2 {
    font-size: 25px;
    margin: 0 0 5px;
}

.feature img {
    margin: 0;
}

.home .content {
    padding: 150px 0 40px;
    margin: -70px 0 0;
}

.home .content .container .one-third.column {
    margin: 0;
    width: 100%;
}

.adv_col, .ser_col {
    margin: 0;	
	height: auto;

}

.ser_col:after, .adv_col:before, .adv_col:after {
    border:none;
}

.adv_col {
	margin: 0;
    padding: 40px 30px 20px;	

}

.home .content .adv_col ul {
    margin: 0;
}

.cor {
    bottom: 127px;
    left: auto;
    right: 37px;
}

.isn {
    bottom: 44px;
    right: 21px;
}

.ser_col:before {
    border-left: 210px solid transparent;
    border-right: 210px solid transparent;
}

.home .content .container .gallery.one-third.column {
    width: 100%;
}

.bx-wrapper {
    background: none repeat scroll 0 0 red;
    height: 492px;
    overflow: hidden;
}

.bx-wrapper .bx-viewport {
    margin: -93px 0;
}

.bx-wrapper li {
    width: 420px !important;
}
.bx-wrapper li img {
	width:100%;
}

.gal_col h3 {
    left: 142px;
    top: 45px;
}
.outside {
    right: 0;
}



/* Content
================================================== */
.content {
    padding: 10px 0;
}

.content_bg {
    margin: 0;
}


.content_header h2 {
    padding: 15px 0 12px;
    font-size: 27px;
}



/* Gallery
================================================== */
.gall {
    margin: 0 0 40px;
}

.gall li {
    width: 116px;
    margin: 2px;
}

.gallery .content_bg h4 {
	padding:0;
}



/* Footer
================================================== */
.footer .one-third.column {
    padding: 40px 0 0;
}
.footer .one-third.column {
    border: medium none;
    min-height: 0;
    padding: 40px 0 0;
    width: 100%;
}

}



@media only screen and (max-width: 479px) {


/* Feature
============================== */

.feature h1 {
    font-size: 27px;
    margin: 15px 0 0;
}

.feature h2 {
    font-size: 20px;
    line-height: 20px;
	margin: 0 0 10px;
}

.road {
    height: 160px;
}

.home .content {
    padding: 90px 0 10px;
    margin: -30px 0 0;
}






/* Hex
============================== */

.ser_col:before {
    border-bottom: 50px solid #fff8d5;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    top: -50px;
}

.ser_col {
    padding: 0 25px 20px;
}


.ser_col ul.col {
    right: 20px;
}

.adv_col {
    padding: 35px 25px 20px;	
}

.cor {
    right: 15px;
}

.isn {
    right: 0;
}

.gal_col h3 {
    left: 84px;
    top: 35px;
}

.bx-wrapper li {
    width: 300px !important;
}

.bx-wrapper .bx-viewport {
    margin: -67px 0;
}

.bx-wrapper {
    height: 351px;
}


/* Gallery
============================== */
.gall li {
    width: 76px;
}


}