/* Geral */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
}

.testeFonte{
    font-family: 'iskra', sans-serif;
    left: 50px;
    top: 30px;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 47px;
    /* identical to box height */
    color: black;
}



/* width */

@media (pointer:none),
(pointer:coarse) {
    .box-saibamais {
        flex-direction: column !important;
    }

    .titulos {
        margin: 0;
        width: 100vw !important;
        padding-bottom: 100px !important;
    }


}

@media (min-width:1279px) {
    .para-01 {
        margin-top: 20% !important;
    }

    .para-02 {
        margin-top: 10% !important;
    }


}


@media screen and (max-width: 991px) {

    .para-03 {
        margin-top: 0% !important;
    }

    .para-03-margin {
        margin-left: 0% !important;
    }

    .para-04 {
        margin-bottom: 0% !important;
    }

    .capaImg01 {
        margin-bottom: 0px !important;
    }

}

.olAlpha {
    counter-reset: list;
}

.olAlpha>li {
    list-style: none;
    position: relative;
}

.olAlpha>li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}


::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}

/* Track */

::-webkit-scrollbar-track {
    background: #343434;
    border-radius: 10px;
}

#overlay-referencias p {

    color: #000;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: #8c8c8c;
    border-radius: 10px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}

/* Font on Video Subtitle */

video::-webkit-media-text-track-display {
    font-size: 20px !important;
}

@font-face {
    font-family: Myriad Pro;
    src: url('../fonts/myriad-pro/MyriadProRegular.eot'), url('../fonts/myriad-pro/MyriadProBold.eot');
    src: url('../fonts/myriad-pro/MyriadProRegular.eot') format('embedded-opentype'), url('../fonts/myriad-pro/MyriadProBold.eot') format('embedded-opentype'), url('../fonts/myriad-pro/MyriadProRegular.woff2') format('woff2'), url('../fonts/myriad-pro/MyriadProBold.woff2') format('woff2'), url('../fonts/myriad-pro/MyriadProRegular.woff') format('woff'), url('../fonts/myriad-pro/MyriadProBold.woff') format('woff'), url('../fonts/myriad-pro/MyriadProRegular.ttf') format('truetype'), url('../fonts/myriad-pro/MyriadProBold.ttf') format('truetype'), url('../fonts/myriad-pro/MyriadProRegular.svg#MyriadProRegular') format('svg'), url('../fonts/myriad-pro/MyriadProBold.svg#MyriadProBold') format('svg');
}




@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    /* background: #f6f6f6 url(../img/_template/body-pattern.png); */
    background: #e2e2f1;
    color: #000;
    overflow-x: hidden;
    background-attachment: fixed;
}


@media screen and (min-width: 1017px) {
    .titulocapa1 {
        font-size: 25px;
    }

    .tituloaula {
        font-size: 85px;
        color: #ffffff;
    }

    .titulocursobim {
        font-size: 25px;
    }
}

@media screen and (max-width: 1016px) {
    .titulocapa1 {
        font-size: 18px;
    }

    .tituloaula {
        font-size: 42px;
    }

    .titulocursobim {
        font-size: 25px;
    }
}

@media screen and (max-width: 768px) {

    .resp-10 {
        margin-top: 0px !important;
    }
}


.blocos {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.blocos13 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.blocos2row {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    justify-content: center;
    align-items: stretch;
}

.blocos2row .boxvermelho p {
    color: #fff !important;
    font-size: 1.33em;
}

.blocos2row div p {
    color: #6a6a6a;
    font-size: 1.33em;
}

.boxnumerado p {
    color: #6a6a6a !important;
    font-size: 3.33em !important;
}

.blocos13 div p {
    color: #fff;
    font-size: 1.33em;
}


.blocos2row div:not(.boxnumerado) {
    margin: 15px;
    display: flex;
    min-height: 172px;
    flex: 0 0 40%;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

}





.blocos13 div {
    margin: 15px;
    display: flex;
    min-height: 172px;
    flex: 0 0 30%;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.blocos3,
.blocos3nosize {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
}

.blocos3 div {
    flex: 1 1 0px;
    margin: 10px;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

.blocos3nosize div {
    margin: 10px;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

.clicavel {
    cursor: pointer;
}

.blocos3 div p,
.blocos3nosize div p {
    color: #fff;
}

.txtbloc4 {
    font-weight: 400;
    font-size: 1.333em;

}

.pgrande {
    font-size: 2.67em !important;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 900;
}

.pmedio {
    font-size: 2.67em;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 200;
}

.cor1 {
    background-color: #87A5AF;
}

.cor2 {
    background-color: #01C6BC;

}

.cor3 {
    background-color: #FEBA01;

}

.cor4 {
    background-color: #30C3BA;
}

.cor5 {
    background-color: #DC79FF;
}

.cor6 {
    background-color: #52ADED;
}

.corbim {
    background-color: #B02B36 !important;
}

.cor7 {
    background-color: #338BA3 !important;
}


.blocorecapitulando {
    background-color: #FFEEC1;
    border-radius: 5px;
    background-image: url("../img/_template/bg_grafismo-recap.svg");

    background-size: 100% auto;

    -webkit-box-shadow: 1px 1px 20px -4px rgba(0, 0, 0, 0.67);
    box-shadow: 1px 1px 20px -4px rgba(0, 0, 0, 0.67);

}


.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.blocointroducao {
    background-color: #FFFFFF;

    background-image: url("../img/_template/bg_grafismo-recap.svg");

    background-size: 100% auto;

}



.img-text-side {
    display: flex;
}

#NavPaginas {
    width: 60vw !important;
}

.fundotitulocapa1 {
    background: #512608;
    display: inline-block;
    padding: 17px 36px;
    border-radius: 45px;
}

.titulos {
    margin: 0;
    width: 50vw;
    padding-bottom: 180px;
}

.titulocapa1 {
    padding: 0 !important;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: bold;
    line-height: 100%;
    color: #FFF7F7;
    margin: 0;
    text-transform: uppercase;
}

.tituloaula {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 900;
    line-height: 36%;
    /* or 36% */
    margin-top: 30px;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.titulocursobim {
    width: 75%;
    align-items: center;
    padding-top: 25px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: bold;
    line-height: 120%;
    /* or 48 */
    margin: 0 auto;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

h1 {
    color: #6b6b6b;
    font-size: 1.4em;
    text-transform: uppercase;
    margin: 10px 20px;
}

h2 {
    color: #6b6b6b;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 1.3em;
    line-height: 1.8;
}

h3,
h4,
h5,
h6 {
    color: #6b6b6b;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 1.2em;
}

p {
    padding: 10px 20px;
    color: #000;
    font-size: 1em;
    /* line-height: 1.8em; */
}

ul,
ol {
    margin-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    line-height: 1.8em;
}

ul li,
ol li {
    list-style-position: outside;
    margin-left: 25px;
}

p:first-of-type {
    padding-top: 10px;
}

a {
    color: #1977a3;
    text-decoration: underline;
    word-break: break-all;
}

a.tooltip {
    word-break: keep-all !important;
}

a:hover {
    color: #46bad0;
    text-decoration: none;
}

table {
    color: #6b6b6b;
}

video.non-downloadable::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video.non-downloadable::-webkit-media-controls-panel {
    width: calc(100% + 32px);
}

[class*="col-"] {
    width: 100%;
    margin: 0 auto;
}

.row {}

.row::after {
    content: "";
    clear: both;
    display: block;
}

/* --------- Estrutura Template MARROCOS --------- */  


header {
    color: #f6f6f6;
    height: 80px;
    position: relative;
    z-index: 50;
}

header .fixed {
    background: #1a3870;
    height: 80px;
}

/* Menu  */

header nav#menu-principal ul,
header nav#menu-acessibilidade ul {
    list-style: none;
    line-height: normal;
    margin: unset;
    padding: 17px 10px;
    z-index: 9;
}

header nav#menu-principal ul li,
header nav#menu-acessibilidade ul li {
    display: inline-block;
     width: 40px; /* troquei aqui de 35px */
    height: 40px;
    font-size: 1.8em;
    text-align: center;
    cursor: pointer;
    padding-top: 5px;
    margin-left: 5px; 
}

header nav#menu-principal ul li a,
header nav#menu-acessibilidade ul li a {
    color: #f6f6f6;
}

header nav#menu-principal ul li a:hover,
header nav#menu-acessibilidade ul li a:hover,
header nav#menu-acessibilidade ul li i:hover {
    color: #71ffff !important;
}

header #menu-principal {
    width: auto;
    float: left;
    margin-left: 20px;
}

header #menu-acessibilidade {
    float: right;
    text-align: right;
    margin-right: 20px;
}

header #menu-acessibilidade i.icone-fonte {
    font-size: 14px;
}

.icone-fonte::after {
    content: "\f031";
    font: normal normal normal 1.5em/1 FontAwesome;
}

/* Menu Lateral */

.navlateral {
    height: calc(100% - 80px);
    width: 0;
    position: fixed;
    z-index: 12;
    top: 80px;
    background-color: rgba(36, 36, 36, 0.98);
    overflow-x: hidden;
    overflow-y: auto;
    right: 0;
    transition: 0.5s;
    padding-top: 40px;
    display: none;
}

.navlateral ul {
    list-style: none;
}

.navlateral a {
    padding: 5px 5px 5px 32px;
    text-decoration: none;
    font-size: 1.2em;
    color: #fff;
    display: block;
}

.navlateral a:hover {
    text-decoration: underline;
    font-weight: bold;
    color: #71ffff;
}

.navlateral a.atvmenu {
    font-weight: bold;
    color: #71ffff !important;
}

.navlateral a.visited-menu {
    font-weight: bold;
    color: #71ffff !important;
}

.navlateral a.semivisited-menu {
    font-weight: bold;
    color: #ffa977 !important;
}

.navlateral .closebtn {
    position: fixed;
    top: 100px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    cursor: pointer;
}

.navlateral a.closebtn:hover {
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
}

/* Fim, Menu Lateral */

/* Menu */

header p {
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

header p:first-of-type {
    margin-top: unset;
}

section {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

section::after {
    content: "";
    clear: both;
    display: block;
}

footer {
    background: #242424;
    color: #f6f6f6;
    text-align: center;
}

footer img {
    margin: 0 10px;
}

#wrapper {
    max-width: 1170px;
    margin: 0 auto;
    height: auto;
    position: relative;
}

/* Barra de Progresso */

#progresso {
    height: 6px;
    background: #6b6b6b;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid #6b6b6b;
    z-index: 50;
    padding-top: 1px;
}

