/* CSS RESET E VARIÁVEIS GERAIS*/
:root{
    font-size: 13pt;
    /* TEMA MAR */
    --cor-principal: rgb(159 25 113);
    --cor-secundaria: rgb(78 179 128);
    --unidade-padrao: 1rem;

    --fonte-titulo: "poster", sans-serif;
    --fonte-corpo: "kiro, calibri", sans-serif;;
    --fonte-subtitulos: "poster", sans-serif;
    scroll-behavior: smooth;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

}

body, html{
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ESTILOS DE TEXTO*/
/* ESTILOS DE TEXTO*/
/* ESTILOS DE TEXTO*/

ol, ul, li{
    list-style-type: none;
}

h1{
    font-family: "poster", sans-serif;
    font-weight: 200;
    font-style: normal;
    text-align: center;
}

h2{
    font-family: "poster", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

h3, h4, h5, h6{
    font-family: kiro, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}


p{
    text-align: center;
    line-height: 1.5rem;
    font-family: kiro, sans-serif;
    font-weight: 200;
    font-style: normal;
}

h1{font-size: 2.5rem}
h2{font-size: 2rem}
h3{font-size: 2rem}
h4{font-size: 1.6rem}
h5{font-size: 1.6rem}
h6{font-size: 1.6rem}
p{font-size: 1.3rem}
a{font-size: 1rem; font-family: "poster", sans-serif; color: inherit}
a:hover{color: #9f1971}


hr{
    margin: 0;
    margin-top: 1rem;
    padding: 0;
    width: 100%;
    border: none;
    border-bottom: #8b9fe1 1px dotted;
    opacity: 50;
}

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

    h1{font-size: 2.3rem; margin-bottom: 2rem;}
    h2{font-size: 2rem; margin-bottom: 1rem;}
    h3{font-size: 1.4rem}
    h4{font-size: .8rem}
    h5{font-size: .8rem}
    h6{font-size: .8rem}
    p{font-size: 1.1rem}
    a{font-size: 1rem; font-family: "poster", sans-serif; color: inherit}
}

.orientacoes_atividades{
    font-size: .8rem;
}

.objetivos_oficina{
    font-size: 1rem;
    color: white;
}

.tag_codigo{
    color: #8b9fe1;
    font-size: .8rem;
    margin: 0;
    opacity: 35%;
}


/* COMPOSIÇÕES DE FUNDO - MAPA NORDESTE ESTILIZADO */
/* COMPOSIÇÕES DE FUNDO - MAPA NORDESTE ESTILIZADO */
/* COMPOSIÇÕES DE FUNDO - MAPA NORDESTE ESTILIZADO */

.comps{
    width: 100%;
    height: 40vh;
    z-index: -10;
    -webkit-box-shadow: inset 0 0 36px 0 rgba(0,0,0,0.62);
    -moz-box-shadow: inset 0 0 36px 0 rgba(0,0,0,0.62);
    box-shadow: inset 0 0 36px 0 rgba(0,0,0,0.62);
}

#comp_mar{
    background: url("../imagens/comps/mar_lw.jpg") fixed center;
    background-size: cover;
}

#comp_sertao{
    background: url("../imagens/comps/sertao_lw.jpg") fixed center;
    background-size: cover;
}

#comp_energia{
    background: url("../imagens/comps/energia_lw.jpg") fixed center;
    background-size: cover;
}

#comp_circuito{
    background: url("../imagens/comps/circuito_lw.jpg") fixed center;
    background-size: cover;
}

/* REALIZAÇÃO E ORGANIZAÇÃO DO EVENTO */
/* REALIZAÇÃO E ORGANIZAÇÃO DO EVENTO */
/* REALIZAÇÃO E ORGANIZAÇÃO DO EVENTO */

/*.ifs_nordeste{
    padding: .5rem 2rem .5rem 2rem;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1dvw 3fr 1dvw 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: .3rem;
    background: #22398D;

}*/

