/* Geral */

*{
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}

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

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

/* 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;
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  /* roboto-italic - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  /* roboto-500 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  /* roboto-500italic - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  /* roboto-700 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  /* roboto-700italic - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  /* roboto-900 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  /* roboto-900italic - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: local(''),
         url('../fonts/roboto-v20-latin/roboto-v20-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/roboto-v20-latin/roboto-v20-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
  
/* bai-jamjuree-700 - latin */
@font-face {
    font-family: 'Bai Jamjuree';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/bai-jamjuree-v4-latin/bai-jamjuree-v4-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/bai-jamjuree-v4-latin/bai-jamjuree-v4-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/bai-jamjuree-v4-latin/bai-jamjuree-v4-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/bai-jamjuree-v4-latin/bai-jamjuree-v4-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/bai-jamjuree-v4-latin/bai-jamjuree-v4-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/bai-jamjuree-v4-latin/bai-jamjuree-v4-latin-700.svg#BaiJamjuree') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: "casino_handregular";
    src: url("../fonts/Casino_Hand/casino_hand-webfont.eot");
    src: url("../fonts/Casino_Hand/casino_hand-webfont.eot?#iefix")
         format("embedded-opentype"),
         url("../fonts/Casino_Hand/casino_hand-webfont.woff") format("woff"),
         url("../fonts/Casino_Hand/casino_hand-webfont.ttf") format("truetype"),
         url("../fonts/Casino_Hand/casino_hand-webfont.svg#casino_handregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/material-icon/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
  
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: #fff;
    overflow-x: hidden;
    font-family: 'Roboto';
}

h1{
    font-family: 'Roboto';
    color: rgb(255, 255, 255);
	font-size: 2.8em;
    text-transform: uppercase;
    margin: 10px 20px;
    line-height: 1.1em;
}

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

h2{
    font-family: 'Roboto';
	font-size: 2.5em;
	padding: 10px 20px;
	color: #fff;
	line-height: 1.3em;
}

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

h3{
    margin: 20px;
	padding-bottom: 0;
	font-size: 1.5em;
    font-weight: bold;
	color: rgb(255, 255, 255);
    line-height: normal;
    text-transform: uppercase;
}

.h3estilo1{
    margin: 20px;
	padding-bottom: 0;
	font-size: 1.5em;
    font-weight: bold;
	color: #6b6b6b!important;
    line-height: normal;
    text-transform: uppercase;
}

.h3estilo2{
    margin: 20px;
	padding-bottom: 0;
	font-size: 1.5em;
    font-weight: bold;
	color: rgba(48, 48, 48, 0.9)!important;
    line-height: normal;
    text-transform: uppercase;
}

.h3estilo3{
    margin: 20px;
	padding-bottom: 0;
	font-size: 1.5em;
    font-weight: bold;
	color: #fac900!important;
    line-height: normal;
    text-transform: uppercase;
}

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

.h3estilo5{
    color: #fff;
    padding-left: 10px;
    border-left: 4px solid #fac900;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 1.4em;
    font-weight: bold;
}

section {
    width: 100%;
    height: auto;
    clear: both;
	position: relative;
	padding: 10em 10%;
	color: #fff;
    text-align: left;
    box-sizing: border-box;
}

section::before,
section::after {
	position: absolute;
	content: '';
    pointer-events: none;
    clear: both;
    display: block;
}

p {
    padding: 10px 20px;
    color: #4f4f4f;
    font-size: 1.1em;
    line-height: 1.5em;
}

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

ul li, ol li {
    list-style-position: outside;
    padding-bottom: 10px;
    margin-left: 30px;
    line-height: 1.5em;
    color: rgb(255, 255, 255);
    font-size: 1em;
}

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 do Template --------- */

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

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

    /* Menu */

        header nav#menu-principal ul, header nav#menu-acessibilidade ul{
            list-style: none;
            line-height: normal;
            margin: unset;
            z-index: -1;
        }

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

        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: #3795d2 !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;
            right: 0;
            background-color: rgba(29,35,69,0.9);
            overflow-x: hidden;
            overflow-y: auto;
            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: 1em;
            color: #fff;
            display: block;
        }

        .navlateral a:hover {
            text-decoration: none;
            font-weight: bold;
            color: #3795d2;
        }

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

        .navlateral a.visited-menu {
            color: #818181;
        }

        .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:#F2F2F2;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%,-50%);
        padding: 8px 10px 20px;
        font-size: 1em;
        z-index: -1;
    }

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

    /* section{
        width: 100%;
        height: auto;
        clear: both;
        position: relative;
        box-sizing: border-box;
    }

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

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

    footer img{
        margin: 0 10px;
    }

    /* wrapper original do Indústria
    /* #wrapper{
        width: 100%;
        height: auto;
        background: url(../img/_template/wrapper-patter-left.png) repeat-y left top, url(../img/_template/wrapper-patter-right.png) repeat-y right top ;
        position: relative;
    } */

    /* #wrapper{
        background: #2980b9;
        background: url(../img/_template/wrapper-patter-left.png) repeat-y left top, url(../img/_template/wrapper-patter-right.png) repeat-y right top;
    } */
    

    /* Barra de Progresso */

    #progresso{
        height: 6px;
        background: #c63b55;
        width: 100%;
        position: absolute;
        bottom: 0;
        border-bottom: 1px solid #c63b55;
        /* z-index: 50; */
        z-index: -1;
        padding-top: 1px;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.16), 0px 3px 5px rgba(0, 0, 0, 0.16);
    }

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

    #full-height{
        height: 100%;
    }

    .bg-ajuda{
        background: #dcdcdc;
    }

    /* Fim, Barra de Progresso */

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

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

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

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

    #logo{
        max-height: 25px;
        margin-bottom: 6px;
        margin-top: 10px;
    }

    #menu-principal ul {
        position: relative;
        z-index: -1;
    }

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

