tag as a child no matter the level of it. h1:has(> p): Selects the
tag as a direct child. h1:has(+ p): Selects the
tag. */ h1, h2, h3, h4 { float:left; clear: left; font-family: "Inter Tight", Raleway, sans-serif; } h1 { font-size:2em; color: #3A3A65; font-weight: 600; line-height: 2; line-height:1.2; padding-bottom: 0.3em; } /* h1:has(+ h2) { line-height: 2 } */ h2 { font-size:1.5em; color:#222; font-weight:500; position: relative; line-height: 2; } h3 { font-size:1.25em; color:#3A3A65; font-weight: 400; line-height: 2; text-transform:uppercase; } #footer-contact h3 { color:#aaa; } h4 { font-size:1.25em; color:#777; font-weight: 400; } h1 a { color:#0096AA; } h2:after { background-color: rgba(255, 255, 255, 0.67); content: ''; display: block; position:absolute; left:0; bottom:0em; height: 0.15em; width: 1.5em; margin-bottom: 0em; } #mirage-screen-systems h2:after { display:none; } #footer-contact h2:after { background-color: rgba(255, 255, 255, 0.1); } /* Elements --------------------------------------- */ hr { height: 0.15em; margin: 1em 0; display:none; } hr.visible { display: inline; float:left; clear:left; width: 100%; height:0.175em; margin: 1em 0; background-color: rgba(255, 255, 255, 0.67); } nav { font-family: "Inter Tight", sans-serif; } blockquote { text-align: justify; float:left; clear:left; width: 100%; background-color:rgba(225, 235, 230, 0.5); padding:0.5em 2em 0.25em 2em; margin:0.5em 0 1em; border-radius: 3pt} blockquote p { line-height:1.5; margin-bottom: 1em !important; } blockquote p:before { color: #888; font-size:3em; line-height:0.01; position:relative; top:0.5em; margin-right:0.125em; content:"\201C"; opacity:0.9; margin-top:-1.25em; margin-bottom:-1.25em;} blockquote p:after {color: #888; font-size:3em; line-height:0.01; position:relative; top:0.5em; margin-left:0.125em; content:"\201D"; opacity:0.9; margin-top:-1.25em; margin-bottom:-1.25em;} cite { text-align:right; width: 100%; float: right; clear: left; font-size:0.93em; line-height:1; padding:0; margin:0; padding-bottom: 0.75em; display:block; opacity:0.875;} cite:before {content:"- ";} cite:after {} a {color:#1b153e;} /* Named -------------------------------------------- */ /* Elements with a class ---------------------------- */ a.click-button { float: left; clear: both; left: 1em; position: relative; text-decoration: none; color: white; margin: -0.25em -0.5em; padding: 0.25em 0.5em; background-color: #C51C32; border-radius: 2pt; box-shadow: 1px 1px 1px #aaa; } div.navwrap-for-slant { float:left; background-color: white; width:100%; height: auto; } /* div.sitemap { float:left; padding-top: 1.5em; padding-bottom: 1.5em; -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%); } */ div.sitemap { float:left; padding-top: 1.5em; padding-bottom: 3em !important; -webkit-clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); } /* Desktop and Mobile -------------------------------- */ .desktop { display:block; visibility:visible; } .mobile { display:none; visibility:hidden; } /* in #content ---------------------------------------- */ #content { background: linear-gradient( to bottom left, rgba(255,255,255,0.99), rgba(255,255,255,0.93)), scroll /* repeat, url(../images/noise.svg) repeat; */ /* background-image:url(../images/3-noise-frames.gif); background-repeat: repeat; opacity:1; */ } #content img { border-radius: 2pt !important; } #content blockquote img { float:right; width: 25%; min-width: 5.5cm; padding-right:1pt; } #content blockquote img.roundlogo { width: 12.5%; min-width: 2.75cm; padding-right:0; } #content strong, #content b { opacity: 0.75; } #content ul, #content ol { float:left; clear:left; list-style-position: outside; margin-left: 2em; margin-top: 0.5em; margin-bottom: 0.75em; } #content ul li { list-style-type: square; clear:left; } #content p { float:left; clear: both; margin-top: 0.5em; margin-bottom: 0.75em; } #content p:first-child { margin-top: 0.75em; } #content p:last-child { margin-bottom: 1em; } #content p img { float:right; } #content img { width:100%; border-radius: 1pt; } #content img.desktop, #content img.mobile { margin-bottom: 1em; } #content div.no-margin-bottom { margin-bottom: 0 !important; } #content div.no-margin-top { margin-top: 0 !important; } #content { float:left; clear: left; width: 100%; padding: 2em 0; } #content.with-padding { padding-left: 3.75%; padding-right: 3.75%; } #content div.twocols { clear:left; float:left; width:100% !important; margin-bottom:0em; padding-left: 3.5%; padding-right: 3.5%; } #content div.twocols-split { clear:left; float:left; width:100% !important; margin: 1em 0 0 0; column-count: 2; display:inline-block !important; text-align: justify; column-gap: 2vw; } #content div.twocols-split p:first-of-type{ margin-top:0; padding-top:0; } #content div.left { clear:left; float:left; width:48.75% !important; margin-bottom:0em; padding-left: 3.5%; } #content div.right { clear:right; float:right; width:48.75% !important; margin-bottom:1em; padding-right: 3.5%; } #content div.left-no-margin-left { clear:left; float:left; width:48.75% !important; } #content div.right-no-margin-right { clear:right; float:right; width:48.75% !important; } #content div.left-no-margin-left img { border: 1em rgba(255,255,255,0.5) solid; border-right: 1em rgba(255,255,255,0.5) solid; border-left:none; border-top-right-radius: 3em !important; border-bottom-right-radius: 3em !important; } #content div.right-no-margin-right img { border: 1em rgba(255,255,255,0.5) solid; border-left: 1em rgba(255,255,255,0.5) solid; border-right:none; border-top-left-radius: 3em !important; border-bottom-left-radius: 3em !important; } #content div.clearboth { clear:both } #content figcaption { font-size: small; margin-top: -1em; padding-right: 3em; text-align:right } #content div.left-no-margin-left figcaption { text-align: left; padding-right: 0; padding-left: 3em; } #content div.twothirds { width:73.75% !important; } #content div.onethird { width:23.75% !important; margin-top: 3em; } #content div iframe { width:100%; margin: 1em 0; } #distributors #content iframe { width: 50%; float:right; height: 16em; } #distributors #content p { float:left; clear:left; width:50%; } #distributors #content hr { display: inline; float:left; clear:left; width: 100%; height:0.2em; margin: 1em 0; background-color: rgba(255, 255, 255, 0.67); } .video_wrapper { position: relative; padding-bottom: 66.7%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ } .video_wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%;height: 100%; } /* Header and Navigation -------------------------- */ /* Header ----------------------------------------- */ #header { top:3em; z-index: 2; float:left; background: rgba(255,255,255,1); width:100%; padding: 2vmax 3.75% 1.1vmax 3.75%; float:left; } #homepage #header { position: absolute; background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)); } @media screen and (min-width: 0px) and (max-width: 45em) { #homepage #header { position:relative; background-color: #fff; } #header { top: 0; } } #header img#companylogo { width:11%; min-width:4.5cm; float:left; margin-top: -1em; border-radius: 5px; } @media screen and (max-width: 80em) { #header img#companylogo { width: 9%; min-width: 4.25cm; margin-top: -1em } } @media screen and (max-width: 60em) { #header img#companylogo { width: 8.5%; min-width: 4cm; margin-top: -1em; } } @media screen and (max-width: 56em) { #header img#companylogo { width: 8%; min-width: 4cm; margin-top: -1.5em; } } @media screen and (max-width: 44em) { #header img#companylogo { width: 8%; min-width: 4cm; margin-top: -1.25em; } } @media screen and (max-width: 32em) { #header img#companylogo { width: 7.5%; min-width: 3.75cm; margin-top: -1em; padding-bottom: 0.5em; } } #header #phonenumber { font-size: 1.33em; line-height: 1.3; float:right; text-align:right; color:#111; text-shadow:1px 1px 0px #fff; font-stretch: condensed !important; } #header #phonenumber a { text-decoration: none; transition: border 0.55s; border-bottom: 2px solid transparent; } #header #phonenumber a:hover { border-bottom: 2px solid #fff; } #header .secondary-logos a { float:right; display: block; width:auto; height:auto; } #header .secondary-logos a img { width: 4.75em; float: right; margin-top: -0.667em; margin-left: 1em; border-radius: 50%; opacity: 0.87;} #header .secondary-logos a img.thumbs-up-character { opacity: 0.83;} /* Navigation */ .navigation { position: relative; min-height: 3em; float:left; z-index: 11; width: 100%; padding: 0 3.75% 0 3.75%; background-color: #0E4023; color: #fff; opacity: 1; } .navigation.sitemap { margin-top:-1px /* fix the 1px line glitch after slanting on ff */ ; padding: 2em 3.75%; background-image:none; background-color: #fff; } .navigation nav * { list-style-type:none; text-indent:0; } .navigation nav a { font-size:1em; font-weight: 500; line-height: 1.75; color:#fff; text-decoration:none; border-radius:1px; outline-offset: -3px; } .navigation.sitemap nav a { color:#000; } .navigation nav small { font-size:small; color:#aaa; clear:none; float:none; } .navigation nav ul { float:left; } .navigation nav ul ul { } .navigation nav ul li { float:left; line-height: 1.75; } .navigation nav ul li { color: #888 } .navigation nav > ul > li { color: #fff; } .navigation nav ul li.lithatnests > span { } .navigation.sitemap nav ul li.lithatnests > span { } .navigation.sitemap nav ul li.lithatnests > span:after { content:":"; } .navigation nav > ul > li { line-height: 3; } .navigation nav > ul > li { margin-right:0.75em; } .navigation nav ul li.toolong { letter-spacing: -0.75px; } .navigation nav ul > li:last-child { margin-right:0; padding-right:0; } .navigation nav ul li ul li { float:none; padding-right:0; margin-right:0; } .navigation nav ul li a, .navigation nav ul li ul li a { transition: background-color 0.45s 0.04s, color 0.45s 0.04s; padding:0.12em 0.4em 0.08em; color:#fff; border-radius: 1px; } .navigation nav ul li a:hover, .navigation nav ul li ul li a:hover { background-color: #fff; color: #000; } /* - Toggles -------------------------------------- */ br.tallbr { float:left; width: 100%; margin-top:0.5em; } .toggle-title { opacity: 0.9; cursor: pointer; transition: opacity 0.45s; } .toggle-title:hover { opacity: 1; } .toggle-title:after { content: " +"; transition: color 0.45s; } .toggle-title:hover:after { color: navy; opacity: 0.9; } .tactive { opacity: 0.9; } .tactive:after { content: " -"; } .toggle { margin: 0.5em 0 1.5em; display: none; overflow: hidden; float: left; clear:both;} /* - Current Navigation Items ------------------- */ #homepage ul li.homepage a, #homepage ul li.homepage ul li a, #services ul li.services a, #services ul li.services ul li a, #screens-overview ul li.screens-overview > a, #screens-overview ul li.screens-overview > a, #screens-window-screens ul li.screens-window-screens > a, #screens-window-screens ul li.screens-window-screens > a, #screens-screen-doors ul li.screens-screen-doors a, #screens-screen-doors ul li.screens-screen-doors ul li a, #screens-retractable-screens ul li.screens-retractable-screens a, #screens-retractable-screens ul li.screens-retractable-screens ul li a, #screens-screen-ins ul li.screens-screen-ins > a, #screens-screen-ins ul li.screens-screen-ins > a, #screens-repairs-rescreens ul li.screens-repairs-rescreens > a, #screens-repairs-rescreens ul li.screens-repairs-rescreens > a, #screens-mesh-types ul li.screens-mesh-types > a, #screens-mesh-types ul li.screens-mesh-types > a, #mirage-screen-systems ul li.mirage-screen-systems > a, #mirage-screen-systems ul li.mirage-screen-systems > a, #testimonials ul li.testimonials a, #testimonials ul li.testimonials ul li a, #about-us ul li.about-us a, #about-us ul li.about-us ul li a, #faq ul li.faq a, #faq ul li.faq ul li a, #contact ul li.contact a, #contact ul li.contact ul li a { background-color: rgba(255,255,255, 1) !important; color: #000 !important; } /* linkedthumbs ------------------------------------ */ .linkedthumbs { float:left; clear:left; display: block; width: 100%; margin: 0em 0 1em 0; padding: 0; } .linkedthumbs-overview { float: left; clear: left; width: 100%; column-count: 5; column-gap: 3px; } .right .linkedthumbs-overview { column-count: 3; column-gap: 5px; } .linkedthumbs-overview img { width:100%; height:auto; } .linkedthumb { font-size: 1.125em; } .linkedthumb a {} .linkedthumb a img { transition: opacity 0.45s 0.04s, filter 0.45s 0.04s; opacity: 0.94; filter: saturate(0.98) brightness(0.98) contrast(0.95); } .linkedthumb:hover a img { filter: saturate(1) brightness(1.02) contrast(0.98); opacity: 1; } /* jobber button ----------------- */ #phonenumber a.jobber-button { background-color: #0E4023; color: white; text-shadow: none; padding: 0pt 5pt; border-radius: 0.2em; text-shadow: 0.25em 0.25em 2em #888; } /* gallery info labels */ .linkedthumb { position:relative; } /* .linkedthumb .gallery-info { position: absolute; top: 0em; left: 0em; text-transform: uppercase; } */ /* alternative */ .linkedthumb .gallery-info { position: absolute; bottom: 0em; left: 0em; } /* overlay towards bottom */ .linkedthumb .gallery-info p { float: none !important; border-radius: 1px; transition: background-color 0.55s 0.04s; padding: 0.333em 0.5em; background-color: rgba(255,255,255,0.75 ); border-top-right-radius:3px; border-bottom-right-radius:3px; } .linkedthumb .gallery-info p a { transition: color 0.55s 0.04s; color: rgba(0,0,0,0.9); line-height: 1.25; text-decoration: none; } .linkedthumb:hover .gallery-info p { background-color: rgba(15,100,20,1); } .linkedthumb:hover .gallery-info p a { color: rgba(255,255,255,0.9); } /* my gallery new for gridzy */ .my-gallery-new { display:block; width: 100%; height: auto; float:left; clear:left; margin: 1em 0; padding: 0.25em 0 1.25em 0; } /* Hide Gridzy Gallery Thumbnail Caption Overlays but Keep Captions in Zoom-in Swipe Slides - NOTE to have the gridzy captions and for photoswipe to work, use semantic figure and figcaption structure but put the a tags outside of figure; for different overlay styles select different gridzy skin or custom modify them or the CSS; */ /* .my-gallery-new .gridzy a figure figcaption.gridzyCaption { display:none; visibility: visible; } */ /* comment out this line to see overlays - to remove captions from lightbox remove figcaptions */ .my-gallery-new .gridzy a figure figcaption.gridzyCaption { float: left; display: block; text-align: left !important; width: 100%; } /* footer contact */ #footer-contact-outer { float:left; width:100%; height:auto; background-color:#3A3A65; } #footer-contact { /* border-bottom-left-radius: 12.5%; */ border-top: 0px solid #111; float:left; width: 100%; background: #222 url(../images/screenproject.png) top left repeat fixed; color: #fff; clear:both; padding: 2.5vmax 3.75% 2.5vmax 3.75%; text-align:left !important; } @media(max-width:48em) { #footer-contact {padding: 5%; } } #footer-contact h2 { padding-bottom: 0.5em; color: #eee !important; } #footer-contact h3 { padding-bottom: 0.25em; } #footer-contact div { float:left; width: 25%; font-size: 0.9em; } #footer-contact address { font-style:normal; padding-bottom: 1em; } #footer-contact p { float:left; clear: both; padding-bottom: 1em; } #footer-contact p a { color: inherit; text-decoration: none; } #footer-contact div.secondarylogos-footer { width: auto; height: auto; text-align: right; float:right; opacity: 0.90; } #footer-contact div.secondarylogos-footer img { border-radius: 50%; float:right; width: auto; height: 5vw; margin-left: 1em; margin-bottom: 1em; margin-top:0em; } @media(max-width:1248px) { #footer-contact div.secondarylogos-footer img.clear { clear:right !important } } /* footer */ #footer { float:left; width: 100%; clear:both; background-color: #0E4023; padding: 2.5em 3.75% 1em 3.75%; } #footer p { float:right; clear: right; font-size: 0.9em; color:#eee; width: calc( 100% - 15em - 2vw - 7.5% - 1vw ); } #footer p a { color: #eee; } #footer #footer-companylogo { float:left; width: calc( 2em + 2cm + 2% + 2vw ); clear: none; margin-right: 2vw; opacity: 0.94; } p#siteby { float:left; clear: both !important; margin-top: 1em; width:100%; margin-bottom:1em; text-align: right; opacity: 0.7; font-size: 0.8em; } p#siteby a { color:white; } /* ----- Pre Queries ----- */ /* ----- */ .navigation label { display:none; } .navigation #nav { display:none; } nav { width: auto; max-height: none; } .navigation.sitemap #nav { display:block; float:left; clear:left; } /* ----- Media Queries ----- */ @media(min-width:2250px) { html {font-size:112.5%;}} @media(min-width:2500px) { html {font-size:125%;}} @media(min-width:3000px) { html {font-size:137.5%;}} @media(min-width:3500px) { html {font-size:175%;}} @media(min-width:4500px) { html {font-size:200%;}} @media(min-width:7500px) { html {font-size:400%;}} @media(max-width:86em) { #content div.twothirds { width:64.75% !important; } #content div.onethird { width:31.75% !important; margin-top: 3em; } } @media(max-width:76em) { #content div.twothirds { width:58.75% !important; } #content div.onethird { width:38.75% !important; } .linkedthumbs-overview { column-count: 5; } .linkedthumb { font-size: 1.125em; } .right .linkedthumb { font-size: 1.125em; } .navigation nav > ul > li { margin-right:0.4em; } .navigation { font-size: 0.95em; min-height: 3.3333em; } } @media(max-width:67em) { .navigation nav > ul > li { margin-right:0.33em; } .navigation { font-size: 0.9em; min-height: 3.3333em; word-spacing:-0.5px; } #content div.twothirds { width:48.75% !important; } #content div.onethird { width:48.75% !important; } .linkedthumb { font-size: 1.425vmax; } } @media(max-width:63em) { #phonenumber span { display:none !important } h1 { font-size:1.5em; } h2 { font-size:1.25em; } h3 { font-size:1.125em; } .navigation { font-size: 0.8em; min-height: 3.6666em; } } @media(max-width:55em) { #content { word-spacing: -1px; letter-spacing: -0.25px; } .linkedthumbs-overview { column-count: 3; } .linkedthumb a span { display:none; } .right .linkedthumb { font-size: 1.25em; } .linkedthumb { font-size: 1.25em; } .navigation { font-size: 1em; min-height: 3em; } .navigation nav > ul > li { width: 100%; } .navigation nav ul li a span { display: none; } blockquote { font-size: 0.9em; padding:0.25em 1em 0.5em 1em; margin-bottom: 1.75em; } /* */ .mobile { display:block; visibility:visible; } .desktop { display:none; visibility:hidden; } /* */ .navigation { overflow: hidden; background: #0E4023; } .sitemap { overflow: visible; } .navigation label { transition-property: color; transition-duration: 0.5s; transition-delay: 0.1s; display: block; color: #fff; text-decoration: none; line-height: 3em; } .navigation label:hover { color: #0096AA; } .navigation label { float: left; cursor: pointer; } .navigation label:after { content: "\2261"; font-size: 2em; } nav { float: right; max-height: 0; width: 100%; transition: 1s; } .navigation.sitemap nav { max-height: none; width: 100%; } #nav { display: none; } #nav:checked ~ nav { max-height: 45em; /* Anything bigger than nav height. The transition duration works with this */ } /* */ .navigation { font-size: 1.125em; } .navigation * {} .navigation.sitemap ul { width: 100%; } .navigation ul { padding-top:0.25em; padding-bottom:1em; margin-left:1%; } .navigation ul li ul { padding-top: 0; padding-bottom:0.5em; padding-left: 1em; clear: left; } .navigation ul li { float:left; display: list-item; clear:both; line-height: 2 !important; } .navigation ul li a, .navigation ul li ul li a, .navigation ul li a:hover, .navigation ul li ul li a:hover { background-color: transparent; color: #fff; } #content div.left { width:100% !important; margin-bottom:0.5em; } #content div.right { width:100% !important; margin-bottom:0.5em; } #content div.left-no-margin-left { width:100% !important; margin-bottom:0.5em; } #content div.right-no-margin-right { width:100% !important; margin-bottom:0.5em; } #content div.left img, #content div.right img { margin-bottom:0; padding-bottom:0; } #footer { padding-top: 2em; padding-bottom: 1em; } #footer-contact { } #footer-contact div { width:100%; } #footer-contact div.secondarylogos-footer { float:left; text-align: left; width: 15%; display:block; } #footer-contact div.secondarylogos-footer img { float:left; max-width: 50px; max-height: 50px; vertical-align: middle; margin: 0 auto; } #footer-contact p { float:left; clear: both; width: 100%; } #footer br { display:none; visibility:hidden; } #footer p { float:right; clear: none; font-size: 0.8em; color:#eee; width: calc( 100% - 15em - 7.5% ); } #footer #footer-companylogo { float:left; width: calc( 2.5cm + 2.5em + 2.5vw + 2.5%); padding-top: 0.5em; } #content { padding: 5%; } #header img { width:25%; min-width:4.5cm; float:left; } #header { height: 7.5em; padding-top: 2.5em; } } @media(max-width:45em) { #header { padding-top: 2em; } } @media(max-width:37em) { #header img { width:33%; } .linkedthumbs-overview { column-count: 2; } .linkedthumb { font-size: 1.25em; } .right .linkedthumb { font-size: 1.125em; } .linkedthumb a span { display:none; } } @media(max-width:30em) { body { float:left; width:100%; margin: 0 0%; } #content p, #content ul { font-size:1em; } #content ul { margin-left: 1em; margin-bottom:1.5em; } #content ul li { padding-left: 0.125em; text-indent: 0em; } #header { padding-top: 2em; } #header img { width:40%; min-width: 10em !important; position:relative;top: -0.75em; } h1, h2, h3 { text-transform: none; word-spacing: -1px;} }