* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
body {
  background-color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
a {
  color: #FFFFFF;
  text-decoration: none;
}
p {
  font-size: 1em;
  line-height: 1.8em;
  letter-spacing: 0.33em;
}
h1, h2 {
  color: #FFF;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
}
#container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#move, .show {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  width: 100%;
  height: auto;
}
#move.anim {
  transition: all 0.5s;
}
section {
  position: relative;
  padding: 25px;
  width: 100vw;
  height: 100vh;
}
section:not(section#cores) {
  display: flex;
  flex-direction: column;
}
section.ativo {
  width: 100vw;
  height: 100vh;
}
.hide {
  display: none !important;
}
/*.ativo .logos, .ativo header {
  display: flex !important;
}*/
.desktop {
  display: none !important;
}
.mobile {
  display: block !important;
}

/* Main */
main, .main {
  display: flex;
  height: auto;
  flex-direction: column;
  flex: 1 1 100%;
}
.main {
  height: calc(100% - 38px);
  margin-top: 38px;
}
#cores .main {
  height: calc(100% - 70px);
  margin-top: 70px;
}
#cores #comumCores .main {/* Elementos em position absolute */
  height: calc(100% - 95px);
  margin-top: 95px;
  z-index: 0;
}
video {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}
.ativo video#video-inicio {
  display: block;
  top: calc(50% - 436px);
  right: calc(50% - 246px);
}
#inicio footer, #catalogo .main, #saiba-mais .main {
  z-index: 1;
}
#inicio, #cromopoemas, #catalogo, #glossario {
  overflow: hidden;
}
button {
  border: 0;
  cursor: pointer;
}

nav.principal {
  width: 100%;
  position: fixed;
  top: calc(25px + 32px + 20px);
  left: 0;
  display: flex;
  padding: 0 25px;
  justify-content: center;
  z-index: 1000;
}
nav.principal ul {
  display: flex;
  column-gap: 12px;
  justify-content: center;
}
nav.principal a {
  font-size: 1em;
  line-height: 1.75em /* 24px */;
  letter-spacing: 0.25em;
  color: #C5C5C5;
  text-transform: uppercase;
  padding: 8px 0;
}
nav.principal a.clicado {
  color: #FFFFFF;
}

/* Remover classes para reativar logo Dorina */
li.dorina { visibility: hidden; }
li.coral { order: -1; }

/* Home */
#inicio  {
  background-image: url(../img/bg/mobile/bg-home.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
#inicio .header {
  justify-content: flex-start;
}
#inicio a.logo {
  width: 68.22%;
}
#inicio footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#inicio .logos {
  width: 30.90%;
  align-items: flex-start;
}
#inicio .logos ul {
  width: 100%;
}
.box {
  display: flex;
  height: 62px;
  margin-top: 8px;
  padding: 0 50px;
  cursor: pointer;
}
.arrow.start {
  margin-top: 35px;
  animation-name: start;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes start {
  from {margin-top: 0}
  to {margin-top:35px;}
}

/* CromoPoemas */
#cromopoemas {
  background-color: #000;
}
#cromopoemas .main {
  display: grid;
}
#cromopoemas h1 {
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.33em;
  text-transform: uppercase;
  margin-top: 5px;
}
#cromopoemas .texto p {
  line-height: 1.25em;
  letter-spacing: 0.33em;
  margin-bottom: 8px;
}
#cromopoemas .texto p:last-of-type {
margin-bottom: 0px;
}
#cromopoemas ul {
  width: 100%;
}
#cromopoemas ul button {
  margin: 0 auto;
}
.wrapper {
  justify-content: center;
  width: calc(100% + 20px);
  max-width: calc(100% + 20px);
  margin: 5px 0 5px -10px;
}
.aspect-ratio {
  position: relative;
  max-width: 100%;
  height: auto;
}
.aspect-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.aspect-ratio-16-9 {
  padding-top: 56.25% !important;
}

