﻿/***** BEGIN RESET *****/
/*--------import font------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
font-family:'Arial', sans-serif;
}
a{text-decoration:none;}



/*--- HEADER STYLES ---------------------*/
header{width:100%; box-shadow:1px 1px 4px 3px rgba(0,0,0,.15);}
.header{max-width:1500px; margin:0 auto; display:flex; flex-direction:row; padding:20px 10px; box-sizing:border-box;}
.logo{max-width:220px; width:100%;}
.logo img{width:100%;}
.header-right{width:250px; display:flex; flex-direction:row;}
.at-logo{width:50px; padding-right:10px; padding-top:15px;}
.at-logo img{width:100%;}
.header-locations{width:200px;}
/*---BODY--------------------------------*/


/*-------- FOOTER STYLES ----------------*/
footer{width:100%; background:url('/templates/traxplus.com/siteart/footer-back.webp') center center no-repeat; padding:100px 10px; box-sizing:border-box; background-size:cover;}
.width{max-width:1500px; margin:0 auto; padding:10px; box-sizing:border-box;}.foot-row{width:100%; display:flex; flex-direction:row; }
.foot-col{width:25%; padding:10px; box-sizing:border-box;}
.footer-wrapper p{font-size:20px; text-transform:uppercase; font-weight:800; color:#54ae47; font-family:'Arial', sans-serif; padding-bottom:15px;}
.foot-col ul li a{font-size:16px; font-weight:400; text-transform:uppercase; line-height:26px; color:#fff;}
.foot-col ul li{list-style: none!important;}
.white-btn{font-size:16px; font-weight:800!important; line-height:26px;}
.white-btn:hover, .foot-col ul li a:hover{color:#54ae47;}

/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (max-width: 1180px) {
	.foot-row{flex-wrap:wrap;}
	.foot-col{width:50%; padding:20px 10px;}
}
@media only screen and (max-width: 1000px) {	
	
}
@media only screen and (max-width : 767px) {
	.footer-wrapper{text-align:center;}
	.header{flex-wrap:wrap;}
	.header-locations{width:100%;}
	.header-nav{width:calc(100% - 220px);}
	nav.secondary ul{width:100%;}
	.at-row{width:100%;}
	#menu-button{width:calc(100% - 250px)!important;}
	.header-right{width:100%;}
}
@media only screen and (max-width: 650px) {	
	.foot-col{width:100%;}
}

@media only screen and (max-width: 380px) {
	.logo{max-width:200px;}
		#menu-button{width:calc(100% - 210px)!important;}
	
}





