* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #171717;
    --background-color: #f5f5f5;
}

@media (max-width:992px){
    :root{
        font-size: 15px;
    }
}

@media (max-width:576px){
    :root{
        font-size: 14px;
    }
}

body {
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--background-color);
}

.container-fluid {
    padding: 0 1.5rem;
}

a {
    color: inherit;
    text-decoration: none;
}


/* HEADER */

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 4.5rem;
    padding: 0 1.5rem;

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

    font-size: 1.4rem;
    text-transform: uppercase;

    z-index: 100;
}

@media (max-width: 576px) {
    header {
        font-size: 1.2rem;
    }
}


header a:hover {
    opacity: 50%;;
}

header img{
    margin-top: 0.75rem;
}


header nav ul {
    display: flex;
    list-style: none;
}

header nav ul li {
    margin-left: 1.5rem;
}



/* MAIN */
main {
    margin-top: 4.5rem;
    min-height: calc(100vh - 4.5rem);
    min-height: calc((var(--vh, 1vh) * 100) - 4.5rem);
}

/* HOME */

.home main{
    padding: 0 1.5rem 1.5rem;
    height: calc(100vh - 4.5rem);
}

.home .home-image {
    height: calc(100vh - 4.5rem);
    height: calc((var(--vh, 1vh) * 100) - 6rem);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/* WORK */
.work main {
    padding-top: 1.5rem;
}

.work .card {
    margin-bottom: 3rem;
}

.work .card-title {
    font-size: 1.2rem;
    margin-bottom: .2rem;
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .work .card:hover .card-title {
        font-size: 1.2rem;
        margin-bottom: .2rem;
        text-transform: uppercase;
        opacity: 50%;
    }
}
.work .card-subtitle {
    font-size: 0.9rem;
}

@media (min-width: 992px) {
    .work .card:hover .card-subtitle {
        font-size: 0.9rem;
        opacity: 50%;
    }
}

/* WORK CARD IMAGES */
.work .card-image-monstra {
    background-image: url(../img/monstra13-saojorge.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFD2DF;
}

.work .card-image-cartadeamor {
    background-image: url(../img/issonaoeumacartadeamor_2.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFD2DF;
}

.work .card-image-geracaom {
    background-image: url(../img/geraçãoM_1.png);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-final-degree-exhibition {
    background-image: url(../img/cartaz-1.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-pops {
    background-image: url(../img/pops-box-plus-banner.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-anamnese {
    background-image: url(../img/anamnese-livro-capa.png);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-zenit {
    background-image: url(../img/zenit-logo.png);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-receitas-afetivas {
    background-image: url(../img/receitas-afetivas-capa-e-contracapa.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-cinemateca-image {
    background-image: url(../img/cinemateca-01.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-ways-of-seeing{
    background-image: url(../img/ways-of-seeing-capa.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
} 

.work .card-image-grey-fuse {
    background-image: url(../img/gray-fuse-capa.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-oliveira {
    background-image: url(../img/oliveira-01.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card-image-bodoni {
    background-image: url(../img/bodoni-01.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
}

.work .card:hover .card-image-monstra{
    background-image: url(../img/monstra5-capa.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.work .card:hover .card-image-cartadeamor{
    background-image: url(../img/issonaoeumacartadeamor_3.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-geracaom{
    background-image: url(../img/geraçãoM_2.png);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
        
.work .card:hover .card-image-final-degree-exhibition {
    background-image: url(../img/convite-verde.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-pops {
    background-image: url(../img/pops-books-2.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-anamnese {
    background-image: url(../img/anamnese-livro-aberto-3.png);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-zenit {
    background-image: url(../img/zenit-cartoes-de-visita.png);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-receitas-afetivas {
    background-image: url(../img/receitas-afetivas-tia-rosalba.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-cinemateca-image{
    background-image: url(../img/cinemateca-capa.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-ways-of-seeing{
    background-image: url(../img/ways-of-seeing-01.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} 
    
.work .card:hover .card-image-grey-fuse{
    background-image: url(../img/gray-fuse-01.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-oliveira{
    background-image: url(../img/oliveira-capa.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    
.work .card:hover .card-image-bodoni{
    background-image: url(../img/bodoni-capa.jpg);
    padding-bottom: 60%;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}




/* ABOUT */

.about main{
    height: calc(100vh - 4.5rem);
    height: calc((var(--vh, 1vh) * 100) - 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about section {
    padding: 1.5rem 0;
}

.about .about-text {
    font-size: 1.75rem;
}

.about .contacts {
    font-size: 1§rem;
}

.about .contacts ul{
    list-style: none;
}

.about .contacts ul li :hover{
    opacity: 50%;
}

@media (max-width: 992px){
    .about .about-text{
        font-size: 1.5rem;
    }
}

@media (max-width: 576px){
    .about .about-text{
        font-size: rem;
    }
    .about .contacts{
        font-size: 1rem;
    }
}

/* PROJECT */
.project .project-image {
    position: sticky;
    top: 5rem;
    height: calc(100vh - 10rem);
    height: calc((var(--vh, 1vh) * 100) - 4.5rem);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    background-color: black;
}

.project .project-content {
    padding-top: 1.5rem;
    background-color: var(--background-color);
    
}

.project .project-content section {
    padding: 1.5rem 0;
}

.project .project-title{
    font-size: 1.2rem;
    text-transform: uppercase;
}

.project .project-subtitle{
    font-size: 0.9rem;
    margin-top: .5rem;
}


.project .project-description ul li{
    list-style: none;
}

.project .project-gallery img+img {
    margin-top: 1.5rem;
}

@media (max-width: 576px){
    .project-subtitle{
        margin-bottom: 1.5rem;
        margin-top: 0;
    }
}

@media (max-width: 992px) {
    .project .project-gallery img {
        width: 100%;
        height: auto;
        display: block;
        background-color: #FFD2DF;
    }   
}

@media (min-width: 992px) {
    .project .project-gallery img {
        padding-left: 15rem;
        padding-right: 15rem;
        width: 100%;
        height: auto;
        display: block;
      
    }   
}



.icon:hover{
    fill: #3228F9;
}