.ifs_nordeste{
    display: block;
    width: 100vw;
    padding-top: .3rem;
    padding-bottom: .3rem;
    background: #22398D;

/*    border: solid 2px crimson;*/

}

.container_ifs{
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    width: 80%;
}

.logo_if_organizador{
    height: 7vw;
    cursor: pointer;
    transition: opacity .3s ease-in-out;
}

.logo_if_organizador:hover{
    opacity: 50%;
}


.logo_if_realizador{
    height: 7vw;
    cursor: pointer;
    transition: opacity .3s ease-in-out;
}

.logo_if_realizador:hover{
    opacity: 50%;
}



.legenda_ifs{
    font-size: .6vw;
    writing-mode: vertical-rl;
    opacity: 60%;
    color: #FFFFFF;
    line-height: 0;
    padding: 0;
    margin-left: .5rem;
}




/* SEÇÕES */
/* SEÇÕES */
/* SEÇÕES */

section{
    margin: 0;
    padding: 1rem 3rem 1rem 3rem;
    text-align: center;
}

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

    section{
        padding: .2rem .6rem .2rem .6rem;
    }

    .logo_if_organizador, .legenda_ifs{
        display: none;
    }

    .logo_if_realizador{
        height: 15vw;
        cursor: pointer;
        transition: opacity .3s ease-in-out;
    }

}


main{
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* SEÇÃO: APRESENTAÇÃO CONGRESSO */
/* SEÇÃO: APRESENTAÇÃO CONGRESSO */
/* SEÇÃO: APRESENTAÇÃO CONGRESSO */

#apresentacao{
    background: #9f1971;
    color: lightgrey;

}

.instagram-media{margin:0 auto!important;}


.instagram{
    margin-left: auto;
    margin-right: auto;

}

/* SEÇÃO: SUBMISSÃO DE TRABALHOS */
/* SEÇÃO: SUBMISSÃO DE TRABALHOS */
/* SEÇÃO: SUBMISSÃO DE TRABALHOS */

#trabalhos{

    background: #E4BA01;
}



.blocos{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
    justify-content: center;

}

.blocos p {
    user-select: none;
    box-sizing: border-box;
    height: 100%;
    padding: 15px;
    font-family: var(--fonte-subtitulos);
    margin-left: 0;
    color: snow;
    text-decoration: none;
    display: block;
    border-radius: 10px;
    background-color: #3C3D3D;
    transition: background-color .8s ease-in-out, transform .3s ease-in-out;
}

.blocos p:hover{
    background-color: #9f1971;
    transform: scale(1);
}

/* SEÇÃO: PROGRAMAÇÃO */
/* SEÇÃO: PROGRAMAÇÃO */
/* SEÇÃO: PROGRAMAÇÃO */


#programacao{
    background: #22398D;
    color: snow;
}


.programacao_lista_turno{
    display: flex;
    flex-wrap: wrap;
}

.programacao_atividade{
    background: #4eb380;
    margin: 5px;
}


/* ITENS PROGRAMAÇÃO */

.container_membros_atividade{
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}


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

    .container_membros_atividade{
        margin-top: 2rem;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-around;
    }


}




.item_programacao{
    font-family: kiro, sans-serif;
    font-size: 1.4rem;
/*    background: #3C3D3D;*/
    margin: 5px 0 15px 0;
    border-radius: 1rem;
    border: 2px solid #9f9f9f;
    padding: 1rem;
    transition: all .3s ease-in-out;
}

.item_programacao:hover{
    color: #E4BA01;
    margin: 5px 0 15px 0;
    border: 2px solid #E4BA01;
    padding: 1.2rem;
}





/* MEMBROS ATIVIDADES PROGRAMAÇÃO */
.membro_atividade{
    overflow: hidden;
    width: 150px;
    background-color: #FFFFFF;
    margin: 1rem;
    border-radius: .5rem;
    border: 2px solid #626262;
    transition: transform .3s ease-in-out, height .7s ease-in-out;
}