#status-progresso {
    background: #71ffff;
    width: 60%;
    height: 4px;
    border-radius: 0 10px 10px 0;
}

#full-height {
    height: 100%;
}

.bg-ajuda {
    background: #dcdcdc;
}

/* Fim, Barra de Progresso */

.container {
    width: 85%;
    max-width: 948px;
    margin: 0 auto;
}

.container::after {
    content: "";
    clear: both;
    display: block;
    ;
}

#logo {
    max-height: 35px;
}

/* --------- Fim, Estrutura Template --------- */

/* --------- Classes úteis --------- */

.legenda {
    font-size: 0.9em;
}

.questao2alt {
    font-size: 1.2em;
    font-weight: 600;
    padding: 0 20px;
    display: flex;

}



.questao4alt {
    font-size: 14px;
    padding: 0 20px;
    display: flex;
    padding: 30px 0px 0px 0px !important;
}

.clear {
    clear: both;
}

.valign {
    display: inline-block;
    vertical-align: middle;
}

/* Alinha os elementos verticalmente */

.fit {
    width: 100%;
    height: auto;
}

/* Se adequar a largura, sempre definir max-width no próprio elemendo */

.left {
    float: left;
    margin-right: 10px;
}

/* Alinha os elementos a esquerda */

.right {
    float: right;
    margin-left: 10px;
}

/* Alinha os elementos a direita */

.inline-element {
    display: inline-block !important;
    margin: unset !important;
}

.center {
    float: unset !important;
    margin: 0 auto;
    display: block !important;
}

/* Alinha os elementos a direita */

.relative {
    position: relative;
}

.fixed {
    position: fixed;
    width: 100%;
}

.bgimgfixed {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Cursor de objeto clicável */

.clickable {
    cursor: pointer;
}

/* Cursor de objeto clicável */

.paddingtopbottom {
    padding: 20px 0;
}

.dotsppatern {
    background: url(../img/_template/dots-pattern.png) repeat;
}

.hidden {
    display: none;
}

/* Oculta o elemento */

.dflex {
    display: flex;
}

.dflexnivel {
    flex: 1;
}

.dflex2 {
    display: flex;
}

.scale {
    transition: all .2s ease-in-out;
}

.scale:hover {
    transform: scale(1.1);
}

/* Aumenta a escala do elemento*/

.hideondesktop {
    display: none !important;
}

/* --------- Fim, Classes úteis --------- */

/* --------- Sessoes --------- */

#sessao-capa {
    width: 100%;
    height: calc(100vh - 80px);
    text-align: center;
    position: relative;
    min-height: 688px;
    background-image: url(../img/BG.png);
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

#sessao-capa #capa-icones {
    width: 100%;
    max-width: 998px;
    height: auto;
    background: url(../img/capa-icones.png) no-repeat center;
    background-size: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 1;
}

#sessao-capa #capa-icones img {
    opacity: 0;
}

#sessao-capa .img-capa {
    width: 90%;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 2;
}

#sessao-capa #rolagem {
    filter: brightness(0);
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 20px;
}

/* --------- Fim, Sessoes --------- */

/* --------- Geral --------- */

.h1estilo1 {
    left: 50px;
    top: 30px;
    /* font-family: 'Roboto', sans-serif; */
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 47px;
    /* identical to box height */
    color: #0a0c14;
}

.h1estilo1 span {
    text-transform: uppercase;
    font-family: 'iskra', sans-serif;
}

.checks *,
.checks2 * {}


.checks {
    margin-left: 20px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 10px;
}

.checks2 {
    margin-left: 25px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 10px;
}

.checks2 p {}

.imgw100 {
    width: calc(100% - 15px);
    height: auto;
}

.imgw30 {
    width: 30%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.1);
}

.imgw70 {
    width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.1);
}

.imgw80 {
    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.1);
}

.imgw90 {
    width: 90%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.1);
}

.imgw50 {
    width: 50%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.1);
}

.subtitulosecao {
    left: 50px;
    top: 241px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 28px;
    text-transform: uppercase;
    align-items: center;
    color: #2B9CA2;
    margin-top: 40px;
}

.subtitulo-bold {
    left: 50px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    margin-top: 15px;
    align-items: center;
    color: #000000;
}

.h1estilo1 span {
    display: inline-block;
    position: relative;
}

.h1estilo1 span::after {
    right: -30px;
    left: unset;
}

.h1estilo2 {
    color: #6b6b6b;
    padding-left: 10px;
    border-left: 4px solid #1977a3;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 1.4em;
    font-weight: bold;
}

.h1estilo3 {
    color: #6b6b6b;
    border-left: none;
    position: relative;
    text-align: center;
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 10px 20px;
    padding: unset !important;
}

.h1estilo3::after {
    content: "";
    height: 3px;
    background: #1977a3;
    width: 8%;
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
}



.duasimgsside {
    display: flex;
    justify-content: center;
    flex-direction: row;
    justify-content: space-around;
}

.duasimgsside div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.cinzalaranjaout {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blococinzalaranja {
    display: flex;
    width: 70%;
    justify-content: center;
    flex-direction: row;
    min-height: 500px;
}

.blococinzalaranja div:first-child {
    display: flex;
    background-color: #EAEAEA;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 100%;
}

.blococinzalaranja div:last-child {
    background-color: #B02B36;
    display: flex;
    align-items: center;
    flex-basis: 100%;



}







.bgazulclaro {
    background: #46bad0;
    color: #f6f6f6 !important;
}

.bgazulclaro p {
    color: #f6f6f6;
}

.bgazul {
    background: #2a9ebd;
    color: #f6f6f6 !important;
}

.bgazul p,
.bgazul h1,
.bgazul h2,
.bgazul h3,
.bgazul h4,
.bgazul h5,
.bgazul h6,
.bgazul .h1estilo1,
.bgazul .h1estilo2,
.bgazul .h1estilo3 {
    color: #f6f6f6;
}

.bgazul .h1estilo1 span::before,
.bgazul .h1estilo1 span::after {
    background: #fff;
}

.bgazulescuro {
    background: #2B9CA2 !important;
    color: #f6f6f6 !important;
}

.bgazulescuro p,
.bgazulescuro h1,
.bgazulescuro h2,
.bgazulescuro h3,
.bgazulescuro h4,
.bgazulescuro h5,
.bgazulescuro h6,
.bgazulescuro .h1estilo1,
.bgazulescuro .h1estilo2,
.bgazulescuro .h1estilo3 {
    color: #f6f6f6;
}

.bgazulescuro .h1estilo1 span::before,
.bgazulescuro .h1estilo1 span::after {
    background: #fff;
}

.bgbranco {
    background: #ffffff;
    border: 3px #ffffff solid;
    -webkit-box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
    box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
}
.bgbranco2 {
    background-image: url(../img/aula-00/bg-fundo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* border: 3px #ffffff solid; */
    -webkit-box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
    box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
}
.bgbranco3 {
    background-image: url(../img/aula-00/bg-fundo3.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* border: 3px #ffffff solid; */
    -webkit-box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
    box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
}
.bgbranco4 {
    background: #1a3870;
    /* border: 3px #ffffff solid; */
    -webkit-box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
    box-shadow: 1px 1px 38px -4px rgba(0, 0, 0, 0.67);
}





.bgcinzaescuro {
    background: #343434;
    color: #f6f6f6 !important;
}

.bgcinzaescuro p,
.bgcinzaescuro h1,
.bgcinzaescuro h2,
.bgcinzaescuro h3,
.bgcinzaescuro h4,
.bgcinzaescuro h5,
.bgcinzaescuro h6,
.bgcinzaescuro .h1estilo1,
.bgcinzaescuro .h1estilo2,
.bgcinzaescuro .h1estilo3 {
    color: #f6f6f6;
}

.bgcinzaescuro .h1estilo1 span::before,
.bgcinzaescuro .h1estilo1 span::after {
    background: #fff;
}

.bgcinzaescuro a {
    color: #46bad0;
}

.bgcinzaescuro a:hover {
    color: #00ffff;
}

.bgazulescuro a,
.bgazul a {
    color: #7eeaff;
}

.bgazulescuro a:hover,
.bgazul a:hover {
    color: #00ffff;
}

/* mark {
    background-color: #ffff00; 
    color: #7c7c7c !important;
} */

/* --------- Boxes Destaque --------- */








.box {
    width: 95%;
    margin: 15px auto;
    background: #DADADA;
    border-left: 10px solid #52ADED;
    max-width: 900px;
}

.boxlaranja {
    width: 95%;
    margin: 15px auto;
    background: #DADADA;
    border-left: 10px solid #FAB83E;
    max-width: 900px;
}

.boxvermelho {
    width: 95%;
    margin: 15px auto;
    background: #e08485;
    border-left: 10px solid #ED595A;
    max-width: 900px;
}


.boxlilas {
    width: 95%;
    margin: 15px auto;
    background: #DADADA;
    border-left: 10px solid #DC79FF;
    max-width: 900px;
}

.boxverde {
    width: 95%;
    margin: 15px auto;
    background: #DADADA;
    border-left: 10px solid #30C3BA;
    max-width: 900px;
}

.box1 {
    width: 95%;
    margin: 15px auto;
    border: 6px solid #1977a3;
    max-width: 900px;
    padding: 6px;
}




.box2 {
    width: 95%;
    margin: 15px auto;
    max-width: 900px;
    background: rgba(211, 211, 211, 1);
    box-sizing: border-box;
}

.box2 p.box {
    background: rgba(0, 0, 0, 0.15);
    font-size: 1.2em;
    font-weight: bold;
}

.box2-color {
    width: 95%;
    margin: 15px auto;
    max-width: 900px;
    background: #1977a3;
    color: #fff !important;
}

.boxlinhaabaixolaranja {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    margin: 15px auto;
    max-width: 900px;
    background: #E1E1E1;
    color: #000 !important;
    border-bottom: 10px #FAB83E solid;
}

.boxlinhaesquerdaazul {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: 15px auto;
    max-width: 900px;
    background: #E1E1E1;
    color: #000 !important;
    border-left: 10px #2B9CA2 solid;
    flex-direction: column;
}


.boxlinhaabaixoroxo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    margin: 15px auto;
    max-width: 900px;
    background: #E1E1E1;
    color: #000 !important;
    border-bottom: 10px #DC79FF solid;
}



.boxlinhaabaixolaranja p,
.boxlinhaabaixoroxo p {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 1.3em;
    color: #000 !important;

}


.box2-color p {
    color: #fff;
}

.box2-color p.titulobox {
    text-align: center;
    background: rgba(0, 0, 0, 0.15);
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}

.box2-color a {
    color: #fff;
    text-decoration: underline;
}

.box2-color a:hover {
    text-decoration: none;
}

.box3 {
    width: 95%;
    margin: 15px auto;
    max-width: 900px;
    border-bottom: 2px solid #343434;
    border-top: 2px solid #343434;
    background: rgba(211, 211, 211, 1);
}

.box4 {
    width: 95%;
    margin: 15px auto;
    max-width: 900px;
    position: relative;
    border-left: 2px solid #1977a3;
    border-bottom: 2px solid #1977a3;
    border-right: 2px solid #1977a3;
}

.box4::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0px;
    background-color: #1977a3;
}

.box4::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #426e9a;
    border-radius: 50%;
    left: 50%;
    margin-left: -3px;
    top: -2px;
}

