body {
      font-family: 'Poppins', sans-serif;
      height: 100%;
      width: 100%;
      margin: 0;
      background: url("../images/fondo2.png") no-repeat fixed;
      background-position: center;
      background-size: cover;
      -ms-background-size: cover;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      /* background-color: transparent; */

}

.container {
      max-width: 1000px;
      text-align: center;
      margin: 0 auto;
      padding: 0 3rem;
}

@media screen and (max-width: 580px) {
      .container {
            padding: 0 2rem;
      }
}

h1, h2, h3 {
      font-weight: 300;
      margin-top: 0px;
      /* margin-bottom: 8px; */
}

h1 {
      font-size: 26px;
      color: #e71924;
      font-weight: 400;

}

h2 {
      font-size: 25px;
      color: grey;
      text-align: center;
}

h3 {
      font-size: 30px;
      font-weight: 400;
      color: #e71924;
      margin: 0;
}
h4 {
      margin: 0;
      font-weight: 400;
      font-size: 30px;
      color: #38a8df;
}
h5{
  margin: 0;
  font-weight: 400;
  font-size: 30px;
  color: #01983a;
}

p {
      /* margin: 20px 0; */
      color: grey;
      line-height: 24px;
      text-align: center;
}


/* button {
      outline: none;
      border: none;
      margin: 18px 0;
      padding: 20px 40px;
      background: #FFD152;
      font-family: Roboto;
      color: #282627;
      letter-spacing: 2px;
      font-weight: 800;
      text-transform: uppercase;
}

i {
      font-size: 42px;
      letter-spacing: 14px;
} */

/* fixed navigation */

/* nav {
      height: 60px;
      width: 100%;
      background-color: #ffffff;
      position: fixed;
      z-index: 1;
}

nav ul {
      padding: 0;
      margin: 0;
      float: right;
      margin-right: 5%;

}

nav li {
      display: inline;

}

nav a {
      display: inline-block;
      width: 100px;
      font-weight: 400;
      text-align: center;
      text-decoration: none;
      padding: 20px 0;
      color: grey;
      transition: 1s;
}

nav a:hover {
      color: #ffffff;
}

nav a#toggle-btn {
      display: inline;
      float: left;
}
nav a#toggle-btn img{
      margin-left: 5%;
} */

/* @media screen and (max-width: 640px){
  html, body{
    background: url("../images/360x640h.png") no-repeat fixed ;
    background-position: center;
    background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-color: transparent; */
  }
  @media screen and (max-width: 823px){
    html, body{
       background: #ffffff !important;
    }
       /* body{
        background: url("../images/360x640v.png") no-repeat fixed;
        background-position: center;
        background-size: cover;
        -ms-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-color: transparent;
      } */
}
/* @media screen and (max-width: 360px){
  html, body{
    background: url("../images/360x640v.png") no-repeat fixed !important;
    background-position: center;
    background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-color: transparent;
  }
} */

@media screen and (max-width: 678px) {


      /* .menu:before, .menu:after {
            content: "";
            display: table;
      }

      .menu:after {
            clear: both;
      }

      .menu {
            zoom: 1;
      } */
}

/* landing-page content */

.section-hero {
      width: 100%;
      height: 100vh;
      margin-bottom: 15%;
      padding: 0;
      overflow-y: hidden;
}

.section-hero .container {
      margin-top: 34vh;
}

.section-hero h2 {
      color: #8D8273;
}
.slick-slider{
  z-index: -1;
}
.slider{
  padding-top: 10vh;
}
.slider p{
  margin: 0;
    padding-top: 1%;
    text-align: left;
}
.slick-slider div.frases{
  display: inline-block;

}

@media screen and (max-width: 580px) {
  .slider{
    padding-top: 0vh;
  }
}
@media screen and (max-width: 580px) {
      .section-hero h2 {
            font-size: 24px;
      }

      .section-hero p {

      }
}

/* mouse */


