ffffff/* NUBES ANIMACION */
@keyframes nubes
{
    0%{
      transform:translateY(-2.5%);
      -ms-transform:translateY(-2.5%);
      -webkit-transform:translateY(-2.5%)
    }
    50%{
      transform:translateY(0);
      -ms-transform:translateY(0);
      -webkit-transform:translateY(0)
    }
    100%{
      transform:translateY(-2.5%);
      -ms-transform:translateY(-2.5%);
      -webkit-transform:translateY(-2.5%)
    }
}

@-webkit-keyframes nubes /* Safari and Chrome - necessary duplicate */
{
  0%{
    transform:translateY(-2.5%);
    -ms-transform:translateY(-2.5%);
    -webkit-transform:translateY(-2.5%)
  }
  50%{
    transform:translateY(0);
    -ms-transform:translateY(0);
    -webkit-transform:translateY(0)
  }
  100%{
    transform:translateY(-2.5%);
    -ms-transform:translateY(-2.5%);
    -webkit-transform:translateY(-2.5%)
  }
}
/*  */

/* INTRO */
#intro {
    width: 100%;
    height: auto;
    padding: 0 0 0 0;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    background-color: #ffffff;
    transform: all .3s ease;
}
#intro .introHeader {
    width: 100%;
    height: auto;
    padding: 140px 0 0 0;
    position: relative;
}

#intro .introTitle {
    width: 100%;
    height: auto;
    padding: 50px 15% 0 15%;
    position: relative;
    text-align: left;
}
#intro .introTitle h2 {
    font-family: 'Bebas Neue';
    font-weight: normal;
    font-style: normal;
    font-size: 100px;
    color: #fdd1d7;
    text-transform: uppercase;
    padding: 0 45% 0 0!important;
    margin: 0 0 0 0!important;
}
#intro .introTitle h2 span {
  color: #9ae3e6;
}

#intro .introImage {
  width: 100%;
  height: auto;
  padding: 0 0 0 0;
  text-align: right;
  line-height: 0;
  position: relative;
  bottom: -50px;
  z-index: 5;
}
#intro .introImage img.tiendaMano {
  max-width: 100%;
  height: auto;
}
#intro .introImage img.porcentaje {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: -150px;
  right: 20%;
  animation:nubes 2.5s ease-in-out infinite;
  /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: nubes 2.5s ease-in-out infinite; /* Chrome and Safari */
}

#intro .introFooter {
  width: 100%;
  height: auto;
  background: #ffe8e9;
  background-color: #ffe8e9;
  padding: 150px 16% 150px 16%;
  text-align: center;
  line-height: 0;
  position: relative;
}
#intro .introFooter h3 {
  font-family: 'Epilogue';
  font-weight: bold;
  font-style: normal;
  font-size: 33px;
  color: #ffffff;
  text-transform: uppercase;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
}
#intro .introFooter h3 span {
  color: #9ae3e6;
}
/*  */

/* FORMULARIO CONTACTO */
#contacto {
  width: 100%;
  height: auto;
  padding: 100px 0 100px 0;
  position: relative;
  overflow: hidden;
}
#contacto::before {
  content: '';
  width: 60%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: #9ae3e6;
  background-color: #9ae3e6;
}

#contacto .row,
#contacto .row .col {
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  position: relative;
  z-index: 5;
}

#contacto .contactoForm {
  width: 100%;
  height: auto;
  padding: 25px 15% 50px 15%;
}
#contacto .contactoForm .formContent {
  width: 100%;
  height: auto;
  padding: 0 5% 50px 0;
  text-align: left;
}
#contacto .contactoForm .formContent p,
#contacto .contactoForm .formContent p label {
  font-family: 'Epilogue'!important;
  font-weight: normal!important;
  font-style: normal!important;
  font-size: 20px!important;
  color: #ffffff!important;
}
#contacto .contactoForm .formContent p span {
    color: #fedfe0;
    font-weight: 500;
}

