html{
    scroll-behavior: smooth ;
}
#contenedor{
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 0;
} 
.foto_paisaje{
    width: 100%;
}
.foto_paisaje img{
    width:100%;
}
.texto_centrado{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    font-family: "Gabarito", sans-serif;
    font-size: 1.25em;
}
#titulo{
    position: absolute;
    top: 15%;
    left: 11%;
    z-index: 1;
    font-family: "Gabarito", sans-serif;
    color: #732634;
}
#titulo h1{
    color: #ffffff;
    font-size: 5vw;
    font-family: "Gabarito", sans-serif;
    }

#titulo2{
      position: absolute;
      top: 35%;
      left: 19.5%;
      z-index: 1;
      font-family: "Gabarito", sans-serif;
      color: #732634;
  }
#titulo2 h1{
      color: #ffffff;
      font-size: 5vw;
      font-family: "Gabarito", sans-serif;
      }

#titulo4{
        position: absolute;
        top: 35%;
        left: 24%;
        z-index: 1;
        font-family: "Gabarito", sans-serif;
        color: #732634;
    }
#titulo4 h1{
        color: #ffffff;
        font-size: 5vw;
        font-family: "Gabarito", sans-serif;
        }
nav{
    position: fixed; 
    top: 0;
    left: 0;
    background-color: #591c21;
    width: 100%;
    z-index: 2000;
    height: 30px;
    padding-top: 5px;
}
#menu3{
    height: 34px;
    padding-top: 2px;
}
nav a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.2em;
margin-left: 130px;
font-family: "Gabarito", sans-serif;
}
/*Voy a centrar el menú*/
#centrar_menu {
    width: 1000px;
    margin: 0 auto;
}
footer{
    width:100%;
    background-color: #591c21;
    height: 70px;
    text-align: center;
    padding-top: 20px;
}
footer span{
    font-family: sans-serif;
    color:#f2f2f2
}
.pie {
   background: color #f2f2f2;;
   width: 100%;
   height: 20px;
}
.pie span{
    color:black;
    font-size: 0.8em;
    font-family: "New Amsterdam", sans-serif;
}
.destacado{
    width: 100%;
    text-align: center;
    }
.destacado h3{
    font-family: "Foldit", sans-serif;
    color:#015959;
    font-size: 1.4em
}
#foto_celular{
    display: none;
}
body, html {
    height: 100%;
    margin: 0;
  }
.bgimg-1, .bgimg-2, .bgimg-3 {
    position: relative;
    opacity: 1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  
  }
  .bgimg-1 {
    background-image: url("img/lapipol.png");
    min-height: 100%;
  }
  
  .bgimg-2 {
    background-image: url("img/Clador.jpg");
    min-height: 100%;
  }
  
  .bgimg-3 {
    background-image: url("img/Margarita.jpg");
    min-height: 100%;
  }

  .topnav {
    background-color: #333;
    overflow: hidden;
    position:fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 5000;
    display: none;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: #591c21;
    color: white;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

#foto_hover{
  width: 100%;
  height: 550px;
  background-image: url("img/Transporte_ByN.JPG");
  background-size: cover;

}

#mascara{
  width: 100%;
  height: 550px;
  background-image: url("img/Transporte_color.JPG");
  background-size: cover;
  opacity: 0;
  transition: ease-in-out 1s;
  cursor: pointer;
}

#mascara:hover{
  opacity: 1;
}

#foto_hover2{
  width: 100%;
  height: 550px;
  background-image: url("img/horastrabajopais.jpg");
  background-size: cover;

}

#mascara2{
  width: 100%;
  height: 300px;
  background-color: rgba(51, 51, 51, 0.7);
  background-size: cover;
  opacity: 1;
  transition: ease-in-out 1s;
  cursor: pointer;
  text-align: center;
  padding-top: 300px;
}

#mascara2:hover{
  opacity: 0;
}

#mascara2 span{
  color: #f2f2f2;
}

/*Aquí comienzan mis estilos para celular*/
@media only screen and (max-width: 600px) {
    nav{
        display: none;
    }
    #foto_celular{display: block;
    }
    #foto_computador{
        display:none;
    }
    #titulo{
        top: 3%;
        left: 14%;      
    }
    #titulo h1{
        color:#ffffff;
        font-size: 2em;
        font-family: "Gabarito", sans-serif;
        }
        p{
        margin-left: 10px;
        margin-right: 10px;
     
        }
        h2{
            margin-left: 10px;
            margin-right: 10px;
        }
    @media only screen and (max-device-width: 1024px) {
            .bgimg-1, .bgimg-2, .bgimg-3 {
              background-attachment: scroll;
            }
          }

            @media screen and (max-width: 600px) {
            .topnav a:not(:first-child) {display: none;}
            .topnav a.icon {
              float: right;
              display: block;
            }
          }
          
          @media screen and (max-width: 600px) {
            .topnav.responsive {display: block;}
            .topnav.responsive a.icon {
              position: absolute;
              right: 0;
              top: 0;
            }
            .topnav.responsive a {
              float: none;
              display: block;
              text-align: left;
            }
        
            .topnav{
                display: block;
            }
  }