/* HEAD-INTRO */

[data-slides] {
  background: url(../imgs/index/Punta-Monterrey-01.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

/*
When hero is not full height use
this code to size ir on 800px and
change the class is-fullheight for
is-large in the HTML Head-Intro section

@media screen and (min-width: 769px), print {
  .hero.is-large .hero-body {
    padding-bottom: 23rem;
    padding-top: 24rem;
  }
}

@media (max-width: 768px) {
  .bg-index-intro .hero-body {
    padding: 11rem 1.5rem;
  }
}
*/

.center
{
  position: absolute;
  margin: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
  bottom: 50px;
}

/*
span
{
  display: block;
  width: 10px;
  height: 10px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);

  border-right: 2px solid white;
  border-bottom: 2px solid white;
  margin: 0 0 2px 6px;
}
*/

.one
{
  margin-top: 4px;
}

.one, .two, .three
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
}

.one
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
}

.two
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
}

.three
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
}

.mouse
{
  height: 30px;
  width: 21px;
  border-radius: 10px;
  transform: none;
  border: 2px solid white;
  top: 170px;
}

.wheel
{
  height: 5px;
  width: 4px;
  display: block;
  margin: 6px auto;
  background: white;
  position: relative;
}

.wheel
{
  -webkit-animation: mouse-wheel 1.2s ease infinite;
  -moz-animation: mouse-wheel 1.2s ease infinite;
}

@-webkit-keyframes mouse-wheel
{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel
{
  0% { top: 1px; }
  50% { top: 2px; }
  100% { top: 3px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

/* CABINS HOME */

.columns.is-gapless.cabins-index {
    margin-bottom: 0;
}

@media(max-width: 768px) {
  .custom-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

.our-rooms {
  background-color: var(--grey-01);
}

.cabins-intro {
  padding: 4rem 5rem 2rem 5rem;
}

@media(max-width: 1112px) {
  .cabins-intro {
    padding: 2rem;
  }

  .cabins-intro .body-txt {
    font-size: .9rem;
    margin-bottom: 1.2rem;
  }
}

.cabins-icon {
  margin-bottom: 1.5rem;
}

@media(max-width: 1112px) {
  .cabins-icon {
    margin-bottom: .2rem;
  }
}

.deluxe-cabins {
  background-color: var(--grey-05);
}

.rustic-cabins {
  background-color: var(--grey-02);
}

.bungalows {
  background-color: var(--orange);
}

.deluxe-bg {
  background: url(../imgs/rooms/deluxe/caracol-bg.svg) no-repeat;
  color: #fff;
}

.rustic-bg {
  background: url(../imgs/rooms/rustic/estrella-bg.svg) no-repeat;
}

.bubgalows-bg {
  background: url(../imgs/rooms/bungalows/pez-bg.svg) no-repeat;
}

.img-cabin-deluxe, .img-cabin-rustic {
  margin-bottom: -7px;
}

.img-bungalow {
  margin-bottom: -6px;
}

/* PRIVATE EVENTS */

.private-events {
  background-color: var(--grey-01);
}

.weddings-index, .yoga-index, .celebrations-index {
    padding: 2rem 0 3rem 0;
    color: #fff;
}

.weddings-icon, .yoga-icon, .celebrations-icon {
  margin-bottom: -.5rem;
}

.weddings-index {
  background-color: #707070;
}

.yoga-index {
  background-color: var(--grey-07);
}

.celebrations-index {
  background-color: var(--grey-08);
}

.img-event {
  margin-bottom: -7px;
}

/* TESTIMONIALS */

.testimonials-intro,.testimonials {
  background-color: var(--grey-01);
}

.testimonials-bg {
  width: 90%;
  max-width: 1280px;
  padding: 4rem 0;
  height: auto;
  margin: auto;
  background-color: var(--grey-03);
}

@media(max-width: 768px) {
  .testimonials-bg {
    width: 100%;
  }
}

.testimonial {
  padding: 0 15px
}

.testimonial-content {
  padding: 3rem 2rem 5rem 2rem;
  background: url(../imgs/index/testimonial-bg.svg) no-repeat;
  background-color: var(--grey-04);
}

.testimonial-txt {
  margin-bottom: 2rem;
}

.testimonial-img {
    margin-top: -60px;
}

@media (min-width: 320px) {
  .testimonial-img {
    margin-left: 16%;
  }
}

@media (min-width: 375px) {
  .testimonial-img {
    margin-left: 22%;
  }
}

@media (min-width: 414px) {
  .testimonial-img {
    margin-left: 24%;
  }
}

@media (min-width: 1024px) {
  .testimonial-img {
    margin-left: 30%;
  }
}

@media (min-width: 1112px) {
  .testimonial-img {
    margin-left: 23%;
  }
}

@media (min-width: 1366px) {
  .testimonial-img {
    margin-left: 27%;
  }
}

.testimonial-img img {
  border-radius: 50%;
  border: solid 6px #fff;
}

.responsive {
  width: 90%;
  margin: auto;
}

@media(max-width: 414px) {
  .responsive {
    width: 80%;
  }
}

.slick-prev, .slick-next {
  width: 21px;
  height: 77px;
  background: no-repeat center center;
}

.slick-prev {
  background: url(../imgs/index/testimonial-arrow-L.svg);
}

.slick-next {
  background: url(../imgs/index/testimonial-arrow-R.svg);
}

.slick-prev:hover {
  background: url(../imgs/index/testimonial-arrow-L-hover.svg);
}

.slick-next:hover {
  background: url(../imgs/index/testimonial-arrow-R-hover.svg);
}

.slick-prev:before, .slick-next:before {
  font-size: 0;
  line-height: 0;
  opacity: none;
  color: none;
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  font-size: 0;
  line-height: 0;
  opacity: none;
  color: none;
}

/* CONTACT */

.contact-section {
  background-color: var(--grey-01);
}

.contact {
  border: solid 4px var(--grey-04);
  padding: 30px 0px;
}

.contact p {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

.contact img {
  margin-bottom: .5rem;
}