/* Catálogo */
#cat {
  flex: 1 0 auto;
}
#cat > section {
  position: absolute;
}
#catalogo, #cat, #familias {
  padding: 0;
}
#catalogo {
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
#catalogo header .logos {
  display: none;
}
#catalogo .texto {
  text-align: center;
  width: 70%;
  margin: 20px auto;
}
.catalogo p {
  line-height: 1.4em;
  letter-spacing: 0.45em;
  text-align: center;
  margin-bottom: 1em;
}
nav.catalogo {
  width: 100%;
  height: 100%;
  padding: 10px 0;
}
.catalogo ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
  grid-column-gap: 8%;
  grid-row-gap: 3%;
  width: 82%;
  margin: 0 auto;
}
.catalogo ul li {
  height: 100%;
}
.catalogo ul a {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.catalogo ul div {
  height: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: transparent;
}
.catalogo ul p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  /*line-height: 2.7em;*/
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  min-height: 27px;
  line-height: 1.2em;
  padding-bottom: 3px;
}
.catalogo p.alturaLinha {
  line-height: 1.2em;
  padding-bottom: 3px;
}
/* Cores usadas no catálogo e STRONG nas páginas de cores */
/* Cores seleçãp de famílias e seus brailes */
li.brancos p, li.brancos div { color: #E5E9E6; }
li.brancos div { background-image: url(../img/brailes/mobile/familias/brancos.png); }
li.vermelhos p, li.vermelhos div { color: #CF4D3D }
li.vermelhos div { background-image: url(../img/brailes/mobile/familias/vermelhos.png); }
li.laranjas p, li.laranjas div { color: #F8A157; }
li.laranjas div { background-image: url(../img/brailes/mobile/familias/laranjas.png); }
li.amarelos p, li.amarelos div { color: #FFD967 }
li.amarelos div { background-image: url(../img/brailes/mobile/familias/amarelos.png); }
li.limas p, li.limas div { color: #D9DCB8 }
li.limas div { background-image: url(../img/brailes/mobile/familias/limas.png); }
li.verdes p, li.verdes div { color: #53A24F; }
li.verdes div { background-image: url(../img/brailes/mobile/familias/verdes.png); }
li.turquesas p, li.turquesas div { color: #1088A3 }
li.turquesas div { background-image: url(../img/brailes/mobile/familias/turquesas.png); }
li.azuis p, li.azuis div { color: #83A8C1 }
li.azuis div { background-image: url(../img/brailes/mobile/familias/azuis.png); }
li.violetas p, li.violetas div { color: #63406E }
li.violetas div { background-image: url(../img/brailes/mobile/familias/violetas.png); }
li.neutros-frios p, li.neutros-frios div { color: #D1CEC8 }
li.neutros-frios div { background-image: url(../img/brailes/mobile/familias/neutros-frios.png); }
li.neutros-quentes p, li.neutros-quentes div { color: #C1B38B }
li.neutros-quentes div { background-image: url(../img/brailes/mobile/familias/neutros-quentes.png); }
li.dourados p, li.dourados div { color: #D7A262 }
li.dourados div { background-image: url(../img/brailes/mobile/familias/dourados.png); }

/* Cores Família Brancos e seus brailes */
li.branco-gelo p, li.branco-gelo div, #branco-gelo strong { color: #DCD8D1 }
li.branco-gelo div { background-image: url(../img/brailes/mobile/familias/brancos/branco-gelo.png); }
li.branco-gatinho p, li.branco-gatinho div, #branco-gatinho strong { color: #E6E1D9 }
li.branco-gatinho div { background-image: url(../img/brailes/mobile/familias/brancos/branco-gatinho.png); }
li.bala-coco p, li.bala-coco div { color: #E5E9E6 }
li.bala-coco div { background-image: url(../img/brailes/mobile/familias/brancos/bala-coco.png); }
li.nevasca p, li.nevasca div, #nevasca strong { color: #E5E9E6 }
li.nevasca div { background-image: url(../img/brailes/mobile/familias/brancos/nevasca.png); }
li.pipoca-salgada p, li.pipoca-salgada div, #pipoca-salgada strong { color: #F7F2E5 }
li.pipoca-salgada div { background-image: url(../img/brailes/mobile/familias/brancos/pipoca-salgada.png); }

/* Cores Família Vermelhos e seus brailes */
.pimenta-ardida p, li.pimenta-ardida div { color: #B02826; }
li.pimenta-ardida div { background-image: url(../img/brailes/mobile/familias/vermelhos/pimenta-ardida.png); }
li.vermelho-cardinal p, li.vermelho-cardinal div, #vermelho-cardinal strong { color: #CF4D3D }
li.vermelho-cardinal div { background-image: url(../img/brailes/mobile/familias/vermelhos/vermelho-cardinal.png); }
li.vermelho-goya p, li.vermelho-goya div, #vermelho-goya strong { color: #5D2927 }
li.vermelho-goya div { background-image: url(../img/brailes/mobile/familias/vermelhos/vermelho-goya.png); }
li.desfile-carnaval p, li.desfile-carnaval div, #desfile-carnaval strong { color: #C9464F }
li.desfile-carnaval div { background-image: url(../img/brailes/mobile/familias/vermelhos/desfile-carnaval.png); }
li.rosa-acai p, li.rosa-acai div, #rosa-acai strong { color: #C56E8A }
li.rosa-acai div { background-image: url(../img/brailes/mobile/familias/vermelhos/rosa-acai.png); }
.rosa-cintilante p, li.rosa-cintilante div { color: #ECA8B9; }
li.rosa-cintilante div { background-image: url(../img/brailes/mobile/familias/vermelhos/rosa-cintilante.png); }

/* Cores Família Laranjas e seus brailes */
li.fiesta p, li.fiesta div, #fiesta strong { color: #FFAF3E }
li.fiesta div { background-image: url(../img/brailes/mobile/familias/laranjas/fiesta.png); }
li.laranja-citrico p, li.laranja-citrico div, #laranja-citrico strong { color: #F8A157 }
li.laranja-citrico div { background-image: url(../img/brailes/mobile/familias/laranjas/laranja-citrico.png); }
li.laranja-neon p, li.laranja-neon div, #laranja-neon strong { color: #FA7A35 }
li.laranja-neon div { background-image: url(../img/brailes/mobile/familias/laranjas/laranja-neon.png); }
li.laranja-imperial p, li.laranja-imperial div, #laranja-imperial strong { color: #E7712F }
li.laranja-imperial div { background-image: url(../img/brailes/mobile/familias/laranjas/laranja-imperial.png); }
li.laranja-maracatu p, li.laranja-maracatu div, #laranja-maracatu strong { color: #E7622F }
li.laranja-maracatu div { background-image: url(../img/brailes/mobile/familias/laranjas/laranja-maracatu.png); }
li.ceramica p, li.ceramica div { color: #A75B34 }
li.ceramica div { background-image: url(../img/brailes/mobile/familias/laranjas/ceramica.png); }

/* Cores Família Amarelos e seus brailes */
li.amarelo-canario p, li.amarelo-canario div, #amarelo-canario strong { color: #FFD967 }
li.amarelo-canario div { background-image: url(../img/brailes/mobile/familias/amarelos/amarelo-canario.png); }
li.amarelo-frevo p, li.amarelo-frevo div, #amarelo-frevo strong { color: #FEBF37 }
li.amarelo-frevo div { background-image: url(../img/brailes/mobile/familias/amarelos/amarelo-frevo.png); }
li.curry-dourado p, li.curry-dourado div, #curry-dourado strong { color: #DEB349 }
li.curry-dourado div { background-image: url(../img/brailes/mobile/familias/amarelos/curry-dourado.png); }
li.sino p, li.sino div, #sino strong { color: #EFD077 }
li.sino div { background-image: url(../img/brailes/mobile/familias/amarelos/sino.png); }
li.vanilla p, li.vanilla div, #vanilla strong { color: #F8D8A5 }
li.vanilla div { background-image: url(../img/brailes/mobile/familias/amarelos/vanilla.png); }
li.marfim p, li.marfim div, #marfim strong { color: #ECDBBB }
li.marfim div { background-image: url(../img/brailes/mobile/familias/amarelos/marfim.png); }

/* Cores Família Limas e seus brailes */
li.verde-vale p, li.verde-vale div, #verde-vale strong { color: #D6DEA6 }
li.verde-vale div { background-image: url(../img/brailes/mobile/familias/limas/verde-vale.png); }
li.capim-limao p, li.capim-limao div, #capim-limao strong { color: #D9DCB8 }
li.capim-limao div { background-image: url(../img/brailes/mobile/familias/limas/capim-limao.png); }
li.refresco p, li.refresco div, #refresco strong { color: #C5DE9E }
li.refresco div { background-image: url(../img/brailes/mobile/familias/limas/refresco.png); }
li.verde-limao p, li.verde-limao div, #verde-limao strong { color: #ABB92F }
li.verde-limao div { background-image: url(../img/brailes/mobile/familias/limas/verde-limao.png); }
li.mousse-azeitona p, li.mousse-azeitona div, #mousse-azeitona strong { color: #A3A78D }
li.mousse-azeitona div { background-image: url(../img/brailes/mobile/familias/limas/mousse-azeitona.png); }
li.silencio-inverno p, li.silencio-inverno div, #silencio-inverno div { color: #C4B591 }
li.silencio-inverno div { background-image: url(../img/brailes/mobile/familias/limas/silencio-inverno.png); }

/* Cores Família Verdes e seus brailes */
.verde-timbalada p, li.verde-timbalada div { color: #53A24F; }
li.verde-timbalada div { background-image: url(../img/brailes/mobile/familias/verdes/verde-timbalada.png); }
li.verde-nilo p, li.verde-nilo div, #verde-nilo strong { color: #74A75F }
li.verde-nilo div { background-image: url(../img/brailes/mobile/familias/verdes/verde-nilo.png); }
li.doce-folha p, li.doce-folha div, #doce-folha strong { color: #A1C777 }
li.doce-folha div { background-image: url(../img/brailes/mobile/familias/verdes/doce-folha.png); }
li.verde-kiwi p, li.verde-kiwi div, #verde-kiwi strong { color: #919E54 }
li.verde-kiwi div { background-image: url(../img/brailes/mobile/familias/verdes/verde-kiwi.png); }
li.jardim-secreto p, li.jardim-secreto div, #jardim-secreto strong { color: #A7B9A5 }
li.jardim-secreto div { background-image: url(../img/brailes/mobile/familias/verdes/jardim-secreto.png); }
li.mate p, li.mate div, #mate strong { color: #D2E7C3 }
li.mate div { background-image: url(../img/brailes/mobile/familias/verdes/mate.png); }
li.orvalho p, li.orvalho div, #orvalho strong { color: #E9EED7 }
li.orvalho div { background-image: url(../img/brailes/mobile/familias/verdes/orvalho.png); }

/* Cores Família Violetas e seus brailes */
li.festa-uva p, li.festa-uva div, #festa-uva strong { color: #63406E }
li.festa-uva div { background-image: url(../img/brailes/mobile/familias/violetas/festa-uva.png); }
li.lilas-primavera p, li.lilas-primavera div, #lilas-primavera strong { color: #C8B7D6 }
li.lilas-primavera div { background-image: url(../img/brailes/mobile/familias/violetas/lilas-primavera.png); }
li.perfume-lavanda p, li.perfume-lavanda div, #perfume-lavanda strong { color: #DFE2E7 }
li.perfume-lavanda div { background-image: url(../img/brailes/mobile/familias/violetas/perfume-lavanda.png); }
li.laco-cetim p, li.laco-cetim div, #laco-cetim strong { color: #D8D5E0 }
li.laco-cetim div { background-image: url(../img/brailes/mobile/familias/violetas/laco-cetim.png); }
li.bolo-festa p, li.bolo-festa div, #bolo-festa strong { color: #E7A8BA }
li.bolo-festa div { background-image: url(../img/brailes/mobile/familias/violetas/bolo-festa.png); }

/* Cores Família Turquesas e seus brailes */
li.lagoa-natural p, li.lagoa-natural div, #lagoa-natural strong { color: #627775 }
li.lagoa-natural div { background-image: url(../img/brailes/mobile/familias/turquesas/lagoa-natural.png); }
li.azul-piscina p, li.azul-piscina div, #azul-piscina strong { color: #1088A3 }
li.azul-piscina div { background-image: url(../img/brailes/mobile/familias/turquesas/azul-piscina.png); }
li.pavao p, li.pavao div, #pavao strong { color: #149FA5 }
li.pavao div { background-image: url(../img/brailes/mobile/familias/turquesas/pavao.png); }
li.verde-piscina p, li.verde-piscina div, #verde-piscina strong { color: #91D4CC }
li.verde-piscina div { background-image: url(../img/brailes/mobile/familias/turquesas/verde-piscina.png); }
li.cheiro-orvalho p, li.cheiro-orvalho div, #cheiro-orvalho strong { color: #A1D8D4 }
li.cheiro-orvalho div { background-image: url(../img/brailes/mobile/familias/turquesas/cheiro-orvalho.png); }

/* Cores Família Azuis e seus brailes */
li.luar-sertao p, li.luar-sertao div, #luar-sertao strong { color: #08709E }
li.luar-sertao div { background-image: url(../img/brailes/mobile/familias/azuis/luar-sertao.png); }
li.azul-mar p, li.azul-mar div, #azul-mar strong { color: #0D90AC }
li.azul-mar div { background-image: url(../img/brailes/mobile/familias/azuis/azul-mar.png); }
li.oceano p, li.oceano div, #oceano strong { color: #0D92C4 }
li.oceano div { background-image: url(../img/brailes/mobile/familias/azuis/oceano.png); }
li.azul-arpoador p, li.azul-arpoador div, #azul-arpoador strong { color: #7BB8C7 }
li.azul-arpoador div { background-image: url(../img/brailes/mobile/familias/azuis/azul-arpoador.png); }
li.azul-andes p, li.azul-andes div, #azul-andes strong { color: #83A8C1 }
li.azul-andes div { background-image: url(../img/brailes/mobile/familias/azuis/azul-andes.png); }
li.melodia-suave p, li.melodia-suave div, #melodia-suave strong { color: #B0C4D3 }
li.melodia-suave div { background-image: url(../img/brailes/mobile/familias/azuis/melodia-suave.png); }

/* Cores Família Neutros Frios e seus brailes */
li.areia-sirena p, li.areia-sirena div, #areia-sirena strong { color: #E9DFCC }
li.areia-sirena div { background-image: url(../img/brailes/mobile/familias/neutros-frios/areia-sirena.png); }
li.pedra-preciosa p, li.pedra-preciosa div, #pedra-preciosa strong { color: #D1CEC8 }
li.pedra-preciosa div { background-image: url(../img/brailes/mobile/familias/neutros-frios/pedra-preciosa.png); }
li.cinza-alpino p, li.cinza-alpino div, #cinza-alpino strong { color: #CCCCCA }
li.cinza-alpino div { background-image: url(../img/brailes/mobile/familias/neutros-frios/cinza-alpino.png); }
li.prata-fina p, li.prata-fina div, #prata-fina strong { color: #CBCDCC }
li.prata-fina div { background-image: url(../img/brailes/mobile/familias/neutros-frios/prata-fina.png); }
li.tubarao-branco p, li.tubarao-branco div, #tubarao-branco strong { color: #B0B0AF }
li.tubarao-branco div { background-image: url(../img/brailes/mobile/familias/neutros-frios/tubarao-branco.png); }
li.nuvem-escura p, li.nuvem-escura div, #nuvem-escura strong { color: #717171 }
li.nuvem-escura div { background-image: url(../img/brailes/mobile/familias/neutros-frios/nuvem-escura.png); }
li.disco-vinil p, li.disco-vinil div, #disco-vinil strong { color: #585858 }
li.disco-vinil div { background-image: url(../img/brailes/mobile/familias/neutros-frios/disco-vinil.png); }

/* Cores Família Neutros Quentes e seus brailes */
li.algodao-egipcio p, li.algodao-egipcio div, #algodao-egipcio strong { color: #E9E0D5 }
li.algodao-egipcio div { background-image: url(../img/brailes/mobile/familias/neutros-quentes/algodao-egipcio.png); }
li.castanha-ribeirinha p, li.castanha-ribeirinha div, #castanha-ribeirinha strong { color: #DACAB3 }
li.castanha-ribeirinha div { background-image: url(../img/brailes/mobile/familias/neutros-quentes/castanha-ribeirinha.png); }
li.bronze-lenda p, li.bronze-lenda div, #bronze-lenda strong { color: #C7BBAA }
li.bronze-lenda div { background-image: url(../img/brailes/mobile/familias/neutros-quentes/bronze-lenda.png); }
li.camurca p, li.camurca div, #camurca strong { color: #E5DAD3 }
li.camurca div { background-image: url(../img/brailes/mobile/familias/neutros-quentes/camurca.png); }
li.madeira-acinzentada p, li.madeira-acinzentada div, #madeira-acinzentada strong { color: #A8998E }
li.madeira-acinzentada div { background-image: url(../img/brailes/mobile/familias/neutros-quentes/madeira-acinzentada.png); }
li.aventura-asfalto p, li.aventura-asfalto div, #aventura-asfalto strong { color: #6C6965 }
li.aventura-asfalto div { background-image: url(../img/brailes/mobile/familias/neutros-quentes/aventura-asfalto.png); }

/* Cores Família Dourados e seus brailes */
li.roma p, li.roma div, #roma strong { color: #ECD5BA }
li.roma div { background-image: url(../img/brailes/mobile/familias/dourados/roma.png); }
li.areia p, li.areia div, #areia strong { color: #CDAF8F }
li.areia div { background-image: url(../img/brailes/mobile/familias/dourados/areia.png); }
li.creme p, li.creme div, #creme strong { color: #E2BE8D }
li.creme div { background-image: url(../img/brailes/mobile/familias/dourados/creme.png); }
li.ocre-colonial p, li.ocre-colonial div, #ocre-colonial strong { color: #D7A262 }
li.ocre-colonial div { background-image: url(../img/brailes/mobile/familias/dourados/ocre-colonial.png); }
li.mangaba p, li.mangaba div, #mangaba strong { color: #DA9444 }
li.mangaba div { background-image: url(../img/brailes/mobile/familias/dourados/mangaba.png); }

.catalogo li a:hover div {
  border-top-color: currentColor;
}

/* Strong das cores */
#pimenta-ardida strong { color: #380200;  }
#bala-coco strong { color: #FFFFFF; }
#rosa-cintilante strong { color: #FFA8E3 }
#verde-timbalada strong { color: #77C074 }
#ceramica strong { color: #DBA799; }
#amarelo-canario strong { color: #F4D269; }
#festa-uva strong { color: #B187B7; }

/* Brailes da fase 1
li.ceramica div { background-image: url(../img/brailes/mobile/braile-ceramica.png); }
li.pimenta-ardida div { background-image: url(../img/brailes/mobile/braile-pimenta-ardida.png); }
li.laranja-citrico div { background-image: url(../img/brailes/mobile/braile-laranja-citrico.png); }
li.amarelo-canario div { background-image: url(../img/brailes/mobile/braile-amarelo-canario.png); }
li.verde-timbalada div { background-image: url(../img/brailes/mobile/braile-verde-timbalada.png); }
li.azul-andes div { background-image: url(../img/brailes/mobile/braile-azul-andes.png); }
li.festa-uva div { background-image: url(../img/brailes/mobile/braile-festa-uva.png); }
li.rosa-cintilante div { background-image: url(../img/brailes/mobile/braile-rosa-cintilante.png); }
li.bala-coco div { background-image: url(../img/brailes/mobile/braile-bala-coco.png); }*/

/* Famílias */
#familias .main {
  justify-content: center;
}
#familias nav.catalogo {
  height: auto;
  position: relative;
  z-index: 5;
}
#familias .catalogo ul {
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  grid-column-gap: 5%;
  grid-row-gap: 5%;
  justify-content: center;
}
#familias .catalogo ul li {
  position: relative;
  width: 30%;
  height: auto;
  padding-bottom: 35px;
}
/*#familias section:not(#comumFamilias) .main {
  flex: 0 1 auto;
}*/
#comumFamilias {
  position: absolute;
}
#comumFamilias .texto {
  width: 60%;
  margin: 18px auto;
}
#comumFamilias .main {
  justify-content: flex-start;
  z-index: 0;
}
#comumFamilias header, #comumFamilias footer {
  z-index: 2;
}
#familias footer > ul {
  width: 100%;
}
#familias footer > ul > li {
  width: 50%;
}
#familias footer ul.padrao {
  width: 65%;
}
/* Em breve */
li.breve {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
li.breve > span {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  background: #1D1D1D;
  color: #FFFFFF;
  padding: 8px;
  border-radius: 0px 15px;
  text-transform: uppercase;
  text-align: center;
  font-size: 1em;
  letter-spacing: 0.28em;
}
/* Breadcrumb */
.breadcrumb {
  color: #D9D9D9;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 20px;
}
.breadcrumb a {
  color: #A7A7A7;
}
.breadcrumb li {
  line-height: 1.7em;
}
.breadcrumb li:not(li:first-of-type)::before {
  content: ">";
  display: inline;
  margin-right: 8px;
}
a.voltar {
  /*background: #272727;*/
  padding: 8px 16px;
  border-radius: 0px 16px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.16em;
  border: 1px solid #fff;
  margin: 0 auto;
}
a.voltar:hover {
  background-color: #A3A3A333;
}
section#cores #comumCores {
  position: absolute;
  top: 0;
  left: 0;
}
#comumCores footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 25px;
}
header, footer {
  z-index: 2;
}
main, .main {
  z-index: 3;
}
.breadcrumb, a.voltar {
  z-index: 4;
}

/* Esconder as logos da área de catálogo */
#selecaoFamilia header .logos, #selecaoFamilia footer ul, #comumFamilias .logos, #comumCores .logos {
  display: none !important;
}

/* Glossário */
#glossario {
  background-color: #000;
  overflow: hidden;
}
#letras {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 91%;
  margin: 30px auto;
}
#letras li {
  width: 24px;
  height: 24px;
  border: 1px solid #808080;
  border-radius: 4px;
}
#letras a {
  font-size: 1.2em;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#letras a.clicado {
  background-color: #808080;
  color: #000000;
}
h2 {
  font-weight: 400;
  font-size: 1.6em;
  margin-bottom: 12px;
  letter-spacing: 25%;
  text-transform: uppercase;
}
.palavras {
  overflow: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  padding-bottom: 25px;
}
.palavras::-webkit-scrollbar {
  display: none;
}
.palavras ul {
  opacity: 0;
  transition: opacity 0.5s;
}
ul.mostrar {
  opacity: 1;
}
.palavras li {
  padding: 24px 42px;
  border-radius: 8px;
  border: 1px solid #444444;
  background-color: #0F0F0F;
  margin-bottom: 14px;
}
.palavras p {
  font-size: 1.2em;
  line-height: 1.4em;
  text-transform: none;
  letter-spacing: 0%;
}
.palavras ul.noContent {
  display: flex;
  justify-content: center;
}
ul.noContent li {
  padding: 0;
  border: none;
  background: transparent;
}
ul.noContent p {
  text-transform: uppercase;
  font-size: 1.2em;
  line-height: 28px;
  letter-spacing: 0.25em;
  text-align: center;
}

