/*
 * Main Styles
 *
 * Default stylesheet for Arizona Auto Glass
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
*{margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Arial, sans-serif; color: #484848;}
body{}
ul, ol{list-style-type: none;}
a img{border: 0;}
a{text-decoration: none;}

/* ==========================================================================
   General used styles
   ========================================================================== */
.container{max-width: 940px; margin: 0 auto;}

/*general used widths*/
[class*="layer-"]{float: left; width: 100%; /*clear: both;*/}

/*.one-half*/
.one-half:nth-child(1){float: left;}
.one-half:nth-child(2){float: right;}

/*.one-third*/
.one-third{float: left;}

/*align*/
.align-left{text-align: left;}
.align-center{text-align: center;}
.align-right{text-align: right;}

/*.two-third*/
.two-third:nth-child(1){float: left;}
.two-third:nth-child(2){float: right;}

/*.full-width*/
.full-width{width: 100%; float: left;}

/*.row*/
.row{width: 100%; float: left;}

/*floats*/
.float-none{float: none !important;}
.float-left{float: left !important;}
.float-right{float: right !important;}

/*columns*/
.col-300{width: 300px;}
.col-365{width: 365px;}
.col-624{width: 624px;}

/*custom paddings*/
.padding-top-8{padding-top: 8px !important;}

/*custom margins*/
.margin-top-30{margin-top: 30px !important;}
.margin-right-40{margin-right: 40px !important;}

/*clear*/
.clear{clear: both;}

/*displays*/
.display-block{display: block;}