.box4 .titulobox {
    color: #1977a3;
}

.box4 .titulobox::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 5px;
    background-color: #e5e5e5;
    left: 50%;
    margin-left: -14px;
    top: -1px;
}

.box5 {
    width: 60%;
    border-left: #2B9CA2 4px solid;
    margin: 15px auto;
    max-width: 900px;
    background-color: #d4d4d4;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2);
}

.box6-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.box6 {
    border: 3px solid #343434;
    display: inline-block;
    margin: 10px auto;
    position: relative;
    width: auto;
    background: rgb(238, 238, 238);
}

.box6 .corners {
    position: relative;
    display: block;
    margin: 0;
    padding-bottom: 20px;
    z-index: 5;
    text-align: justify;
}

.box6::before,
.box6::after {
    content: '';
    position: absolute;
    background: rgb(238, 238, 238);
}

.box6::before {
    width: calc(100% + 70px + 4px - 120px);
    height: calc(100% + 6px);
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    z-index: 1;
}

.box6::after {
    height: calc(100% + 70px + 4px - 120px);
    width: calc(100% + 6px);
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    z-index: 1;
}

.titulobox {
    color: #6b6b6b;
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 0 !important;
    text-transform: uppercase !important;
}



.box-importante *,
.box-dica *,
.box-saibamais *,
.box-cliqueaqui *,
.box-curiosidades * {
    color: #fff;

}

.box-importante {
    background-color: #E84E2C;
    position: unset;
    padding: 15px;
    padding-right: 0;
    margin-top: 35px;
    margin-bottom: 35px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}


.icon-importante {
    background-repeat: no-repeat;
    background-image: url(../img/_template/icon_importante.svg);
    background-size: 100% auto;
    min-width: 70px;
    padding: 20px;
    background-position: center;
}

.box-curiosidades {
    background-color: #338BA3;
    position: unset;
    padding: 15px;
    padding-right: 0;
    margin-top: 35px;
    margin-bottom: 35px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}


.icon-curiosidades {
    background-repeat: no-repeat;
    background-image: url(../img/_template/icon_curiosidades.svg);
    background-size: 100% auto;
    min-width: 70px;
    padding: 20px;
    background-position: center;
}



