@charset "UTF-8";
/* CSS Document */

/* Advanced Checkbox Hack */
body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}

/*--------------------------------------------------------------------------------------------------
	scrollbar shift fix
--------------------------------------------------------------------------------------------------*/
html { 
min-height: 100%; 
margin-bottom: 1px; 
font-size:100%; /* 16px */
 }



/*--------------------------------------------------------------------------------------------------
	reset
--------------------------------------------------------------------------------------------------*/
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul, li {
	padding: 0;
	margin: 0;
	font-weight: normal;
	font-style: normal;
	
	}

ul {
	list-style: none;
	}
	
li {
	list-style: none;
}

a{
	text-decoration:none;
	outline: none;
	color: #C60;
}
a:hover{
	text-decoration:underline;
}
a:active {
  outline: none;
}
a:focus {
  -moz-outline-style: none;
  outline: none;
}

img {
	border: none;
	border: 0;
	max-width: 100%;
}

/*--------------------------------------------------------------------------------------------------
	global
--------------------------------------------------------------------------------------------------*/

body {
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: normal;
	margin: 0;
	padding: 0;
	color:#333;
	background: #c5ccc6 url("../images/roadway.jpg") no-repeat center center;
	}
	
#wrapper {
	width: 98%;
	margin: 20px auto;
	/*max-width: 1414px;*/
	max-width: 1200px;
	display: block;
	background: rgba(255,255,255,.85);
	-webkit-box-shadow: 0 0 4px 1px rgba(50, 50, 50, 0.75);
  	-moz-box-shadow:0 0 4px 1px rgba(50, 50, 50, 0.75);
  	box-shadow: 0 0 4px 1px rgba(50, 50, 50, 0.75);
}



/* one column desktop layout - main content */
.content_main {
	clear: both;
	width: 100%;
	padding: 1em 0;
}

.three-col {
	width: 100%;
	display: inline-block;
}

.col_1-3 {
	float: left;
	width: 33%;
}

.col_2-3 {
	float: left;
	width: 34%;
}

.col_3-3 {
	float: right;
	width: 33%;
}

.col_1 {
	float: left;
	width: 48%;
	
}

.col_2 {
	float: left;
	width: 48%;
}
	
p {
	/*margin: .5em 1em .5em 1em;*/
	margin: 16px;
}




h1 {
	font-family: 'Arapey', serif;
	font-style: italic;
	font-size: 2rem; /* 32 / 16 */
	margin: .5em .4em .25em;
	color: #006;
}

h2 {
	font-family: 'Rufina', serif;
	font-size: 20px;
	font-size: 1.25rem; /* 20 / 16 */
	/*line-height: 1.4;*/
	font-style: italic;
	/*margin: .5em 1em .5em 1em;*/
	margin: 0 16px 16px 16px;
	/*color: #930;*/
	color: #006;
}

h3 {
	font-family: 'Rufina', serif;
	font-size: 16px;
	font-size: 1rem; /* 14 / 16 */
	/*margin: .5em 1em .5em 1em;*/
	margin: 0 16px 16px 16px;
	color: #8d4743;
}



.clearfix {
	clear: both;
}

.bold {
	font-weight: bold;
}

.medium {
	font-weight: medium;
}

.italic {
	font-style: italic;
}

.small {
	font-size: 12px;
	font-size: .75rem;
}

.medFont {
	font-size: 14px;
	font-size: .875rem;
}

.large {
	font-size: 18px;
	font-size: 1.125rem;
}

ul {
	list-style: disc;
}

ul li {
	margin: 0 .25em;
	/*margin: .25em 0 0 2.75em;*/
}

ol {
	list-style-type:lower-alpha;
	}	
	
.center {
	text-align: center;
}

.right {
	float: right;
	margin: 0 .25em 0 1em;
}

.left {
	float: left;
	margin: 0 1em 0 .25em;
}
	


/*--------------------------------------------------------------------------------------------------
	Header section
--------------------------------------------------------------------------------------------------*/

#header {
	margin: 0 auto;
	width: 100%;
	background: #1d2862;
	text-align: center;
	}
	
	




/*.headline {
	color: #fff;
	font-style: italic;
	font-size: 22px;
	font-size: 1.375rem;
}*/