/* --------- Botão Fechar iFrame --------- */

    .iframe1 {
        position: relative;
    }

    /* .iframe1 button {
        position: absolute;
        right: 10px;
        top: 10px;
        color: red;
    } */

    .iframe1_close_btn {
        display: inline-block;
        position: absolute;
        z-index: 1012;
        pointer-events: all;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        width: 0.3em;
        height: 0.3em;
        border: none;
        -webkit-border-radius: 1em;
        border-radius: 1em;
        font: 400 8em / normal 'Roboto', Helvetica, sans-serif;
        color: rgba(0, 0, 0, 1);
        -o-text-overflow: clip;
        text-overflow: clip;
        background: rgba(0, 0, 0, 0);
        border: 2px solid rgba(110, 167, 120, 1);
        right: 10px;
        top: 10px;
    }

    .iframe1_close_btn::before {
        display: inline-block;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        width: 73%;
        height: 2px;
        position: absolute;
        content: "";
        top: 48%;
        left: 14%;
        border: none;
        font: normal 100% / normal 'Roboto', Helvetica, sans-serif;
        color: rgba(0, 0, 0, 1);
        -o-text-overflow: clip;
        text-overflow: clip;
        background: #fff;
        text-shadow: none;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
      }
      
      .iframe1_close_btn::after {
        display: inline-block;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        width: 73%;
        height: 2px;
        position: absolute;
        content: "";
        top: 46%;
        left: 15%;
        border: none;
        font: normal 100% / normal 'Roboto', Helvetica, sans-serif;
        color: rgba(0, 0, 0, 1);
        -o-text-overflow: clip;
        text-overflow: clip;
        background: #fff;
        text-shadow: none;
        -webkit-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
      }
      
      .iframe1_close_btn:hover {
        color: rgba(255, 255, 255, 1);
        background: rgb(110, 167, 120);
        cursor: pointer;
      }
      
      .iframe1_close_btn:active {
        border: 2px solid rgba(110, 167, 120, 1);
        background: rgba(110, 167, 120, 1);
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
      }

/* --------- Botão Fechar iFrame --------- */

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

    .legenda{
        font-size: 0.9em;
    }

    .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 */

    .paddingtop{
        padding-top: 20px;
    }
    
    .paddingtopbottom{
        padding: 20px;
    }

    .margingbottom{
        margin-bottom: 40px;
    }

    .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;
    }

    .left-text{
        text-align: left;
    }

    #dark-text {
        color: rgba(16, 32, 44);
    }

    .dark-text {
        color: rgba(16, 32, 44);
    }

    #gray-text {
        color: rgba(79, 79, 79, 0.9);
    }

    .gray-text {
        color:  rgba(79, 79, 79, 0.9);
    }

    #white-text {
        color: rgba(255, 255, 255, 0.9);
    }

    .white-text {
        color: rgba(255, 255, 255, 0.9);
    }

    .white-text p{
        color: rgba(255, 255, 255, 0.9);
    }

    .text-uppercase{
        text-transform: uppercase;
        font-weight: bold;
    }

    .text-lowercase{
        text-transform: lowercase;
    }

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

    #text-center{
        text-align: center;
    }


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

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

    /* sessao-capa original do Indústria */
    /* #sessao-capa{
        min-height: 688px;
        background: url(../img/capa-luzes.png) no-repeat center, url(../img/bg-capa.png) repeat;
    } */

    #sessao-capa{
        background: #1d2345;
        min-height: 688px;
    }

    #sessao-capa #capa-icones{
        width: 100%;
        max-width: 998px;
        height: auto;
        /* background: url(../img/aula-01/capa.jpg) 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{
        position: absolute;
        left: 50%;
        /* bottom: -50px; */
        bottom: 30px; /*Novo Mouse */
        transform: translateX(-50%);
        /* width: 20px; */
        z-index: 2;
    }

    #botao-video-capa{
        position: absolute;
        display: inline-flex;
        text-transform: uppercase;
        top: 50%;
        /* transform: translateX(-50%); */
        left: 25%;
        z-index: 2;
    }
    
    #botao-video-capa #watchvideo{
        position: relative;
        top: 30%;
        /* font-family: 'Rajdhani'; */
        font-size: 16px;
        color: #fff;
    }

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

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

.h2estilo1{
    font-weight: bold;
    text-align: right;
    font-size: 2.5em;
    text-transform: uppercase;
    line-height: 1.3em;
}

.h2estilo1 span{
    font-family: 'Bai Jamjuree';
    font-weight: bold;
    font-size: 1.17em;
    color: #fac900;
}

.h2estilo2{
    font-weight: bold;
    text-align: left;
    font-size: 2.5em;
    text-transform: uppercase;
    color: rgba(79, 79, 79, 0.9);
}

.h2estilo2 span{
    font-family: 'Bai Jamjuree';
    font-weight: bold;
    font-size: 1.17em;
    color: #fac900;
}

.h2estilo3{
    font-weight: bold;
    text-align: left;
    font-size: 2.5em;
    text-transform: uppercase;
    color:rgb(255, 255, 255);
}

.h2estilo3 span{
    font-family: 'Bai Jamjuree';
    font-weight: 700;
    font-size: 1.17em;
    color: #fac900;
}

.h2estilo4{
    font-weight: bold;
    text-align: right;
    font-size: 2.5em;
    text-transform: uppercase;
    color: rgba(79, 79, 79, 0.9);
}

.h2estilo4 span{
    font-family: 'Bai Jamjuree';
    font-weight: bold;
    font-size: 1.17em;
    color: #fac900;
}

/* .h3estilo1{
    text-transform: uppercase;
    font-weight: bold;
    margin: 20px;
    padding-bottom: 20px;
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.9);
}

.h3estilo2{
    text-transform: uppercase;
    font-weight: bold;
    margin: 20px;
    font-size: 1.5em;
    color: rgba(79, 79, 79, 0.9);
} */

.h1estilo1{
    color: #1977a3;
    text-align: center;
    font-weight: bold;
    text-align: center;
    font-size: 1.4em;
    text-transform: uppercase;
    margin: 10px 20px;
}

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

.h1estilo1 span::before, .h1estilo1 span::after{
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    left: -30px;
    background: #6b6b6b;
    top: 40%;
    transform: translateY(-50%);
 }

.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);
}

.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: #1977a3 !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;
}

.bgcinza{
    background: #e5e5e5;
}