.box-dica {
    background-color: #D6B300;
    position: unset;
    padding: 15px;
    padding-right: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.icon-dica {
    background-repeat: no-repeat;
    background-image: url(../img/_template/icon_dica.svg);
    background-size: 100% auto;
    min-width: 70px;
    padding: 20px;
    background-position: center;
}

.box-saibamais {
    background-color: #2C83E8;
    position: unset;
    padding: 15px;
    padding-right: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.icon-saibamais {

    background-repeat: no-repeat;
    background-image: url(../img/_template/icon_saibamais.svg);
    background-size: 100% auto;
    min-width: 70px;
    padding: 20px;
    background-position: center;
}

.box-cliqueaqui {
    background-color: #30C3BA;
    position: unset;
    padding: 15px;
    padding-right: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.icon-cliqueaqui {

    background-repeat: no-repeat;
    background-image: url(../img/_template/icon_cliqueaqui.svg);
    background-size: 100% auto;
    min-width: 70px;
    padding: 20px;
    background-position: center;
}


/* BOX CITAÇÃO */

.box-citacao {
    width: 100%;
    margin: 0 auto;
    padding: 38px 0 15px 0;
    position: relative;
    text-align: left;
    background: #2B9CA2;
}

.box-citacao .container {
    width: 95%;
    max-width: 800px;
}

.box-citacao p,
.box-citacao h2,
.box-citacao h3,
.box-citacao h4,
.box-citacao h5,
.box-citacao h6,
.box-citacao a,
.box-citacao .titulobox {
    color: #f6f6f6;
}

q {
    position: relative;
    z-index: 2;
    color: #f6f6f6;
}

q::before {
    content: "\f10d";
    font: normal normal normal 3em/1 FontAwesome;
    position: absolute;
    left: -30px;
    top: -22px;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0.9;
    z-index: -1;
}

q::after {
    content: "\f10e";
    font: normal normal normal 1.4em/1 FontAwesome;
    position: absolute;
    right: -22px;
    bottom: -5px;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0.9;
    z-index: -1;
}

.autor,
p.autor:first-of-type {
    text-align: center;
    padding: 0;
}

.autor::before {
    content: "- "
}

/* FIM BOX CITAÇÃO */

/* IMPORTANTE */

.box.importante {
    border-left: 4px solid #ec772a;
}

.box1.importante {
    border: 6px solid #ec772a
}

.importante,
.saibamais,
.dica,
.vcsabia {
    padding-right: 90px;
    position: relative;
    background: rgba(238, 238, 238, 0.5);
}

.importante::after {
    content: "\f06a";
    font: normal normal normal 5em/1 FontAwesome;
    color: #ec772a;
    font-size: 5em !important;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
}

.importante .titulobox {
    color: #ec772a;
}

.bt-importante {
    background: #ec772a !important;
    text-transform: uppercase;
    font-weight: bold;
}


.bt-border.bt-importante {
    box-shadow: inset 0 0 0 4px #ec772a, 0 0 1px transparent;
    color: #fff !important;
}

.bt-border.bt-importante:hover {
    background: none !important;
    color: #ec772a !important;
}

/* FIM, IMPORTANTE */

/* SAIBAMAIS */

.saibamais {
    padding-right: 70px;
}

.saibamais::after {
    content: "\f00e" !important;
    color: #48ab97 !important;
    font: normal normal normal 4em/1 FontAwesome !important;
    font-size: 4em !important;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
}

.saibamais .titulobox {
    color: #48ab97;
}

.box.saibamais {
    border-left: 4px solid #48ab97;
}

.box1.saibamais {
    border: 6px solid #48ab97
}

.bt-saibamais {
    background: #48ab97 !important;
    text-transform: uppercase;
    font-weight: bold;
}

.bt-border.bt-saibamais {
    box-shadow: inset 0 0 0 4px #48ab97, 0 0 1px transparent;
    color: #fff !important;
}

.bt-border.bt-saibamais:hover {
    background: none !important;
    color: #48ab97 !important;
}

/* FIM, SAIBA MAIS */

.tabelaazul {
    background-color: #52ADED !important;
    ;
    color: #fff !important;
    font-weight: 700 !important;
    ;
}

.tabelaazul * {
    color: #fff !important;
}

td,
th {
    text-align: left;
    border: 2px solid #fff;
}

/* DICA */

.dica {
    padding-right: 70px;
}

.dica::after {
    content: "\f0eb";
    color: #f6c20e;
    font: normal normal normal 5em/1 FontAwesome;
    font-size: 5em !important;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
}

.dica .titulobox {
    color: #f6c20e;
}

.box.dica {
    border-left: 4px solid #f6c20e;
}

.box1.dica {
    border: 6px solid #f6c20e
}

.bt-dica {
    background: #f6c20e !important;
    text-transform: uppercase;
    font-weight: bold;
    color: #cb7f00 !important;
}

.bt-dica i {
    font-size: 18px;
}

.bt-dica:hover {
    color: #6b6b6b !important;
}

.bt-border.bt-dica {
    box-shadow: inset 0 0 0 4px #f6c20e, 0 0 1px transparent;
    color: #cb7f00 !important;
}

.bt-border.bt-dica:hover {
    background: none !important;
    color: #f6c20e !important;
}

/* FIM, DICA */

/* VOCÊ SABIA */

.vcsabia {
    padding-right: 100px;
}

.vcsabia::after {
    content: "\f0e6";
    color: #6872d7;
    font: normal normal normal 5em/1 FontAwesome;
    font-size: 5em !important;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
}

.vcsabia .titulobox {
    color: #6872d7;
}

.box.vcsabia {
    border-left: 4px solid #6872d7;
}

.box1.vcsabia {
    border: 6px solid #6872d7
}

.bt-vcsabia {
    background: #6872d7 !important;
    text-transform: uppercase;
    font-weight: bold;
}

.bt-border.bt-vcsabia {
    box-shadow: inset 0 0 0 4px #6872d7, 0 0 1px transparent;
    color: #fff !important;
}

.bt-border.bt-vcsabia:hover {
    background: none !important;
    color: #6872d7 !important;
}

/* FIM, VOCÊ SABIA */

/* BOTÕES BOXES DIVERSOS */

.bt-importante i,
.bt-saibamais i,
.bt-dica i,
.bt-vcsabia i {
    display: inline;
    vertical-align: middle;
    font-size: 20px;
    padding-left: 5px;
}

.overlay .importante2,
.overlay .importante2 p,
.overlay .importante2 .titulobox,
.importante2 p,
.importante2 .titulobox .overlay .saibamais2 p,
.overlay .saibamais2 .titulobox,
.saibamais2 p,
.saibamais2 .titulobox,

.overlay .vcsabia2 p,
.overlay .vcsabia2 .titulobox,
.vcsabia2 p,
.vcsabia2 .titulobox {
    color: #fff;
}

.feedbackRespostaCerta p,
.feedbackRespostaErrada p {
    color: #fff;
    text-align: center;
    font-size: 1.4em;
    line-height: 1.5em;

}

.popuptextooverlay p {
    color: #fff;
    text-align: center;
    font-size: 1.7em;
    line-height: 1.3em;
}


.overlay-content.feedbackRespostaCerta,
.overlay-content.feedbackRespostaErrada {
    height: auto !important;
    width: 80vw !important;
    min-height: 25vh !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.header-overlay {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.body-overlay {
    background-color: rgba(255, 255, 255, 0.4);
    width: 100%;
    height: calc(25vh - 50px);
}

.overlay-content.popuptextooverlay {
    height: auto !important;
    width: 25vw !important;
    min-height: 25vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
}



.closeoverlaynormal {
    margin-top: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 1.5em;
    background: #1977a3;
    color: #fff;
    padding: 2px 5px 5px 5px;
    z-index: 1;
}


.popuptextooverlay .closeoverlay,
.feedbackRespostaCerta .closeoverlay,
.feedbackRespostaErrada .closeoverlay {
    background: rgb(0, 0, 0, 0.6) !important;
    padding: 5px 5px 5px 5px !important;
    right: 20px !important;
    display: flex !important;
}

.overlay .dica2,
.overlay .dica2 p,
.overlay .dica2 .titulobox,
.dica2 p,
.dica2 .titulobox {
    color: #cb7f00;
}

.dica2 a {
    color: #9c6200;
}

.dica2 a:hover {
    color: #bb801d;
}

.saibamais2 a {
    color: #9fecdc;
}

.saibamais2 a:hover {
    color: #44ecca;
}

.vcsabia2 a {
    color: #92a0e7;
}

.vcsabia2 a:hover {
    color: #a6b6ef;
}

.importante2 a {
    color: #ffd4b7;
}

.importante2 a:hover {
    color: #f7b488;
}

.importante2 p:first-child,
.saibamais2 p:first-child,
.feedbackRespostaCerta .header-overlay p:first-child,
.feedbackRespostaErrada .header-overlay p:first-child,
.dica2 p:first-child,
.vcsabia2 p:first-child {
    font-size: 1.2em;
    font-weight: bold;
}

.importante2,
.saibamais2,
.dica2,
.vcsabia2 {
    padding-left: 70px !important;
    background: #ec772a !important;
    max-width: 650px !important;
}

.saibamais2 {
    background: #48ab97 !important;
}

.feedbackRespostaCerta {
    background: #30C3BA !important;

}

.popuptextooverlay {
    background: #B02B36 !important;
}



.feedbackRespostaErrada {
    background: #E84E2C !important;

}

.dica2 {
    background: #f6c20e !important;
}

.vcsabia2 {
    background: #6872d7 !important;
}

.importante2::after,
.saibamais2::after,
.dica2::after,
.vcsabia2::after {
    content: "";
    font: normal normal normal 4em/1 FontAwesome;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
}

.importante2::after {
    content: "\f06a";
}

.saibamais2::after {
    content: "\f00e";
}

.dica2::after {
    content: "\f0eb";
    color: #cb7f00;
    font-size: 5em;
    left: 20px;
}

.vcsabia2::after {
    content: "\f0e6";
}

.importante2 i,
.saibamais2 i,
.vcsabia2 i {
    background: #fff !important;
    color: #ec772a !important;
}

.saibamais2 i {
    color: #48ab97 !important;
}

.dica2 i {
    background-color: #cb7f00 !important;
    color: #f6c20e !important;
}

.vcsabia2 i {
    color: #6872d7 !important;
}

/* FIM, BOTÕES BOXES DIVERSOS */

/* BOX RECAPITULANDO */

.recapitulando {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

/* FIM, BOX RECAPITULANDO */

/* --------- Fim, Boxes Destaque --------- */

/* ---------  Recursos --------- */

/* Tabelas */

.tabela {
    overflow-x: auto;
    margin: 10px;
}

.tabela table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    max-width: 980px;
    margin: 0 auto;
}

.tabela table th {
    font-weight: bold;
}

.tabela table th,
.tabela table td {
    text-align: center;
    padding: 5px;
}

.tabela table tr:nth-child(even) {
    background-color: #cdcdcd
}

.tabela table tr:nth-child(odd) {
    background-color: #c0c0c0
}

/* --------------- */

.tabela2 {
    overflow-x: auto;
    margin: 10px;
}

.tabela2 table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    border: 1px solid #6b6b6b;
}

.tabela2 table th {
    font-weight: bold;
}

.tabela2 table tr:first-child {
    background: #1977a3;
    color: #f6f6f6;
}

.tabela2 table tr:first-child th {
    border: none;
    padding: 10px 0;
}

.tabela2 table tr:first-child tr {
    border: 1px solid #6b6b6b;
}

.tabela2 table th,
.tabela2 table td {
    text-align: center;
    padding: 5px;
    border: 1px solid #6b6b6b;
}

/* --------------- */

.tabela3 {
    overflow-x: auto;
    margin: 10px;
}

.tabela3 table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    max-width: 980px;
    margin: 0 auto;
}

.tabela3 table th {
    font-weight: bold;
}

.tabela3 table tr:first-child {
    background: #343434 !important;
    color: #f6f6f6;
}

.tabela3 table th,
.tabela3 table td {
    text-align: center;
    padding: 5px;
}

.tabela3 table tr:nth-child(even) {
    background-color: #cdcdcd
}

.tabela3 table tr:nth-child(odd) {
    background-color: #c0c0c0
}

/* Fim, Tabelas*/

/* Destaques sobre imagem */

#highlight-img {
    position: relative;
}

.highlight-spot {
    background: rgba(255, 255, 255, 0.5);
    border: 3px solid #000;
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    color: #000;
    text-decoration: none;
    z-index: 2;
}

.highlight-spot:hover::after {
    content: "\f111";
    font: normal normal normal 1.5em/1 FontAwesome;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    color: #000;
}

.highlight-spot-visited::after {
    content: "\f00c";
    font: normal normal normal 1.5em/1 FontAwesome;
    top: 32%;
    left: 32%;
    position: relative;
}

.highlight-spot-1 {
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    text-decoration: none;
    z-index: 2;
    background: rgba(32, 157, 219, 1);
    position: absolute;
    color: #fff;
}

.highlight-spot-1:hover {
    background: rgba(32, 157, 219, 1);
    -webkit-box-shadow: 0px 0px 0px 5px rgba(32, 157, 219, 1);
    -moz-box-shadow: 0px 0px 0px 5px rgba(32, 157, 219, 1);
    box-shadow: 0px 0px 0px 5px rgba(32, 157, 219, 1);
    color: #fff;
}

.highlight-spot-1-visited {
    background: #089c40;
}

.highlight-spot-2 {
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #000;
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    color: #000;
    text-decoration: none;
    z-index: 2;
}

.highlight-spot-2:hover {
    background: rgba(255, 255, 255, 0.8);
    color: #000;
}

.highlight-spot-2-visited {
    background: rgba(30, 159, 89, 0.9);
    border: 2px solid #fff
        /*#00531f*/
    ;
}

.highlight-spot-2-visited::after {
    color: #fff;
}

.highlight-spot-2-visited:hover::after {
    color: #000;
}

#grafico-spot {
    top: 38%;
    right: 13%;
}

#grafico-spot::after {
    content: "\f080";
    font: normal normal normal 1.5em/1 FontAwesome;
    position: relative;
    top: 30%;
    left: 30%;
}

#item-spot {
    top: 45%;
    left: 15%;
}

#arquivo-spot {
    top: 65%;
    right: 5%;
}

#arquivo-spot::after {
    content: "\f0f6";
    font: normal normal normal 1.5em/1 FontAwesome;
    position: relative;
    top: 31%;
    left: 35%
}

.layer {
    position: absolute;
    background: #302d2d;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    overflow-y: auto;
    z-index: 11;
}

.layer p,
.layer h1,
.layer h2,
.layer h3,
.layer h4,
.layer h5,
.layer h6,
.layer ul {
    color: #fff;
}

.closelayer {
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 1.4em;
    cursor: pointer;
}

.closelayer:hover {
    color: #a1a1a1;
}

/* Fim, destaques sobre imagem */

/* Gráfico animado */

.grafico {
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    margin: 0 auto;
}

#grafico-exemplo {
    max-width: 350px;
    max-height: 300px;
    height: 50%;
    width: 70%;
    position: relative;
}

.barra-grafico {
    width: 20%;
    background: #fff;
    position: absolute;
    bottom: 0;
    max-width: 40px;
    -webkit-animation: carregabarra 6s ease forwards;
    /* Safari 4.0 - 8.0 */
    animation: carregabarra 6s ease forwards;
}

#barra-grafico-1 {
    left: 5%;
    max-height: 25%;
}

#barra-grafico-2 {
    left: 23%;
    max-height: 50%;
}

#barra-grafico-3 {
    left: 41%;
    max-height: 35%;
}

#barra-grafico-4 {
    left: 59%;
    max-height: 60%;
}

#barra-grafico-5 {
    left: 77%;
    max-height: 75%;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes carregabarra {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}

/* Standard syntax */

@keyframes carregabarra {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}

/* Fim, Gráfico animado */

/* Accordion */

.accordion:first-of-type {
    margin-top: 10px;
}

.accordion {
    text-transform: uppercase !important;
    background-color: #969696;
    color: #fff;
    cursor: pointer;
    padding: 10px 20px;
    width: 100%;
    max-width: 1180px;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #f6f6f6;
    border-left: none;
    text-align: left;
    outline: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: 0.4s;
    margin-left: 10px;
}

.active,
.accordion:hover {
    background-color: #6b6b6b;
    color: #f6f6f6;
}

.accordion:hover:after {
    color: #f6f6f6;
}

.accordion:after {
    content: '\f055';
    color: #fff;
    font: normal normal normal 1.2em/1 FontAwesome;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\f056";
    font: normal normal normal 1.2em/1 FontAwesome;
    color: #f6f6f6
}

.panel {
    padding: 0 10px;
    width: 100%;
    background-color: #EBEBEB;
    max-height: 0;
    max-width: 1180px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-left: 10px;
}

/* Fim, Accordion */

/* Linhas do Tempo */

/* Timeline Horizontal */

#timeline {
    margin: 0 auto;
    width: 100%;
    max-width: 980px;
    position: relative;
}

#timeline ol {
    list-style: none;
    width: 100%;
    z-index: 2;
    margin: 0 auto;
    text-align: center;
}

#timeline ol li {
    display: inline-block;
    width: 16%;
    cursor: pointer;
    border-radius: 50%;
}

#timeline ol li:last-child::before {
    display: none;
}

