/* CSS Document */ /* ===== Fraunces Light ===== */ @font-face { font-family: 'Fraunces'; src: url('../styles/fonts/fraunces/Fraunces144ptS000-Light.eot'); src: url('../styles/fonts/fraunces/Fraunces144ptS000-Light.eot?#iefix') format('embedded-opentype'), url('../styles/fonts/fraunces/Fraunces144ptS000-Light.woff2') format('woff2'), url('../styles/fonts/fraunces/Fraunces144ptS000-Light.woff') format('woff'), url('../styles/fonts/fraunces/Fraunces144ptS000-Light.ttf') format('truetype'), url('../styles/fonts/fraunces/Fraunces144ptS000-Light.svg#Fraunce') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } /* ===== Fraunces Light Italic ===== */ @font-face { font-family: 'Fraunces'; src: url('../styles/fonts/fraunces/Fraunces144ptS000-LightItalic.eot'); src: url('../styles/fonts/fraunces/Fraunces144ptS000-LightItalic.eot?#iefix') format('embedded-opentype'), url('../styles/fonts/fraunces/Fraunces144ptS000-LightItalic.woff2') format('woff2'), url('../styles/fonts/fraunces/Fraunces144ptS000-LightItalic.woff') format('woff'), url('../styles/fonts/fraunces/Fraunces144ptS000-LightItalic.ttf') format('truetype'), url('../styles/fonts/fraunces/Fraunces144ptS000-LightItalic.svg#Fraunce') format('svg'); font-weight: 300; font-style: italic; font-display: swap; } /* ===== Fraunces Regular ===== */ @font-face { font-family: 'Fraunces'; src: url('../styles/fonts/fraunces/Fraunces144ptS000-Regular.eot'); src: url('../styles/fonts/fraunces/Fraunces144ptS000-Regular.eot?#iefix') format('embedded-opentype'), url('../styles/fonts/fraunces/Fraunces144ptS000-Regular.woff2') format('woff2'), url('../styles/fonts/fraunces/Fraunces144ptS000-Regular.woff') format('woff'), url('../styles/fonts/fraunces/Fraunces144ptS000-Regular.ttf') format('truetype'), url('../styles/fonts/fraunces/Fraunces144ptS000-Regular.svg#Fraunce') format('svg'); font-weight: 400; font-style: normal; font-display: swap; } /* ===== Fraunces Regular Italic ===== */ @font-face { font-family: 'Fraunces'; src: url('../styles/fonts/fraunces/Fraunces144ptS000-Italic.eot'); src: url('../styles/fonts/fraunces/Fraunces144ptS000-Italic.eot?#iefix') format('embedded-opentype'), url('../styles/fonts/fraunces/Fraunces144ptS000-Italic.woff2') format('woff2'), url('../styles/fonts/fraunces/Fraunces144ptS000-Italic.woff') format('woff'), url('../styles/fonts/fraunces/Fraunces144ptS000-Italic.ttf') format('truetype'), url('../styles/fonts/fraunces/Fraunces144ptS000-Italic.svg#Fraunce') format('svg'); font-weight: 400; font-style: italic; font-display: swap; } /*######################################## ## Body ########################################*/ body {padding: 0; margin: 0; width: 100%; font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 400; color: #4A433E; min-width: 320px;} /*######################################## ## Typography ########################################*/ h1, h2, h3, h4, h5, h6 {font-family: 'Fraunces', sans-serif; font-weight: 400; color: #4A433E; line-height: 1em;} h1, h2, h3, h4, h5, h6, p, ul, ol, li {padding: 0; margin: 0;} ul, ol {list-style: none;} a {text-decoration: none; transition: all .3s linear;} p, li {line-height: 1.6em;} h1, h2 {font-size: 90px;} h3 {font-size: 40px;} .italic {font-style: italic;} /*######################################## ## Layouts ########################################*/ .screen-reader-text {display: block; width: .1px; height: .1px; overflow: hidden; padding: 0 !important; margin: 0 !important;} .container {width: 100%; max-width: 1620px; padding: 0 10px; box-sizing: border-box; margin: 0 auto;} .next-line {display: block;} /*######################################## ## Animations ########################################*/ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*######################################## ## Popup ########################################*/ .modal {position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 999;} .modal-box {display: flex; background: #FFF; width: 71.14%; max-height: 98vh; overflow-y: auto; position: relative;} .modal.is-active {opacity: 1; pointer-events: auto;} .modal-image {width: 46.4%;} .modal-image img {max-width: 100%; width: 100%; height: 100%; display: block; object-fit: cover;} .modal-content {background: #FFF; width: 53.6%; padding: 100px; box-sizing: border-box;} .modal-content #modal-title {font-size: 60px; margin-bottom: 10px;} .modal-content #modal-price {font-family: 'Fraunces', sans-serif; font-size: 40px; line-height: 1em; margin: 30px 0 50px;} .modal-content #modal-description p {margin-bottom: 40px;} .modal-content #modal-description p:last-of-type {margin-bottom: 0;} #modal-close {position: absolute; top: 1rem; right: 1rem; cursor: pointer;} /*######################################## ## Forms ########################################*/ /*contact form messages*/ form .messages p {display: none; font-family: "Open Sans", sans-serif!important; font-weight: 400 !important;letter-spacing: 0 !important;font-size: 16px !important;} form .loading {display: none;} form .alert {padding: 15px !important;margin-bottom: 20px;border: 1px solid transparent !important;border-radius: 4px !important;} form .alert-success {color: #3c763d !important;background-color: #dff0d8 !important;border-color: #d6e9c6 !important;} form .alert-danger {color: #a94442 !important;background-color: #f2dede !important;border-color: #ebccd1 !important;} form input:focus, form select:focus, form textarea:focus {outline: none;} /*contact form*/ .ctc-form {} .ctc-form .one-half {display: flex; column-gap: 10px;} .ctc-form .one-half .half {width: 100%;} .ctc-form label {font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 400; color: #4A433E; line-height: 1.2em; display: block;} .ctc-form input[type="text"]::placeholder, .ctc-form textarea::placeholder {color: transparent !important;} .ctc-form input[type="text"], .ctc-form input[type="file"], .ctc-form textarea {font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; color: #4A433E; display: block; padding: 10px; box-sizing: border-box; border: 1px solid #D6CEC4; border-radius: 0; width: 100%; margin-bottom: 10px;} .ctc-form input[type="text"] {height: 50px;} .ctc-form textarea {height: 110px;} .ctc-form button {border: none; margin: 30px auto 0; display: block; width: 125px;} .ctc-form .recap {display: inline-block;} .g-recaptcha > div {margin: 20px auto 0;} /*######################################## ## Button ########################################*/ .btn, .contactForm input[type=submit] {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: #4A433E; background: #D6CEC4; display: inline-block; line-height: 1.2em; padding: 20px 25px; transition: transform 0.2s ease, box-shadow 0.2s ease; transform-origin: center;} .btn:hover, .contactForm input[type=submit]:hover { transform: scale(0.95); box-shadow: 0 8px 20px rgba(74, 67, 62, 0.35);} /*######################################## ## Header ########################################*/ header {position: relative;} #header {position: absolute; width: 100%; top: 0; left: 0; right: 0; padding: 30px 0; z-index: 999; transition: all 0.5s ease;} #header.sticky {position: fixed; background: rgba(74,67,62,0.8); padding: 20px 0;} #header .container {max-width: 1840px; display: flex; justify-content: space-between; align-items: center;} #header .logo img {display: block;} #header nav #pull {display: none; cursor: pointer;} #header nav {width: 100%; margin: 0 auto; padding: 0;} #header nav ul {padding: 0; margin: 0; display: flex; align-items: center; column-gap: 50px;} #header nav ul li a {font-size: 16px; color: #FFF; display: block; text-transform: uppercase; transition: all 0.5s ease; position: relative;} #header nav ul li a.active-menu, #header nav ul li a:hover {text-decoration: underline;} /*######################################## ## Banner ########################################*/ #banner {position: relative;} #banner .main {background: url('../images/content/main-banner-background.webp') no-repeat; background-size: cover; background-position: center center; position: relative; height: 100vh; display: flex; align-items: center;} #banner .main:before, #banner .secondary:before {content: ""; background-color: rgba(74,67,62,0.5); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; mix-blend-mode: multiply; z-index: 1;} #banner .main .container {position: relative; z-index: 5;} #banner .main img {display: block; margin: 0 auto; opacity: 0; animation: fadeIn 4s ease forwards; animation-delay: 0.8s; animation-fill-mode: both;} #banner .secondary {height: 100vh; position: relative; display: flex; justify-content: center; align-items: center;} #banner .secondary img {display: block; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover;} #banner .secondary .content {position: relative; z-index: 10; text-align: center;} #banner .content .page-title h1 {font-size: 85px; color: #FFF;} .current-inventory-page #banner .content h3 {color: #FFF; margin: 40px 0 20px;} .current-inventory-page #banner .content p {max-width: 960px; color: #FFF;} /*######################################## ## Home Page Content ########################################*/ #roots {padding: 110px 0 100px; text-align: center;} #roots .container {max-width: 920px;} #roots h1 {font-size: 85px; font-style: italic; margin-bottom: 25px;} #roots h3 {margin-bottom: 35px;} #design {position: relative; width: 100%;} #design:before {content: ""; background-color: rgba(74,67,62,0.3); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; mix-blend-mode: multiply; z-index: 1;} #design .video video {background: #D6CEC4; width: 100%; height: auto; max-height: 1080px; display: block;} #design .content {position: absolute; inset: 0; display: flex; align-items: center; text-align: center; z-index: 5;} #design .content h2 {color: #FFF;} #ordinary {background: #D6CEC4;} #ordinary .container {max-width: 1386px; padding: 140px 10px 150px; background: url(../images/content/tree-background.webp) no-repeat; background-size: contain; background-position: right 10px top 45px;} #ordinary .content {max-width: 640px;} #ordinary .content h2 {margin-bottom: 55px;} #ordinary .content p {font-family: 'Fraunces', sans-serif; font-size: 40px; color: #4A433E; line-height: 1.2em;} #discover {background: url(../images/content/discover-background.webp) no-repeat; background-size: cover; background-position: center; padding: 390px 0; text-align: center; position: relative;} #discover:before {content: ""; background-color: rgba(74,67,62,0.3); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; mix-blend-mode: multiply;} #discover .container {position: relative; z-index: 5;} #discover h2 {color: #FFF; margin-bottom: 70px;} #consultation {padding: 130px 0; text-align: center;} #consultation .container {max-width: 980px;} #consultation p:not(:last-of-type) {margin-bottom: 40px;} #next-level {background: url(../images/content/the-next-level-background.webp) no-repeat; background-size: cover; background-position: center; padding: 280px 0; position: relative; text-align: center;} #next-level:before {content: ""; background-color: rgba(74,67,62,0.6); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; mix-blend-mode: multiply;} #next-level .container {position: relative; z-index: 5;} #next-level h2 {color: #FFF; margin-bottom: 60px;} /*######################################## ## Footer ########################################*/ footer {position: relative;} #footer {background: #4A433E; padding: 50px 0;} #footer .container {display: flex; justify-content: space-between; align-items: flex-end;} #footer .navigation, #footer .copyright {width: 38.75%; border-bottom: 1px solid #D6CEC4;} #footer .navigation {order: 1; padding-bottom: 40px;} #footer .navigation ul {display: flex; align-items: flex-start; column-gap: 10px;} #footer .navigation ul li a {font-size: 14px; color: #FFF; line-height: 1.2em; text-transform: uppercase; display: block;} #footer .navigation ul li a.active-menu, #footer .navigation ul li a:hover, #footer .copyright a:hover {color: #D6CEC4;} #footer .logo {order: 2; width: 11.43%;} #footer .logo img {display: block; width: 100%;} #footer .copyright {order: 3; text-align: right; padding-bottom: 20px;} #footer .copyright p, #footer .copyright a {font-size: 14px; color: #FFF; line-height: 1.2em; text-transform: uppercase;} /*######################################## ## About Us Page ########################################*/ .about-page #content h2 {font-size: 60px;} .about-page .entry-section {padding: 130px 0 150px; text-align: center;} .about-page .entry-section .container, .about-page .why .container {max-width: 980px;} .about-page .who-we-are {padding-bottom: 180px;} .about-page .who-we-are .container, .about-page .how-we-work .container {display: flex; justify-content: space-between; align-items: center; max-width: 1386px;} .about-page .who-we-are .content-left, .about-page .how-we-work .content-right {width: 56%;} .about-page .who-we-are .content-left h2 {font-style: italic; margin-bottom: 30px;} .about-page .who-we-are .content-left p:not(:last-of-type), .about-page .how-we-work .content-right p:not(:last-of-type) {margin-bottom: 30px;} .about-page .who-we-are .content-left p .italic {font-family: 'Fraunces', sans-serif; font-size: 40px;} .about-page .who-we-are .image-right, .about-page .how-we-work .image-left {width: 31.7%;} .about-page .who-we-are .image-right img, .about-page .how-we-work .image-left img {display: block; width: 100%;} .about-page .what-we-do {background: url('../images/content/what-we-do-background.webp') no-repeat; background-size: cover; background-position: bottom center; position: relative; padding: 280px 0;} .about-page .what-we-do:before {content: ""; background-color: rgba(74,67,62,0.4); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; mix-blend-mode: multiply;} .about-page .what-we-do .container {max-width: 1386px; position: relative; z-index: 5;} .about-page .what-we-do h2 {color: #FFF; margin-bottom: 50px;} .about-page .what-we-do p {color: #FFF; max-width: 500px;} .about-page .how-we-work {background: #D6CEC4; padding: 180px 0;} .about-page .how-we-work .content-right h2 {margin-bottom: 30px;} .about-page .why {padding: 120px 0 125px; text-align: center;} .about-page .why h2 {margin-bottom: 50px;} .about-page .why p:not(:last-of-type) {margin-bottom: 40px;} /*######################################## ## Services Page ########################################*/ .services-page #content h2 {font-size: 60px;} .services-page .showroom {padding: 100px 0;} .services-page .showroom .container, .services-page .interior .container {display: flex; justify-content: space-between; align-items: center; max-width: 1386px;} .services-page .showroom .content-left, .services-page .interior .content-right {width: 54%;} .services-page .showroom .content-left h2, .services-page .interior .content-right h2 {margin-bottom: 40px;} .services-page .showroom .content-left p:not(:last-of-type), .services-page .interior .content-right p:not(:last-of-type) {margin-bottom: 40px;} .services-page .showroom .image-right, .services-page .interior .image-left {width: 31.7%;} .services-page .showroom .image-right img, .services-page .interior .image-left img {display: block; width: 100%;} .services-page .interior {background: #D6CEC4; padding: 110px 0;} /*######################################## ## Current Inventory Page ########################################*/ .current-inventory-page #content {padding: 20px 0 85px;} .current-inventory-page #content .container {display: flex; justify-content: space-between; row-gap: 50px; flex-wrap: wrap; max-width: 1920px; padding: 0 20px; box-sizing: border-box;} .current-inventory-page .product {text-align: center; width: 24.2%;} .current-inventory-page .product .product-image {display: block; margin: 0 auto; width: 100%; max-width: 360px;} .current-inventory-page .product h3 {font-size: 30px; margin: 30px 0 10px;} .current-inventory-page .product p {font-size: 18px; line-height: 1.2em;} .current-inventory-page .product .learn-more {font-size: 16px; line-height: 1.2em; color: #4A433E; margin-top: 25px; display: flex; justify-content: center; align-items: center; column-gap: 10px; transition: transform 0.25s ease;} .current-inventory-page .product .learn-more:hover {transform: scale(1.05);} /*######################################## ## Contact Us Page ########################################*/ .contact-us-page .form-wrapper {padding: 70px 0 150px;} .contact-us-page .form-wrapper .container {max-width: 980px;} .contact-us-page .form-wrapper p {margin-bottom: 80px; text-align: center;} .contact-us-page .information {background: #D6CEC4; padding: 90px 0; text-align: center;} .contact-us-page .information p {font-size: 18px; line-height: 1.2em;} .contact-us-page .information .info-wrapper {display: flex; justify-content: center; margin: 30px 0;} .contact-us-page .info-wrapper .info {max-width: 400px; width: 100%; padding: 35px 0 40px;} .contact-us-page .info-wrapper .info a {font-size: 25px; color: #4A433E; line-height: 1em;} .contact-us-page .info-wrapper .email {border-right: 1px solid #FFF;} .contact-us-page .info-wrapper .phone a {font-size: 35px;} /*######################################## ## Gallery Page ########################################*/ .gallery-page .image-content .image-wrapper {width: 100%; max-width: 100%; overflow: hidden;} .slider, .slider .slick-list, .slider .slick-track {width: 100%;} .slider img {width: 100%; height: auto; display: block;} .slick-next {right: 50px !important;} .slick-prev {left: 20px !important;} .slick-prev, .slick-next {width: 50px; height: 50px; z-index: 10;} .slick-prev::before, .slick-next::before {content: "" !important; display: block; width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; opacity: 1 !important;} .slick-next::before {background-image: url("../images/content/next-image.png");} .slick-prev::before {background-image: url("../images/content/previous-image.png");} .gallery-page #banner .secondary img {object-position: bottom right;} .gallery-page .entry-content {padding: 100px 0 50px; text-align: center;} .gallery-page .entry-content .container {max-width: 980px;} .gallery-page .entry-content h3 {margin-bottom: 30px;} .gallery-page .image-content {padding-bottom: 100px;} .gallery-page .image-content .container {display: block;grid-template-columns: 1;/* gap: 20px; */max-width: 430px;} /*.gallery-page .image-content .container {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px;}*/ .gallery-page .image-content .image-wrapper img {display: block; width: 100%;} /*######################################## ## Thank You Page ########################################*/ .thank-you-page #banner .secondary {height: 400px; padding-bottom: 80px; align-items: flex-end; box-sizing: border-box;} .thank-you-page #content {padding: 100px 0; text-align: center;} .thank-you-page #content .link {display: inline-block;} .thank-you-page #content img {display: block; margin: 0 auto 40px;} .thank-you-page #content .btn {width: 100px; text-align: center; margin: 40px auto 0;} /*######################################## ## Responsive ########################################*/ @media screen and (max-width: 1680px) { .modal-content {padding: 50px;} .modal-content #modal-title {font-size: 50px;} .modal-content #modal-price {font-size: 35px;} } @media screen and (max-width: 1600px) { #discover {padding: 240px 0;} } @media screen and (max-width: 1366px) { h1, h2 {font-size: 70px !important;} h3 {font-size: 32px;} p {font-size: 20px;} #header {padding: 15px 0;} #header.sticky {padding: 10px 0;} #header .logo img {max-width: 150px;} #header nav ul {column-gap: 40px;} #header nav ul li a {font-size: 15px;} #header .btn {font-size: 15px; padding: 15px 20px;} #roots, #consultation, .contact-us-page .information, .about-page .entry-section, .about-page .how-we-work, .about-page .why, .services-page .showroom, .services-page .interior, .thank-you-page #content {padding: 80px 0;} #ordinary .container {padding: 80px 10px;} #ordinary .content {max-width: 530px;} #ordinary .content h2 {margin-bottom: 45px;} #ordinary .content p {font-size: 32px;} #discover {padding: 200px 0;} #consultation p:not(:last-of-type) {margin-bottom: 30px;} #next-level {padding: 150px 0;} #footer {padding: 40px 0;} #footer .navigation {padding-bottom: 15px;} #footer .navigation ul {max-width: 400px; flex-wrap: wrap; row-gap: 5px;} .current-inventory-page #banner .content h3 {margin: 30px 0 20px;} .contact-us-page .form-wrapper {padding: 70px 0 80px;} .contact-us-page .form-wrapper p {margin-bottom: 60px;} .contact-us-page .info-wrapper .phone a {font-size: 35px;} .about-page .who-we-are .container {align-items: flex-start;} .about-page #content h2, .services-page #content h2 {font-size: 50px !important;} .about-page .who-we-are, .gallery-page .image-content {padding-bottom: 80px;} .about-page .who-we-are .content-left p .italic {font-size: 35px;} .about-page .what-we-do {padding: 180px 0;} .about-page .what-we-do h2 {margin-bottom: 40px;} .about-page .why p:not(:last-of-type) {margin-bottom: 35px;} .thank-you-page #banner .secondary {height: 350px;} .current-inventory-page #content {padding: 20px 0 80px;} .current-inventory-page .product h3 {font-size: 27px; margin: 25px 0 10px;} .modal-content #modal-title {font-size: 45px;} .modal-content #modal-price {margin: 20px 0 40px;} .modal-content #modal-description p {margin-bottom: 30px;} .gallery-page .entry-content {padding: 80px 0 40px;} } @media screen and (max-width: 1200px) { #header .logo img {max-width: 130px;} #header nav ul {column-gap: 30px;} #header nav ul li a {font-size: 14px;} #header .btn {padding: 12px 15px;} #footer .container {flex-wrap: wrap; row-gap: 40px;} #footer .navigation, #footer .copyright {width: 45%;} #footer .logo {order: 1; width: 100%;} #footer .logo img {width: auto; margin: 0 auto;} .current-inventory-page #content {padding: 10px 0 80px;} .current-inventory-page #content .container {padding: 0 10px;} .modal-content #modal-title {font-size: 40px;} .about-page .how-we-work .container {align-items: flex-start;} } @media screen and (max-width: 1024px) { h1, h2 {font-size: 60px !important;} h3 {font-size: 30px;} #header .logo img {max-width: 110px;} #header nav ul li a {font-size: 13px;} #header .btn {font-size: 13px; padding: 12px;} #banner .main, #banner .secondary {height: 650px;} #banner .main img {max-width: 400px;} #roots, #consultation, .contact-us-page .form-wrapper, .contact-us-page .information, .about-page .entry-section, .about-page .how-we-work, .about-page .why, .services-page .showroom, .services-page .interior, .thank-you-page #content {padding: 50px 0;} #roots h1 {margin-bottom: 20px;} #roots h3 {margin-bottom: 30px;} #ordinary .container {padding: 50px 10px;} #ordinary .content {max-width: 480px;} #ordinary .content p {font-size: 30px;} #discover {padding: 180px 0;} #discover h2 {margin-bottom: 60px;} #next-level {padding: 120px 0;} #next-level h2 {margin-bottom: 50px;} #footer {padding: 40px 0 30px;} #footer .navigation, #footer .copyright {width: 100%;} #footer .navigation ul {max-width: 100%; justify-content: center;} #footer .copyright {text-align: center; padding-bottom: 0; border: none;} .current-inventory-page #content {padding: 10px 0 50px;} .current-inventory-page #content .container {row-gap: 40px;} .current-inventory-page .product {width: 49.5%;} .current-inventory-page .product h3 {font-size: 25px;} .gallery-page .entry-content {padding: 50px 0 30px;} .gallery-page .image-content .container {gap: 15px;} .contact-us-page .form-wrapper p {margin-bottom: 50px;} .about-page #content h2, .services-page #content h2 {font-size: 40px !important;} .about-page .who-we-are, .gallery-page .image-content {padding-bottom: 50px;} .services-page .interior .container {align-items: flex-start;} .services-page #content h2, .services-page .showroom .content-left p:not(:last-of-type), .services-page .interior .content-right p:not(:last-of-type) {margin-bottom: 30px;} .about-page .who-we-are .content-left p .italic {font-size: 30px;} .about-page .what-we-do {padding: 130px 0;} .about-page .why h2 {margin-bottom: 40px;} .about-page .why p:not(:last-of-type) {margin-bottom: 25px;} .modal-box {width: 80%;} .modal-content {padding: 50px 40px 40px;} .modal-content #modal-price {font-size: 35px; margin: 20px 0 30px;} } @media screen and (max-width: 980px) { #header {position: absolute; margin-top: 20px; padding: 10px 0; background: none; box-shadow: none;} #header .logo, #header .desktop {display: none;} #header #mobile-logo {display: block; width: 80px;} #header #mobile-button {position: absolute; top: 6px; right: 65px; padding: 10px; z-index: 999;} #header nav {position: fixed; top: 0; left: 0; width: 100%; z-index: 999; box-shadow: 0 0 5px rgba(0, 0, 0, .8);} #header nav ul {max-width: 100%; display: none; height: auto; background: rgba(255, 255, 255, .9);} #header nav ul li {max-width: 100%; position: relative; text-align: left; padding: 0; display: block; border-bottom: 1px solid #EEE; margin-left: 0 !important;} #header nav ul li:first-of-type {border-top: 1px solid #EEE;} #header nav ul li a {font-size: 16px; padding: 10px 0; line-height: 120%; margin: 0; color: #333; text-align: left; width: 100%; text-indent: 20px;} #header nav ul li a::after {display: none;} #header nav ul li a.active-menu, #header nav ul li a:hover {background: #D6CEC4;} #header nav #pull {display: block; background: #4A433E; width: 100%; position: relative; height: 45px; color: #fff; z-index: 999;} #header nav #pull img {max-height: 38px; display: block; position: relative; top: 4px; padding-left: 10px;} #header nav #pull:after {content:"\f0c9"; font-family: 'Font Awesome 5 Free'; font-size: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; font-weight: 700; color: #D6CEC4;} #header nav #pull strong{line-height: 45px;} #banner .secondary .content {padding-top: 45px;} } @media screen and (max-width: 880px) { h1, h2 {font-size: 50px !important;} #ordinary .content {max-width: 450px;} .about-page #content h2, .services-page #content h2 {font-size: 35px !important;} .services-page .showroom .container {align-items: flex-start;} .modal-content #modal-title {font-size: 35px;} .modal-content #modal-price {font-size: 30px;} } @media screen and (max-width: 767px) { h1, h2 {font-size: 35px !important;} h3 {font-size: 25px;} p {font-size: 18px;} .btn {font-size: 14px; padding: 15px;} #banner .main, #banner .secondary {height: 350px;} .current-inventory-page #banner .secondary {height: 450px;} #banner .main img {max-width: 250px;} #roots, #consultation, .contact-us-page .form-wrapper, .contact-us-page .information, .about-page .entry-section, .about-page .how-we-work, .about-page .why, .services-page .showroom, .services-page .interior, .thank-you-page #content, .gallery-page .entry-content {padding: 30px 0;} #design .content {position: relative; background: #4A433E; padding: 20px 0;} #ordinary .container {padding: 30px 10px;} #ordinary .content {max-width: 320px;} #ordinary .content h2 {margin-bottom: 35px;} #ordinary .content p {font-size: 25px;} #discover, #next-level {padding: 90px 0;} #discover h2 {margin-bottom: 40px;} #consultation p:not(:last-of-type) {margin-bottom: 20px;} #next-level h2 {margin-bottom: 35px;} .gallery-page .image-content .container {grid-template-columns: 1fr; gap: 10px;} .slick-prev::before, .slick-next::before {width: 45px; height: 45px;} .slick-next {right: 35px !important;} .slick-prev {left: 10px !important;} .contact-us-page .form-wrapper p {margin-bottom: 40px;} .ctc-form label {font-size: 16px;} .ctc-form input[type="text"] {height: 45px;} .contact-us-page .information .info-wrapper {flex-direction: column; row-gap: 30px; align-items: center;} .contact-us-page .info-wrapper .info {max-width: 100%; padding: 0;} .contact-us-page .info-wrapper .email {max-width: 300px; border-right: none; border-bottom: 1px solid #FFF; padding-bottom: 30px;} .about-page .who-we-are, .gallery-page .image-content {padding-bottom: 30px;} .about-page .who-we-are .container, .services-page .showroom .container {flex-direction: column-reverse; row-gap: 30px;} .about-page .who-we-are .image-right, .about-page .how-we-work .image-left, .about-page .who-we-are .content-left, .about-page .how-we-work .content-right, .services-page .showroom .image-right, .services-page .interior .image-left, .modal-image, .modal-content {width: 100%;} .about-page .who-we-are .content-left, .about-page .how-we-work .content-right {text-align: center;} .about-page .who-we-are .content-left p:not(:last-of-type), .about-page .how-we-work .content-right p:not(:last-of-type), .about-page .why p:not(:last-of-type), .services-page .showroom .content-left p:not(:last-of-type), .services-page .interior .content-right p:not(:last-of-type) {margin-bottom: 20px;} .about-page .who-we-are .content-left p .italic {font-size: 25px;} .about-page .what-we-do {padding: 80px 0; text-align: center;} .about-page #content h2 {margin-bottom: 30px;} .about-page .what-we-do p {margin: 0 auto;} .about-page .how-we-work .container, .services-page .interior .container {flex-direction: column; row-gap: 30px;} .services-page .showroom .content-left, .services-page .interior .content-right {width: 100%; text-align: center;} .thank-you-page #banner .secondary {height: 250px; padding-bottom: 50px;} .thank-you-page #content img {margin-bottom: 30px;} .thank-you-page #content .btn {margin-top: 30px;} .gallery-page .entry-content .next-line {display: inline;} .current-inventory-page #content {padding: 10px 0 30px;} .current-inventory-page #content .container {row-gap: 30px;} .current-inventory-page .product {width: 100%;} #modal-close {padding: 10px; background: #FFF; border-radius: 50%; top: 10px; right: 10px;} .modal-box {flex-direction: column; width: 98%;} .modal-content {padding: 30px 20px;} .modal-content #modal-title {font-size: 30px;} .modal-content #modal-price {font-size: 27px; margin: 10px 0 20px;} .modal-content #modal-description p {margin-bottom: 20px;} } @media screen and (max-width: 480px) { #roots h3 {max-width: 300px; margin: 0 auto 25px;} #ordinary .container {background: none;} #ordinary .content {max-width: 100%; text-align: center;} #ordinary .content h2 {max-width: 280px; margin: 0 auto 25px;} #footer {padding: 30px 0 20px;} #footer .container {row-gap: 35px;} #footer .navigation ul {max-width: 360px; margin: 0 auto;} #footer .copyright p, #footer .copyright a {max-width: 280px; margin: 0 auto;} .current-inventory-page #banner .content h3 {max-width: 320px; margin: 30px auto 20px;} .ctc-form .one-half {flex-direction: column;} .contact-us-page .info-wrapper .info a {font-size: 22px;} .contact-us-page .info-wrapper .phone a {font-size: 25px;} } @media screen and (max-width: 360px) { #header #mobile-button {top: 7px; right: 60px; padding: 10px; font-size: 11px;} #roots h1 {max-width: 250px; margin: 0 auto 15px;} }