.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;
}

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

    .box{
        width: 95%;
        margin: 15px auto;
        border-left: 4px solid #F2F2F2;
        max-width: 900px;
    }

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

    .box1 p.titulobox{
        font-weight: bold;
    }

    .box1.p{
        color: rgba(79, 79, 79, 0.9)!important;
    }

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

    .box2 p.titulobox{
        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: #2980b9;
        color: #fff !important;
    }

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

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


    .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{
        font-size: 1.2em!important;
        color: #1977a3;
    }

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

    .box5{
        width: 95%;
        margin: 15px auto;
        max-width: 900px;
        background: #1d2345;
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        }

    .box8{
        width: 95%;
        margin: 15px auto;
        max-width: 900px;
        background: rgba(211,211,211,1);
        -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.5em!important;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .box15 {
        width: 100%;
        height: auto;
        border: 3px solid #eaeaea;
        display: inline-block;
        margin: 10px auto;
        position: relative;
        /* width: auto; */
        background: rgb(255, 255, 255);
    }
    .box15 .corners {
        position: relative;
        display: block;
        margin: 0;
        padding-bottom: 20px;
        z-index: 5;
        text-align: justify;
    }

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

    .box15::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;
    }

    .box15::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;
    }

  /* BOX CITAÇÃO */

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

    .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 {
        font-style: italic;
        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: #46bad0;
        opacity: 0.9;
        z-index: -1;
    }

    q::after{
        content: "\f10d";
        font: normal normal normal 1.4em/1 FontAwesome;
        position: absolute;
        right: -22px;
        bottom: -5px;
        color: #46bad0;
        opacity: 0.9;
        z-index: -1;
    }

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

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

    /* FIM BOX CITAÇÃO */

    /* SOMBRA */
    .shadow{
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    }

    /* IMPORTANTE */

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

    .box1.importante{
        border: 6px solid #ff4757;
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    }

    .importante, .saibamais, .dica, .vcsabia, .pensenisso, .pdf{
        padding-right: 90px;
        position: relative;
        background: #fff;
    }

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

    .importante .titulobox{
        font-size: 1.2em!important;
        color: #ff4757;
    }

    .importante p{
        font-size: 1em;
        color: rgba(79, 79, 79, 0.9);
    }

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

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

    .bt-border.bt-importante:hover{
        background: none !important;
        color: #ff4757 !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;
    }

    .saibamais p{
        font-size: 1em;
        color: rgba(79, 79, 79, 0.9);
    }

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

    .box1.saibamais{
        border:6px solid #48ab97;
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    }

    .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 */

     /* 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{
        font-size: 1.5em!important;
        color: #f6c20e;
    }

    .dica p{
        color: rgba(79, 79, 79, 0.9);
        font-size: 1em!important;
    }

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

    .box1.dica{
        border:6px solid #f6c20e;
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    }

    .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 */

     /* PENSENISSO */
    .pensenisso{
        padding-right: 100px;
    }

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

    .pensenisso .titulobox{
        font-size: 1.5em;
        color: #9d9d9d;
    }

    .pensenisso p{
        font-size: 1em;
        color: rgba(79, 79, 79, 0.9);
    }

    .box.pensenisso{
        border-left: 4px solid #9d9d9d;
    }

    .box1.pensenisso{
        border:6px solid #9d9d9d;
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    }

    .bt-nota{
        background: #9d9d9d !important;
        text-transform: uppercase;
        font-weight: bold;
        color: #9d9d9d !important;
    }

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

    .bt-nota:hover{
        color: #9d9d9d !important;
        }

    .bt-border.bt-nota{
        box-shadow: inset 0 0 0 4px #9d9d9d, 0 0 1px transparent;
        color: #9d9d9d !important;
    }

    .bt-border.bt-nota:hover{
        background: none !important;
        color: #9d9d9d !important;
    }

     /* FIM, NOTA */

     /* VOCÊ SABIA */
    .vcsabia{
        padding-right: 100px;
    }

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

    .vcsabia .titulobox{
        font-size: 1.5em;
        color: #5058b1;
    }

    .vcsabia p{
        font-size: 1em;
        color: rgba(79, 79, 79, 0.9);
    }

    .box.vcsabia{
        border-left: 4px solid #5058b1;
    }

    .box1.vcsabia{
        border: 6px solid #5058b1;
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    }

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

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

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

    /* FIM, VOCÊ SABIA */

     /* PDF */
     .pdf{
        padding-right: 70px;
    }

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

    .pdf .titulobox{
        font-size: 1.5em;
        color: #c65d72;
    }

    .pdf p{
        color: rgba(79, 79, 79, 0.9);
        font-size: 1em;
    }

    .box.pdf{
        border-left: 4px solid #c65d72;
    }

    .box1.pdf{
        border:6px solid #c65d72;
        -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    }

    .bt-pdf{
        background: #c65d72 !important;
        text-transform: uppercase;
        font-weight: bold;
        color: #c65d72 !important;
    }

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

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

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

    .bt-border.bt-pdf:hover{
        background: none !important;
        color: #c65d72 !important;
    }

     /* FIM, PDF */

    /* BOTÕES BOXES DIVERSOS */

    .bt-importante i, .bt-saibamais i, .bt-dica i, .bt-vcsabia i, .bt-nota{
        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;
    }

    .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, .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;
    }

    .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,1);
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 100%;
        cursor: pointer;
        position: absolute;
        color:rgba(0, 0, 0, 0.5);
        text-decoration: none;
        z-index: 2;
    }

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

    .highlight-spot-visited::after{
        content: "\f00c";
        font: normal normal normal 1.5em/1 FontAwesome;
        /* top: 32%;
        left: 32%; */
        top: 42%;
        left: 105%;
        position: relative;
        color: #01a08a;
    }

    .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.4)!important;
            border: 2px solid #fff /*#00531f*/;
    }

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

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

    /*------------------------------------------*/
    .highlight-spot-3{
        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-3:hover{
        background: rgba(255,255,255,0.8);
        color: #000;
    }

    .highlight-spot-3-visited{
            background: rgba(30,159,89,0.4)!important;
            border: 2px solid rgba(79, 79, 79, 0.5); /*#00531f*/;
    }

    .highlight-spot-3-visited::after{
        color: rgba(79, 79, 79, 0.5);
    }

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

    /*-------------------------------------*/
    .highlight-4-spot{
        background: rgba(255,255,255,0.3);
        cursor: pointer;
        position: absolute;
        text-decoration: none;
        border-radius: 5px;
        z-index: 2;
    }

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

    .highlight-4-spot-visited::after{
        content: "\f00c";
        font: normal normal normal 1.5em/1 FontAwesome;
        /* top: 32%;
        left: 32%; */
        top: 42%;
        left: 105%;
        position: relative;
        color: #01a08a;
    }

    .etapas-projeto-spot{
        background: rgba(32,157,219,0.2);
        cursor: pointer;
        position: absolute;
        text-decoration: none;
        z-index: 2;
    }

    .etapas-scrum-spot{
        cursor: pointer;
        position: absolute;
        text-decoration: none;
        border-radius: 5px;
        z-index: 2;
    }

    .wireframe-spot{
        cursor: pointer;
        position: absolute;
        text-decoration: none;
        z-index: 2;
    }

    .scrum-team-spot{
        cursor: pointer;
        position: absolute;
        text-decoration: none;
        border-radius: 50%;
        border: none;
        z-index: 2;
    }

    .design-thinking-spot{
        cursor: pointer;
        position: absolute;
        text-decoration: none;
        border-radius: 5px;
        border: none;
        z-index: 2;
    }

    .so-spot{
        cursor: pointer;
        position: absolute;
        text-decoration: none;
        border-radius: 50%;
        z-index: 2;
    }

    #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 */
    /* AULA-1 */
    #item-spot3{
        top: 34%;
        left: 22.3%;
    }

    #item-spot4{
        top: 34%;
        left: 65.9%;
    }

    #item-spot14{
        top: 66%;
        left: 8%;
    }

    #item-spot15{
        top: 66%;
        left: 26.9%;
    }

    /* AULA-2 */
    #item-spot9{
        top: 0;
        left: 0;
    }

    #item-spot10{
        top: 0;
        left: 0;
    }

    #item-spot11{
        top: 0;
        left: 0;
    }

    #item-spot12{
        top: 0;
        left: 0;
    }

    /* AULA-1 */
    #item-spot20{
        top: 11%;
        left: 10.9%;
    }

    #item-spot21{
        top: 10%;
        left: 0%;
    }

    #item-spot22{
        top: 10%;
        left: 0%;
    }

    #item-spot23{
        top: 67.5%;
        left: 58.7%;
    }

    #item-spot24{
        top: 83%;
        left: 72.8%;
    }

    #item-spot30{
        top: 0.1%;
        right: 0;
    }

    #item-spot31{
        top: 28.1%;
        right: 1px;
    }

    #item-so80{
        top: 0;
        left: 0;
    }

    #item-so26{
        top: 8%;
        left: 7%;
    }

    #item-so27{
        top: 0;
        left: 2%;
    }

    #item-so70{
        top: 2%;
        right: 44.7%;
    }

    #item-so71{
        top: 0.1%;
        right: 1px;
    }

    #item-so72{
        top: 28.1%;
        right: 1px;
    }

    #item-so73{
        top: 45.1%;
        right: 1px;
    }

    #item-so74{
        top: 68.7%;
        right: 3%;
    }

    #item-so75{
        top: 92.3%;
        right: 0.1%;
    }

    /* FIM ITEM SPOT */

    /* GRÁFICO SPOT */
    /* AULA-2 */
    #grafico-spot9{
        top: 5%;
        left: 2.2%;
    }

    #grafico-spot10{
        top: 5%;
        left: 67%;
    }

    #grafico-spot11{
        top: 64%;
        left: 35.5%;
    }

    /* AULA-3 */
    #grafico-spot26{
        top: 79%;
        left: 0%;
    }

    #grafico-spot13{
        top: 0%;
        left: 23.5%;
    }

    #grafico-spot14{
        top: 79%;
        left: 46%;
    }

    #grafico-spot15{
        top: 0%;
        left: 69.7%;
    }

    /* AULA-2 */
    #grafico-spot16{
        bottom: 35.6%;
        left: 8.8%;
    }
    
    #grafico-spot17{
        bottom: 35.6%;
        left: 27.7%;
    }
    
    #grafico-spot18{
        top: 66%;
        left: 8%;
    }
    
    #grafico-spot19{
        top: 66%;
        left: 26.9%;
    }
    
    /* #grafico-spot20{
        top: 9.2%;
        left: 14%;
    }
    
    #grafico-spot21{
        top: 25.5%;
        left: 11.3%;
    }
    
    #grafico-spot22{
        top: 41.8%;
        left: 16%;
    }
    
    #grafico-spot23{
        bottom: 34.9%;
        left: 20.8%;
    }
    
    #grafico-spot24{
        bottom: 0;
        left: 0;
    }
    
    #grafico-spot25{
        bottom: 0;
        left: 0;
    } */

    #grafico-spot20{
        top: 0;
        left: 0;
    }
    
    #grafico-spot21{
        top: 0;
        left: 0;
    }
    
    #grafico-spot22{
        top: 0;
        left: 0;
    }
    
    #grafico-spot23{
        bottom: 0;
        left: 0;
    }
    
    #grafico-spot24{
        bottom: 0;
        left: 0;
    }
    
    #grafico-spot25{
        bottom: 0;
        left: 0;
    }

    #grafico-spot26{
        top: 0;
        left: 0;
    }

    #grafico-spot27{
        top: 0;
        left: 0;
    }

    #grafico-spot28{
        top: 0;
        left: 0;
    }

    #grafico-spot29{
        top: 0;
        left: 0;
    }

    #grafico-spot30{
        top: 0.1%;
        right: 1px;
    }

    #grafico-spot31{
        top: 28.1%;
        right: 1px;
    }

    #grafico-spot32{
        top: 0;
        left: 0;
    }

    #grafico-spot33{
        top: 0;
        left: 0;
    }

    /* Aula-2 SA2 */

    #grafico-spot34{
        top: 28.3%;
        left: 18.5%;
    }

    #grafico-spot35{
        top: 47%;
        left: 29.2%;
    }

    #grafico-spot36{
        top: 47%;
        left: 62.2%;
    }

    /* Aula-3 SA2 */

    #grafico-spot45{
        top: 11.7%;
        left: 0;
    }

    #grafico-spot46{
        top: 11.7%;
        left: 25.6%;
    }

    #grafico-spot47{
        top: 11.7%;
        left: 51.8%;
    }

    #grafico-spot48{
        top: 11.7%;
        left: 77.8%;
    }

    /* FIM GRÁFICO SPOT */

    #arquivo-spot{
        top: 0;
        left: 0;
    }

    #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 {
        background-color: #242424;
        color: #71ffff;
        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: 1em;
        transition: 0.4s;
        margin-left: 10px;
    }

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

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

    .accordion:after {
        content: '\002B';
        color: #71ffff;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212";
        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: hidden;
            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 {x'
            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: 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 #ffcc00;
        text-decoration: none;
        line-height: 1.2em;
        cursor: pointer;
    }

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

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 240px;
        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: -120px;
        /* 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;
        border: 6px double #ababab;
        border-radius: 5px;
        width: 95%; */
        position: relative;
        max-width: 100%;
        margin: auto;
        background: #fff;
        /* box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        padding: 20px 35px;
        border-radius: 8px;
        transition: all 0.3s;
    }

    .slideshow-container:hover {
        box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
    }

    /* .myslideshow > *:not(.slideshow-wrapper) {
        padding: 0 0 80px;
    } */

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

    .myslideshow {
      display: none;
      background: #fff;
      padding: 10px 30px;
    }

    /* .myslideshow {
        display: none;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        position: relative;
    } */

    /* Next & previous buttons */
    .proximo, .anterior {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -30px;
      padding: 0;
      color: #c63b55;
      /* background: #1977a3; */
      font-weight: bold;
      font-size: 2em;
      border-radius: 0 3px 3px 0;
      user-select: none;
      text-decoration: none;
      transition: all ease-in-out 0.3s;
    }

    /* Position the "previous button" to the left */
    .anterior {
        left: 0;
    }

    /* Position the "next button" to the right */
    .proximo {
      position: absolute;
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .proximo:hover, .anterior:hover {
        color: #9d9d9c;
        /* background: #2a9ebd; */
    }

    /* 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: #1d2345;
      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: #c63b55;
    }

    #contador-slides{
        position: absolute;
        z-index: 1;
        top: 2px;
        right: 7px;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        padding-left: 0;
        padding-top: 13px;
        font-weight: bold;
        /* background-color: #1d2345; */
    }

    /* Fim, Slideshow */

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

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

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

#imagembg1{
    background-image: url(../img/aula-03/image-background.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-sweep-1 button.bt-border{
    border: none;
}

button.bt-sweep:focus, button.bt-sweep-1: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);
}

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

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

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