.membro_atividade:hover{
    transform: scale(1.2);
    border: 2px solid darkgray;
    -webkit-box-shadow: 0 10px 17px -7px rgba(0,0,0,0.59);
    -moz-box-shadow: 0 10px 17px -7px rgba(0,0,0,0.59);
    box-shadow: 0 10px 17px -7px rgba(0,0,0,0.59);

}

.avatar_membro{
    width: 150px;
    height: 100px;
    background-color: #0e1d54;

}

.avatar_membro{
    background-image: url("../imagens/programacao/placeholder.jpg");
    background-color: white;
    transition: all .3s ease-in-out;
    background-position: center center;
    background-size: 150px 150px;

}


.avatar_membro:hover{
    background-size: 200px 200px;
}


.nome_membro{
    background-color: dimgrey;
    background-image: linear-gradient(0deg, rgba(103,103,103,1) 11%, rgba(69,69,69,1) 70%);
    padding: .5rem;
    text-align: center;
    vertical-align: center;
    height: 100%;
}

.nome_membro p{
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.1rem;
    user-select: none;
    margin: 0;
    padding: 0;
}

.item_programacao_sumario{
    cursor: pointer;
}

.link_lattes{
    text-decoration: none;
    font-family: kiro, sans-serif;
    font-size: .8rem;
    visibility: hidden;
    color: #3DB5A8;
}

.membro_atividade:hover .nome_membro p .link_lattes{
    visibility: visible;
}

.link_lattes:hover{
    color: #E4BA01;
}

.link_lattes::before{
    content: "[↗] ";
}


.instituicao_membro{
    font-family: kiro, sans-serif;
    visibility: hidden;
    color: #E4BA01;
}

.membro_atividade:hover .nome_membro .instituicao_membro{
    visibility: visible;
}



.online{
    color: #3897f0;
    font-weight: bolder;

}

/*.online::before{
    display:inline-block;
    height: 1.5rem;
    width: 1.5rem;
    margin-right: .5rem;
    margin-left: .5rem;
    content: "";
    background: url('/imagens/programacao/icoonline_branco.png') no-repeat 0 0;
    background-size: 1.5rem 1.5rem;
}*/

.presencial{
    color: #4eb380;
    font-weight: bolder;

}

/*.presencial::before{
    display:inline-block;
    height: 1.5rem;
    width: 1.5rem;
    margin-right: .5rem;
    margin-left: .5rem;
    content: "";
    background: url('/imagens/programacao/icopresencial_branco.png') no-repeat 0 0;
    background-size: 1.5rem 1.5rem;
}*/







details{
    background-color: #1f347f;

}


#programacao_hibrida{
    display: flex;
    flex-direction: row;
}

.programacao_presencial{
    width: 50%;
    padding: .7rem;
}

.programacao_online{
    width: 80%;
    padding: .7rem;
}

@media screen and (max-width: 900px) {
    #programacao_hibrida{
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .programacao_presencial, .programacao_online{
        width: 100%;
        padding: 0;
    }

}









.data_atividade_evento{
    color: #E4BA01;
}

.horario_atividade_evento{
    color: #E4BA01;
}


/* TABELA */

.tabela_programacao{
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    font-family: kiro, sans-serif;
    font-size: .8rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 1rem;

    padding: 0;
}

.tabela_programacao th, td{
    font-family: kiro, sans-serif;
    border: solid 1px #8b9fe1;

    padding: .7rem;
}



.tabela_programacao td{
    color: #8b9fe1;
    font-weight: 500;

}

.tabela_programacao tr td:last-child{
    width: 35%;
}

.tabela_programacao tr:last-child{
    border: solid 1px #8b9fe1;

}

.tabela_programacao tr:last-child td:last-child{
    border-radius: 0 0 1rem 1rem;
    background-color: #8b9fe1;
    height: .5rem;
    color: #1f347f;

}

.tabela_programacao th{
    color: #1f347f;
    font-weight: 800;
    background-color: #8b9fe1;
    border-radius: 1rem 1rem 0 0;
}

/* TABELA TRABALHOS */




