@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700&display=swap');

:root{

    --Spartan: "Spartan";

    --Barlow: "Barlow";

    --teal-900: #052E2B;

    --teal-800: #073B37;

    --teal-600: #075E5E;

    --turquoise: #17D0CE;

    --turquoise-ink: #053733;

    --amber: #E0932A;

    --amber-bg: #F6E7C8;

    --amber-ink: #7A4E0C;

    --danger: #A32D2D;

    --ink: #10201F;

    --muted: #4C5A58;

    --surface: #F1F5F4;

    --card: #FFFFFF;

    --border: #D7E1DF;

    --cream: #EAF1EE;

    --cream-muted: #86A6A1;

    /* ponytail: old names aliased to new palette so every var(--first-color) etc. below keeps working */

    --first-color: var(--teal-800);

    --second-color: var(--turquoise);

    --third-color: var(--ink);

    --fourth-color: var(--cream);

    --fifth-color: var(--teal-600);

    --dark-color: var(--teal-900);

    --light-color: var(--card);

}

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body, html{

    background-color: var(--light-color);

    overflow-x: hidden;

}



.ticket_button{

    background-color: var(--first-color);

    color: var(--light-color);

}

.ticket_button:hover{

    background-color: var(--second-color);

}


.footer{
    
            background: var(--third-color);
        }

        .footer .social{

            text-align: center;
        
            padding-bottom: 25px;
        
            color: #fff;
        
        }
        
        .footer .social a{
        
            font-size: 24px;
        
            color: inherit;
        
            width: 40px;
        
            height: 40px;
        
            line-height: 38px;
        
            display: inline-block;
        
            text-align: center;
        
            margin: 0 8px;
        
        }
        
        .footer .social a:hover{
        
            color: var(--turquoise);
        
        }
        
        .footer ul{
        
            color: #fff;
        
            margin-top: 0;
        
            padding: 0;
        
            list-style: none;
        
            font-size: 18px;
        
            line-height: 1.6;
        
            margin-bottom: 0;
        
            text-align: center;
        
        }
        
        .footer ul li a{
        
            font-size: 14px;
        
            letter-spacing: 1px;
        
            font-family: var(--Spartan);
        
            color: inherit;
        
            text-decoration: none;
        
            opacity: 0.8;
        
        }
        
        .footer ul li{
        
            display: inline-block;
        
            padding: 0 15px;
        
        }
        
        .footer ul li a:hover{
        
            opacity: 1;
        
        }
        
        .footer .copyright{
        
            font-size: 12px;
        
            margin-top: 40px;
        
            text-align: center;
        
            color: rgb(182, 182, 182);
        
            font-family: var(--Spartan);
        
        }



.container{

    background: transparent;    

}



/*     Accessibility Navbar      */

.accessibility .nav-link:hover{

    text-decoration: underline;

}

.accessibility{

    background-color: var(--dark-color);



}.accessibility .command a{

    color: var(--light-color);

}

.accessibility .command{

    font-family: var(--Spartan);

    font-size: 10px;

}





/*    Navbar      */

.navbar-toggler{

    color: var(--light-color);

}

.covineesi-links{

    background-color: var(--first-color);

}

.covineesi-links .nav-link, .covineesi-links .navbar-brand {

    color: var(--light-color);

    letter-spacing: 0.5px;

    font-weight: 500;

    font-family: var(--Spartan);

    font-size: 12px;

}

.covineesi-links .nav-link:hover{

    color: var(--light-color);

    text-decoration: underline;

}

.covineesi-links .btn-outline-light{

    font-family: var(--Spartan);

    font-size: 12px;

    padding-top: 5px;

    font-weight: 500;

}

.covineesi-links .btn-outline-light:hover{

    color: var(--third-color);

    font-weight: 600;

}

/*Banner*/

.banner{

    background-image: url("../img/bg.webp");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    color: var(--light-color);

    padding-top: 10%;

}

.banner h1{

    font-family: var(--Spartan);

    font-size: 36px;

    font-weight: 600;

    line-height: 1.2;

}

.banner h3{

    font-family: var(--Spartan);

    font-weight: 700;

    letter-spacing: 2px;

}

.banner svg{

    display: block;

}



/* Sub-Banner */

.sub-banner{

    background-image: url("../img/bg.webp");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    color: var(--light-color);

    padding-top: 10%;

}

.sub-banner h1{

    font-family: var(--Spartan);

    font-size: 46px;

    font-weight: 600;

}

