#tela {
    position: absolute;
    width: 100%;
    height: 100%;
}

#cabecalho {
    width: 100%;
    height: 120px;
    position: relative;
    text-align:center;
    margin-top: -35px;
}

/* BARRA PRETA */
.barraPreta {
    background-color: #343a40;
    width: 100%;
    height: 50px;
    margin-top: 0;
    color: white;
    font-size: x-large;
    text-align: center;
    z-index: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
}

/* IMAGEM */
#divImg {
    position: relative;
}

#imagem {
    height: 100%;
}

.imagemPadrao {
    background-color: rgb(0, 42, 96) !important;
    background-size: 70%;
    /* background-position: 0 55%; */
    animation: Banner 90s linear infinite;
}

@keyframes Banner {
    0% {background-position: 0 55%;}
    100% {background-position: 233% 55%;}
}

.imagemNormal {
    height: 30%;
}

.imagemVolta {
    height: 30%;
    animation: imagemNormal 1s;
}

@keyframes imagemNormal {
    0% {height: 0%;}
    100% {height: 30%;}
}

.imagemScroll {
    height: 0%;
    animation: imagemScroll 1s;
}

@keyframes imagemScroll {
    0% {height: 30%;}
    100% {height: 0%;}
}

/* CIRCULO */
#circulo {
    margin-bottom: 10px;
    background-color: #343a40;
    border-radius: 50%;
    background-size: 100%;
    z-index: 3;
}

.circuloNormal {
    height: 120px;
    width: 120px;
    position: relative;
    top: 0px;
    left: calc(50% - 60px);
}

.circuloVolta {
    height: 120px;
    width: 120px;
    position: relative;
    top: 0px;
    left: calc(50% - 60px);
    animation: LogoNormal 1s;
}

.circuloScroll {
    height: 90px;
    width: 90px;
    position: relative;
    top: 40px;
    left: 30px;
    animation: LogoScroll 1s;
}

@keyframes LogoNormal {
    0% {    
        left: 30px;
        height: 90px;
        width: 90px;
        top: 40px;
    }
    100% {
        left: calc(50% - 60px);
        height: 120px;
        width: 120px;
        top: 0px;
    }
}

@keyframes LogoScroll {
    0% {    
        left: calc(50% - 60px);
        height: 120px;
        width: 120px;
        top: 0px;
    }
    100% {
        top: 40px;
        left: 30px;
        height: 90px;
        width: 90px;
    }
}

#editalCurso {
    max-height: 350px;
    font-size: 12px;
    white-space: pre-line;
    display: flex;
    justify-content: space-around;
}

#textoCurso {
    max-height: 350px;
    font-size: 12px;
    white-space: pre-line;
}

#botaoOpacao {
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%, 0);
}

.botaoAberto {
    height: 70%;
}

.botaoFechado {
    height: 0%;
}

.divSemProtocolo {
    display: flex;
    justify-content: flex-end;
}

.divCadastro {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-right: 30px;
}

/* TEXTO */
.divTituloNormal {
    height: 72px;
}

.divTituloScroll {
    height: 0px;
    animation: divTituloScroll 1s;
}

@keyframes divTituloScroll {
    0% {    
        height: 72px;
    }
    100% {
        height: 0px;
    }
}

.divTituloVolta {
    height: 72px;
    animation: divTituloVolta 1s;
}

@keyframes divTituloVolta {
    0% {    
        height: 0px;
    }
    100% {
        height: 72px;
    }
}


#titulo {
    align-items: center;
    margin: 0;
}

.tituloNormal {
    padding: 15px 0 24px;
    font-size: 22px;
    font-weight: bold;
    color: #636363;
    display: flex;
}