/* Fim do novo botão bt-sweep */

.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;
}

.bt-border-resposta{
    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;
    border-radius: 5px;
}

.bt-border-resposta:hover{
    background: none;
    /* color: #1977a3; */
    background: #0C1D40;
}

.bt-border-proximo{
    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:#c63b55;
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
}

.bt-border-proximo:hover{
    background: none;
    /* color: #1977a3; */
    background: #992c46;
}

.bt-border-dica{
    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:#28b12c; 
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
}

.bt-border-dica:hover{
    background: none;
    /* color: #1977a3; */
    background: #1d8121;
}

#mosaico{
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

#mosaico:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
  }

/* #mosaico img{
    padding: 10px;
} */

.botaocomentario{
    display: none;
}

/* 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%;
    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 25px 20px 15px;
    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{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 2em;
    color: #9d9d9d;
    z-index: 1;
    /* background: #1977a3; */
    /* padding: 2px 5px 5px 5px; */
}

.closeoverlay-creditos{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 2em;
    color:#fff;
    z-index: 1;
}

.closeoverlay-creditos:hover{
    color: #3795d2;
}

.overlay-content p{
    font-size: 1.1em;
}

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

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

/* Fim, Overlay */


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

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

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

.border-right-desafio{
    border-right: 0px solid #fac900;
}

