/*-------------------------*/
        /*bluetti*/
/*-------------------------*/
.Pbodyportfolio{
    margin-top: 100px;
    display: grid;
    grid-template-columns: 100%;
    background-color: var(--background);
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 50px;
}
.fotos{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin-bottom: 200px;
}
.fotos .galeria{
    max-width: 450px;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    grid-gap: 1rem;
}
.fotos .galeria img{
    object-fit:cover; 
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.fotos .galeria .img-a{
    grid-column: 1/2;
}
.fotos .galeria .img-b{
    
    grid-column: 1/4;
}
.fotos .galeria .img-c{

    grid-column: 2/4;
    grid-row: 1/2;
}
.fotos .galeria .img-d{
    grid-column: 1/3;
    
}
.fotos .galeria .img-e{
    grid-column: 3/4;
}
.fotos .galeria .img-f{
    grid-column: 1/4;
}


/*-------------------------*/
        /*prueba*/
/*-------------------------*/
*{
    box-sizing: border-box;
    
}/*
body{
    margin: 0;
    padding: 0;
    
}*/
.row .column img{
    width: 100%; 
    cursor: pointer;
}
.row .column .prueba img{
    width: 100%; 
}/*
.row .column img:hover{
    transform: scale(1.2);
}*/
.row2 .column img{
    width: 100%; 
}
.row2 .column img:hover{
    transform: scale(1.2);
}
.row{
    display: flex;
    /* padding: 5px;
    margin-right: 5%;
    margin-left: 5%; */
    /* align-items: center; */
}
.row2{
    display: flex;
    margin-top: -20px;
    padding: 5px;
    margin-right: 20%;
    margin-left: 20%;
}
.column{
    flex:25%;
    padding: 5px;
}
.column img{
    margin-top: 5px;
}
.Pbodyportfolio button {
    /* width: 20%; */
    /* justify-self: center; */
    width: 100%;
    background-color: rgb(94, 101, 101);
    font-family: 'Courier New', Courier, monospace;
    font-size:larger;
}
/*carrusel fotos*/
.slide {
    position: relative;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
    margin-top: 00px;
}

        .slide-inner {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: calc( 600px + 3em);
        }

        .slide-open:checked + .slide-item {
            position: static;
            opacity: 100;
        }

        .slide-item {
            position: absolute;
            opacity: 0;
            -webkit-transition: opacity 0.6s ease-out;
            transition: opacity 0.6s ease-out;
            width: 100%;
        }

        .slide-item img {
            display: block;
            max-height: 800px;
            max-width: 800px;
            min-height: 700px;
            min-width: 700px;
            margin: 0 auto;
            object-fit:cover; 
        }

        .slide-control {
            background: rgba(0, 0, 0, 0.28);
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: none;
            font-size: 40px;
            height: 40px;
            line-height: 35px;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(0, -50%);
            cursor: pointer;
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            text-align: center;
            width: 40px;
            z-index: 10;
        }

        .slide-control.prev {
            left: 2%;
        }

        .slide-control.next {
            right: 2%;
        }

        .slide-control:hover {
            background: rgba(0, 0, 0, 0.8);
            color: #aaaaaa;
        }

        #slide-1:checked ~ .control-1,
        #slide-2:checked ~ .control-2,
        #slide-3:checked ~ .control-3 {
            display: block;
        }

        .slide-indicador {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            bottom: 2%;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 10;
        }

        .slide-indicador li {
            display: inline-block;
            margin: 0 5px;
        }

        .slide-circulo {
            color: #828282;
            cursor: pointer;
            display: block;
            font-size: 35px;
        }

        .slide-circulo:hover {
            color: #aaaaaa;
        }

        #slide-1:checked ~ .control-1 ~ .slide-indicador 
            li:nth-child(1) .slide-circulo,
        #slide-2:checked ~ .control-2 ~ .slide-indicador 
            li:nth-child(2) .slide-circulo,
        #slide-3:checked ~ .control-3 ~ .slide-indicador 
            li:nth-child(3) .slide-circulo {
            color: #428bca;
        }

/*Prueba*/
.btn__open-modal{
    width: 100%;
}
/*
.btn__open-modal:hover{
    padding-top: 50px;
}
*/
.container__modal{
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    visibility: hidden;
    transition: all 300ms;
}

/*X*/
.header__modal{
    height: 40px;
    padding: 0px;
    background: #9a9b9b;
    border-radius: 10px 10px 0px 0px;
}

.header__modal label{
    font-size: 20px;
    position:fixed;
    /* right: 10rem; */
    /* left: auto; */
    /* right: 35rem; */
    right: 21%;
    background-color: var(--background);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    /* top: 8rem; */
    top: 15%;
}

.body__modal{
    padding: 10px;
}

.message__modal{
    margin-top: 20px;
}


/*EVENTO CLICK*/

#evento-click{
    display: none;
}


#evento-click:checked ~ .container__modal{
    
    visibility: visible;
}

#evento-click:checked ~ .btn__open-modal{
    top: -80px;
}


.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 999;
    
}

.modal-content {
    position: relative;
    max-width: 90%;
    height:auto;
    
}

.modal-image {
    max-width: 800vh;
    max-height: 90vh;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.close-modal-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: rgb(255, 255, 255);
    cursor: pointer;
}