@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body{
    font-family: 'Montserrat', sans-serif;
    background: ghostwhite;
  
  
  }

  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #1F4AA2;
    opacity: 1; /* Firefox */
  }
  
       /* ALERTS */
/* inspired by Twitter Bootstrap */

.alert {
padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #eed3d7;
  border-radius: 4px;
  position: fixed;
  z-index: 99;
  bottom: 0;
  right: 0;
  margin-right:20px;
}

.alert-red {
  color: white;
  background-color: #DA4453;
}
.alert-green {
  color: white;
  background-color: #37BC9B;
}
.alert-blue {
  color: white;
  background-color: #4A89DC;
}
.alert-yellow {
  color: white;
  background-color: #F6BB42;
}
.alert-orange {
  color:white;
  background-color: #E9573F;
}
  

  /* TEXTOS */
.titulos{
    color:#353535;
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 20px;
    font-kerning: normal;
}



.parrafos{
    color:#6E6E6E;
    font-weight: 500;
    font-size: 1em; 
    line-height: 1.8;
    font-kerning: normal;
}

.titulosb{
    color:#fff;
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 20px;
    font-kerning: normal;
}

.parrafosb{
    color:#fff;
    font-weight: 500;
    font-size: 1em; 
    line-height: 1.8;
    font-kerning: normal;
}

.titulosc{
  color:#fff;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 5px;
  font-kerning: normal;
}
.parrafosc{
  color:#fff;
  font-weight: 500;
  font-size: 1em; 
  line-height: 1.8;
  font-kerning: normal;
}

.tituloCard{
  color:#353535;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 7px;
}
.subtitulosCard{
  color:#6E6E6E;
  font-weight: 400;
  font-size: 13px;
}

/* CABECERA */

header{
    width: 100%;
    height: 70px;
    background: transparent;
    font-size: 14px;
    padding-left: 125px;
    padding-right: 125px;
    /* -webkit-box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 10px 0px rgba(50, 50, 50, 0.75); */

  }
  
  
  
  .space2{
    width: 100%;
    height: 50px;
  
  }
  
  
  
  
  #btn-menu{
    display: none;
  }
  header label {
    display: none;
    width: 30px;
    height: 30px;
    padding-left: 15px;
  
  
  
  
  }
  
  
  
  .menu ul {
    margin: 0;
  list-style: none;
  padding: 0;
  display: flex;
  margin-left: 50px;
  justify-content: flex-start;
  
  
  }
  
  .menu li a {
    display: block;
    padding-top: 25px;
    padding-left: 40px;
    color: #3E3E3E;
    text-decoration: none;
    font-weight: 600;
    transition: 1s;
  }

  .menu li a:hover {
    display: block;
    padding-top: 25px;
    padding-left: 40px;
    color: #A010A0;
    text-decoration: none;
    font-weight: 600;
    transition: 1s;
  }

  .logochico{
    width: 40px;
    position: absolute;
    margin-top: 10px;
 }

.space{
    height: 70px;

}

.giantbg{
  /* position: sticky;
    top: 0; */
    background-color: transparent;
}

.wrapper{
    /* position: relative; */
    top: 0; 
    padding-left: 125px;
    padding-right: 215px;
    /* padding-top: 25px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
}
.logotitulo{
  width: 500px;
  margin-bottom: 20px;
}

.logofantasma{
    display: none;
}

.titulogrande{
    color:#414141;
    font-size: 2.5em;
    font-weight: 900;
    margin-left: 0px;
    /* margin-top: 60px; */
}
.subtitulogrande{
    color:#AAAAAA;
    font-size: 1.2em;
    font-weight: 500;
    /* margin-top: 60px; */
}

.subtituloprincipal{
  color:#616161;
  font-size:1em;
  font-weight: 300;
  margin-top: 15px;
  text-align: left;
}
.balls1{
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  z-index: -1;
}

.ctninicio{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-self: center;
    flex-wrap: wrap-reverse;
}
.ctninicioizq{
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    flex-direction: column;
}

