
@import url("https://fonts.googleapis.com/css?family=Lato");
/* body {
  font-family: Lato, Arial;
  color: #fff;
  padding: 20px;
  background-color: rgba(66, 139, 202, 1);
} */

button.btn-style{
  background: white;
  color:rgb(16, 75, 125);
  border: 2px solid rgb(16, 75, 125);
  transition: all .2s;
}

button.btn-style:hover{
  background:rgba(66, 139, 202,1);
  color:white;
  border: 2px solid white;
}


.content_seleccion {
  font-family: Lato, Arial;
  color: #fff;
  position: absolute;
  height: 100vh;
  width: 100%;
  /*outline: 1px solid red;*/
  top: 0;
  left: 0;
  z-index: 50;
}
h1 {
  font-weight: normal;
  font-size: 36px;
  font-weight: normal;
  font-family: "Architects Daughter", cursive;
  margin-top: 2px;
}
span {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}
blockquote {
  margin: 20px 0;
  padding-left: 1.5rem;
  border-left: 5px solid #ee6e73;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
}

.child {
  position: absolute;
  width: 100%;
  height: 100vh;
  /* outline: 1px solid red; */
  background-size: cover;
  background-position: center;
  right: 100%;
  transition:  all .2s;
}
.child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  transition: all 0.2s;
}


.child.active{
  right: 0;
}

.form-select.active {
  left: 50px;
}


@media (min-width: 800px) {
  .child {
    width: 90%;
  }
  .child img {
    opacity: 0.8;
  }
}

@media (min-width: 1100px) {
  .child {
    width: 80%;
  }
  .child img {
    opacity: 1;
  }
}

.form-select {
  position: absolute;
  top:50%;
  left: -100%;
  transform: translateY(-50%);
  /* left: 30px; */
  /* outline: 1px solid red; */
  min-width: 328px;
  transition: all .5s;
}

@media (min-width: 500px) {
  .form-select  {
    top:50%;
    transform: translateY(-50%);
    left: -100%;
  }
}


.form-salir{
  position: absolute;
  top: 20px;
  left:15px;
  z-index: 50;
}

.form-salir .btn-salir{
  border: none;
  /* background: rgb(16, 75, 125); */
  background: none;
  font-size: 20px;
  color: yellow;
  line-height: 20px;
  padding: 8px 15px;
  font-weight: bold;

}

.form-salir:hover .btn-salir{
  cursor: pointer;
  color: #fff;
}