/**************************************** Site California Waste Services - californiawasteservices.com Author Jessica Grant Edited 03262025 TOC 1. CSS Reset 2. Helper Styles 3. UI Styles 4. Header Styles 5. Navigation Styles 6. Homepage Hero Styles 7. Homepage Content Styles 8. Footer Styles 9. Page-Specific Styles 10. Notice for Untranslated Content 11. Spanish CSS Modifications 12. Video Player Styles 20. Form Styles Fonts Native: Arial, sans-serif; Google fonts: Open-Sans, sans-serif; Colors background #FFFFFF page bg #B9B1A5 default text #000000 dk green #0A4B31 blue #25636E lt blue #335a62 lt lt gray #e4e4e4 swatch orange #BA7616 swatch green #87A227 swatch blue #25636E swatch brown #78684E Navigation Colors Background #0A4B31 Hover #3d715c /***************************************/ /* 1. Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, figure, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } :focus { outline: 0; } body { line-height: 1; color: black; background: white; width: 100%; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } strong { font-weight: bold; } /***************************************/ /* 2. Helper Styles */ .clear { display: block; float: none; clear: both; height: 1px; overflow: hidden; font-size: 1px; line-height: 1px; } .left { float: left; } .right { float: right; } .text-l { text-align: left !important; } .text-r { text-align: right !important; } .text-c { text-align: center !important; } .justify { text-align: justify !important; display: block; } .justify:after { content: ""; display: inline-block; width: 100%; height: 1px; overflow: hidden; } .ir { display: block; border: 0; text-indent: -9999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } .ir { *line-height: 0; } .hidden { visibility: hidden; } .none { display: none !important; } .mar10-rl { margin-right: 10px; margin-left: 10px; } .mar10-t { margin-top: 10px; } .close { float: right; width: 13px; height: 13px; display: inline-block; background: url(../media/images/global/btn-close.png) 0 0 no-repeat; cursor: pointer; } .clearfix::after { clear: both; content: ""; display: block; } /***************************************/ /* 3. UI Styles */ body { margin: 0; padding: 0; font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; color: #000000; background: #FFF; } a:link, a:visited, a:hover, a:active { color: #335a62; text-decoration: underline; cursor: pointer; } a img { cursor: pointer !important; border: none; } a.text-link { text-decoration: underline !important;} .blue_button { -moz-box-shadow:inset 0px 1px 0px 0px #bae7f5; -webkit-box-shadow:inset 0px 1px 0px 0px #bae7f5; box-shadow:inset 0px 1px 0px 0px #bae7f5; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cee3f5), color-stop(1, #7ad5f0) ); background:-moz-linear-gradient( center top, #cee3f5 5%, #7ad5f0 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cee3f5', endColorstr='#7ad5f0'); background-color:#cee3f5; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:2px solid #84daf0; display:inline-block; color:#000000; font-size:12px; font-weight:bold; padding:6px 26px; text-decoration:none;} .blue_button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7ad5f0), color-stop(1, #cee3f5) ); background:-moz-linear-gradient( center top, #7ad5f0 5%, #cee3f5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ad5f0', endColorstr='#cee3f5'); background-color:#7ad5f0;} .green_button { -moz-box-shadow:inset 0px 1px 0px 0px #d9fbbe; -webkit-box-shadow:inset 0px 1px 0px 0px #d9fbbe; box-shadow:inset 0px 1px 0px 0px #d9fbbe; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52) ); background:-moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52'); background-color:#b8e356; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:2px solid #83c41a; display:inline-block; color:#000000; font-size:12px; font-weight:bold; padding:6px 26px; text-decoration:none;} .green_button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356) ); background:-moz-linear-gradient( center top, #a5cc52 5%, #b8e356 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356'); background-color:#a5cc52; } .white_button { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); background-color:#ededed; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #bebcbc !important; display:inline-block; color:#504e4e; font-size:12px; font-weight:bold; padding:6px 26px; text-decoration:none; } .white_button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#dfdfdf;} .form-btn { border: 1px solid #666; background: #f4a331; background-color: #f4a331; background-image: none; border-radius: 0; color: #000; font-size: 16px; font-weight: bold; outline: none; padding: 10px !important; text-align: center; text-transform: uppercase; clear: both; display: inline-block; margin: 20px auto !important; cursor: pointer; width: 50%; } .form-btn:hover { color: #000; border-color: #000; background: #f1bd73; background: #f1bd73; } .text_button { display: block; text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 13px; text-decoration: none !important;} ul.arrows li { padding: 0px 15px; background: url(../media/images/global/icon_arrow_right_000.png) 0 0 no-repeat; } ul.bullets { list-style: disc outside none; margin-left: 25px; } ul.bullets li { display: list-item; margin: 0.5em 0px 0.5em 15px; } ol.number { list-style: decimal outside none; margin-left: 25px; } ol.number li { display: list-item; margin: 0.5em 0px 0.5em 15px; } .btn { background: #a5bfc3; border: 1px solid #25636E; border-radius: 10px; color: #25636E; display: block; font-size: 1.25em; font-weight: bold; line-height: 1.25; margin-bottom: 20px; overflow: hidden; padding: 0.5em; text-align: center; text-decoration: none; text-transform: uppercase; } .btn:hover { text-decoration: underline; } table tr:nth-child(odd) { background-color: #C6DFE4; } #container-wrapper { display: block; width: 100%; margin:0; position: relative; text-align: center; } #container { display: block; text-align: left; margin: 0px auto; padding: 0; background: #FFFFFF; } #wrapper { display: block; } #content { display: block; padding: 1.5vw; background: #FFF; } .breadcrumbs { display: block; height: 38px; line-height: 38px; margin: 0 0 2vw 0; text-align: left; } .breadcrumbs a:link, .breadcrumbs a:visited, .breadcrumbs a:hover, .breadcrumbs a:active { color: #000000; text-decoration: underline; } h1.title { display: block; font-family: "Arial Black", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; text-align: left; color: #25636E; letter-spacing: -0.5px; line-height: 0.9; font-size: 38px; margin-bottom: 1em; } .section { display: block; padding: 0 0 15px 0; border-bottom: 1px solid #cce3e8; margin: 0 0 15px 0; line-height: 1.5; font-size: 16px; } .section.last { border: none; } .section p { display: block; margin-bottom: 1em; } h2.subhead, h3.subhead, h4.subhead { font-family: "Arial Black", Arial, Helvetica, sans-serif; display: block; margin: 0 0 1.5em 0;font-size: 24px; line-height: 1; font-weight: bold; color: #335a62; text-transform: uppercase; } h2.subsubhead, h3.subsubhead, h4.subsubhead, p.subsubhead{ font-family: "Arial Black", Arial, Helvetica, sans-serif; display: flex; margin: 0 0 1.5em 0; font-size: 20px; line-height: 1; font-weight: bold; color: #333; } .footnote { padding: 10px 0 0 50px; font-size: 11px; color: #333; } .note { padding: 4px 0; font-size: 9px; color: #666; } #main-right { box-sizing:border-box; width: calc(85% - 2vw); height: auto; display: inline-block; float: left; margin: 0 0 0 2vw;; border-left: 1px solid #25636E; padding: 0 0 0 2vw; } #main-left { box-sizing:border-box; width: calc(80% - 5vw); height: auto; display: inline-block; float: left; margin: 0px 15px 0px 0px; border-right: 0px solid #25636E; padding: 0px 10px 0px 0px; } #sidebar-left { box-sizing:border-box; width:15%; height: auto; display: inline-block; text-transform: uppercase; color: #0A4B31; text-align: left; margin: 0; position: relative; float: left; font-size: 14px; } ul#sidebar-left li { text-decoration: none; color: #0A4B31; margin-bottom: 13px; } ul#sidebar-left li a { text-decoration: none; color: #0A4B31; } ul#sidebar-left li a:hover { text-decoration: underline; } ul#sidebar-left p a {font-size: 15px !important;} #middle { box-sizing:border-box; width: calc(65% - 11vw); height: auto; display: inline-block; float: left; margin: 0 0 0 2vw; border-left: 1px solid #25636E; padding: 0 0 0 2vw; } #sidebar-right { box-sizing:border-box; width:15%; min-width:265px; height: auto; display: inline-block; float: right; margin-left: 2vw; padding-left: 2vw; } #sidebar-right .recycling { margin-top: 100px; } #sidebar-right .recycling p { font-weight: bold; font-size: 13px; line-height: 16px; color: #0a4b31; } /***************************************/ /* 4. Header Styles */ #top-bar { align-items: center; background: #355f69; box-sizing: border-box; color: #FFF; display: flex; justify-content: space-between; overflow:hidden; padding:6px 1.5vw; width:100%; } #announcement-bar { display:flex; font-size:13px; justify-content: flex-end; width:calc(100% - 150px); } #announcement-bar, #announcement-bar a {color: #FFF; text-decoration: none; text-transform: uppercase; } #announcement-bar p {font-weight:400; line-height:1.5;} #announcement-bar .announcement-heading { font-family: "Arial Black", Arial, Helvetica, sans-serif; } #announcement-bar .wait-time-wrapper {display:flex;} #announcement-bar .header-wait-times {display:flex; align-items: center; gap:18px;} #language { display: block; width: 125px; height: 28px; float: left; } #language, #language a { color: #FFF; font-size: 13px; line-height: 28px; font-weight: bold; } #header { box-sizing: border-box; display: flex; flex-wrap:wrap; justify-content:space-between; margin: 0px 0px 15px 0px; padding: 0 1.5vw; } #header #search-social-wrap { display: none; width: 75%; height: 28px; float: right; } #header #search-social-wrap .search { display: none !important; width: 200px; height: 28px; float: left; visibility: hidden; } #header #search-social-wrap .search input.field { display: inline-block; height: 12px; width: 156px; padding: 5px; border: 1px solid #acacac; background: #FFF; color: #8e8e8e; float: left; margin: 0px 5px 0px 0px; } #header #search-social-wrap .search input.submit { background: url(../media/images/global/btn_search_submit.gif) no-repeat center center; width: 24px; height: 24px; border: none; color: transparent; font-size: 0px; display: inline-block; float: left; } #header #search-social-wrap ul.social-small { display: inline-block; height: 23px; width: auto; } #header #search-social-wrap ul.social-small li { display: inline-block; width: 23px; height: 23px; float: left; margin-left: 15px; } ul.social-small li a { display: block; width: 23px; height: 23px; background-image: url(../media/images/global/sprite_icons_social.png); } ul.social-small li.facebook a { background-position: -50px 0px; } ul.social-small li.yelp a { background-position: -50px -50px; } ul.social-small li.linkedin a { background-position: -50px -100px; } ul.social-small li.twitter a { background-position: -50px -150px; } ul.social-small li.googleplus a { background-position: -50px -200px; } h1#logo { display: inline-block; width: 230px; height: 58px; margin-top: 20px; } ul#cta-buttons { display: flex; height: 42px; justify-content:flex-end; float: right; margin: 36px 10px 0 0; text-transform: uppercase; width:calc(calc(100% - 240px)); } ul#cta-buttons li { display: inline-block; float: left; border-right: 1px solid #acacac; padding: 0 2vw; position: relative; } ul#cta-buttons li:last-child { border: none; margin: 0; padding-right: 0; } ul#cta-buttons li, ul#cta-buttons li a { color: #000000; font-size: 12px; line-height: 13px; text-decoration: none;display: inline-block; height: 39px; position: relative; } ul#cta-buttons li .icon { background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; left: 0; height: 39px; width: 39px; position: absolute; top: 0; } ul#cta-buttons li.cta-quote .icon { background-image: url("/media/images/global/icon_cta_calc.png"); } ul#cta-buttons li.cta-schedule .icon { background-image: url("/media/images/global/icon_cta_cal.png"); } ul#cta-buttons li.cta-reports .icon { background-image: url("/media/images/global/icon_cta_doc.png"); } ul#cta-buttons li.cta-bill .icon { background-image: url("/media/images/global/icon_cta_pay.png"); } ul#cta-buttons li a { padding-left: 50px; } #header.en ul#cta-buttons li.cta-quote a { width: 99px; } #header.en ul#cta-buttons li.cta-schedule a { width: 71px; } #header.en ul#cta-buttons li.cta-reports a { width: 78px; } #header.en ul#cta-buttons li.cta-bill a { width: 42px; } #header.es ul#cta-buttons li.cta-quote a { width: 130px; } #header.es ul#cta-buttons li.cta-schedule a { width: 92px; } #header.es ul#cta-buttons li.cta-reports a { width: 70px; } #header.es ul#cta-buttons li.cta-bill a { width: 54px; } #notice-bar { background: #e2b004; font-size: 16px; left: 0; line-height: 1.3; padding: 1em; position: sticky; text-align: center; top: 0; z-index: 9999; } /***************************************/ /* 5. Navigation Styles */ /* spacing for English version:*/ ul#nav.en li a { padding: 13px 28px; } #nav-wrap { display: block; background: #0A4B31; height: 40px; overflow: visible; } /* LEVEL 1 */ ul#nav { display:flex; justify-content: space-around; position: relative; text-transform: uppercase; font-size: 14px; color: #FFF; z-index: 999; } ul#nav li { font-weight: bold; float: left; zoom: 1; display: inline-block; } ul#nav a { text-decoration: none; color: #FFF; } ul#nav li a { display: inline-block; background: #0A4B31; height: 14px; } ul#nav li a .parent-arrow { display: inline-block; width: 12px; height: 11px; background: url(../media/images/global/icon_arrow_down_FFF.png) 0 0 no-repeat; margin-left: 5px; } ul#nav li a:hover, ul#nav li.hover, ul#nav li:hover { background: #3d715c; position: relative; } ul#nav li.hover a { } /* LEVEL 2 */ ul#nav ul.sub_menu { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; border-top: 1px solid #FFF; background: #0A4B31; } ul#nav ul.sub_menu li { font-weight: normal; float: none; } ul#nav ul.sub_menu li a { border-bottom: 1px solid #3d715c; font-size: 12px; width: 200px; padding: 10px 10px; height: auto; display: inline-block; } /***************************************/ /* 6. Homepage Hero Styles */ #hero { display: block; position: relative; width:100%; height:20vw; margin-top: 2px; } /* Slideshow */ #hero #slides { position: absolute; top: 0px; left: 0px; z-index:100; width: 100%; height: 100%; } #hero #slides * { border: 0px solid transparent; } #hero .slides_container { overflow:hidden; position:relative; display:none; background: #FFF;width: 100%; height: 100%; } #hero .slides_container a { width: 100vw; height: 20vw; display: flex; flex-direction:column; align-items: center; justify-content:center; text-align: center; } #hero .slides_container a img.background { display: block; position: absolute; top: 0px; left: 0; z-index: 101; object-fit: cover;width: 100%;height: 100%;object-position: bottom; } #hero .slides_container a p, .slides_container a h2 { display: block; position: relative; z-index: 102; text-align: center; } #hero #slides .next, #hero #slides .prev { position: absolute; top: 50%; width: 24px; height: 43px; display: block; z-index:110; transform: translate(0, -50%); } #hero #slides .prev {left:10px;} #hero #slides .next { right: 10px; } #hero .pagination { display: none; margin: 0px; width: 907px; height: 5px; position: relative; z-index: 110; background: red; } #hero .pagination li { float: left; margin: 0; list-style:none; height: 5px; overflow: hidden; width: 33.333%; } #hero .pagination li a { display: block; width: 100%; height: 100%; padding: 0; background: #999; float: left; overflow: hidden; text-indent: -9999em; } #hero .pagination li.current a { background: #0A4B31; } #hero #slides a { text-decoration: none; color: #000; } #hero #slides h2 { width: 745px; margin: 0px auto; text-align: center; font-size: 40px; line-height: 0.8; color: #000; font-family: 'Open Sans', sans-serif; font-weight: 800; letter-spacing: -2px; } #hero #slides .cta { width: 300px; display: inline-block; margin: 20px auto 0px auto; font-family: 'Open Sans', sans-serif; font-weight: 700;} #hero #slides .new { display: block; position: absolute; top: -3px; left: -3px; z-index: 105; } /***************************************/ /* 7. Homepage Content Styles */ ul#modules { display: block; margin: 0 auto 20px auto; height: 360px; } ul#modules li.mod { border-radius: 10px 10px 0 0; box-sizing: border-box; width: calc( (100% - 30px) / 4 ); padding: 10px; position: relative; float: left; display: inline-block; margin: 0 10px 0 0; text-align: left; font-size: 11px; line-height: 1.25; height: 100%; } ul#modules li.mod a { font-weight: bold; } ul#modules li.mod01 { background: #e1c69f; background: linear-gradient(#e1c69f, #FFFFFF); } ul#modules li.mod01 a { color: #8b5304; } ul#modules li.mod02 { background: #cdd7a5; background: linear-gradient(#cdd7a5, #FFFFFF); } ul#modules li.mod02 a { color: #4f6307; } ul#modules li.mod03 { background: #c7c1b7;background: linear-gradient(#c7c1b7, #FFFFFF); } ul#modules li.mod03 a { color: #4e3e23; } ul#modules li.mod04 { margin-right: 0px; background: #a5bfc3; background: linear-gradient(#a5bfc3, #FFFFFF); } ul#modules li.mod04 a { color: #25636e; } ul#modules li p { margin: 10px 0px; } ul#modules li ul.arrows li { padding: 0px 15px; background: url(../media/images/global/icon_arrow_right_000.png) 0 2px no-repeat; width: auto; display: block; float: none; margin: 5px 0px; height: auto; min-height: 1px; } ul#modules li h3 { display: block; text-align: center; margin-bottom: 10px; font-size: 18px; line-height: 0.9; text-transform: uppercase; color: #323232; } ul#modules li h3 a { color: #323232 !important; text-decoration: none; font-weight: normal;} ul#secondary { display: none; margin: 50px auto 0px auto; background: url(../media/images/global/bg_vr_tile.png) 50% 0 repeat-y; } ul#secondary li { width: calc(50% - 20px); display: inline-block; float: left; } ul#secondary li:first-child, ul#secondary li.first { margin-right: 40px; } ul#secondary li h4 { display: block; text-align: left; margin-bottom: 10px; font-size: 18px; line-height: 0.9; text-transform: uppercase; color: #323232; } ul#secondary li img { margin-right: 10px; } ul#secondary li p { margin: 10px 0px; text-align: left; font-size: 11px; line-height: 1.25; } ul#secondary li a { color: #323232 !important; text-decoration: none; } /***************************************/ /* 8. Footer Styles */ #superfooter { } #footer-img {background-image: url("/media/images/global/bg_hr_seedling.jpg"); background-repeat:repeat-x; background-position:left top; background-size: auto 100%; width:100%;height:8vw; } #footer-img img { display: none; height: auto; width: 100%; } #member-social-wrap { display: block; background: #a5bfc3; height: 32px; padding: 8px 1.5vw; margin-top: 2px; } #member-social-wrap span.left { display: flex; width: 50%; } #member-social-wrap span.right { display: flex; justify-content:flex-end; width: 50%; } #member-social-wrap label { font-size: 14px; color: #000; line-height: 32px; } #member-social-wrap ul.member { display: inline-block; height: 32px; } #member-social-wrap ul.member li { display: inline-block; width: 36px; height: 32px; float: left; margin-left: 2vw; } ul.member li a { display: block; width: 36px; height: 32px; background-image: url(../media/images/global/sprite_logos_member.png); } ul.member li.usgbc a { background-position: 0px 0px; } ul.member li.dnb a { background-position: 0px -50px; } ul.member li.hchgcc a { background-position: 0px -100px; } ul.member li.bbb a { background-position: 0px -150px; } #member-social-wrap ul.social-large { display: inline-block; height: 32px; } #member-social-wrap ul.social-large li { display: inline-block; width: 32px; height: 32px; float: left; margin-left: 2vw; } ul.social-large li a { display: block; width: 32px; height: 32px; background-image: url(../media/images/global/sprite_icons_social.png); } ul.social-large li.facebook a { background-position: 0px 0px; } ul.social-large li.yelp a { background-position: 0px -50px; } ul.social-large li.linkedin a { background-position: 0px -100px; } ul.social-large li.twitter a { background-position: 0px -150px; } ul.social-large li.googleplus a { background-position: 0px -200px; } ul#footer-links { display: block; background: #f0ebe4; padding:1.5vw; margin: 2px 0;} ul#footer-links a { color: #323232; text-decoration: none; } ul#footer-links a:hover { text-decoration: underline; } ul#footer-links li { width: 165px; display: inline-block; margin: 10px 10px; float: left; } ul#footer-links li ul { display: block; width: 100%; list-style: disc outside none; } ul#footer-links li ul li { width: calc(100% - 15px); display: list-item; margin: 5px 0px 5px 15px; float: none; } ul#footer-links { display: flex; flex-direction: row; flex-wrap: wrap; } ul#footer-links > li { float: none; flex-basis: calc(20% - 20px); width: auto;text-align:left; } #footer { display: block; background: #0A4B31; font-size: 14px; line-height: 1.25; color: #FFF; padding: 10px 1.5vw; } #footer a { color: #FFF; text-decoration: none; } #footer .justify { height: 14px; overflow: hidden; margin-top: 5px; } #footer .footer-cols { text-align:left; display:flex; flex-direction: row; gap: 3vw; padding-bottom:1.5vw;} #footer .footer-cols .footer-col {position:relative; width:33%;} #footer .footer-col:after {content: ''; background:#FFF; bottom:0; display:block; opacity:50%; position:absolute; right:-1.5vw; top:2vw; width:1px;} #footer .footer-col:last-child:after {display: none; } #footer .footer-cols .footer-heading, #footer .footer-cols .footer-heading a {color:#FFF; font-family: "Arial Black", Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold;text-decoration:none; text-transform:uppercase; } #footer .footer-cols .footer-heading {margin:1.33em 0;} #footer .footer-cols p {margin-bottom:1.5em;} /***************************************/ /* 9. Page-Specific Styles */ /* FAQ + DUMPSTER TIPS */ .faq .questions a, .dumpster-tips .questions a { display: block; padding: 5px 5px 5px 25px; text-decoration: none; color: #25636E; font-weight: bold; font-size: 16px; line-height: 1.5; margin-bottom:0.5em; background: url(../media/images/global/icon_question.png) top 5px left no-repeat; } .faq .questions a:hover, .dumpster-tips .questions a:hover { text-decoration: underline; } .faq .answers a.heading, .dumpster-tips .answers a.heading { display: flex; justify-content:space-between; border-top: 1px solid #25636E; height: auto; font-size: 18px; line-height: 1.25; padding: 15px 2vw; margin-top: clamp(30px,2vw,50px); color: #000; font-weight: bold; } .faq .answers a.heading, .dumpster-tips .answers a.heading { background: #a5bfc3; background: linear-gradient(#a5bfc3, #FFFFFF); } .faq .answers a.heading .right, .dumpster-tips .answers a.heading .right { white-space:nowrap; margin-left: 20px; padding-left: 20px; font-weight: normal; font-size: 12px; background: url(/media/images/global/icon_arrow_up_000.png) 0 5px no-repeat; padding-left: 15px; } .faq .answers p, .dumpster-tips .answers p { padding:0 2vw; } /* SERVICE AREAS */ .areas-index table { margin-left:0 0 0 0; font-size: 16px; border: 1px solid #666; width: 100%; max-width:1200px; } .areas-index table td { padding: 3px 10px; text-align: left; vertical-align: top; } .areas-index table td.city { padding-right: 30px; font-weight: bold; } .areas-index table td.city p {width:100% !important;} .areas-index table span.no-link, .areas-index table a:link, .areas-index table a:visited, .areas-index table a:hover, .areas-index table a:active { color: #333; } .areas #middle { min-height: 670px; } .areas #sidebar-right * { text-align: center; } .areas #sidebar-right .map-thumb { margin-bottom: 30px; } .areas #sidebar-right p { margin-bottom: 5px; font-size: 10px; } .areas #sidebar-right h4 { font-size: 15px; line-height: 15px; font-weight: bold; } /* DUMPSTERS */ .dumpsters #middle, .dumpsters #main-right { min-height:380px; } .dumpsters #sidebar-right { border-left: 1px solid #e4e4e4; } /* Dumpsters Slideshow */ #dumpsters-slideshow { display: block; position: relative; width: 227px; text-align: center; } #dumpsters-slideshow h2 { font-weight: bold; font-size: 15px; color: #000; margin: 0px 0px 1em 0px; text-transform: uppercase;} #dumpsters-slideshow h3 { font-weight: normal; font-size: 13px; color: #000; margin: 0px 0px 1em 0px; } #dumpsters-slideshow .slides-wrapper { position: relative; display: block; margin: 0px; height: 230px; } #dumpsters-slideshow #slides { position: absolute; top: 0px; left: 0px; z-index:100; width: 227px; height: 225px; } #dumpsters-slideshow #slides * { border: 0px solid transparent; } #dumpsters-slideshow .slides_container { overflow:hidden; position:relative; display:none; background: #FFF; } #dumpsters-slideshow .slides_container a { width: 227px; height: 225px; display: block; } #dumpsters-slideshow .slides_container a img { display: block; z-index: 101; } #dumpsters-slideshow .slides_container a p { display: block; position: relative; z-index: 101; text-align: center; color: #25636E; font-size: 14px; text-transform: uppercase; } #dumpsters-slideshow #slides .next, #dumpsters-slideshow #slides .prev, #dumpsters-slideshow .pagination { display: none !important; } #dumpsters-slideshow #slides a { text-decoration: none; color: #000; } /* RECYCLING */ .recycling #middle { min-height: 300px; } .recycling table#rates { display: block;} .recycling table#rates .col1 { font-size: 14px; line-height: 14px; width: 120px; font-weight: bold; padding-lefT: 10px; vertical-align: top;} .recycling table#rates .col2 { font-size: 14px; line-height: 14px; width: 150px; vertical-align: top;} .recycling table#rates .col3 { line-height: 14px; padding-right: 10px; vertical-align: top;} .recycling table#rates td { border-top: 2px solid #CCCCCC; padding-top: 10px; padding-bottom: 10px; } .recycling table#rates td span { font-size: 11px;} /* ABOUT */ .about #middle { min-height: 150px; } /* LEED */ .leedRef h4 .left { padding-right: 25px; width: calc(100% - 100px); } .leedRef h4 .right { width: auto; text-align: right; white-space:nowrap; } /* SITE MAP */ ul#sitemap { list-style: disc outside none; margin-left: 25px; } ul#sitemap ul { list-style: circle outside none; margin-left: 25px; } ul#sitemap ul ul { list-style: square outside none; margin-left: 25px; } ul#sitemap li { display: list-item; margin: 1em 0px 1em 2em; } /***************************************/ /* 10. Notice for Untranslated Content */ #untranslated { display: block; background: #CDD7A5; padding: 10px; font-weight: bold; font-size: 14px; color: #333; } /***************************************/ /* 11. Spanish CSS Modifications */ .spanish #hero #slides h2 { font-size: 36px; } .spanish #hero #slides .cta { width: 110px; } .spanish ul#cta-buttons li, .spanish ul#cta-buttons li a { font-size: 11px; } .spanish ul#nav li a .parent-arrow { background-position: 0px 2px; } .spanish ul#nav.es li a { padding: 13px 13px; } .spanish #hero #slides h2 { line-height: 1; } .spanish ul#modules { height: 410px; } .spanish #rates { text-transform: uppercase; } .spanish .recycling table#rates td { padding: 10px; } .spanish ul#footer-links li ul li { min-height: 2em; } /***************************************/ /* 12. Video Player Styles */ /* .vjs-fade-in,.vjs-fade-out { transition-duration: 0s!important; } */ .delivery-vid-container { background: #000; width: 480px; height: 311px; border: 1px solid #000; } .vjs-controls { bottom: -39px !important; visibility: visible !important; opacity: 1 !important; } .vjs-volume-control, .vjs-mute-control { display: none !important; } /***************************************/ /* 20. Form Styles */ .privacy-notice {max-width:800px;} .quoteForm .requiredHeader, .reportForm .requiredHeader, .scheduleForm .requiredHeader{display: block; max-width:800px; width: 100%; font-size: 11px; font-weight:bold; text-align: right; color: #990000; margin: 2vw 0 1vw 0; } /* new converted formstack forms */ #new-fs-form-embed * { max-width:800px; font-size: 12px !important; font-family: Arial, Helvetica, sans-serif !important; } #new-fs-form-embed .fsRequiredLabel {color:#990000;} #new-fs-form-embed .InnerFormBody {padding:0;} #new-fs-form-embed form {margin:0; max-width:100%; padding:0 2px;} #new-fs-form-embed div[class^="InnerFormBody"]{background:transparent; padding:0;} #new-fs-form-embed .fsLabel {display:block;float:none;font-size:13px; font-weight:bold;height:auto;line-height:16px;margin:0 0 9px 0;padding:0;text-align:left;} #new-fs-form-embed .fsSupporting span { font-size: 13px; font-style: italic; text-transform: none; } #new-fs-form-embed .fsDateField input {font-size:13px;} #new-fs-form-embed .fsLabel {display:block;float:none;font-size:13px; font-weight:bold;height:auto;line-height:16px;margin:0 0 9px 0;padding:0;text-align:left;} #new-fs-form-embed .fsFieldCel{ border-bottom: none !important; padding: 5px 0;} #new-fs-form-embed .fsSupporting span { font-size: 13px; font-style: italic; text-transform: none; } #new-fs-form-embed .fsDateField input {font-size:13px;} #new-fs-form-embed .fsPagination {margin: 10px 0 0 0 !important; border-top: 1px dotted #999999;} #new-fs-form-embed .fsError {width: calc(100% - 20px); font-size: 13px; font-weight: bold;} #new-fs-form-embed .fsSubmitButton { border: 1px solid #666 !important; background: #f4a331 !important; background-color: #f4a331 !important; background-image: none !important; border-radius: 0 !important; color: #000 !important; font-size: 16px !important; font-weight: bold !important; margin:18px auto !important; outline: none; padding: 10px !important; text-align: center; text-transform: uppercase; clear: both; display: inline-block; margin: 20px auto !important; cursor: pointer; width: 50% !important; } #new-fs-form-embed .fsSubmitButton:hover { color: #000 !important; border-color: #000 !important; background: #f1bd73 !important; background: #f1bd73 !important; } #new-fs-form-embed form input, #new-fs-form-embed form select, #new-fs-form-embed form textarea, #new-fs-form-embed .fsDateField fieldset {border-radius:5px;} /* quote form dumpster images */ #quote-dumpster-size { position: relative; } #dumpster-size-selection li { border-radius: 10px; cursor: pointer; float: left; margin: 0 5px 5px 0; padding: 0 10px 1px 1px; } #dumpster-size-selection li.active { background-color: #e4e4e4; } #dumpster-size-selection li.selected { background-color: #9be6f5 !important; } #dumpster-tn, #dumpster-tn figure, #dumpster-tn figure img { display: block; position: relative; width: 100%; } #dumpster-tn { margin: 0 5px; width: calc(100% - 10px); } #dumpster-tn.enabled, #dumpster-tn.active { height: 222px; } #dumpster-tn figure { background: #FFF; display: none; left: 0; position: absolute; top: 0; text-align: center; z-index: 2; } #dumpster-tn figure .description { margin: 0; } #dumpster-tn figure .description a { display: inline-block; font-weight: bold; padding: 10px 0;} #dumpster-tn figure.active { display: block; } #dumpster-tn figure.selected { display: block !important; z-index: 1; } /* survey form */ /* custom HRs */ #surveyForm #new-fs-form-embed .form-section-hr { background: transparent; border: 0; color: transparent; display: block; border-bottom: 1px dotted #999999; height: 1px; position:relative; width:100%;} /* overall matrix */ /* top matrix field should be addressed in the code below buy its unique ID in order to impart styling NOTE: there are also styles for mobile lower in the stylesheet */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 table, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tbody{ display:block; } #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 table, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 table * { border-color:transparent !important; background-color:transparent !important; background:transparent !important; } #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 table { background: rgb(198, 222, 227) !important; border:3px solid rgb(37, 99, 110) !important;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr{ display:flex; flex-direction:row;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 td:not(.column), #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 th:not(.column){ width:50%;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 td.column, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 th.column{ width:10%;} /* top row */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr:first-of-type td, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr:first-of-type th { align-items: center; display: flex; flex-direction: column; font-weight: bold; font-size: 15px !important; justify-content: flex-end;} /* label injections */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr:first-of-type th:nth-child(2)::before{ display:flex; text-align:center; font-size:11px; font-weight:normal; margin-bottom: auto; padding-bottom:9px;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr:first-of-type th:last-child::before{ display:block; text-align:center; font-size:11px; font-weight:normal; margin-bottom:9px;} /* EN: */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr:first-of-type th:nth-child(2)::before { content:'Extremely Satisfied';} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr:first-of-type th:last-child::before { content:'Not Satisfied';} /* heading text */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 .fsMatrixLabelRow { font-size: 18px !important; font-weight: bold; line-height: 22px; padding:18px; padding-bottom:0; position: relative; text-align:left; top: -50px;} /* bottom row */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 td.column { align-items: flex-start; display:flex; justify-content: center;} /* yes / no questions */ /* every yes/no field should be addressed in the code below buy its unique ID in order to impart styling NOTE: there are also styles for mobile lower in the stylesheet */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637875, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637878, #surveyForm.surveyFormEN #new-fs-form-embed #label-field10547592, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637888, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637950, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9813749, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637887{ align-items: center; flex-direction: row;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637875 .fsLabel, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637878 .fsLabel, #surveyForm.surveyFormEN #new-fs-form-embed #label-field10547592 .fsLabel, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637888 .fsLabel, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637950 .fsLabel, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9813749 .fsLabel, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637887 .fsLabel{ margin:0; padding-right:18px; width:50%;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637875 fieldset, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637878 fieldset, #surveyForm.surveyFormEN #new-fs-form-embed #label-field10547592 fieldset, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637888 fieldset, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637950 fieldset, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9813749 fieldset, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637887 fieldset{ align-items: center; display: flex; justify-content: space-evenly; width: 50%;} .mobile-only { display: none !important; } /* All below mobile ----------- */ @media only screen and (max-width : 1023px) { /* 3. UI Styles */ .mobile-only { display: block !important; } body { padding: 0; } div#container-wrapper { margin: 0; } div#container-wrapper, div#container { width: 100%; } #wrapper { } #content { box-sizing:border-box; padding: 10px; width: 100%; } #sidebar-right { display: none; } #sidebar-left, #middle, #main-right, #main-left, #sidebar-right.visible-on-mobile { border: 0; display: block; float: none; margin: 0; padding: 0; width: 100%; } #sidebar-left { background-color: #e4e4e4; margin-bottom: 30px; position: relative; } #sidebar-trigger{ border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; color: #000; cursor: pointer; display: block; font-size: 2em; font-weight: bold; height: 34px; line-height: 33px; position: absolute; text-align: center; top: 0; right: 0; width: 33px; } ul#sidebar-left li { margin: 0; padding: 10px; } #sidebar-left li, #sidebar-left li a { color: #0A4B31 !important; font-size: 12px !important; } #sidebar-left li { display: none; } #sidebar-left li.sidebar-mod-header { border-bottom: 1px solid #FFF; cursor: pointer; display: block;} #sidebar-left li.sidebar-mod-header, #sidebar-left li.sidebar-mod-header a { color: #000 !important; font-size: 14px !important; font-weight: bold; padding-right: 35px; } #sidebar-left p { margin-bottom: 0 !important; } .breadcrumbs { height: auto; line-height: 1.2em; min-height: 38px; } #container-wrapper .fb-like { width: auto !important; max-width: 100% !important; } h1.title { font-size: 26px; margin-bottom: 1em; } h2.subhead, h3.subhead, h4.subhead { font-size:22px;} h2.subsubhead, h3.subsubhead, h4.subsubhead, p.subsubhead { font-size:18px;} /* 4. Header Styles */ #header {display:block; padding: 0 10px;} #header #language, #header #language a, #header #search-social-wrap { width: auto; } #header h1#logo { clear: both; } #header ul#cta-buttons { clear: both; display: block; height: auto; float: none; margin: 0 auto; padding-top: 20px; width:100%; } ul#cta-buttons li { height: auto; width: calc(25% - 11px); margin-right: 5px; padding: 0 5px 0 0;} ul#cta-buttons li a { height: auto; min-height: 26px; padding-left: 30px; width: auto !important; } ul#cta-buttons li .icon { height: 26px; width: 26px; } #hamburger-bun { cursor: pointer; display: inline; float: right; margin: 22px -10px 0; transform: scale(0.5); } #hamburger { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); cursor: pointer; height: 45px; width: 60px; transition: .5s ease-in-out; } #hamburger span { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); background: #0A4B31; border-radius: 9px; display: block; height: 9px; opacity: 1; position: absolute; width: 100%; z-index: 2; transition: .25s ease-in-out; } #hamburger span:nth-of-type(1) { top: 0; } #hamburger span:nth-of-type(2), #hamburger span:nth-of-type(3) { top: 18px; } #hamburger span:nth-of-type(4) { top: 36px; } #hamburger figure { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: transparent; border-radius: 100%; opacity: 0; height: 0; width: 0; z-index: 1; } #hamburger.open span:nth-of-type(1), #hamburger.open span:nth-of-type(4) { opacity: 0; } #hamburger.open span:nth-of-type(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #hamburger.open span:nth-of-type(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #hamburger.open figure { background: white; height: 100px; opacity: 1; width: 100px; } /* 5. Navigation Styles */ #nav-wrap { min-height: 20px; height: auto; } ul#nav { display: none; } ul#nav li { display: block; float: none; width: 100%; } ul#nav > li { border-bottom: 1px solid #FFF; } ul#nav li a { display: block; position: relative; } ul#nav li a .parent-arrow { background: none; height: 40px; position: absolute; right: 0; top: 0; width: 40px; } ul#nav li a .parent-arrow:before { border-left: 1px solid #FFF; color: #FFF; content: '+'; display: block; font-size: 2em; line-height: 40px; text-align: center; width: 100%; } ul#nav ul.sub_menu { display: none; left: initial; position: relative; top: initial; visibility: visible; width: 100%; } ul#nav > li.open a .parent-arrow:before { content: '-'; } ul#nav > li.open ul.sub_menu { display: block; } ul#nav > li.open, ul#nav > li.open a, ul#nav > li.open ul.sub_menu a { background: #3d715c; } ul#nav > li.open ul.sub_menu a { display: block; padding: 15px 30px; width: calc(100% - 60px); } /* 6. Homepage Hero Styles */ #hero { display: none; } /* 7. Homepage Content Styles */ ul#modules { height: auto !important; } ul#modules li.mod { display: block; float: none; height: auto; margin: 0 0 20px; width: 100%; } /* 8. Footer Styles */ #footer-img {background-position: top right; height: 13vw;} #member-social-wrap { padding: 8px 10px; height: auto; } #member-social-wrap span.left, #member-social-wrap span.right { display:block; text-align: center; width: 50% !important; } #member-social-wrap label { display: block; float: none; } #member-social-wrap ul.social-large, #member-social-wrap ul.member { display: inline-block; float: none; } #member-social-wrap ul.social-large li, #member-social-wrap ul.member li { margin-left: 15px; } ul#footer-links { display: flex; flex-direction: row; flex-wrap: wrap; } ul#footer-links > li { float: none; flex-basis: calc(20% - 20px); width: auto; } #footer { text-align: center; } #footer .left, #footer .right { display: block; float: none; margin-bottom: 10px; } #footer label { display: block; } #footer .footer-cols { flex-direction:column;} #footer .footer-cols .footer-col {width:100%; text-align:center;} #footer .footer-col:after {bottom: -1.5vw;width: 100%;height: 1px;top: unset;right: unset;} #footer .footer-cols .footer-heading, #footer .footer-cols .footer-heading a {font-size:18px;} /* 9. Page-Specific Styles */ /* SERVICE AREAS */ .areas #middle { min-height: 10px; } .areas #sidebar-right { display: block; float: none; margin-left: 0; padding-left: 0; } .areas-index table { margin-left: 0; width: calc(100% - 2px) !important; } .areas-index table td.city p { width: auto !important; } .areas-index table td.rate { min-width: 65px; } /* FAQ + DUMPSTER TIPS */ .tips-loading-img { display: block; max-width: 100%; } } /* Tablets (landscape) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1023px) { /* 3. UI Styles */ body { padding: 0; } div#container-wrapper { margin: 0; } div#container { width: 100%; } } /* Tablets (portrait) ----------- */ @media only screen and (max-width : 768px) { /* 4. Header Styles */ #announcement-bar .header-wait-times { align-items: flex-start; flex-direction: column; gap:0; } #announcement-bar .header-wait-times .divider {display:none;} /* 8. Footer Styles */ ul#footer-links { display: none; } #member-social-wrap span.left, #member-social-wrap span.right { width: 100% !important; } /* 9. Page-Specific Styles */ /* RECYCLING */ .recycling table#rates .col1 { width: 30%; } .recycling table#rates .col2 { padding-left: 1%; padding-right: 1%; width: 33%; } .recycling table#rates .col3 { width: 33%; } /* 20. Form Styles */ .form-btn { width: 100%; } /* survey form */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 table { padding-bottom:36px; padding-top:100px; position:relative;} /* heading text */ #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 .fsMatrixLabelRow { align-items: center; display: flex; height: 100px; justify-content: center; left: 0; padding:18px; position: absolute; top: 0; width: 100% !important;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 tr:first-of-type td:first-of-type:empty { display:none !important;} #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 td.column, #surveyForm.surveyFormEN #new-fs-form-embed #label-field9637837 th.column{ width:20%;} } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (max-width : 480px) { /* Styles */ /* 3. UI Styles */ /* 4. Header Styles */ ul#cta-buttons li { width: calc(50% - 11px); } ul#cta-buttons li:nth-of-type(1), ul#cta-buttons li:nth-of-type(2) { height: 3.3em; } ul#cta-buttons li:nth-of-type(3), ul#cta-buttons li:nth-of-type(4) { height: 2.2em; margin-top: 20px; } ul#cta-buttons li:nth-of-type(2), ul#cta-buttons li:nth-of-type(4) { border-right: none; } /* quote form */ #dumpster-tn.enabled, #dumpster-tn.active { height: 190px; } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }