:root{
    --color-principal:#5a8189;
    --opacity-color-principal:0.90;
    --color-secundario:#F4EDDA;
    --opacity-color-secundario:0.85;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Dosis', sans-serif;
}
html{
  font-size: 16px;
}

.main-content{
    /* background-image: url("https://img.freepik.com/fotos-premium/mujeres-sofisticadas-elegantes_102671-2425.jpg?w=996"); */
    background-image: url("./img/main_image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header{
    width: 100%;
    height: 3.125rem;
    background-color:var(--color-principal);
    opacity: var(--opacity-color-principal);
    display: flex;
    justify-content: space-between;
}

.elegant-font{
    width: 60%;
    padding-left: 1.25rem;
    color:var(--color-secundario);
    font-size: 1.875rem;
}

  .content-nav-barr{
    width: 30%;
    display: flex;
}

.nav-barr{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.btn-nav{
    border: 0;
    background-color:var(--color-principal);
    color:var(--color-secundario);
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.0625rem;
}

.container-drop-down-bar{
  width:8.75rem;
  height: 13.25rem;
  display: flex;
  flex-direction: column;
  justify-content:space-evenly;
}

.nav-bar-elements{
  width:8.75rem;
  height: 10.625rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border: 0;
  background-color:var(--color-principal);
  color:var(--color-secundario);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.0625rem;
  opacity: .80;
  margin-top: -18rem;
  position: absolute;
  transition: all 500ms ease;
}

.show-nav-bar-elements{
  margin-top: 2.4em;
}

.categories{
  width: 100%;
  height: 3rem;
  background-color: var(--color-principal);
  display: flex;
  justify-content: center;
  align-items: center;
}

.selected-catalog{
  border: 0;
  color: var(--color-secundario);
  background-color: var(--color-principal);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.0625rem;
}

.close-nav-barr {
  width: 84%;
  display: flex;
  border: 0;
  justify-content: flex-end;
  color:var(--color-secundario);
  background-color: var(--color-principal);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.0625rem;

}
/*End header*/

.content-page{
  width: 100%;
  height: 95.11%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* validation */
.validate-card{
    width: 45%;
    height: 26.875rem;
    display: none;
    background-color: var(--color-principal);
    opacity: var(--opacity-color-secundario);
    border-radius: 1.25rem;
}

.validate-card-show{
  display: block;
}

.modal-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.tittle-shop{
    display: flex;
    justify-content: center;
    font-size: 2.1875rem;
    color:var(--color-secundario);
    font-weight: bolder;
}

.validate-card-data{
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color:var(--color-secundario);
    font-weight: bold;
    font-size: 1.1875rem;
    letter-spacing: 0.0625rem;
}

.label-validate-data{
  font-size: 23px;
}

.input{
    width: 190px;
    height: 30px;
    text-align: center;
    border: 0.0625rem solid var(--color-principal);
    border-radius: 0.625rem;
    font-size: 1.25rem;
    letter-spacing: 0.0625rem;
    font-weight: bold;
    color:var(--color-principal);
}

.input-validation{
  width: 5.625rem;
}

.content-btn-validate{
  display: flex;
  justify-content: space-between;
}

.btn-validate-class{
    width: 14.0625rem;
    height: 3rem;
    margin-top: 2%;
    border: 0.0625rem solid var(--color-principal);
    border-radius: 3.125rem;
    background-color: var(--color-secundario);
    color: var(--color-principal);
    font-size: 1.4375rem;
    letter-spacing: 0.0625rem;
  font-weight: bolder;
}

.messages{
  width: 100%;
  height: 6.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
}


.show-number{
  width: 90%;
  color: var(--color-secundario);
  font-size: 1.4375rem;
  font-weight: bolder;
  letter-spacing: 0.0625rem;
  background-color: var(--color-principal);
  border: 0;
}

.show-number:focus{
  outline: none;
}

.catalog-clothes, .catalog-shoes{
    width: 50%;
    height: 51.17%;
    display: none;
    border-radius: 3.125rem;
    background-color:var(--color-principal);
    opacity: var(--opacity-color-principal);

}

.show-catalog-clothes{
  display: block;
}

.show-catalog-shoes{
  display: block;
}

.content-top{
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.close-catalog{
  width: 95%;
  display: flex;
  justify-content:flex-end ;
  cursor: default;
}

.content-tittle-img-price{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.content-img-catalog-clothes, .content-img-catalog-shoes{
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


.fig-img-clothes, .fig-img-shoes{
    width: 25%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color:var(--color-secundario);
    font-size: larger;
    font-weight: bold;
}

.img-clothes, .img-shoes {
    width: 100%;
    height: 100%;
    opacity: 0.99;

}

.price-img-clothes, .price-img-shoes{
    cursor: default;

}

.catalog-blog{
  width: 50%;
  height: 50%;
  border-radius: 10px;
  display: none;
  background: var(--color-secundario);
  color: var(--color-principal); 
  opacity: 94%;
}

.show-catalog-blog{
  display: block;
}

.tittle-blog{

  color: var(--color-principal);

}

.close-blog{
  color: var(--color-principal);
  width: 93%;
  display: flex;
  justify-content: flex-end;
  cursor: default;
}

.text-blog{
  color: var(--color-principal);
  width: 80%;
  padding-top: 2rem;
  text-align: justify;
}