.header-1 {
	margin-top: .5em;
	padding: 0 .5em;
}

.header-2 {
	margin-top: 2em;
	padding: 0 .5em;
}

.tagline {
	font-family: 'Arapey', serif;
	color: #FC0;
	font-size: 1.5rem; /* 16 / 16 */
	padding-top: .25em;
	margin: 1em 2em 1em 0;
	float: right;
}



/*--------------------------------------------------------------------------------------------------
      Primary Navigation
--------------------------------------------------------------------------------------------------*/

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: none;
  cursor: pointer;
  user-select: none;
  text-align: left;
}

/* background for li / select */
/* custom-dropdown */
nav[role="custom-dropdown"] {
  position: relative;
  width: 100%;
}
nav[role="custom-dropdown"] a,
nav[role="custom-dropdown"] label {
  /*color: #f3ec30;*/
  color: #C00;
  text-decoration: none;

 

/*  transition: color .3s ease-in-out;*/
}
nav[role="custom-dropdown"] ul {
/*  padding: 0;
  margin: 0 auto;*/
  clear: both;
  width: 100%;
  list-style: none;
  text-align: center;
}
nav[role="custom-dropdown"] ul > li {
/*  float: left;*/
/*  padding: .55em .55em;*/
display:inline-block;
font-size:14px;
font-size: .875rem;
padding: .5em 1.5em;
margin: .25em .5em 0 .5em;
border:1px solid #1958B3;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
/*  width: 19%;*/
background-color: #D2E7FA; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#D2E7FA), to(#85a7d8));
background-image: -webkit-linear-gradient(top, #D2E7FA, #85a7d8);
 background-image: -moz-linear-gradient(top, #D2E7FA, #85a7d8);
 background-image: -ms-linear-gradient(top, #D2E7FA, #85a7d8);
 background-image: -o-linear-gradient(top, #D2E7FA, #85a7d8);
 background-image: linear-gradient(to bottom, #D2E7FA, #85a7d8);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#D2E7FA, endColorstr=#85a7d8);
/*  text-align: center;*/
/*  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: box-shadow, color;*/
/*  box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35);*/
/*  cursor: pointer;
*/}
nav[role="custom-dropdown"] ul > li:hover {
/*  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2em rgba(0, 0, 0, 0.3);*/
  color: #ccc;
  border:1px solid #76b6f0;
 background-color: #a4cff5; 
 background-image: -webkit-gradient(linear, left top, left bottom, from(#a4cff5), to(#134286));
 background-image: -webkit-linear-gradient(top, #a4cff5, #134286);
 background-image: -moz-linear-gradient(top, #a4cff5, #134286);
 background-image: -ms-linear-gradient(top, #a4cff5, #134286);
 background-image: -o-linear-gradient(top, #a4cff5, #134286);
 background-image: linear-gradient(to bottom, #a4cff5, #134286);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a4cff5, endColorstr=#134286);
}
nav[role="custom-dropdown"] ul > li:hover > a {
  color: #fff;
}





#home #nav .home a,
#about #nav .about a,
#services #nav .services a,
#gallery #nav .gallery a,
#coupons #nav .coupons a,
#contact #nav .contact a
 {
	
	font-weight: bolder;
}

/*--------------------------------------------------------------------------------------------------
      slideshow - home page
--------------------------------------------------------------------------------------------------*/

#banner_container {
	margin: 10px auto;
	padding: 0;
	width: 100%;
}

.slideshow ul {
	/*width: 100%;*/
	
}

.slideshow li {
	padding: 0;
	margin: 0;
}

.slideshow img {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	max-width: 100%;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

/*--------------------------------------------------------------------------------------------------
      gallery - 
--------------------------------------------------------------------------------------------------*/	

div.album-category {
position: relative;	
font-size: 12px;
font-size: .75rem;
padding: 10px;
text-align:center;

}

div.album-category ul{
}

div.album-category li {
	float: left;
	padding: 10px 15px;
	list-style: none;
	text-align: center;
}

	
/*--------------------------------------------------------------------------------------------------
      coupons - 
--------------------------------------------------------------------------------------------------*/	

	
#coupon_display {	
	margin: 1em 1em 3em 1em;
	max-width: 100%;
	text-align: center;
	}
	

	
/*--------------------------------------------------------------------------------------------------
      our history - 
--------------------------------------------------------------------------------------------------*/	

	
.content_img {	
	margin: 1em 1em 3em 1em;
	padding: 0;
	float: right;
	}
	
.content_img img {
	max-width: 100%;
	border: 1px solid #000;
}
	

/*--------------------------------------------------------------------------------------------------
      Services
--------------------------------------------------------------------------------------------------*/

#right_box_wrap {
	float: right;
	width: 25%;
	margin: .25em 1em .5em .5em;
	/*padding: .5em;*/
	/*padding: 5px 0 60px 10px;*/
	background: #f9e4b7;
	}	

	
.box_text {
	/*margin: .25em;*/
	padding: .25em 1.5em;
	}
	
.box_text li {
	margin: .5em;
	list-style: square;
	}	
	
#main_info {
	/*position: relative;*/
	float: left;
	width: 70%;
	margin: .25em .5em 1em 0;
	padding: 0;
	overflow: hidden;
	}
	
#main_info img {
	float: left;
	margin: 0 1em 1em 1em;
}

/*--------------------------------------------------------------------------------------------------
      bottom Navigation
--------------------------------------------------------------------------------------------------*/
.bottom_nav {
	clear:both;
	width: 98%;
	margin: 1em auto;
	text-align: center;
	font-size: 14px;
	font-size: .875rem;
	border: 1px solid #CCC;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	background: #e8ece8;

	}
	
.bottom_nav ul {
	list-style: none;
	text-align: center;
}
	
.bottom_nav ul li {
	display: inline;
	margin: 0;
	}

.bottom_nav a {
	color: #060;
	display: inline-block;
	margin: .75em;
	padding: 0 1.5em;
	text-decoration: underline;
	}

.bottom_nav a:hover {
	
	color: #999;
}

/*--------------------------------------------------------------------------------------------------
     contact page - map
--------------------------------------------------------------------------------------------------*/

.frame {
	margin: 2em 0;
	padding: 2em;
}

.cmsmap {
	width: 400px;
	height: 300px;
}

.cmsmap img {
	max-width: none;
}

.address {
  float: left;
  width: 43%;
  margin: 2em auto;
  text-align: center;
}

.map {
  float: right;
  width: 43%;
  margin: 2em;
  border: #767564 solid 2px;
  background: #ece7d9;
  text-align: center;
}



.map > div {
  width: 100% !important;
  height: 300px !important;
}

.border-yes {
	border: 1px solid #000;
}

/*--------------------------------------------------------------------------------------------------
     tire logos footer
--------------------------------------------------------------------------------------------------*/

.brand_strip {
/*	clear:both;*/
	background: #FFF;
	text-align: center;
	border-top: .75em solid #1d2862;
	/*margin: 1em;*/
}

.brand_strip li {
	vertical-align:middle;
	display: inline-block;
	display:-moz-inline-box;
	*display:inline;
	padding: .5em 1em;

}

.brand_strip img {
	max-width: 100%;
}

/*--------------------------------------------------------------------------------------------------
     footer
--------------------------------------------------------------------------------------------------*/

#footer_wrap {
	clear: both;
	width: 100%;
	padding: .5em 0;
	font-size: 12px;
	font-size: .75em;
	background: #e1aa30;
	overflow: hidden;
	text-align: center;
}

.copyright {
	float: left;
	margin: .3125em 0 .3125em 1.25em; /* 5px 0 5px 20px */
	color: #fff;
}

#botNav {
	float:right;
	list-style:none;
	}
	

#botNav ul {
	float:left;
/*	margin: 5px 0 0 0;*/
	list-style:none;
	}

#botNav li {
	float:left;
	text-decoration:none;
	}
	
#botNav li a, #botNav li a:visited {
	display:block;
	margin: .3125em 1.25em .3125em 5em; /* 5px 20px 5px 80px */
	padding: 0;
	text-decoration:none;
	float:left;
	color: #fff;
	}
	
#botNav li a:hover {
	color:#fff;
	text-decoration:underline;
	}
	
#disclaimer {
	clear: both;
	width: 98%;
	margin: 20px auto;
	font-size: 11px;
	font-size: .6875rem;
	text-align:center;
	margin: 10px auto;
	color: #efdeb2;
	padding-bottom: 20px;
	}

#disclaimer a {
	text-decoration: none;
	color: #d27e29;
}