/* Saiba mais */
#saiba-mais {
  background-image: url(../img/bg/mobile/bg-saiba-mais.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
#saiba-mais .main {
  align-items: center;
  justify-content: center;
}
#saiba-mais p {
  font-size: 1.8em;
  line-height: 28px;
  letter-spacing: 0.25em;
  text-align: center;
}

/* Header */
header {
  position: relative;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}
.header {
  width: 100%;
  display: flex;
  justify-content: center;
}
a.logo {
  display: block;
  /*width: 21.87%;*/
}
.white {
  display: block;
}
.black {
  display: none;
}
.header nav li {
  text-align: right;
}
.logos {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
}
.logos ul {
  width: 31%;
  display: flex;
  align-items: center;
}
.logos ul li a {
  display: block;
}
.logos ul li {
  margin-right: 13px;
}
.logos ul li:last-of-type {
  margin-right: 0;
}

footer {
  display: flex;
}

/* Pimenta Ardida */
section#cores {
  display: flex;
  padding: 0;
  position: relative;
  left: 0;
  width: 100%;
}
.transicao {
  transition: all 0.5s;
}
section#cores section {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  padding: 25px;
}
section#cores > section {
  display: flex;
  flex-direction: row;
  position: absolute;
  padding: 0;
}
section#cores header, section#cores .logos {
  position: absolute;
}
section#cores header {
  padding: 25px 25px 0;
  align-self: flex-start;
}
section#cores header.coresPage {
  position: fixed;
  left: 0;
}
section#cores .logos.coresPage {
  position: fixed;
  right: 25px;
}

