/* * Microsite Template v2.0 * Socius Marketing * 2016-2017 * * style.css * * General styles belong here. Anything application-specific will be programatically generated and inserted into the page . **/ body, html { font-family:"Open Sans"; } *:focus { outline: none; } #content { position:relative; z-index:100; } #gradient { position:absolute; z-index:1; top:0; left:0; height:700px; width:100%; background:-webkit-linear-gradient(rgba(27, 27, 27, 0.7), rgba(255, 255, 255, 0)); background:-moz-linear-gradient(rgba(27, 27, 27, 0.7), rgba(255, 255, 255, 0)); background:-o-linear-gradient(rgba(27, 27, 27, 0.7), rgba(255, 255, 255, 0)); background:linear-gradient(rgba(27, 27, 27, 0.7), rgba(255, 255, 255, 0)); } /* Navigation (default) */ nav { text-align:center; } nav ul { list-style:none; padding:0; } nav li { display:inline; } nav li + li { margin-left:15px; } .row-navigation #col-nav {padding: 0;} .row-navigation img { margin-left:-15px; width: 190px; } .row-navigation i { display:none; font-size:32px; cursor:pointer; } .row-navigation .text-right a { margin-right:-15px; } .row-navigation .text-right a:hover { text-decoration:none; } @media screen and (max-width: 1390px) { .row-navigation > div { width:100%; margin:0; } } @media screen and (max-width: 1199px) { .row-navigation > div { width:auto; margin:auto; } .row-navigation i { display:inline-block; } nav { display:none; } #col-logo { text-align:center; } } @media screen and (max-width: 767px) { #col-logo { width:100%; position:absolute; z-index:1; } #col-nav { z-index:2; } } /* Large Callout Buttons */ .callout-row { margin-right:-15px; margin-left:-30px; z-index: 2; position: relative;} .callout-row > div { padding:0; margin:0; } .callout-row a { text-align:center; display:block; padding:30px; font-weight:300; font-size:26px; text-decoration:none; transition:all 0.5s ease; } .callout-row .visible-xs a { text-transform:uppercase; } .callout-row span { display:block; font-size:15px; font-weight:600; margin-top:6px; text-transform:uppercase; } @media screen and (min-width: 992px) { #mobilePrice {display: none;} } /* Forms */ div.form-field input { display:block; width:100%; border:none; background:none; padding:3px 6px; } div.form-field { position:relative; } div.form-field i {position:absolute;right: 5px;top:-1px;} .sweepstakes div.form-field i {border-bottom: 1px solid #4f789e;padding-bottom: 8px;} div.form-field.field-half { display:inline-block; width:49%; } div.form-field.field-half.marge-right { margin-right: 8px; } /* Placeholders */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity:1 !important; } ::-moz-placeholder { /* Firefox 19+ */ opacity:1 !important; } :-ms-input-placeholder { /* IE 10+ */ opacity:1 !important; } :-moz-placeholder { /* Firefox 18- */ opacity:1 !important; } /* Get a Free Price */ #quick-form-container { z-index:101; width:410px; float:right; padding:50px; position:relative; left: -8.33333333%; left: calc(-8.33333333% - 15px); top: 150px; } #quick-form-container h4 { font-size:28px; font-weight:600; margin:0 0 20px; } #quick-form-container p { margin:0 0 5px; } #quick-form-container div.form-field + div.form-field { margin-top:26px; } #quick-form-container input[type=submit] { border:none; position:absolute; top:100%; left:0; width:100%; text-transform:uppercase; font-size:16px; font-weight:600; padding:20px 10px; transition:all 0.5s ease; } /* Schedule an Appointment */ #appointment { /* position:relative; */ padding:6% 6% 10%; overflow:hidden; } #appointment img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1;} #appointment h4 {margin:0 0 5px; text-align:center; font-weight:300; font-size:30px; } #appointment form { display:block; } #appointment div.form-field + div.form-field { margin-top:50px; } #appointment input[type=submit] { margin-top:50px; border:none; width:100%; text-transform:uppercase; font-size:16px; font-weight:600; padding:20px 10px; transition:all 0.5s ease; } #appointment .appt-img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background-size: cover;} #appointment .product_selector { background: transparent; color: #aaa; width: 100%; padding: 5px; margin-top: 10px; } #appointment .col-xs-12.col-sm-6, #appointment .col-xs-12 { margin-top: 30px; } .bvalidator-red-invalid { border-color: #E53339; } /* Map and Appointment Form */ #map-and-form > div { padding:0; } /* #showroom-map, #appointment { height:650px; } */ @media screen and (max-width: 991px) { #showroom-map, #appointment { height:400px !important; } } @media screen and (max-width: 767px) { .navbar-fixed-top .row-navigation { height: 150px; } .navbar-fixed-top .row-navigation #col-logo .stickyphone a { color: #fff; text-decoration: none; font-size: 34px; font-weight: 700; } #appointment { height:auto; background:none; } #appointment img { display:none; } #appointment div.form-field + div.form-field { margin-top:30px; } #appointment .col-xs-12.col-sm-6 + .col-xs-12.col-sm-6 { margin-top:30px; } #appointment .col-xs-12:last-child { padding:0; } } /* Misc Styles */ /* Specials */ #specials-coupon { border:1px dashed #aaa; padding:15px; width:100%; max-width:800px; } #specials-coupon img { width:100%; } #specials-coupon p { margin:10px 0 0; color:#aaa; font-size:11px; line-height:15px; } /* Sweepstakes */ .modal-open { padding:0 !important; } .mm-page.mm-slideout { position:static; } .hidden-xs.hidden-sm.col-lg-10.col-lg-offset-1 { min-height:320px; } #content.sweepstakes-page .hero-img, #content.sweepstakes-page #gradient {height:325px;} #content-one.sweepstakes-page { background:#fff; padding:20px 0; } #rules-modal { cursor:pointer; text-decoration:none; color:#a11014; font-weight:600; font-size:17px; } #rules-modal + p { font-style:italic; margin-top: 20px; font-weight:300; } @media screen and (min-width: 768px) { #content.sweepstakes-page .hero-img, #content.sweepstakes-page #gradient {height:500px;} #content-one.sweepstakes-page { margin-top:170px; } } @media screen and (min-width: 992px) { #content-one.sweepstakes-page { margin-top:280px; } } .table-wrapper { display: table; width:100%; height:100%; overflow:hidden; } .table-cell { display: table-cell; width:100%; vertical-align: middle; } .prize-block { background-repeat: no-repeat; background-size: cover; background-position: center center; height:300px; margin-bottom: 15px; } .prize-block .text-block { width:75%; margin: 0 auto; padding: 15px; text-align: center; } #prizes h1, #prizes h2 { margin:0; font-weight: 700; } #prizes h1 { text-transform: uppercase; } sup { font-size: 50%; } /* General */ .row-navigation { border-bottom:3px solid transparent; } /*#content { padding-top:155px !important; }*/ #mobile-phone { z-index: 2; position: absolute; top: 150px; left: 0; right: 0; text-align: center; } #mobile-phone a { text-decoration:none; display:inline-block;color:#fff; font-size:33px; font-weight:600; } @media (min-width: 768px) { #mobile-phone { display:none;} } /* Page headings */ .page-headings { position:relative; width:80%; margin: 225px auto 30px; z-index: 3;} .page-headings h3, .page-headings h4 { font-weight:600 !important; color:#fff !important; text-shadow:2px 2px 2px rgba(0,0,0,0.5); } .page-headings h3 { font-size:30px; margin:0 0 30px; } .page-headings h4 { display:none; font-size:16px; line-height:30px; } @media (min-width: 768px) { .page-headings { margin: 225px auto 30px; } .page-headings h4 { display:block; } } @media (min-width: 992px) { .page-headings { width:30%; margin-left: 8.333333333%; } } @media (min-width:1200px) { .page-headings { width:40%; } .page-headings h3 { font-size:46px; } .page-headings h4 { font-size:20px; } } @media (min-width:1400px) { .page-headings { margin-left: 15%; } } .home .page-headings {display: none;} /* Hero imagery */ .hero-img { background-size:cover; background-position: center center; height:500px; width:100%; position:absolute; top:0; } @media (min-width: 768px) { .hero-img {height: 750px;} } /* Trust imagery */ #quick-form-trust { margin-top: 30px; text-align: center; } #quick-form-trust img { margin-left: 15px; } #quick-form-trust img:first-child { margin-left: 0px; } #schedule-an-appointment-form-trust { margin: auto; margin-top: 10px; margin-bottom: 30px; text-align: center; max-width: 550px; outline: 0px solid yellow; } #schedule-an-appointment-form-trust img { position: static !important; width: auto !important; display: inline !important; opacity: .7; margin: 20px 20px 0px 20px; } /* Showroom map CTA */ #showroom-map { text-align:center; } #showroom-map > a { position:relative; display:inline-block; text-align:center; } #showroom-map > a { text-decoration:none; display:inline-block; font-weight:300; font-size:28px; padding:9px 24px; margin-top:44px; transition:all 0.5s ease; } /* mmenu */ #mmenu { z-index:22; color:#000; font-size:18px; background:#fff; border-right:1px solid #ddd; } #mmenu .mm-title { color:#000; } #mmenu .mm-navbar { border-color:#ddd; } #mmenu li { border-color:#ddd; margin-left:-20px; padding-left:20px; } #mmenu .mm-listview > li.no-bottom-border:not(.mm-divider)::after { border-bottom-width:0; } /* Content Styles */ #content { padding:0; overflow-x: hidden; } .table-wrapper { display: table; width: 100%; height: 100%; overflow: hidden; } .table-cell { display: table-cell; width: 100%; vertical-align: middle; } .two_column > .table-wrapper > .table-cell { width: 100%; display: table; margin-bottom: 10px; } .tile { overflow: hidden; padding: 5px 15px; } .tile a { position: relative; display: block; text-decoration: none !important; } .tile .block { overflow: hidden; float: left; position: relative; width: 100%; height: 100%; padding: 0px 0px 40%; } .tile.video .block, .tile.gallery .block { padding: 0 0 50%; border: none; height: 100%; } .tile .square { position: absolute; height: 100%; width: 100%; z-index: 3; text-align: center; padding: 30px 15px; } .tile .square, .tile .color { transition: background-color .4s ease-out, opacity .4s ease-out, transform .4s ease-out; -moz-transition: background-color .4s ease-out, opacity .4s ease-out, transform .4s ease-out; -webkit-transition: background-color .4s ease-out, opacity .4s ease-out, transform .4s ease-out; } .tile .image { display: block; } .tile .image { background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: transparent; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; } .tile .image { opacity: 0.1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-name: out; animation-name: out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: -webkit-opacity .2s ease-out, -webkit-transform .5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-opacity .2s ease-out, -webkit-transform .5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity .2s ease-out, transform .5s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile.gallery .image { opacity: 1; -webkit-animation-name: less-out; animation-name: less-out; -webkit-transition: filter .2s ease-out; transition: filter .2s ease-out; } .block_content .entry-content { padding: 5% 30px; } .two_column .tile { height: 100%; padding: 0; } .two_column .tile a { height: inherit; } .entry-content h1 { font-size: 28px; font-weight: 700; margin: 0 0 24px; text-transform: uppercase; } .entry-content p { } .entry-content .features { margin: 30px auto; } .entry-content .feature { text-align: center; } .entry-content .feature h4 { font-weight: 700; text-transform: uppercase; color:#333; margin:0 0 20px; } .hint { font-style: italic; color: #BBB; } @media (min-width: 768px) { .table-cell { height: 100%; } .tile, #ctas-column .tile { padding: 5px; } .tile .block { padding: 0 0 100%; } } @media (min-width: 992px) { .two_column > .table-wrapper > .table-cell { width: 50%; display: table-cell; margin: 0; } .block_content .entry-content { padding: 5% 15%; } }