#disclaimer a:hover {
	color: #cc0000;
}	



/* Tablets Portrait or Landscape: 768px/16px = 48em and 1024px/16px = 64em */
@media screen 
and (min-device-width:768px)
and (max-device-width:1024px) {

.col_1-3 {
	float: left;
	width: 33%;
}

.col_2-3 {
	float: left;
	width: 34%;
}

.col_3-3 {
	float: right;
	width: 33%;
}

.col_1 {
	float: left;
	width: 48%;
	
}

.col_2 {
	float: left;
	width: 48%;
}
	
}





/* min 461px */
@media screen 
and (min-width: 600px)
and (max-width:768px) 
{

.col_1-3 {
	float: left;
	width: 33%;
}

.col_2-3 {
	float: left;
	width: 34%;
}

.col_3-3 {
	float: right;
	width: 33%;
}

.col_1 {
	float: left;
	width: 48%;
	
}

.col_2 {
	float: left;
	width: 48%;
}


}

/* small screens */
@media screen and (max-width: 44em) {

#header h1 {
	font-size: 1.1rem; /* 16 / 16 */
	/*padding-top: .25em;*/
	margin: .5em 1.5em .5em 0;
	float: right;	
}

  nav[role="custom-dropdown"] ul {
    display: none;
    height: 100%;
  }
  nav[role="custom-dropdown"] label {
	    clear: both;
    position: relative;
    display: block;
    width: 100%;
    min-height: 2.25em;
    padding: .45em;
    font-size: 1.1em;
    margin: 0;
    border-bottom:1px solid #1958B3;
    background: #a4cff5;
  }
  nav[role="custom-dropdown"] label:after {
    position: absolute;
    right: .25em;
    top: 0;
    content: "\2261";
    font-size: 1.8em;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after {
    color: #222;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul {
    display: block;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li {
    width: 100%;
    opacity: .8;
    text-align: left;
	background: #a4cff5;
	margin: 0;
	/*margin: .25em .5em 0 .5em;*/
border:1px solid #1958B3;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li:after {
    position: absolute;
    right: .25em;
    content: "\203A";
    font: bold 1.4em sans-serif;
  }
  
#right_box_wrap {
float: none;
width:90%;
margin: 0 auto;	
}

#main_info {
	float: none;
	width: 100%;
}