.sub-banner h4{

    font-family: var(--Spartan);

    font-weight: 700;

    font-size: 26px;

    letter-spacing: 2px;

    line-height: 1.5;

}

.sub-banner svg{

    display: block;

}



        .footer{
    
            background: var(--third-color);
        }

        .footer .social{

            text-align: center;
        
            padding-bottom: 25px;
        
            color: #fff;
        
        }
        
        .footer .social a{
        
            font-size: 24px;
        
            color: inherit;
        
            width: 40px;
        
            height: 40px;
        
            line-height: 38px;
        
            display: inline-block;
        
            text-align: center;
        
            margin: 0 8px;
        
        }
        
        .footer .social a:hover{
        
            color: var(--turquoise);
        
        }
        
        .footer ul{
        
            color: #fff;
        
            margin-top: 0;
        
            padding: 0;
        
            list-style: none;
        
            font-size: 18px;
        
            line-height: 1.6;
        
            margin-bottom: 0;
        
            text-align: center;
        
        }
        
        .footer ul li a{
        
            font-size: 14px;
        
            letter-spacing: 1px;
        
            font-family: var(--Spartan);
        
            color: inherit;
        
            text-decoration: none;
        
            opacity: 0.8;
        
        }
        
        .footer ul li{
        
            display: inline-block;
        
            padding: 0 15px;
        
        }
        
        .footer ul li a:hover{
        
            opacity: 1;
        
        }
        
        .footer .copyright{
        
            font-size: 12px;
        
            margin-top: 40px;
        
            text-align: center;
        
            color: rgb(182, 182, 182);
        
            font-family: var(--Spartan);
        
        }





/* Tema */

.tema{

    padding: 8%;

    background-color: var(--fourth-color); 

}

.tema h2{

    position: relative;

    padding-bottom: 10px;

}

.tema h2, .tema h3{

    color: var(--first-color);

    font-family: var(--Spartan);

    font-weight: 600;

    line-height: 1.5;

}

.tema h2::after{

    content: " ";

    position: absolute;

    display: block;

    left: 40%;

    bottom: 0;

    width: 20%;

    height: 4px;

    background-color: var(--second-color);

    border-radius: 4px;

}



/* Tickets */

.tickets{

    padding-bottom: 5%;

    font-family: var(--Spartan);

}

.ticket{

    padding: 15px;

    margin-bottom: 20px;

    background: #fff;

    transition: all ease-in-out 1s;

    border-radius: 5px;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

}

.ticket:hover{

    transform: translateY(-5px);

}

.tickets .nav-item {

    color: black;

    background-color: white;

    text-decoration:none;

    font-weight: 600;

    font-family: var(--Spartan);

}

.tickets a.nav-item.nav-link.active {

    color: white;

    background-color: var(--second-color);

    text-decoration:none;

    font-weight: bold;

}



.ticket .btn-primary, .ticket .btn-primary:active{

    border: var(--second-color);

    background-color: var(--second-color);

}

.ticket .btn-primary:hover{

    border: var(--first-color);

    background-color: var(--first-color);

}



/* Infomação */

.data-text, .area-text, .local-text, .tema-text, .direcao-text, .comite-text{

    font-family: var(--Spartan);

    line-height: 1.8;

}



/* Footer */




/* Botão de Compras */

.icon-button {

    position: fixed;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 80px;

    height: 80px;

    color: #fff;

    background: var(--second-color);

    border: none;

    outline: none;

    border-radius: 50%;

    right: 20px;

    bottom: 20px;

    z-index: 15;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

    transition: all ease-in-out 1s;

}

.icon-button .material-icons{

      font-size: 40px;

}

.icon-button:hover {

    cursor: pointer;

    text-decoration: none;

    color: #fff;

    transform: translateY(-5px);



}

.icon-button:active {

    background: var(--first-color);

}

.icon-button__badge {

    position: absolute;

    top: -10px;

    right: -10px;

    width: 35px;

    height: 35px;

    background: red;

    color: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

}



/* Mini Banner */

.mini-banner{

    font-family: var(--Spartan);

}

.mini-banner .col-md-12{

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

    font-weight: 600;

}

/* Carrinho de Compras */

.carrinho-compras{

    font-family: var(--Spartan);

}

.carrinho-compras .col-md-12{

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

    font-weight: 600;

}

.carrinho-compras .btn-primary{

    border: var(--second-color);

    background-color: var(--second-color);

}