#timeline ol li:nth-child(n+2) {
    margin-left: 2%;
}

.timeline-circle {
    position: relative;
    display: block;
    background-color: transparent;
    color: #222;
    text-align: center;
}

.timeline-circle::before {
    display: block;
    padding-bottom: 10%;
    width: 100%;
    height: 0;
    background-color: #8C8C8C;
    content: "";
    position: absolute;
    top: 50%;
    left: 85%;
    z-index: 0;
}

.timeline-circle::after {
    display: block;
    padding-bottom: 90%;
    width: 90%;
    height: 0;
    border-radius: 50%;
    background-color: #8C8C8C;
    content: "";
    z-index: 2;
    position: relative;
    cursor: pointer;
}

#timeline .timeline-circle:hover::after,
#timeline .visited:hover::after {
    -webkit-box-shadow: 0px 0px 0px 6px rgba(107, 107, 107, 1);
    -moz-box-shadow: 0px 0px 0px 6px rgba(107, 107, 107, 1);
    box-shadow: 0px 0px 0px 6px rgba(107, 107, 107, 1);
}

#timeline .visited::after {
    background: #7c7c7c;
}

.ativo::after {
    background-color: #2a9ebd !important;
}

.ativo:hover::after {
    -webkit-box-shadow: 0px 0px 0px 6px rgba(25, 119, 163, 1) !important;
    -moz-box-shadow: 0px 0px 0px 6px rgba(25, 119, 163, 1) !important;
    box-shadow: 0px 0px 0px 6px rgba(25, 119, 163, 1) !important;
}

.texto-timeline {
    width: 90%;
    max-width: 980px;
    clear: both;
    background: #ddd;
    color: #7c7c7c;
    text-align: left;
    margin: 10px auto;
    display: none;
    border-top: 5px solid #2a9ebd;
}

/* Fim, Timeline Horizontal */

/* Timeline Horizontal 2 */

#timelinehorizontal {
    overflow-x: auto;
    overflow-y: hidden;
    width: 98%;
    max-width: 980px;
    margin: 10px auto;
}

#timelineh2 {
    margin: 0 auto;
    float: none;
    width: 950px;
    height: 70px;
    position: relative;
}

#timelineh2 .data {
    color: #8E5658;
    margin-top: 15px;
    text-align: center;
    top: 0;
    cursor: pointer;
    transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    position: absolute;
    width: auto;
}

#timelineh2 #data_1 {
    left: 0;
}

#timelineh2 #data_2 {
    left: 50px;
}

#timelineh2 #data_3 {
    left: 100px;
}

#timelineh2 #data_4 {
    left: 150px;
}

#timelineh2 #data_5 {
    left: 200px;
}

#timelineh2 #data_6 {
    left: 250px;
}

#timelineh2 #data_7 {
    left: 300px;
}

#timelineh2 #data_8 {
    left: 350px;
}

#timelineh2 #data_9 {
    left: 400px;
}

#timelineh2 #data_10 {
    left: 450px;
}

#timelineh2 #data_11 {
    left: 500px;
}

#timelineh2 #data_12 {
    left: 550px;
}

#timelineh2 #data_13 {
    left: 600px;
}

#timelineh2 #data_14 {
    left: 650px;
}

#timelineh2 #data_15 {
    left: 700px;
}

#timelineh2 #data_16 {
    left: 750px;
}

#timelineh2 #data_17 {
    left: 800px;
}

#timelineh2 #data_18 {
    left: 850px;
}

#timelineh2 .data p {
    line-height: normal;
    margin: 0;
}

#timelineh2 .bullet {
    border-radius: 50%;
    margin-right: 5px;
    width: 10px;
    height: 10px;
    background: #fff;
    display: inline-block;
    -webkit-box-shadow: 0px 0px 0px 4px rgba(42, 158, 189, 1);
    -moz-box-shadow: 0px 0px 0px 4px rgba(42, 158, 189, 1);
    box-shadow: 0px 0px 0px 4px rgba(42, 158, 189, 1);
}

#texto-timeline2 {
    width: 100%;
    clear: both;
    background: #ddd;
    padding: 0 10px 5px 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: all ease-in-out 0.5s;
}

#timelineh2 .data.current {
    top: -5px;
}

#timelineh2 .data.current .bullet {
    -webkit-box-shadow: 0px 0px 0px 6px rgba(42, 158, 189, 1);
    -moz-box-shadow: 0px 0px 0px 6px rgba(42, 158, 189, 1);
    box-shadow: 0px 0px 0px 6px rgba(42, 158, 189, 1);
}

#timelineh2 .data.current p {
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1em;
}

/* Fim, Timeline Horizontal 2 */

/* Timeline Vertical */

#timelinevertical .periodos {
    background: rgba(207, 207, 207, 0.1);
    padding: 0 0 50px 0;
    width: 90%;
    margin: 0 auto;
    min-width: 300px;
    ;
}

#timelinevertical .periodos .data {
    list-style-type: none;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 10px;
}

#timelinevertical .periodos .data::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 1%;
    height: 100%;
    background: #1977a3;
    left: 50%;
}

#timelinevertical .periodos .data::after {
    content: '';
    position: absolute;
    left: 50.5%;
    bottom: 0;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50.5%;
    background: #1977a3;
}

#timelinevertical .periodos .data div.data_cont {
    position: relative;
    bottom: 0;
    width: 44%;
    padding: 0 0 15px 0;
    background: #ddd;
}

#timelinevertical .periodos .data div.data_cont p {
    text-align: left;
    padding: 0 10px;
}

#timelinevertical .periodos .data div.data_cont::before {
    content: '';
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

#timelinevertical .periodos .data:nth-child(even) div.data_cont {
    left: 56%;
}

#timelinevertical .periodos .data:nth-child(even) div.data_cont::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #ddd transparent transparent;
}

#timelinevertical .periodos .data:nth-child(odd) div.data_cont {
    left: 0;
}

#timelinevertical .periodos .data:nth-child(odd) div.data_cont::before {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #ddd;
}

#timelinevertical .periodos .data div.data_cont h6 {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    background: #1977a3;
    color: #fff;
    padding: 2% 0 2% 10px;
    margin-left: 0;
}

/* EFFECTS
        –––––––––––––––––––––––––––––––––––––––––––––––––– */

#timelinevertical .periodos .data::after {
    transition: background .5s ease-in-out;
}

#timelinevertical .periodos .data.in-view::after {
    background: #F45B69;
}

#timelinevertical .periodos .data div.data_cont {
    /*visibility: hidden;
          opacity: 0;*/
    transition: all .5s ease-in-out;
}


/*#timelinevertical .periodos .data:nth-child(odd) div {
          transform: translate3d(200px, 0, 0);
        }

        #timelinevertical .periodos .data:nth-child(even) div {
          transform: translate3d(-200px, 0, 0);
        }*/

#timelinevertical .periodos .data.in-view div.data_cont {
    transform: none;
    visibility: visible;
    opacity: 1;
}

/* GENERAL MEDIA QUERIES
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 720px) {
    .img-text-side {
        display: flex;
        flex-direction: column;
    }

    .blocos4 {
        flex-direction: column !important;
    }

    .blocos4 div {
        width: 100% !important;
    }

    .botoesclicks {
        flex: 50% !important;
        flex-direction: column !important;
    }


    .blocos3,
    .blocos3nosize {
        flex-direction: column !important;
    }

    .blocos13 {
        flex-direction: column !important;
    }

    .blocos2row {
        flex-direction: column !important;
    }

    .blocos13 div {
        min-height: 96px;
    }

    .blococinzalaranja {
        flex-direction: column !important;
        min-height: 0;

    }

    .duasimgsside {
        flex-direction: column !important;

    }

    .outsidebotoesclick {
        width: 50% !important;
    }

}

@media screen and (max-width: 600px) {
    #timelinevertical .periodos .data {
        margin-left: 20px;
    }

    #timelinevertical .periodos .data div.data_cont {
        width: 90%;
    }

    #timelinevertical .periodos .data:nth-child(odd) div.data_cont,
    #timelinevertical .periodos .data:nth-child(even) div.data_cont {
        left: 8%;
    }

    #timelinevertical .periodos .data:nth-child(odd) div.data_cont::before {
        left: -15px;
        border-width: 8px 16px 8px 0;
        border-color: transparent #eaeaea transparent transparent;
    }

    #timelinevertical .periodos .data::before {
        left: 0;
    }

    #timelinevertical .periodos .data::after {
        left: 0.5%;
    }
}

/* Fim, Timeline Vertical */

/* Fim, Linhas do Tempo */

/* Tooltip */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted #1977a3;
    text-decoration: none;
    line-height: 1.2em;
    cursor: pointer;
}