#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, .errado2{
    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, .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/check-incorrect.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/check-correct.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: 85px;
    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: 50px;
}

.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;
    top: 0;
    left: 50%;
    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;
}

  mark {
    background: #c65d72;
    padding: 0.2em 0 0.4em;
    color: #fff;
  }

/* 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: 150px;
  position: relative;
  width: 150px;
  border-radius:100%
}

.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/check-incorrect.png) no-repeat center;
    background-size: contain;
}

.errado2{
    background: #d94242;
}

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

.certo2{
    background: #3fb890;
}

.atencao2{
    background: #302D2D;
}

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

.atencao2 i{
    color: #e9e9e9 !important;
}

.atencao2 i:hover{
    color: #706f6f !important;
}

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

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

.errado1 i, .certo2 i:hover{
    color: #236650 !important;
}

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

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

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

.errado2 i:hover{
    color:  #961818 !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%;

    }

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

    .separador3::after{
        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: #2980b9;
    } */

    .lightenblue5 {
        background: #1c2344;
    }

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

    #logo{
        max-height: 25px;
        margin-bottom: -12px;
    }

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

    header p{
        top: 86%;
        transform: translate(-50%,-86%);
        background: #1d2345;
        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:first-child{
        width: 90px;
    }

    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/_template/capa-icones-mobile.jpg) 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{
        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;
    }

    .border-right-GIT{
        border-right: none!important;
        border-bottom: 3px solid #6b6b6b;
    }

    .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: 52%;
    left: 53%;
    }

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

    /* Fim, Pontos de Destaque */

    .proximo, .anterior {
        display: none !important;
    }

    .proximo1, .anterior1 {
        display: none !important;
    }

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

    .myslideshow{
        padding: 10px !important;
        /* font-size: 0.9em; */
    }

    /* .myslideshow > *:not(.slideshow-wrapper) {
        padding: 0 0 80px;
    } */

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

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

    #botao-video-capa{
        left: 43%;
        top: 70%
    }

}

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


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

.click-zoom img {
  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%;
}

.alert-pink {
	background-color: #E57373 !important;
	color: #fff !important;
}

