@charset "UTF-8"; /* Sets the encoding of the style sheet to Unicode UTF-8. Don't move it. ---------------------------------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////////////////////////////// // TABLE OF CONTENTS //////////////////////////////////////////////////////////////////////////////////////////////////// ---------------------------------------------------------------------------------------------------- 01 - GENERAL STUFF FIRST 1A - Patterns 1B - Bootstrap Override 1C - Backgrounds ** 02 - LAYOUT 2A - Header 2B - Banner 2C - Content 2D - Footer 2E - Internet Explorer ** 03 - MEDIAQUERIES 3A - High DPI 3B - Above widths 3C - Dektop 3D - Tablets 3E - Cellular /*-------------------------------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////////////////////////////// 01 - STYLE.CSS : GENERAL STUFF FIRST //////////////////////////////////////////////////////////////////////////////////////////////////// ---------------------------------------------------------------------------------------------------- COLORS: #f3f3f3 => GREY LITE #a2a2a2 => GREY #404345 => GREY DARK #981f23 => RED #b32d32 => RED LITE ---------------------------------------------------------------------------------------------------- FONTS: */ @font-face { font-family: 'National'; src: url('../fonts/NationalWeb-Regular.eot'); src: local(':)'), url('../fonts/NationalWeb-Regular.woff') format('woff'), url('../fonts/NationalWeb-Regular.ttf') format('truetype'), url('../fonts/NationalWeb-Regular.svg') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'National'; src: url('../fonts/NationalWeb-Bold.eot'); src: local(':)'), url('../fonts/NationalWeb-Bold.woff') format('woff'), url('../fonts/NationalWeb-Bold.ttf') format('truetype'), url('../fonts/NationalWeb-Bold.svg') format('svg'); font-weight: 800; font-style: normal; } /* font-family: "National", Helvetica, Arial, sans-serif; ---------------------------------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////////////////////////////// // GENERAL //////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------- */ * { box-sizing: border-box; backface-visibility: hidden;} html { font-size: 10px;} body { font-family: 'National', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 100%; color: #000;} img { display: block; max-width: 100%; vertical-align: bottom;} /* Responsive images. Also, fixed spacing at bottom of image sometimes. */ div, span, p, ol, ol li, ul, ul li { list-style-type: none; vertical-align: top; padding: 0; margin: 0;} /* Fixes alignment issues */ h1, h2, h3, h4, h5, h6, .h1, .h2, .heading { color: #981f23; font-style: normal; display: block; margin: 0; font-weight: 700; line-height: 0.95; letter-spacing: -0.015em;} h1, .h1 { font-size: 6.0em; margin-bottom: 40px; white-space: normal;} h2, .h2 { font-size: 4.3em;} h3, .h3 { font-size: 2.3em; line-height: 1.05;} h1 small { display: block; font-size: 40%; color: #000; text-transform: uppercase;} .white { color: #fff;} p, li, dl { font-size: 2.0em; line-height: 1.35;} p.text-sm { font-size: 1.8em;} a, i, img { text-decoration: none; border: none; outline: none; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;} a { color: #981f23;} a:hover, .btn:hover, a:focus, .btn:focus, a:active, .btn:active, .btn:active:focus { color: #981f23; outline: 0; text-decoration: none;} .btn.style-2 { background-color: #ffcc00; color: #231f20; text-decoration: none !important;} .btn.style-2:hover { background-color: #ffcc00; color: #231f20;} form { text-align: left;} form ul { } form ul li { position: relative; float: left; width: 100%; margin: 15px 0 0;} form ul li.half { width: 48.5%; margin-right: 3%;} form ul li.half + .half { margin-right: 0;} .form label { color: #404345; font-size: 75%; font-weight: 700; margin: 0;} .form .input { width: 100%; background-color: #f2f2f2; padding: 10px; height: 50px; line-height: 1; border: 1px solid #cccccc; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;} .form .hide { position: absolute; z-index: 0; width: 0; height: 0; background-color: transparent; padding: 0; line-height: 0; border: none; -webkit-border-radius: 0; visibility: hidden;} .form .error .input { background-color: #f3c9c9; border-color: #b89292;} .form select.input { background: url('../images/icon-select.png') #f2f2f2 no-repeat center right 17px; padding-right: 50px; background-size: 11px; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .form .select-wrap { position: relative;} .form .select-wrap::before { content: ""; position: absolute; top: 8px; right: 45px; bottom: 8px; background: #cccccc; width: 1px;-webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;} .form .error .select-wrap::before { background: #b89292;} .form select option { font-weight: 400;} .form select::-ms-expand { display: none;} .form .submit { text-align: center;} .form .btn { margin: 20px auto 0; font-size: 100%;} .group-B .input { height: 50px;} .group-B .btn { margin-bottom: 20px;} /******************* ** Spacing *******************/ .text ul, .text ol, .text p { margin: 30px auto;} .text ul, .text ol { padding: 0 5px 0 15px;} .text ul li { margin-top: 5px; list-style: disc; } .text ol li { margin-top: 5px; list-style: decimal;} .text ul li:first-child, .text ol li:first-child { margin-top: 0;} .text ul ul, .text ol ul, .text ul ol, .text ol ol { margin: 0; padding-left: 30px;} .text p + ul, .text p + ol { margin-top: -20px;} .text p + h2 { margin-top: 45px;} .text .icon { padding-bottom: 30px;} .text *:first-child { margin-top: 0;} .text *:last-child { margin-bottom: 0;} .location.text-center h3 { color: #000; font-weight: normal;} .svg-icon { width: 7.3rem; filter: invert(100%); } .first .svg-icon { width: 9rem; filter: invert(100%); } /* 1A.Patterns ---------------------------------------- ////////////////////////////////////// */ /******************* ** Buttons *******************/ .btn { background-color: #981f23; color: #fff; display: inline-block; position: relative;border: none; height: auto; padding: 16px 22px; cursor: pointer; font-size: 1.8em; font-weight: 700; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;} .btn:hover, .btn:focus, .btn:active, .btn:active:focus { background-color: #b32d32; color: #fff;} .btn.phoneIcon { padding-left: 45px; background-position: left 18px center; background-repeat: no-repeat; background-size: 16px auto;} .btn.phoneIcon, .btn.phoneIcon:active, .btn.phoneIcon:active:focus { background-image: url('../images/icon-phone.png');} /******************* ** Vertical Align *******************/ [class*="va-"] { position: relative; height: 100%; font-size: 0;} [class*="va-"] > * { display: inline-block; float: none; font-size: 10px; height: auto;} [class*="va-"] > .fill { font-size: 0!important; width: 0; height: 100%;} .va-t > * { vertical-align: top;} .va-m > * { vertical-align: middle;} .va-b > * { vertical-align: bottom;} /* 1B. Bootstrap Override ---------------------------------------- ////////////////////////////////////// */ [class^="container"] { width: 100%; max-width: 1600px; margin: 0 auto; -webkit-transition: padding 0.25s ease; -moz-transition: padding 0.25s ease; transition: padding 0.25s ease;} [class^="container"] [class^="container"] { padding-left: 15px; padding-right: 15px;} .section { padding-top: 60px; padding-bottom: 60px; position: relative;} .section.padd-md { padding-top: 75px; padding-bottom: 75px;} .section.padd-lg { padding-top: 90px; padding-bottom: 90px;} .section.padd-xl { padding-top: 105px; padding-bottom: 105px;} .section.padd-xxl { padding-top: 120px; padding-bottom: 120px;} section.no-gutter .row { margin: 0 auto;} section.no-gutter .row > div { padding: 0;} .section.plain + .section.plain { padding-top: 0;} .shaded { background: #f2f2f2} .shaded-color-1 { background-color:#990000; } .shaded-color-2 { background-color:#000; } .shaded-color-1 a:not(.btn) { color:#fff;} /* 1C. Backgrounds ---------------------------------------- ////////////////////////////////////// */ .background { background-repeat: no-repeat; background-position: center; background-size: cover;} .background.bg-map { background-image: url('../images/bg-map.jpg');} .center-image { margin: 0 auto; width: 800px; } /* ------------------------------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////////////////////////////// 02 - STYLE.CSS : LAYOUT //////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------- html, body, #overlay, #wrapper { width: 100%; height: 100%;} html, body { width: 100%; height: 100%;} */ html { opacity: 0;} html.ready { opacity: 1; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; transition: opacity 0.5s ease;} body { background: #fff;} #wrapper { position: relative; z-index: 0;} #overlay { overflow-y: auto; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; padding: 0; background-attachment: fixed; pointer-events: none; color: #404345; text-align: center;} .overlay_open body { overflow: hidden;} .overlay_open #overlay { opacity: 1; pointer-events: auto;} #overlay .close-overlay-corner { position: absolute; top: 0; right: 0; height: auto; z-index: 10; padding: 30px; font-size: 2.0em; color: #981f23; cursor: pointer;} #overlay .close-overlay-corner img { width: 22px;} #overlay .close-overlay-corner span { display: block; margin-left: 10px; font-size: 2.0em;} /**/ #overlay .close-overlay-bottom { display: none; position: absolute; bottom: 0; left: 0; height: auto; width: 100%; padding: 30px 15px; text-decoration: underline;} /**/ #overlay-inner .container { padding-top: 90px; padding-bottom: 90px;} #overlay-inner .specialty-name { white-space: nowrap;} #wrapper, #overlay { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper, .overlay_open #overlay { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #overlay { -webkit-transform: translate3d(105%,0,0); -moz-transform: translate3d(105%,0,0); transform: translate3d(105%,0,0); } .overlay_open #wrapper { -webkit-transform: translate3d(-100%,0,0); -moz-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); } .section-2 .right ul { float: left; width: 50%; padding: 0 60px 0 0; margin: 0;} .section-2 .right ul li { list-style-type: none; margin-top: 15px;} .section-2 .right ul li a { text-decoration: underline;} .section-2 .heading { color: #000; margin-bottom: 30px; font-size: 2.6em;} @media screen and (min-width: 768px) { .section-2 .left::before { content: ""; position: absolute; top: -90px; bottom: -45px; right: 0; width: 1px; background: #ccc;} .section-2 .right::after { content: ""; position: absolute; top: -90px; bottom: -45px; left: -1px; width: 1px; background: #ccc;} .section-2 .left { padding-right: 60px;} .section-2 .right { padding-left: 60px;} } @media screen and (max-width: 767px) { .section-2 .heading { margin: 30px 0 15px;} } @media screen and (max-width: 480px) { .section-2 .right ul { width: 100%;} } #form-wrap { position: relative; max-width: 700px; margin: 0 auto; padding: 60px; background: #fff; text-align: center; -webkit-border-radius: 6px; border-radius: 6px;} #form-wrap .h1 { margin-bottom: 0px;} #form-wrap .text { margin-bottom: 30px;} #thank-you { display: none; opacity: 0; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;} #thank-you.ready { display: block; opacity: 1;} #thank-you .h2 { color: #508a5a;} /* 2A. Header ---------------------------------------- ////////////////////////////////////// */ #header { padding: 10px 0;} #header .logo-l { float: left; margin: 12px 0;} #header .logo-r { float: right;} .header-number {font-size: 23px; padding-top: 2rem;} /* 2B. Banner ---------------------------------------- ////////////////////////////////////// */ #banner { position: relative; z-index: 1;background: #fff;} #banner .background { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: auto; width: 50%; background-image: url('../images/banner.jpg'); background-position: top 30% center;} #banner h1 small { margin-bottom: 30px;} #banner .scroll_down { position: absolute; z-index: 0; top: 100%; right: 0; bottom: 0; left: 0; margin: auto; width: 55px; cursor: pointer;} #banner p { font-size: 2.2em; line-height: 1.5; color: #000;} #banner a { text-decoration: underline;} /* 2C. Content ---------------------------------------- ////////////////////////////////////// */ #content { padding: 0;} .half-wrap { position: relative;} .half-wrap .image { width: 94%;} .half-wrap .text { padding-top: 30px; padding-bottom: 30px;} .icon-blocks { margin: 0 auto 45px;} .icon-block { background-color: #990000; color: #fff; font-size: 2.2em; line-height: 1.35; text-align: center;} .icon-block .image { padding: 30px 5px 0;} .icon-block .image img { width: auto; height: 108px; display: block; margin: 0 auto;} .icon-block .text { padding: 2.7rem 5px 3rem 5px; } /**/ .icon-block .image.bg-best { margin: 0; padding: 0; background-size: 125% auto;} .locations { margin: 60px 0 0; text-align: left;} .location { margin-bottom: 45px } .location img { margin: 0 0 30px; width: 100%;} .location p { margin: 15px 0;} .location p:last-child { margin-bottom: 0;} .location a { font-weight: bold; text-decoration: underline;} .location .phone a { color: #000; text-decoration: none; font-size: 120%;} #location-selector-wrap { display: none; padding: 45px; background: #990000; color: #fff;} #location-selector-wrap a { color: #fff; text-decoration: underline;} #location-selector { position: relative; padding-right: 70px;} #location-selector select { background-color: #fff; font-size: 2.0em;} #location-selector .submit { position: absolute; top: 0; right: 0; bottom: 0; width: 60px; display: block; text-align: center; border: none; border-radius: 4px; cursor: pointer; background: #fff; color: #990000;} #location-selector .submit span { font-size: 2.0em;} /* 2D. Footer ---------------------------------------- ////////////////////////////////////// */ #footer { background: #363636; padding: 45px 0; color: #999999;} #footer a { color: #999999; text-decoration: underline;} #footer p + p { margin-top: 15px;} /* 2E. Internet Explorer ---------------------------------------- ////////////////////////////////////// */ html.ie9 { } html.ie8-7 { } /* ------------------------------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////////////////////////////// 03 - MEDIAQUERIES //////////////////////////////////////////////////////////////////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ /* 3A. High DPI ---------------------------------------- ////////////////////////////////////// */ @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn.phoneIcon, .background.bg-map { background-image: url('../images/bg-map@2x.jpg');} #banner .background { background-image: url('../images/banner@2x.jpg');} } /* 3B. Above widths ---------------------------------------- ////////////////////////////////////// */ @media screen and (min-width: 1901px) { body { font-size: 115%;} [class*="va-"] > * { font-size: 11.5px;} } @media screen and (min-width: 1601px) { } @media screen and (min-width: 1200px) { [class*="container"] { padding-right: 10.8em; padding-left: 10.8em;} } @media screen and (min-width: 992px) { #banner .text { padding-right: 7.5%;} .half-wrap .text { padding-bottom: 60px;} .icon-blocks { margin-top: -30px; max-width: 1000px; padding: 0 30px;} } /* 3C. Dektop ---------------------------------------- ////////////////////////////////////// */ @media screen and (max-width: 1600px) { } @media screen and (max-width: 1400px) { } @media screen and (max-width: 1250px) { } @media screen and (max-width: 1199px) { } /* 3D. Tablets ---------------------------------------- ////////////////////////////////////// */ @media screen and (max-width: 1024px) { } @media screen and (max-width: 991px) { h1, .h1 { font-size: 8.0em;} h2, .h2 { font-size: 3.0em;} .section, .section[class*="padd-"] { padding-top: 60px; padding-bottom: 60px;} #banner h1 { margin-bottom: 30px; font-size: 5.0em;} } @media screen and (max-width: 767px) { .section, .section[class*="padd-"] { padding-top: 30px; padding-bottom: 30px;} .text ul, .text ol, .text p { margin: 15px auto;} .text p + ul, .text p + ol { margin-top: -10px;} .text p + h2 { margin-top: 30px;} #header { padding: 20px 0;} #header .logo-l { max-width: 200px; margin: 0; max-height: 40px;} #header .logo-r { display: none;} #banner { padding: 0 0 30px;} #banner h1 { margin: 0 0 30px;} #banner h1 small { margin-bottom: 15px;} #banner .background { position: relative; padding-top: 70%; background-position: center; left: 0; bottom: auto; width: auto; margin-bottom: 30px;} #banner .scroll_down { display: none; left: auto; padding: 15px; bottom: -38px;} .panel { margin-top: 30px} .panel .body, .panel .heading { padding: 15px} .half-wrap .image { margin: 30px 0 0; width: 100%;} .locations { margin: 30px 0 0;} .location { padding: 15px 0 5px;} .location img { margin: 0 0 15px;} .location p { margin: 10px 0;} .icon-block { margin: 30px auto 0; width: 100%; max-width: 300px;} .icon-block .image { min-height: 110px;} #location-selector-wrap { padding: 30px; margin-top: 30px;} .icon-block .text { padding: 3rem 5px; } } /* 3E. Cellular ---------------------------------------- ////////////////////////////////////// */ @media screen and (max-width: 667px) { body { font-size: 85%;} [class*="va-"] > * { font-size: 8.5px;} #form-wrap { padding: 30px;} #form-wrap .text { margin-bottom: 15px;} form ul li.half { width: 100%; margin-right: 0;} } @media screen and (max-width: 480px) { } @media screen and (max-width: 375px) { }