@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

body {overflow-x: hidden;}

.lp-brinquedoteca {font-family: 'Lato', sans-serif; text-align: center; color: #0033C6; font-size: 20px; background-color: #fff; width:100vw; z-index: 2; position: relative; overflow: hidden;}
.lp-brinquedoteca section {position: relative; z-index: 2;}
.lp-brinquedoteca h2 {font-size: 32px; color: #fff; margin: 0 auto; text-transform: uppercase; font-weight: bolder; letter-spacing: 1px; padding: 60px 0 30px 0;}
.orange {color: #E71A3A!important; padding-bottom: 0;}
.blue {color: #ffffff!important; background-color:#e7193b; padding: 20px 0;}
.lp-brinquedoteca .desktop-only {display: block!important;}
.lp-brinquedoteca .mobile-only {display: none!important;}
.lp-brinquedoteca .container-content {width:1065px; margin: 0 auto;}

.lp-brinquedoteca section.menu {background-color:#0033C6;}
.lp-brinquedoteca section.menu .container-content ul {display: flex; justify-content: space-between; padding: 20px 0;}
.lp-brinquedoteca section.menu .container-content li {transition: all 0.25s;}
.lp-brinquedoteca section.menu .container-content li:hover {transform: scale(1.05); }
#linha-vertical { height: 80px; border-right: 1px solid #fff; opacity: 50%;}

.lp-brinquedoteca section.hero {width: 100%; padding: 0; margin: 0;}
.lp-brinquedoteca section.hero img {width: 100%; padding: 0; }

.lp-brinquedoteca section.lp-filters {background-color:#E71A3A;}
.lp-brinquedoteca section.lp-filters .container-content ul {display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 60px;}
.lp-brinquedoteca section.lp-filters .container-content ul li {min-width: 23%; color: #fff; text-transform: uppercase; border: 1px solid #fff; border-radius: 100px; padding: 20px 0;}
.lp-brinquedoteca section.lp-filters .container-content ul li a {color: #fff;  font-weight: bolder; }
.lp-brinquedoteca section.lp-filters .container-content ul li:hover {background-color: #0033C6;}
.lp-filters ul li a:hover {transform: translateY(-10px);}

canvas {position: absolute; z-index: 1; bottom: 0; top: revert!important;} 

.lp-brinquedoteca section.cont-banner .container-content {padding-top: 20px;}
.lp-brinquedoteca section.cont-banner .container-content a img {transition: all 0.25s;}
.lp-brinquedoteca section.cont-banner .container-content a img:hover {transform: scale(1.05); }

.lp-brinquedoteca section.lp-categories {padding: 0; margin: 0;}
.lp-brinquedoteca section.lp-categories ul {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 50px 0;}
.lp-brinquedoteca section.lp-categories ul li a {background-color: #E71A3A; display: block; border-radius: 8px; position: relative; overflow: hidden;}
.lp-brinquedoteca section.lp-categories .info-txt {width: 100%; background-color: #0033C6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bolder; text-align: center; height: 86px; padding: 0 5px; line-height: 1.1; text-transform: uppercase;}
.lp-brinquedoteca section.lp-categories ul li:nth-child(3n) {padding-right: 0!important;}
.lp-brinquedoteca section.lp-categories ul li {width: calc(33% - 3px); padding:0 15px 25px 0; overflow: hidden; position: relative; transition: all 0.25s;}
.lp-brinquedoteca section.lp-categories ul li:hover {transform: scale(1.05); }
.lp-brinquedoteca section.lp-categories ul span {display: table;}

.lp-brinquedoteca section.lp-brand {background-color: #0033c6;}
.lp-brinquedoteca section.lp-brand .container-content ul {display: flex; flex-wrap: wrap; justify-content: space-between; padding:20px 0 60px 0;}
.lp-brinquedoteca section.lp-brand .container-content ul li {padding:0 16px 30px 0;}
.lp-brinquedoteca section.lp-brand .container-content ul li a {border: 4px solid #FFF; overflow: hidden; display: block; border-radius: 100%; background-color: #fff; padding: 10px;transition: all 0.25s;}
.lp-brinquedoteca section.lp-brand .container-content ul li:nth-child(6n) {padding-right: 0!important;}
.lp-brinquedoteca section.lp-brand .container-content ul li a:hover {border: 4px solid #E71A3A;}

    /*----------- ACCORDION ----------------*/

.lp-brinquedoteca section.lp-fac {width: 1160px; margin:0 auto; padding-bottom: 60px;}
.lp-brinquedoteca section.lp-fac .accordion {background-color: #e7193b; color: #fff;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 1em;transition: 0.4s;}
.lp-brinquedoteca section.lp-fac .accordion:hover {background-color: #0033C6;}
.lp-brinquedoteca section.lp-fac .area-faq h2 {color: #fef74e; text-align: center; font-size: 48px;margin-bottom: -11px; font-weight: bold; }
.lp-brinquedoteca section.lp-fac .area-faq p {color: #fef74e; text-align: center; font-size: 0.8em; padding: 20px 0px;}
.lp-brinquedoteca section.lp-fac .active, .hotsite-area-8 .accordion:hover {background-color: #E83C76;}
.lp-brinquedoteca section.lp-fac .accordion:after {content: '\002B';color: #fff;font-weight: bold;float: right;margin-left: 5px;}
.lp-brinquedoteca section.lp-fac .active:after {content: "\2212";}
.lp-brinquedoteca section.lp-fac .panel {font-size: 0.8em; color:#494848; padding: 0 18px; max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out; background-color: #fff;}
.lp-brinquedoteca section.lp-fac .panel p {color: #494848; text-align: left; font-size: 14px; padding: 20 0; padding-bottom: 20px;}

/* Styles mobile */
@media screen and (max-width: 768px) {
.lp-brinquedoteca section.container-content {width: 100%; padding: 0 20px;}
.lp-brinquedoteca h2 {font-size: 22px; padding: 40px 0 20px 0;}
.lp-brinquedoteca .desktop-only {display: none!important;}
.lp-brinquedoteca .mobile-only {display: block!important;}
canvas {display: none!important;}

section.menu .container-content{width: 100%;}
section.menu .container-content img {width: 85%;}
#linha-vertical { height: 30px; border-right: 1px solid #fff; opacity: 50%;}

.lp-brinquedoteca section.hero {padding: 0; margin: 0;}

.lp-brinquedoteca section.menu .container-content ul {justify-content: center; flex-wrap: wrap;}

.lp-brinquedoteca section.lp-filters .container-content {width: 100%; padding-bottom: 60px;}
.lp-brinquedoteca section.lp-filters .container-content ul {width: 100%; display: table; padding: 0 20px; }
.lp-brinquedoteca section.lp-filters .container-content ul li{margin-top: 20px;}

.lp-brinquedoteca section.cont-banner .container-content {padding-top: 0px;}
.lp-brinquedoteca section.cont-banner .container-content {width: 100%;}
.lp-brinquedoteca section.cont-banner .container-content img {width: 100%;}

.lp-brinquedoteca section.lp-categories .container-content {width: 100%;}
.lp-brinquedoteca section.lp-categories .container-content ul{ display: block; padding: 20px 0;}
.lp-brinquedoteca section.lp-categories .container-content ul li {width: 100%; margin: 0 auto; padding: 0 15px!important; margin-bottom: 20px;}
.lp-brinquedoteca section.lp-categories ul li:nth-child(3n) {padding: 0 15px!important;}

.lp-brinquedoteca section.lp-brand .container-content {width: 100%;}
.lp-brinquedoteca section.lp-brand .container-content ul {padding: 0 10px;}
.lp-brinquedoteca section.lp-brand .container-content ul li {padding: 0px; margin-bottom: 20px;}

.lp-brinquedoteca section.lp-fac {width: 100%;}
.lp-brinquedoteca section.lp-fac .container-content {width: 100%;}

.container-tetris {width: 100%;}

}