/* GENERAL Y ORDENAMIENTO DE SECCIONES PRINCIPALES */
*{
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

body{
  font-size:100%;
  min-height:100vh;
  width:100%;
  margin: auto;
  position:relative;
  padding-bottom: 1000px;
  background-color:rgb(253, 247, 237);

}

.body-conocenos{
  height:128vh;
}

.body-flex{ 
    display: flex;
    flex-direction: column;
  }
  
.principal, #pantalla-dividida, footer {
    position: absolute;
    width:100vw;  
}

.principal{
    height: 18vh;
    width: 100vw;
    background-color:papayawhip;
}

#pantalla-dividida{
    height: 120vh;
    width: 100vw;
    background-color:rgb(253, 247, 237);
    position:absolute;
    top: 18vh;
    display: flex;
}

footer{
    height:15vh;
    width: 100vw;
    bottom: 0;
    background-color:papayawhip;
    text-align:center;
    padding-top:1em;
}

/* MENU PRINCIPAL */

header{
    font-size : 3em;
    font-weight:bold;
    text-align:center;
    font-family: 'Spartan', sans-serif;
    text-transform: uppercase;
    padding-top:2.5px;
}

.menu{
    font-weight : normal;
    font-family: 'Raleway', sans-serif;
    display: flex;
    flex:auto;
    width:100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding:0;
} 

ul {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  align-items:center;
  list-style-type: none;
  margin-bottom:20px;
}

ul :last-child{
  border-right: none;
}

ul li {
  padding: 0;
  display: block;
  flex:auto;
  border-right-style:solid;
  border-right-width: 1px;
  border-right-color: rgba(rgba(0, 0, 0, 0.15));
}

ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5em;
  color: #000000;
  padding: 2px 0;
  transition: 0.3s;
}

ul li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  top: 100%;
  left: 0;
  background:#fc6e6e;
  transition: transform 0.3s;
  transform: scaleX(0);
  transform-origin: right;
}

ul li a:hover {
  color: #fc6e6e;
  font-size: 1.6em;
  font-weight:bold; 
}

ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* MAIN HOME */ 

#citta{
    color:#ca6889;
}

.pantalla-izquierda{
    width:50vw;
    height:72vh;
    text-align:center;
    padding-top:10%;
}
  
.pantalla-derecha{
    width:50vw;
    height:72vh;
}

.carousel-inner{ 
    width:45%;
    margin:auto;
    align-content:center;
    justify-items: center;
    margin-top: 15%;
}

.pantalla-izquierda h1{
  font-weight:bold;
  font-size:7em;
  margin:auto;
  margin-bottom:0.3em;
  margin-top:0.3em;
  font-family: 'Spartan', sans-serif;
}

.texto-izq{
  font-size:2.5em;
  line-height:1.3em;
  margin-bottom:1em;
  text-align:center;
  text-justify: center;
  font-style: italic;
}

.boton-conocenos, .boton-catalogo{
  text-decoration:none;
  margin-right:1.5em;
}

.botones-home{
  display:flex;
  flex-direction: row;
  justify-content:center;
}
.boton-conocenos a{
    border: 3px solid black;
    text-decoration:none;
    padding: 15px;
    border-radius:30px;
    color: black;
    font-weight:bold;
}

.boton-catalogo a{
  border: 3px solid black;
  text-decoration:none;
  padding: 15px;
  border-radius:30px;
  color: black;
  font-weight:bold;
}

.boton-catalogo a:hover{
  border: 3px solid #fc6e6e;
  color: #fc6e6e;
}

.boton-conocenos a:hover{
  border: 3px solid #fc6e6e;
  color: #fc6e6e;
}


/* CONOCENOS */

#pantalla-conocenos{
  height: 80vh;
  width: 100vw;
  background-color:rgb(253, 247, 237);
  margin-top:5vh;
  display: flex;
  text-align:center;
  flex-direction:column;
  font-size:2em;
  line-height:1.3em;
  padding: 15%;
  font-style: italic;  
  text-justify:center;
  display:20%;
}

.texto-conocenos2{
  margin-top: 2em;
}

/* PRODUCTOS */

.text-catalogo{
  font-size:2em;
  line-height:1.3em;
  font-style: italic;  
  padding-top:20vh;
  text-justify:center;
  display:20%;
}

.main-productos{
  width: 100%;
  height: 85vh;
  margin-top:5vh;
  justify-content: center;
  text-align: center;
} 

.lista-productos1{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;  
  justify-content: space-between;
  align-items: center;
  margin-top:10vh;
}

.lista-productos2{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;  
  justify-content: space-between;
  align-items: center;
  margin-top:10vh;
}

.producto img:hover{
  transform: scale(1.05);
}

.lista-productos .producto{
  transform:scale(0.3)
}


/* ENTREGA */


#pantalla-entrega{
  height: 80vh;
  width: 100vw;
  background-color:rgb(253, 247, 237);
  margin-top:5vh;
  text-align:center;
  font-size:2em;
  line-height:1.3em;
  padding: 15%;
  font-style: italic;  
  text-justify:center;  
  display:20%;

}

.ubicaciones{
  display:flex;
  flex-direction:row;
  padding-top: 2em;
}

.palermo, .padua {
  width:50vw;
  justify-content: center;
  align-items: center;
}

