/* FRAMEWORK */
* { font-family: 'DM Sans', sans-serif; }
body { background: #f5f5f5; font-family: 'DM Sans', sans-serif; color: #222; font-weight: 400; }
.button { border: 2px solid #e66767; padding: .8rem 2.5rem; font-weight: 700; display: inline-block; transition: .3s; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.button:hover { background: #e66767; color: #fff; }
.title { max-width: 45rem; font-size: 3rem; font-weight: 700; margin-bottom: 1rem; position: relative; left: 50%; margin-left: -22.5rem; }
.subtitle { max-width: 45rem; position: relative; left: 50%; margin-left: -22.5rem; }

/* MASTER */
.whatsapp { position: fixed; width: 4rem; height: 4rem; bottom: 2rem; right: 2rem; background-color: #25d366; color: #fff; border-radius: 50%; text-align: center; transition: .3s; z-index: 999; }
.whatsapp:hover { background: #128c7e; }
.whatsapp svg { font-size: 2rem; margin-top: 1rem; }
.menu-button { display: none; background: #e66767; color: #fff; padding: 1rem .7rem; cursor: pointer; z-index: 1001; border-radius: 1rem; text-align: center; box-sizing: border-box; }
.menu-button svg { margin-left: .2rem; }
.menu-mobile { position: fixed; background: #e66767; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding: 0; margin: 0; z-index: 1000; display: none; }
.menu-mobile .content { height: 100%; display: flex; align-items: center; }
.menu-mobile .content ul { width: 100%; }
.menu-mobile .content ul li { margin: 1rem 0; }
.menu-mobile .content ul li a { font-weight: 700; text-transform: uppercase; margin-bottom: .8rem; font-size: 2rem; color: #fff; }
.header { padding: 2rem 0; display: flex; justify-content: space-between; align-items: center; }
.header .logo { width: 7rem; transition: .3s; }
.header .logo:hover { opacity: .7; }
.header .menu li { display: inline; position: relative; padding: 0 1.2rem; }
.header .menu li a { transition: .3s; font-weight: 500; }
.header .menu li a.active, .header .menu li a:hover { color: #e66767; }
.header .search { width: auto!important; margin: 1rem 0 0 0; display: flex; }
.header .search input { width: 70%!important; }
.header .search .button { padding: .8rem 0; width: 30%!important; }
.header .search .icon { display: none; position: absolute; margin: 20px 20px 0 0; right: 5%; margin-right: 20px; font-size: 20px; }
.header .cart a { display: flex; align-items: center; font-weight: 700; transition: .3s; }
.header .cart a:hover { color: #e66767; }
.header .cart svg { font-size: 2rem; color: #e66767; margin-right: .5rem; }
.page-header { position: relative; background-image: url(../img/bg-page-header.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: #222; padding: 4rem 0; color: #fff; }
.page-header::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgba(0, 0, 0, .1); }
.page-header .width-content { position: relative; }
.page-header h1 { font-size: 3rem; font-weight: 700; }
.footer { border-top: 1px solid #ddd; }
.footer .nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.footer .nav .logo { width: 7rem; }
.footer .nav .menu li { display: inline; position: relative; padding-right: 2.4rem; }
.footer .nav .menu li a { transition: .3s; }
.footer .nav .menu li a:hover { color: #e66767; }
.footer .contacts { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 2rem 0; display: flex; justify-content: space-between; align-items: center; line-height: 1.5; margin: 2rem 0; }
.footer .contacts svg { margin-left: .7rem; font-size: 1.2rem; }
.footer .developer { margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; }
.footer .developer a { font-weight: 700; margin-left: .3rem; }
.footer .developer img { width: 7rem; margin-left: .5rem; }
.footer .developer div { display: flex; align-items: center; }

/* DEFAULT */
.page-home .banners { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100rem; padding: 10rem; box-sizing: border-box; }
.page-home .banners h2 { font-size: 6rem; font-weight: 700; width: 50%; }
.page-home .banners p { font-size: 1.5rem; width: 50%; margin: 1rem 0 2rem 0; }
.page-home .banners .button { font-size: 1.2rem; }
.page-home .info { background: #e66767; background-position: center center; background-size: cover; background-repeat: no-repeat; color: #fff; padding: 4rem; box-sizing: border-box; width: 100rem; margin-bottom: 4rem; }
.page-home .info h2 { font-size: 2.5rem; font-weight: 700; }
.page-home .info p { margin: 1rem auto; }
.page-home .info .button { border-color: #ffff01; }
.page-home .info .button:hover { background: #ffff01; color: #222; }

/* SOBRE */
.page-sobre { margin: 4rem auto 2rem auto; display: flex; flex-wrap: wrap; align-items: center; }
.page-sobre .title, .page-sobre .subtitle { width: 90%; left: 0; margin-left: 0; }
.page-sobre .subtitle { margin-bottom: 2rem; }
.page-sobre img { width: 100%; }

/* PRODUTOS */
.page-produtos { display: flex; flex-wrap: wrap; margin: 4rem auto; }
.page-produtos .width-30 { width: 28%; margin-right: 2%; }
.page-produtos .block { border: 1px solid #ddd; padding: 2rem 1.5rem 1rem 1.5rem; }
.page-produtos .block h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; }
.page-produtos .block ul li a { display: block; margin: 1rem 0; }
.page-produtos .block ul li a svg { color: #e66767; margin-right: .2rem; }
.page-produtos .products { padding: 0; }
.page-produtos .products .items { margin: 0; }
.page-produtos .products .items li { width: 31.33%; }
.page-produtos .pagination { border: 2px solid #e66767; padding: .8rem 2.5rem; font-weight: 700; }
.page-produtos .pagination .page-number { margin: 0 .5rem; color: #e66767; }
.page-produtos .pagination a { transition: .3s; }
.page-produtos .pagination a:hover { color: #e66767; }

/* OFERTAS */
.page-ofertas { padding: 0 !important; }

/* PRODUTO */
.page-produto { padding-top: 2rem; }
.page-produto .infos { display: flex; flex-wrap: wrap; align-items: flex-start; }
.page-produto .infos .slick-prev { left: 50px; top: 70%; z-index: 200; }
.page-produto .infos .slick-prev::before, .page-produto .infos .slick-next::before { font-size: 35px; color: #e66767; }
.page-produto .infos .slick-next { right: 65px; top: 70%; z-index: 200; }
.page-produto .infos .photos img { width: 90%; margin: .5rem 1%; border: 1px solid #ddd; cursor: move; }
.page-produto .infos .photos img.other { width: 21%; height: 7rem; object-fit: cover; cursor: pointer; transition: .3s; }
.page-produto .infos .photos img.other:hover { opacity: .7; }
.page-produto .infos h1 { font-size: 30px; font-weight: 600; }
.page-produto .infos .price { color: #e66767; font-size: 3rem; font-weight: 700; margin: 1rem 0; }
.page-produto .infos .description { line-height: 1.5; margin: 1rem 0 2rem 0; }
.page-produto .infos .description iframe { width: 100%; height: 20rem; margin-bottom: 2rem; }
.page-produto .infos .quantity { width: 3rem; border: 2px solid #e66767; padding: .8rem; margin-right: .5rem; font-weight: 700; }
.page-produto .infos .button { font-size: 1rem; padding: .7rem 2.5rem; }
.page-produto .fixed { position: sticky; top: 0; background: #f5f5f5; padding: 20px 0; }
.products { padding: 4rem 0; }
.products .items { margin: 4rem 0 2rem 0; display: flex; flex-wrap: wrap; text-align: center; }
.products .items li { width: 23%; margin: 0 1% 2rem 1%; transition: .3s; }
.products .items li:hover { color: #e66767; }
.products .items li:hover img { border-color: #e66767; }
.products .items li img { width: 100%; height: 18rem; object-fit: cover; border: 1px solid #ddd; transition: .3s; }
.products .items li h3 { font-weight: 700; font-size: 1.2rem; margin: 1rem auto .5rem 0; line-height: 1.2; }

/* CONTATO */
.form { width: 50rem !important; margin: 4rem auto; }
.form .subtitle { margin-bottom: 2rem; }
.form input, .form textarea { box-sizing: border-box; width: 100%; padding: 1rem 1.5rem; margin: .3rem 0; resize: none; transition: 0.3s; border: 1px solid #ddd; font-family: 'DM Sans', sans-serif; font-size: 1rem; }
.form textarea { height: 10rem; }
.form input:focus, .form textarea:focus { border-color: #e66767; }
.form .button { cursor: pointer; border: 2px solid #e66767; padding: .8rem 2.5rem; }

/* CARRINHO */
.page-carrinho { padding: 0 0 4rem 0; }
.page-carrinho .buttons { display: flex; flex-wrap: wrap; }
.page-carrinho .buttons a { padding: .8rem 0; width: 31.33%; margin: 0 1%; text-align: center; box-sizing: border-box; }