.tituloNormal::before {
    content: "";
    height: 1px;
    flex-grow: 1;
    margin-right: 1rem;
    background: linear-gradient(-90deg ,#636363, transparent);
}

.tituloNormal::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    margin-left: 1rem;
    background: linear-gradient(90deg ,#636363, transparent);
}

.tituloVolta {
    padding: 15px 0 24px;
    font-size: 22px;
    font-weight: bold;
    color: #636363;
    display: flex;
    animation: tituloVolta 1s;
}

@keyframes tituloVolta {
    0% {  
        color: white;
        display: flex;
        position: fixed;
        z-index: 2;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    100% {
        color: #636363;
        display: flex;
        position: fixed;
        top: calc(30% + 85px);
        left: 50%;
        transform: translate(-50%, 0);
    }
}

.tituloVolta::before {
    content: "";
    height: 1px;
    flex-grow: 1;
    margin-right: 1rem;
    background: linear-gradient(-90deg ,#636363, transparent);
}

.tituloVolta::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    margin-left: 1rem;
    background: linear-gradient(90deg ,#636363, transparent);
}

.tituloScroll {
    padding: 8px 0 24px;
    font-size: 22px;
    font-weight: bold;
    color: white;
    display: flex;
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    animation: tituloScroll 1s;
}

@keyframes tituloScroll {
    0% {  
        padding: 15px 0 24px;
        color: #636363;
        display: flex;
        top: calc(30% + 85px);
    }
    100% {
        padding: 8px 0 24px;
        color: white;
        display: flex;
        position: fixed;
        z-index: 2;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

.textoSelecao {
    border-radius: 0 !important;
}

#divSelecao {
    display: inline-flex;
    text-align: center;
}

.divSelecaoNormal {
    display: none !important;
    height: 0px;
}

.divSelecaoScroll {
    height: 100%;
    display: inline-flex;
    animation: divSelecaoScroll 1s;
}

@keyframes divSelecaoScroll {
    0% {  
        height: 0px;
    }
    100% {
        height: 100%;
    }
}

.divSelecaoVolta {
    display: none;
    height: 0px;
    animation: divSelecaoVolta 1s;
}

@keyframes divSelecaoVolta {
    0% {  
        display: inline-flex;
        height: 100%;
    }
    75% {
        display: none;
    }
    100% {
        display: none ;
        height: 0px;
    }
}

#opcao {
    align-items: center;
    height: 100%;
    background-color: #343a40;
    padding-top: 15px;
    margin-right: 0;
}

#menuProximo {
    border-bottom: 1px solid #343a40;
    border-right: 1px solid #343a40;
}

#imagemOpcao {
    background-color: gray;
    border-radius: 50%;
    background-size: 100%;
    height: 100px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

#tituloOpcao {
    color: white;
    font-size: 20px;
    font-weight: bold;
}

#tituloInscr {
    padding-top: 10px;
    font-size: 24px;
    font-weight: bold;
}

#textoOpcao {
    color: white;
    height: 100px;
    font-size: 1rem;
}

#textoOpcao1 {
    color: white;
    font-size: 1rem;
    margin-left: 5px;
}

.animacaoAparece {
    opacity: 0%;
    animation: animacaoAparece 1s;
}

@keyframes animacaoAparece {
    0% {  
        opacity: 100%;
    }
    35% {
        opacity: 0%;
    }
}

.animacaoSumirRapido {
    opacity: 0%;
    animation: animacaoSumirRapido 0.5s;
}

@keyframes animacaoSumirRapido {
    0% {  
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}

.animacaoApareceRapido {
    opacity: 0%;
    animation: animacaoApareceRapido 0.5s;
}

@keyframes animacaoApareceRapido {
    0% {  
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

.animacaoSome {
    opacity: 100%;
    animation: animacaoSome 1s;
}

@keyframes animacaoSome {
    0% {  
        opacity: 0%;
    }
    50% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

.animacaoTroca {
    opacity: 100%;
    animation: animacaoTroca 1s;
}

@keyframes animacaoTroca {
    0% {  
        opacity: 100%;
    }
    50% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

#divEditalCurso {
    padding: 0.5rem;
}

#divTextoCurso {
    padding: 0.5rem;
    background-color: #fff0b3;
    border-color: #ffcc00;
}

#divTextoAviso {
    background-color: #fff0b3;
    border-color: #ffcc00;
    position: relative;
    border-radius: 0.25rem;
    text-align: center;
    border: 1px solid transparent;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 5px 20px 0 rgba(0, 0, 0, 0.19);
}

.divTextoNormal {
    height: auto;
    margin-bottom: 1rem;
    padding: 0.75rem 1.25rem;
    display: block;
}

.divTextoScroll {
    margin-bottom: 0;
    height: 0px;
    padding: 0;
    display: none;
    animation: divTextoScroll 1s;
}

@keyframes divTextoScroll {
    0% {  
        height: 56px;
        padding: 0.75rem 1.25rem;
        display: block;
        margin-bottom: 1rem;
    }
    100% {
        padding: 0;
        height: 0px;
        display: none;
        margin-bottom: 0;
    }
}

.divTextoVolta {
    height: 56px;
    padding: 0.75rem 1.25rem;
    display: block;
    margin-bottom: 1rem;
    animation: divTextoVolta 1s;
}

@keyframes divTextoVolta {
    0% {  
        height: 0px;
        padding: 0;
        display: none;
        margin-bottom: 0;
    }
    100% {
        height: 56px;
        padding: 0.75rem 1.25rem;
        display: block;
        margin-bottom: 1rem;
    }
}

#textoAviso {
    font-size: 20px;
    color: rgb(40, 40, 40) !important;
}

.barra {
    background-color: #343a40;
    height: 100%;
}

.direita {
    position: absolute;
    left: 0px;
    position: absolute;
    left: 0px;
    width: 2%;
}

.esquerda {
    position: absolute;
    left: 98%;
    width: 2%;
}

.container {
    max-width: 80% !important;
}

.radioButton {
    visibility: hidden;
}

.radioButton:disabled + .radioInput {
    background-color: #c4c4c4;
    border-color: #c4c4c4;
}

.radioButton:checked + .radioInput {
    background-color: #71b6ff;
    border-color: #71b6ff;
}

.icon-hover {
    cursor: pointer;
}