/* Tabela */
/* .tabela-1 table {
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
}
.tabela-1 table * {
  position: relative;
}
.tabela-1 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
.tabela-1 table td, .tabela-1 table th {
  padding-left: 8px;
}
.tabela-1 table thead {
    color: #fff;
}
.tabela-1 table thead tr {
  height: 60px;
  background: #2980b9;
  background: #5058b1;
  font-size: 16px;
}
.tabela-1 table tbody tr {
  height: 48px;
}
.tabela-1 table tbody tr:last-child {
  border: 0;
}
.tabela-1 table td, .tabela-1 table th {
  text-align: left;
  height: auto;
}
.tabela-1 table td.l, .tabela-1 table th.l {
  text-align: right;
}
.tabela-1 table td.c, .tabela-1 table th.c {
  text-align: center;
}
.tabela-1 table td.r, .tabela-1 table th.r {
  text-align: center;
}

@media screen and (max-width: 35.5em) {
  .tabela-1 table {
    display: block;
  }
  .tabela-1 table > *, .tabela-1 table tr, .tabela-1 table td, .tabela-1 table th {
    display: block;
  }
  .tabela-1 table thead {
    display: none;
  }
  .tabela-1 table tbody tr {
    height: auto;
    padding: 8px 0;
  }
  .tabela-1 table tbody tr td {
    padding-left: 45%;
    margin-bottom: 12px;
  }
  .tabela-1 table tbody tr td:last-child {
    margin-bottom: 0;
  }
  .tabela-1 table tbody tr td:before {
    position: absolute;
    font-weight: 700;
    width: 40%;
    left: 10px;
    top: 0;
  }
  .tabela-1 table tbody tr td:nth-child(1):before {
    content: "Tradicionais";
  }
  .tabela-1 table tbody tr td:nth-child(2):before {
    content: "Ágeis";
  }
  .tabela-1 table tbody tr td:nth-child(3):before {
    content: "Safari";
  }
  .tabela-1 table tbody tr td:nth-child(4):before {
    content: "Opera";
  }
  .tabela-1 table tbody tr td:nth-child(5):before {
    content: "Microsoft Edge";
  }
} */

/* Orientações de navegação */
.valign-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Tabela-1 */
.tabela-1 table {
    border-spacing: 1;
    border-collapse: collapse;
    background:#fff;
    border-radius: 6px;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  }
  .tabela-1 table * {
    position: relative;
  }
  .tabela-1 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
  .tabela-1 table td, .tabela-1 table th {
    /* padding-left: 8px; */
    padding: 20px;
  }
  .tabela-1 table thead {
      color: #fff;
  }
  .tabela-1 table thead tr {
    height: 60px;
    /* background: #c63b55; */
    background: #011f4b;
    font-size: 16px;
  }
  .tabela-1 table tbody tr {
    height: 90px;
    line-height: 1.5em;
  }
  .tabela-1 table tbody tr:last-child {
    border: 0;
  }
  .tabela-1 table td, .tabela-1 table th {
    text-align: left;
  }
  .tabela-1 table td.l, .tabela-1 table th.l {
    text-align: right;
  }
  .tabela-1 table td.c, .tabela-1 table th.c {
    text-align: center;
  }
  .tabela-1 table td.r, .tabela-1 table th.r {
    text-align: center;
  }
  
  @media screen and (max-width: 35.5em) {
    .tabela-1 table {
      display: block;
    }
    .tabela-1 table > *, .tabela-1 table tr, .tabela-1 table td, .tabela-1 table th {
      display: block;
    }
    .tabela-1 table thead {
      display: none;
    }
    .tabela-1 table tbody tr {
      height: auto;
      padding: 8px 15px;
      
    }
    .tabela-1 table tbody tr td {
      padding-left: 45%;
      margin-bottom: 12px;
    }
    .tabela-1 table tbody tr td:last-child {
      margin-bottom: 0;
    }
    .tabela-1 table tbody tr td:before {
      position: absolute;
      font-weight: 700;
      width: 40%;
      left: 10px;
      /* top: 0; */
    }
    .tabela-1 table tbody tr td:nth-child(1):before {
      content: "Atributo";
    }
    .tabela-1 table tbody tr td:nth-child(2):before {
      content: "Característica";
    }
    .tabela-1 table tbody tr td:nth-child(3):before {
      content: "Exemplo";
    }
    .tabela-1 table tbody tr td:nth-child(4):before {
      content: "Opera";
    }
    .tabela-1 table tbody tr td:nth-child(5):before {
      content: "Microsoft Edge";
    }
  }

/* Tabela-2 */
.tabela-2 table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  }
  .tabela-2 table * {
    position: relative;
  }
  .tabela-2 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
  .tabela-2 table td, .tabela-2 table th {
    padding: 20px;
  }
  .tabela-2 table thead {
      color: #fff;
  }
  .tabela-2 table thead tr {
    height: 60px;
    background: #1d2345;
    /* background: #5058b1; */
    font-size: 16px;
  }
  .tabela-2 table tbody tr {
    height: 90px;
    line-height: 1.5em;
  }
  .tabela-2 table tbody tr:last-child {
    border: 0;
  }
  .tabela-2 table td, .tabela-2 table th {
    text-align: left;
  }
  .tabela-2 table td.l, .tabela-2 table th.l {
    text-align: right;
  }
  .tabela-2 table td.c, .tabela-2 table th.c {
    text-align: center;
  }
  .tabela-2 table td.r, .tabela-2 table th.r {
    text-align: center;
  }
  
  @media screen and (max-width: 35.5em) {
    .tabela-2 table {
      display: block;
    }
    .tabela-2 table > *, .tabela-2 table tr, .tabela-2 table td, .tabela-2 table th {
      display: block;
    }
    .tabela-2 table thead {
      display: none;
    }
    .tabela-2 table tbody tr {
      height: auto;
      padding: 8px 15px;
      
    }
    .tabela-2 table tbody tr td {
      padding-left: 55%;
      margin-bottom: 12px;
    }
    .tabela-2 table tbody tr td:last-child {
      margin-bottom: 0;
    }
    .tabela-2 table tbody tr td:before {
      position: absolute;
      font-weight: 700;
      width: 50%;
      left: 10px;
      /* top: 0; */
    }
    .tabela-2 table tbody tr td:nth-child(1):before {
        content: "";
      }
    .tabela-2 table tbody tr td:nth-child(2):before {
      content: "Extra pequena < 576px";
    }
    .tabela-2 table tbody tr td:nth-child(3):before {
      content: "Pequena ≥ 576px";
    }
    .tabela-2 table tbody tr td:nth-child(4):before {
      content: "Média ≥ 768px";
    }
    .tabela-2 table tbody tr td:nth-child(5):before {
      content: "Grande ≥ 992px";
    }
    .tabela-2 table tbody tr td:nth-child(6):before {
      content: "Extra grande ≥ 1220px";
    }
    .tabela-2 table tbody tr td:nth-child(7):before {
        content: "Extra extra grande ≥ 1400px";
      }
  }

