@-ms-viewport{
    width:  device-width;
}

*{
    padding: 0px;
    margin: 0px;
    transition: 0.5s;
    font-family: 'Dosis', sans-serif;
}

html{
    scroll-behavior: smooth;
}

body{
    background: #010101;
}

/* Navigation Bar */

.navbar{
    position: absolute;
    margin-left: 18%;
    text-align: center;
    overflow: hidden;
    justify-content: space-between;
    max-height: initial;
}

.navbar ul{
    list-style:none;
    display: inline-flex;
}

.navbar li{
    font-size: 2vw;
    margin: 3vh 4.8vw;
}

.nav-Link{
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
}

.activeLink{
    border-bottom: 0.3vh solid white;
}

.nav-Link:hover{
    color:grey;
}

.activeLink:hover{
    border-bottom: 0.5vh solid grey;
}

/* Image Cover */

.ImgCover{
    text-align:center;
    max-height: initial;
    min-height: initial;
}

.ImgLabel{
    color: #ffffff;
    text-align:center;
    margin-top: 1vh;
    margin-bottom: 1vh;
    text-transform: uppercase;
    position:relative;
    font-size:3.5vh;
}

.imageBackground{
    height: 80vh;
    width:auto;
}

/* SocialMedia list */

.socialmedia{
    position:relative;
    text-align: center;
}

.socialmedia ul{
    list-style: none;
    display: inline-flex;
}

.socialmedia li{
    font-size:3.7vh;
    margin: 0 1.5vw;
}

.socialmedia i{
    color: #ffffff;
}

/*  hover over icons  */

.fa-whatsapp:hover{
    color:#25d366;
}

.fa-facebook-square:hover{
    color:#3b5998;
}

.fa-instagram:hover{
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
}

.fa-linkedin:hover{
    color:#0e76a8;
}

.fa-envelope:hover{
    color:red;
}

/*  Biography  */

.ImgCoverBiography{
    max-height: initial;
    min-height: initial;
}

.imageBackgroundBiography{
    height:85vh;
    width:auto;
}

.BiographyContent{
    margin-left: 14vw;
    overflow: hidden;
    justify-content: space-between;
    list-style: none;
    display: inline-flex;
}

.biography{
    font-size: 1.4vw;
    position:static;    
    color: #ffffff;
    text-align: justify;
    margin-top: 28vh;
    margin-right: 10vw;
    max-width: initial;
    max-height: initial;
}

.socialmediaBiography{
    position:relative;
    text-align: center;
    margin-top: 5vh;
}

.socialmediaBiography ul{
    list-style: none;
    display: inline-flex;
}

.socialmediaBiography li{
    font-size:3.7vh;
    margin: 0 1.5vw;
}

.socialmediaBiography i{
    color: #ffffff;
}


/*  Photography Gallery Portfolio  */

.navbarPortfolio{
    position: relative;
    margin-left: 10.3%;
    text-align: center;
    overflow: hidden;
    justify-content: space-between;
    max-height: initial;
}

.navbarPortfolio ul{
    list-style:none;
    display: inline-flex;
}

.navbarPortfolio li{
    font-size: 2vw;
    margin: 3vh 4.8vw;
}

.main{
    position: relative;
    height: 100%;
    width: 100%;
}
.main .gallery{
    position: relative;
    height: auto;
    width: 90%;
    margin: auto;
    padding: 1vh 0;
    display: grid; 
    grid-auto-flow: dense;
    grid-template-columns: auto auto auto auto;
    grid-gap: 1vh; 
 
}

.main .gallery .img{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}


.main .gallery .img:fisrt-child {

    grid-column-start: span 2;
    grid-row-start: span 3;
}

.main .gallery .img:nth-child(2n+3) {
    grid-row-start: span 2;
}

.main .gallery .img:nth-child(4n+5) {
    grid-row-start: span 2;
    grid-column-start: span 3;
}

.main .gallery .img:nth-child(6n+7) {
    grid-column-start: span 1;
}

.main .gallery .img:nth-child(8n+9) {
    grid-row-start: span 3;
    grid-column-start: span 2;
}


.main .gallery .img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: center;
    filter: brightness(0.5) grayscale(100); /*Gris*/
    transition: 0.2s ease-in-out;           /*Gris*/

}

.main .gallery .img:hover img{
   
    filter: brightness(1) grayscale(0); /*Gris*/

}

@media only screen 
and (max-width: 768px) 
{
    .main .gallery{
        display: grid;
        grid-template-columns: auto auto auto ;
    }
}

@media only screen 
and (max-width: 425px){
    .main .gallery{
        display: block;
      
    }

    .main .gallery .img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 5% 0;

    }

    .main .gallery .img img{
        display: block;
        filter: brightness(1) grayscale(0);

    }
}