
/* FONTS
Listas fuentes para uso
--- */

/*

font-family: futura-pt, sans-serif;
500

font-family: futura-pt-bold, sans-serif;
700

font-family: oswald, sans-serif;
500
600
700


*/

/* Colors */
:root {
  --main-color: #E0B45C;
  --white: #ffffff;
  --black: #000000;
  --blue: #1A5B67;
}

/* @group SHARED STRUCTURES AND STYLES
------------------------------------ */
html,
body { overflow-x: hidden; }
#wrapper { width: 100%; }
a, button { cursor: pointer;
    -webkit-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -webkit-transform 0.3s linear;
    -moz-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -moz-transform 0.3s linear;
    -ms-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
    -o-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
    transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
}
.video-box,
.img-box { overflow: hidden; position: relative; }
.img-box > img { object-fit: cover; object-position: center center; height: 100%; width: 100%!important; }
.img-box video { object-fit: cover; object-position: center center; height: 100%; width: 100%!important; }
@supports(object-fit: cover) {
  .img-box > img { height: 100%!important; }
}
/* General Text
----------------------*/
h1, h2, h3 {
  font-family: 'Oswald';
  font-weight: 500;
  text-transform: uppercase;
}
h1 {
  color: #fff;
}
p {
  font-family: 'DM Sans',sans-serif;
  font-weight: 500;
  letter-spacing: normal;
}
input,
input:focus,
input:active,
select,
select:focus,
select:active,
textarea {
    font-size: .8em;
    font-weight: 400;
    width: 100%;
    outline: none;
    padding: 0px .8rem;
    height: 3.6rem;
    border: .1rem solid #D5D8DE;
    text-align: left;
}
form button { display: inline-block; font: 400 1.6em / 1.5em 'DM Sans',sans-serif; }
option { background: #979797; }
form label { font: 500 1.8em / 1.5em 'DM Sans',sans-serif; text-align: left; }
.wpcf7-not-valid-tip { display: none!important; }
.wpcf7-not-valid { background: rgba(220,50,50,.58)!important; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { width: 100%; font: 400 1.6em / 1.5em 'DM Sans',sans-serif;
 padding: 1rem 1rem; }
@media only screen
and (min-width : 961px) {
  h1 {
    font-size: 8.6rem;
    line-height: 1em;
    margin-bottom: 3rem;
  }
  h2 {
    font-size: 4.5rem;
    line-height: 1.11em;
    letter-spacing: normal;
  }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  h1 {
    font-size: 5rem;
    line-height: 1em;
    margin-bottom: 2rem;
  }
  h2 {
    font-size: 3.8rem;
    line-height: 1em;
    letter-spacing: normal;
  }
}

/* @end */

/* --- */



/* @group Grales
------------------------------------ */


/* Bttns
---------------------------------------- */
.bttn {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.6rem;
  line-height: 1.5em;
  letter-spacing: .06em;
}
.bttn__text {
  position: relative;
  z-index: 2;
}
.bttn::before {
  content: "";
  position: absolute;
  border-width: .2rem;
  border-style: solid;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%,-50%,0) skew(-10deg);
          transform: translate3d(-50%,-50%,0) skew(-10deg);
  display: inline-block;
  height: 100%;
  width: 100%;
  z-index: 1;
  -webkit-transition: background-color .7s;
  -o-transition: background-color .7s;
  transition: background-color .7s;
}
.bttn i {
  position: relative;
  z-index: 2;
  top: 0.05rem;
  font-size: 1.4rem;
}

/* Colors */
.bttn--yellow {
  color: var(--black);
}
.bttn--yellow::before {
  background-color: #FCC643;
  border-color: #FCC643;
}
.bttn--yellow:hover {
  color: var(--main-color);
}
.bttn--yellow:hover::before{
  background-color: transparent;
  border-color: var(--main-color);
}

.bttn--black {
  color: #E1AA5A;
}
.bttn--black::before {
  background-color: var(--black);
  border-color: var(--black);
}
.bttn--black:hover {
  color: var(--black);
}
.bttn--black:hover::before {
  background-color: transparent;
  border-color: #000;
}

.bttn--white {
  color: var(--blue);
}
.bttn--white::before {
  background-color: var(--white);
    border-color: var(--white);
}
.bttn--white:hover {
  color: var(--white);
}
.bttn--white:hover::before {
  background-color: transparent;
  border-color: var(--white);
}
.bttn--white:hover i {
  color: var(--white);
}

.bttn--tpt-yellow {
  background-color: transparent;
  color: var(--black);
}
.bttn--tpt-yellow::before {
  border-color: #FBC944;
}
.bttn--tpt-yellow:hover {
  color: #FBC944;
}
.bttn--tpt-yellow:hover::before {
  border-color: var(--black);
  background-color: var(--black);
}

.bttn--tpt-white {
  color: var(--white);
}
.bttn--tpt-white::before {
  background-color: transparent;
    border-color: var(--white);
}
.bttn--tpt-white:hover::before {
  background-color: var(--black);
  border-color: var(--black);
}

.bttn--tpt-blue {
  color: #1A5B67;
}
.bttn--tpt-blue:hover {
  color: #fff;
}
.bttn--tpt-blue::before {
  background-color: transparent;
  border-color: #1A5B67;
}
.bttn--tpt-blue:hover::before {
  background-color: #1A5B67;
  border-color: #1A5B67;
}

@media only screen and (max-width : 960px) {
  .bttn i {
    font-size: 1.285rem;
  }
}

/* Slick DOTS
---------------------------------------- */



.circles-dots .slick-dots {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.circles-dots .slick-dots li {
  position: relative;
  overflow: hidden;
}
.circles-dots .slick-dots button {
  position: relative;
  z-index: 2;
  background-color: #175C64;
  border-radius: 50%;
  overflow: hidden;
  color: #175C64;
  font-size: 0;
  display: list-item;
}
.circles-dots .slick-dots li.slick-active button {
  background-color: transparent;
  background-image: url('../img/layout/main-hero/slider-active.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.circles-dots .slick-dots {
  bottom: 3.6rem;
  height: 3.4rem;
  border-radius: 1.7rem;
  padding: 0 .86rem;
}
.circles-dots .slick-dots>li {
  margin: 0 .75rem;
}
.circles-dots .slick-dots>li.slick-active {
  margin: 0 .24385rem;
}
.circles-dots .slick-dots>li {
  height: .833rem;
}
.circles-dots .slick-dots button {
  width: .833rem;
  height: .833rem;
}
.circles-dots .slick-dots>li.slick-active {
  height: 1.41rem;
}
.circles-dots .slick-dots li.slick-active button {
  width: 1.41rem;
  height: 1.41rem;
}

/* Slick Arrows
---------------------------------------- */
.slick-arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slick-prev {
  -webkit-transform: translateY(-50%) scaleX(-1);
      -ms-transform: translateY(-50%) scaleX(-1);
          transform: translateY(-50%) scaleX(-1);
}
.slick-prev {
  margin-top: 0;
  left: 0;
}
.slick-next {
  right: 0;
}
@media only screen and (min-width : 961px) {
  .slick-arrow {
    margin: 0 5rem;
    width: 5rem;
    height: 5rem;
  }
}
/* Social Media
---------------------------------------- */
.social-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.social-media__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 3.8rem;
          flex: 0 1 3.8rem;
  height: 3.8rem;
  margin: 0 1rem;
}
.social-media__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  height: 100%;
  background-color: #E0B45C;
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.social-media__link i {
  font-size: 1.7rem;
  color: #000;
}

@media only screen and (min-width : 961px) {
  .social-media__link:hover {
    opacity: .7;
  }
}

@media only screen and (min-width : 961px) and (max-width : 1440px) {}

@media only screen and (min-width : 0) and (max-width : 960px) {}


/* Icos
---------------------------------------- */
.icon-play.primary-play {
  display: inline-block;
  color: #fff;
  border: .2rem solid #fff;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
}
@media only screen and (min-width : 961px) {
  .icon-play.primary-play {
    width: 9.6rem;
    height: 9.6rem;
    font-size: 1.8rem;
    line-height: 9.6rem;
  }
}
@media only screen and (min-width : 0) and (max-width : 960px) {
  .icon-play.primary-play {
    width: 7rem;
    height: 7rem;
    font-size: 1.8rem;
    line-height: 7rem;
    padding-left: 0.6rem;
  }
}

/* Back
---------------------------------------- */
.back-single__container {
    display: block;
}
.back-single {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: #296673;
}
.back-single .icon-arrow {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: #1A5B67;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scaleX(-1);
    font-size: 1.4rem;
    color: #fff;
    margin-right: .9rem;
}
@media only screen and (min-width : 961px) {
  .back-single{
      font-size: 1.8rem;
      line-height: 1.38em;
  }
}

/* @end */


.virtual-tour-container {
  margin-top: 6.5rem;
}
.virtual-tour-container iframe {
  width: 100%;
  height: 70rem;
}
@media only screen 
and (min-width : 961px) {
  .virtual-tour-container  {
      margin-top: 9.9rem;
  }
}

/* @group RESET GENERAL DE TAMAÑO
------------------------------------ */
.no-mobile {}

@media only screen
and (min-width : 961px) {
  .mobile { display: none!important; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .no-mobile { display: none!important; }
  /* html { font-size: 7px; } */
}

/* MediasQueries Fonts */
@media only screen
and (min-width : 1441px) {
  html { font-size: calc(10px + (16 - 10) * ((100vw - 1441px) / (4280 - 1441))); }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
  html { font-size: calc(6px + (10 - 6) * ((100vw - 961px) / (1440 - 961))); }
}
/* @end */

/* --- */