.mouse {
    display: block;
    margin: 0 auto;
    width: 26px;
    height: 46px;
    border-radius: 13px;
    border: 2px solid #e71924;
    bottom: 40px;
    position: absolute;
    left: 48%;
    bottom: 0%;
    margin-left: -14px;
    z-index: -1;
}
.mouse span {
    display: block;
    margin: 6px auto;
    width: 2px;
    height: 2px;
    border-radius: 4px;
    background:  #e71924;
    border: 1px solid transparent;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name: scroll;
}
@-webkit-keyframes scroll {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@keyframes scroll {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@media screen and (max-width: 768px) {
  .mouse {
      display: none;
      margin: 0 auto;
      width: 26px;
      height: 46px;
      border-radius: 13px;
      border: 2px solid #e71924;
      bottom: 40px;
      position: absolute;
      left: 50%;
      bottom: 5%;
      margin-left: -14px;
  }
}


/* mouse */


/* overview */

#servicios {
      padding: 8rem 0;
      background: #000000;
}

.servicios-content {
      margin-top: 5%;
      display: grid;
      grid-gap: 80px;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
}
.servicios-content h2{
      font-size: 22px;
      font-weight: 400;
}

@media screen and (max-width: 580px) {
      .servicios-content {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(1, 1fr);
            text-align: left;
      }
}

#equipo{
  margin-top: 5%;
  display: flex;
  background-color: #EBEBEB;
  padding: 5% 5%;
}
#equipo h1{
  text-align: left;
  font-size: 13px;
  color: #000000;
  padding-left: 3%;
}
#equipo h1::before{

}
#equipo p{
  text-align: left;
  font-style: italic;
  padding-left: 3%;
  font-size: 18px;
}
@media screen and (max-width: 580px) {
      #equipo {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(1, 1fr);
            text-align: center;
      }
}

/* about section */

#horarios {
  height: 100vh;
      padding-top: 8rem;
      /* background: linear-gradient(-30deg, #00ABFF, #38A8DF) ; */
}

#horarios p {
      font-weight: 500;
      font-size: 18px;
      color: #000000;
      /* margin-bottom: 2em; */
}

.horarios-content {
      margin-top: 10%;
      display: grid;
      grid-gap: 40px;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
}
@media screen and (max-width: 580px) {
      .horarios-content {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(1, 1fr);
            text-align: center  ;
      }
}

/* features */

#contacto div.container{
  height: 100vh;
      /* padding: 18em 0; */
}

.contacto-content {
      margin-top: 10%;
      display: grid;
      grid-gap: 0px;
      grid-template-columns: repeat(1, 1fr);
      text-align: center;
}
.contacto-content p{
  color: #000000;
  font-size: 20px;
}
.contacto-content p a{
  color: #000000;
  text-decoration: none;
  font-size: 20px;
}
@media screen and (max-width: 580px) {
      .contacto-content {
        margin-top: 50%;
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(1, 1fr);
            text-align: center  ;
      }
      .contacto-content img{
        margin-top: 40%;
      }
}

/* subscribe section */

/* #subscribe {
      background: #343233;
      padding: 8em 0;
}

#subscribe h2 {
      color: #8D8273;
}

#subscribe input {
      width: 80%;
      margin: 2em 0;
      background: none;
      border: 1px solid #8D8273;
      padding: 20px;
      font-family: Roboto;
      font-weight: 400;
      color: rgb(211, 165, 100);
}

#subscribe input:focus {
      border: none;
      outline: none;
      border: 2px solid #8D8273;
}

input::placeholder {
      color: #8D8273;
      text-transform: uppercase;
      font-weight: 400;
} */

/* footer */

footer {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      padding: 1em 0;
}


div a i{
  text-align: center;
  /* position: static; */
  padding-left: 0%;
  /* padding-top: 10%; */
}
/* @media screen and (max-width: 361px) {
  .fa-instagram{
    position: absolute;
    bottom: -600%;
    left: 48%;
  }
}
@media screen and (max-width: 580px) {
  .fa-instagram{
    position: absolute;
    bottom: -350%;
    left: 48%;
  }
}
@media screen and (max-width: 768px) and (min-width: 581px) {
  .fa-instagram{
    position: absolute;
    bottom: -250%;
    left: 48%;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .fa-instagram{
    position: absolute;
    bottom: -290%;
    left: 48%;
  }
} */

