/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* Custom Styles */ html, body { min-height: 100%; padding: 0; margin: 0; font-size: 1.05rem; line-height: 1.6rem; } body { font-family: "Noto Sans", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fff; color: #000; } img.logo { width: 500px; max-width: 90%; display: block; margin-right: auto; margin-left: auto; margin-bottom: 2rem; } p { margin-bottom: 0.5rem; width: 100%; } h1 { color: #fff; text-align: center; text-transform: uppercase; font-size: 2rem; margin: 0; font-weight: 500; } h2 { text-align: center; margin-bottom: 1.5rem; font-weight: 500; font-size: 1.8rem; } h3 { margin-top: 0; margin-bottom: 1.5rem; text-align: center; font-weight: 500; font-size: 1.3rem; } @media only screen and (max-width: 800px) { h1 { max-width: 80%; font-size: 1.5em; margin-right: auto; margin-left: auto; } h2.logo { max-width: 80%; font-size: 1.2rem; margin-right: auto; margin-left: auto; margin-bottom: 3rem; } .logo { max-width: 70%; } } ul { display: block; width: 800px; max-width: 90%; margin-left: auto; margin-right: auto; margin-top: 2rem; padding-left: 20px; } ul.disc { list-style: disc; } ul li { margin-bottom: 1.0rem; padding-left: 20px; } blockquote { width: 96%; text-align: center; padding: 2rem; } blockquote p { font-size: 1.8rem; font-weight: 500; margin-bottom: 1.8rem; line-height: 2rem; } .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: #000; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; position: fixed; z-index: 17; right: 0; top: 0; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #fff; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } nav.main-nav { position: fixed; top: 0; right: -500px; bottom: 0; left: auto; width: 500px; background-color: #000; z-index: 14; overflow-x: hidden; transition: 0.5s; } nav.main-nav.show-nav { right: 0px; } nav.main-nav ul { margin: 20px 0 0; padding: 0; } nav.main-nav ul:first-of-type { margin: 80px 0 0; } nav.main-nav ul li { width: 100%; list-style: none; } nav.main-nav a { text-decoration: none; color: #fff; padding: 10px 20px; text-transform: uppercase; display: block; font-size: 1.2rem; } .hero-banner { position: relative; min-height: 90vh; background-color: #7c8785; } .video-wrap { min-width: 100%; min-height: 90vh; position: absolute; right: 0; top: 0; z-index: 1; overflow: hidden; } .bg-video { position: absolute; top: 0; right: 0; left: 0; min-width: 100%; min-height: 100%; object-fit: cover; object-position: top center; } .bg-video-mobile { position: absolute; top: 0; right: 0; left: 0; width: 100%; min-width: 100%; min-height: 100%; object-fit: cover; object-position: top center; } #bg-video-mobile { display: none; } #bg-video { display: block; } @media only screen and (max-width: 600px) { #bg-video-mobile { display: block; } #bg-video { display: none; } } .titles { position: absolute; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; padding: 2% 5%; box-sizing: content-box; margin-left: 5%; margin-right: 5%; height: 90%; } .titles h1 { margin-top: 1rem; margin-bottom: 3rem; } .titles p { font-size: 1.4rem; text-align: center; margin-top: 0.5rem; margin-bottom: 0.5rem; } @media only screen and (max-width: 800px) { .titles p { font-size: 1.2rem; } } .titles blockquote p { font-size: 1.6rem; font-weight: bold; font-family: "DINBold", "Open Sans", sans-serif; margin-top: 2rem; } .titles blockquote footer { text-align: center; } .content { display: flex; flex-direction: row; align-items: center; justify-content: center; } .section { width: 100%; padding-top: 3em; padding-bottom: 3em; } .section.footer { text-align: center; } .section.blue-bg { background-color: #bdd9ef; color: #000; } .row { width: 100%; max-width: 1500px; margin-left: auto; margin-right: auto; padding: 0 1rem; } .row.flex { display: flex; grid-gap: 50px; } .row.flex.two-column > div { width: 50%; } .row.flex.three-column > div { width: 33%; } @media only screen and (max-width: 1000px) { .row.flex { display: block; } .row.flex.two-column > div { width: 100%; } .row.flex.three-column > div { width: 100%; } } .flex-center-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .row.grid { display: grid; } .row.grid.two-column { grid-template-columns: 50% 50%; } .row.grid.three-column { grid-template-columns: 33% 33% 33%; } .row.grid.twentyfive-fifty-twentyfive-column { grid-template-columns: 25% 50% 25%; } .row.grid.twentyfive-fifty-twentyfive-column > div:first-of-type { grid-column-start: 1; } .row.grid.twentyfive-fifty-twentyfive-column > div { grid-column-start: 2; } .row.grid.twentyfive-fifty-twentyfive-column > div:last-of-type { grid-column-start: 3; } @media only screen and (max-width: 1000px) { .row.grid.twentyfive-fifty-twentyfive-column { display: block; } .row.grid.twentyfive-fifty-twentyfive-column > div:first-of-type { grid-column-start: 2; } .row.grid.twentyfive-fifty-twentyfive-column > div { grid-column-start: 1; } .row.grid.twentyfive-fifty-twentyfive-column > div:last-of-type { grid-column-start: 3; } } .row > div img { max-width: 100%; } /* Row Padding */ .padding-2rem { padding: 2rem; } .padding-top-2rem { padding-bottom: 2rem; } .padding-right-2rem { padding-bottom: 2rem; } .padding-bot-2rem { padding-bottom: 2rem; } .padding-left-2rem { padding-bottom: 2rem; } /* Text Align */ .text-right { text-align: right; width: 100%; } .text-center { text-align: center; width: 100%; } .text-left { text-align: left; width: 100%; } .suzanne-photo { display: block; max-width: 500px; max-height: 500px; margin: auto; } .btn { text-transform: uppercase; font-weight: 700; min-height: 50px; border: none; display: block; padding: 1em !important; border-radius: 4px; padding: 2px 4px; box-sizing: border-box; background-color: #bdd9ef; color: #000; box-shadow: 0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12); cursor: pointer; min-width: 120px; margin-right: auto; margin-left: auto; margin-top: 1.5rem; text-align: center; } .btn:hover { background-color: #3588c9; color:#fff; } @media only screen and (max-width: 1000px) { .content { display: block; } } /* Contact Form */ #contact { margin-top: 2em; } #contact .row.flex.three-column > div { width: 50%; } #contact .row.flex.three-column > div:first-of-type { width: 25%; } #contact .row.flex.three-column > div:last-of-type { width: 25%; } @media only screen and (max-width: 1000px) { #contact .row.flex.three-column { display: block; } #contact .row.flex.three-column > div { width: 100%; } #contact .row.flex.three-column > div:first-of-type { width: 100%; } #contact .row.flex.three-column > div:last-of-type { width: 100%; } } .form-wrap { box-sizing: content-box; } /* Message Sent Successfully */ .confirmation-message p { display: none; text-align: center; font-size: 1.3rem; color: #000; background-color: #fff; border-radius: 10px; margin-top: 1rem; padding-left: 1rem; padding-right: 1rem; } .message-sent .confirmation-message { display: block; } .form-wrap .confirm_email { /* Anti Spam */ display: none; } .input-group { margin-bottom: 0.75rem; flex-grow: 1; } .form-wrap label { font-weight: 700; margin-bottom: 0.5rem; display: block; } .form-wrap input[type=text], .form-wrap select, .form-wrap textarea { width: 100%; caret-color: #fff; box-sizing: border-box; padding: 0.7rem; color: #fff; font-size: 100%; border: 2px solid rgba(189, 217, 239, 1); border-radius: 4px; background: rgba(175,175,175,0.25); margin-bottom: 0.25rem; color: #000; } .form-wrap input[type=text]:focus, .form-wrap select:focus, .form-wrap textarea:focus { border: 2px solid rgba(53, 136, 201, 1); } .form-wrap p.form-error { color: red; text-align: center; display: none; margin-top: 0; } .form-wrap .input-group.has-error input, .form-wrap .input-group.has-error textarea { border: solid red 1px; } .form-wrap .input-group.has-error p.form-error { display: block; } .form-wrap textarea::placeholder, .form-wrap input::placeholder { opacity: 1; } .form-wrap textarea { min-height: 220px; } .form-messages { color: #000; background-color: #fff; padding: 1rem; text-align: center; margin-top: 2rem; margin-bottom: 1rem; border-radius: 4px; display: none; } .form-messages.show-form-messages { display: block; }