body {
  margin: 0;
  padding: 0; /*quitar los margenes exteriores*/
  background-color: #171717;
}

main{
  background-color: #171717;
  background-image: url(../img/stickers/tornillo1.png) repeat;
  background-size: 20%;
}



/*este header era sin slider, img de fondo*/
/*header{
  background-image: url("../img/interior_grande.jpeg");
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
  height: 650px;
}*/


/*con slider:*/
.slider_container{
  width: 100%;
  height: 500px;
  margin: auto;
}

#slider{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

#slider > div{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /*tener el slider p centrado*/
}

#slider img{
  width: 100%;
  object-fit: cover;
}

#slider p{
  position: absolute;
  top: 80%;
  left: auto;
  background-color: #f09f07;
  font-weight: 700;
  font-size: 1.5em;
  padding: 2vh 3vw;
  color: black;
}
#slider a{
  text-decoration: none;
  color: black;
}

#slider p:hover{
  background-color: #ffffff80;
  transition: 0.8s;
}

/*los ult dos es para imagen de fondo parallax*/

.experiencia{
  right: 80px;
  bottom:7px;
  width: 15%;
  position: fixed;
}

.vacaciones{
  right: 2vw;
  top: 10vh;
  width: 40%;
  position: fixed;
}



.navegation{
  z-index: 2;
}

.logo {
  width: 40%;
  display: block;
  margin:auto;
  /*background-color: rgba(255, 99, 71, 0);*/
  padding-top: 3vh;
}


.description {
  padding-top: 11vh;
  width: 70%;
  text-align: center;
  font-family: 'Libre Franklin';
  font-size: 15px;
  text-decoration-style: solid;
  line-height: 3.5vh;
  word-spacing: 0.7vw;
  margin: auto;
  text-align: center;
  padding-bottom: 15vh;
}

.sticker{
  background-color: 0;
  position: absolute;
  bottom: -615px;
  left: 20px;
}

.sticker img {
  width: 25%;
}


@media screen and (max-width: 900px){ /*min-width */

  .slider_container{
    height: 300px;
  }
  #slider p{
    top: 220px;
    font-size: 1em;
  }

  .fondo{
      margin-top: 155px;
  }

  .logo {
    width: 60%;
    padding-top: 5vh;
  }

  .description {
    font-size: 1em; /*hacer mas pequeña la descripcion*/
    line-height: 3.5vh;
  }

  .experiencia{
    right: 10px;
    bottom:10px;
    width: 20%;
    position: fixed;
  }


}

@media screen and (max-width: 350px){ /*min-width */

  .slider_container{
    height: 50vh;
  }

  #slider p{
    top: 35vh;
    font-size: 0.7em;
  }

  .logo {
    width: 70%;
  }

  .description {
    font-size: 0.7em; /*hacer mas pequeña la descripcion*/
    line-height: 3.5vh;
  }

  .experiencia{
    width: 30%;
  }

  .vacaciones{
    width: 60%;
  }


}