.header-div{
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../imgs/header.jpg');
    height: 30vh;
    
}

/* header div para video */
.header-div-lg{
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../imgs/header.jpg');
    height: 60vh;
    
}
/*social*/
.header-div-social{
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../imgs/header.jpg');
    height: 50vh;
    
}

.header-div img{
    object-fit: cover;
    width: 100%;
    height: 30vh;
}

.menu-bkg{
 background: url('../imgs/header2.png');
}


.card{
    transition: .3s ease-in-out;
    filter: grayscale(0);

}

.card:hover{
    filter: grayscale(100%);

}
.img-portfolio{
width: 100%;
height: 40dvh;
object-fit: cover;
border-radius: 5px;
object-position: 10% 10%;
}

.social{
    transition: transform .5s ease-in-out;
}

.social:hover{

    transform: scale(.99) translateY(-10px);
}

.social i{
    font-size: 3rem;
    margin-left: .5rem;
}

.social .col{
    padding: 2.5rem;
    transition: all .5s ease-in-out;
}

.social .col:hover{
    transform: translateY(-10px);
    opacity: .9;
}



.hidden{
transition: all .3s ease-in-out ;
opacity: 0;
filter: invert(0);
}

.hidden:hover{
opacity: .3;

}

.hidden-vid{
transition: all .3s ease-in-out ;
opacity: 0;
filter: invert(0);
}

.hidden-vid:hover{
opacity: 1;

}
@media (min-width: 576px){
    .social i{
    font-size: 4rem;
}
    .social i{
    margin-left: 3rem;
}
}

@media (min-width: 767px){
    .social i{
    font-size: 6rem;
}
    .social i{
    margin-left: 5rem;
}
}
@media (min-width: 992px){
    .header-div img{
    object-position: 60% ;
}
.social i{
    font-size: 7rem;
}
    .social i{
    margin-left: 1rem;
}
}

@media (min-width: 1200px){
    .header-div img{
    object-position: 60% 45% ;
}
}