/* Root */

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    --black: #161610;
    --grey: #9e9e90;
    --yellow: #ffdb58;
    --white: #fffff0;
    --coral: #ffeba4;
}

html{
    scroll-behavior: smooth;
}

body{
    position: relative;
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}


/* Utility Classes */

.active{
    background-color: var(--coral);
}

.primary-title{
    font-family: 'Anton', sans-serif;
    text-shadow: 4px 4px var(--yellow);
    font-size:3vw;
}

.secondary-title{
    color: var(--yellow);
    font-size: 1.7vw;
    margin-bottom: 1vw;
}

.responsive-text{
    font-size: 1vw;
}

.hamburger-line{
    width: 9.3vw;
    height: 2.3vw;
    background-color: white;
    margin: 0.7vw;
    border-radius: 3vw;
}

.stop-scrolling{
    overflow: hidden;
}

/* Landing Page */

#container-landing{
    position: relative;
    width: 100vw;
    height: 125vh;
    font-size: 0.9rem;
    background-color: var(--white);
}

#fundo-landing{
    position: absolute;
    width: 100%;
}

.sticky-navbar{
    position : fixed;
}

.sticky-navbar-scrolled{
    background-color: var(--white) !important;
    transition: background-color 700ms linear;
    z-index: 1;
    height: 5vw !important;
}

.sticky-navbar-not-scrolled{
    background-color: transparent;
    transition: background-color 700ms linear;
    z-index: 1;
}

.nav-items-scrolled{
    transition: margin-right 700ms linear;
    margin-right: 19vw !important;
}


#navbar{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 1vw;
    justify-content: space-between;
    z-index:1;
    height: 10vw;
}

.navitems-center{
    margin-right: 3rem;
}

.navitems-uncenter{
    margin-right: 0rem;
}


.logo_invisivel{
    opacity: 0;
    transition : opacity 300ms linear;
}

.logo_visivel{
    opacity: 1;
    transition : opacity 700ms linear;
}

#nav-items{
    display: flex;
    align-items: center;
    margin-right: 1.5vw;
    transition: margin-right 700ms linear;
}

.item{
    padding: 0.3rem 0.5rem;
    margin-right: 1rem;
    list-style: none;
    border: solid 0.2rem var(--coral);
    border-radius: 0.8rem;
    transition: background-color 0.3s ease-in;
}

#nav-items a{
    text-decoration: none;
    color: var(--black);
}

.item:hover{
    background-color: var(--coral);
}


.navbar-selected{
    background-color: var(--coral);
}

/* Programa */

#container-programa{
    position: relative;
    width: 100vw;
    height: 89vw;
    /*height:1487px;*/
    margin-bottom: 18rem;
    background-color: var(--white);
}

#fundo_programa{
    position: absolute;
    width: 100%;
    /* height:1500px; */
    height: 120%;
    top: 0;
    left: 0;
}

#pen{
    position: absolute;
    width: 103%;
    top:18%;
    left:-8%;
}

#titulo-programa{
    position:absolute;
    width:20%;
    top:9%;
    left:45%;
}

#hora-9{
    position:absolute;
    width:13%;
    top:32%;
    left:10%;
}

#hora-9-15{
    position: absolute;
    width:22%;
    top:29%;
    left:28%;
}

#hora-9-30{
    position: absolute;
    width:22%;
    top:22%;
    left:50%;
}
#hora-10-30{
    position: absolute;
    width:18%;
    top:31%;
    left:69%;
}

#hora-11{
    position: absolute;
    width:27%;
    top:42%;
    left:65%;
}

#inscricoes-btn{
    position: absolute;
    width:9%;
    top:53%;
    left:80%;
}

#inscricoes-btn:hover{
    width: 9.5%;
    left: 79.75%;
}

#hora-12-45{
    position: absolute;
    width:15%;
    top:67%;
    left:69%;
}

#hora-14{
    position: absolute;
    width:20%;
    top:81%;
    left:64%;
}

#hora-16-30{
    position: absolute;
    width:20%;
    top:90%;
    left:40%;
}

#hora-17{
    position: absolute;
    width:17%;
    top:89%;
    left:13%;
}

#hora-17-30{
    position: absolute;
    width:20%;
    top:67%;
    left:12%;
}

/* Temáticas*/

#container-tematicas{
    position:relative;
    width:100vw; 
    height: 54vw;
}

#titulo-tematicas{
    display: flex;
    justify-content: center;
    width: 100%;
}

.tematicas-subtitle{
    font-family: 'Anton', sans-serif;
    font-size:2.5vw;
}

#tematicas-internet{
    position:absolute;
    width:60%;
    height:100%;
}

#tematicas-amarela{
    position:absolute;
    width:100%;
    height:100%;
    top:6.5%;
    left:0;
}

#internet-title{
    text-shadow: 4px 4px var(--coral);
    position: absolute;
    width: 100%;
    top:16vw;
    left:15vw;
}

#texto-internet{
    position:absolute;
    width:67%;
    height:50%;
    font-size:1.3vw;
    top:40%;
    left:10%;    
}

#tematicas-dating{
    position: absolute;
    width: 60%;
    height:100%;
    left: 40%;
}