.tooltip:hover {
    border-bottom: 2px dotted #46bad0;
    color: #46bad0;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    /* Posição do text tooltip */
    position: absolute;
    z-index: 12;
    margin-left: -60px;
    /* Fade tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip seta */

.tooltip .tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-top {
    bottom: 125%;
    left: 50%;
}

.tooltip-bottom {
    top: 135%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

/* Exibir o tooltip text ao mouseover */

.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptext-wider {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext-wider {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    /* Posição do text tooltip */
    position: absolute;
    z-index: 12;
    margin-left: -60px;
    /* Fade tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltiptext-wider.tooltip-top,
.tooltiptext-wider.tooltip-bottom {
    left: 10%;
}

/* Fim, Tooltip */

/* Tooglebox 2 */

.contReveal {
    display: none;
    border: solid 1px #6b6b6b;
    border-radius: 10px;
    position: relative;
    width: 90%;
    margin: 10px auto;
}

.closecontReveal {
    background: #1977a3;
    padding: 10px 15px;
    color: #fff;
    margin: -2px auto;
    text-align: center;
    width: 40px;
    cursor: pointer;
    position: absolute;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.closecontReveal:hover {
    background: #46bad0;
}

/* Fim, Tooglebox 2 */

/* Slideshow */

/* Slideshow container */

.slideshow-container {
    position: relative;
}

/* Slideshow */

.slideshow-wrapper {
    width: 100%;
    margin: 15px auto;
}




.caixabtsclick {
    display: flex;
    width: 80%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;


}


.outsidecaixabtsclick {
    margin-top: 35px;
    display: flex;
    justify-content: center;
}

.outsidebotoesclick {
    display: flex;
    width: 33.333%;
    height: 250px;

}


.botoesclicks {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font: normal normal normal 3em/1 FontAwesome;
    font-weight: bold;
    flex: 25%;
    height: 25vh;
    filter: grayscale(100%);
    filter: brightness(70%);
}


.botoesclicks2 {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font: normal normal normal 3em/1 FontAwesome;
    font-weight: bold;
    height: 75%;
    width: 75%;
    background-color: #30C3BA;
}

.botoesclicks3 {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font: normal normal normal 3em/1 FontAwesome;
    font-weight: bold;
    height: 75%;
    width: 75%;
    background-color: #DC79FF;
}

.botoesclicks3:hover,
.botoesclicks2:hover {
    background-color: #4e4e4e;

}


.botoesclicks:hover {
    filter: grayscale(0%);
    filter: brightness(100%);
}


.caixabtsclick .btclick1 {


    background-image: url("../img/aula-02/aula02_img2.png");

}

.caixabtsclick .btclick2 {


    background-image: url("../img/aula-02/aula02_img3.png");

}

.caixabtsclick .btclick3 {

    background-image: url("../img/aula-02/aula02_img4.png");

}

.caixabtsclick .btclick4 {

    background-image: url("../img/aula-02/aula02_img5.png");

}

.overlay-content.pop1 {
    display: flex;
    background-image: url('../img/aula-02/imgpop1.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50vh;
    padding: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.overlay-content.pop2 {
    display: flex;
    background-image: url('../img/aula-02/imgpop2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50vh;
    padding: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.overlay-content.pop3 {
    display: flex;
    background-image: url('../img/aula-02/imgpop3.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50vh;
    padding: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.overlay-content.pop4 {
    display: flex;
    background-image: url('../img/aula-02/imgpop4.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50vh;
    padding: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.overlay-content .textinside {
    display: flex;
    width: 50%;
    height: 25vh;
    background-color: #B02B36;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.overlayfecha:hover {
    background: rgba(0, 0, 0, 0.5);
}

.overlayfecha {
    display: flex;
    min-height: 50vh;
    width: 100px;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    color: #fff;
    font: normal normal normal 3em/1 FontAwesome;
    font-weight: bold;
    cursor: pointer;
}

.overlay-content p {
    color: #fff;
    font-size: 1.33em;
}

.myslideshow {
    display: none;
    padding: 10px 50px;
    min-height: 53vh;
    background-color: #f5f5f5;
    flex-direction: column;
    justify-content: space-between;
    ;

}

.myslideshow input {
    /*
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    */
}

/* On mouse-over, add a grey background color */

.proximo,
.anterior {
    display: inline-block;
    cursor: pointer;
    top: 0px;
    display: inline-block;
    height: 100%;
    min-width: 48px;
    width: auto;
    padding: 12px;
    color: #f6f6f6;
    background: #1a3870;
    font-weight: bold;
    font-size: 2em;
    user-select: none;
    text-decoration: none;
    transition: all ease-in-out 0.3s;
}

.proximoinsta {
    margin-right: 10px;
}

.anteriorinsta {
    margin-left: 10px;
}

.proximoinsta,
.anteriorinsta {
    display: inline-block;
    cursor: pointer;
    top: calc(50% - 50px);
    display: inline-block;
    height: 50px;
    width: 50px;
    padding: 12px;
    color: #000;
    font-weight: bold;
    font-size: 2em;
    user-select: none;
    text-decoration: none;
    transition: all ease-in-out 0.3s;
}

.anterior span,
.proximo span {
    min-height: 100%;
    display: inline-flex;
    align-items: center;
}

.proximoinsta span,
.proximoinsta img {
    position: relative;
    top: -10px;
    left: 2px;
}

.anteriorinsta span,
.anteriorinsta img {
    position: relative;
    top: -10px;
    left: 0;
}

/* Position the "previous button" to the left */

.anterior {
    position: absolute;
    left: 0;
}

.anteriorinsta {
    position: absolute;
    left: 0;
}

/* Position the "next button" to the right */

.proximo {
    position: absolute;
    right: 0;
}

.proximoinsta {
    position: absolute;
    right: 0;
}

/* On hover, add a black background color with a little bit see-through */


/* The dot/bullet/indicator container */

.dot-container {
    text-align: center;
    padding: 5px;
    line-height: 0;
}

/* The dots/bullets/indicators */

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */

.active-slide,
.dot:hover {
    background-color: #1977a3;
}

/* Fim, Slideshow */

.zoomimg {
    cursor: url(../img/_template/cursor-ampliar.svg), auto;
}



/* --------- Fim, Recursos --------- */

#imagembg {
    background-image: url(../img/00-bg-sessao.jpg);
    background-position: center;
    height: auto;
}

#imagembg p,
#imagembg .h1estilo2,
#imagembg .h1estilo3 {
    color: #fff;
}

#imagembg .h1estilo1 span::before,
#imagembg .h1estilo1 span::after,
#imagembg .h1estilo3::after {
    background: #fff;
}

/* Botões */

button.bt-sweep,
button.bt-border {
    border: none;
}

button.bt-sweep:focus,
button.bt-border:focus {
    outline: none;
}

.bt-sweep {
    cursor: pointer;
    display: block;
    color: #fff;
    position: relative;
    margin: 10px auto;
    padding: 1em;
    background: #1977a3;
    z-index: 0;
    border: none;
    transition: color 0.4s ease;
    font-size: 1em;
}

.bt-sweep::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #46bad0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .2s ease-out;
}

.bt-sweep:hover:before {
    transform: scaleX(1);
}

.bt-border {
    display: block;
    vertical-align: middle;
    font-size: 1em;
    margin: 40px auto;
    padding: 10px;
    box-shadow: 0 0 1px transparent;
    transition: background 0.6s;
    -webkit-transition: background 0.6s;
    box-shadow: inset 0 0 0 4px #1977a3, 0 0 1px transparent;
    background: #1977a3;
    cursor: pointer;
    color: #fff;
}

.bt-border:hover {
    background: none;
    color: #1977a3;
}

#mosaico {
    background-color: #46bad0;
}

#mosaico img {
    padding: 10px;
}

/* Overlay */

#fulloverlay,
#ultimoAcesso,
#navegacaoLinear,
#aviso360 {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #242424;
    z-index: 1001;
}

#fulloverlay-content {
    width: 90%;
    max-width: 440px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.31);
    -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.31);
    padding: 5px 15px 20px 15px;
}

#fulloverlay-content .bt-sweep,
#fulloverlay-content .bt-border {
    margin: 5px;
    width: 190px;
    float: left;
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1001;
}

.overlay-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.overlay-content {
    width: 90%;
    max-width: 1000px;
    max-height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.31);
    -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.31);
    overflow-y: auto;
    overflow-x: hidden;
}

.overlay-content .bt-sweep,
.overlay-content .bt-border {
    margin: 0 5px;
    width: 190px;
}

.overlay-content-img {
    padding-bottom: 0;
    max-width: 1366px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.overlay-content .closeoverlay,
.overlay-content-img .closeoverlay {
    display: flex !important;

    cursor: pointer;
    font-size: 1.5em;
    color: #fff;
    z-index: 1;
}

.overlay-content-img .closeoverlay {
    background: #242424;
}

.overlay-content .closeoverlay:hover,
.overlay-content-img .closeoverlay:hover {
    background: #2a9ebd;
}

/* Fim, Overlay */

/* --------- EXERCÍCIOS --------- */

.border-right {
    border-right: 1px solid #6b6b6b;
}

#exercicios-wrapper {
    position: absolute;
    top: 47%;
    transform: translate(0, -47%);
    -ms-transform: translate(0, -47%);
    -webkit-transform: translate(0, -47%);
    -moz-transform: translate(0, -47%);
    width: 100%;
    height: auto;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.95);
}

ol.exercicios {
    list-style: lower-alpha;
    list-style-position: outside;
    margin: 10px 10px 10px 25px;
    line-height: 1.5em;
}

ol.exercicios li input {
    margin-left: 6px;
}

.resposta-exercicio {
    background: #302D2D;
    padding: 0 20px 10px 20px;
    position: relative;
}

.resposta-exercicio p {
    color: #fff;
}

.errado,
.certo,
.atencao {
    padding-left: 70px;
    position: relative;
    display: none;
    top: 50%;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    width: 92%;
    left: 5%;
}

.errado::after,
.certo::after,
.atencao::after {
    content: "";
    color: #fff;
    position: absolute;
    font: normal normal normal 4em/1 FontAwesome;
    width: 56px;
    height: 56px;
    background: url(../img/_template/emoji_triste.png) no-repeat center;
    background-size: contain;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
}

.certo::after {
    background: url(../img/_template/emoji_feliz.png) no-repeat center;
    background-size: contain;
}

.certo {
    background: #3fb890;
}

.errado {
    background: #d94242;
}

.atencao {
    background: #302D2D;
}

.atencao::after {
    content: "\f06a";
    background: none;
}

.errado p:first-child,
.certo p:first-child,
.atencao p:first-child {
    font-weight: bold;
    font-size: 1.4em;
}

input[type="text"] {
    /* Input Text (Preencher verdadeiro ou falso) */
    border: 1px solid rgba(135, 135, 135, 0.8);
    background: white;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 5px;
    vertical-align: middle;
}

select {
    border: 1px solid rgba(135, 135, 135, 0.8);
}

option,
select {
    color: #6b6b6b;
}

input {
    border: none;
}

input:focus {
    outline: none;
}

ol#trueorfalse {
    margin: 30px 10px 10px 25px;
    line-height: 2em;
}

.trueorfalse {
    float: left;
    width: 80px;
    text-align: center;
}

.trueorfalse input[type="radio"] {
    height: 18px;
    width: 18px;
}

.trueorfalse p {
    padding: 0;
    font-weight: bold;
}

.trueorfalse ol,
.trueorfalse ul {
    list-style: none;
    margin-left: 0;
}

#trueorfalse .col-3:first-child {
    margin-top: -10px
}

.col-3 .trueorfalse:nth-child(2) {
    width: 42px;
}

.container_check {
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 25px;
}

/* Oculta o checkbox padrão do navegador */

.container_check input {
    position: absolute;
    /* opacity: 0;*/
    cursor: pointer;
}

/* Cria o checkbox custumizado */

.checkmark {
    position: absolute;
    height: 25px;
    width: 25px;
    background-color: #f6f6f6;
    transform: translateX(-50%);
    border: 1px solid #6b6b6b;
}