/* Background das cores Mobile */
/* Brancos */
#branco-gelo { background-image: url(../img/bg/mobile/brancos/bg-branco-gelo.jpg); }
#bala-coco { background-image: url(../img/bg/mobile/brancos/bg-bala-coco.jpg); }
#branco-gatinho { background-image: url(../img/bg/mobile/brancos/bg-branco-gatinho.jpg); }
#nevasca { background-image: url(../img/bg/mobile/brancos/bg-nevasca.jpg); }
#pipoca-salgada { background-image: url(../img/bg/mobile/brancos/bg-pipoca-salgada.jpg); }

/* Vermelhos */
#pimenta-ardida { background-image: url(../img/bg/mobile/vermelhos/bg-pimenta-ardida.jpg); }
#vermelho-cardinal { background-image: url(../img/bg/mobile/vermelhos/bg-vermelho-cardinal.jpg); }
#vermelho-goya { background-image: url(../img/bg/mobile/vermelhos/bg-vermelho-goya.jpg); }
#desfile-carnaval { background-image: url(../img/bg/mobile/vermelhos/bg-desfile-carnaval.jpg); }
#rosa-acai {background-image: url(../img/bg/mobile/vermelhos/bg-rosa-acai.jpg); }
#rosa-cintilante {background-image: url(../img/bg/mobile/vermelhos/bg-rosa-cintilante.jpg); }

/* Laranjas */
#fiesta { background-image: url(../img/bg/mobile/laranjas/bg-fiesta.jpg); }
#laranja-citrico { background-image: url(../img/bg/mobile/laranjas/bg-laranja-citrico.jpg); }
#laranja-neon { background-image: url(../img/bg/mobile/laranjas/bg-laranja-neon.jpg); }
#laranja-imperial { background-image: url(../img/bg/mobile/laranjas/bg-laranja-imperial.jpg); }
#laranja-maracatu { background-image: url(../img/bg/mobile/laranjas/bg-laranja-maracatu.jpg); }
#ceramica { background-image: url(../img/bg/mobile/laranjas/bg-ceramica.jpg); }

/* Amarelos */
#amarelo-canario { background-image: url(../img/bg/mobile/amarelos/bg-amarelo-canario.jpg); }
#amarelo-frevo { background-image: url(../img/bg/mobile/amarelos/bg-amarelo-frevo.jpg); }
#curry-dourado { background-image: url(../img/bg/mobile/amarelos/bg-curry-dourado.jpg); }
#sino { background-image: url(../img/bg/mobile/amarelos/bg-sino.jpg); }
#vanilla { background-image: url(../img/bg/mobile/amarelos/bg-vanilla.jpg); }
#marfim { background-image: url(../img/bg/mobile/amarelos/bg-marfim.jpg); }

/* Limas */
#verde-vale { background-image: url(../img/bg/mobile/limas/bg-verde-vale.jpg); }
#capim-limao { background-image: url(../img/bg/mobile/limas/bg-capim-limao.jpg); }
#refresco { background-image: url(../img/bg/mobile/limas/bg-refresco.jpg); }
#verde-limao { background-image: url(../img/bg/mobile/limas/bg-verde-limao.jpg); }
#mousse-azeitona { background-image: url(../img/bg/mobile/limas/bg-mousse-azeitona.jpg); }
#silencio-inverno { background-image: url(../img/bg/mobile/limas/bg-silencio-inverno.jpg); }