/* Tabela-3 */
.tabela-3 table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  }
  .tabela-3 table * {
    position: relative;
  }
  .tabela-3 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
  .tabela-3 table td, .tabela-3 table th {
    padding-left: 8px;
  }
  .tabela-3 table thead {
      color: #fff;
  }
  .tabela-3 table thead tr {
    height: 60px;
    background: #1d2345;
    /* background: #5058b1; */
    font-size: 16px;
  }
  .tabela-3 table tbody tr {
    height: 40px;
    line-height: 1.5em;
  }
  .tabela-3 table tbody tr:last-child {
    border: 0;
  }
  .tabela-3 table td, .tabela-3 table th {
    text-align: left;
  }
  .tabela-3 table td.l, .tabela-3 table th.l {
    text-align: right;
  }
  .tabela-3 table td.c, .tabela-3 table th.c {
    text-align: center;
  }
  .tabela-3 table td.r, .tabela-3 table th.r {
    text-align: center;
  }
  
  @media screen and (max-width: 35.5em) {
    .tabela-3 table {
      display: block;
    }
    .tabela-3 table > *, .tabela-3 table tr, .tabela-3 table td, .tabela-3 table th {
      display: block;
    }
    .tabela-3 table thead {
      display: none;
    }
    .tabela-3 table tbody tr {
      height: auto;
      padding: 8px 15px;
      
    }
    .tabela-3 table tbody tr td {
      padding-left: 45%;
      margin-bottom: 12px;
    }
    .tabela-3 table tbody tr td:last-child {
      margin-bottom: 0;
    }
    .tabela-3 table tbody tr td:before {
      position: absolute;
      font-weight: 700;
      width: 40%;
      left: 10px;
      top: 0;
    }
    .tabela-3 table tbody tr td:nth-child(1):before {
      content: "Operação";
    }
    .tabela-3 table tbody tr td:nth-child(2):before {
      content: "Sinal";
    }
    .tabela-3 table tbody tr td:nth-child(3):before {
      content: "Exemplo";
    }
    .tabela-3 table tbody tr td:nth-child(4):before {
      content: "Resultado";
    }
    .tabela-3 table tbody tr td:nth-child(5):before {
      content: "Microsoft Edge";
    }
  }

/* Tabela-4 */
.tabela-4 table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  }
  .tabela-4 table * {
    position: relative;
  }
  .tabela-4 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
  .tabela-4 table td, .tabela-4 table th {
    padding-left: 8px;
  }
  .tabela-4 table thead {
      color: #fff;
  }
  .tabela-4 table thead tr {
    height: 60px;
    background: #1d2345;
    /* background: #5058b1; */
    font-size: 16px;
  }
  .tabela-4 table tbody tr {
    height: 40px;
    line-height: 1.5em;
  }
  .tabela-4 table tbody tr:last-child {
    border: 0;
  }
  .tabela-4 table td, .tabela-4 table th {
    text-align: left;
  }
  .tabela-4 table td.l, .tabela-4 table th.l {
    text-align: right;
  }
  .tabela-4 table td.c, .tabela-4 table th.c {
    text-align: center;
  }
  .tabela-4 table td.r, .tabela-4 table th.r {
    text-align: center;
  }
  
  @media screen and (max-width: 35.5em) {
    .tabela-4 table {
      display: block;
    }
    .tabela-4 table > *, .tabela-4 table tr, .tabela-4 table td, .tabela-4 table th {
      display: block;
    }
    .tabela-4 table thead {
      display: none;
    }
    .tabela-4 table tbody tr {
      height: auto;
      padding: 8px 15px;
      
    }
    .tabela-4 table tbody tr td {
      padding-left: 45%;
      margin-bottom: 12px;
    }
    .tabela-4 table tbody tr td:last-child {
      margin-bottom: 0;
    }
    .tabela-4 table tbody tr td:before {
      position: absolute;
      font-weight: 700;
      width: 40%;
      left: 10px;
      top: 0;
    }
    .tabela-4 table tbody tr td:nth-child(1):before {
      content: "Significado";
    }
    .tabela-4 table tbody tr td:nth-child(2):before {
      content: "Operador";
    }
    .tabela-4 table tbody tr td:nth-child(3):before {
      content: "Exemplo";
    }
    .tabela-4 table tbody tr td:nth-child(4):before {
      content: "Resultado";
    }
    .tabela-4 table tbody tr td:nth-child(5):before {
      content: "Microsoft Edge";
    }
  }


  /* Tabela-5 */