#contacto .contactoForm .formContent [type="radio"]+label:before,
#contacto .contactoForm .formContent [type="radio"]+label:after {
  width: 22px;
  height: 22px;
  border-radius: 0!important;
  top: -5px;
}
#contacto .contactoForm .formContent [type="radio"]:not(:checked)+label,
#contacto .contactoForm .formContent [type="radio"]:checked+label {
  padding-left: 75px;
}
#contacto .contactoForm .formContent [type="radio"]:checked+label:after,
#contacto .contactoForm .formContent [type="radio"].with-gap:checked+label:before {
  border: 2px solid #e8e0e1;
  background: #e8e0e1;
  background-color: #e8e0e1;
}
#contacto .contactoForm .formContent [type="radio"].with-gap:checked+label:after {
  border: 2px solid #ffffff;
  background: #ffffff;
  background-color: #ffffff;
}
#contacto .contactoForm .formContent [type="radio"]:not(:checked)+label:before,
#contacto .contactoForm .formContent [type="radio"]:not(:checked)+label:after {
  border: 2px solid #e8e0e1;
  background: #e8e0e1;
  background-color: #e8e0e1;
  box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -webkit-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -moz-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
}

#contacto .contactoForm .formContent input[type='text']:not(.browser-default),
#contacto .contactoForm .formContent input[type='email']:not(.browser-default) {
  width: 70%;
  height: 40px;
  background: #ffffff;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -webkit-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -moz-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  border-radius: 8px;
  margin: 0px 0px 1px 0;
  border: none!important;
  font-family: 'Epilogue';
  font-weight: 500;
  font-style: normal;
  color: #9be7ea;
  transition: all .3s ease;
}

#contacto .contactoForm .formContent select.browser-default {
  width: 70%;
  height: 40px;
  border: none!important;
  font-family: 'Epilogue';
  font-weight: 500;
  font-style: normal;
  background: #9be7ea;
  background-color: #9be7ea;
  color: #ffffff;
  box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -webkit-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -moz-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  border-radius: 8px;
  transition: all .3s ease;
}

#contacto .contactoForm .formContent textarea.materialize-textarea {
  width: 70%!important;
  height: 10rem!important;
  background: #ffffff;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -webkit-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  -moz-box-shadow: 0px 0px 5px 2px rgba(152,213,218,0.5);
  border-radius: 8px;
  margin: 0px 0px 1px 0;
  border: none!important;
  font-family: 'Epilogue';
  font-weight: 500;
  font-style: normal;
  color: #9be7ea;
  resize: none;
  transition: all .3s ease;
}

#contacto .contactoForm .formContent input:focus {
  background: #ffffff;
  background-color: #ffffff;
  color: #9be7ea;
}

#contacto .contactoForm .formContent input[type='text']:not(.browser-default):focus:not([readonly]),
#contacto .contactoForm .formContent input[type='email']:not(.browser-default):focus:not([readonly]),
#contacto .contactoForm .formContent textarea.materialize-textarea:focus {
  background: #ffffff;
  background-color: #ffffff;
  color: #9be7ea;
  padding: 0 0 0 25px;
  border: none!important;
}

#contacto .contactoForm .formContent input.valid:not([type]),
#contacto .contactoForm .formContent input.valid:not([type]):focus,
#contacto .contactoForm .formContent input[type='text'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='text'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='password'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='password'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='email'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='email'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='url'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='url'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='time'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='time'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='date'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='date'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='datetime'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='datetime'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='datetime-local'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='datetime-local'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='tel'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='tel'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='number'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='number'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent input[type='search'].valid:not(.browser-default),
#contacto .contactoForm .formContent input[type='search'].valid:not(.browser-default):focus,
#contacto .contactoForm .formContent textarea.materialize-textarea.valid,
#contacto .contactoForm .formContent textarea.materialize-textarea.valid:focus,
#contacto .contactoForm .formContent textarea.materialize-textarea:focus:not([readonly]),
#contacto .contactoForm .formContent .select-wrapper.valid > input.select-dropdown {
  background: #ffffff;
  background-color: #ffffff;
  color: #9be7ea;
  padding: 0 0 0 25px;
  border: none!important;
}

#contacto .contactoForm .formFooter {
  width: 100%;
  height: auto;
  padding: 50px 15% 0 15%;
  text-align: center;
}
#contacto .contactoForm .formFooter button.btnCuestionario {
    font-family: 'Epilogue';
    font-weight: 600;
    font-style: normal;
    position: relative;
    border-radius: 50px;
    background: #ecc9df;
    background-color: #ecc9df;
    text-transform: none!important;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(252,238,240,0.5);
    -moz-box-shadow: 10px 10px 5px 0px rgba(252,238,240,0.5);
    box-shadow: 10px 10px 5px 0px rgba(252,238,240,0.5);
    transform: scale(1.2);
    transition: all .3s ease;
}
#contacto .contactoForm .formFooter button.btnCuestionario:hover,
#contacto .contactoForm .formFooter button.btnCuestionario:focus,
#contacto .contactoForm .formFooter button.btnCuestionario:active {
    background: #f9c8cc;
    background-color: #f9c8cc;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(244,157,167,0.25);
    -moz-box-shadow: 10px 10px 5px 0px rgba(244,157,167,0.25);
    box-shadow: 10px 10px 5px 0px rgba(244,157,167,0.25);
    transform: scale(1.8);
}