/* Verdes */
#verde-timbalada { background-image: url(../img/bg/mobile/verdes/bg-verde-timbalada.jpg); }
#verde-nilo { background-image: url(../img/bg/mobile/verdes/bg-verde-nilo.jpg); }
#doce-folha { background-image: url(../img/bg/mobile/verdes/bg-doce-folha.jpg); }
#verde-kiwi { background-image: url(../img/bg/mobile/verdes/bg-verde-kiwi.jpg); }
#jardim-secreto { background-image: url(../img/bg/mobile/verdes/bg-jardim-secreto.jpg); }
#mate { background-image: url(../img/bg/mobile/verdes/bg-mate.jpg); }
#orvalho { background-image: url(../img/bg/mobile/verdes/bg-orvalho.jpg); }

/* Turquesas */
#lagoa-natural { background-image: url(../img/bg/mobile/turquesas/bg-lagoa-natural.jpg); }
#azul-piscina { background-image: url(../img/bg/mobile/turquesas/bg-azul-piscina.jpg); }
#pavao { background-image: url(../img/bg/mobile/turquesas/bg-pavao.jpg); }
#verde-piscina { background-image: url(../img/bg/mobile/turquesas/bg-verde-piscina.jpg); }
#cheiro-orvalho { background-image: url(../img/bg/mobile/turquesas/bg-cheiro-orvalho.jpg); }

/* Azuis */
#luar-sertao { background-image: url(../img/bg/mobile/azuis/bg-luar-sertao.jpg); }
#azul-mar { background-image: url(../img/bg/mobile/azuis/bg-azul-mar.jpg); }
#oceano { background-image: url(../img/bg/mobile/azuis/bg-oceano.jpg); }
#azul-arpoador { background-image: url(../img/bg/mobile/azuis/bg-azul-arpoador.jpg); }
#azul-andes { background-image: url(../img/bg/mobile/azuis/bg-azul-andes.jpg); }
#melodia-suave { background-image: url(../img/bg/mobile/azuis/bg-melodia-suave.jpg); }

/* Violetas */
#festa-uva { background-image: url(../img/bg/mobile/violetas/bg-festa-uva.jpg); }
#lilas-primavera { background-image: url(../img/bg/mobile/violetas/bg-lilas-primavera.jpg); }
#perfume-lavanda { background-image: url(../img/bg/mobile/violetas/bg-perfume-lavanda.jpg); }
#laco-cetim { background-image: url(../img/bg/mobile/violetas/bg-laco-cetim.jpg); }
#bolo-festa { background-image: url(../img/bg/mobile/violetas/bg-bolo-festa.jpg); }

/* Neutros Frios */
#areia-sirena { background-image: url(../img/bg/mobile/neutros-frios/bg-areia-sirena.jpg); }
#pedra-preciosa { background-image: url(../img/bg/mobile/neutros-frios/bg-pedra-preciosa.jpg); }
#cinza-alpino { background-image: url(../img/bg/mobile/neutros-frios/bg-cinza-alpino.jpg); }
#prata-fina { background-image: url(../img/bg/mobile/neutros-frios/bg-prata-fina.jpg); }
#tubarao-branco { background-image: url(../img/bg/mobile/neutros-frios/bg-tubarao-branco.jpg); }
#nuvem-escura { background-image: url(../img/bg/mobile/neutros-frios/bg-nuvem-escura.jpg); }
#disco-vinil { background-image: url(../img/bg/mobile/neutros-frios/bg-disco-vinil.jpg); }

/* Neutros Quentes */
#algodao-egipcio { background-image: url(../img/bg/mobile/neutros-quentes/bg-algodao-egipcio.jpg); }
#castanha-ribeirinha { background-image: url(../img/bg/mobile/neutros-quentes/bg-castanha-ribeirinha.jpg); }
#bronze-lenda { background-image: url(../img/bg/mobile/neutros-quentes/bg-bronze-lenda.jpg); }
#camurca { background-image: url(../img/bg/mobile/neutros-quentes/bg-camurca.jpg); }
#madeira-acinzentada { background-image: url(../img/bg/mobile/neutros-quentes/bg-madeira-acinzentada.jpg); }
#aventura-asfalto { background-image: url(../img/bg/mobile/neutros-quentes/bg-aventura-asfalto.jpg); }

/* Dourados */
#roma { background-image: url(../img/bg/mobile/dourados/bg-roma.jpg); }
#areia { background-image: url(../img/bg/mobile/dourados/bg-areia.jpg); }
#creme { background-image: url(../img/bg/mobile/dourados/bg-creme.jpg); }
#ocre-colonial { background-image: url(../img/bg/mobile/dourados/bg-ocre-colonial.jpg); }
#mangaba { background-image: url(../img/bg/mobile/dourados/bg-mangaba.jpg); }

section#cores .logos {
  justify-content: right;
  margin-top: 40%;
  position: absolute;
  top: 0;
  width: 100%;
  padding-right: 25px;
  z-index: 1;
}
section#cores .logos ul {
  width: 16.07%;
  flex-direction: column;
  align-items: end;
}
section#cores .logos ul li {
  margin-bottom: 16px;
  margin-right: 0;
}
section#cores .logos ul li:last-of-type {
  margin-bottom: 0;
}
section#cores li.dorina {
  width: 100%;
}
section#cores li.coral {
  width: 69.09%;
}
section#cores .main {
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  left: 0;
}
section#cores .main nav {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
section p {
  color: #FFFFFF;
  text-transform: uppercase;
}
section#cores p {
  font-size: 1em;
  line-height: 18px;
  letter-spacing: 0.33em;
  text-align: right;
  order: -1;
  width: 277px;
  text-shadow: 1px 2px 2.1px rgba(0, 0, 0, 0.25);
}
.navCores {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.navCores li a, .navCores li.controls {
  display: flex;
  align-items: center;
  font-size: 1em;
  line-height: 1.4em;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.navCores li.proxima, .navCores li.anterior {
  position: absolute;
  bottom: 37%;
}
li.proxima {
  right: 25px;
}
li.anterior {
  left: 25px;
}
/*.navCores li:not(.navCores li.controls) a span{
  display: none;
}*/
.navCores li.controls {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.navCores li.controls a {
  flex-direction: column;
}
.navCores li.controls .arrow.right,
.navCores li.controls .arrow.stop,
.navCores li.controls .arrow.pause {
  margin: 0 auto;
  order: 0;
}
.arrow {
  border-radius: 50%;
  display: flex;
  width: 30px;
  padding-bottom: 30px;
  height: 0;
  position: relative;
  flex: 0 1 auto;
  background: rgba(255,255,255,0.1);
  justify-content: center;
}
.arrow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  position: absolute;
  opacity: 1;
  top: calc(50% - 41.94% / 2);
}
.arrow.right, .arrow.stop {
  margin-left: 14px;
  order: 1;
}
.arrow.left {
  margin-right: 14px;
}
.arrow.right::before {
  border-left: 10px solid #fff;
  right: 29%;
}
.arrow.left::before {
  border-right: 12px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  left: 29%;
}
.arrow.down::before {
  border-top: 10px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: none;
  top: calc(50% - 20% / 2);
}
.arrow {
  width: 35px;
  padding-bottom: 35px;
}
.arrow.right::before {
  border-top: 7px solid transparent;
  border-left: 12px solid #fff;
  border-bottom: 7px solid transparent;
}
.arrow.stop::before {
  width: 12px;
  height: 12px;
  background: #fff;
  border: none;
  top: calc(50% - 30% / 2);
}
.arrow.pause::before {
  width: 5px;
  height: 14px;
  background: transparent;
  border: none;
  top: calc(50% - 40% / 2);
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
  border-top: none;
  border-bottom: none;
}
.arrow.stop, .arrow.pause {
  display: none;
}
.audio-elems {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 100%;
  column-gap: 10px;
  padding-left: 10%;
}
.mostrar {
  opacity: 1;
}
.progresso {
  background: #A3A3A333;
  width: 100%;
  max-width: 200px;
  height: 4px;
  position: relative;
}
.barra {
  position: absolute;
  background: #FFFFFF;
  width: 0px;
  height: 100%;
  left: 0;
}
.fast {
  width: 10%;
}
.fast button {
  background: #A3A3A333;
  width: 28px;
  height: 28px;
  color: #FFF;
  border-radius: 100%;
}
.fast button.clicado {
  background: #FFF;
  color: #000;
}

.flags {
  display: flex;
  width: auto;
  column-gap: 16px;
  margin-top: 5px;
}
.flags button {
  width: 21px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.4;
}
.pt {
  background-image: url(../img/flag-pt.png);
}
.en {
  background-image: url(../img/flag-en.png);
}
button.selecionado {
  opacity: 1;
}

#glossario, #catalogo {
  touch-action: none;
  user-select: none;
}

/* Estilos com o a classe Fundo */
.fundo *, .fundo a.voltar, .fundo nav.principal a.clicado, .fundo .fast button {
  color: #363636;
}
.fundo nav.principal a {
  color: #8E8E8E;
}
.fundo a.voltar {
  border-color: #363636;
}
.fundo .white {
  display: none;
}
.fundo .black {
  display: block;
}
.fundo .progresso {
  background: #42424233;
}
.fundo .fast button, .fundo .arrow {
  background: rgba(0,0,0,0.1);
}
.fundo .fast button.clicado {
  background: #FFF;
  color: #000;
}

/* Exceções das bandeiras inglês */
#pipoca-salgada .flags li:last-child,
#rosa-acai .flags li:last-child,
#creme .flags li:last-child,
#vanilla .flags li:last-child,
#verde-vale .flags li:last-child,
#verde-kiwi .flags li:last-child,
#bolo-festa .flags li:last-child,
#cinza-alpino .flags li:last-child,
#camurca .flags li:last-child,
#madeira-acinzentada .flags li:last-child {
  display: none;
}