/*.rounded-box*/
.rounded-box{display: inline-block; color: #fff !important; line-height: 40px; padding: 0 15px 0 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-family: Arial,sans-serif, sans-serif; font-size: 14px; font-weight: bold; margin-top: 15px; margin-bottom: 7px;}
.rounded-box .icon-phone{background: url("../images/phone.png") no-repeat left 6px; line-height: 40px; width: 35px; display: inline-block; text-indent: -9999px;}
.rounded-box.skin-red{background: #d1202f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxMjAyZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMjRmNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #d1202f 0%, #d24f5a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1202f), color-stop(100%,#d24f5a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d1202f 0%,#d24f5a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d1202f 0%,#d24f5a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d1202f 0%,#d24f5a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d1202f 0%,#d24f5a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1202f', endColorstr='#d24f5a',GradientType=0 ); /* IE6-8 */}
.rounded-box{-webkit-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 5px 0px rgba(50, 50, 50, 0.75);}

/* ==========================================================================
   header
   ========================================================================== */
header{padding-top: 18px; border-bottom: 2px solid #af1d3e; float: left; width: 100%;}
header .row *{vertical-align: top;}
header .layer-one > *{display: inline-block;}
header .layer-one > *:first-child{float: left;}
header .layer-one > *:last-child{float: right;}
header .layer-one{text-align: center; font-size: 0; margin-bottom: 18px;}
header .layer-two{text-align: center;}
header .logo{display: inline-block;}

/*.top-banner*/
header .top-banner{width: 459px; height: 88px; background: url("../images/top_banner_background.png") no-repeat left top; display: inline-block; padding: 0 36px; text-align: center;}
header .top-banner p{font-family: Arial, sans-serif; font-size: 14px;}
header .top-banner p:first-child{font-weight: bold; font-size: 16px;}

/*.call-today*/
.call-today{padding-top: 10px; text-align: right; float: right;}
.call-today a, .call-today p{font-family: Arial, sans-serif;}
.call-today .phone-number{font-size: 22px; font-weight: bold; color: #d1202f !important; margin-bottom: 5px; display: inline-block;}
.call-today p{color: #484848; font-size: 14px;}

/*header nav*/
header nav ul{background: #f5f5f5; text-align: center; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;}
header nav ul li{display: inline-block;}
header nav ul li a{line-height: 40px; font-size: 13px; color: #5d5d5d; text-transform: uppercase; font-family: Arial, sans-serif; display: block;}
header nav ul li a:after{content: " | "; padding: 0 20px;}
header nav ul li:last-child a:after{content: ""; padding: 0;}

/*.tinynav*/
.tinynav{display: inline-block; margin: 20px 0; width: 200px; display: none;}

/* ==========================================================================
   .main-content
   ========================================================================== */
.main-content{background: url("../images/main_content_repeat.gif") repeat-x; padding-top: 39px;}

/* ==========================================================================
   .main-banner
   ========================================================================== */
.main-banner .title{font-family: Arial, sans-serif; font-size: 22px; font-weight: bold; display: inline-block; color: #282627; margin-bottom: 15px;}

.benefits {padding-left: 10px;}

/*.benefits-list*/
.main-banner .benefits-list{list-style-image: url("../images/check_icon.png"); padding-left: 20px; margin-bottom: 15px;}
.main-banner .benefits-list li{color: #484848; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 3px;}

/*.call-now*/
.call-now{font-family: Arial, sans-serif; color: #d1202f; font-size: 18px; font-weight: bold;}

/* ==========================================================================
   .main-text
   ========================================================================== */
.main-text{padding-top: 20px; padding-bottom: 50px;}

/* ==========================================================================
   .text-content
   ========================================================================== */
.text-content{border: 2px solid #f6f6f6; padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.text-content h1{font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: #ffffff; width: 100%; line-height: 42px; background: #d1202f; padding-left: 13px;}
.text-content h2{font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: #484848; margin: 15px 0 0 0;}
.text-content p{font-family: Arial, sans-serif; font-size: 14px; color: #484848; margin: 15px 0 0 0;}
.text-content a{text-decoration: underline;}
.text-content a:hover{color: blue;}
.text-content .float-left{float: left; margin-right: 10px; margin-top: 5px;}

/* ==========================================================================
   .sidebar
   ========================================================================== */
.sidebar{background: #f5f5f5; padding: 10px; margin-top: 2px; padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.sidebar .widget{text-align: center; margin-top: 27px;}
.sidebar .widget:first-child{margin-top: 0;}
.sidebar .widget h3{font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; text-align: left; color: #ffffff; width: 100%; line-height: 42px; background: #235c91; padding-left: 13px; margin-bottom: 15px;}
.sidebar .widget p{font-family: Arial, sans-serif; text-align: left; font-size: 14px; margin-top: 8px;}
.sidebar .widget .inner{padding: 0 12px;}

/* ==========================================================================
   footer
   ========================================================================== */
footer{width: 100%; float: left; border-top: 2px solid #8f8f8f;}
footer p{text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: #5d5d5d; line-height: 80px;}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media screen and (min-width: 921px) {
	.mobile-only{display: none !important;}
}

@media screen and (max-width: 920px) {
	.benefits{width: 100%; text-align: center;}
	.benefits-list{width: 100%; text-align: center;}
	.col-auto{width: 100%; text-align: center; float: none !important;}
	.col-auto img{display: inline-block; width: 90%; margin-top: 20px;}
	.main-text{text-align: center;}
	.text-content{width: 96%; margin: 0 auto; display: inline-block; float: none !important; margin-bottom: 10px;}
	.sidebar{width: 80%; max-width: 400px; margin: 0 auto; float: none !important;}
	.sidebar .widget img{display: inline-block; width: 100%;}
	
	header nav ul{display: none;}
	header .tinynav{display: inline-block;}
	header .layer-one{margin-bottom: 0;}
	header .top-banner{margin-top: 10px; background-size: cover;}
	.mobile-row{width: 100%; float: left; text-align: center;}
	.call-today{float: none; text-align: center;}
}
   
@media screen and (max-width: 870px) {
	
}

@media screen and (max-width: 480px) {
	header .top-banner{width: 100%; background-size: 100% auto;}
	header .top-banner p{font-family: Arial, sans-serif; font-size: 12px;}
	header .top-banner p:first-child{font-weight: bold; font-size: 14px;}
}

@media screen and (max-width: 400px) {
	header .top-banner p{font-family: Arial, sans-serif; font-size: 11px;}
	header .top-banner p:first-child{font-weight: bold; font-size: 10px; margin-top: -12px;}
}