/*!
 * Componente Nombre: Style Template RAM House
 * Autor: DEX360
 * Copyright: DEX360
 * Class-main: template-rh
 */

/*
    0.  root
    1.  general
    2.  main
        2.1. #trh-servicios
        2.2. #trh-exclusivo
        2.3. #trh-vip
        2.4. #trh-video
        2.5. #trh-sucursal
    3.  footer
    4.  responsive
*/

/* 0. :root
--------------------------------------------------------------*/
:root {
  --colorPrimary: #b0a477;
  --colorDark: #000000;
  --colorLight: #ffffff;
}

/* 1. general
--------------------------------------------------------------*/
.page-template-template-ram-house #telefonosFooter {
  display: none !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--colorPrimary) !important;
  color: var(--colorLight) !important;
  padding: 0.3em 2.5em !important;
  border: none;
}

.template-rh h3 {
  font-weight: bold !important;
  color: #2a2a2a !important;
}

.slider-header .carousel-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
}

.slider-header .carousel-item {
    position: relative;
}

/* 2. main
--------------------------------------------------------------*/

/* 2.1. #trh-servicios */
#trh-servicios {
  margin-top: -12em;
}
.trh_servicios_titulo img {
  height: 25px;
  margin: auto 0px;
  position: relative;
  top: -1px;
}
#trh-servicios h2 {
  font-size: 2em;
  font-weight: 600;
  padding: 0;
  margin: 0px;
  text-align: center;
  color: white;
  display: inline-block;
}
.trh_servicios_titulo p {
  color: white;
  font-size: 1.4em;
  display: block;
  margin: 0.5em 0px 1em;
}
.trh-servicios-content h4 {
  border-top: 3px solid black;
  font-weight: 800;
  margin: 1.5em 0px 0px 0px;
  padding: 0.5em 0.5em 0.8em;
}
.trh-servicios-content p {
  padding: 0 0.5em;
}

/* 2.2. #trh-exclusivo */
.template-rh [data-type-formulario="test_drive"] button,
.template-rh input.wpcf7-form-control.wpcf7-submit {
  background: var(--colorPrimary) !important;
  color: white !important;
  height: 2rem !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: normal !important;
}
.trh-exclusivo-gallery {
  padding-left: 5em !important;
}
.articulo-inverso .card-body {
  flex-direction: row-reverse !important;
}
.articulo-inverso .card-body {
  flex-direction: row-reverse !important;
}
.articulo-inverso .card-body .texto-col {
  margin-left: 8.333%;
  margin-right: 8.333%;
  text-align: right;
}
#trh-exclusivo .card.slide-item img {
  border-radius: 0px !important;
}
#trh-exclusivo .slick-slider .card {
  min-width: 250px;
  border: none;
}
#trh-exclusivo .card-img-top {
  height: 200px;
  object-fit: cover;
}
#trh-exclusivo .slick-prev:before,
#trh-exclusivo .slick-next:before {
  color: #fff;
  content: "" !important;
}
#trh-exclusivo .slick-prev,
#trh-exclusivo .slick-next {
  z-index: 10;
  width: 40px !important;
  height: 60px !important;
  transition: all 0.3s ease;
  filter: invert();
}
#trh-exclusivo .slick-prev:hover,
#trh-exclusivo .slick-next:hover {
  opacity: 0.8;
  background-color: transparent;
}


/* 2.3. #trh-vip */
#trh-vip {
  background-color: white;
}
#trh-vip .card-img-top {
  border-radius: 0px !important;
}
#trh-vip .card-title {
  font-weight: bold !important;
  margin-bottom: 0.3rem !important;
}
.articulo-vip .card-body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.articulo-vip:nth-child(even) .card-body {
  flex-direction: row-reverse;
}
.articulo-vip:nth-child(even) .offset-md-2 {
  margin-left: 8.333% !important;
  margin-right: 8.333% !important;
  text-align: right;
}

.articulo-vip .card-img-top {
  height: auto !important;
  object-fit: cover;
}

/* 2.4. #trh-video */
#trh-video .embed-responsive {
  padding-top: 0 !important;
  height: 300px;
  position: relative;
  overflow: hidden;
}
#trh-video .embed-responsive-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2.5. #trh-sucursal */
#trh-sucursales {
  background-color: white;
}
#trh-sucursales {
  background-image: url("images/ui-icons_444444_256x240.png");
}

/* 2.1. */
.trh__container h3 {
  font-size: 2em;
  font-weight: 600;
  padding: 1em 2em;
  margin: 0px;
  text-transform: uppercase;
  text-align: center;
}
.trh__container h4 {
  font-size: 1.6em;
  font-weight: 600;
  margin: 10px;
}
.trh__container p {
  margin: 0px;
}

/* 4. responsive
--------------------------------------------------------------*/
@media (min-width: 701px) {
  #trh-exclusivo .slick-slider .slick-list {
    padding-left: 0 !important;
  }
  #trh-exclusivo .slick-slider .slick-track {
    transform: translate3d(120px, 0px, 0px);
  }
}
@media (max-width: 700px) {
  /* #trh-sucursales,
  #trh-vip,
  #trh-exclusivo,
  #trh-servicios,
  .trh-servicios-contenido {
    text-align: center;
  } */
  .template-rh p {
    font-size: 20px !important;
  }
  .articulo-vip:nth-child(even) .offset-md-2 {
    text-align: center;
  }
  .articulo-vip .card-body {
    display: block !important;
    padding: 0 5% 5%;
    margin: 0px auto !important;
  }
  .articulo-vip .texto-col {
    padding: 0 10% 5% 12% !important;
  }
  .articulo-vip.articulo-inverso .texto-col {
    padding: 10% 20% 10% 12% !important;
  }
  .articulo-vip:nth-child(even) .offset-md-2 {
    padding: 0 10% 5% 12% !important;
    text-align: right;
    margin: 4% auto !important;
  }
  .trh-exclusivo-text {
    padding: 0 10% 5% 12% !important;
  }
  .trh-exclusivo-gallery {
    padding-left: 4em !important;
  }
  .template-rh .carousel-control-next-icon,
  .template-rh .carousel-control-prev-icon {
    background-size: 90% !important;
  }
  .template-rh .slick-prev,
  .template-rh .slick-next {
    width: 20px !important;
    height: 30px !important;
  }
  .trh_servicios_titulo p {
    margin: 0.5em 0px 0.2em;
  }
  #trh-servicios {
    padding: 0 2em;
  }
}