/* SEÇÃO: INSCRIÇÕES */
/* SEÇÃO: INSCRIÇÕES */
/* SEÇÃO: INSCRIÇÕES */

#inscricao, #certificacao{


    background-color: #3C3D3D;
    color: black;
}




/* RODAPÉ */
/* RODAPÉ */
/* RODAPÉ */

footer{
    text-align: center;
    background: #3C3D3D;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 5rem;

}

#contato{
    padding-top: 3rem;
    text-align: center;
    color: dimgray;

}

#contato p{
    margin: 0 0 0 0;
}

/* BANNERS */ /* BANNERS */ /* BANNERS */ /* BANNERS */ /* BANNERS */ /* BANNERS */ /* BANNERS */ /* BANNERS */


.banner{
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    transition: transform .5s ease-in-out;
}


@media screen and (max-width: 600px) {
    .banner{
        height: 15dvh;
        width: 100%;
        background-size: cover;
        background-position: center center;
        transition: transform .5s ease-in-out;
    }

}

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


.banner_submissoes{
    background-image: url("../imagens/banners/ban_sub2.png");

}

.banner_minicurso{
    background-image: url("../imagens/banners/b_mini2.png");

}


/* CARROSSEL */ /* CARROSSEL */ /* CARROSSEL */ /* CARROSSEL */ /* CARROSSEL */ /* CARROSSEL */ /* CARROSSEL */ /* CARROSSEL */

#carrossel{
    background-color: #626262;
    background-position: center;
    background-size: cover;
    padding-top: 3rem;
    padding-bottom: 1rem;
    overflow: hidden;
}


.bg_01{
    background-image: url("../imagens/carrossel/bg_sertao.jpg");
}

.bg_02{
    background-image: url("../imagens/carrossel/bg_energia.jpg");
}

.container_carrossel{
    display: inline-flex;
    height: 30vw;
    margin-left: calc(50vw - 31%);
    /*    border: solid 3px #6bde46;*/
}

.item_carrossel{
    width:60vw;
    min-height: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    /*border: solid 3px crimson;*/
    transition: margin-left .8s ease-in-out, opacity .5s ease-in-out, filter 1s ease-in-out, transform .5s ease-in-out;
    opacity: 0;
    filter: grayscale(100%);
    cursor: pointer;
    border-radius: 15px;
}

.item_carrossel:hover {
    transform: scale(.9);

}

@media screen and (max-width: 600px) {
    .container_carrossel{
        display: inline-flex;
        height: 30vw;
        margin-left: calc(50vw - 31%);

        /*        border: solid 3px #6bde46;*/
    }

    #carrossel{
        padding-top: 1rem;
        padding-bottom: .5rem;
    }
}



#item_ativo{
    opacity: 100%;
    filter: grayscale(0%);
}

.item_carrossel[data-posicao-carrossel="0"]{
    background-image: url("../imagens/carrossel/poster_h_azul_IFS.png");
}
.item_carrossel[data-posicao-carrossel="1"]{
    background-image: url("../imagens/carrossel/organizadores.png");
} 
/* .item_carrossel[data-posicao-carrossel="1"]{
    background-image: url("../imagens/carrossel/poster_h_azul.png");
}


.item_carrossel[data-posicao-carrossel="3"]{
    background-image: url("../imagens/carrossel/ead.png");
}
.item_carrossel[data-posicao-carrossel="4"]{
    background-image: url("../imagens/carrossel/carr_res_min.png");
} */

.posicao_0{
    margin-left: 0;
}

.posicao_1{
    margin-left: -60vw;
}

.posicao_2{
    margin-left: -120vw;
}

.posicao_3{
    margin-left: -180vw;
}


/* NAVEGAÇÃO */ /* NAVEGAÇÃO */ /* NAVEGAÇÃO */ /* NAVEGAÇÃO */ /* NAVEGAÇÃO */ /* NAVEGAÇÃO */ /* NAVEGAÇÃO */ /* NAVEGAÇÃO */