/* slider */

.slider {
     width: 100%;
     position: absolute;
     top: 54%;
     transform: translateY(-50%);
}

.slick-slide:focus {
     outline: none;
}

@media screen and (max-width: 678px){

  .slick-slide img{
    width: 70% !important;
    /* margin-right: 2%; */
  }
  .slick-slide h3, h4, h5{
    font-size: 28px;
    font-weight: 400;
  }
}
.slick-slide img{
     width: 40%;
}

.slick-slide {
     transition: all ease-in-out 1s;
     opacity: .2;
}

.slick-active {
     opacity: .2;
}

.slick-current {
     opacity: 1;
}

/* slider */


/* intro */

.overlay {
      z-index: 2;
      position: absolute;
      width: 100%;
      height: 100vh;
      background: #fff;
      /* top: -110% !important;   */
}

.overlay img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      font-weight: bolder;
      letter-spacing: 12px;
}
.overlay h1{
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 8px;
  text-align: center;
}

/* intro */


/* text animation */

/* .rev-block {
     position: absolute;
}

.rev-block span {
     opacity: 0;
     animation: appear-text 0.0001s linear forwards;
     animation-delay: 3s;
}

.rev-block:after {
     content: '';
     top: 0;
     left: 0;
     position: absolute;
     width: 0%;
     height: 100%;
     background: #e71924;
     animation: rev-block 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
     animation-delay: 2s;
}

@keyframes rev-block {

     0% {
          left: 0;
          width: 0%;
     }
     50% {
          left: 0;
          width: 100%;
     }
     100% {
          left: 100%;
          width: 0%;
     }

}

@keyframes appear-text {

     0% {
          opacity: 0;
     }
     100% {
          opacity: 1;
     }

}

#onemore {
     top: 70%;
     left: 0%;
}

#onemore span {
     animation-delay: 2s;
}

#onemore.rev-block:after {
     background: #38a8df;
     animation-delay: 1.4s;
}

@media only screen and (max-width: 900px) {
     h1 {
          font-size: 20px;
          padding: 0.4em;
     }
} */





/* menu */



.menu-overlay {
      position: fixed;
      width: 100%;
      height: 100vh;
}

.block {
      position: fixed;
      width: 0%;
      height: 100vh;
      background-color: #fff;
}

.b1 {
      left: 0;
}

.b2 {
      left: 25%;
}

.b3 {
      left: 50%;
}

.b4 {
      left: 75%;
}

.strip {
      position: absolute;
      width: 1px;
      height: 100vh;
}

.one {
      left: 25%;
}

.two {
      left: 50%;
}

.three {
      left: 75%;
}


ul {
      margin: 0;
      padding: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      list-style: none;
}

li {
      padding: 12px 0;
      color: #e71924;
      font-size: 25px;
      font-weight: 500;
}
li a{
  text-decoration: none;
  color: #e71924;
}

.menu-btn {
      z-index: 2;
      position: fixed;
      right: 0;
      margin: 2em;
}

.menu-btn i {
      padding: 1.2em;
      color: #fff;
      background: #e71924;
      border-radius: 50%;

}

.logo{
  z-index: 2;
  position: fixed;
}
/* menu */

/* social */

.social {
  margin-top: 10%;
  position: sticky;
  width: 100%;
  top: -100%;
  left: 0%;
  text-align: center;
  transform: translateY(-50%);
}

.social .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  /* border: 2px dashed white; */
  background-clip: content-box;
  padding: 10px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 50px;
}

.social .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social .link:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

.social .link.instagram {
  /* background-color: #e71924; */
  color: #CECECE;
}

/* @media screen and (max-width: 678px){

  .social {
    position: absolute;
    top: 500%;
    left: 0%;
  }
} */


/* social */