.tabela-5 table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  }
  .tabela-5 table * {
    position: relative;
  }
  .tabela-5 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
  .tabela-5 table td, .tabela-5 table th {
    padding-left: 8px;
  }
  .tabela-5 table thead {
      color: #fff;
  }
  .tabela-5 table thead tr {
    height: 60px;
    background: #1d2345;
    /* background: #6ea778; */
    font-size: 16px;
  }
  .tabela-5 table tbody tr {
    height: 40px;
    line-height: 1.5em;
  }
  .tabela-5 table tbody tr:last-child {
    border: 0;
  }
  .tabela-5 table td, .tabela-5 table th {
    text-align: left;
  }
  .tabela-5 table td.l, .tabela-5 table th.l {
    text-align: right;
  }
  .tabela-5 table td.c, .tabela-5 table th.c {
    text-align: center;
  }
  .tabela-5 table td.r, .tabela-5 table th.r {
    text-align: center;
  }
  
  @media screen and (max-width: 35.5em) {
    .tabela-5 table {
      display: block;
    }
    .tabela-5 table > *, .tabela-5 table tr, .tabela-5 table td, .tabela-5 table th {
      display: block;
    }
    .tabela-5 table thead {
      display: none;
    }
    .tabela-5 table tbody tr {
      height: auto;
      padding: 8px 15px;
      
    }
    .tabela-5 table tbody tr td {
      padding-left: 45%;
      margin-bottom: 12px;
    }
    .tabela-5 table tbody tr td:last-child {
      margin-bottom: 0;
    }
    .tabela-5 table tbody tr td:before {
      position: absolute;
      font-weight: 700;
      width: 40%;
      left: 10px;
      top: 0;
    }
    .tabela-5 table tbody tr td:nth-child(1):before {
      content: "Significado";
    }
    .tabela-5 table tbody tr td:nth-child(2):before {
      content: "Operador";
    }
    .tabela-5 table tbody tr td:nth-child(3):before {
      content: "Exemplo";
    }
    .tabela-5 table tbody tr td:nth-child(4):before {
      content: "Resultado";
    }
    .tabela-5 table tbody tr td:nth-child(5):before {
      content: "Microsoft Edge";
    }
  }

/* Tabela-6 */
.tabela-6 table {
    border-spacing: 1;
    border-collapse: collapse;
    background:#dcdfff;
    border-radius: 6px;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  }
  .tabela-6 table * {
    position: relative;
  }
  .tabela-6 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
  .tabela-6 table td, .tabela-6 table th {
    /* padding-left: 8px; */
    padding: 20px;
  }
  .tabela-6 table thead {
      color: #fff;
  }
  .tabela-6 table thead tr {
    height: 60px;
    /* background: #c63b55; */
    background: #2980b9;
    font-size: 16px;
  }
  .tabela-6 table tbody tr {
    height: 90px;
    line-height: 1.5em;
  }
  .tabela-6 table tbody tr:last-child {
    border: 0;
  }
  .tabela-6 table td, .tabela-6 table th {
    text-align: left;
  }
  .tabela-6 table td.l, .tabela-6 table th.l {
    text-align: right;
  }
  .tabela-6 table td.c, .tabela-6 table th.c {
    text-align: center;
  }
  .tabela-6 table td.r, .tabela-6 table th.r {
    text-align: center;
  }
  
  @media screen and (max-width: 35.5em) {
    .tabela-6 table {
      display: block;
    }
    .tabela-6 table > *, .tabela-6 table tr, .tabela-6 table td, .tabela-6 table th {
      display: block;
    }
    .tabela-6 table thead {
      display: none;
    }
    .tabela-6 table tbody tr {
      height: auto;
      padding: 8px 15px;
      
    }
    .tabela-6 table tbody tr td {
      padding-left: 45%;
      margin-bottom: 12px;
    }
    .tabela-6 table tbody tr td:last-child {
      margin-bottom: 0;
    }
    .tabela-6 table tbody tr td:before {
      position: absolute;
      font-weight: 700;
      width: 40%;
      left: 10px;
      /* top: 0; */
    }
    .tabela-6 table tbody tr td:nth-child(1):before {
      content: "Linguagem";
    }
    .tabela-6 table tbody tr td:nth-child(2):before {
      content: "Características";
    }
    .tabela-6 table tbody tr td:nth-child(3):before {
      content: "Aplicações";
    }
    .tabela-6 table tbody tr td:nth-child(4):before {
      content: "Opera";
    }
    .tabela-6 table tbody tr td:nth-child(5):before {
      content: "Microsoft Edge";
    }
  }

  /* Tabela-7 */
.tabela-7 table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 6px -2px rgba(0, 0, 0, 0.5);
  }
  .tabela-7 table * {
    position: relative;
  }
  .tabela-7 table:hover {
    transition: 0.3s box-shadow ease;
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}
  .tabela-7 table td, .tabela-7 table th {
    padding: 20px;
  }
  .tabela-7 table thead {
      color: #fff;
  }
  .tabela-7 table thead tr {
    height: 60px;
    background: #1d2345;
    /* background: #5058b1; */
    font-size: 16px;
  }
  .tabela-7 table tbody tr {
    height: 90px;
    line-height: 1.5em;
  }
  .tabela-7 table tbody tr:last-child {
    border: 0;
  }
  .tabela-7 table td, .tabela-7 table th {
    text-align: left;
  }
  .tabela-7 table td.l, .tabela-7 table th.l {
    text-align: right;
  }
  .tabela-7 table td.c, .tabela-7 table th.c {
    text-align: center;
  }
  .tabela-7 table td.r, .tabela-7 table th.r {
    text-align: center;
  }
  
  @media screen and (max-width: 35.5em) {
    .tabela-7 table {
      display: block;
    }
    .tabela-7 table > *, .tabela-7 table tr, .tabela-7 table td, .tabela-7 table th {
      display: block;
    }
    .tabela-7 table thead {
      display: none;
    }
    .tabela-7 table tbody tr {
      height: auto;
      padding: 8px 15px;
      
    }
    .tabela-7 table tbody tr td {
      padding-left: 55%;
      margin-bottom: 12px;
    }
    .tabela-7 table tbody tr td:last-child {
      margin-bottom: 0;
    }
    .tabela-7 table tbody tr td:before {
      position: absolute;
      font-weight: 700;
      width: 50%;
      left: 10px;
      /* top: 0; */
    }
    .tabela-7 table tbody tr td:nth-child(1):before {
        content: "Nome";
      }
    .tabela-7 table tbody tr td:nth-child(2):before {
      content: "Nota 1";
    }
    .tabela-7 table tbody tr td:nth-child(3):before {
      content: "Nota 2";
    }
    .tabela-7 table tbody tr td:nth-child(4):before {
      content: "Média ≥ 768px";
    }
    .tabela-7 table tbody tr td:nth-child(5):before {
      content: "Grande ≥ 992px";
    }
    .tabela-7 table tbody tr td:nth-child(6):before {
      content: "Extra grande ≥ 1220px";
    }
    .tabela-7 table tbody tr td:nth-child(7):before {
        content: "Extra extra grande ≥ 1400px";
      }
  }