/*--------------- projects section --------------- */
h6 {
    text-align: center;
}

.vertical {
    margin-top: 40px;
    border-left: 1px solid #fff;
    height: 80px;
    position: absolute;
    left: 50%;
}

.project {
    height: 35vh;
    width: 40vh;
    transition: 0.3s;
    animation: goback 0.3s both;
}


.project:hover {
    cursor: pointer;
    transition: 0.35s;
    background-size: 45vh;
}

.project:hover::after {
   /* background-color: #0f0f0f; */
}


@keyframes appearHere{
    0%{

    }
    100%{
        height: 39vh; 
    }
}

@keyframes goback{
    0%{

        height: 39vh;
    }
    100%{

    }
}




.heras {
    background: url(assets/heras.jpeg) no-repeat 40% 20%;
    background-size: cover;
}
.heras::after {
    content: "HERAS";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 2%;
    right: 0%;
    bottom: 0;

}
.heras:hover{
    background: url(assets/heras.gif) no-repeat center;
    animation: appearHere 0.3s both;
    background-size: 42vh;
}
.heras:hover::after{
    content: "HERAS | GrETUA";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 85%;
}


.gretua2022 {
    background: url(assets/gretua2022.jpg) no-repeat 50% 50%;
    background-size: cover;
}
.gretua2022::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    color: #0f0f0f;
    display: block;
    top: 8%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.gretua2022:hover{
    background: url(assets/gretua2022.gif) no-repeat center;
    animation: appearHere 0.3s both;
    background-size: 42vh;
}
.gretua2022:hover::after{
    content: "GrETUA | Editorial 2022";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: #fff;
    text-align: center;
    top: 85%;
}


.porta253 {
    background: url(assets/porta253.jpeg) no-repeat 40% 20%;
    background-size: cover;
}
.porta253::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 2%;
    right: 0%;
    bottom: 0;
}
.porta253:hover{
    background: url(assets/porta253.gif) no-repeat center;
    animation: appearHere 0.3s both;

}
.porta253:hover::after{
    content: "PORTA 253";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 85%;
}


.aetproj {
    background: url(assets/aetproj.jpg) no-repeat 40% 20%;
    background-size: cover;
}
.aetproj::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 2%;
    right: 0%;
    bottom: 0;
}
.aetproj:hover{
    background: url(assets/aetproj.gif) no-repeat center;
    animation: appearHere 0.3s both;
    background-size: 42vh;
}
.aetproj:hover::after{
    content: "AET - Projeto Educativo";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 85%;
}


.ouvidoria2022 {
    background: url(https://i.ibb.co/qCQ07cf/ouvidoria1.jpg) no-repeat 50% 50%;
    background-size: cover;
}
.ouvidoria2022::after {
    content: "";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 10px;
    font-weight: bold;
    position: relative;
    color: #0f0f0f;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.ouvidoria2022:hover{
   /* background: url(https://i.ibb.co/JsVTddN/ouvidoria.gif) no-repeat center;
    background-size: 45vh; */
    animation: appearHere 0.3s both;
    background: #0f0f0f;
    
}
.ouvidoria2022:hover::after{
    content: "Ouvidoria na Noite Branca";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: #fff;
    text-align: center;
    top: 40%;
}


/* Forever Together */
.ftvideo {
    background: url(assets/ftvideo.jpg) no-repeat 40% 20%;
    background-size: cover;
}
.ftvideo::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 2%;
    right: 0%;
    bottom: 0;
}
.ftvideo:hover{
    background: url(assets/ftvideo.gif) no-repeat center;
    animation: appearHere 0.3s both;
    background-size: 42vh;
}
.ftvideo:hover::after{
    content: "BANG AVENUE - FOREVER TOGETHER";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 15px;
    color: white;
    text-align: center;
    top: 85%;
}



.ltfvideo {
    background: url(assets/ltfvideo.jpg) no-repeat 40% 20%;
    background-size: cover;
}
.ltfvideo::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 2%;
    right: 0%;
    bottom: 0;
}
.ltfvideo:hover{
    background: url(assets/ltfvideo.gif) no-repeat center;
    animation: appearHere 0.3s both;
    background-size: 42vh;
}
.ltfvideo:hover::after{
    content: "BANG AVENUE - FOREVER TOGETHER";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 15px;
    color: white;
    text-align: center;
    top: 85%;
}




/* agirl */
.agirl {
    background: url(assets/agirl.jpg) no-repeat 50% 10%;
    background-size: cover;

}
.agirl::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 10px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    height: 250px;
}
.agirl:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/agirl.jpg);
    background-size: 42vh;
}
.agirl:hover::after{
    content:"BANG AVENUE - A Girl Called Depression";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 15px;
    color: #fff;
    text-align: center;
    top: 88%;
}



/* deti4devs */
.deti4devs {
    background: url(assets/deti4devs.jpeg) no-repeat 50% 10%;
    background-size: cover;
    height: 250px;

}
.deti4devs::after {
    content:"DETI4devs";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    height: 250px;
}
.deti4devs:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/deti4devs.jpeg);
    background-size: 42vh;
}
.deti4devs:hover::after{
    content:"DETI4devs";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: #0f0f0f;
    text-align: center;
    top: 88%;
}

