/* estilo general */
/* *{
   text-align: justify; 
} */

#text {
    padding-top: 6%;
    padding-bottom: 3%;
}

#text h2{
    padding-top: 3%;
    margin-bottom: 5%;
}

#text li{
    color: #ec5c30;
    }

#text p{
        color: #fff;
        }    

#text-two{
    padding-bottom: 3%;
}

#text-two h2{
margin-bottom: 5%;
}

        
.text-two{
    margin-bottom:3%;
}

.text-two h2{
margin-bottom:5%;  
}

.image img{
    width: 100%;
    height: 18rem;
    position: center;
}

.image2 img{
    width: 100%;
    height: 18rem;
    position: center;
}

#gallery{
    padding-top: 3%;
    padding-bottom: 15%;
}

#gallery img{
    margin-bottom: 5%;
}


/*
*****Location-screen*****
*/

span{
    color:#de4215
}

#location-title{
background-color: #222525; 
color:white;
padding: 2em 1rem;
}

#location-title h1{
    text-align: center;
}

/* .map img{
    width: 100%;
    height: auto;
    max-height: 120vh;
    position: relative;
     background-image: url("/assets/img/imagenes-10.jpg")  ; 
    background-size: cover;
    background-position: center;
    padding: 2rem;

}

#map-section{
    overflow: auto;
    width: 100%;
    height: 120vh;
    position:relative;
    background-color: white;
    background-size: cover;
    background-position: center;
    
} */
.map {
    overflow: auto;
    width: 100%; 
}

.map img {
    width: auto;
    height: 120vh;
    max-width: none; 
    padding: 2rem;
}

#map-section {
    height: 120vh;
}


/* #location-hero {
    width: 100%;
    height: 25rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-12.jpg") ;
    background-size: cover;
    background-position: center;
    } */




    
    
/*
*****Gasoducto-screen*****


#gas-hero{
    width: 100%;
    height: 34rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-13.jpg") ;
    background-size: cover;
    background-position: center;
    
}

*/


/*
*****Hidrocar-screen*****
#hidro-hero{
    width: 100%;
    height: 34rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-14.jpg") ;
    background-size: cover;
    background-position: center;
}

*/


#hidro-gallery{
    padding-bottom: 10%;
} 

.hidro-image p{
    margin-top: 2%;
}

.hidro-image img{
    width: 90%;
    position: center;
    height: 30vh;
    margin-top: 10%;
}


/*
*****Soldadura-screen*****
#sold-hero{
    width: 100%;
    height: 34rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-16.jpg") ;
    background-size: cover;
    background-position: center; 
}
*/


.sold-info{
    padding-bottom: 3%;
}


.sold-icons{
    position: relative;
    padding-bottom: 10%;
}

.sold-son{
    text-align: center;
} 

.icon-s{
    margin-top: 10%;
    margin-bottom: 5%;
    
}

.icon-s img{
    width: 20%;
}

.icon-s-title{
    margin-top:3%;
}


/*
*****Refinerias-screen*****
#ref-hero{
    width: 100%;
    height: 34rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-18.jpg") ;
    background-size: cover;
    background-position: center;
}
*/



/*
*****Plantas-screen*****
#planta-hero{
    width: 100%;
    height: 34rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-15.jpg") ;
    background-size: cover;
    background-position: center;
}
*/


 .icon img{
    width: 25%;
}  

.planta-info-two{
    text-align: center;
}

.icon-info{
    margin-bottom: 30%;
}  

.icon-tittle{
    margin-top: 5%;
}

/*
*****Pozos-screen*****
#pozos-hero{
    width: 100%;
    height: 30rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-17.jpg") ;
    background-size: cover;
    background-position: center;
}

*/


/*
*****Herramienta-screen*****

#tools-hero{
    width: 100%;
    height: 30rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-19.jpg") ;
    background-size: cover;
    background-position: center;
}
*/



.tools-gallery{
    text-align: center;
    
}

.tools-gallery img{
    width: 70%;
    height: 50%;
}

/*
*****Pista-screen*****
#pista-hero{
    width: 100%;
    height: 30rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-18.jpg") ;
    background-size: cover;
    background-position: center;
}
*/



/*
*****Valvula-screen*****
#valvu-hero{
    width: 100%;
    height: 30rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-20.jpg") ;
    background-size: cover;
    background-position: center;
}
*/




.valve-item {
    text-align: center;
    padding: 2rem;
    background-color: #333;
}

.valve-item img {
    padding: 2rem;
    max-width: 100%;
    max-height: 80%;
    border-radius:5%;
}


.valve-item h5 {
    margin-top: 1rem;
    color: #FF5733;
}

#gallery-valvu{
    padding-bottom: 10%;
}



/*
*****Wireline-screen*****
#wire-hero{
    width: 100%;
    height: 30rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-22.jpg") ;
    background-size: cover;
    background-position: center;
}
*/



/*
*****Coiled-screen*****
*/

/* #coiled-hero{
    min-height: 30%;
    position: relative;
    padding: 0;
    background-color: black;
    background-size: cover;
    background-position: center;
}  */

/*
*****Perforación-screen*****
#perfo-hero{
    width: 100%;
    height: 30rem;
    position: relative;
    padding: 0;
    background-color: black;
    background-image: url("/assets/img/imagenes-21.jpg") ;
    background-size: cover;
    background-position: center;
}

*/


@media(max-width: 768px) {

    #map-section {
        height: 30rem;
    }

    .map{
        height: 30rem;
    }

    .valve-item {
        background:none;
    }
    

    
}


@media(max-width: 767px) {

    .image img{
        width: 80%;
        height: 10rem;
        margin-left: 8%;
    }

    .image2 img{
        width: 80%;
        height: 10rem;
    }

    .image p{
        margin-left: 8%;
    }
}