@charset "UTF-8";
/*Estrutura*/
/* CSS RESET */
@import url(../fonts/galanogrotesque/stylesheet.css);

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.objetivos {
    font-size: 20px;
    text-transform: uppercase;
    text-align: left;
    width: 100%;
    border-bottom: 2px solid #f9a44e;
    margin: 30px 0;
    color: #f9a44e;
}

.pd-10 {
    padding: 10px;
}

.pd-20 {
    padding: 20px;
}

.pd-30 {
    padding: 30px;
}

.pd-40 {
    padding: 40px;
}

.bd-radius {
    border-radius: 10px;
}

.cor-1 {
    color: #18b1a7;
}

.cor-2 {
    color: #695da8;
}

.cor-3 {
    color: #b6292f;
}

.cor-4 {
    color: #d91a21;
}

.cor-5 {
    color: #214080;
}

.cor-6 {
    color: #006394;
}

.cor-7 {
    color: #009c47;
}

.cor-8 {
    color: #43b649;
}

.cor-9 {
    color: #f7901e;
}

.cor-10 {
    color: #febc11;
}

.cor-11 {
    color: #ffb070;
}

.cor-12 {
    color: #ffb070;
}

.cor-13 {
    color: #ffb070;
}

.cor-14 {
    color: #385aa8;
}

.cor-white {
    color: #fff;
}

.bg-1 {
    background-color: #18b1a7;
}

.bg-2 {
    background-color: #695da8;
}

.bg-3 {
    background-color: #b6292f;
}

.bg-4 {
    background-color: #d91a21;
}

.bg-5 {
    background-color: #214080;
}

.bg-6 {
    background-color: #006394;
}

.bg-7 {
    background-color: #009c47;
}

.bg-8 {
    background-color: #43b649;
}

.bg-9 {
    background-color: #f7901e;
}

.bg-10 {
    background-color: #febc11;
}

.bg-11 {
    background-color: #ffb070;
}

.bg-12 {
    background-color: #ffb070;
}

.bg-13 {
    background-color: #ffb070;
}

.bg-14 {
    background-color: #385aa8;
}

.ps-absolute {
    position: absolute;
}

.ps-relative {
    position: relative;
}

.mgn-h-20 {
    margin: 20px 0;
}

body,
html {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-family: "GalanoGrotesque";
    font-size: 16px;
    background: #f9f9f9;
    line-height: 1.2;
    color: #000;
    min-height: 100vh;
    height: 100%;
}

[data-featherlight] {
    cursor: pointer;
    padding: 10px 10px;
    background-color: rgba(255, 255, 255, .4);
    border-radius: 10px;
    margin: 10px 0;
}

.image {
    width: 20%;
    position: absolute;
    bottom: 0;
    left: 40%;
}

p {
    word-wrap: break-word;
}

.over {
    position: relative;
}

.over div[class*="over-"] {
    cursor: pointer;
}

.over div[class*="over-"]>div .content-over {
    opacity: 0;
}

.over div[class*="over-"].active>div .content-over {
    opacity: 1;
}

.over .over-1>div {
    padding-right: 90px;
    text-align: right;
}

.over .over-2>div {
    padding-left: 90px;
}

.image .img-1,
.image .img-2 {
    display: none;
}

.image .img-1.inative,
.image .img-2.inative,
.image .img.inative {
    display: none;
}

.image .img-1.active,
.image .img-2.active,
.image .img.active {
    display: block;
}

.box-coment {
    background-color: #fef0d9;
    padding: 20px;
    border-radius: 30px;
}

.mini-box:before {
    content: "";
    position: absolute;
    left: -10px;
    top: -6px;
    width: 96%;
    height: 104%;
    border-radius: 30px;
    z-index: 0;
}

.midle-box.titulo p {
    margin: 0 !important;
}

/* red */
.midle-box.titulo.red {
    background-color: #d41920;
    color: #fff;
    padding: 8px;
    text-align: center;
    border-radius: 10px;
}

