@import url(main-image.css);

#image{
    background-image: url(../img/galeria/main-image.jpg);
    background-position-y: -150px;
}

.row-a{
    margin: unset;
}

#gallery-container{
    margin-top: -5vh;
}

.a-container{
    margin-left: 1.5%;
    position: relative;
}

.gallery-a{
    display:contents;
    cursor: pointer;
}

.gallery-image{
    width: 31vw;
    /* height: 90%; */
    height: 400px;
    border-radius: .5vw;
}

.small-details{
    display: flex;
    position: absolute;
    border-radius: .5vw .5vw 0px 0px;
    opacity: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 12%;
    align-items: center;
    color: white;
    font-size: calc(5px + 1vw);
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.75) 25%, rgba(0,0,0,0.65) 54%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.45) 90%, rgba(0,0,0,0.15) 100%);
    padding-left: 5px;
    transition: 1s;
}

.gallery-a:hover > .small-details{
    opacity: 1;
}


.details-icon{
    width: 20px;
    height: 20px;
    margin-right: 8px;
    filter: invert();
}


/* Modal */

.details-modal{
    z-index: 100000;
    background-color: rgba(0, 0, 0, 0.753);
    transition: .5s ;
}

.dark{
    background-color: rgba(0, 0, 0, 0.897);
}

.modal_fadeOut{
    background-color: transparent;
    background-image: none!important;
    color: transparent;
    border: none!important;
}

.modal-header{
    border-bottom: .4vh solid green;
}

.modal-title{
    font-size: calc(1.5vw);
}

.modal-dialog{
    max-width: none;
    width: 70vw;
    margin-left: 15vw;
}

.modal-body{
    background-image: url(../img/galeria/modal-back.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.modal-content{
    width:100%;
}

.modal-img-details{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-image{
    width: 40vw;
    margin: 10px;
    transition: .7s;
    cursor: pointer;
    border: 4px solid rgba(255, 255, 255, 0.555);
}

.zoom{
    position: absolute;
    display: none;
    z-index: 100;
    font-size: calc(1.3vw);
    color: white;
    cursor: pointer;
}

.scale {
    transform: scale(1.5);
    float: left;
}

.use-icon{
    width: 10%;
}

.use-detail{
    font-size: calc(2vw);
    color: green;
}

.col2-details > small{
    margin-top: 10px;
    font-size: calc(1.2vw);
    color: black;
}

.image-revest{
    width: 20vw;
    margin-top: 15px;
    border-radius: 5px;
    transition: .5s;
    border: 3px solid rgba(255, 255, 255, 0.555);
}

.image-revest:hover{
    filter:brightness(.8)
}


.modal-footer{
    border-top: .4vh solid green;
}

@media(max-width: 1100px){
    .gallery-image{
        height: 250px;
    }
}


@media screen and (max-width:840px){

    .a-container{
        margin-left: 1%;
    }

    .small-details{
        font-size: calc(3px + 1.6vw);
    }

    .details-icon{
        width: 10px;
        height: 10px;
    }

    .gallery-image{
        width: 48vw;
        border-radius: .5vw;
        height: 150px;
    }
    
    .modal-title{
        font-size: calc(6px + 1.9vw);
    }

    .modal-body{
        background-image: url(../img/galeria/modal-back-cel.png);
    }

    .modal-image{
        width: 55vw;
    }

    .col2-details{
        display: grid;
        justify-content: center;
    }

    .use-icon{
        width: 25px;
        height: 25px;
    }

    .use-detail{
        font-size: calc(10px + 2.3vw);
        margin-bottom: 0px;
    }

    .col2-details > small{
        margin-top: 10px;
        font-size: calc(6px + 1.4vw);
    }

    .image-revest{
        width: 35vw;
    }

    .scale {
        transform: scale(1.6);
    }

    .zoom{
        font-size: calc(5px + 1.3vw);
    }


}