#tematicas-cinza{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 6.5%;
    left:0;
}

#dating-title{
    text-shadow: 4px 4px var(--coral);
    position: absolute;
    width: 100%;
    top:16vw;
    left:25vw;
}

#texto-dating{
    position:absolute;
    width:60%;
    height:50%;
    font-size:1.3vw;
    top:45%;
    left:30%;    
}

#increvase{
    position: absolute;
    top: 64%;
    left:30%;
    color: var(--yellow);
}

#inscrevase:hover{
    color: var(--white);
}

/* Convidados */

#container-convidados{
    position: relative;
    width: 100vw;
    height: auto;
    margin-top: 10vw;
}

#titulo-convidados{
    display: flex;
    justify-content: center;
    width: 100%;
}

#convidado-showcase{
    display: flex;
    flex-direction: row;
    margin-top: 5vw;
    margin-left: 13vw;
    margin-right: 13vw;
}

#showcase-1{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 3vw;
}

#showcase-2{
    flex: 1;
    padding: 2vw;
}

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

#showcase-img{
    border-radius: 1vw;
    box-shadow: 0.5vw 0.5vw var(--yellow);
    width: 24vw;
}

.logo-img{
    width: 2vw;
    height: 2vw;
}

#social-media{
    display: flex;
    flex-direction: row;
    margin-left: 0vw;
    margin-right: 9vw;
    margin-top: 0.8vw;
    justify-content: space-between;
}

#convidado-selector{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 9vw;
    margin-top: 5vw;
    margin-bottom: 7vw;
}

.selector-container{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-selector{
    height: 12vw;
    width: 12vw;
    border-radius: 2vw;
    box-shadow: 0.5vw 0.5vw var(--grey);
}

.img-selector-selected{
    height: 14vw;
    width: 14vw;
    border-radius: 2vw;
    box-shadow: 0.5vw 0.5vw var(--yellow);
}

.img-selector:hover{
    transition: box-shadow 250ms linear;
    box-shadow: 0.5vw 0.5vw var(--coral);
}



/* 25 anos ntc e digimedia */

#container-digimedia{
    position: relative;
    width: 100vw;
    height: 89vw;
    /* background-color:var(--white); */
}

#fundo-digimedia{
    position:absolute;
    width:100%;
}

#ntc{
    position:absolute;
    width:100%;
    height:50%;
}

#nav-ntc{
    white-space: nowrap;
}

#ntc-titulo{
    position:absolute;
    height:5.7%;
    left:45%;
}

#descricao-ntc{
    position:absolute;
    width:50%;
    height:100%;
}

#mancha-amarela{
    position:absolute;
    width:100%;
    height:100%;
    top:6.5%;
    left:-1%;
}

#texto-ntc{
    position:absolute;
    width:70%;
    height:50%;
    font-size:1.3vw;
    top:39%;
    left:23%;
}

#media-ntc{
    position:absolute;
    width:50%;
    height:100%;
    left:50%;
}

#imagemvideo-ntc{
    position: absolute;
    width:57%;
    height:57%;
    top:27%;
    left:20%; 
    background-color:var(--white);
    border-radius:10px;
    padding: 10px;
    box-shadow: 5px 10px var(--yellow); 
}

#digimedia{
    position:absolute;
    width:100%;
    height:50%;
    top:50%;
}

#digimedia-titulo{
    position:absolute;
    height:5.7%;
    left:45%;
}

#media-digimedia{
    position:absolute;
    width:50%;
    height:100%;
    left:0;
}

#descricao-digimedia{
    position:absolute;
    width:50%;
    height:100%;
    left:50%;
    font-size:1.3vw;
}

#mancha-cinza{
    position:absolute;
    width:100%;
    height:100%;
    top:6.5%;
    left:0%;
}

#texto-digimedia{
    position:absolute;
    width:70%;
    height:50%;
    font-size:1.3vw;
    top:25%;
    left:10%;    
}

#imagemvideo-digimedia{
    position: absolute;
    width:57%;
    height:47%;
    top:26%;
    left:20%; 
    border-radius:10px;
    padding: 10px;
    box-shadow: 5px 10px var(--yellow);
}

.link-manchas{
    color:var(--black);
}

.link-manchas:hover{
    color: var(--white);
}


/* Galeria */

#titulo-galeria{
    text-align: center;
    margin-top: 9vw;
    margin-bottom: 5vw;
}    

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

#galeria-showcase-img{
    border-radius: 3vw;
    height: 30vw;
    box-shadow: 0.5vw 0.5vw var(--yellow);
}

.img-selector-galeria{
    border-radius: 0.7vw;
    height: 6vw;
    box-shadow: 0.3vw 0.3vw var(--grey); 
}

.img-selector-galeria-selected{
    border-radius: 0.7vw;
    height: 6vw;
    box-shadow: 0.5vw 0.5vw var(--yellow); 
    animation-name: shadow-click;
    animation-duration: 1s;
    animation-iteration-count: 1; 
}

@keyframes shadow-click{
    from{box-shadow: 0.3vw 0.3vw var(--grey)}
    to{box-shadow: 0.5vw 0.5vw var(--yellow)}
}