.fonoprimero{
    width: 200px;
}
.ctnstoreslogos{
    width: 100%;
    display: flex; 
    justify-content: center; 
    margin-top: 30px;
}
.btnInicio{
    background-image: linear-gradient(-180deg, #BF1FBF 0%, #A010A0 100%);
    border-radius: 5px;
    color:#fff;
    font-weight: bold;
    font-size: 15px;
    border:none;
    margin-top: 25px;
    padding: 15px 25px 15px 25px;

}
.imstore1{
    width: 200px;
}
/* QUE ES  */

.wrapperinfo{
    width: 100%;
    height: 100%;
    padding-right: 125px;
    padding-left: 125px;
    padding-top: 55px;
    padding-bottom: 55px;
    background-image: linear-gradient(-270deg, #00ABE6 0%, #0072C9 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}
.izqinfo{
    width: 70%;
    padding-right: 55px;

}
.derinfo{
    width: 30%;
}

.ilu1{
    width:220px;
    -webkit-appearance: none;
}

.wrapperque{
    position: relative;
    width: 100%;
    padding-right: 125px;
    padding-left: 125px;
    padding-top: 55px;
    padding-bottom: 55px;
    background:ghostwhite ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap-reverse;
}
.balls2{
  position: absolute;
  left: 0;
  width: 15%;
}
.izqque{
    width: 30%;
}
.iluquees{
  display: none;
  height: 220px;
}
.derque{
    width: 70%;
    padding-left: 55px;

}
.wrappComoFunca{
    width: 100%;
    height: auto;
    padding-top: 45px;
    padding-bottom: 65px;
    padding-right: 125px;
    padding-left: 125px;
    background:ghostwhite ;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}
.flexi{
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrappComoFuncaizq{
  width: 70%;
  padding-right: 55px;
}
.wrappComoFuncaDer{
  width: 30%;
}
.ilu2{
  width: 90%;
  -webkit-appearance: none;
}
.ctncomofuncadiv{
  width: 100%;

  height: auto;
  margin-top: 140px;
  /* background: #414141; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.card{
  background: #fff;
  border-radius: 12px;
  border: none;
  width: 300px;
  height: auto;
  padding: 15px;
  margin-bottom: 45px;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
}
.iconCard{
  height: 30px;
  margin-bottom: 10px;
}


.wrappCarta{
    width: 100%;
    height: 100%;
    padding-right: 125px;
    padding-left: 125px;
    padding-top: 55px;
    padding-bottom: 55px;
    background-image: linear-gradient(-90deg, #E600CF 0%, #C9006E 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap-reverse;
}

.izqcarta{
  width: 30%;
}
.dercarta{
  width: 70%;
  padding-left: 55px;

}






.wrappAppmozo{
  width: 100%;
  height: 100%;
  padding-right: 125px;
  padding-left: 125px;
  padding-top: 55px;
  padding-bottom: 55px;
  background-color: #fff;
  /* background-image: linear-gradient(-90deg, #745CFF 0%, #323DFD 100%); */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.izqAppmozo{
width: 70%;
}
.derAppmozo{
width: 30%;
padding-left: 55px;

}






.wrappAppcocina{
  width: 100%;
  height: 100%;
  padding-right: 125px;
  padding-left: 125px;
  padding-top: 55px;
  padding-bottom: 55px;
  background-image: linear-gradient(-90deg, #745CFF 0%, #323DFD 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap-reverse;
}

.izqAppcocina{
width: 30%;
}
.derAppcocina{
width: 70%;
padding-left: 55px;

}











.wrappPrice{
    width: 100%;
    height: 100%;
    padding-right: 125px;
    padding-left: 125px;
    /* padding-top: 100px; */
    background:ghostwhite ;
    display: flex;
    justify-content: center;
    
    align-items: center;

}
.priceimg{
    display: block;
    margin: 0 auto;
    margin-top: 35px;
    width: 50%;
}


.wrappercontacto{
    /* position: sticky;
    top: 0; */
    position: relative;
    padding-left: 125px;
    padding-right: 125px;
    background-image: linear-gradient(-90deg, #00ABE6 0%, #0072C9 100%);
    padding-top: 25px;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
   
  }
  
  .ctndivisorcontacto{
    width: 100%;
    height: 100%;
    /* background: #000; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 75px;
  }
  
  .izqcontacto{
    width: 70%;
    height: auto;
    /* background: gray; */
  }
  .dercontacto{
    width: 30%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: honeydew; */
  }
  .ctnform{
    background: rgba(255,255,255,0.55);
    border-radius: 16px;
    padding: 15px;
    margin-bottom:25px;
  }
  .ctnformuno{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  .izqctnform{
    width: 100%;
    /* background: purple; */
    display: flex;
    justify-content: flex-start;
  }
  .derctnform{
    width: 100%;
    /* background: green; */
    display: flex;
    justify-content: flex-end;
  }
  .inputs{
    width: 95%;
    height: 40px;
    border: none;
    background: #fff;
    color: #1F4AA2;
    border-radius: 8px;
    padding-left: 15px;
    font-size: 15px;
    font-weight: bold;
  }
  .inputsmsn{
    width: 100%;
    height: 180px;
    border: none;
    background: #fff;
    color: #1F4AA2;
    border-radius: 8px;
    margin-top: 15px;
    padding-left: 15px;
    padding-top: 15px;
    font-size: 15px;
    font-family: inherit;
    font-weight: bold;
  }
  .btnmsn{
       width: 100%;
    height: 50px;
    border-radius: 8px;
    border: none;
    margin-top: 10px;
    font-size: 25px;
    background: #074AC6;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-appearance: none;
  }
  .logofinal{
    width: 200px;
  }
  
  .footer{
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    height: 70px;
    width: 100%;
    /* height: auto; */
    padding: 15px;
    background: rgba(255,255,255,0.25);
    /* border-top: solid 1px #cacaca; */
    z-index:1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
  }
  .textfooter{
    font-size: 15px;
    font-weight: normal;
    color: #fff;
  }

  .logowhite{
    height: 60%;
  }



@media(max-width: 768px) {

    header{
        /* position: sticky; */
        width: 100%;
        height: 70px;
        font-size: 15px;
        padding: 0px;
        background: rgba(255,255,255,0.90);
      
      
      
      }
      
        header label {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            height: 70px;
            width: 80px;
      
      
        }
      
        .logochico{
          display: none;
      
        }
      
        .menu{
          position: absolute;
          width: 100%;
          margin-top: 20px;
          margin-left: -700%;
          transition: all 0.3s;
          background: rgba(255,255,255,0.90);
          padding-left: 10px;
          padding-bottom: 30px;
        }
      
        .menu ul{
          flex-direction: column;
          margin-left: 10px;
          position: initial;
          z-index: initial;
          bottom: initial;
          right: initial;
      
        }
      

        .menu li a{
            color:#3E3E3E;
            padding-left: 0px;
            
        
          }
      
        #btn-menu:checked ~ .menu{
          margin: 0;
        }
        
        .space{
          width: 100%;
          height: 50px;
        }
        .logogrande{
            display: none;
        }

        .logotitulo{
          width: 50%;
          margin-bottom: 20px;
        }

        .logofantasma{
          display: block;
          margin: 0 auto;
          width: 40%;
          margin-bottom: 50px;
        }

        .wrapper{
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 0px;
            /* background: green; */
            display: flex;
            justify-content: center;
        }
        .titulogrande{
            /* color:#fff; */
            margin-top: 30px;
            font-size: 2em;
            font-weight: 900;
            margin-left: 0px;
            margin-top: 50px;
        }

        .ctninicioizq{
            width: 100%;
           
        }
        .ctninicioder{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .ctnstoreslogos{
            width: 70%;
            display: flex; 
            justify-content: center; 
            margin-top: 30px;
        }
        .fonoprimero{
            width: 100px;
        }
        .imstore1{
            width: calc(100% / 2);
        }

        .wrapperinfo{
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .izqinfo{
            width: 100%;
        }
        .derinfo{
            margin-top:25px;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .ilu1{
          height:220px;
          margin-top: 30px;
          -webkit-appearance: none;
          display: block;
          margin: 0 auto;
      }

        .wrapperque{
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .balls2{
          display: none;
        }
        .izqque{
            width: 100%;
            display: flex;
            justify-content: center;

        }
        .iluquees{
          display: block;
          height: 220px;
          -webkit-appearance: none;
          display: block;
          margin: 0 auto;
        }
        .derque{
            width: 100%;
            padding-left: 0px;
        }

        .wrappComoFunca{
            width: 100%;
            justify-content: flex-start;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .flexi{
          justify-content: flex-start;
        }
        .wrappComoFuncaizq{
          width: 100%;
          padding:0px
        }

        .wrappComoFuncaDer{
          display: none;
        }
        .ctncomofuncadiv{
          width: 100%;
          height: auto;
          margin-top: 30px;
          /* background: #414141; */
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;
        }

        .card{
          background: #fff;
          border-radius: 12px;
          border: none;
          width: 100%;
          height: auto;
          padding: 15px;
          margin-bottom: 35px;
          box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        }


        .wrappCarta{
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 60px;
            padding-bottom: 60px;
        }
        .izqcarta{
          width: 100%;
          margin-top: 40px;
        }
        .ilu2{
          width: 50%;
          margin-top: 50px;
          margin-bottom: 50px;
          display: block;
          margin: 0 auto;
        }
        .dercarta{
          width: 100%;
          padding-left: 0px;
        
        }


        .wrappAppmozo{
          width: 100%;
          padding-left: 15px;
          padding-right: 15px;
          padding-top: 60px;
          padding-bottom: 60px;
      }
      .izqAppmozo{
        width: 100%;
        margin-top: 40px;
      }
      .ilu2{
        width: 50%;
        margin-top: 50px;
        margin-bottom: 50px;
        display: block;
        margin: 0 auto;
      }
      .derAppmozo{
        width: 100%;
        padding-left: 0px;
      
      }









      .wrappAppcocina{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .izqAppcocina{
      width: 100%;
      margin-top: 40px;
    }
    .ilu2{
      width: 50%;
      margin-top: 50px;
      margin-bottom: 50px;
      display: block;
      margin: 0 auto;
    }
    .derAppcocina{
      width: 100%;
      padding-left: 0px;
    
    }














    .wrappAppcocina{
      width: 100%;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 60px;
      padding-bottom: 60px;
  }
  .izqAppcocina{
    width: 100%;
    margin-top: 40px;
  }
  .ilu2{
    width: 50%;
    margin-top: 50px;
    margin-bottom: 50px;
    display: block;
    margin: 0 auto;
  }
  .derAppcocina{
    width: 100%;
    padding-left: 0px;
  
  }








        .wrappercontacto{
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 35px;
            padding-bottom: 35px;
            /* height: auto; */
          }
    
          .ctndivisorcontacto{
            width: 100%;
            height: auto;
            /* background: #000; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 45px;
            margin-top: 15px;
          }
          .izqcontacto{
            width: 100%;
            height: auto;
            /* background: gray; */
          }
          .dercontacto{
            width: 1000%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 25px;;
            /* background: honeydew; */
          }
          .ctnformuno{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* background: red; */
          }
    
          .izqctnform{
            width: 100%;
            /* background: purple; */
            display: flex;
            justify-content: flex-start;
            margin-bottom: 15px;
          }
    
          .derctnform{
            width: 100%;
            /* background: green; */
            display: flex;
            justify-content: flex-start;
          }
          .inputs{
            width: 100%;
            height: 40px;
            border: none;
            background: #fff;
            color: #1F4AA2;
            border-radius: 8px;
            padding-left: 15px;
            font-size: 15px;
          }
          .textfooter{
            font-size: 10px;
            font-weight: normal;
            color: #fff;
          }
          .logowhite{
            height: 40%;
          }

}