.midle-box.conteudo.red {
    background-color: #f1f1f2;
    border: 2px solid #d41920;
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}

.midle-box.conteudo.red span {
    color: #d41920;
}

/* yellow */
.midle-box.titulo.yellow {
    background-color: #febc11;
    color: #fff;
    padding: 8px;
    text-align: center;
    border-radius: 10px;
}

.midle-box.conteudo.yellow {
    background-color: #f1f1f2;
    border: 2px solid #febc11;
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}

.midle-box.conteudo.yellow span {
    color: #febc11;
}

/* green */
.midle-box.titulo.green {
    background-color: #42b448;
    color: #fff;
    padding: 8px;
    text-align: center;
    border-radius: 10px;
}

.midle-box.conteudo.green {
    background-color: #f1f1f2;
    border: 2px solid #42b448;
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}

.midle-box.conteudo.green span {
    color: #42b448;
}

/* blue */
.midle-box.titulo.blue {
    background-color: #006394;
    color: #fff;
    padding: 8px;
    text-align: center;
    border-radius: 10px;
}

.midle-box.conteudo.blue {
    background-color: #f1f1f2;
    border: 2px solid #006394;
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}

.midle-box.conteudo.blue span {
    color: #006394;
}

/* red */
.box-text.red strong,
.box-text.red .titulo {
    color: #b6282f;
}

.mini-box.red:before {
    border: 4px solid #b6282f;
}

.mini-box.red:after {
    background-color: #fdf0e9;
}

/* red light*/
.box-text.red-light strong,
.box-text.red-light .titulo {
    color: #d91a21;
}

.mini-box.red-light:before {
    border: 4px solid #d91a21;
}

.mini-box.red-light:after {
    background-color: #fdf0e9;
}

/* blue */
.box-text.blue strong,
.box-text.blue .titulo {
    color: #214080;
}

.mini-box.blue:before {
    border: 4px solid #214080;
}

.mini-box.blue:after {
    background-color: #ececf2;
}

/* blue light */
.box-text.blue-light strong,
.box-text.blue-light .titulo {
    color: #006394;
}

.mini-box.blue-light:before {
    border: 4px solid #006394;
}

.mini-box.blue-light:after {
    background-color: #ececf2;
}

/* green */
.box-text.green strong,
.box-text.green .titulo {
    color: #009b47;
}

.mini-box.green:before {
    border: 4px solid #009b47;
}

.mini-box.green:after {
    background-color: #f0f7f0;
}

/* green light */
.box-text.green-light strong,
.box-text.green-light .titulo {
    color: #47b74c;
}

.mini-box.green-light:before {
    border: 4px solid #47b74c;
}

.mini-box.green-light:after {
    background-color: #f0f7f0;
}

/* yellow */
.box-text.yellow strong,
.box-text.yellow .titulo {
    color: #f7901e;
}

.mini-box.yellow:before {
    border: 4px solid #f7901e;
}

.mini-box.yellow:after {
    background-color: #fff6ee;
}

/* yellow light */
.box-text.yellow-light strong,
.box-text.yellow-light .titulo {
    color: #febd11;
}

.mini-box.yellow-light:before {
    border: 4px solid #febd11;
}

.mini-box.yellow-light:after {
    background-color: #fff6ee;
}

/* purple */
.box-text.purple strong,
.box-text.purple .titulo {
    color: #6d60aa;
}

.mini-box.purple:before {
    border: 4px solid #6d60aa;
}

.mini-box.purple:after {
    background-color: #f2f1f8;
}

/* purple light */
.box-text.purple-light strong,
.box-text.purple-light .titulo {
    color: #1ab1a7;
}

.mini-box.purple-light:before {
    border: 4px solid #1ab1a7;
}

.mini-box.purple-light:after {
    background-color: #f2f8f7;
}

.mini-box {
    position: relative;
    height: 90%;
    width: 100%;
}

.box-text .titulo {
    font-weight: 800;
    text-align: center;
}

.box-text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 5px 20px;
}

.mini-box:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    z-index: 0;
}

