*{ box-sizing: border-box; } body{ margin: 0 auto; padding: 0; width: 100%; height: 100vh; font-family: 'Poppins',sans-serif; font-weight: 400; font-size: 0.85rem; background: #555; color: #373737; overflow-x: hidden; overflow-y: scroll; } a{ color: #4f8bca; transition: all 250ms ease; } a:hover, a:active, a:focus{ color: #003f7f; text-decoration: none; } h1, h2, h3, h4{ font-weight: 600; } h1{ font-size: 75%; font-weight: 400; line-height: 1.275; text-transform: uppercase; letter-spacing: 0.5rem; margin-bottom: 0.5rem; } h2{ font-size: 250%; letter-spacing: -1px; line-height: 1; margin-bottom: 1.25rem; opacity: 0.8; } h3{ font-size: 115%; } h4{ font-size: 105%; } ul, ol{ padding-left: 1.25rem; } img{ display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } main img{ margin-bottom: 1.5rem; } header{ position: relative; } header::before{ display: block; content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, rgba(0,63,127,0.125), rgba(238,157,4,0.925)); opacity: 0.5; z-index: -1; } header::after{ display: block; content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url('../images/background-bathroom.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -2; } nav{ position: relative; text-align: right; background-color: #4f8bca; } nav input{ display: none; } nav ul{ position: absolute; bottom: 0; left: 0; right: 0; height: 0; margin: 0; padding: 0 0 1.5rem 0; text-align: left; font-weight: 500; background-color: #4f8bca; transform: translateY(0); z-index: -1; opacity: 0; transition: all 250ms ease; } nav input:checked ~ ul{ transform: translateY(100%); z-index: +1; height: auto; opacity: 1; } nav ul li, nav ul li a{ display: block; } nav ul li a, nav label{ padding: 0.25rem 0.75rem; color: #fff; } nav label{ position: relative; display: inline-block; min-width: 20vw; text-align: center; margin: 0; z-index: +2; transition: all 250ms ease; } nav label:hover, nav label:focus, nav input:checked ~ label{ background-color: #003f7f; cursor: pointer; } nav label .fas{ width: auto; transform: scale(1); opacity: 1; transition: all 250ms ease; } nav input:checked ~ label .fa-bars, nav input:not(:checked) ~ label .fa-times{ width: 0; transform: scale(0); opacity: 0; } nav input:checked ~ label .fa-times{ width: auto; transform: scale(1); opacity: 1; } nav ul li a:hover{ color: #fff; text-decoration: none; background-image: linear-gradient(to right, rgba(0,63,127,1), rgba(0,63,127,0.125) 80%); } nav ul li.active a{ background-image: linear-gradient(to right, rgba(238,157,4,1), rgba(255,215,12,1) 80%); } nav ul li a img{ display: none; } main{ background-color: #fff; } main article{ padding-top: 1rem; } #logo a{ position: relative; display: block; width: 100%; } #logo a img{ max-width: 65px; margin-top: 0.75rem; } #logo a span{ display: none; } #header-bar{ margin-top: 0.5rem; margin-bottom: 0.5rem; text-align: right; } #header-bar a{ display: inline-block; padding: 0.25rem 1.25rem; font-size: 115%; font-weight: 500; color: #fff; } #header-bar a:hover, #header-bar a:active{ color: #ffd70c; } aside{ padding-top: 1rem; } aside{ position: relative; } main aside{ background-color: #fefefe; } aside::before, aside::after{ position: absolute; left: 0; display: block; content: ' '; z-index: +1; } aside::before{ top: 0; bottom: 6px; width: 6px; background-image: linear-gradient(to top, rgba(79,139,202,0.5), rgba(79,139,202,0)); } aside::after{ right: 0; bottom: 0; height: 6px; background-image: linear-gradient(to right, rgba(79,139,202,0.5), rgba(79,139,202,0)); } footer aside::before{ background-image: linear-gradient(to top, rgba(238,157,4,0.5), rgba(238,157,4,0)); } footer aside::after{ background-image: linear-gradient(to right, rgba(238,157,4,0.5), rgba(238,157,4,0)); } .stars{ text-align: center; color: #ffd70c; } .pkm-iframe-container{ position: relative; box-sizing: border-box; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 1.5rem; } .pkm-iframe-container > iframe[src*="embed"]{ position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; } footer{ background-color: #ffd70c; color: #555; font-weight: 500; } footer a{ color: inherit; } .footer-gas-safe{ text-align: center; } .footer-gas-safe img{ max-width: 75px; margin-bottom: 1rem; } .footer-areas-we-cover{ line-height: 1.75; padding-top: 1rem; padding-bottom: 0.1rem; background-color: #333; color: #fafafa; } .footer-areas-we-cover a{ color: inherit; } .footer-areas-we-cover strong{ font-weight: 500; }@media only screen and ( min-width: 768px ){ #logo a img{ max-width: 200px; margin-top: 2rem; margin-bottom: 2rem; } #header-bar{ margin-top: 2rem; } #header-bar a{ font-size: 150%; } nav label{ display: none; } nav ul{ position: relative; height: auto; opacity: 1; z-index: auto; padding: 0; background-image: url('../images/banner-default.jpg'); background-position: right top; background-size: auto 100%; background-repeat: no-repeat; } nav ul::after{ display: block; position: absolute; content: ' '; top: 0; right: 0; bottom: 0; left: 50%; z-index: +3; background-image: linear-gradient(to right, rgba(79,139,202,0.125), rgba(0,63,127,0.925)); } nav ul li a{ padding: 0.5rem 1.5rem; } nav ul li a:hover{ background-image: linear-gradient(to right, rgba(0,63,127,1), rgba(0,63,127,0.125) 44%); } nav ul li.active a{ background-image: linear-gradient(to right, rgba(238,157,4,1), rgba(255,215,12,1) 44%); } nav ul li a img{ display: block; position: absolute; top: 0; right: 0; max-height: 100%; width: auto; opacity: 0; z-index: -1; transition: all 350ms ease; } nav ul li.active a img, nav ul li:hover a img{ opacity: 1; z-index: +1; } nav ul li:hover a img{ z-index: +2; } footer{ font-size: 90%; } .footer-gas-safe img{ max-width: 150px; } .footer-areas-we-cover{ font-size: 100%; line-height: 1.5; } }