@charset "UTF-8";

:root { --blue:         #11094f;
--blue-light:   #272158;
--blue-dark:    #171333;
--blue-cyan:    #0DA4F3;
--blue-lighter: #007AFF; 
--orange:       #e30613;
--orange-light: #f9232f;
--orange-dark:  #b1050f;
--white:        #fff;
--black:        #0f0f0f;
--red:          #A22129;
--brown:        #554536;
--text-color:   #333333;
--gray:         #bebebe;
--gray-light:   #e9ebf6;
--gray-lighter: #f1f1f1;
--gray-dark:    #a5a5a5;
--gray-darker:  #3B5266;
--border:       #444; --base-font-size: 18px;
--text-color: var(--black);
--title-color: var(--black);
--base-font-family: 'Sarabun', sans-serif;
--base-title-family: 'Sarabun', sans-serif;
--base-line-height: 25px;
--base-font-weight-lighter: 100;
--base-font-weight-light: 300;
--base-font-weight: 400;
--base-font-weight-bold: 700;
}
html {
font-size: 62.5%;
}
body {
color: var(--text-color);
font-size: var(--base-font-size);
font-family: var(--base-font-family);
font-weight: var(--base-font-weight-light);
line-height: var(--base-line-height); } h1, h2, h3, h4, h5 {
font-family: var(--base-title-family);
font-weight: var(--base-font-weight-light);
color: var(--title-color);
}
p {
font-size: var(--base-font-size);
line-height: var(--base-line-height);
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-color);
text-decoration: none;
}
.btn {
font-size: 16px;
font-weight: var(--base-font-weight-light);
border-radius: 0;
line-height: 20px;
padding: 14px 26px;
height: 5rem;
transition: all ease-out ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-primary {
background-color: var(--orange);
border: none;
}
.btn-primary:hover {
background-color: var(--orange);
border: none;
outline: none;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle,
.btn-primary:active,
.btn-primary:focus {
background-color: var(--orange-light);
border-color: var(--orange-light);
outline: none;
}
.btn-primary.focus, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
background-color: var(--orange-light);
border-color: var(--orange-light);
outline-color: var(--orange-light);
box-shadow: 0 0 0 0.2rem var(--orange-light);
}
.btn-hover {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.btn-hover:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--orange-dark);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.btn-hover:hover, .btn-hover:focus, .btn-hover:active {
color: white;
}
.btn-hover:hover:before, .btn-hover:focus:before, .btn-hover:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.btn-link-nav {
color: white;
height: 8rem;
transition: all ease-out ease 0.3s;
}
.page-blog .btn-link-nav,
.nav-header-fixed .btn-link-nav {
background: var(--orange);
transition: all ease-out ease 0.3s;
}
.btn-link-nav img {
margin-left: 1rem;
}
.btn-link-nav:hover, .btn-link-nav:focus, .btn-link-nav:active {
color: white; outline: none;
box-shadow: none;
} .wrapper-header {
background-color: transparent;
position: fixed;
transition: all 200ms ease-in;
top: 0;
width: 100%;
z-index: 9999;
}
.wrapper-header--contact {
background: rgba(2, 2, 2, 0.5);
height: 5rem;
}
.wrap-header-infos-contact {
display: flex;
justify-content: flex-end;
align-items: center;
height: 5rem;
}
.wrap-header-infos-contact a {
font-size: 1.4rem;
line-height: 2.6rem;
color: rgba(255, 255, 255, 0.6);
margin-left: 2rem;
transition: all 200ms ease-in;
}
.wrap-header-infos-contact a:hover {
transition: all 200ms ease-in;
color: rgba(255, 255, 255, 0.9);
}
.wrapper-header--menu {
border-bottom: .1rem solid rgba(223, 223, 223, 0.2);
border-top: .1rem solid rgba(223, 223, 223, 0.2);
}
.wrapper-header.nav-header-fixed {
background-color: var(--blue);
transition: all 200ms ease-in;
}
.wrapper-header.nav-header-fixed::before {
background-color: var(--white);
height: 8rem;
transition: all 200ms ease-in;
}
.line-contact {
height: 100%;
width: .1rem;
background: rgba(223, 223, 223, 0.2);
position: absolute;
right: 15rem;
} .page-blog .wrapper-header {
position: sticky;
background-color: var(--blue);
}
.page-blog .wrapper-header::before {
height: 8rem;
background-color: var(--white);
}
.wrapper-header::before {
background-color: transparent;
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
transition: all 200ms ease-in;
width: 35%;
right: auto;
}
.wrap-header {
align-items: center;
display: flex;
justify-content: space-between;
height: 80px;
margin: 0 auto;
max-width: var(--max-width);
}
.wrap-header-logo img {
height: 40px;
}
.wrap-nav,
.list-nav {
align-items: center;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.list-nav__link {
color: var(--white);
padding: 2.7rem 1.6rem;
text-decoration: none;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.list-nav__link:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: var(--orange);
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.list-nav__link:hover:before,
.list-nav__link:focus:before,
.list-nav__link:active:before {
left: 0;
right: 0;
}
.list-nav__link:hover {
color: var(--white);
}
.wrap-nav .btn {
margin-left: 3rem;
}
.btn-whats {
position: fixed;
right: 3rem;
top: 50vh;
z-index: 9;
transition: all 200ms ease-in;
}
.btn-whats:hover, .btn-whats:focus, .btn-whats:active {
transition: all 200ms ease-in;
opacity: 0.8;
outline: none;
box-shadow: none;
}
@media (max-width: 1199px) {
.wrapper-header::before {
width: 20%;
}
}
@media (max-width: 576px) {
.page-blog .wrapper-header.nav-header-fixed::before,
.wrapper-header.nav-header-fixed::before {
height: 6.1rem;
}
.wrapper-header::before {
width: 35%;
}
.page-blog .wrapper-header::before {
width: 35%;
height: 6rem;
}
.page-blog .wrapper-header {
height: 11rem;
}
.wrap-header-infos-contact {
flex-direction: column;
justify-content: center;
}
.wrap-header-infos-contact a {
font-size: 1.4rem;
line-height: 1.6rem;
color: rgba(255, 255, 255, 0.6);
}
.wrap-header-mobile {
display: flex;
justify-content: space-between;
align-items: center;
height: 6rem;
margin: 0 auto;
padding: 0 1.5rem;
width: 100%;
}
.logo-mobile {
height: 3rem;
}
.wrap-action-mobile {
display: flex;
align-items: center;
}
.btn-mobile {
background-color: transparent;
border: none;
display:flex;
flex-direction:column;
cursor: pointer;
padding: 0;
width: 3rem;
position: relative;
z-index: 9999;
margin-left: 1rem;
}
.btn-mobile img {
height: 3rem;
}
.btn-mobile .icon-nav-open,
.btn-mobile .icon-nav-close {
display: none;
opacity: 1;
transition: all 200ms ease-in;
}
.btn-mobile .icon-nav-open.show,
.btn-mobile .icon-nav-close.show {
display: block;
opacity: 1;
transition: all 200ms ease-in;
}
.btn-mobile .icon-nav-close,
.btn-mobile .icon-nav-open {
height: 4rem;
}
.btn-mobile:hover,
.btn-mobile:focus,
.btn-mobile:active {
outline: none;
box-shadow: none;
}
.wrap-fixed-page-mobile {
overflow: hidden;
}
.wrap-nav-mobile {
background-color: var(--blue);
width: 100vw;
height: 100%;
min-height: 100vh;
position: fixed;
padding-bottom: 50px;
overflow: auto;
top: 0;
left: 0;
transition: all ease-in-out 500ms;
transform: translateY(-150%);
overflow-x: auto;
}
.wrap-nav-mobile.show {
transition: all ease-in-out 350ms;
transform: translateY(0);
}
.wrap-nav-mobile .list-nav {
margin-top: 7rem;
flex-direction: column;
}
.wrap-nav-mobile .list-nav .list-nav__item {
border-bottom: .1rem solid rgb(255 255 255 / 20%);
width: 100%;
padding-left: 5rem;
}
.wrap-nav-mobile .list-nav .list-nav__item:last-child {
border-bottom: none;
}
.list-nav__link {
color: var(--white);
padding: 2.7rem 1.6rem;
font-size: 3rem;
}
.wrap-nav-mobile .list-social {
margin-left: 6rem;
}
.list-social--item {
margin: 0 1rem 0 0;
}
.wrap-contact-header {
margin-bottom: 3rem;
}
.btn-icon {
width: 3.6rem;
height: 3.6rem;
}
.title-contact {
font-size: 2.8rem;
line-height: 3.4rem;
}
}
@media (max-width: 420px) {
.wrap-nav-mobile .list-nav {
margin-top: 5rem;
}
.wrap-nav-mobile .list-social {
margin-left: 2.2rem;
}
.wrap-nav-mobile .list-nav .list-nav__item {
padding-left: 2rem;
}
.list-nav__link {
color: var(--white);
padding: 2rem 1.6rem;
font-size: 2rem;
}
}
.wrapper-footer {
background-color: var(--blue);
padding: 5rem 0;
position: relative;
}
.wrap-social {
display: flex;
justify-content: flex-end;
align-items: center;
}
.wrapper-footer .logo-footer {
margin: 0;
display: block;
}
.title-social {
color: var(--white);
font-size: 1.6rem;
line-height: 2rem;
margin: 0 0.5rem;
}
.list-social {
list-style: none;
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
.list-social--item img {
width: 40px;
}
.list-social--item {
margin: 0 0.6rem;
transition: opacity 250ms ease-out;
opacity: 1;
}
.list-social--item:hover {
transition: opacity 250ms ease-in;
opacity: 0.7;
}
.wrap-footer-copy {
font-size: 1.6rem;
line-height: 2rem;
border-top: 1px solid #676A78;
color: var(--white);
opacity: 0.7;
padding-top: 5rem;
margin-top: 5rem;
}
a.goto {
position: fixed;
bottom: 3rem;
right: 6rem;
z-index: 4;
}
@media (max-width: 576px) {
.wrapper-footer {
padding: 3rem 0;
}
.wrap-social {
justify-content: center;
flex-direction: column;
margin-top: 2rem;
}
.title-social {
margin: 0 0 0 2rem;
}
.wrapper-footer .logo-footer {
margin: 0  auto;
}
.list-social {
margin: 2rem 0 0;
}
.list-social--item {
margin: 0 1rem;
transition: opacity 250ms ease-out;
opacity: 1;
}
.list-social--item:hover {
transition: opacity 250ms ease-in;
opacity: 0.7;
}
.wrap-footer-copy {
text-align: center;
padding-top: 3rem;
margin-top: 3rem;
}
}
.wrapper-banner {
height: calc(100vh - 12rem);
position: relative;
}
.image-banner {
background-color: var(--black);
display: block;
height: calc(100vh - 12rem);
position: absolute;
width: 100%;
}
.image-banner::before {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0) 100%);
content: "";
display: block;
height: 100%;
position: absolute;
transform: rotate(-180deg);
z-index: 1;
width: 100%;
}
.image-banner video,
.image-banner img {
height: 100%;
position: absolute;
object-fit: cover;
object-position: center;
width: 100%;
}
.wrap-title-banner {
align-items: center;
display: flex;
justify-content: center;
height: calc(100vh - 12rem);
width: 100%;
position: relative;
z-index: 2;
}
.wrap-title-banner .title-banner {
color: var(--white);
font-size: 9.5rem;
line-height: 12rem;
font-weight: var(--base-font-weight-light);
text-align: center;
}
.wrap-feature-banner {
bottom: 5rem;
cursor: pointer;
min-height: 200px;
opacity: .5 !important;
padding: 0 1rem;
position: absolute;
z-index: 2;
}
.wrap-feature-banner.active-feature {
opacity: 1 !important;
}
.wrap-feature-banner .number {
color: var(--white);
display: block;
font-size: 4.8rem;
line-height: 2.5rem;
font-weight: var(--base-font-weight-light);
margin-bottom: 3.5rem;
}
.wrap-feature-banner .wrap-line {
background-color: rgba(255, 255, 255, 0.4);
height: 2px;
position: relative;
width: 100%;
}
.wrap-feature-banner .wrap-line .line {
background-color: var(--orange);
height: 2px;
left: 0;
position: absolute;
top: 0;
width: 0%;
}
.wrap-feature-banner .text {
color: var(--white);
font-size: 1.6rem;
font-weight: var(--base-font-weight-light);
margin-top: 2.5rem;
}
@media (min-width: 1200px) and (max-width: 1440px) {
.wrapper-banner,
.image-banner,
.wrap-title-banner {
height: calc(100vh - 12rem);
}
.wrap-title-banner img {
height: 80px;
}
.anchor {
bottom: 20px;
}
}
@media (min-width: 769px) and (max-width: 1199px) {
.wrapper-banner,
.image-banner,
.wrap-title-banner {
height: calc(100vh - 11.8rem);
}
.wrap-title-banner img {
height: 70px;
}
.anchor {
bottom: 20px;
margin-left: -20px;
}
}
@media (max-width: 768px) {
.wrapper-banner,
.image-banner,
.wrap-title-banner {
height: calc(100vh - 9.5rem);
}
.wrap-title-banner h1 {
font-size: 5.2rem;
}
.anchor {
bottom: 20px;
margin-left: -18px;
width: 35px;
}
}
@media (max-width: 576px) {
.wrap-title-banner .title-banner {
font-size: 5.4rem;
line-height: 6rem;
text-align: center;
}
.wrap-feature-banner {
bottom: 0;
opacity: 0 !important;
}
}
.wrapper-products {
margin-bottom: 13rem;
margin-top: 13rem;
cursor: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/cursor.svg), auto;
}
.wrapper-products.carousel-product .slick-initialized .slick-slide {
display: flex;
padding: 2rem;
height: 70rem;
}
.wrapper-products.carousel-product {
margin-bottom: 15rem;
}
.wrapper-products.single-product {
margin-bottom: 25rem;
margin-top: 0;
cursor: default;
background-color: #F8F8FD;
overflow-x: hidden;
min-height: 60rem;
}
.wrapper-products.single-product .image-bg-product {
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 46rem;
object-fit: cover;
}
.wrapper-products.single-product .image-product {
position: relative;
top: 15.7rem;
right: -5rem;
}
.wrapper-products.single-product .wrap-info-product {
padding-top: 14rem;
}
.wrapper-products.single-product .title-product-huge {
top: 15rem;
right: 0;
font-weight: var(--base-font-weight-light);
}
.wrapper-products.carousel-product {
overflow: hidden;
}
.wrap-info-product {
margin-top: 5rem;
margin-left: 0;
position: relative;
z-index: 9;
}
#products .slick-list.draggable {
overflow: visible;
}
#products button.slick-next.slick-arrow {
width: 70%;
position: absolute;
top: 0;
right: 0;
height: 100%;
opacity: 0;
cursor: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/cursor.svg), auto;
}
#products button.slick-prev.slick-arrow {
display: none !important;
}
.wrap-info-product .category-product {
color: var(--blue);
font-size: 3.6rem;
}
.wrap-info-product .title-product {
color: var(--blue);
font-size: 7.2rem;
font-weight: var(--base-font-weight-light);
line-height: 7rem;
}
.wrap-info-product .description-product {
margin-bottom: 4rem;
margin-top: 2rem;
}
.title-product-huge {
color: #c7cadb;
font-size: 15vw;
font-weight: var(--base-font-weight-light);
line-height: 0px;
white-space: nowrap;
left: -19vw;
position: absolute;
opacity: 0.5 !important;
top: 10rem;
z-index: 1;
}
.category--travesseiro .photo {
margin: 5rem auto 0;
width: 100%;
}
.category--travesseiro .title-huge {
font-weight: var(--base-font-weight-light);
font-size: 18vw;
line-height: 0px;
color: #C7CADB;
text-align: center;
position: relative;
top: -4.6rem;
}
.category--travesseiro {
margin-top: 15rem;
padding-top: 5rem;
position: relative;
width: 100%;
}
.category--travesseiro::before {
content: '';
background: #E9EBF6;
height: 500px;
width: 100%;
position: absolute;
top: 5rem;
}
.category--travesseiro .wrapper-products {
cursor: default;
}
.category--travesseiro .wrap-info-product {
margin-top: -1rem;
}
.wrapper-products .image-bg-product {
position: absolute;
right: 0;
top: 0;
height: 40rem;
}
.wrapper-products .photo-product {
position: absolute;
top: 17rem;
margin-bottom: 2rem;
left: -4rem;
}
.wrapper-content .wrapper-content-feature-product:nth-child(even){
flex-direction: row-reverse;
}
@media (max-width: 576px) {
.wrap-info-product {
margin-top: 0;
margin-left: 0;
height: 30rem;
}
.wrapper-products.carousel-product .slick-initialized .slick-slide {
padding: 2rem 0;
height: 100rem;
}
.title-product-huge {
display: none;
}
.wrapper-products .photo-product {
bottom: 40px;
margin-bottom: 2rem;
width: 90%;
top: initial;
}
.wrapper-products .image-bg-product {
position: relative;
right: 0;
top: 0;
height: 40rem;
width: 100%;
}
.wrapper-products.carousel-product {
margin-bottom: 5rem;
overflow-x: hidden;
}
.category--travesseiro {
margin-top: 0rem;
overflow-x: hidden;
}
.category--travesseiro::before {
height: 23rem;
top: 5rem;
}
.category--travesseiro .title-huge {
top: -1.2rem;
}
.category--travesseiro .photo {
margin: -6rem auto 5rem;
}
.wrapper-products.single-product .image-bg-product {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 26rem;
object-fit: cover;
top: initial;
}
.wrapper-products.single-product .wrap-info-product {
padding-top: 0;
margin-top: 5rem;
}
.wrapper-products.single-product .image-product {
position: relative;
top: 15rem;
right: 0;
max-width: 100%;
}
}
.wrap-features {
min-height: 20rem;
margin-bottom: 10rem;
}
.wrap-features .icon-features {
height: 9rem;
}
.wrap-features .title-feature {
font-size: 2.4rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
line-height: 3.2rem;
margin-bottom: 2rem;
margin-right: 10rem;
margin-top: 4rem;
min-height: 6.5rem;
}
.wrap-feature {
margin: 10rem 0;
text-align: center;
}
.wrap-feature .title-feature {
color: var(--blue);
font-size: 9.4rem;
font-weight: var(--base-font-weight-light);
line-height: 7rem;
margin-bottom: 7.5rem;
}
.wrap-feature .description-feature {
color: var(--gray-darker);
font-size: 2.4rem;
line-height: 3.4rem;
margin: 0 auto 4rem;
width: 75%;
} .wrapper-animation-pulse {
display: flex;
width: 100%;
flex-flow: wrap;
justify-content: center;
align-items: center;
margin-top: 15rem;
}
.wrap-animation-pulse {
position: relative;
width: 22rem;
height: 22rem;
margin: -3.2rem;
}
.pulse-svg {
overflow: visible;
width: 5rem;
height: 5rem;
}
svg.pulse-svg .first-circle, svg.pulse-svg .third-circle, svg.pulse-svg .second-circle {
fill: var(--blue-cyan);
transform: scale(0.5);
transform-origin: center center;
animation: pulse-me 3s linear infinite;
}
svg.pulse-svg .second-circle {
animation-delay: 1s;
}
svg.pulse-svg .third-circle {
animation-delay: 2s;
}
@keyframes pulse-me {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
opacity: 0.1;
}
70% {
opacity: 0.09;
}
100% {
transform: scale(5);
opacity: 0;
}
}
@media (max-width: 576px) {
.wrap-feature .title-feature {
font-size: 4.4rem;
line-height: 5rem;
margin-bottom: 5rem;
}
.wrap-feature .description-feature {
font-size: 2.2rem;
line-height: 3.2rem;
width: 100%;
}
.wrap-animation-pulse {
width: 12rem;
height: 12rem;
margin: -1.2rem;
}
.pulse-svg {
overflow: visible;
width: 3rem;
height: 3rem;
}
.wrap-features {
min-height: auto;
margin-bottom: 6rem;
}
.wrap-features .icon-features {
height: 7rem;
}
.wrap-features .title-feature {
font-size: 1.8rem;
line-height: 3.2rem;
margin-right: 0;
margin-top: 2rem;
min-height: 5.5rem;
}
}
.wrapper-depositions {
width: 100%;
height: 610px;
background-color: #E9EBF6;
padding-bottom: 10rem;
padding-top: 10rem;
}
.title-depositions {
font-size: 72px;
line-height: 90px;
color: var(--blue-light);
margin-bottom: 6rem;
}
.card-depositions {
background-color: var(--white);
border-radius: 3px;
padding: 2rem 3rem;
min-height: 28rem;
}
.card-depositions .title-card {
font-weight: var(--base-font-weight-bold);
font-size: 16px;
line-height: 24px;
color: var(--black);
margin-bottom: 1rem;
}
.wrapper-depositions .slick-dots {
list-style: none;
padding: 0;
margin: 1.5rem;
display: flex;
justify-content: flex-end;
}
.wrapper-depositions .slick-dots li {
margin: 0 .5rem;
}
.wrapper-depositions .slick-dots li button {
width: .7rem;
height: .7rem;
background: #D0D5DA;
border: none;
border-radius: 50%;
display: flex;
text-indent: -9999px;
padding: 0;
transition: all .3s ease-in-out;
}
.wrapper-depositions .slick-dots li.slick-active button {
width: 1.7rem;
border-radius: 10rem;
background: #E30613;
transition: all .3s ease-in-out;
}
@media (max-width: 576px) {
.wrapper-depositions {
height: auto;
padding-bottom: 5rem;
padding-top: 5rem;
}
.title-depositions {
font-size: 56px;
line-height: 76px;
margin-bottom: 6rem;
}
}
.wrapper-faq {
background-color: var(--blue);
margin-top: 10rem;
padding: 15rem 0;
}
.title-faq {
font-size: 4.8rem;
line-height: 5rem;
color: var(--white);
margin-bottom: 10rem;
text-align: center;
}
.wrap-accordion-item {
border-bottom: 1px solid var(--white);
}
.title-accordion {
margin: 0;
}
.title-accordion button {
font-size: 20px;
line-height: 30px;
color: var(--white);
line-height: 1;
margin: 0;
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
border-radius: 0;
padding-right: 4rem;
}
.title-accordion button::after {
content: '';
background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/icons/icon-plus.svg);
background-repeat: no-repeat;
height: 30px;
width: 30px;
background-size: contain;
transition: all ease 0.3s;
position: absolute;
right: 0;
}
.title-accordion button.collapsed::after {
content: '';
background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/icons/icon-plus.svg);
background-repeat: no-repeat;
background-size: contain;
height: 30px;
width: 30px;
transition: all ease 0.3s;
transform: rotate(45deg);
}
.title-accordion .btn-link.focus,
.title-accordion .btn-link:focus,
.title-accordion button:hover {
text-decoration: none;
color: var(--white);
}
.body-accordion {
padding: 0 0 50px;
font-size: 16px;
line-height: 21px;
color: #C7C7C7;
}
@media (max-width: 576px) {
.wrapper-faq {
margin-top: 0;
padding: 8rem 0;
}
.title-faq {
font-size: 3.2rem;
line-height: 4rem;
margin-bottom: 6rem;
}
.title-accordion button {
font-size: 1.8rem;
line-height: 2.2rem;
padding: 25px 0;
}
.body-accordion {
padding: 20px 0 50px;
font-size: 1.4rem;
line-height: 2rem
}
}
.wrapper-black-friday {
background-color: var(--black);
height: 10rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 5;
}
.wrapper-black-friday h2 {
color: white;
font-size: 4.8rem;
font-weight: var(--base-font-weight-bold);
margin: 0 5rem;
}
.wrapper-black-friday img {
height: 13.5rem;
margin: 0 3rem;
}
@media (max-width: 576px) {
.wrapper-black-friday {
padding: 0 1.5rem;
justify-content: space-between;
}
.wrapper-black-friday h2 {
font-size: 2.4rem;
margin: 0 ;
}
}
.wrapper-banner-blog {
height: 25rem;
position: relative;
background-color: #E9EBF6;
}
.wrap-title-banner-blog {
height: 25rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.wrap-title-banner-blog h1 {
font-weight: var(--base-font-weight-light);
font-size: 7.2rem;
line-height: 8rem;
text-align: center;
color: var(--blue);
}
.image-blog {
width: 100%;
margin: 6rem auto;
}
.image-blog img {
width: 100%;
height: auto;
}
.wrapper-card-articles {
margin-top: 15rem;
}
.card-resume-article {
height: auto;
width: 100%;
margin-bottom: 7rem;
}
.card-resume-article:hover .card-img-article img {
transition: all 0.3s ease-in-out;
transform: scale(1.1);
}
.card-resume-article.tags {
margin-bottom: 13rem;
}
.card-resume-article.tags .card-img-article {
height: 27rem;
}
.card-resume-article.tags h2 {
font-size: 2.4rem;
line-height: 3rem;
height: 6rem;
}
.card-img-article {
position: relative;
height: 41rem;
overflow: hidden;
border-radius: 3px;
}
.card-img-article img {
width: 100%;
height: 41rem;
object-fit: cover;
object-position: center;
transition: all 0.3s ease-in-out;
}
.card-resume-article h2 {
font-weight: var(--base-font-weight-light);
font-size: 3.6rem;
line-height: 4.7rem;
color: var(--blue);
margin-top: 2rem;
margin-bottom: 2rem;
height: 10rem;
}
.wrap-author {
display: flex;
align-items: center;
}
.wrap-author img {
border-radius: 50%;
}
.wrap-infos-author {
display: flex;
align-items: baseline;
margin-left: 1rem;
font-size: 16px;
line-height: 32px;
}
.page-blog-single .wrap-infos-author h4,
.wrap-infos-author h4 {
font-size: 16px;
line-height: 20px;
margin: 0;
color: var(--blue);
}
.wrap-infos-author span {
color: rgba(51, 51, 51, 0.5);
margin-left: 1rem;
text-transform: capitalize;
} .wrap-header-blog-single {
background: #F5F9FC;
display: flex;
height: 21rem;
align-items: center;
margin-top: 12rem;
margin-bottom: 8rem;
text-align: left;
}
.wrap-header-blog-single .title-single {
font-size: 3.5rem;
line-height: 4rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
width: 70%;
}
.page-blog-single p {
font-size: 2rem;
line-height: 3.2rem;
color: #333333;
margin-bottom: 5rem;
}
.page-blog-single p.date {
font-size: 16px;
line-height: 32px;
text-transform: capitalize;
color: rgba(51, 51, 51, 0.5);
}
.page-blog-single h1,
.page-blog-single h2,
.page-blog-single h3,
.page-blog-single h4,
.page-blog-single h5,
.page-blog-single h6 {
font-weight: var(--base-font-weight-light);
color: var(--blue);
margin-bottom: 5rem;
}
.page-blog-single h1 {
font-size: 4.8rem;
line-height: 5.2rem;
}
.page-blog-single h2 {
font-size: 4rem;
line-height: 4.4rem;
}
.page-blog-single h3 {
font-size: 3.2rem;
line-height: 3.6rem;
}
.page-blog-single h4 {
font-size: 2.4rem;
line-height: 2.8rem;
}
.page-blog-single h5 {
font-size: 2rem;
line-height: 2.4rem;
}
.page-blog-single .wrapper-banner {
margin-bottom: 6rem;
height: 54rem;
}
.page-blog-single .wrapper-banner .image-banner {
height: 54rem;
}
.page-blog-single ul {
margin-bottom: 5rem;
}
.page-blog-single ul li {
margin-bottom: 2rem;
}
.page-blog-single figcaption {
text-align: center;
font-style: italic;
font-size: 1.6rem;
}
.page-blog-single blockquote {
padding-left: 3rem;
position: relative;
font-size: 2rem;
}
.page-blog-single blockquote::before {
content: '';
width: 2px;
height: 100%;
background-color: var(--blue);
position: absolute;
top: 0;
left: 0;
}
.title-tag {
font-size: 6.4rem;
line-height: 7rem;
color: var(--blue);
margin-top: 4rem;
margin-bottom: 8rem;
text-align: center;
}
@media (max-width: 576px) {
.wrapper-banner-blog {
height: 15rem;
}
.wrap-title-banner-blog {
height: 15rem;
}
.wrap-title-banner-blog h1 {
font-size: 5.2rem;
line-height: 6.4rem;
}
.image-blog {
margin: 3rem auto;
}
.wrapper-card-articles {
margin-top: 8rem;
}
.card-resume-article {
margin-bottom: 5rem;
}
.card-resume-article.tags {
margin-bottom: 8rem;
}
.card-resume-article.tags .card-img-article {
height: 20rem;
}
.card-img-article {
height: 34rem;
}
.card-img-article img {
height: 34rem;
}
.card-resume-article h2 {
font-weight: var(--base-font-weight-light);
font-size: 2.4rem;
line-height: 3.2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
height: 8rem;
}
.page-blog-single .wrap-infos-author h4,
.wrap-infos-author h4 {
font-size: 14px;
line-height: 20px;
margin: 0;
color: var(--blue);
} .wrap-header-blog-single {
height: 14rem;
justify-content: center;
margin-top: 6rem;
margin-bottom: 4rem;
}
.wrap-header-blog-single .title-single {
font-size: 2.8rem;
line-height: 3.4rem;
width: 100%;
text-align: center;
}
.page-blog-single p {
font-size: 1.6rem;
line-height: 2.2rem;
margin-bottom: 3rem;
}
.page-blog-single p.date {
font-size: 14px;
line-height: 22px;
}
.page-blog-single h1,
.page-blog-single h2,
.page-blog-single h3,
.page-blog-single h4,
.page-blog-single h5,
.page-blog-single h6 {
margin-bottom: 3rem;
}
.page-blog-single h1 {
font-size: 4.8rem;
line-height: 5.2rem;
}
.page-blog-single h2 {
font-size: 4rem;
line-height: 4.4rem;
}
.page-blog-single h3 {
font-size: 3.2rem;
line-height: 3.6rem;
}
.page-blog-single h4 {
font-size: 2.4rem;
line-height: 2.8rem;
}
.page-blog-single h5 {
font-size: 2rem;
line-height: 2.4rem;
}
.page-blog-single .wrapper-banner {
margin-bottom: 3rem;
height: 34rem;
}
.page-blog-single .wrapper-banner .image-banner {
height: 34rem;
}
.page-blog-single .wp-block-image:not(.is-style-rounded) img {
height: auto;
}
.page-blog-single ul {
margin-bottom: 3rem;
}
.page-blog-single ul li {
margin-bottom: 1rem;
}
.page-blog-single figcaption {
font-size: 1.4rem;
}
.page-blog-single blockquote {
padding-left: 1.5rem;
font-size: 1.8rem;
}
.title-tag {
font-size: 4.2rem;
line-height: 5.2rem;
margin-top: 2rem;
margin-bottom: 4rem;
}
}
.wrapper-page-products {
padding: 0;
height: 100vh;
}
.wrap-page-product {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: 105% 100%;
background-position: center;
transition: all 0.4s ease-in-out;
}
.wrap-page-product:hover .wrap-page-product-title {
transform: translateX(15px);
transition: all 0.3s ease-in-out;
}
.wrap-page-product:hover .image-page-product {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.wrap-page-product:hover {
background-position: 1%  ;
transition: all 0.3s ease-in-out;
}
.wrap-page-product.quantum { background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/products/menu/bg-colchao-quantum.jpg); }
.wrap-page-product.rami-black { background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/products/menu/bg-colchao-rami-black.jpg); }
.wrap-page-product.travesseiros { background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/products/menu/bg-travesseiros.jpg); }
.wrap-page-product.kenkobio { background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/products/menu/bg-aparelho-terapeutico-eletromagentico-kenkobio.jpg); }
.wrap-page-product-title {
margin-top: 20rem;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: all 0.4s ease-in-out;
position: relative;
}
.category-page-product {
font-weight: var(--base-font-weight-light);
font-size: 2.4rem;
line-height: 1rem;
color: var(--white);
}
.title-page-product {
font-weight: var(--base-font-weight-light);
font-size: 4.8rem;
line-height: 4.8rem;
color: var(--white);
}
.image-page-product {
transition: all 0.4s ease-in-out;
position: absolute;
bottom: 1rem;
right: 0;
width: 100%;
}
@media (min-width: 1400px) { 
.image-page-product {
width: 70%;
}
.wrap-page-product.kenkobio  .image-page-product,
.wrap-page-product.travesseiros  .image-page-product {
bottom: -11rem;
width: 100%;
}
.wrap-page-product.travesseiros .image-page-product {
width: 100%;
}
}
.badge-coming {
font-size: 14px;
letter-spacing: 0.01em;
color: #7D98FF;
border: 1px solid #7D98FF;
border-radius: 4rem;
position: absolute;
top: -4rem;
padding: 0 1rem;
height: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper-content-feature-product {
margin-bottom: 8rem;
}
.wrap-content-feature-product {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
max-height: 46.7rem;
}
.title-content-feature-product {
font-size: 3.6rem;
line-height: 3.5rem;
margin-bottom: 3.5rem;
}
.description-content-feature-product {
font-size: 2.4rem;
line-height: 3.6rem;
color: var(--blue);
}
.image-content-feature-product {
max-height: 46.7rem;
width: 100%;
object-fit: contain;
} .wrap-feature-size {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrap-feature-size img {
max-width: 19rem;
}
.list-sizes {
list-style: none;
margin: 5rem 0 10rem ;
padding: 0;
}
.list-sizes--item {
font-size: 1.6rem;
color: var(--blue);
}
.wrap-feature-sizes-infos.first {
border-top: 1px solid #C1C4D7;
}
.wrap-feature-sizes-infos {
border-bottom: 1px solid #C1C4D7;
padding-top: 3rem;
padding-bottom: 3rem;
display: flex;
}
.wrap-info-size {
width: 65%;
padding-left: 2rem;
padding-right: 2rem;
}
.wrap-info-size.add {
width: 35%;
border-left: 1px solid #C1C4D7;
}
.wrap-info-size h5 {
font-size: 1.8rem;
line-height: 2.4rem;
margin-bottom: 1rem;
color: var(--blue);
font-weight: var(--base-font-weight-bold);
}
.wrap-info-size p {
font-size: 1.6rem;
line-height: 2.4rem;
color: var(--blue);
font-weight: var(--base-font-weight-light);
margin-bottom: 1.6rem;
}
.wrapper-quality {
margin-bottom: 13rem;
margin-top: 13rem;
height: 51rem;
}
.wrap-quality-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.wrap-quality-content h2 {
font-weight: var(--base-font-weight-light);
font-size: 9.5rem;
line-height: 7rem;
color: var(--blue);
margin-bottom: 7rem;
}
.wrap-quality-content p {
font-size: 2.4rem;
line-height: 3.6rem;
color: var(--gray-darker);
margin-bottom: 2rem;
}
.wrapper-content-hero {
margin-bottom: 13rem;
height: 57rem;
background-color: var(--blue);
margin-left: -15px;
margin-right: -15px;
}
.wrap--content-hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 50%;
margin: 0 auto;
position: relative;
}
.image-colchao {
position: absolute;
right: -50vw;
bottom: -130px;
z-index: 2;
transform: translateX(-40%);
width: 40vw;
}
.image-colchao.magnetico {
bottom: -170px;
transform: translateX(-30%);
}
.wrap--content-hero p {
font-size: 2.4rem;
line-height: 3.6rem;
color: var(--white);
margin-bottom: 2rem;
}
.wrap-content-hero-images  {
position: relative;
overflow: hidden;
}
.wrap-content-hero-images img {
width: 100%;
height: 57rem;
object-fit: cover;
}
.carousel-quality-images .slick-slide img {
width: 100%;
height: 36rem;
object-fit: cover;
}
.carousel-quality-images .slick-slide {
margin: 0 2rem;
width: 260px;
}
.slider__counter {
width: 16rem;
margin: 4rem 0;
display: flex;
justify-content: space-between;
font-size: 1.8rem;
line-height: 1;
font-weight: var(--base-font-weight-lighter);
color: var(--gray-darker);
position: relative;
}
.slider__counter::after {
content: '';
width: 65%;
height: .5px;
background-color: #D0D6DA;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.carousel-quality-images button.slick-next.slick-arrow,
.carousel-quality-images button.slick-prev.slick-arrow {
position: absolute;
bottom: -1rem;
left: 20rem;
background-color: transparent;
background-repeat: no-repeat;
border: none;
font-size: 0;
width: 4.5rem;
height: 4.5rem;
}
.carousel-quality-images button.slick-prev.slick-arrow {
background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/icons/arrow-carousel.svg);
}
.carousel-quality-images button.slick-next.slick-arrow {
background-image: url(//colchoesziff.com.br/wp-content/themes/ziff/assets/images/icons/arrow-carousel.svg);
left: 25rem;
transform: rotateZ(180deg);
bottom: -1.5rem;
}
.carousel-quality-images button.slick-prev.slick-arrow:hover,
.carousel-quality-images button.slick-next.slick-arrow:hover {
opacity: 0.7;
}
.carousel-quality-images button.slick-prev.slick-arrow:active,
.carousel-quality-images button.slick-prev.slick-arrow:focus,
.carousel-quality-images button.slick-next.slick-arrow:active,
.carousel-quality-images button.slick-next.slick-arrow:focus {
outline: none;
} .wrap-animation-feature-images {
display: flex;
flex-direction: column;
margin: 18rem 0 0;
width: 100%;
height: 55rem;
}
.wrap-image-camada {
width: 50%;
position: relative;
}
.wrap-image-camada svg {
width: 100%;
}
.wrap-content-camada {
display: flex;
flex-direction: column;
padding: 5rem;
position: absolute;
right: 0;
width: 50%;
top: -5rem;
height: 55rem;
justify-content: center;
opacity: 0;
transition: all 0.3s ease-in-out;
z-index: 1;
}
.category-camada {
font-size: 1.6rem;
line-height: 2.2rem;
color: var(--blue);
font-weight: var(--base-font-weight-light);
}
.title-camada {
font-size: 3.2rem;
line-height: 4rem;
color: var(--blue);
margin-bottom: 2rem;
}
.subtitle-camada {
font-size: 1.8rem;
line-height: 4.5rem;
color: var(--blue);
margin-top: 1rem;
margin-bottom: .5rem;
}
.description-camada {
font-size: 1.8rem;
line-height: 3.6rem;
color: var(--gray-darker);
}
.camada {
transition: all 0.3s ease-in-out;
margin: -4rem 0 0;
cursor: pointer;
}
.camada:hover {
transition: all 0.3s ease-in-out;
}
.camada .camada-hover {
transition: all 0.3s ease-in-out;
}
.camada-02.hover .camada-hover {
fill: #C9DEE3;
transition: all 0.3s ease-in-out;
}
.camada-04.hover .camada-hover {
fill: #D1D1D1;
transition: all 0.3s ease-in-out;
}
.camada-05.hover .camada-hover {
fill: #FEFAE2;
transition: all 0.3s ease-in-out;
}
.camada-06.hover .camada-hover {
fill: #BCDAF7;
transition: all 0.3s ease-in-out;
}
.camada-01.hover .camada-hover,
.camada-03.hover .camada-hover,
.camada-07.hover .camada-hover,
.camada-08.hover .camada-hover {
fill: #FFD2D7;
transition: all 0.3s ease-in-out;
}
.camada-01.hover .wrap-content-camada,
.camada-02.hover .wrap-content-camada,
.camada-03.hover .wrap-content-camada,
.camada-04.hover .wrap-content-camada,
.camada-05.hover .wrap-content-camada,
.camada-06.hover .wrap-content-camada,
.camada-07.hover .wrap-content-camada,
.camada-08.hover .wrap-content-camada {
opacity: 1;
transition: all 0.3s ease-in-out;
}
.camada-01 {z-index: 1;}
.camada-02 {z-index: -1;}
.camada-03 {z-index: -2;}
.camada-04 {z-index: -3;}
.camada-05 {z-index: -4;}
.camada-06 {z-index: -5;}
.camada-07 {z-index: -6;}
.camada-08 {z-index: -7;}
@media (max-width: 576px) {
.wrapper-page-products {
background: var(--blue);
padding-top: 11.1rem;
}
.wrap-animation-feature-images {
margin: 5rem 0 10rem;
width: 100%;
height: 70rem;
}
.wrap-image-camada {
width: 100%;
position: relative;
}
.wrap-content-camada {
padding: 0;
right: 0;
width: 100%;
top: inherit;
height: 0;
bottom: 0;
}
.wrap-page-product {
height: 22vh;
align-items: center;
justify-content: flex-start;
flex-direction: row;
background-size: cover;
}
.wrap-page-product-title {
margin-top: 0;
padding-left: 1.5rem;
}
.category-page-product {
font-size: 1.8rem;
}
.title-page-product {
font-size: 2.8rem;
line-height: 2.4rem;
}
.image-page-product {
bottom: 0;
max-width: 40%;
}
.wrap-page-product.kenkobio  .image-page-product,
.wrap-page-product.travesseiros  .image-page-product {
bottom: -3rem;
}
.wrap-feature-size img {
max-width: 12rem;
}
.wrap-info-size.add {
width: 50%;
}
.wrap-info-size {
width: 50%;
padding-left: 1rem;
padding-right: 1rem;
}
.wrapper-quality {
margin-bottom: 8rem;
margin-top: 8rem;
height: auto;
}
.wrap-quality-content h2 {
font-size: 4.8rem;
line-height: 5rem;
margin-bottom: 5rem;
}
.wrap-quality-content p {
font-size: 1.8rem;
line-height: 2.8rem;
margin-bottom: 5rem;
}
.image-colchao {
display: none;
}
.wrapper-content-hero {
margin-bottom: 0rem;
height: auto;
}
.wrap--content-hero {
width: 75%;
margin: 1rem auto 7rem;
position: relative;
}
.wrap-content-hero-images img {
height: 28rem;
}
.wrap--content-hero p {
font-size: 2rem;
line-height: 3.2rem;
margin-bottom: 2rem;
}
.wrap-content-feature-product {
max-height: initial;
margin-bottom: 3rem;
}
}
.wrap-about-section {
display: flex;
justify-content: center;
align-items: flex-end;
height: calc(100vh - 100px);
max-height: 86.8rem;;
margin-bottom: 13rem;
}
.wrap-about-section h2 {
font-size: 4.8rem;
line-height: 6.2rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
margin-bottom: 10rem;
}
.wrap-about-history {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 76.8rem;
margin-bottom: 18rem;
background-color: #E9EBF6;
}
.wrap-about-history h3 {
font-size: 20rem;
line-height: 20rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
}
.wrap-about-history span {
font-size: 3.6rem;
line-height: 4rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
width: 50%;
margin: 0 auto;
text-align: center;
}
.wrap-about-history-description {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 76.8rem;
padding: 0 4rem 0 8rem;
}
.wrap-about-history-description p {
font-size: 2.4rem;
line-height: 4rem;
font-weight: var(--base-font-weight-light);
color: var(--gray-darker);
margin-bottom: 7rem;
}
.wrap-about-mission {
margin-bottom: 23rem;
}
.wrap-about-mission h3 {
font-size: 3.6rem;
line-height: 3.2rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
margin-bottom: 1.5rem;
}
.wrap-about-mission p {
font-size: 2.4rem;
line-height: 4rem;
font-weight: var(--base-font-weight-light);
color: var(--gray-darker);
margin-bottom: 7rem;
}
@media (max-width: 576px) {
.wrap-about-section {
margin-bottom: 6rem;
}
.img-about {
max-width: 100%;
margin-bottom: 8rem;
}
.wrap-about-section h2 {
font-size: 2.8rem;
line-height: 4.2rem;
margin-bottom: 5rem;
}
.wrap-about-history {
height: 36rem;
margin-bottom: 6rem;
}
.wrap-about-history span {
font-size: 2.8rem;
line-height: 3.6rem;
width: 100%;
}
.wrap-about-history-description {
height: auto;
padding: 0;
}
.wrap-about-history-description p {
font-size: 1.8rem;
line-height: 3.6rem;
margin-bottom: 3rem;
}
.wrap-about-mission {
margin-bottom: 3rem;
}
.wrap-about-mission h3 {
font-size: 2.8rem;
line-height: 3.6rem;
}
.wrap-about-mission p {
font-size: 1.8rem;
line-height: 3.6rem;
margin-bottom: rem;
}
.wrap-about-mission img {
width: 100%;
margin-bottom: 8rem;
}
}
.wrapper-checkout {
padding-top: 13rem;
padding-bottom: 13rem;
padding-left: 13rem;
background-color: #F8F8FD;
}
.wrapper-checkout h1 {
font-size: 7.2rem;
line-height: 7rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
}
.wrapper-checkout span {
font-size: 2.4rem;
line-height: 3rem;
color: var(--blue);
}
.aside-checkout .btn {
margin-top: 8rem;
}
.aside-checkout {
padding-bottom: 13rem;
padding-top: 13rem;
padding-left: 5rem;
padding-right: 5rem;
background-color: #E6E7EE;
position: sticky;
top: 0;
right: 0;
height: 100vh;
transition: all 0.5s ease-in-out;
overflow-y: scroll;
z-index: 9;
}
.aside-checkout.aside-checkout-fixed {
padding-top: 3rem;
transition: all 0.5s ease-in-out;
}
.aside-checkout h3 {
font-size: 3.6rem;
line-height: 4.8rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
margin-bottom: 5rem;
}
.wrap-header-checkout {
margin-bottom: 10rem;
}
.header-step {
display: flex;
align-items: center;
}
.header-step span.step-number {
width: 4rem;
height: 4rem;
background: #EAEAEA;
display: flex;
align-items: center;
justify-content: center;
color: #808294;
border-radius: 50%;
margin-right: 1.5rem;
line-height: 1;
font-size: 1.6rem;
}
.header-step span.step-number.active {
background: var(--orange);
color: var(--white);
}
.header-step  span.step-title {
font-size: 1.8rem;
font-weight: var(--base-font-weight);
}
.content-step {
display: flex;
margin-top: 8rem;
position: relative;
align-items: center;
flex-wrap: wrap;
}
.content-step::after {
content: '';
position: absolute;
top: -5rem;
left: 2rem;
width: 1px;
height: 100%;
background-color: #D9D9D9;
}
.wrap-select {
width: 50%;
justify-content: center;
display: flex;
}
.radio-fake {
display: grid;
grid-template-columns: 1em auto;
gap: 0.5em;
cursor: pointer;
font-size: 16px;
line-height: 24px;
color: var(--blue);
}
.radio-fake:hover input[type="radio"] {
border-color: var(--blue);
}
input[type="radio"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
color: currentColor;
width: 1.8rem;
height: 1.8rem;
border: 0.15rem solid #808294;
border-radius: 50%;
transform: translateY(-0.075rem);
display: grid;
place-content: center;
}
input[type="radio"]::before {
content: "";
width: 1rem;
height: 1rem;
border-radius: 50%;
transform: scale(0);
transition: 320ms transform ease-in-out; background-color: CanvasText;
}
input[type="radio"]:checked {
border-color: var(--blue);
}
input[type="radio"]:checked::before {
transform: scale(1);
}
.wrap-options-control {
display: flex;
flex-direction: column;
margin-left: 8rem;
height: 37rem;
justify-content: center;
}
.wrap-options-control .radio-fake {
gap: 1.5em;
margin-bottom: 1.5rem;
}
.wrap-select.control {
width: 100%;
}
.image-control {
height: 27rem;
}
.wrap-options-box-color {
position: relative;
}
.wrap-select.box-color {
width: 100%;
height: 30rem;
justify-content: space-evenly;
}
.wrap-options-box-color .radio-fake {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wrap-options-box-pillow-cart,
.wrap-options-box-color-cart {
display: none;
justify-content: center;
flex-direction: column;
align-items: center;
font-size: 16px;
line-height: 24px;
color: var(--blue);
}
.wrap-options-box-pillow-cart.active,
.wrap-options-box-color-cart.active {
display: flex;
}
.wrap-options-box-color-cart .box-color {
margin: 0 0 1rem;
}
.wrap-options-box-color:hover .image-color-colchao {
transition: all 0.3s ease-in-out;
transform: translateX(-50%);
opacity: 1;
}
.image-color-colchao {
width: 21rem;
position: absolute;
top: 9rem;
left: 50%;
transition: all 0.2s ease-in-out;
transform: translateX(-50%);
opacity: 0;
}
.box-color {
border-radius: 4px;
width: 7rem;
height: 7rem;
margin: 4rem 0 2rem;
}
.box-color.black-color{background: var(--black); }
.box-color.red-color{ background: var(--red); }
.box-color.brown-color{ background: var(--brown); }
.image-travesseiro {
height: 9rem;
margin: 2rem 0;
}
.wrap-cart-checkout {
margin-top: 5rem;
display: none;
}
.wrap-cart-checkout.active {
display: block;
}
.wrap-cart-checkout .wrap-feature-size.size { display: none; }
.wrap-cart-checkout .wrap-feature-size.size.active{ display: flex; }
.wrap-cart-checkout .wrap-feature-size.box { display: none; }
.wrap-cart-checkout .wrap-feature-size.box.active{ display: flex; }
.wrap-cart-checkout .radio-fake {
align-items: center;
margin-bottom: 4rem;
}
.wrap-cart-checkout .wrap-feature-size {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #737387;
padding-bottom: 4rem;
}
.wrap-options-box-pillow-cart h4,
.wrap-options-box-color-cart h4,
.wrap-cart-checkout .wrap-feature-size h4 {
font-size: 1.8rem;
line-height: 2.4rem;
color: var(--blue);
font-weight: var(--base-font-weight);
}
.wrap-options-box-pillow-cart span,
.wrap-options-box-color-cart span,
.wrap-cart-checkout .wrap-feature-size span {
font-size: 1.6rem;
line-height: 2rem;
color: var(--blue);
font-weight: var(--base-font-weight-light);
}
.wrap-cart-checkout .wrap-feature-size img {
max-width: 17rem;
}
.wrap-cart-checkout .wrap-feature-size .image-control {
height: 14rem;
margin-right: 5rem;
}
.wrap-cart-checkout .wrap-options-box-color-cart .box-color {
margin-right: 4rem;
}
.wrap-cart-checkout .list-sizes {
margin: 1rem 0;
}
.wrap-cart-checkout .wrap-select {
justify-content: space-between;
flex-direction: row-reverse;
}
.wrap-options-box-pillow-cart, 
.wrap-options-box-color-cart {
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
font-size: 16px;
line-height: 24px;
} .wrap-form-checkout {
position: absolute;
left: 0;
top: 0;
background-color: var(--blue);
width: 100%;
padding: 10rem 5rem;
height: 100%;
}
.wrap-form-checkout h4 {
font-size: 2.4rem;
line-height: 2.8rem;
font-weight: var(--base-font-weight-light);
color: var(--white);
margin-bottom: 5rem;
margin-top: 5rem;
}
.wrap-form-checkout label {
font-weight: 500;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 0.01em;
color: #B4B0D2;
}
.wrap-form-checkout .form-control {
background: #F8F8FD;
border: 1px solid #D9DBE4;
box-sizing: border-box;
border-radius: 4px;
height: 5rem;
font-size: 1.6rem;
line-height: 2.4rem;
color: var(--blue);
margin-bottom: 2rem;
padding: 0;
padding-left: 1.5rem;
padding-bottom: 3px;
display: flex;
align-items: center;
}
.wrap-form-checkout textarea.form-control {
height: 15rem;
padding: 1.5rem;
}
.btn-close-resume-cart,
.btn-fixed-mobile-cart {
display: none;
}
@media (max-width: 576px) {
.wrapper-checkout {
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 1.5rem;
}
.wrapper-checkout h1 {
font-size: 4.2rem;
line-height: 5.4rem;
}
.wrapper-checkout span {
font-size: 1.8rem;
line-height: 2.4rem;
}
.wrap-header-checkout {
margin-bottom: 5rem;
}
.content-step {
margin: 3rem 1.5rem;
}
.content-step::after {
display: none;
}
.wrap-select .radio-fake {
display: flex;
gap: unset;
grid-template-columns: unset;
}
.wrap-options-control .radio-fake {
align-items: center;
text-indent: .7rem;
}
.wrap-select .wrap-feature-size img {
max-width: 12rem;
}
.list-sizes {
margin: 2rem 0 5rem;
}
.wrap-options-control {
margin-left: 2rem;
height: 30rem;
}
.image-control {
height: 25rem;
}
.wrap-select.box-color {
height: 20rem;
justify-content: space-between;
}
.image-color-colchao {
width: 11rem;
top: 8.5rem;
}
.image-travesseiro {
height: 7rem;
}
.btn-fixed-mobile-cart {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 6rem;
background-color: var(--blue-lighter);
border: none;
color: var(--white);
font-size: 1.8rem;
z-index: 2;
}
.btn-close-resume-cart {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 1rem;
right: 1rem;
width: 5rem;
height: 5rem;
background-color: transparent;
border: none;
color: var(--black);
font-size: 1.8rem;
z-index: 2;
}
.aside-checkout {
padding-top: 3rem;
padding-left: 1.5rem;
position: fixed;
bottom: 0;
top: unset;
height: 0;
opacity: 0;
z-index: 1;
}
.aside-checkout.active {
height: 75rem;
opacity: 1;
transition: all 0.3s ease-in-out;
z-index: 4;
}
.aside-checkout h3 {
font-size: 3.2rem;
line-height: 3.8rem;
}
.aside-checkout .btn {
margin-top: 0;
padding: 0;
height: 6rem;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
border-radius: 0;
}
.wrap-form-checkout {
padding: 3rem;
}
}
.wrapper-contact-component {
margin-bottom: 10rem;
margin-top: 10rem;
}
.wrapper-contact-component .title-contact {
font-size: 4.8rem;
line-height: 5rem;
margin: 0 auto 1.5rem;
font-weight: var(--base-font-weight-light);
text-align: center;
}
.wrap-contact-component {
margin: 5rem auto;
display: flex;
align-items: center;
justify-self: center;
}
.wrap-contact {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
height: 12rem;
}
.wrap-contact.number {
background: var(--gray-light);
color: var(--blue);
font-size: 3.6rem;
line-height: 4rem;
}
.wrap-contact.email {
background: var(--orange);
color: var(--white);
font-size: 2.4rem;
line-height: 4rem;
} .wrapper-contact {
width: 0%;
background-color: #E6E7EE;
position: fixed;
top: 0;
right: 0;
height: 100vh;
z-index: 99999;
padding: 4rem 8rem;
opacity: 0;
overflow-x: auto;
transition: all ease-in-out 500ms;
transform: translateX(150%);
}
.wrapper-contact.show {
transition: all ease-in-out 350ms;
transform: translateX(0);
width: 40%;
opacity: 1;
}
.wrap-contact-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4rem;
}
.btn-icon {
background-color: transparent;
border: .1rem solid var(--blue);
display: flex;
justify-content: center;
align-items: center;
padding: 0;
width: 4.8rem;
position: relative;
height: 4.8rem;
padding: 0;
border-radius: 0.4rem;
transition: all 200ms ease-in;
}
.btn-icon:hover {
background-color: var(--gray-lighter);
border-color: var(--gray-lighter);
transition: all 200ms ease-in;
}
.btn-icon:focus,
.btn-icon:active {
outline: none;
box-shadow: none;
}
.title-contact {
font-size: 3.6rem;
line-height: 7rem;
font-weight: var(--base-font-weight-light);
color: var(--blue);
}
.title-form-contact {
font-size: 1.8rem;
line-height: 2.4rem;
color: var(--blue);
margin-bottom: 2rem;
}
.wrapper-contact label {
font-weight: 500;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 0.01em;
color: var(--blue);
}
.form-contact {
margin-bottom: 4rem;
}
.form-contact .form-control {
background: #F8F8FD;
border: 1px solid #D9DBE4;
box-sizing: border-box;
border-radius: 4px;
height: 5rem;
font-size: 1.6rem;
line-height: 2.4rem;
color: var(--blue);
margin-bottom: 2rem;
padding: 0;
padding-left: 1.5rem;
padding-bottom: 3px;
display: flex;
align-items: center;
}
.form-contact textarea.form-control {
height: 15rem;
padding: 1.5rem;
}
.form-contact .btn {
margin-top: 2rem;
border-radius: 4px;
line-height: 20px;
padding: 16px 20px;
}
.checkbox-fake {
display: flex;
align-items: center;
text-indent: 3rem;
cursor: pointer;
}
.checkbox-fake:hover input[type="checkbox"] {
border-color: var(--blue);
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
border-radius: .2rem;
margin: 0;
color: currentColor;
width: 1.8rem;
height: 1.8rem;
border: 0.15rem solid var(--blue);
transform: translateY(-0.075rem);
display: flex;
align-items: center;
justify-content: center;
}
input[type="checkbox"]::before {
content: "";
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='check' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16' style=''%3e%3cpath fill='%23fff' d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z' class=''%3e%3c/path%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 80%;
background-position: center center;
opacity: 0;
transition: 320ms all ease-in-out;
width: 100%;
height: 100%;
}
input[type="checkbox"]:checked {
background-color: var(--blue);
}
input[type="checkbox"]:checked::before {
transition: 320ms all ease-in-out;
opacity: 1;
}
.wrap-infos-contact {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 5rem;
padding: 2rem;
background: #F8F8FD;
border: 1px solid #D9DBE4;
border-radius: 4px;
}
.wrap-infos-contact .link-contact {
font-size: 1.6rem;
line-height: 2.8rem;
color: var(--blue);
}
.wrap-infos-contact .link-contact span {
color: #0DA4F3;
}
.wrapper-contact .list-social {
margin-bottom: 5rem;
}
.wrapper-contact .list-social--item {
margin: 0 0.5rem 0 0;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
.overlay.show {
display: block;
}
@media (max-width: 576px) {
.wrapper-contact-component .title-contact {
font-size: 3.2rem;
line-height: 3.6rem;
margin: 0 auto 1rem;
}
.wrapper-contact.show {
width: 100%;
}
.wrap-contact-component {
flex-direction: column;
}
.wrap-contact {
width: 100%;
height: 10rem;
}
.wrap-contact.number {
font-size: 2.8rem;
line-height: 3.4rem;
}
.wrap-contact.email {
font-size: 2rem;
line-height: 2.4rem;
}
.wrapper-contact {
width: 100%;
padding: 3rem;
}
} 
.wrapper-hero-error {
background-color: var(--white);
height: calc(100vh - 140px);
display: flex;
align-items: center;
justify-content: center;
}
header.header-error {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
header.header-error .title {
font-size: 36rem;
line-height: 1;
color: var(--blue);
font-weight: var(--base-font-weight-lighter);
}
header.header-error p {
font-size: 2rem;
line-height: 2rem;
color: var(--gray-dark);
font-weight: var(--base-font-weight-lighter);
}