.title {
    font-size: 1.5em;
    font-weight: 600;
}

img {
    width: 100%;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.dp-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 16px;
}

.slides {
    max-width: 90%;
    padding: 0 20px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: #fff;
    padding: 20px;
    box-sizing: content-box;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
    cursor: pointer;
    margin: 20px auto;
    min-height: 80px;
}

.flip-card.interacao:before {
    top: 14px;
    right: 6px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    z-index: 1;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card.fliped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    min-height: 80px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    color: black;
}

.flip-card-front:after {
    content: "\02795";
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    position: absolute;
    left: calc(50% - 10px);
    bottom: -16px;
    border: 1px solid #785dc8;
    border-radius: 6px;
    padding: 4px;
    color: #fff;
}

/* Style the back side */
.flip-card-back {
    transform: rotateY(180deg);
}

.accordion-container {
    background-color: #1daba7;
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    margin: 10px 0;
}

.accordion-container.active {
    background-color: #fff;
    border-radius: 8px;
    padding: 8px;
    color: #58595b;
    margin: 10px 0;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion-item {
    cursor: pointer;
    padding: 6px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    position: relative;
}

.dp-none {
    display: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion-item:hover {
    color: #777;
}

.accordion-item.active .accordion-section {
    display: block !important;
}

/* Style the accordion panel. Note: hidden by default */
.accordion-section {
    padding: 0 6px;
    background-color: white;
    /* display: none; */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.accordion-item:after {
    content: "\02795";
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    position: absolute;
    right: 20px;
    top: 10px;
}

.accordion-item.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

.featherlight-content {
    padding: 30px !important;
    border-radius: 8px;
    width: 80%;
}

.featherlight-content .featherlight-close-icon {
    top: 4px;
    right: 4px;
    background-color: #1daba7;
    border-radius: 50%;
    color: #fff;
}

.featherlight-content .modal {
    display: flex !important;
}

.modal {
    display: none;
}

.capa-resolucao {
    border-radius: 10px;
    background-color: #fff;
    padding: 4px;
    position: relative;
    cursor: pointer;
    margin: 10px 0;
    border: 1px solid #000;
    text-align: center;
}

.capa-resolucao.active {
    border: 4px solid #ae2e34;
}

.capa-resolucao p {
    font-size: 12px;
    margin: 0;
    margin-top: 10px;
}

.capa-resolucao:after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    background: url('../images/icone-player.png') no-repeat center center / cover;
}

#video-player {
    position: fixed;
    width: 80%;
}

ul {
    margin-left: 22px;
    padding: 20px 0;
}

.pagina {
    padding: 0;
    margin: 0;
    width: 100%;
    padding-bottom: 100px;
}

.Ttulo2 {
    color: #006394;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 20px;
}

.Ttulo3 {
    color: #1daba7;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
}

.title {
    display: flex;
    align-items: center;
}

.title .icon {
    background-color: #1daba7;
    padding: 10px;
    border-radius: 10px 0 0 10px;
    height: 64px;
}

.title .icon img {
    width: 42px;
}

.title .text {
    color: #fff;
    padding: 18px;
    border-radius: 0 10px 10px 0;
    font-size: 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 64px;
    margin-bottom: 30px;
}

.title .text.introducao {
    background-color: #f7901e;
}

.title .text.contextualizando {
    background-color: #695da9;
}

.title .text.conectando {
    background-color: #febc11;
}

.title .text.aprofundando {
    background-color: #43b649;
}

.title .text.praticando {
    background-color: #006394;
}

.title .text.video {
    background-color: #006394;
}

.title .text.exercitando {
    background-color: #009c47;
}

.title .text.recapitulando {
    background-color: #d91a21;
}

.title .text.sintetizando {
    background-color: #214080;
}

.title .text:before {
    content: "";
    position: absolute;
    top: 0;
    left: -64px;
    width: 64px;
    height: 64px;
    background-color: #1daba7;
    border-radius: 10px 0 0 10px;
}

.title .text.introducao:before {
    background: #1daba7 url(../images/icon_introducao.png) no-repeat center center / 42px;
}

.title .text.contextualizando:before {
    background: #1daba7 url(../images/icon_contextualizando.png) no-repeat center center / 42px;
}

.title .text.aprofundando:before {
    background: #1daba7 url(../images/icon_aprofundando.png) no-repeat center center / 42px;
}

.title .text.conectando:before {
    background: #1daba7 url(../images/icon_conectando.png) no-repeat center center / 42px;
}

.title .text.praticando:before {
    background: #1daba7 url(../images/icon_praticando.png) no-repeat center center / 42px;
}

.title .text.sintetizando:before {
    background: #1daba7 url(../images/icon_sintetizando.png) no-repeat center center / 42px;
}

.title .text.exercitando:before {
    background: #1daba7 url(../images/icon_exercitando.png) no-repeat center center / 42px;
}

.title .text.recapitulando:before {
    background: #1daba7 url(../images/icon_recapitulando.png) no-repeat center center / 42px;
}

.title .text.video:before {
    background: #1daba7 url(../images/icon_video.png) no-repeat center center / 42px;
}

.content {
    color: #58595b;
    font-weight: 380;
    padding: 20px 50px;
    margin: 0;
}

.content-small {
    color: #58595b;
    font-weight: 380;
    padding: 20px;
    margin: 0;
}

.content p {
    margin-top: 10px;
}

.content p strong {
    font-weight: 600;
}

.box {
    background-color: #dbdbdb;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}

.box:before {
    color: #fff;
    background-color: #1daba7;
    width: 180px;
    position: absolute;
    top: -20px;
    left: 20px;
    height: 44px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0 0 4px 32px;
    box-shadow: 0px 4px 1px #bdbcbc;
}

.aquinomaranhao {
    background-color: #c5cfdf;
    padding: 20px;
    padding-top: 50px;
    border-radius: 10px;
    position: relative;
}

.aquinomaranhao:before {
    content: "#AQUINOMARANHAO";
    color: #414042;
    position: absolute;
    top: 14px;
    left: 24px;
    font-size: 22px;
    font-weight: 600;
}

.box.saiba-mais:before {
    content: "SAIBA MAIS";
    background: #1daba7 url(../images/icon_saibamais.png) no-repeat 8px center / 36px;
}

.box.curiosidade:before {
    content: "CURIOSIDADE";
    width: 200px;
    background: #1daba7 url(../images/icon_curiosidade.png) no-repeat 8px center / 36px;
}

.box.dicas:before {
    content: "DICAS";
    width: 140px;
    padding: 10px 0 4px 32px;
    background: #1daba7 url(../images/icon_dicas.png) no-repeat 8px center / 36px;
}

.box.fique-ligado:before, .box.fique-atento:before {
    content: "FIQUE LIGADO";
    width: 210px;
    background: #1daba7 url(../images/icon_fiqueligado.png) no-repeat 8px center / 36px;
}

.box.atencao:before {
    content: "ATENÇÃO";
    background: #1daba7 url(../images/icon_atencao.png) no-repeat 8px center / 36px;
}

.box.video:before {
    content: "VÍDEO";
    background: #1daba7 url(../images/icon_video.png) no-repeat 8px center / 36px;
}

.box.confira:before {
    content: "CONFIRA";
    background: #1daba7 url(../images/icon_confira.png) no-repeat 8px center / 36px;
}

.box.saiba-mais,
.box.curiosidade,
.box.dicas,
.box.fique-ligado,
.box.fique-atento,
.box.atencao,
.box.video,
.box.confira {
    margin-top: 54px;
    margin-bottom: 30px;
}

.box.saiba-mais div,
.box.curiosidade div,
.box.dicas div,
.box.fique-ligado div,
.box.fique-atento div,
.box.atencao div,
.box.video div,
.box.confira div {
    padding: 20px 10px 0;
}

.box .fonte {
    font-size: 12px;
}

.box.verde {
    background-color: #c4e2df !important;
}

.box.laranja {
    background-color: #ffe5ca !important;
}

.box .fonte a {
    color: #000;
}

body {
    font-family: Helvetica, Tahoma;
}

.interacao {
    position: relative;
}

.interacao.visto:before {
    display: none;
}

.interacao:before {
    content: "";
    background: url(cursor.png) no-repeat center / contain;
    animation: pulse 1s infinite;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 14px;
    right: 6px;
    z-index: 9;
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

.anima-1 {
    background: url(anima-1.png) 0 0 no-repeat;
    width: 112px;
    height: 411px;
    animation: anima-1 7s infinite steps(13);
}

@keyframes anima-1 {
    from {
        background-position: 0;
    }

    to {
        background-position: -1466px;
    }
}

.anima-2 {
    background: url(anima-2.png) 0 0 no-repeat;
    width: 190px;
    height: 272px;
    animation: anima-2 4s infinite steps(7);
}

.blue {
    color: #006394;
}

.green {
    color: #18b1a7;
}

.bg-c {
    background-color: #695da9;
    color: #fff;
    text-align: center;
    padding: 5px;
}

.bg-g {
    background-color: #18b1a7;
    color: #fff;
    text-align: center;
    padding: 5px;
}

.bg-o {
    background-color: #f7901e;
    color: #fff;
    padding: 5px;
}

.bg-bc {
    background-color: #3ea3d4;
    color: #fff;
    padding: 5px;
}

@keyframes anima-2 {
    from {
        background-position: 0;
    }

    to {
        background-position: -1332px;
    }
}

.anima-3 {
    background: url(anima-3.png) 0 0 no-repeat;
    width: 79px;
    height: 142px;
    animation: anima-3 7s infinite steps(12);
}

@keyframes anima-3 {
    from {
        background-position: 0;
    }

    to {
        background-position: -949px;
    }
}

.anima-4 {
    background: url(anima-4.png) 0 0 no-repeat;
    width: 166px;
    height: 278px;
    animation: anima-4 6s infinite steps(10);
}

@keyframes anima-4 {
    from {
        background-position: 46px;
    }

    to {
        background-position: -1608px;
    }
}

.anima-5 {
    background: url(anima-5.png) 0 0 no-repeat;
    width: 162px;
    height: 264px;
    animation: anima-5 6s infinite steps(8);
}

@keyframes anima-5 {
    from {
        background-position: 0;
    }

    to {
        background-position: -1319px;
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

.aos-all {
    width: 100%;
    max-width: 98%;
    margin: 0;
}

.aos-item {
    display: inline-block;
    width: 33.3333%;
    height: 300px;
    padding: 20px;
}

.aos-item__inner {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    background: #1da4e2;
    line-height: 260px;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 800px) {
    .aos-item {
        width: 50%;
    }
}

.box-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box-tab .tab {
    cursor: pointer;
    padding: 10px 25px;
    margin: 0px -1px;
    background: #28ccd0;
    color: #fff;
    border-radius: 3px 3px 0px 0px;
    display: inline-block;
}

.box-tab .tabs {
    width: 100%;
    float: left;
}

.box-tab .panels {
    background: #fffffff6;
    min-height: 260px;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    padding: 20px;
}

.box-tab .panel {
    display: none;
    animation: fadein .8s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.box-tab .tab-title {
    width: 100%;
    float: left;
    margin-bottom: 10px;
    font-size: 1.5em;
    font-weight: bold
}

.box-tab .radio {
    display: none;
}

.box-tab #rd-1:checked~.panels #btn-tab-1,
.box-tab #rd-2:checked~.panels #btn-tab-2,
.box-tab #rd-3:checked~.panels #btn-tab-3 {
    display: block
}

.box-tab #rd-1:checked~.tabs #tab-1,
.box-tab #rd-2:checked~.tabs #tab-2,
.box-tab #rd-3:checked~.tabs #tab-3 {
    background: #fffffff6;
    color: #000;
    border-top: 3px solid #28ccd0;
}