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

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

.project {
    height: 40vh;
    width: 40vh;
    transition: 0.3s;
}

.project:hover {
    animation: appearHere 0.3s both;
    background: #0f0f0f;
    cursor: pointer;
}

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

/*MARIANO*/
.mariano {
    background: url(assets/mariano.jpg) no-repeat 40% 20%;
    background-size: cover;
    left: 0%
}

.mariano::after {
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 8px;
    font-weight: bold;
    position: relative;
    color: #000;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.mariano:hover::after{
    content: "Louis G - A Mariano";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


.foreva {
    background: url(assets/foreva.jpg) no-repeat 40% 20%;
    background-size: cover;
    left: 0%
}

.foreva::after {
    content: "FOREVER TOGETHER";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 8px;
    font-weight: bold;
    position: relative;
    color: #000;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.foreva:hover::after{
    content: "Bang Avenue - Forever Together";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


.omoca {
    background: url(assets/omoca.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.omoca::after {
    font-size: 8px;
    font-weight: bold;
    position: relative;
    color: #0f0f0f;
    display: block;
    top: 8%;
    left: 0%;
    right: 0%;
    bottom: 0;
}

.omoca:hover::after{
    content: "O Marta - Ó Moça, É Folclore";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
    transition: 0.3s;

}



.fadoportuguesa {
    background: url(assets/fadoportuguesa.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.fadoportuguesa::after {
    font-size: 8px;
    font-weight: bold;
    position: relative;
    color: #0f0f0f;
    display: block;
    top: 8%;
    left: 0%;
    right: 0%;
    bottom: 0;
}

.fadoportuguesa:hover::after{
    content: "O Marta - Fado à Portuguesa";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
    transition: 0.3s;

}




.mulherbeira {
    background: url(assets/mulherbeira.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.mulherbeira::after {
    font-size: 8px;
    font-weight: bold;
    position: relative;
    color: #0f0f0f;
    display: block;
    top: 8%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.mulherbeira:hover::after{
    content: "O Marta - Mulher Beirã";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}

.losetofear {
    background: url(assets/losetofear.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.losetofear::after {
    content: "Lose To Fear";
    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: 8%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.losetofear:hover::after{
    content: "Bang Avenue - Lose To Fear";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


.ocorpo {
    background: url(assets/ocorpo.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.ocorpo::after {
    position: relative;
    color: #fff;
    display: block;
    top: 8%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.ocorpo:hover::after{
    content: "O Marta - Quando o corpo não te convém";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


.agcd {
    background: url(assets/agcd.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.agcd::after {
    content: "A. G. C. D.";
    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: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 0%;
    bottom: 0;
}
.agcd:hover::after{
    content: "Bang Avenue - A Girl Called Depression";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}



.gretua2021 {
    background: url(assets/gretua2021.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.gretua2021::after {
    content: "GrETUA - Editorial";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.gretua2021:hover::after{
    content: "GrETUA | Editorial 2021";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: white;
    text-align: center;
    top: 45%;
}


.bg-up {
    background: url(https://i.ibb.co/kBG53Q2/imagem.png) no-repeat 50% 50%;
    background-size: cover;
}
.bg-up:hover::after{
    content: "Bang Avenue - Up";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}



.bg-album {
    background: url(https://bangavenue.github.io/images/BG_Long_2.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.bg-album::after {
    content: "ALBUM";
    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: 5%;
    bottom: 0;
}

.bg-album:hover::after{
    content: "Bang Avenue - ALBUM";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    text-align: center;
    top: 45%;
}


.sotp {
    background: url(https://i1.sndcdn.com/artworks-yeRU4ZR8A4nZrsaz-DvCNAw-t500x500.jpg) no-repeat 50% 50%;
    background-size: cover;
}
.sotp::after {
    position: relative;
    color: #fff;
    display: block;
    top: 10%;
    left: 0%;
    right: 5%;
    bottom: 0;
}
.sotp:hover::after{
    content: "Bang Avenue - Sum Of These Parts";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}





.notanalbum {
    background: url(https://i.ibb.co/0CvyS4p/imagem.png) no-repeat 50% 50%;
    background-size: cover;
}
.notanalbum:hover::after{
    content: "Bang Avenue - Not An Album";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


.roam {
    background: url(https://i1.sndcdn.com/artworks-hOjblSydys5ofq4f-DJqXZA-t500x500.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.roam::after {
    content: "ROAM";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.roam:hover::after{
    content: "ROAM";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}




.lavaavalaalva {
    background: url(https://i.ibb.co/8zFBfNQ/SCR-20231031-v6t.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.lavaavalaalva::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.lavaavalaalva:hover::after{
    content: "Lava a Vala Alva";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}




.passinggaps {
    background: url(assets/passinggaps.png) no-repeat 50% 50%;
    background-size: cover;
}

.passinggaps::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.passinggaps:hover::after{
    content: "PASSING GAPS - A Sonic Installation";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* Fado de Coimbra */

.fadodecoimbra {
    background: url(assets/fadodecoimbra.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.fadodecoimbra::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.fadodecoimbra:hover::after{
    content: "Fábio Borges - Fado de Coimbra";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* Irmos */

.irmos {
    background: url(https://i1.sndcdn.com/artworks-QRcVPTI2ZYrqraHN-r8XupA-t500x500.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.irmos::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.irmos:hover::after{
    content: "Irmos Sobre As Colinas";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}

/* Heras 2024 */

.heras2024 {
    background: url(assets/heras2024.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.heras2024::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.heras2024:hover::after{
    content: "HERAS - GrETUA / UA";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}

/* Heras 2024 */

.minha {
    background: url(assets/minha.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.minha::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.minha:hover::after{
    content: "MINHA";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* in memoriam sonorum */

.inmemoriam {
    background: url(https://www.esmae.ipp.pt/noticias/in-memoriam-sonorum-2013-na-memoria-dos-sons/image) no-repeat 50% 50%;
    background-size: cover;
}

.inmemoriam::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.inmemoriam:hover::after{
    content: "IN MEMORIAM SONORUM";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* Fado Borges - Samaritana */

.fb-samaritana {
    background: url(assets/fb-samaritana.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.fb-samaritana::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.fb-samaritana:hover::after{
    content: "Fábio Borges - Samaritana";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}



/* Gustavo Costa - Natura Mimesis */

.naturamimesis {
    background: url(assets/naturamimesis.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.naturamimesis::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.naturamimesis:hover::after{
    content: "Gustavo Costa - Natura Mimesis";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* SÓS (2024) */

.sos2024 {
    background: url(assets/sos2024.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.sos2024::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.sos2024:hover::after{
    content: "SÓS (2024)";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}



/* Fuga Sana - Ergástulo */

.ergastulo {
    background: url(assets/ergastulo.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.ergastulo::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.ergastulo:hover::after{
    content: "Fuga Sana - Ergástulo";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* Fábio Borges - Fado das Andorinhas */

.fb-andorinhas {
    background: url(assets/fb-andorinhas.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.fb-andorinhas::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.fb-andorinhas:hover::after{
    content: "Fábio Borges - Fado das Andorinhas";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* cha */

.chadecigarra {
    background: url(assets/erika.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.chadecigarra::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.chadecigarra:hover::after{
    content: "Chá de Cigarra";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* 1001 */

.milformas {
    background: url(assets/1001formas.jpeg) no-repeat 50% 50%;
    background-size: cover;
}

.milformas::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.milformas:hover::after{
    content: "1001 Formas de Acordar";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* caught */

.caughtinthenet {
    background: url(assets/poster-caught-in-the-net.png) no-repeat 50% 50%;
    background-size: cover;
}

.caughtinthenet::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.caughtinthenet:hover::after{
    content: "Caught in the Net (2024)";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* liquen */

.liquen-i {
    background: url(https://glam-magazine.pt/wp-content/uploads/2024/10/24liquen-820x500.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.liquen-i::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.liquen-i:hover::after{
    content: "Líquen - I";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* DRIII */

.DRIII {
    background: url(assets/DRIII.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.DRIII::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.DRIII:hover::after{
    content: "Diário de Uma República III";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}


/* laurindinha */

.laurindinha {
    background: url(https://www.dgartes.gov.pt/sites/default/files/01_laurindinha.png) no-repeat 50% 50%;
    background-size: cover;
}

.laurindinha::after {
    content: "";
    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: 5%;
    right: 5%;
    bottom: 0;
}
.laurindinha:hover::after{
    content: "Laurindinha, libertei a minha voz";
    font-family: 'Kantumruy Pro', sans-serif;
    font-style: italic;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    top: 45%;
}