/* Example CSS file */ 



#intro{
    position: relative;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    left: 0;
    z-index: 5;
    display: block;
    background-color: whitesmoke;
    top: 0;
}

#whiteC{
    width: 10px;
    height: 10px;
    position: absolute;
    display: none;
    top: 50%;
    z-index: 4;
    left: 50%;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.bgimg{
    position: absolute;
    top: 50%;
    left: 50%;
    filter: brightness(1.03);
    mix-blend-mode: multiply;
    /*transform: translate(-50%,-50%);*/
    width: 120vw;
    height: auto;
}

.lessOp{
    opacity: .7;
}

#gall{
    position: relative;
    margin: 0vw;
    display: block;
    text-align: center;
}
/*
.proGal{
    display: inline-block;
    width: 39vw;
    height: 49vw;
    vertical-align: center;
    position: relative;


}

.proGal img{
    vertical-align: center;
    position: absolute;
    top: 50%;
    padding: .5vw;

    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 30vw;
    height: auto;
    transition: .2s;
}
*/

.titleProj{
    font-family: cabinet;
}

.grid{
    text-align: center;
    margin: 0 auto;
    padding: 5vh 16vw;

}

.grid-item { width: 29.5vw;
    margin: 3vw 2vw 0 2vw;
    height: auto;
 }

 .grid-item--width2 { width: 63vw;
    margin: 3vw 2vw 0 2vw;
    text-align: center;
    height: auto;
 }

.galim{width: 100%;
        height: auto;}

.infoGal{   
    padding: 0;
    position: fixed;
    bottom: -5vh;
    padding: .5vw 1vw;
    left: 0;
    text-align: left;
    display: block;
    transition: .2s;
    width: 98vw;
    font-size: 1vw;
    background-color: rgb(255, 170, 170);
    
}
.infoGal p{
    display: contents;
    margin: 0;
}

.cabinet{
    font-family: cabinet;
}

.bakim{
    display: none;
    top: 50%;
    width: 120vw;
    height: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
}

#hoverPro{

    position: fixed;
    top: 50%;
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
    left: 50%;
    background-color: white;
    width: 140vw;
    transform: translate(-50%,-50%);
    display: block;
}

.infimageMob{
    display: none;
}


@media all and (orientation: portrait){ 

    #intro{
        z-index: unset;
    }
   
    .bgimg{
        position: absolute;
        top: 50%;
        left: 50%;
    
        mix-blend-mode: multiply;
        /*transform: translate(-50%,-50%);*/
        width: auto;
        height: 120vh;
    }

    .grid{
        text-align: center;
        margin: 0 auto;
        padding: 5vh 5vw;
    
    }
    
    .grid-item { width: 90vw;
        margin: 3vw 0vw 0 0vw;
        height: auto;
     }

     .grid-item--width2 { width: 90vw;
        margin: 3vw 0vw 0 0vw;
        text-align: center;
        height: auto;
     }
    
    .galim{width: 100%;
            height: auto;}

    .infimageMob{
        display: block;
        font-family: cabinet;
        margin-bottom: 5vh;
        margin-top: 10px;
        font-size: 2vh;
        text-align: left;
        
    }

    .infimageMob p{
        display: contents;
        font-family: autopia;
    }

    #hoverPro{
        opacity: 0 !important;
    }



}