@keyframes appearselectoption{
    from{opacity: 0; transform: translateY(-50px);}
    to{opacity: 1; transform: translateY(0px);}
}

@keyframes appearlocation{
    0%{opacity: 0; transform: translateY(0)}
    50%{opacity: 1; transform: translateY(-20px)}
    100%{opacity: 1; transform: translateY(0px)}
}

@keyframes appearregresar{
    0%{opacity: 0; transform: translateX(-220px)}
   50%{opacity: 1; transform: translateX(2px)}
    100%{opacity: 1; transform: translateX(0px)}
}


@keyframes appearlocation{
    0%{opacity: 0; transform: translateX(-220px)}
   50%{opacity: 1; transform: translateX(20px)}
    100%{opacity: 1; transform: translateX(0px)}
}

.back{
 margin: 0 5px 0 0;
}

#regresar {
  display: flex;
  position: absolute;
  transform: scale(1);
  top: 7rem;
  left: 1rem;
  text-transform: uppercase;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #FFF;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 6px;
  color: #222733;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  outline: solid 3px #111;
  z-index: 1001;
  box-shadow: 0 4px 7px black, inset 0 0 2px #222733;
  animation: appearregresar 1.2s ease-in-out;
}

 #regresar:hover {
  display: flex;
  position: absolute;
  top: 7rem;
  left: 1rem;
  transform: scale(1.04);
  text-transform: uppercase;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #ead8c0;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 6px;
  color: #222733;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  outline: solid 3px #111;
  box-shadow: 0 4px 7px black, inset 0 0 2px #222733;
  z-index: 1001;
  cursor: pointer;
}

#regresar:focus {
  display: flex;
  position: absolute;
  transform: scale(1);
  top: 7rem;
  left: 1rem;
  text-transform: uppercase;
  color: #000;
  border-bottom: solid 0.1px #010101;
  font-weight: 600;
  background-color: #a98b63;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 6px;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 0 black, inset 0 0 10px #222733;
  outline: solid 0.1px #111;
  z-index: 1001;
  cursor: pointer;
}

#my-current-location{
  display: flex;
  position: absolute;
  bottom: 5rem;
  left: 1rem;
  transform: scale(1);
  text-transform: uppercase;
  color: #000;
  border-left: solid 4px #010101;
  font-weight: 600;
  background-color: #ead8c0;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 3px;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  outline: solid 1px #111;
  z-index: 1001;
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  cursor: pointer;
  transition:0.4s ease-in-out;
  animation: appearlocation 0.7s ease-in-out;
}

 #my-current-location:hover {
  display: flex;
  position: absolute;
  bottom: 5rem;
  left: 1rem;
  transform: scale(1);
  text-transform: uppercase;
  color: #222733;
  border-left: solid 4px #010101;
  font-weight: 600;
  background-color: #ead8c0;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 3px;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  outline: solid 1px #111;
  z-index: 1001;
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  transform: translateY(-5px);
  cursor: pointer;
  transition:0.4s ease-in-out;
}

#my-current-location:focus {
  display: flex;
  position: absolute;
  bottom: 5rem;
  left: 1rem;
  transform: scale(1);
  text-transform: uppercase;
  color: #222733;
  border-left: solid 4px #a98b63;
  font-weight: 600;
  background-color: #ead8c0;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 3px;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  outline: solid 0 #111;
  z-index: 1001;
  box-shadow: 0 0 0 black, inset 0 0 10px #222733;
  cursor: pointer;
  transition:0.4s ease-in-out;
}

#container-select-location{
  display: flex;
  position: absolute;
  background-repeat: no-repeat;
  top: 1rem;
  left: 50%;
  transform: scale(1);
  text-transform: uppercase;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #FFF;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 5px;
  color: #222733;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  outline: solid 1px #111;
  z-index: 1001;
  cursor: pointer;
}


#select-location{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items:center;
  align-content:center;
  text-align: center;
  top: 1rem;
  left: 50%;
  width: 17rem;
  transform: scale(1);
  text-transform: uppercase;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #FFF;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 5px;
  color: #222733;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  outline: solid 1px #111;
  z-index: 1001;
  cursor: pointer;
  box-shadow: 0 4px 7px black, inset 0 0 1px #222733;
  animation: 0.4s appearselectoption ease-in-out;
  transition:0.1s ease-in-out;
}