/* Web - more than you */
.morethanyou {
    background: url(assets/morethanyou.jpg) no-repeat 50% 10%;
    background-size: cover;

}
.morethanyou::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #0f0f0f;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.morethanyou:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/morethanyou.jpg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.morethanyou:hover::after{
    content:"Web // More Than You";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* Recital Composição - Marco 2023 */
.recital-marco2023 {
    background: url(https://i.ibb.co/Jj01pmg/SCR-20230315-mqw.jpg) no-repeat 50% 10%;
    background-size: cover;

}
.recital-marco2023::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.recital-marco2023:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(https://i.ibb.co/Jj01pmg/SCR-20230315-mqw.jpg);
    animation: appearHere 0.3s both;
    background-size: cover;
}
.recital-marco2023:hover::after{
    content: "Recital de Composição - Março 2023";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


/* Fra Ensemble */
.fraensemble-teaser {
    background: url(assets/fraensemble-teaser.jpeg) no-repeat 50% 10%;
    background-size: cover;

}
.fraensemble-teaser::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.fraensemble-teaser:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/fraensemble-teaser.jpeg);
    animation: appearHere 0.3s both;
    background-size: cover;
}
.fraensemble-teaser:hover::after{
    content: "Fra Ensemble";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}

/* posfacio */
.posfacio {
    background: url(assets/posfacio.jpeg) no-repeat 50% 10%;
    background-size: cover;

}
.posfacio::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.posfacio:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/posfacio.jpeg);
    animation: appearHere 0.3s both;
    background-size: cover;
}
.posfacio:hover::after{
    content: "Posfácio";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}



/* Rapaz */
.rapaz {
    background: url(assets/rapaz/2.jpg) no-repeat 50% 10%;
    background-size: cover;
    

}
.rapaz::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.rapaz:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/rapaz/2.jpg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.rapaz:hover::after{
    content: "O Marta - Rapaz";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


/* Fábio Borges - Toada Beirã */
.toadabeira {
    background: url(assets/toadabeira/2.jpeg) no-repeat 50% 10%;
    background-size: cover;
    

}
.toadabeira::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.toadabeira:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/toadabeira/4.jpeg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.toadabeira:hover::after{
    content: "Fábio Borges - Toada Beirã";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


/* HERAS (2024) */
.heras2024 {
    background: url(assets/heras2024.jpeg) no-repeat 50% 10%;
    background-size: cover;
    

}
.heras2024::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.heras2024:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/heras2024.jpeg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.heras2024:hover::after{
    content: "HERAS";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}

/* POVO */
.povo {
    background: url(assets/povo/3.jpg) no-repeat 50% 10%;
    background-size: cover;
    

}
.povo::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.povo:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/povo/5.jpg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.povo:hover::after{
    content: "POVO";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


/* Estágio de Dança 2023 */
.estagiodedanca2023 {
    background: url(assets/estagiodedanca.png) no-repeat 50% 10%;
    background-size: cover;
    

}
.estagiodedanca2023::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.estagiodedanca2023:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/estagiodedanca.png);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.estagiodedanca2023:hover::after{
    content: "Estágio de Dança 2023";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


/* O BOBO */
.obobo {
    background: url(assets/obobo/2.jpg) no-repeat 50% 10%;
    background-size: cover;
    

}
.obobo::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.obobo:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/obobo/5.jpg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.obobo:hover::after{
    content: "O BOBO";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}



/* Frágua de Amor */
.fraguadeamor {
    background: url(assets/fraguadeamor.jpeg) no-repeat 50% 10%;
    background-size: cover;
    

}
.fraguadeamor::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.fraguadeamor:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/fraguadeamor.jpeg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.fraguadeamor:hover::after{
    content: "Frágua de Amor";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


/* AMP Promo 2025 */
.amppromo {
    background: url(assets/amppromo.jpg) no-repeat 50% 10%;
    background-size: cover;
    

}
.amppromo::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.amppromo:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/amppromo.jpg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.amppromo:hover::after{
    content: "AMP - Vídeo Promocional 2025";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}




/* ADMPA */
.ADMPA {
    background: url(assets/ADMPA.jpeg) no-repeat 50% 10%;
    background-size: cover;
    

}
.ADMPA::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.ADMPA:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/ADMPA.jpeg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.ADMPA:hover::after{
    content: "Antes de mais, Parabéns Atrasados";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


/* fourward-freedom */
.fourward-freedom {
    background: url(assets/fourward-freedom.jpeg) no-repeat 50% 10%;
    background-size: cover;
    

}
.fourward-freedom::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
    
}
.fourward-freedom:hover{
    background-image:linear-gradient(0deg, #101010 0%, rgba(0,212,255,0) 100%), url(assets/fourward-freedom.jpeg);
    animation: appearHere 0.3s both;
    background-size: cover;
    
}
.fourward-freedom:hover::after{
    content: "Fourward - FREEDOM";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}