.mapa{
  padding-top: 1em;
}

.anticipacion{
  padding-top: 3em;
}


/* CONTACTO */ 


.container-form{
  height: 80vh;
  width: 100vw;
  background-color:rgb(253, 247, 237);
  margin-top:5vh;
  display: flex;
  flex-direction:column;
  text-align:center;
  font-size:1.5em;
  line-height:1.3em;
  padding: 15%;
  font-style: italic;  
  text-justify:center;
  display:20%;
}
.container-form label {
  padding-right:1em;
}

.container-form h2{
  padding-bottom:1.5em;
  margin-top:-1em;
}

.container-form input, textarea{
  border-radius:30px;
  padding:10px;
}

/* FOOTER */

.texto-footer{
  font-size: 1vw;
  text-align: center;
  margin:auto;
}

.logoinsta{
  font-size:2em;
  color:black;
  margin:auto;
}

footer div a:hover{
  color: #fc6e6e;
  font-size: 2.1em;
}


/* ---------- VISTA PC ---------- */
@media only screen and (min-width:881px) and (max-width: 1400px) { 
  .pantalla-izquierda h1{
    font-size:7em;
    margin:auto;
    margin-bottom:0.3em;
    margin-top:0.3em;
  }
  
  .texto-izq{
    font-size:2.5em;
    line-height:1.3em;
    margin-bottom:1em;
  }
  
  .boton-conocenos, .boton-catalogo{
    margin-right:1.5em;
  }

  .texto-izq{
    font-size: 2vw;
  }

  .boton-conocenos, .boton-catalogo{
    transform: scale(0.9);
  }

 
  .texto-footer{
    font-size:2vw;
  }

  .logoinsta{
    font-size:2vw;
    margin-top:-1em;
  }
  
  footer div a:hover{
  color: #fc6e6e;
  font-size:2.5vw;
  }


}


/* ---------- VISTA TABLET ---------- */
@media only screen and (max-width: 880px) {
  
  .pantalla-izquierda h1{
    font-weight:bold;
    font-size:8vw;
    margin:auto;
    margin-bottom:0.3em;
    margin-top:1vh;
    font-family: 'Spartan', sans-serif;
  }

  .texto-izq{
    font-size: 5vw;
  }

  .boton-conocenos, .boton-catalogo{
    transform: scale(0.7);
  }

  #carousel{
    height:100vh;
  }

  .carousel-item {
    height: 100vh;
    align-content: center;
    padding-top:15vh;
  }

  .texto-footer{
    font-size:3vw;
  }

  .logoinsta{
    font-size:3.5vw;
    margin-top:-1em;
  }
  
  footer div a:hover{
  color: #fc6e6e;
  font-size: 3.6vw;
  }
}

/* ---------- VISTA CELULAR ---------- */ 

@media only screen and (max-width: 640px) {
  /* TAMAÑO SECCIONES */

  .principal{
    height:25vh;
    margin-bottom:auto;
  }

  .footer{
    height:10vh;
  }

  /* MENU CELULAR */ 
  header{
    font-size:1em;
    padding-top:0.5em;
    text-align:center;
  }

  .menu{
    flex-direction: column;
    flex-wrap:wrap;
    width:100%;
  }

  ul li{
    font-size:0.5em;
    border-style: none;
  }


  /* MAIN CELULAR */

  #pantalla-dividida{
    flex-direction: column;
    flex-wrap: nowrap;
    width:100vw;
    height:150vh;
    margin-top:7vh;
  }
  .pantalla-izquierda h1{
    font-weight:bold;
    font-size:10vw;
    margin:auto;
    margin-bottom:0.3em;
    margin-top:1vh;
    font-family: 'Spartan', sans-serif;
  }

  .texto-izq{
    font-size: 5vw;
    font-weight:normal;
    max-width:60vh;
    display: inline-block;
    justify-content: center;
    text-justify: auto;
    align-self:center;
  }

  .boton-conocenos, .boton-catalogo{
    transform: scale(0.7);
  }

  .botones-home{
    flex-direction:column;
    align-items:center;
  }
  .boton-conocenos{
    margin-top:2em;
  }
  .boton-catalogo{
    margin-top:2em;
  }

  .pantalla-izquierda{
    width:100vw;
    height:25vh;
    margin-bottom:20vh;
  }

  .pantalla-derecha{
    width:100vw;
    height:50vh;
    margin-top:25vh;
    margin-bottom: 4vw;
    padding-top:-5em;
  }

  #carousel{
    height:80vh;
  }

  .carousel-item {
    height: 80vh;
    margin-bottom:-5vh;
  }
  
  .carousel-item img {
      position: absolute;
      top: 0;
      left: 0;
      max-height: 80vh;
  }

  .carousel-indicators{
    transform:scale(0.5);
    bottom:1em;
  }

  .carousel-control-prev, .carousel-control-next {
    transform:scale(0.5);
  }

  /* FOOTER CELULAR */

  footer{
    height:10vh;
    margin:0;
    position:fixed;
    bottom:0;
  }

  .texto-footer{
    font-size:2.5vw;
  }

  .logoinsta{
    font-size:3.5vw;
    margin-top:-1em;
  }
  
  footer div a:hover{
  color: #fc6e6e;
  font-size: 3.6vw;
  }
}