/* Mouse-over, adiciona o background cinza 
.container_check:hover input ~ .checkmark {
    background-color: #dedfe0;
}*/

/* Quando o checkbox está marcado, adiciona o fundo azul 
.container_check input:checked ~ .checkmark {
    background-color: #1977a3;
}*/

/* Cria o marcador/indicador (oculto quando não ticado) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Exibe o checkmark quando ticado */

.container_check input:checked~.checkmark:after {
    /* display: block;*/
}

/* Estilo do marcador/indicador */

.container_check .checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #6b6b6b;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Radio button Circular */

.roundeds {
    list-style: none;
    text-align: center;
}

.roundeds:after {
    content: "";
    clear: both;
}

.button-rounded {
    box-sizing: border-box;
    display: inline-block;
    height: 120px;
    position: relative;
    width: 120px;
    border-radius: 100%
}

.myslideshow .button-atividade {
    cursor: pointer;
    background-color: #1780fb;
    /* Green */
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;

    -webkit-box-shadow: 8px 8px 26px -6px rgba(0, 0, 0, 0.71);
    box-shadow: 8px 8px 26px -6px rgba(0, 0, 0, 0.71);

    font-size: 16px;
    /*position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);*/
}

.divbutton-atividade {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
    align-content: flex-end;
}

.divconteudo-atividade {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

}

.imgspraticando3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    margin-bottom: 20px;
}

.imgspraticando3 div {
    display: flex;
    justify-content: center;
    align-items: center;
}




.button-atividade:hover {
    background-color: #1a3870;
}

.button-rounded label {
    background: #fff no-repeat center center;
    bottom: 1px;
    cursor: pointer;
    display: block;
    font-size: 10;
    left: 1px;
    position: absolute;
    right: 1px;
    top: 1px;
    border-radius: 100%;
    border: 1px solid #ccc;
}

.button-rounded label span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.roundeds input {
    /*display: none;*/
}

.button-rounded+.button-rounded {
    margin-left: 25px;
}

.roundeds input:focus+label,
.roundeds input:checked+label {
    border: 3px solid #1977a3;
}

.roundeds input:checked+label:after {}

@-moz-document url-prefix() {
    .roundeds input:checked+label:after {
        bottom: 0;
        right: 0;
        background-color: #1977a3;
    }
}

.overlay .atencao2 {
    padding: 0 20px 10px 70px;
}

.overlay .certo2 p,
.overlay .errado1 p,
.overlay .errado2 p,
.overlay .certo2 .titulobox,
.overlay .errado1 .titulobox,
.overlay .errado2 .titulobox,
.atencao2 p,
.certo2 p,
.errado1 p,
.errado2 p,
.certo2 .titulobox,
.errado1 .titulobox,
.errado2 .titulobox,
.atencao2 .titulobox {
    color: #fff;
}

.atencao2 p:first-child,
.certo2 p:first-child,
.errado1 p:first-child,
.errado2 p:first-child {
    font-size: 1.2em;
    font-weight: bold;
}

.errado1,
.errado2,
.certo2,
.atencao2 {
    padding-left: 70px;
    width: 100%;
    position: relative;
    max-width: 600px;
}

.errado1::after,
.errado2::after,
.certo2::after,
.atencao2::after {
    content: "";
    font: normal normal normal 4em/1 FontAwesome;
    color: #fff;
    position: absolute;
    width: 56px;
    height: 56px;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
}

.errado1::after {
    background: url(../img/_template/emoji_triste.png) no-repeat center;
    background-size: contain;
}

.errado1 {
    background: #FF8C24;
}

.errado2::after {
    background: url(../img/_template/emoji_triste.png) no-repeat center;
    background-size: contain;
}

.errado2 {
    background: #d94242;
}

.certo2::after {
    background: url(../img/_template/emoji_feliz.png) no-repeat center;
    background-size: contain;
}

.certo2 {
    background: #3fb890;
}

.atencao2 {
    background: #302D2D;
}

.atencao2::after {
    content: "\f06a";
}

.atencao2 i {
    background: #fff !important;
    color: #302D2D !important;
}

.errado1 i,
.certo2 i {
    background: #fff !important;
}

.errado1 i {
    color: #FF8C24 !important;
}

.errado2 i,
.certo2 i {
    background: #fff !important;
}

.errado2 i {
    color: #d94242 !important;
}

.certo2 i {
    color: #3fb890 !important;
}

.resp {
    position: relative;
}

.resp::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: #9F9E9E;
    left: 50%;
    top: -13px;
    border-radius: 100%;
    transform: translatex(-50%);
    padding-top: 5px;
    box-sizing: border-box;
    text-align: center;
}

.respcerto.resp::after {
    background: #3fb890;
}

.resperrado.resp::after {
    background: #d94242;
}

.respcerto::after {
    content: "\f00c";
    font: normal normal normal 1.2em/1 FontAwesome;
    color: #fff;
}

.resperrado::after {
    content: "\f00d";
    font: normal normal normal 1.2em/1 FontAwesome;
    color: #fff;
}

label.resp.respcerto,
.circ_certo {
    border-color: #3fb890 !important;
}

label.resp.resperrado {
    border-color: #d94242 !important;
}

.disabledtrue,
.disabledtrue:hover {
    background: #3fb890 !important;
    cursor: default;
    box-shadow: inset 0 0 0 4px #3fb890, 0 0 1px transparent !important;
    color: #fff !important;
}

.disabledfalse,
.disabledfalse:hover {
    background: #d94242 !important;
    cursor: default;
    box-shadow: inset 0 0 0 4px #d94242, 0 0 1px transparent !important;
    color: #fff !important;
}

/* FIM, Radio button Circular */

/* --------- FIM, EXERCÍCIOS --------- */

/* Separadores */

.separador {
    width: 90%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    margin: 30px auto;
}

.separador::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 6px;
    background-color: #F4F4F4;
    left: 50%;
    transform: translateX(-50%);
}

.separador::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #6b6b6b;
    border-radius: 50%;
    left: 50%;
    margin-left: -3px;
    top: -2px;
}

.separador2 {
    position: relative;
    width: 80%;
    height: 1px;
    background: #6b6b6b;
    margin: 15px auto;
}

.separador2::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    background: #6b6b6b;
    width: 80%;
}

/* Fim, Separadores */

/* --------- Fim, Geral --------- */

/* --------- (Tablets) Dispositivos com largura entre 600px e 768px --------- */

@media only screen and (min-width: 600px) and (max-width: 768px) {
    .dflex2 {
        display: block !important;
    }

    #trueorfalse .hideondesktop {
        display: block !important;
    }

    #trueorfalse .negativetop {
        margin-top: unset !important;
    }
}

/* --------- Fim, (Tablets) --------- */

/* --------- (Desktop) Dispositivos com largura superior a 768px --------- */

@media only screen and (min-width: 768px) {
    [class*="col-"] {
        float: left;
    }

    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}

#trueorfalse .negativetop {
    margin-top: -20px;
}

/* --------- Fim, (Desktop) --------- */

/* --------- Mudanças Mobile --------- */

@media only screen and (max-width: 600px) {
    .hideonmobile {
        display: none !important;
    }

    .hideondesktop {
        display: block !important;
    }

    #wrapper {
        background: none;
    }

    header,
    header .fixed {
        height: 90px;
    }

    header nav#menu-principal ul,
    header nav#menu-acessibilidade ul {
        padding: 0 10px;
    }

    header p {
        top: 86%;
        transform: translate(-50%, -86%);
        background: #343434;
        width: 100%;
        padding: 0 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: 40px;
    }

    footer {
        min-height: 90px;
        margin-bottom: 65px;
    }

    footer img {
        margin: 0 5px;
    }



    footer img:last-child {
        width: 90px;
    }

    .container {
        width: 90% !important;
    }

    #sessao-capa {
        min-height: 488px !important;
    }

    #sessao-capa .img-capa {
        top: 45% !important;
    }

    #sessao-capa #capa-icones {
        background: url(../img/capa-icones-mobile.png) no-repeat center !important;
        top: 45% !important;
        background-size: 100% !important;
    }

    .dflex,
    .dflex2 {
        display: block !important;
    }

    #mosaico {
        width: 50% !important;
        margin: 0 auto;
        min-width: 250px
    }

    /* Menu Principal */
    header #menu-principal {
        margin-left: 10px;
    }

    .navlateral ul {
        margin-left: 0 !important;
    }

    .navlateral ul li {
        margin-left: 0;
    }

    /* Fim, Menu Principal */
    /* Menu Acessibilidade */
    header #menu-acessibilidade {
        margin-right: 10px;
    }

    /* Fim, Menu Acessibilidade */
    /* Overlay */
    .overlay-content.feedbackRespostaCerta,
    .overlay-content.feedbackRespostaErrada {
        height: auto !important;
        width: 90% !important;
        height: 50% !important;
        top: 15% !important;
    }

    .overlay-content.popuptextooverlay {
        height: auto !important;
        width: 90% !important;
        height: 50% !important;
        top: 15% !important;
    }

    .overlay-content {
        height: 75% !important;
        top: 15% !important;
        transform: translate(-50%, -15%) !important;
    }

    /* Overlay */
    /* Box Citação */
    q::after {
        position: unset !important;
    }

    /* Fim, Box Citação */
    /* Exercícios */
    .border-right {
        border: none !important;
    }

    .certo,
    .errado,
    .atencao {
        top: 20px;
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        width: 100%;
        left: 0;
        margin-bottom: 40px;
    }

    /* Fim, Exercícios */
    /* Pontos de Destaque */
    #highlight-img::before {
        content: "";
        clear: both;
    }

    .highlight-spot,
    .highlight-spot-1,
    .highlight-spot-2 {
        width: 40px;
        height: 40px;
    }

    #grafico-spot::after,
    #arquivo-spot::after,
    .highlight-spot-visited::after {
        font: normal normal normal 0.9em/1 FontAwesome;
    }

    .highlight-spot:hover::after {
        font: normal normal normal 0.9em/1 FontAwesome;
        top: 30%;
        left: 32%;
    }

    .barra-grafico {
        /* Gráfico Animado */
        max-width: 20px !important;
    }

    /* Fim, Pontos de Destaque */
    .proximo,
    .anterior {
        display: none !important;
    }

    .slideshow-container {
        max-height: 500px;
        overflow-y: auto;
    }

    .myslideshow {
        padding: 10px !important;
    }

    .dot {
        height: 23px;
        width: 23px;
        margin: 0 5px;
    }

    #trueorfalse .negativetop {
        margin-top: unset !important;
    }
}