.visually-hidden {
  position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
#inicio {
  background-color: blue;
}
#cromopoemas {
  background-color: pink;
}
#catalogo {
  background-color: green;
}
#glossario {
  background-color: cyan;
}*/

@media (prefers-reduced-motion: reduce) {
 	video {
    display: none;
  }
}

/* De acordo com a altura do vídeo */
@media screen and (min-height: 872px) {
  .ativo video#video-inicio {
    top: 0;
  }
}

@media screen and (min-width: 320px){
  section#cores p {
    margin-top: 70px;
  }
  #familias .catalogo ul {
    grid-row-gap: 1%;
  }
  #familias .catalogo ul li {
    height: 110px;
  }
}

@media screen and (min-width: 400px) {
  nav.principal a {
    font-size: 1.1em;
  }
  /* CromoPoemas */
  #cromopoemas h1 {
    font-size: 2em;
    margin-top: 45px;
  }
  #cromopoemas .texto p {
    line-height: 2em;
    margin-bottom: 25px;
  }
  .wrapper {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  section#cores p {
    margin-top: 180px;
  }
  #comumFamilias .texto {
    width: 50%;
    margin: 30px auto;
  }
  #familias .catalogo ul {
    grid-row-gap: 5%;
  }
  #familias .catalogo ul li {
    height: 170px;
  }
}

