body { font-family: "Roboto", sans-serif; margin: 0; padding: 0; width: 100%; font-size: 62.5%; background-color: #a1a1a1; overflow-x: auto; } body::-webkit-scrollbar { width: 12px; background-color: #a1a1a1; } body::-webkit-scrollbar-thumb { background-color: #555; border-radius: 5px; } body::-webkit-scrollbar-track { } h1 { font-size: 6em; font-weight: 100; } h2 { font-size: 4em; font-weight: 100; } h3 { font-size: 3em; } b { font-size: 1.2em; font-weight: 900; } ul { list-style: none; padding: 0; } input::-webkit-input-placeholder { font-family: "Roboto", sans-serif; } input:-ms-input-placeholder { font-family: "Roboto", sans-serif; } input:-moz-placeholder { font-family: "Roboto", sans-serif; } input::-moz-placeholder { font-family: "Roboto", sans-serif; } .center { margin: 0 auto; } .content { margin: 0 auto; max-width: 90rem; width: 100%; } .pointer { cursor: pointer; } .accent-line { width: 300px; border-bottom: 3px solid #57ad68; } .modal { position: fixed; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 3; display: flex; align-items: center; justify-content: center; } .modal-content { width: 450px; height: 500px; border-radius: 25px; background-color: lightgray; display: none; padding: 0 30px; font-size: 3em; } .stylish-input { width: 400px; height: 25px; text-decoration: none; background: #333; color: #ccc; font-size: 0.5em; padding-left: 5px; border: 1px solid #333; margin: 30px 20px 0 20px; transition: 500ms all ease; } .stylish-input:focus { outline: none; box-shadow: 12px 13px 0px rgba(204, 211, 51, 0.38), -11px -14px 0px rgba(241, 96, 0, 0.28), 18px -24px 0px rgba(0, 0, 0, 0.34), 33px -6px 0px rgba(39, 74, 214, 0.28); } .large-text { height: 150px; } .fa-times { margin: 15px 20px 0 20px; float: right; } .pos-right { float: right; } /* NAVBAR */ nav { width: 100%; position: fixed; margin: auto; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .nav-logo { height: 5rem; float: left; z-index: 2; } .nav-logo-image { height: 90%; margin: .25rem 0 0 .25rem; } .nav-links { display: inline-block; float: right; z-index: 2; } .nav-link { margin: 0 1rem; text-decoration: none; } /* HOME */ #home { /* create a parallax effect with the background */ background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url("../static/images/background/bg-eyeq-front.jpg"); background-position: fixed; background-repeat: no-repeat; background-size: cover; width: 100%; height: 65rem; } .home-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: auto 0; text-align: center; } .important-notice { font-size: 1.5rem; background: rgba(145, 34, 9, .95); width: 70%; margin: 15px; padding: 15px; } .alert-bg { background: rgba(145, 34, 9, .95); } .success-bg { background: rgba(36, 99, 49, .95); } /* ABOUT */ #about-us { width: 100%; height: 40vw; position: relative; } #right-side { width: 50%; height: 100%; background-attachment: fixed; top: 0; float: left; } #right-side img { width: 100%; height: auto; } #left-side { width: 50%; height: 100%; background-color: #1d2e40; float: left; display: flex; align-content: center; } #about-us-content { width: 500px; margin: auto; padding: 0 15px; } .about-us-verbiage { line-height: 30px; font-size: 1.5em; } .page-bullets { bottom: 0; color: gray; display: flex; flex-direction: row; } .page-bullets div { margin-right: 10px; } .pagination-nav { position: absolute; list-style: none; display: inline-block; padding: 0; bottom: 0; } /* .pagination-nav .pagination-active { color: white; font-size: 1.5em; } */ .pagination-nav li { margin: 0 10px; color: gray; font-size: 1em; } /* PRODUCTS */ #products { width: 100%; height: 850px; padding-top: 150px; background-color: #ffffff; position: relative; clear: both; } #products-content { text-align: center; } #brand-table { width: 100%; display: flex; justify-content: center; align-items: center; } #brands-table img { height: auto; } .brand { width: 15rem; margin: 5rem 5rem 0; } /* SERVICES */ #services { width: 100%; height: 850px; padding-top: 150px; background-color: #f4f4f4; } #services-content { text-align: center; height: 90%; background-color: #f4f4f4; } .service-wrapper { display: flex; justify-content: center; flex-wrap: wrap; } .service-box { width: 25%; height: 400px; margin: 25px 25px 0 25px; font-size: 2em; } /* APPOINTMENT */ #appointment { width: 100%; height: 20rem; padding-top: 150px; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url("../static/images/background/bg-eyeq-table.jpg"); background-size: cover; } #appointment-content { text-align: center; padding: 0 1rem; } #footer { width: 100%; height: 35rem; background-color: #1d2e40; /* display: flex; flex-direction: column; align-items: center; */ } .bot-nav-logo { display: block; width: 13rem; height: auto; padding-top: 2rem; margin: 0 auto; } .info-box-wrapper { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; } .info-box { width: 200px; margin: 10px 40px 0 40px; font-size: 2em; } .info-box li { font-size: 0.75em; line-height: 25px; } #footer-subsection { height: 40px; background-color: #162534; } .bot-nav-icons { display: flex; flex-direction: row; } .bot-nav-icons li a img { width: 40px; margin-right: 5px; } @media only screen and (max-width: 1334px) { #products { height: 1000px; } #about-us { height: 40rem; } #left-side { width: 100%; } #right-side { display: none; } } @media only screen and (max-width: 1130px) { .extra-desc { display: none; } } /* switch nav-bar to hidden nav */ @media only screen and (max-width: 930px) { .nav-links { display: none; } } @media only screen and (max-width: 830px) { .nav-links { display: none; } #products { display: none; } .service-wrapper { flex-direction: column; } .hide-item { display: none; } .service-box { width: auto; height: auto; margin: .5rem; } .service-box p { margin: 0; } #appointment { height: 25rem; } } @media only screen and (max-width: 480px) { p { font-size: 1rem; } #home { height: 70rem; } .home-content { justify-content: flex-start; } .important-notice { margin-top: 170px; } }