.carrinho-compras .btn-primary:active, .carrinho-compras .btn-primary:hover{

    border: var(--first-color);

    background-color: var(--first-color);

}

/* Submissão */

.submissao .form-group{

    font-family: var(--Spartan);

    font-weight: 600;

}

.submissao h4{

    font-family: var(--Spartan);

    font-weight: 600;

    line-height: 1.5;

}

.submissao h6{

    font-family: var(--Spartan);

    line-height: 1.8;

}

.submissao h3{

    font-family: var(--Spartan);

    font-weight: 600;

    line-height: 1.5;

}

.submissao .prog{

    font-family: var(--Spartan);

    line-height: 1.8;

}

.submissao .btn-primary{

    font-family: var(--Spartan);

    border: var(--second-color);

    background-color: var(--second-color);

}

.submissao .btn-primary:active, .submissao .btn-primary:hover{

    border: var(--first-color);

    background-color: var(--first-color);

}

.submissao th, .submissao td{

    font-family: var(--Spartan);

}



.submissao a, .baixar{

    font-size: large;

    font-family: var(--Spartan);

    font-weight: 600;

}

/* Programação */

#schedule {

    padding: 60px 0 60px 0;

    font-family: var(--Montserrat);

}

  

#schedule .nav-tabs {

    text-align: center;

    margin: auto;

    display: block;

    border-bottom: 0;

    margin-bottom: 30px;

}

  

#schedule .nav-tabs li {

    display: inline-block;

    margin-bottom: 0;

}

  

#schedule .nav-tabs a {

    border: none;

    border-radius: 50px;

    font-weight: 600;

    background-color: var(--second-color);

    color: #fff;

    padding: 10px 100px;

}

  

#schedule .nav-tabs a.active {

    background-color: var(--first-color);

    color: #fff;

}

  

#schedule .sub-heading {

    text-align: center;

    font-size: 18px;

    font-style: italic;

    margin: 0 auto 30px auto;

}

  

#schedule .tab-pane {

    transition: ease-in-out .2s;

}

#schedule .tab-pane a {

    text-decoration: none;

}

#schedule .schedule-item {

    border-bottom: 1px solid #cad4f6;

    padding-top: 15px;

    padding-bottom: 15px;

    transition: background-color ease-in-out 0.3s;

}

  

#schedule .schedule-item:hover {

    background-color: #fff;

}

  

#schedule .schedule-item time {

    color: var(--ink);

    padding-bottom: 5px;

    display: inline-block;

}

  

#schedule .schedule-item .speaker {

    width: 60px;

    height: 60px;

    overflow: hidden;

    border-radius: 50%;

    float: left;

    margin: 0 10px 10px 0;

}

  

#schedule .schedule-item .speaker img {

    height: 100%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

    margin-left: 50%;

    transition: all ease-in-out 0.3s;

}

  

#schedule .schedule-item h4 {

    font-size: 18px;

    color: var(--ink);

    font-weight: 600;

    margin-bottom: 5px;

}

  

#schedule .schedule-item h4 span {

    font-style: italic;

    color: var(--ink);

    font-weight: normal;

    font-size: 16px;

}



#schedule .schedule-item p {

    font-style: italic;

    color: var(--ink);

    margin-bottom: 0;

}

.hide{

    display: none;

}



/* Envio de Submissão */



.envio-sub{

    font-family: var(--Spartan);

    font-weight: 600;

}



.envio-sub .btn-primary:active, .envio-sub .btn-primary{

    border: var(--second-color);

    background-color: var(--second-color);

}



.envio-sub .btn-primary:hover{

    border: var(--first-color);

    background-color: var(--first-color);

}



/* Checkout formulário  */



.checkout{

    font-family: var(--Spartan);

    font-weight: 600;

}



.checkout .btn-primary:active, .checkout .btn-primary{

    border: var(--second-color);

    background-color: var(--second-color);

}



.checkout .btn-primary:hover{

    border: var(--first-color);

    background-color: var(--first-color);

}



/* Conferencias */

.event .event-text h4{

    font-family: var(--Spartan);

}

.event .event-text h6{

    font-family: var(--Spartan);

    

}

.event .link{

    font-family: var(--Spartan);

}



.speaker-event-cover{

    width: 100px;

    height: 100px;

    -webkit-border-radius: 100px;

    -webkit-background-clip: padding-box;

    -moz-border-radius: 100px;

    -moz-background-clip: padding;

    border-radius: 100px;

    background-clip: padding-box;

    margin: 7px 0 0 5px;

    float: left;

    background-size: cover;

    background-position: center center;

}