#menu{
    overflow: hidden;
    display: block;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background-color: #3C3D3D;
    z-index: 900;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.30);
    -moz-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.30);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.30);
    visibility: hidden;
}

#menu nav{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    background-color: #3C3D3D;
    overflow: hidden;
}

#menu nav a{
    background-color: #3C3D3D;
    height: 100%;
    padding: 15px;
    margin-left: 5px;
    color: snow;
    text-decoration: none;
    transition: background-color .8s ease-in-out, transform .3s ease-in-out;
}
#menu nav a:hover{
    transform: scale(1.1);
}

#menu nav a[href="#inicio"]:hover{
    background-color:  #6CB540;
    color: #3C3D3D;

}


#menu nav a[href="#apresentacao"]:hover{
    background-color: #9f1971;
}

#menu nav a[href="#trabalhos"]:hover{
    background-color: #E4BA01;
    color: #3C3D3D;
}


#menu nav a[href="#programacao"]:hover{
    background-color: #22398D;
} 

#menu nav a[href="#inscricao"]:hover, #menu nav a[href="#certificacao"]:hover{
    background-color: #3DB5A8;
    color: #ffffff;
}

.botao_top{
    display: none;
}

@media screen and (max-width: 650px) {
    #menu{
        overflow: hidden;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        background-color: #3C3D3D;
    }

    #menu nav{
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        background-color: #3C3D3D;
    }

    #menu nav a{
        background-color: #3C3D3D;
        height: 100%;
        padding: 15px;
        margin-left: 5px;
        color: snow;
        text-decoration: none;
    }

    a[href="#inicio"]{
        display: none;
    }
    #menu nav a:hover{
        background-color: rgb(159 25 113);
    }


    .botao_top{
        display: block;
        width: 120px;
        height: 132px;
        transform: scale(0.5);
        background: url("../imagens/interface/top_branco.png");
        transition: transform .4s ease-in-out;
        cursor: pointer;
        margin-left: auto;
        margin-right: auto;
    }

}


.botao_compartilhar, .botao_compartilhar_whatsapp{
    text-decoration: none;
    font-family: kiro, sans-serif;
    font-size: .8rem;
    color: #E4BA01;
    display: none;
}

.botao_compartilhar:hover, .botao_compartilhar_whatsapp:hover{
    color: white;
}

.separador_compartilhar{
    font-family: kiro, sans-serif;
    font-size: 1rem;
    color: white;
    display: none;
}


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

    .botao_compartilhar_whatsapp{
        display: inline;
    }

    .botao_compartilhar:hover, .botao_compartilhar_whatsapp:hover{
        display: inline;
    }

    .separador_compartilhar{
        display: none;
    }

    botao_compartilhar{
        display: none;
    }


}




details a{
    text-decoration: none;
}

details a:hover{
    text-decoration: none;
    color: white;
}


/* ANIMAÇÃO */

.color-change-2x {
    -webkit-animation: color-change-2x 3.5s linear infinite alternate both;
    animation: color-change-2x 1s linear infinite alternate both;
}



@-webkit-keyframes color-change-2x {
    0% {
        background: #22398D;
    }
    100% {
        background: #9f1971;
    }
}
@keyframes color-change-2x {
    0% {
        background: #22398D;
    }
    100% {
        background: #9f1971;
    }
}


.botao_inscricoes{
    margin-right: auto;
    margin-left: auto;
    width: 70%;
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    transition: transform .3s ease-in-out;


}

a .botao_inscricoes:hover {

    transform: scale(1.1);
    cursor: pointer;
}


.poster_transmissao_aovivo, .acesso_lab{
    margin-top: 2rem;
    margin-bottom: 1rem;
    width: 90%;
    border-radius: 1rem;
    filter: grayscale(100%);
    transition: all .5s ease-in-out;
}

.poster_transmissao_aovivo:hover, .acesso_lab:hover{
    transform: scale(1.1);
    filter: grayscale(0%);
}


@media screen and (max-width: 1350px) {
    .video_transmissao{
        width: 256px;
        height: 144px;
        border-radius: .5rem;

    }

}