#selector-galeria{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 20.5vw;
    margin-right: 20vw;
    padding-top: 3vw;
}


/* Empresas */

#container-empresas{
    position: relative;
    width: 100vw;
    height:100vw;
    margin-top: 9vw;
}

#fundo-empresas{
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
}

#titulo-empresas{
    position: absolute;
    width: 100vw;
    text-align: center;
    margin-top: 9vw;
    margin-bottom: 5vw;
}

#linha-1{
    position: absolute;
    width: 100vw;
    height: 30vw;
    top:23vw;
}

#empresas-altice{
    position: absolute;
    width: 35%;
    left: 3%;
    top: 10%;
}

#empresas-critec{
    position: absolute;
    width: 13%;
    left: 44%;
    top: 0;
}

#empresas-gocontact{
    position: absolute;
    width: 22%;
    left: 73%; 
    top: 10%;
}

#linha-2{
    position: absolute;
    width: 100vw;
    height: 30vw;
    top: 40vw;
}

#empresas-inovaria{
    position: absolute;
    width: 35%;
    left: 3%; 
    top: 10%;
}

#empresas-digital{
    position: absolute;
    width: 25%;
    left: 40%; 
    top: 23%;
}

#empresas-pictonio{
    position: absolute;
    width: 22%;
    left: 73%; 
    top: 10%;
}

#linha-3{
    position: absolute;
    width: 100vw;
    height: 30vw;
    top:62vw;
}

#empresas-tice{
    position: absolute;
    width: 22%;
    left: 10%;
    top: -2%;
}

#empresas-terraguar{
    position: absolute;
    width: 15%;
    left: 42%; 
    top: 23%;
}

#empresas-learning{
    position: absolute;
    width: 22%;
    left: 73%; 
    top: 14%;
}

/* Aplicação */
#container-app{
    position: relative;
    width: 100vw;
    height: 60vw;
}

#titulo-app{
    position:absolute;
    width: 100vw;
    text-align: center;
    margin-top: 9vw;
    margin-bottom: 5vw;
}

#mancha-app{
    position:absolute;
    width:50%;
    height: 70%;
    top:20%;
    left:-1%;
}

#texto-app{
    position: absolute;
    width:30%;
    height:50%;
    font-size:1.3vw;
    top:42%;
    left:3%; 
    color:var(--black);
}

#texto-app-2{
    position: absolute;
    width:30%;
    height:50%;
    font-size:1.3vw;
    top:62%;
    left:3%;
    font-size:1.5vw;
    color: var(--black);
}

#link-app{
    text-decoration:none;
    color: var(--black);
}

#link-app:hover{
    color:var(--white);
}

#imagem-app{
    position:absolute;
    width:40%;
    height:auto;
    left:30%;
    top: 23%;
    border-radius:10px;
    padding: 0px;
    box-shadow: 5px 10px var(--yellow);
}

/* Footer */
#footer{
    padding-top: 25vw;
    display: flex;
    flex-direction: column;
    height: 37vw;
    background-image: url('img/footer/fundo-footer.png');
    background-size: cover;
    margin-top: 7vw;
}

#icones-footer{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30vw;
}

.logo-img-footer-long{
    height: 3vw;
}

#icones-footer-2{
    flex:1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 25vw;
}

#social-media-footer-1{
    display: flex;
    justify-content: space-between;
}

.logo-img-footer{
    height: 3vw;
    margin: 0 0.3vw;
}

#social-media-footer-2{
    display: flex;
    justify-content: space-between;
}

/* Hamburger */
#hamburger-container{
    display: none;
    flex-direction: column;
    justify-content: center;
}

#menu-hamburger-bg{
    display: none;
    position: absolute;
    background: #000;
    opacity: 0.8;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ham-item{
    font-size: 7vw;
    list-style: none;
    text-decoration: none;
    margin: 1vw;
}

#ham-nav-items a{
    text-decoration: none;
    color: #fff;
    cursor: hand; 
}

#ham-nav-items a:hover{
    text-decoration: none;
    color: var(--yellow);
    cursor: hand; 
}

#ham-nav-items{
    margin-top: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.ham-line-1{
    width: 5vw;
    transition: width 1s ease-in-out;
}

.ham-line-2{
    width: 7vw;
    transition: width 1s ease-in-out
}

#mobile-fundo-landing{
    display: none;
}


/* Media Queries */

@media screen and (max-width: 1000px){
    #nav-items{
      font-size: 0.6rem;
    }

    #container-landing{
      height: 100vh;
    }
}

@media screen and (max-width: 780px){
  #nav-items{
    display: none;
  }
}

@media screen and (min-width: 1900px){
    .nav-items-scrolled{
        transition: margin-right 700ms linear;
        margin-right: 29vw !important;
    }
}

@media screen and (max-width: 600px){
    #hamburger-container{
        display: flex;
    }

    #fundo-landing{
        display: none;
    }

    #container-landing{
        background-color: var(--yellow);
    }

    #mobile-fundo-landing{
        display: block;
        position: absolute;
        height: 35%;
        top: 32.5%;
        left: 13%;
    }
}