/*Programação  PT - 2 */

.section-header{

    font-family: var(--Spartan);

}



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

    .sub-banner h1{

        font-size: 36px;

    }

    /* Adicionar */

    .sub-banner h4{

        font-size: 22px;

    }

    .banner h1{

        font-size: 28px;

    }

    .banner h4{

        font-size: 18px;

    }

}



.termos{

    font-family: var(--Spartan);

    line-height: 1.8;

    font-weight: 600;

    font-size: 16px;

}



/* Apoio Instituicional */



.apoio-prog-slider .apoio-items {

    align-items: center;

    justify-content: center;

    display: flex;

    background-color: #fff;

    box-shadow: 0 4px 5px #3b3c3b;

    border-radius: 8px;

    padding: 5px;

    margin: 15px;

}



.img {

    width: 120px;

    height: 120px;



    /*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/

    object-fit: scale-down;

}



.apoio-items:hover {

    align-items: center;

    justify-content: center;

    transition: all ease 0.3s;

    transform: scale(1.1) translateY(-5px);

}



.apoio h2, .apoio h3{

    position: relative;

    padding-bottom: 10px;

}

.apoio h2, .apoio h3{

    color: var(--first-color);

    font-family: var(--Spartan);

    font-weight: 600;

    line-height: 1.5;

}

.apoio h3::after,.apoio h2::after{

    content: " ";

    position: absolute;

    display: block;

    left: 40%;

    bottom: 0;

    width: 20%;

    height: 4px;

    background-color: var(--second-color);

    border-radius: 4px;

}



/* Organização */



.org .org-items {

    align-items: center;

    justify-content: center;

    display: flex;

    background-color: #fff;

    box-shadow: 0 4px 5px #3b3c3b;

    border-radius: 8px;

    padding: 5px;

    margin: 15px;

}



.org-items:hover {

    align-items: center;

    justify-content: center;

    transition: all ease 0.3s;

    transform: scale(1.1) translateY(-5px);

}

.org-items:hover {

    align-items: center;

    justify-content: center;

    transition: all ease 0.3s;

    transform: scale(1.1) translateY(-5px);

}



.organizacao h2, .organizacao h3{

    position: relative;

    padding-bottom: 10px;

}

.organizacao h2, .organizacao h3{

    color: var(--first-color);

    font-family: var(--Spartan);

    font-weight: 600;

    line-height: 1.5;

}

.organizacao h3::after,.organizacao h2::after{

    content: " ";

    position: absolute;

    display: block;

    left: 40%;

    bottom: 0;

    width: 20%;

    height: 4px;

    background-color: var(--second-color);

    border-radius: 4px;

}

/* ..................................................................................................... */

/* ALTO CONTRASTE */

.contrast,

.contrast nav,

.contrast div,

.contrast li,

.contrast ol,

.contrast header,

.contrast footer,

.contrast section,

.contrast main,

.contrast aside,

.contrast article {

    background: var(--dark-color) !important;

    color: white !important;

}



.contrast h1,

.contrast h2,

.contrast h3,

.contrast h4,

.contrast h5,

.contrast h6,

.contrast p,

.contrast label,

.contrast strong,

.contrast em,

.contrast cite,

.contrast q,

.contrast i,

.contrast b,

.contrast u,

.contrast span {

    color: white !important;

}

.contrast .event-slider .slick-next::before,.contrast .event-slider .slick-prev::before{

    color: white !important;

    font-size: 24px;

}

.contrast a{

    color: yellow !important;

}

.contrast .box{

    border: 2px solid #fff!important;

}

.contrast .prog-slider .items{

    background-color: #fff!important;

    border: 1px solid #fff!important;

}

.contrast .org-slider .items{

    background-color: #fff!important;

    border: 1px solid #fff!important;

}

.contrast .jumbotron{

    border: 1px solid #fff!important;

}

.contrast .content .content-body{

    border: 1px solid #fff!important;

}

.contrast .footer{

    border: 1px solid #fff!important;

}

.contrast .wrapper{

    border: 1px solid #fff;

}

.contrast .buttons .item{

    border: 1px solid yellow!important;

}

.contrast .content-container{

    border: 1px solid #fff;

}

.contrast .content-container .btn-primary{

    border: 1px solid yellow!important;

}

.contrast .covineesi-links{

    border: 1px solid #fff;

}

.contrast .covineesi-links .btn-outline-light:hover{

    font-weight: bolder;

    background-color: black;

    text-decoration: underline;

}

.contrast .dropdown-menu{

    border: 1px solid #fff;

}

.contrast .covineesi-links .dropdown-divider{

    border: 1px solid #fff!important;

}

.contrast .covineesi-links .dropdown-item:hover{

    font-weight: bolder;

    background-color: var(--dark-color);

    text-decoration: underline;

}

.contrast .perfil .mini-perfil-color{

    border: 1px solid #fff!important;

}

.contrast .perfil .mini-perfil{

    border: 1px solid #fff!important;

}

.contrast button,

.contrast input[type=button],

.contrast input[type=reset],

.contrast input[type=submit] {

    background: black !important;

    color: yellow !important;

    border: none !important;

}





.contrast .social a:hover{

    color: yellow!important;

}

.contrast .social i:hover{

    color: yellow!important;

}





.contrast input[type=text],

.contrast input[type=password],

.contrast input[type=url],

.contrast input[type=search],

.contrast input[type=email],

.contrast input[type=tel],

.contrast input[type=date],

.contrast input[type=month],

.contrast input[type=week],

.contrast input[type=datetime],

.contrast input[type=datetime-local],

.contrast textarea,

.contrast select,

.contrast input[type=number] {

    background: black !important;

    border: 1px solid white !important;

    color: white !important;

}



.contrast img.on-contrast-force-gray {

    filter: grayscale(100%) contrast(120%);

}



.contrast img.on-contrast-force-white {

    filter: brightness(0) invert(1);

}

.contrast .banner path{

    fill: yellow!important;

}

.contrast span.text{

    color: var(--dark-color)!important;

    background-color: yellow!important;

}



.contrast .contagem .title::after{

    background-color: yellow!important;

}



.contrast .tickets .ticket button{

    background: black !important;

    color: yellow !important;

    border: 1px solid  #fff!important;

}





.contrast .swal2-modal{

    border: 1px solid #fff;

}

.contrast .tickets .nav-item {

    background-color: var(--dark-color);

}

.contrast .tickets a.nav-item.nav-link.active{

    background-color: var(--dark-color);

    border: 1px solid #fff;

}

.contrast .icon-button{

    background-color: var(--dark-color);

    border: 1px solid #fff;

}

.contrast thead, .contrast tbody{

    color: #fff;

}

.contrast .tema h2::after {

    background-color: yellow!important;

}

.contrast .sub-banner path{

    fill: yellow!important;

}





.contrast .apoio-items{

    border: 1px solid #fff;

}

.contrast .apoio h3::after, .contrast .apoio h2::after {

    background-color: yellow!important;

}

.contrast .tema{

    border: 1px solid #fff;

}





.contrast .org-items{

    border: 1px solid #fff;

}

.contrast .organizacao h3::after, .contrast .organizacao h2::after {

    background-color: yellow!important;

}





/*Cookie bar - banner */

.wrapper{

    position: fixed;

    bottom: 50px;

    left: 30px;

    right: 30px;

    max-width: 365px;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 25px 25px 30px 25px;

    border-radius: 15px;

    z-index: 1;

    box-shadow: 10px 30px 50px 20px rgba(29, 29, 29, 0.2);

    background: #fff;

}

.wrapper img{

    max-width: 90px;

}

.wrapper .content{

    margin-top: 10px;

}

.wrapper .content header{

    font-size: 25px;

    font-weight: 600;

}

.wrapper .content p{

    color: #858585;

    margin: 5px 0 20px 0;

    text-align: justify;

}

.wrapper .buttons{

    display: flex;

    align-items:flex-start ;

    justify-content: flex-start;

}

.wrapper p a{

    color: var(--second-color);

    font-weight: 600;

}

.buttons button, .buttons .button{

    padding: 10px 20px;

    border: none;

    outline: none;

    color: #fff;

    font-size: 16px;

    font-weight: 500;

    border-radius: 5px;

    background: var(--first-color);

    cursor: pointer;

    transition: all 0.3s ease;

}

.buttons button:hover, .buttons .button:hover{

    transform: scale(0.97);

}

.buttons .item{

    margin: 0 10px;

}

.buttons a{

    text-decoration: none;

    color: var(--second-color);

}

.wrapper.hide{

    opacity: 0;

    pointer-events: none;

    transform: scale(0.8);

    transition: all 0.3s ease;

}

::selection{

    color: #fff;

    background: var(--second-color);

}