/* --------- Fim, Mobile --------- */

/*Imagem ZOOM - MP17102019*/

.click-zoom input[type=checkbox] {
    /*display: none*/
}

.click-zoom img {
    /*margin: 100px;*/
    transition: transform 0.25s ease;
    cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
    transform: scale(1.5);
    cursor: zoom-out;
    width: 100%;
    /*position: absolute;*/
    margin-top: 20%;
    margin-bottom: 20%;
}

.white {
    color: #fff;
}
  
.ul-check {
    list-style: none;
  }
  
.ul-check li:before {
    content: '✓';
  }


@media screen and (max-width: 490px) {

    .titulocursobim{
        font-size: 20px !important;
    }
    .tituloaula{
        font-size: 30px !important;
    }
}

/*Lista alfabetica com parenteses*/

ol.alfaParen {
	counter-reset: list;
}
ol.alfaParen > li {
	list-style: none;
	position: relative;
}
ol.alfaParen > li:before {
	counter-increment: list;
	content: counter(list, lower-alpha) ") ";
	position: absolute;
	left: -1.4em;
}

/*Lista alfabetica com parenteses e em negrito*/
ol.alfaParenNeg {
	counter-reset: list;
}
ol.alfaParenNeg > li {
	list-style: none;
	position: relative;
}
ol.alfaParenNeg > li:before {
	counter-increment: list;
	content: counter(list, lower-alpha) ") ";
	position: absolute;
	left: -1.4em;
    font-weight: bold; 
}

/*Lista numerica com traço */

ol.tracoNumeral {
	counter-reset: list;
}
ol.tracoNumeral > li {
	list-style: none;
	position: relative;
}
ol.tracoNumeral > li:before {
	counter-increment: list;
	content: counter(list) "- ";
	position: absolute;
	left: -1.4em;
    font-weight: bold; 
}


/*Lista numerica com ponto */

ol.tracoNumeralP {
	counter-reset: list;
}
ol.tracoNumeralP > li {
	list-style: none;
	position: relative;
}
ol.tracoNumeralP > li:before {
	counter-increment: list;
	content: counter(list) ". ";
	position: absolute;
	left: -1.4em;
    font-weight: bold; 
}

/*Lista numerica com parentese */

ol.tracoNumeralPa {
	counter-reset: list;
}
ol.tracoNumeralPa > li {
	list-style: none;
	position: relative;
}
ol.tracoNumeralPa > li:before {
	counter-increment: list;
	content: counter(list) ") ";
	position: absolute;
	left: -1.4em;
}

/*Lista numerica ordinal */

ol.tracoNumeralOr {
	counter-reset: list;
}
ol.tracoNumeralOr > li {
	list-style: none;
	position: relative;
}
ol.tracoNumeralOr > li:before {
	counter-increment: list;
	content: counter(list) "° ";
	position: absolute;
	left: -1.4em;
    font-weight: bold; 
}


@media screen and (max-width: 1196px) {

    .tituloaulaPratica{
        line-height: 86% !important;
    }
}


@media screen and (max-width: 991px) {

    .ajustImaIma{
        margin-top: 0px !important;
    }

}

/*Fazer um disco com um circulo com buraco no meio */

ol.circuloFurado {
	counter-reset: list;
}
ol.circuloFurado > li {
	list-style: none;
	position: relative;
}
ol.circuloFurado > li:before {
	counter-increment: list;
	content: counter(list, 'o') " ";
	position: absolute;
	left: -1.4em;
    font-weight: bold; 
}

@media screen and (max-width: 1016px) {
    .tituloaula {
        font-size: 42px !important;
    }
}
/* AJUSTE IMAGEM CAPA */
@media screen and (max-width: 2571px){
    .imgCentro{
        width: 860px !important;
        right: 33% !important;
    }
}
 @media screen and (max-width: 2338px){
    .imgCentro{
        right: 31% !important;
    }
}
 @media screen and (max-width: 2109px){
    .imgCentro{
        right: 29% !important;
    }
}
@media screen and (max-width: 1900px){
    .imgCentro{
        width: 800px !important;
    }
}  
@media screen and (max-width: 1685px){
    .imgCentro{
        right: 26% !important;
    }
}  
@media screen and (max-width: 1547px){
    .imgCentro{
        width: 730px !important;
        right: 26% !important;
    }
}  
@media screen and (max-width: 1260px){
    .imgCentro{
        right: 21% !important;
    }
}
@media screen and (max-width: 1185px){
    .imgCentro{
        right: 19% !important;
    }
}
@media screen and (max-width: 1185px){
    .imgCentro{
        right: 19% !important;
    }
}
@media screen and (max-width: 1127px){
    .imgCentro{
        right: 17% !important;
    }
}
@media screen and (max-width: 1060px){
    .imgCentro{
        right: 15% !important;
    }
}
@media screen and (max-width: 975px){
    .imgCentro{
        right: 12% !important;
    }
}
@media screen and (max-width: 887px){
    .imgCentro{
        right: 8% !important;
    }
}
@media screen and (max-width: 818px){
    .imgCentro{
        right: 5% !important;
    }
}
@media screen and (max-width: 758px){
    .imgCentro{
        right: 3% !important;
    }
}
@media screen and (max-width: 716px){
    .imgCentro{
        right: 0% !important;
    }
}
@media screen and (max-width: 668px){
    .imgCentro{
        width: 660px !important;
        top: 80px !important;
    }
    .imgSmallCentro{
        width: 120px !important;
    }
}
@media screen and (max-width: 600px){
    .imgCentro{
        width: 480px !important;
        right: 9% !important;
    }
}
@media screen and (max-width: 526px){
    .imgCentro{
        right: 2% !important;
    }
}
@media screen and (max-width: 473px){
    .imgCentro{
        right: 0% !important;
    }
    .imgSmallCentro{
        right: 15px !important;
        width: 100px !important;
    }
}
@media screen and (max-width: 473px){
    .imgCentro{
        width: 430px !important;
    }
}
@media screen and (max-width: 378px){
    .imgCentro{
        width: 366px !important;
    }
}
@media screen and (max-width: 991px){
    #ajustInterrog{
        width: 130px !important;
    }
    #ajustImgTitulo{
        width: 130px !important;
    }
    #ajustInterrog2{
        display: flex;
        justify-content: center;
    }
}
/* ajuste da altura */
@media screen and (max-height: 1157px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 32% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 32% !important;
    }
}
@media screen and (max-height: 1110px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 33% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 33% !important;
    }
}
@media screen and (max-height: 1080px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 34% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 34% !important;
    }
}
@media screen and (max-height: 1040px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 36% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 36% !important;
    }
}
@media screen and (max-height: 990px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 37% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 37% !important;
    }
}



@media screen and (max-height: 950px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 39% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 39% !important;
    }
}
@media screen and (max-height: 910px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 40% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 40% !important;
    }
}
@media screen and (max-height: 880px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 42% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 42% !important;
    }
}
@media screen and (max-height: 840px){
    .letrinhaA, .letrinhaB, .letrinhaC, .letrinhaD{
        top: 44% !important;
    }
    .letrinhaA2, .letrinhaB2, .letrinhaC2, .letrinhaD2{
        top: 44% !important;
    }
}

@media screen and (max-width: 991px){
    .divGeral{
        margin-left: 90px !important;
    }
    .letrinhaA, .letrinhaB{
        top: 44% !important;
    }
    .letrinhaC, .letrinhaD{
        top: 68% !important;
    }
    .letrinhaA2, .letrinhaB2{
        top: 43% !important;
    }
    .letrinhaC2, .letrinhaD2{
        top: 67% !important;
    }
    .NumQuestao{
        margin-left: 40% !important;
    }
}
@media screen and (max-width: 767px){
    .divGeral{
        margin-left: 46px !important;
    }
    .letrinhaA, .letrinhaB{
        top: 45% !important;
    }
    .letrinhaA2, .letrinhaB2{
        top: 44% !important;
    }
    .letrinhaC2, .letrinhaD2{
        top: 68% !important;
    }
}
@media screen and (max-width: 730px){
    .divGeral{
        margin-left: 30px !important;
    }
}
@media screen and (max-width: 698px){
    .divGeral{
        margin-left: 15px !important;
    }
}
@media screen and (max-width: 688px){
    .letrinhaA, .letrinhaB{
        top: 46% !important;
    }
    .letrinhaC, .letrinhaD{
        top: 69% !important;
    }
    .letrinhaA2, .letrinhaB2{
        top: 46% !important;
    }
    .letrinhaC2, .letrinhaD2{
        top: 69% !important;
    }
}
@media screen and (max-width: 669px){
    .divGeral{
        margin-left: 0px !important;
    }
}
@media screen and (max-width: 600px){
    .letrinhaC, .letrinhaD {
        top: 106% !important;
    }
    .letrinhaA, .letrinhaB{
        top: 68% !important;
    }
    .letrinhaC2, .letrinhaD2 {
        top: 106% !important;
    }
    .letrinhaA2, .letrinhaB2{
        top: 68% !important;
    }
    .NumQuestao{
        margin-left: 38% !important;
    }
}
@media screen and (max-width: 539px){
    .letrinhaC, .letrinhaD {
        top: 109% !important;
    }
    .letrinhaA, .letrinhaB{
        top: 71% !important;
    }
    .letrinhaC2, .letrinhaD2 {
        top: 109% !important;
    }
    .letrinhaA2, .letrinhaB2{
        top: 71% !important;
    }
}
@media screen and (max-width: 488px){
    .divGeral {
        margin-left: 65px !important;
    }
    .letrinhaA{
        top: 71% !important;
    }
    .letrinhaB{
        top: 109% !important;
    }
    .letrinhaC {
        top: 147% !important;
    }
    .letrinhaD {
        top: 184% !important;
    }
    .letrinhaA2{
        top: 71% !important;
    }
    .letrinhaB2{
        top: 109% !important;
    }
    .letrinhaC2 {
        top: 147% !important;
    }
    .letrinhaD2 {
        top: 184% !important;
    }
    .NumQuestao{
        margin-left: 33% !important;
    }  
}

#ImgTitu{
    width: 100% !important;
}
@media screen and (max-width: 767px){
    .ajustVideo{
        width: 100% !important;
    }
}