img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Open Sans', sans-serif; font-size: 16px; background-color: #596475; color: #91919B; line-height: 1.5; text-align: center; min-width: 320px } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1, h2, h3, h4, h5, h6 { font-weight: 600; text-transform: uppercase; margin-bottom: 0; } body, header ul, nav ul { padding: 0; margin: 0; } main ul, main ol { padding-left: 25px; } img, iframe { max-width: 100%; } a img, iframe { border: none; } a, header a:hover, .blog h2 a:hover, .bord li a:hover { text-decoration: none; color: #e99719; } a:hover { text-decoration: underline; } header a:hover, nav a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 25px 0; } .imgLeft { float: left; margin: 5px 4% 1% 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 1% 1% 4%; max-width: 45%; } .clear { clear: both; } .center { text-align: center; } .container { background-color: #fff; } .wrap { max-width: 1020px; display: block; margin: 0 auto; position: relative; } nav li, .home .col, aside, main, .halfCol, .triCol { display: inline-block; vertical-align: top; } header .logo, header ul, .partners a, header .badge { display: inline-block; vertical-align: middle; } .table { display: table; width: 100%; table-layout: fixed } .table > div { display: table-cell; position: relative; vertical-align: top; } .table.half > div { width: 49%; } .table.half > div:nth-of-type(odd) { padding-right: 1%; } .table.half > div:nth-of-type(even) { padding-left: 1%; } .nowrap { white-space: nowrap; } .hide { display: none } header, header a, nav, nav a, footer, footer a, footer h3, .subfoot p { color: #fff; } header { background-color: #323642; border-bottom: 5px solid #596475; text-align: left; padding: 0 10px } header .logo { width: calc(100% - 240px); margin-right: 10px } header .badge { height: 140px; padding:1% 0; } header ul { width: 130px; font-size: 18px; } header li { list-style: none; line-height: 1.6; text-align: right; } header li:first-of-type a { margin: 0 0 8px 0 } nav { padding: 10px 10px 0 } nav { text-transform: uppercase; background-color: #e99719; } header a, nav a { display: block; } nav a { padding: 10px 19px 16px; } nav a:hover { background-color: #fff; color: #303642; border-radius: 4px 4px 0 0; } .slideshow { position: relative; height: 450px } .slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity 2s; object-fit: cover; object-position: center } .slideshow .showing { opacity: 1; z-index: 2 } .slideshow img:nth-of-type(2) { object-position: bottom } .slide1 { background-image: url(/images-design/slides/1.jpg); background-position: center; } .slide2 { background-image: url(/images-design/slides/2.jpg); background-position: bottom; } .slide3 { background-image: url(/images-design/slides/4.jpg); background-position: center; } .slide4 { background-image: url(/images-design/slides/3.jpg); background-position: center; } aside, main { padding: 20px 0 30px 15px; } aside { width: 248px; } aside .featured h2 { margin-top: 10px; } aside ul { padding: 0; } aside li { list-style: none; } aside .news { margin-top: 20px; padding: 10px 8% 15px; border: 1px solid #ddd; border-radius: 5px; } aside .news li { border-bottom: 1px solid #eee; } aside .news li p { margin: 20px 0; } aside .news li:last-of-type { border-bottom: none; } aside strong { display: block; margin-bottom: 5px; } main { width: calc(100% - 44px - 248px); } h1 { font-size: 24px; color: #596475; } h2 { font-size: 20px; color: #596475; } h3 { font-size: 18px; } h4 { font-size: 16px; } main li { margin: 6px 0 } .nolist,.featured ul { list-style: none;padding-left:0} .halfCol { width: 49%; } .triCol { width: calc((100% / 3) - 4px) } .icon-tabler-check{margin:0 5px -4px 0} .map { width: 100%; margin: 20px 0; } .partners a { width: 45%; margin: 12px 2%; } .blog h1 { display: none; } .blog h2 { font-size: 24px; } .blog h2 a { color: #596475; } .date { font-size: 13px; margin-top: 5px; } .featured { margin-top: 20px; border-spacing: 10px } .featured, .featured h2 { color: #a2a6b0; } .featured div { background-color: #303642; padding: 10px; border-radius: 5px; } .featured h2 { margin-top: 0; } .featured { font-size: 14px; } .award { background-color: #eee; padding: 15px; } .award p { max-width: 300px; font-size: 12px; margin-top: 5px; text-align: center; margin: 12px auto } aside .featured, aside .featured > div { display: block; width: auto; margin: 12px auto; } aside .featured > div { padding: 5px 15px } .featured { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; } .pad { padding: 20px 10px; } .home { margin-top: 20px; } .home .table { border-spacing: 10px } .home img { float: left; margin: 30px 40px 80px 0; } .home .table > div.bord, div.testimonial { padding: 20px 4%; border: 1px solid #ddd; border-radius: 5px; } .bord h1, div.testimonial { margin-top: 10px; } .bord ul { margin-top: 15px; } .bord li a { color: #596475; } form { margin: 40px 0; } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form textarea, form input[type=number] { font-family: 'Open Sans', sans-serif; font-size: 14px; } form input[type=text], form input[type=email], form input[type=tel], form textarea, form input[type=number] { width: calc(100% - 20px); padding: 0 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=number] { height: 40px; } form textarea { height: 200px; padding: 10px; } form input[type=submit] { font-weight: 600; text-transform: uppercase; background-color: #e99719; color: #fff; padding: 12px 60px; border: none; border-radius: 4px; } form input[type=submit]:hover { cursor: pointer; background-color: #596475; color: #fff; } #contact { text-align: left; } footer { background-color: #a2a6b0; } footer > .wrap { padding: 20px 10px 30px; } footer ul { padding: 0; } footer li { list-style: none; margin-bottom: 8px } footer .triCol:last-of-type h3, footer .triCol:last-of-type li, .right, .right p { text-align: right; } .subfoot { padding: 10px; background-color: #596475 } .subfoot .table > div { vertical-align: middle; } .halfCol .phones strong { display: inline-block; width: 50px } .cq h2 { text-transform: unset } .cq ul { list-style: none; padding-left: 0; margin-top: 0; } .cq li { margin: 20px 20px 20px 0; } .cq img { border-radius: 5px; } @media(max-width:999px) { nav a:hover { border-radius: 4px } nav { padding: 10px } nav a { padding: 10px 18px } } @media(max-width:700px) { aside, main { display: block; width: auto; } aside .news { padding: 10px 30px } footer .triCol { width: 49% } footer .triCol:first-of-type { display: block; width: auto; } footer .triCol:first-of-type li { display: inline-block; margin: 8px } .guar img { display: block; margin: 12px auto; float: none } header { padding: 20px 10px; text-align: center } header .logo, header ul { width: auto; } header li a { margin: 12px 12px 0 !important } aside, main { padding: 10px; } } @media(max-width:600px) { .slideshow { height: 300px } .mainfeat h2 { font-size: 16px; text-align: center } } @media(max-width:500px) { .mainfeat h2 { font-size: 20px; text-align: left; } .featured, .featured > div { display: block; width: auto; margin: 12px auto; } .featured > div { padding: 5px 15px } .mainfeat { padding: 0 10px } nav { text-align: left; } nav li { width: 49%; vertical-align: middle; text-align: center } .halfCol, .home .table.half > div { display: block; width: auto; margin: 15px 0 } .guar img { float: left; margin: 30px 40px 80px 0 } footer .triCol { display: block; width: auto; } footer h3, footer li { text-align: center !important } footer ul { margin-bottom: 30px } main > .imgRight { float: none; margin: 12px auto; max-width: 100% } .award { max-width: 300px !important } header .logo, header .badge { display: none; } header .mobilelogo { background-image: url(/images-design/badge.png); display: block; width: 200px; height: 400px; background-size: cover; margin: 0 auto } } @media(max-width:400px) { .guar img { display: block; margin: 12px auto; float: none } .subfoot .table > div { display: block; width: auto; margin: 12px auto; } .subfoot p { text-align: center } }