html {
    overflow-x: hidden;
}

body {
    background-color: #f5f5f5;
    overflow-x: hidden;
}


/* Place 1 */

.raw{
    margin: 0px;
    flex-wrap: wrap-reverse;
}

.column{
    padding: 0px;
}

#place-1{
    background-color: #f3f3f3;
    padding-bottom: 25vh;
}

.container-enviroment{
    display: contents;
    margin: 0px;
}

#img-enviroment{
    width: 50vw;
    height: 120%;
    min-width: 42vh;
}



#container-imgRevest{
    position: relative;
    display: flex;
    align-items: center;
}

#a-img{
    display: contents;
}

#img-revest{
    width: 32vw;
    height: 40vh;
    z-index: 10;
    transition: .5s;
    box-shadow: 0 0 15px rgba(43, 43, 43, 0.685);
    cursor: pointer;
}

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

#modal-revest{
    background-color: rgba(0, 0, 0, 0.836);
}

.modal-header{
    border:none;
    padding-bottom:0px;
}

.modal-img{
    width: 100%;
    height: 80vh;
}

.modal-dialog{
    max-width: none;
    width: 70vw;
    margin: 10vh auto;
}



#content-data{
    margin-left: 4vw;
    margin-top: 10%;
}

#place-use{
    font-size: calc(1.2vw);
    margin-bottom: 1vh
}

#title{
    margin: 0px;
    font-size: calc(2.5vw);
    font-weight: lighter;
    color: green;
}

#use-subTitle{
    font-size: calc(1.5vw);
    margin-bottom: 3vh;
}



/* Imágen estática */

#container-imgStatic{
    padding-bottom: 10vh;
}

#imgStatic{
    padding-top: 10vh;
    padding-bottom: 10vh;
    background-image:url(../img/info/muestra2.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: contrast(1.1);
    background-position:center;
    background-size: cover;
    background-attachment: fixed;
}

.data-box{  
    width: 9vw;
    height: 9vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f1f1;
    border: 1px solid rgba(65, 65, 65, 0.534);
}

.box{
    text-align: center;
}

.data{
    font-size: calc(1.1vw);
    color: black;
}

.number{
    font-size: calc(1.8vw);
    color: green;
}

.unit{
    font-size: calc(1.3vw);
    color: black;
}

/* Place 2 */

#place-2{
    background-color: #ececec;
    padding-top:30px ;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 15vh;
    margin-top: 20vh;
}

footer{
    margin-top: 0px!important;
}

li{
    list-style:none;
    margin-bottom: 15px;
    padding: 8px;
    border-bottom: 1px solid rgb(71, 71, 71);
}

#container-titleTD{
    text-align: center;
    margin-bottom: 6vh;
    font-size: calc(2.6vw);
    text-transform: uppercase;
    color: rgb(71, 71, 71);
}

.name-data{
    font-size: calc(1.1vw);
    color: rgb(0, 107, 0);
    font-weight: 600;
}

.value-data{
    font-size: calc(1.3vw);
    color: rgb(71, 71, 71);
    font-weight: 900;
}   

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

    /* Place 1 */

    #place-1{
        padding-bottom: 15vh;
    }

    #img-enviroment{
        width: 100vw;
        height: 50vh;
    }

    #first-dataContainer{
        margin-left: 2vw;
    }

    #img-revest{
        width:60vw;
        height: 30vh
    }

    .zoom{
        padding-left: 22vw;
        font-size: calc(6px + 1.3vw);
    }

    #place-use{
        font-size: calc(6px + 1.2vw);
    }
    
    #title{
        font-size: calc(10px + 2vw);
    }
    
    #use-subTitle{
        font-size: calc(6px + 1.5vw);
    }

    /* Imágen estática */

    .data-box{
        width: 16vw;
        height: 16vw;
        padding: 10px;
    }

    .data{
        font-size: calc(3px + 1.2vw);
    }
    
    .number{
        font-size: calc(5px + 3vw);
    }
    
    .unit{
        font-size: calc(3px + 1.6vw);
    }

    /* Place 2 */

    #place-2{
        padding-top:30px ;
        padding-left: 4vw;
        padding-right: 10vw;
        padding-bottom: 10vh;
        margin-top: 10vh;
    }

    #container-titleTD{
        font-size: calc(5px + 2.6vw);
        margin-left: 5vw;
    }
    
    .name-data{
        font-size: calc(5px + 1.1vw);
    }
    
    .value-data{
        font-size: calc(5px + 1.3vw);
    }

    /* Modal */
    
    .modal-dialog{
        width: 90vw;
    }

    .modal-img{
        width: 100%;
        height: 60vh;
    }

    .modal-body{
        padding:10px;
        padding-top:0px;
    }

    .modal-header{
        padding: 2px;
    }

}

@media screen and (max-width:550px){
    
    .number{
        font-size: calc(6px + 2.4vw);
    }
    
}

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

    /* Modal */
        
    .modal-img{
        width: 100%;
        height: 45vh;
    }

    /* Imágen estática */

    .data-box{
        width: 22vw;
        height: 22vw;
        padding: 10px;
    }

    .data{
        font-size: calc(6px + 1.2vw);
    }
    
    .number{
        font-size: calc(9px + 3vw);
    }
    
    .unit{
        font-size: calc(6px + 1.6vw);
    }

    #container-titleTD{
        font-size: calc(9px + 2.6vw);
        margin-left: 5vw;
    }
    
    .name-data{
        font-size: calc(9px + 1.1vw);
    }
    
    .value-data{
        font-size: calc(9px + 1.3vw);
    }


}


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

    #img-revest{
        width:70vw;
    }

    .zoom{
        padding-left: 25vw;
    }

    .number{
        font-size: calc(8px + 2vw);
    }
    

    /* Modal */
        
    .modal-img{
        width: 100%;
        height: 35vh;
    }

}