/* 319px - 599px */
@media screen 
and (min-width: 320px)
and (max-width: 599px) {
	


.col_1-3 {
	float: left;
	width: 33%;
}

.col_2-3 {
	float: left;
	width: 34%;
}

.col_3-3 {
	float: right;
	width: 33%;
}

.col_1 {
	float: left;
	width: 48%;
	
}

.col_2 {
	float: left;
	width: 48%;
}


.brand_strip li {
	padding: .25em .125em;

}

.brand_strip img {
	max-width: 80%;
}

.content_img {	
	margin: 1em;
	float: none;
	text-align: center;
	}



}
	
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {




.col_1-3 {
	float: left;
	width: 33%;
}

.col_2-3 {
	float: left;
	width: 34%;
}

.col_3-3 {
	float: right;
	width: 33%;
}

.col_1 {
	float: left;
	width: 48%;
	
}

.col_2 {
	float: left;
	width: 48%;
}

.content_img {	
	margin: 1em;
	float: none;
	}



}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
	


#footer_wrap .col_1-3 {
	float: none;
	width: 100%;
}

#footer_wrap .col_2-3 {
	float: none;
	width: 100%;
}

#footer_wrap .col_3-3 {
	float: none;
	width: 100%;
}

.col_1 {
	float: none;
	width: 100%;
	
}

.col_2 {
	float: none;
	width: 100%;
}

#right_box_wrap {
	float: none;
	width: 100%;
}

#main_info {
	float: none;
	width: 100%;
	}

.gallery_wrap {
	margin: 0 .25em .75em .25em;
}

.address {
  float: none;
  width: 100%;
}

.map {
  float: none;
  width: 85%;
}

.content_img {	
	margin: 1em;
	float: none;
	}