#contacto .contactoForm .error {
  font-family: 'Epilogue'!important;
  font-weight: 500!important;
  font-style: normal!important;
  font-size: 20px!important;
  color: red!important;
}

#contacto .contactoTitle01 {
  width: 100%;
  height: auto;
  padding: 25px 15% 100px 15%;
  text-align: center;
}
#contacto .contactoTitle01 h2 {
    font-family: 'Bebas Neue';
    font-weight: normal;
    font-style: normal;
    font-size: 100px;
    color: #9ae3e6;
    text-transform: uppercase;
    padding: 0 0 0 0!important;
    margin: 0 0 0 0!important;
}
#contacto .contactoTitle01 h2 span {
  color: #fdd1d7;
}

#contacto .contactoBilletera {
  width: 100%;
  height: auto;
  padding: 25px 15% 0 15%;
  text-align: center;
}
#contacto .contactoBilletera img.billetera,
#contacto .contactoBilletera img.sombra {
  max-width: 100%;
  height: auto;
}

#contacto .contactoBilletera img.billetera {
  animation:nubes 3s ease-in-out infinite;
  /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: nubes 3s ease-in-out infinite; /* Chrome and Safari */
}

#contacto .contactoMas {
  width: 100%;
  height: auto;
  padding: 50px 15% 0 15%;
  text-align: center;
}
#contacto .contactoMas a.btnMas {
    font-family: 'Epilogue';
    font-weight: 600;
    font-style: normal;
    position: relative;
    border-radius: 50px;
    background: #9ae3e6;
    background-color: #9ae3e6;
    text-transform: none!important;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(154,227,230,0.35);
    -moz-box-shadow: 10px 10px 5px 0px rgba(154,227,230,0.35);
    box-shadow: 10px 10px 5px 0px rgba(154,227,230,0.35);
    transition: all .3s ease;
}
#contacto .contactoMas a.btnMas:hover,
#contacto .contactoMas a.btnMas:focus,
#contacto .contactoMas a.btnMas:active {
    background: #ecc9df;
    background-color: #ecc9df;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(252,238,240,1);
    -moz-box-shadow: 10px 10px 5px 0px rgba(252,238,240,1);
    box-shadow: 10px 10px 5px 0px rgba(252,238,240,1);
    transform: scale(1.5);
}

#contacto .contactoTitle02 {
  width: 100%;
  height: auto;
  padding: 100px 15% 100px 15%;
  text-align: center;
}
#contacto .contactoTitle02 h2 {
    font-family: 'Bebas Neue';
    font-weight: normal;
    font-style: normal;
    font-size: 90px;
    color: #fdd1d7;
    text-transform: uppercase;
    padding: 0 0 0 0!important;
    margin: 0 0 0 0!important;
}
#contacto .contactoTitle02 h2 span {
  color: #9ae3e6;
}

#contacto .contactoNave {
  width: 100%;
  height: auto;
  padding: 25px 15% 0 15%;
  text-align: center;
}
#contacto .contactoNave img.nave,
#contacto .contactoNave img.sombra {
  max-width: 100%;
  height: auto;
}

#contacto .contactoNave img.nave {
  animation:nubes 3s ease-in-out infinite;
  /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: nubes 3s ease-in-out infinite; /* Chrome and Safari */
}
/*  */

/* LAST SECTION */
#franquiciasFooter {
  width: 100%;
  height: auto;
  padding: 0 0 0 0;
  line-height: 0;
  position: relative;
  overflow: hidden;
}
#franquiciasFooter img {
  max-width: 100%;
  height: auto;
}
/*  */

/* PREFOOTER */
.pinkBg {
  background: #ffe8e9!important;
  background-color: #ffe8e9!important;
  padding: 100px 15% 100px 15%!important;
}
.pinkBg h2 {
  color: #ffffff!important;
}
.pinkBg h2 span {
  color: #9ae3e6!important;
}
/*  */