#select-location:hover {
  display: flex;
  position: absolute;
  width: 17rem;
  text-align: center;
  top: 1rem;
  left: 50%;
  transform: scale(1);
  text-transform: uppercase;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #FFF;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 5px;
  color: #000;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.2s ease-in-out;
  outline: solid 1px #111;
  z-index: 1001;
  box-shadow: 0 4px 7px black, inset 0 0 2px #222733;
  cursor: pointer;
}


/*#select-location #option{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items:center;
  align-content: center;
  width: 17rem;
  text-align: center;
  transform: scale(1);
  text-transform: uppercase;
  color: #222733 !important;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #FFF;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 5px;
  color: #222733;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  outline: solid 1px #111;
  z-index: 1001;
  cursor: pointer;
}*/





.location{
    display: flex;
    justify-content: center;
    align-content:center;
    align-items: center;
}



#hide {
  text-transform: uppercase;
  font-weight: 600;
  background-color: #adadaa;
  font-size: 12px;
  padding: 10px 15px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: #222733;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0.1rem;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.2s ease-in-out;
  outline: solid 3px #111;
  z-index: 2001;
}



#geolocation{
  display: flex;
  position: absolute;
  border: 0;
  justify-content: center;
  align-items:center;
  align-content:center;
  text-align: center;
  bottom: 6.9rem;
  left: 2.6rem;
  transform: scale(1);
  text-transform: uppercase;
  font-weight: 600;
  background-color: #EAD8C0;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  z-index: 1002;
  cursor: pointer;
  animation: appearlocation 0.7s ease-in-out;
}





/*Personzalized select option*/

.checkout-information__form--input input::placeholder {
  color: #828282;
  display: flex;
  top: 1rem;
  left: 50%;
  transform: scale(1);
  
}
.checkout-information__form--input--location {
  align-items: center;
  display: flex;
  position: relative;
  top: 1rem;
  left: 50%;
  border: 0.1rem solid #828282;
  border-radius: 1.2rem;
  padding: 1.2rem 1.4rem 1.2rem 1.2rem;
  z-index: 1001;
}
.checkout-information__form--input--location span {
  color: #828282;
  margin-right: 1.2rem;
  z-index: 1001;
}
.checkout-information__form--input--location--select {
  align-items: center;
  display: flex;
  top: 1rem;
  left: 50%;
  justify-content: space-between;
  width: 100%;
  z-index: 1001;
}
.checkout-information__form--input--location--select select {
  display: flex;
  top: 1rem;
  left: 50%;
  color: #828282;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  width: 100%;
  border: none;
  outline: none;
  position: relative;
  appearance: none;
  z-index: 1001;
}
.checkout-information__form--input--location--select span {
  color: #828282;
  background-color: #E0E0E0;
  margin-right: 0;
  display: flex;
  position: absolute;
  top: 1rem;
  left: 50%;
  right: 1.2rem;
  border-radius: 0.4rem;
  z-index: 1001;
}

.seleccionado{
    background: #ead8c0;
    position: absolute;
    z-index: 1006;
    outline: solid 2px #222733;
    border:solid 2px #222733;
}

.sinseleccionar{
       background: #FFF;
    position: absolute;
    z-index: 1006;
}



   #map {
    height: 100%;
    width: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }







  
  
  @media screen and (max-width: 768px){
#select-location{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items:center;
  align-content:center;
  text-align: center;
  top: 1rem;
  left: 28%;
  width: 13rem;
  transform: scale(1);
  text-transform: uppercase;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #FFF;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 5px;
  color: #222733;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  outline: solid 1px #111;
  z-index: 1001;
  cursor: pointer;
  animation: 0.4s appearselectoption ease-in-out;
}

#select-location:hover {
  display: flex;
  position: absolute;
  width: 13rem;
  text-align: center;
  top: 1rem;
  left: 28%;
  transform: scale(1);
  text-transform: uppercase;
  color: #222733;
  border-bottom: solid 3px #010101;
  font-weight: 600;
  background-color: #FFF;
  font-size: 12px;
  padding: 10px 15px;
  border-radius: 5px;
  line-height: 1.5;
  text-decoration: none;
  letter-spacing: 1px;
  transition:0.4s ease-in-out;
  outline: solid 1px #111;
  z-index: 1001;
  cursor: pointer;
}

}