@media screen and (min-width: 481px) and (orientation: landscape) {
  body {
    font-size: 14px;
  }
  nav.principal a {
    font-size: 0.8em;
    line-height: 1.1em;
  }  
  a.logo.menor {
    width: 17.07%;
  }
  .ativo video#video-inicio {
    display: none;
  }
  .ativo video#video-inicio-desktop {
    display: block;
  }

  
  .header {
    justify-content: center;
  }
  .header.space {
    justify-content: space-between;
  }
  .main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Home */
  #inicio  {
    background-image: url(../img/bg/desktop/bg-home.jpg);
  }
  #inicio .logos, #catalogo .logos {
    width: 9%;
  }
  #inicio a.logo {
    width: 22.58%;
  }
  #inicio a.logo {
    display: flex;
    justify-content: center;
  }
  #inicio footer {
    margin-top: 0;
  }
  ul.order .dorina {
    margin-right: 0px;
    margin-left: 13px;
  }
  ul.order .coral {
    order: -1;
  }
  .fixo {
    position: fixed;
    top: 25px;
    right: 25px;
    left: 0;
    width: 100%;
    padding: 0 25px;
  }

  /* CromoPoemas */
  #cromopoemas .main {
    grid-template-columns: 45% 1fr;
    margin-top: 50px;
    grid-column-gap: 25px;
  }
  #cromopoemas h1 {
    font-size: 1em;
    margin-top: 0;
    text-align: left;
  }
  #cromopoemas p {
    margin-bottom: 20px;
    font-size: 0.65em;
  }
  .wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    order: -1;
    grid-row: 1 / 4;
  }
  #cromopoemas footer {
    margin-top: 0;
  }

  /* Catálogo */
  #catalogo footer.logos ul, #familias .header .logos ul {
    display: none;
  }
  #catalogo.ativo .logos {
    display: block;
  }
  #catalogo.ativo footer.logos, #familias .header .logos ul {
    display: flex;
  }
  #catalogo .logos ul, #catalogo footer.logos {
    width: 100%;
  }
  #catalogo header .logos {
    display: flex;
  }

  /*#catalogo footer {
    display: none !important;
  }*/
  .catalogo {
    display: flex;
    justify-content: center;
  }
  #catalogo p {
    font-size: 0.8em;
  }
  #catalogo .texto p {
    text-align: center;
    color: #C5C5C5;
  }
  nav.catalogo {
    height: auto;
  }
  .catalogo ul {
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    grid-gap: 4%;
  }
  .catalogo ul li {
    min-height: 100px;
  }
  .catalogo ul div {
    background-position-x: left;
  }  
  #catalogo .catalogo ul p {
    font-size: 0.61em;
    letter-spacing: 0.05em;
    height: 40px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding-right: 0;
  }

  li.breve > span {
    font-size: 0.61em;
  }
  
  /* Famílias */
  #familias nav.catalogo {
    height: 50%;
  }
  #familias .catalogo ul {
    width: 100%;
    flex-wrap: nowrap;
    grid-column-gap: 3%;
  }
  #familias .catalogo ul li {
    width: 11%;
    height: 130px;
  }
  #familias .logo.menor {
    position: absolute;
    left: calc(50% - 17.07% / 2);
  }
  /*#familias .header {
    justify-content: flex-start;
  }*/
  #familias footer.logos ul {
    display: block;
  }
  #familias footer.logos ul.padrao {
    display: none;
  }

  /* Breadcrumb */
  .breadcrumb {
    position: absolute;
    display: flex;
    margin-top: 0px;
    font-size: 0.7em;
    top: 80px;
  }
  #cores .breadcrumb {
    top: calc(80px + 25px);
  }
  .breadcrumb li:not(li:first-of-type)::before {
    margin: 0 8px;
  }

  #comumFamilias footer {
    align-self: center;
  }
  a.voltar {
    font-size: 0.7em
  }

  /* Glossário */
  #glossario .main {
    justify-content: flex-start;
  }
  #letras {
    width: 100%;
    justify-content: space-between;
    margin-top: 30px;
    gap: 0;
  }
  #letras li {
    width: 25px;
    height: 25px;
  }
  .palavras {
    width: 100%;
  }
  h2 {
    font-size: 1.1em;
  }
  .palavras ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .palavras li {
    margin-bottom: 0;
  }
  .palavras p {
    font-size: 1em;
    line-height: 1.125em;
  }

  /* Saiba mais */
  #saiba-mais {
    background-image: url(../img/bg/desktop/bg-saiba-mais.jpg);
  }
  #saiba-mais p {
    font-size: 1.2em;
    line-height: 32px;
  }
  .logos ul.padrao {
    width: 11.91%;
  }

  footer {
    margin-top: 10px;
  }

  /* Background das cores Desktop */
  /* Brancos */
  #branco-gelo { background-image: url(../img/bg/desktop/brancos/bg-branco-gelo.jpg); }
  #bala-coco { background-image: url(../img/bg/desktop/brancos/bg-bala-coco.jpg); }
  #branco-gatinho { background-image: url(../img/bg/desktop/brancos/bg-branco-gatinho.jpg); }
  #nevasca { background-image: url(../img/bg/desktop/brancos/bg-nevasca.jpg); }
  #pipoca-salgada { background-image: url(../img/bg/desktop/brancos/bg-pipoca-salgada.jpg); }

  /* Vermelhos */
  #pimenta-ardida { background-image: url(../img/bg/desktop/vermelhos/bg-pimenta-ardida.jpg); }
  #vermelho-cardinal { background-image: url(../img/bg/desktop/vermelhos/bg-vermelho-cardinal.jpg); }
  #vermelho-goya { background-image: url(../img/bg/desktop/vermelhos/bg-vermelho-goya.jpg); }
  #desfile-carnaval { background-image: url(../img/bg/desktop/vermelhos/bg-desfile-carnaval.jpg); }
  #rosa-acai {background-image: url(../img/bg/desktop/vermelhos/bg-rosa-acai.jpg); }
  #rosa-cintilante {background-image: url(../img/bg/desktop/vermelhos/bg-rosa-cintilante.jpg); }

  /* Laranjas */
  #fiesta { background-image: url(../img/bg/desktop/laranjas/bg-fiesta.jpg); }
  #laranja-citrico { background-image: url(../img/bg/desktop/laranjas/bg-laranja-citrico.jpg); }
  #laranja-neon { background-image: url(../img/bg/desktop/laranjas/bg-laranja-neon.jpg); }
  #laranja-imperial { background-image: url(../img/bg/desktop/laranjas/bg-laranja-imperial.jpg); }
  #laranja-maracatu { background-image: url(../img/bg/desktop/laranjas/bg-laranja-maracatu.jpg); }
  #ceramica { background-image: url(../img/bg/desktop/laranjas/bg-ceramica.jpg); }

  /* Amarelos */
  #amarelo-canario { background-image: url(../img/bg/desktop/amarelos/bg-amarelo-canario.jpg); }
  #amarelo-frevo { background-image: url(../img/bg/desktop/amarelos/bg-amarelo-frevo.jpg); }
  #curry-dourado { background-image: url(../img/bg/desktop/amarelos/bg-curry-dourado.jpg); }
  #sino { background-image: url(../img/bg/desktop/amarelos/bg-sino.jpg); }
  #vanilla { background-image: url(../img/bg/desktop/amarelos/bg-vanilla.jpg); }
  #marfim { background-image: url(../img/bg/desktop/amarelos/bg-marfim.jpg); }

  /* Limas */
  #verde-vale { background-image: url(../img/bg/desktop/limas/bg-verde-vale.jpg); }
  #capim-limao { background-image: url(../img/bg/desktop/limas/bg-capim-limao.jpg); }
  #refresco { background-image: url(../img/bg/desktop/limas/bg-refresco.jpg); }
  #verde-limao { background-image: url(../img/bg/desktop/limas/bg-verde-limao.jpg); }
  #mousse-azeitona { background-image: url(../img/bg/desktop/limas/bg-mousse-azeitona.jpg); }
  #silencio-inverno { background-image: url(../img/bg/desktop/limas/bg-silencio-inverno.jpg); }

  /* Verdes */
  #verde-timbalada { background-image: url(../img/bg/desktop/verdes/bg-verde-timbalada.jpg); }
  #verde-nilo { background-image: url(../img/bg/desktop/verdes/bg-verde-nilo.jpg); }
  #doce-folha { background-image: url(../img/bg/desktop/verdes/bg-doce-folha.jpg); }
  #verde-kiwi { background-image: url(../img/bg/desktop/verdes/bg-verde-kiwi.jpg); }
  #jardim-secreto { background-image: url(../img/bg/desktop/verdes/bg-jardim-secreto.jpg); }
  #mate { background-image: url(../img/bg/desktop/verdes/bg-mate.jpg); }
  #orvalho { background-image: url(../img/bg/desktop/verdes/bg-orvalho.jpg); }

  /* Turquesas */
  #lagoa-natural { background-image: url(../img/bg/desktop/turquesas/bg-lagoa-natural.jpg); }
  #azul-piscina { background-image: url(../img/bg/desktop/turquesas/bg-azul-piscina.jpg); }
  #pavao { background-image: url(../img/bg/desktop/turquesas/bg-pavao.jpg); }
  #verde-piscina { background-image: url(../img/bg/desktop/turquesas/bg-verde-piscina.jpg); }
  #cheiro-orvalho { background-image: url(../img/bg/desktop/turquesas/bg-cheiro-orvalho.jpg); }

  /* Azuis */
  #luar-sertao { background-image: url(../img/bg/desktop/azuis/bg-luar-sertao.jpg); }
  #azul-mar { background-image: url(../img/bg/desktop/azuis/bg-azul-mar.jpg); }
  #oceano { background-image: url(../img/bg/desktop/azuis/bg-oceano.jpg); }
  #azul-arpoador { background-image: url(../img/bg/desktop/azuis/bg-azul-arpoador.jpg); }
  #azul-andes { background-image: url(../img/bg/desktop/azuis/bg-azul-andes.jpg); }
  #melodia-suave { background-image: url(../img/bg/desktop/azuis/bg-melodia-suave.jpg); }

  /* Violetas */
  #festa-uva { background-image: url(../img/bg/desktop/violetas/bg-festa-uva.jpg); }
  #lilas-primavera { background-image: url(../img/bg/desktop/violetas/bg-lilas-primavera.jpg); }
  #perfume-lavanda { background-image: url(../img/bg/desktop/violetas/bg-perfume-lavanda.jpg); }
  #laco-cetim { background-image: url(../img/bg/desktop/violetas/bg-laco-cetim.jpg); }
  #bolo-festa { background-image: url(../img/bg/desktop/violetas/bg-bolo-festa.jpg); }

  /* Neutros Frios */
  #areia-sirena { background-image: url(../img/bg/desktop/neutros-frios/bg-areia-sirena.jpg); }
  #pedra-preciosa { background-image: url(../img/bg/desktop/neutros-frios/bg-pedra-preciosa.jpg); }
  #cinza-alpino { background-image: url(../img/bg/desktop/neutros-frios/bg-cinza-alpino.jpg); }
  #prata-fina { background-image: url(../img/bg/desktop/neutros-frios/bg-prata-fina.jpg); }
  #tubarao-branco { background-image: url(../img/bg/desktop/neutros-frios/bg-tubarao-branco.jpg); }
  #nuvem-escura { background-image: url(../img/bg/desktop/neutros-frios/bg-nuvem-escura.jpg); }
  #disco-vinil { background-image: url(../img/bg/desktop/neutros-frios/bg-disco-vinil.jpg); }  

  /* Neutros Quentes */
  #algodao-egipcio { background-image: url(../img/bg/desktop/neutros-quentes/bg-algodao-egipcio.jpg); }
  #castanha-ribeirinha { background-image: url(../img/bg/desktop/neutros-quentes/bg-castanha-ribeirinha.jpg); }
  #bronze-lenda { background-image: url(../img/bg/desktop/neutros-quentes/bg-bronze-lenda.jpg); }
  #camurca { background-image: url(../img/bg/desktop/neutros-quentes/bg-camurca.jpg); }
  #madeira-acinzentada { background-image: url(../img/bg/desktop/neutros-quentes/bg-madeira-acinzentada.jpg); }
  #aventura-asfalto { background-image: url(../img/bg/desktop/neutros-quentes/bg-aventura-asfalto.jpg); }

  /* Dourados */
  #roma { background-image: url(../img/bg/desktop/dourados/bg-roma.jpg); }
  #areia { background-image: url(../img/bg/desktop/dourados/bg-areia.jpg); }
  #creme { background-image: url(../img/bg/desktop/dourados/bg-creme.jpg); }
  #ocre-colonial { background-image: url(../img/bg/desktop/dourados/bg-ocre-colonial.jpg); }
  #mangaba { background-image: url(../img/bg/desktop/dourados/bg-mangaba.jpg); }

  /* Strong das cores */
  #pimenta-ardida strong { color: #B02826;  }

  section#cores .main {
    justify-content: flex-end;
  }

  section#cores .logos {
    margin-top: 0px;
    width: 100%;
    left: 0;
    top: 0;
    padding: 25px;
    z-index: 1;
  }
  section#cores .logos ul {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  section#cores .logos ul li {
    margin-bottom: 0px;
    margin-right: 0;
  }
  section#cores li.dorina {
    width: 6.19%;
    order: 1;
  }
  section#cores li.coral {
    width: 3.92%;
  }
  section#cores .logos ul li:last-of-type {
    margin-bottom: 0;
  }
  section#cores p {
    width: auto;
    font-size: 0.7em;
    margin: 0 7% 20px;
  }

  .navCores li.controls {
    margin-bottom: 0px;
    font-size: 0.85em;
  }
  .navCores li.controls a {
    display: block;
    position: relative;
    z-index: 2;
  }
  .navCores li.controls .arrow {
    margin-right: auto;
    margin-left: auto;
  }
  section#cores .navCores li.proxima {
    right: 25px;
  }
  .navCores li.proxima, .navCores li.anterior {
    position: absolute;
    z-index: 1;
    font-size: 0.75em;
  }
  .navCores li.proxima span, .navCores li.anterior span {
    display: none;
  }
  .progresso {
    max-width: 280px;
  }
  .flags {
    margin: 0;
  }

  /* Estilos com a classe Fundo (desfazendo no Desktop) */
  .fundo *, .fundo a.voltar, .fundo nav.principal a.clicado, .fundo .fast button {
    color: #FFFFFF;
  }
  .fundo nav.principal a {
    color: #C5C5C5;
  }
  .fundo a.voltar {
    border-color: #FFFFFF;
  }
  .fundo .white {
    display: block;
  }
  .fundo .black {
    display: none;
  }
  .fundo .progresso, .fundo .fast button {
    background: #A3A3A333;
  }
  .fundo .arrow {
    background: rgba(255,255,255,0.1);
  }
  /*Exceções*/
  #branco-gatinho .white {
    display: none;
  }#branco-gatinho .black {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .desktop {
    display: block !important;
  }
  .mobile {
    display: none !important;
  }
  nav.principal {
    top: 25px;
    right: 25px;
    width: auto;
    left: unset;
    padding: 0;
  }
  nav.principal ul {
    flex-direction: column;
    text-align: right;
  }
  nav.principal a {
    font-size: 1em;
    line-height: 2.2em;
    padding: 0;
  }
  footer {
    margin-top: 41px;
    position: relative;
  }

  /* CromoPoemas */
    #cromopoemas .main {
    grid-template-columns: 54% 1fr;
    margin-top: 100px;
    grid-column-gap: 50px;
  }
  #cromopoemas h1 {
    font-size: 2em;
    margin-bottom: 50px;
  }
  #cromopoemas p {
    margin-bottom: 25px;
    font-size: 0.9em;
    margin-right: 5%;
  }

  /*#catalogo p {
    font-size: 1em;
    line-height: 1.625em;
    margin-right: 50%;
    font-size: 1em;
  }*/
  nav.catalogo {
    height: 100%;
  }
  .catalogo ul {
    width: 61%;
  }
  #catalogo .texto {
    display: block;
  }
  #catalogo .texto p {
    font-size: 1.28em;
    margin-bottom: 50px;
  }
  .catalogo ul li {
    height: 100%;
  }
  #catalogo .catalogo ul p {
    font-size: 1em;
  }

  section#cores .main {
    flex-direction: row;
  }
  section#cores .main nav {
    flex: 1;
    margin: 0 auto 0 35%;
  }
  .navCores li.controls {
    font-size: 1em;
  }
  .navCores li.proxima, .navCores li.anterior {
    font-size: 1em;
    top: 48%;
  }
   .navCores li.proxima span, .navCores li.anterior span {
    display: inline;
  }
  .flags {
    margin-top: 10px;
  }

  /* Ícones 
  li.ceramica p { background-image: url(../img/icons/icon-ceramica.png); }
  li.pimenta-ardida p { background-image: url(../img/icons/icon-pimenta-ardida.png); }
  li.laranja-citrico p { background-image: url(../img/icons/icon-laranja-citrico.png); }
  li.amarelo-canario p { background-image: url(../img/icons/icon-amarelo-canario.png); }
  li.verde-timbalada p { background-image: url(../img/icons/icon-verde-timbalada.png); }
  li.azul-andes p { background-image: url(../img/icons/icon-azul-andes.png); }
  li.festa-uva p { background-image: url(../img/icons/icon-festa-uva.png); }
  li.rosa-cintilante p { background-image: url(../img/icons/icon-rosa-cintilante.png); }
  li.bala-coco p { background-image: url(../img/icons/icon-bala-coco.png); }*/

  li.breve span {
    font-size: 1em;
  }

  /* Famílias */
  #familias nav.catalogo {
    margin-top: 100px;
  }
  #familias .catalogo ul li {
    width: 9.2%;
    height: 220px;
  }
  #familias #comumFamilias .texto {
    display: block;
    margin-top: 130px;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: 1em;
  }

  #comumCores footer {
    right: 25px;
    left: unset;
  }

  #comumFamilias footer, #comumCores footer {
    width: auto;
  }
  a.voltar {
    font-size: 1em
  }
  #comumCores a.voltar {
    display: block;
  }
  #comumCores header {
    bottom: 0;
  }
  #comumCores header, #comumFamilias header {
    display: flex;
    justify-content: center;
  }

  /* Glossário */
  #letras {
    width: 75.96%;
    margin-top: 50px;
  }
  .palavras {
    width: 75.96%;
    margin: 0 auto;
  }
  .palavras li {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  h2 {
    font-size: 1.4em;
  }
  
  #saiba-mais p {
    font-size: 2em;
  }
  /*.navCores li:not(.navCores li.controls) a span{
    display: inline;
  }*/
  section#cores p {
    font-size: 1em;
    line-height: 1.4em;
    margin: 0;
    margin-bottom: 140px;
    /*width: 35%;*/
    width: 450px;
    height: 120px;
    order: 0;
  }

  .flags button {
    width: 32px;
    height: 24px;
  }
}

