/*------------- BASE IMPORT -------------*/ img { max-width: 100%; } html, body { overflow-x: hidden; font-size: 12px; padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, li, ul, ol, span { margin: 0; padding: 0; } ul, ol { list-style: none; padding-left: 0; } input, button { border: none; } input:focus, button:focus { outline: none; } ::-moz-selection { background-color: #ed9a08; color: #ffffff; } ::selection { background-color: #ed9a08; color: #ffffff; } @media screen and (min-width: 768px) { html, body { font-size: 14px; } } @media screen and (min-width: 992px) { html, body { font-size: 15px; } } @media screen and (min-width: 1200px) { html, body { font-size: 16px; } } /*------------- UTILITIES IMPORT -------------*/ /*------------- UTILITY CLASSES -------------*/ .section { max-width: 1600px; margin: 0 auto; } .divider { text-align: center; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .divider__img { max-width: 50%; } @media screen and (min-width: 1200px) { .divider__img { max-width: 100%; } } /*------------- MODULES IMPORT -------------*/ /*------------- TABLE OF CONTENTS -------------*/ /* 1. HEADER 2. PRODUCT 3. FOOTER */ /*------------- 1. HEADER -------------*/ .header { font-family: "Century Gothic", sans-serif; position: relative; text-align: center; margin-bottom: -6rem; } .header__img { width: 100%; height: auto; } .header__title { color: #ff0066; position: absolute; top: 35%; left: 50%; -webkit-transform: translate(-50%, -35%); -ms-transform: translate(-50%, -35%); transform: translate(-50%, -35%); width: 100%; font-size: 3rem; } @media screen and (min-width: 768px) { .header__title { font-size: 6rem; } } @media screen and (min-width: 992px) { .header__title { font-size: 8rem; } } @media screen and (min-width: 992px) { .header__title { font-size: 10rem; } } .header__title--light { color: #ffcae8; -webkit-transform: none; -ms-transform: none; transform: none; position: static; } /*------------- 2. PRODUCT -------------*/ .product { background-image: url("https://images.autods.com/Templates/Perfect+Jewlery+/BG-Emeralds.png"); background-repeat: no-repeat; background-size: cover; background-position: left top; padding: 30vw 0 0 0; -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); } @media screen and (min-width: 768px) { .product { padding-top: 15vw; } } .product__content { padding-bottom: 5vw; } .product__header { padding: 0 15px; margin: 0 auto; text-align: center; max-width: 1300px; } .product__header-title { position: relative; z-index: 99; text-align: center; color: #b8990f; font-size: 5rem; line-height: 3rem; font-weight: normal; font-family: "Century Schoolbook", serif; } @media screen and (min-width: 768px) { .product__header-title { font-size: 6rem; line-height: 4rem; } } @media screen and (min-width: 992px) { .product__header-title { font-size: 7rem; line-height: 5rem; } } @media screen and (min-width: 1200px) { .product__header-title { font-size: 8rem; } } .product__header-title--small { font-size: 3rem; line-height: 4rem; } @media screen and (min-width: 768px) { .product__header-title--small { font-size: 4rem; line-height: 5rem; } } @media screen and (min-width: 992px) { .product__header-title--small { font-size: 5rem; line-height: 6rem; } } .product__img-wrapper { width: 100%; height: auto; position: relative; z-index: 1; margin: 5rem auto 1rem auto; max-width: 1450px; } .product__img-wrapper .image-wrap img { width: 88% !important; height: auto !important; max-height: 1000px !important; max-width: 100% !important; position: absolute; top: 0; left: 4.5%; } .product__img-bg { display: block; margin: 0 auto; width: 100%; height: auto; } .product__info { max-width: 1300px; margin: 0 auto; padding: 0 15px; position: relative; z-index: 2; } .product__info--alt .product__info-text { font-size: 1.667rem; line-height: 2.5rem; } @media screen and (min-width: 768px) { .product__info--alt .product__info-text { font-size: 1rem; line-height: 2rem; } } .product__info+.product__info { margin-top: 3.5rem; } .product__info-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 1rem; width: 100%; } .product__info-title { font-size: 3rem; color: #262626; font-family: "Century Gothic", sans-serif; text-transform: uppercase; font-weight: normal; margin-left: 3rem; background: #fff600; background: -moz-linear-gradient(left, #fff600 0%, #ed9a08 100%); background: -webkit-linear-gradient(left, #fff600 0%, #ed9a08 100%); background: -webkit-gradient(linear, left top, right top, from(#fff600), to(#ed9a08)); background: -o-linear-gradient(left, #fff600 0%, #ed9a08 100%); background: linear-gradient(to right, #fff600 0%, #ed9a08 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (min-width: 768px) { .product__info-title { font-size: 2.425rem; } } .product__info-text { width: 100%; color: #4b4b4b; font-size: 2.5rem; line-height: 3.833rem; font-family: "Century Gothic", sans-serif; } @media screen and (min-width: 768px) { .product__info-text { font-size: 1.875rem; line-height: 2.875rem; } } .product__info-text+.product__info-text { margin-top: 3.5rem; } /*------------- 3. FOOTER -------------*/ .footer { position: relative; padding: 5rem 15px 10rem 15px; background-image: url("https://images.autods.com/Templates/Perfect+Jewlery+/bg-footer.png"); background-repeat: no-repeat; background-size: cover; background-position: center top; } @media screen and (min-width: 768px) { .footer { padding-top: 8rem; } } @media screen and (min-width: 992px) { .footer { padding-top: 10rem; } } @media screen and (min-width: 1200px) { .footer { padding-top: 13rem; } } .footer__content { max-width: 1600px; margin: 0 auto; } @media screen and (min-width: 768px) { .footer__content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .footer__column+.footer__column { margin-top: 3.5rem; } @media screen and (min-width: 768px) { .footer__column+.footer__column { margin-top: 0; margin-left: 3.5rem; } }