html, body { height: 100% }
header { background-color: transparent; position: absolute; width: 100%; z-index: 2 }
#carousel-home { background-color: var(--white); height: 100%; position: relative; top: 0; width: 100%; z-index: 1 }
#carousel-home, #carousel-home .carousel-inner, #carousel-home .carousel-item, #carousel-home .carousel-item.active { height: 100% }
#carousel-home .carousel-item { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--white) }
#carousel-home .carousel-item .container { height: 100%; position: relative; text-align: center }
#carousel-home .carousel-item .carousel-content { bottom: 150px; left: 0; position: absolute; text-transform: uppercase; width: 100% }
#carousel-home .carousel-item .carousel-content h2 { font-size: 66px; margin-bottom: 50px }
#carousel-home .carousel-item .carousel-content a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: var(--green); color: var(--white); display: inline-block; font-size: 20px; padding: 7px 0; transition: 0.3s; width: 400px }
#carousel-home .carousel-item .carousel-content a:hover { background-color: var(--white); color: var(--green) }
#home-about { padding: 100px 0 }
#home-about #home-about-02 { margin-top: 100px }
#home-about #home-about-content { margin-left: 50px; text-align: center }
#home-about #home-about-content h1 { font-size: 32px; margin-bottom: 30px }
#home-about #home-about-content p { font-size: 18px; margin-bottom: 40px }
#home-about #home-about-content a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: var(--green); color: var(--white); font-size: 20px; padding: 7px 100px; text-transform: uppercase; transition: 0.3s }
#home-quote { background-image: url("/img/home/curly-banner.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; height: 450px; text-align: center }
#home-quote .container, #home-quote .container .row { height: 100% }
#home-quote p { background-color: rgba(243, 237, 229, 0.85); color: var(--black); display: inline-block; font-size: 26px; padding: 20px 50px; text-transform: uppercase }
#home-quote p small { font-size: 16px }
#home-shop { margin: 35px 20px }
#home-shop #home-shop-content { background-color: var(--green-light); height: 100%; text-align: center }
#home-shop #home-shop-content h3 { font-size: 32px; margin-bottom: 40px; text-transform: uppercase }
#home-shop #home-shop-content a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: var(--green); color: var(--white); font-size: 20px; padding: 7px 100px; text-transform: uppercase; transition: 0.3s }
#home-shop #home-shop-content a:hover { background-color: var(--white); color: var(--green) }
#home-gallery { padding: 30px 0 80px 0 }
#home-gallery h3 { font-size: 50px; margin-bottom: 30px; text-align: center; text-transform: uppercase }
#home-gallery img { margin-top: 24px }
@media (max-width: 1399px) {
#home-about { padding: 80px 0 }
#home-about #home-about-02 { margin-top: 80px }
#home-about #home-about-content { margin-left: 40px }
#home-quote { height: 400px }
#home-quote p { font-size: 22px; outline-offset: 9px; outline-width: 9px; padding: 15px 40px }
#home-quote p small { font-size: 14px }
#home-gallery { padding: 25px 0 75px 0 }
#home-gallery h3 { font-size: 46px; margin-bottom: 25px }
}
@media (max-width: 1199px) {
#carousel-home .carousel-item .carousel-content h2 { font-size: 50px; margin-bottom: 40px }
#carousel-home .carousel-item .carousel-content a { font-size: 18px; width: 300px }
#home-about { padding: 60px 0 }
#home-about #home-about-02 { margin-top: 60px }
#home-about #home-about-content { margin-left: 30px }
#home-about #home-about-content h1 { font-size: 28px; margin-bottom: 20px }
#home-about #home-about-content p { font-size: 16px; margin-bottom: 30px }
#home-about #home-about-content a { font-size: 18px; padding: 7px 80px }
#home-quote { height: 350px }
#home-shop { margin: 30px 15px }
#home-shop #home-shop-content h3 { font-size: 28px; margin-bottom: 30px }
#home-shop #home-shop-content a { font-size: 18px; padding: 7px 80px }
#home-gallery { padding: 25px 0 70px 0 }
#home-gallery h3 { font-size: 40px; margin-bottom: 20px }
}
@media (max-width: 991px) {
#carousel-home .carousel-item .carousel-content { bottom: 75px }
#carousel-home .carousel-item .carousel-content h2 { font-size: 40px; margin-bottom: 30px }
#carousel-home .carousel-item .carousel-content a { font-size: 16px; width: 250px }
#home-about { padding-top: 50px }
#home-about #home-about-01 { width: 100% }
#home-about #home-about-02 { margin-top: 0; width: 100% }
#home-about #home-about-content { margin: 0 0 60px 0 }
#home-quote { height: 300px }
#home-quote p { font-size: 20px; outline-offset: 7px; outline-width: 8px; padding: 10px 30px }
#home-quote p span { display: none }
#home-quote p small { display: block; font-size: 12px; margin-top: 7px }
}
@media (max-width: 767px) {
#home-shop #home-shop-content { padding: 50px 20px 60px 20px }
}
@media (max-width: 575px) {
#carousel-home .carousel-item .carousel-content { bottom: 100px }
#carousel-home .carousel-item .carousel-content h2 { font-size: 30px; margin-bottom: 20px }
#home-about { padding-top: 45px }
#home-about #home-about-content { margin-bottom: 50px }
#home-quote p { font-size: 18px; margin: 0 15px; outline-offset: 6px; outline-width: 6px; padding: 7px 20px }
#home-quote p small { font-size: 11px }
}
/* Modal Styling */
#modal-container { position: fixed; display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; top: 0; left: 0; transform: scale(0); z-index: 1000 }
#modal-container.one { transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards }
#modal-container.one .modal-background { background: rgba(0, 0, 0, 0.8) }
#modal-container.one .modal-background .modal { transform: scale(0); animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards }
#modal-container.one.out { transform: scale(1); animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards }
#modal-container.one.out .modal-background .modal { animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards }
#modal-container .modal-background { background: rgba(0, 0, 0, 0.8); text-align: center; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column }
#modal-container .modal-background .modal { background: #fff; padding: 50px; display: block; border-radius: 3px; font-weight: 300; position: relative; max-width: 90%; width: 500px; height: auto; min-height: 100px; margin: auto }
#modal-container .modal-background .modal h2 { font-size: 25px; line-height: 25px; margin-bottom: 15px }
#modal-container .modal-background .modal p { font-size: 18px; line-height: 22px }
#modal-container .modal-background .modal .modal-close { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px; color: #333 }
@keyframes unfoldIn {
0% { transform: scaleY(0.005) scaleX(0) }
50% { transform: scaleY(0.005) scaleX(1) }
100% { transform: scaleY(1) scaleX(1) }
}
@keyframes unfoldOut {
0% { transform: scaleY(1) scaleX(1) }
50% { transform: scaleY(0.005) scaleX(1) }
100% { transform: scaleY(0.005) scaleX(0) }
}
@keyframes zoomIn {
0% { transform: scale(0) }
100% { transform: scale(1) }
}
@keyframes zoomOut {
0% { transform: scale(1) }
100% { transform: scale(0) }
}