@font-face {

  font-family: AvenirBook;

  src: url(font/AvenirLTStd-Book.otf);

}



@font-face {

  font-family: AvenirBlack;

  src: url(font/Avenir-Black.ttf);

}



body {

  background: url(../img/salones/back.png) no-repeat center center fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}



.top {

  background-image: url(../img/salones/top.png);

  background-repeat: no-repeat;

  background-size: 70% 100%;

  background-position: center;

  height: 100vh;

  padding-top: 0;

  padding-bottom: 0;

  overflow: hidden;

}



.logo-reylaz {

  margin-top: 1rem;

  width: 36%;

}



.slide-item {

  margin-top: .5rem;

  width: 85%;

  height: 8rem;

  margin-left: 3rem

}



.prev {

  margin-left: 2.5rem

}



.tel-salones {

  margin-top: -1.5rem;

  margin-left: -.5rem

}



.img-video {

  padding-left: 4rem;

  width: 320px;

  height: 50%;

  float: left;

}



a:hover {

  -webkit-animation: pulse 1s;

  animation: pulse 1s;

}



.hover-image:hover {

  -webkit-animation: pulse 1s;

  animation: pulse 1s;

}



.container-encabezado {

  float: right;

  margin-top: 2.7rem;

  margin-right: 4rem;

}



.title-encabezado {

  font-family: AvenirBlack;

  font-size: 11px;

  color: #dc238b;

  margin-bottom: 1.3rem

}



.list-encabezado {

  list-style: none;

  color: #6d0474;

  font-size: 13px;

  font-family: AvenirBook;

  margin-left: -2.5rem;

  margin-top: -.8rem

}



.list-bullet {

  font-size: 12px

}



ul li {

  margin-bottom: .4rem

}



.new-item {

  display: flex;

  margin-bottom: -1rem

}



.div-beneficios-two {

  margin-top: -2rem

}



.beneficios {

  margin-top: 3rem

}



.title-beneficios {

  color: #32d6c9;

  font-family: AvenirBlack;

  font-weight: bold;

  font-size: 19px;

}



.list-beneficios {

  list-style: none;

  color: #fff;

  font-family: AvenirBook;

  margin-left: -2.5rem;

}



.text {

  display: -webkit-inline-box;

  font-size: 14px

}



.list-bullet-beneficios {

  color: #fff;

  font-size: 12px

}



.conoce {

  font-family: AvenirBook;

  font-size: 11px;

  color: #fff;

  display: list-item;

  margin-top: -1.7rem;

  margin-left: 1rem

}



.container-form {

  background: #34adf6;

  height: auto;

  margin-top: 3rem;

  margin-left: -1rem;

  padding: 1rem;

  -webkit-box-shadow: 10px 10px 16px -1px rgba(0, 0, 0, 0.53);

  -moz-box-shadow: 10px 10px 16px -1px rgba(0, 0, 0, 0.53);

  box-shadow: 10px 10px 16px -1px rgba(0, 0, 0, 0.53);

}



.segundo-container-form {

  width: auto;

  height: auto;

}



.title-formulario {

  background-image: url(../img/salones/descuento_salones.png);

  background-repeat: no-repeat;

  background-size: 100% 100%;

  background-position: center;

  width: 14rem;

  height: 3rem;

  position: absolute;

  margin-top: -3.8rem

}



.formulario-group {

  margin-bottom: .2rem;

}



.requerido {

  font-size: 10px;

  font-family: AvenirBook;

  text-align: right;

  margin-top: 1rem;

  line-height: .1rem

}



label {

  line-height: .1rem

}



.formulario {

  margin-top: -.6rem;

  font-size: 12px;

  font-family: AvenirBook;

  letter-spacing: 1px;

}



.formulario-control {

  display: block;

  width: 100%;

  padding: .25rem .5rem;

  font-size: .575rem;

  line-height: .1;

  color: #495057;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ced4da;

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}



.formulario-control-textarea {

  display: block;

  padding: .25rem .325rem;

  height: 5rem;

  width: 100%;

  font-size: .575rem;

  line-height: 1;

  color: #495057;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ced4da;

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}



.enviar {

  margin-top: .5rem;

  display: -webkit-inline-box;

}



.btn-form {

  display: inline-block;

  cursor: pointer;

  font-weight: bold;

  width: 5rem;

  color: #fff;

  text-align: center;

  white-space: nowrap;

  vertical-align: middle;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  border: 1px solid transparent;

  font-size: 1rem;

  line-height: 1.5;

  background-color: #93298e;

  font-family: AvenirBook;

}



.aviso-privacidad {

  font-family: AvenirBook;

  margin-left: 1rem;

  font-size: 9px;

  color: #3e3e3e

}



@media screen and (max-width: 768px) {

  body {

    background: none;

  }

  .top {

    background-image: none;

    height: 100vh;

    padding-top: 0;

    padding-bottom: 0;

    overflow: scroll;

    overflow-x: hidden;

  }

  .top-movil {

    background-image: url(../img/salones/top-movil.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    background-position: center;

    height: 23rem

  }

  .body-movil {

    background-image: url(../img/salones/body-movil.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    background-position: center

  }

  .logo-reylaz {

    width: 45%;

  }

  .slide-item {

    margin-top: .5rem;

    width: 95%;

    height: 10rem;

    margin-left: .5rem

  }

  .prev {

    margin-left: 0rem

  }

  .tel-salones {

    float: none;

    margin-top: 1rem;

    margin-left: 4rem;

  }

  .title-encabezado {

    font-family: AvenirBlack;

    font-size: 12px;

    text-align: left;

    margin-left: 2rem;

    color: rgb(255, 252, 0);

    margin-bottom: 1.3rem;

  }

  .list-encabezado {

    text-align: left;

    color: #fff;

    font-size: 14px;

    margin-left: -.5rem;

    margin-top: 1rem

  }

  .ben-form {

    background-image: url(../img/salones/body-movil.png);

    background-repeat: no-repeat;

    background-size: 100% 100%;

    background-position: center;

    margin-top: -2rem

  }

  .beneficios {

    margin-left: 0rem

  }

  .title-beneficios {

    text-align: center

  }

  .container-form {

    width: 100%;

    margin-top: 5rem;

    margin-left: 0rem;

    padding: 1rem;

  }

  .conoce {

    font-size: 12px

  }

  .title-formulario {

    width: 16.5rem;

  }

  .formulario-control {

    padding: .45rem .5rem;

    font-size: .575rem;

  }

  .formulario-control-textarea {

    width: 100%

  }

  .aviso-privacidad {

    font-size: 12px;

  }

}



@media screen and (min-width: 1400px) {

  .title-encabezado {

    font-size: 14px

  }

  .list-encabezado {

    font-size: 14px

  }

  .tel-salones {

    margin-top: 1rem

  }

  .ben-form {

    margin-top: 6rem

  }

}