@media screen and (min-width: 1920px) {
  body {
    font-size: 16px;
  }
  section {
    padding: 80px;
  }
  nav.principal {
    top: 80px;
    right: 80px;
  }

  /* CromoPoemas */
    #cromopoemas .main {
    margin-top: 167px;
    grid-column-gap: 100px;
  }
  #cromopoemas h1 {
    font-size: 2.25em;
  }
  #cromopoemas p {
    font-size: 1em;
    margin-bottom: 30px;
  }

  #familias nav.catalogo {
    margin-top: 150px;
  }
  #familias .catalogo ul li {
    height: 335px;
  }

  section#cores section {
    padding: 0px;
  }
  section#cores section .main {
    padding: 80px;
  }
  section#cores header {
    padding: 80px 80px 0;
  }
  section#cores p {
    margin-bottom: 305px;
    width: 27%;
  }
  section#cores .navCores li.anterior {
    left: 80px;
  }
  section#cores .navCores li.proxima {
    right: 80px;
  }

  /* Breadcrumb */
  .breadcrumb {
    top: 110px;
  }
  #cores .breadcrumb {
    top: calc(110px + 25px);
  }
  #comumCores footer {
    width: auto;
    right: 80px;
    bottom: 80px;
  }
  section#cores .main nav {
    margin-left: 31%;
  }

  /* Glossário */
  #letras {
    margin-bottom: 74px;
  }
  #letras li {
    width: 40px;
    height: 40px;
  }
  .palavras ul {
    gap: 49px;
  }
  .palavras li {
    height: 244px;
  }
  h2 {
    font-size: 1.5em;
    margin-bottom: 36px;
  }
}