img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'PT Sans', 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif; font-size: 16px; background-color: #333; color: #444; text-align: center;line-height:1.5;min-width:320px } body, header ul, nav ul, main ul, aside ul, footer ul { margin: 0; padding: 0; } .container { background-color: #fff;} .wrap { max-width: 1020px; position: relative; display: block; margin: 0 auto; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } img, iframe, video { max-width: 100%;height:auto } a img, iframe { border: none; } a, header .logo em, header .locations a:hover { text-decoration: none; color: #4a7494; } a:hover { text-decoration: underline; } header a:hover, nav li a:hover, .featured a:hover, .cta a:hover, .button:hover, footer a:hover { text-decoration: none; } hr { border: none; border-bottom: 1px solid #eee; margin: 25px 0; } .imgLeft { float: left; margin: 5px 4% 5px 0; } .imgLeftLogo { float: left; margin: 5px 4% 5px 0; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 0 5px 4%;max-width:45% } .clear { clear: both; } .center { text-align: center; } .grid{display:grid;grid-gap:20px} .grid.half{grid-template-columns:1fr 1fr} .grid.third{grid-template-columns:1fr 1fr 1fr} header,main{background-color:#fff} header .logo, header .locations { display: inline-block; vertical-align: middle; } header .logo, nav, header .locations strong, .featured h3, main h1, .cta, form input[type=submit], .button, footer strong { text-transform: uppercase; } header { padding: 20px 0; } header .logo, header .locations strong, .featured h3 { color: #444; } header .logo { font-size: 18px; line-height: 34px; font-weight: bold; } header .logo em { font-size: 18px; font-style: normal; } header .logo span, header .locations p, header .locations a { color: #4a7494; } header .logo span { font-size: 16px; font-weight: normal; text-transform: none; display: block; line-height: normal; margin-top: 8px; text-align: left; } header .logo hr { margin: 12px 0 0; } header .logo h1 { font-size: 18px; padding-top: 20px; } header .logo, header .locations { width: 49%; } header .locations li, footer .last p { text-align: right; } header .locations { font-size: 28px; } header .locations strong { font-size: 16px; margin-bottom: 5px; } header .locations li { list-style: none; margin-bottom: 5px; line-height: 100%; } nav { background-color: #4a7494; padding: 10px 0; } nav a, footer, footer a, .featured span, .cta, .cta a, form input[type=submit], .button { color: #fff; } nav a { padding: 5px; display: block; } nav ul{display:flex;flex-wrap:wrap;list-style:none;justify-content:space-between;margin:0 -5px;width:100%} nav li{flex:1 0 125px;text-align:center;margin:5px} nav li:hover, .featured span, .cta, form input[type=submit], .button { background-color: #4a7494; } .banner { height: 400px; background-image: url(/images-content/banner.jpg); background-size: cover; background-position: 64%; } .featured { padding: 30px 0;grid-gap:30px} .featured a { background: #FFF; padding: 10px 1% 50px; position: relative; outline: 1px solid #ddd; } .featured a:hover span, form input[type=submit]:hover, .button:hover { background-color: #d46b50; } .featured i { font-size: 90px; color: #ccc;display:block;margin:0 auto 15px;width:116px;height:90px } .featured h3 { text-align: center; } .featured p { width: 90%; margin: 0 auto 20px; color: #989898; text-align: center; } .featured span { width: 91%; display: block; padding: 10px 0; position: absolute; bottom: 5%; left: 5%; border-radius: 2px; } .cta { padding: 10px 0; } .cta a[href^=tel]{white-space:normal} header, main, .home, .cta, footer .wrap { padding-left: 10px; padding-right: 10px; } .grid.main{grid-template-columns:2fr 1fr} main { padding-top: 20px; padding-bottom: 40px; } main h1 { font-size: 24px; } main h2, .cta { font-size: 20px; } main h3, footer strong { font-size: 18px; } main li { margin: 0 0 5px 20px; } aside { padding: 25px 20px 35px; background: #eee; } aside hr { border: none; border-bottom: 1px solid #ddd; } aside li, footer li { list-style: none; margin-bottom: 10px; } .button { font-weight: bold; padding: 15px 50px; border-radius: 2px; } .services h2 { text-align: center; color: #4a7494; } form { margin: 20px 0; } form input, form textarea { font-family: 'PT Sans', 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif; font-size: 16px;padding:10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 2px;box-sizing:border-box;width:100% } form textarea { height: 75px;width:100%;display:block} form input[type=submit] {font-weight: bold; border: none;width:100%;display:block } form input[type=submit]:hover { cursor: pointer; } form .grid{grid-gap:10px;margin-bottom:10px} form .grid input{margin:0} footer{clear:both} footer .wrap { padding-top: 40px; padding-bottom: 40px; } footer a:hover { color: #d46b50; } footer .locations { margin-left: 10%; } footer .locations span:nth-of-type(1) { width: 90px; display: inline-block; } .announce p { display: inline-block; margin: 30px 0 0; border: 2px solid goldenrod; padding: 10px 20px; text-align: center; } .jQexpiring { display: none; } .nowrap,a[href^=tel], nav li a, #quick h2 span { white-space: nowrap; } .important { color: red; font-size: 1.5em; font-weight: bold; text-align: center; } .important { color: red; font-size: 1.5em; font-weight: bold; text-align: center; } footer #social { margin-top: 59px; padding-top: 0;text-align:right } footer #social li{margin:5px;display:inline-block} footer #social a { font-size: 24px;display:block } footer #social i{display:block;width:31px;height:24px} table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; width: 100%; } td { border-top: 1px solid #ddd; padding: 6px 0; } #contact input, #contact textarea { display: block; } #quick{text-align:left} #quick img { display: inline-block; } #quick h2 { font-size: 34px; margin:0 } #quick img, #quick h2{vertical-align:middle} #home-service { background: url('images-content/home-service.jpg') no-repeat; background-size: cover; } @media(max-width:999px) { #quick { width: auto; float: none; } .featured{padding:20px;grid-gap:20px;} } @media(max-width:768px) { .banner { background-image: url(/images-content/banner768.jpg); } header .logo h1 { font-size: 18px; padding-top: 0px; line-height: 1.2; } } @media(max-width:767px){ .featured.grid.third{grid-template-columns:1fr 1fr} } @media(max-width:700px) { .container{background-image:none} .grid.main{grid-template-columns:1fr} aside .grid{grid-template-columns:1fr 1fr 1fr} } @media(max-width:600px) { footer .wrap { padding-top: 20px; padding-bottom: 20px; } .cta { font-size: 18px; } nav ul { text-align: left; } aside hr { display: none; } footer .locations{margin:0} header .logo,header .locations,header .locations li{display:block;width:auto;text-align:center} header{padding-left: 2%; padding-right: 2%;} .imgLeftLogo{display:block;float:none;margin:1em auto} .grid.half,footer .grid.third{grid-template-columns:1fr} footer p,footer li,footer .last p,footer #social{text-align:center} footer #social{margin-top:1em} } @media(max-width:500px) { header .logo h1 { font-size: 18px; padding-top: 10px; } .featured i { margin-bottom: 0; } .featured.grid.third{grid-template-columns:1fr} .imgRight{max-width:100%;float:none;margin:10px 0;width:100%} } @media(max-width:400px) { footer .locations { margin-left: 0; } .cta { font-size: 15px; letter-spacing: .5px; } aside > div:nth-of-type(1) { margin-right: 0; } h1 + .imgRight, h2 + .imgRight { float: none; margin: 0 auto; } header .locations { display: inline-block; width: auto; } #quick h2 img{display:block;margin:0 auto} #quick h2{text-align:center} aside .grid{grid-template-columns:1fr} }