/*
Theme Name: Hydrogen
Theme URI: http://gantry.org
Author: RocketTheme, LLC
Author URI: http://rockettheme.com
Description: Default Gantry 5 theme. Provides a simple, clean and fast design to get you started on developing your own theme or setting up a quick new site
Version: 5.4.32
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ==============================================================
 * FUENTES
 * ============================================================== */
  @font-face {
    font-family: rotoplas_bold;
    src: url(fonts/rotoplas_bold/rotoplas_bold_webfont.ttf);
    font-display: swap;
  }
  @font-face {
    font-family: rotoplas_regular;
    src: url(fonts/rotoplas_regular/rotoplas_regular_webfont.ttf);
    font-display: swap;
  }
  @font-face {
    font-family: rotoplas_light;
    src: url(fonts/rotoplas_light/rotoplas_light_webfont.ttf);
    font-display: swap;
  }

  .bold { font-family: rotoplas_bold; }
  .regular { font-family: rotoplas_regular; }
  .light { font-family: rotoplas_light; }

  body { 
    font-family: rotoplas_regular, sans-serif !important;
    color: #002554;
    font-size: 1rem;
    line-height: normal;
  }
/* fuentes */


/* ==============================================================
* COLORES
* ============================================================== */
  .blue1 { color: #00AFD7; }
  .blue2 { color: #009CDE; }
  .blue3 { color: #407EC9; }
  .blue4 { color: #236192; }
  .blue5 { color: #002554; }

  .bg-blue1 { background-color: #00AFD7; }
  .bg-blue2 { background-color: #009CDE; }
  .bg-blue3 { background-color: #407EC9; }
  .bg-blue4 { background-color: #236192; }
  .bg-blue5 { background-color: #002554; }

  .white { color: #fff; }
  .black { color: #000; }
  .grey { color: #666; }
/* colores */


/* ==============================================================
* TAMAÑOS FUENTES
* ============================================================== */
  .fs12 { font-size: 12px; }
  .fs14 { font-size: 14px; }
  .fs16 { font-size: 16px; }
  .fs20 { font-size: 20px; }
  .fs24 { font-size: 24px; }
  .fs30 { font-size: 30px; }
  .fs40 { font-size: 40px; }
  .fs50 { font-size: 50px; }

  .lhn { line-height: normal; }
/* tamaños fuentes */


/* ==============================================================
* ESTRUCTURA
* ============================================================== */
  h1 {
    font-family: rotoplas_light;
    color: #002554;
    font-size: 2rem;
  }
  h2 {
    font-family: rotoplas_light;
    color: #002554;
    font-size: 1.4rem;
  }

  p { margin: 1rem 0; }

  .clear-fix { clear: both; }

  .d-flex { display: flex; }
  .flex-col { flex-direction: column; }
  .flex-row { flex-direction: row; }
  .justify-content-center { justify-content: center; }
  .justify-content-end { justify-content: flex-end; }

  .position-relative { position: relative; }
  .position-absolute { position: absolute; }

  .d-inline-block { display: inline-block; }
  .vertical-align-middle { vertical-align: middle; }

  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-left { text-align: left; }

  .w-40 { width: 40%; }
  .w-50 { width: 50%; }
  .w-60 { width: 60%; }
  .w-70 { width: 70%; }
  .w-80 { width: 80%; }
  .w-90 { width: 90%; }
  .w-100 { width: 100%; }

  .pt-0 { padding-top: 0; }
  .pt-3 { padding-top: 1rem; }

  .pb-0 { padding-bottom: 0; }
  .pb-3 { padding-bottom: 1rem; }

  .py-3 { padding: 1rem 0; }
  .px-3 { padding: 0 1rem; }

  .p-0 { padding: 0; }
  .p-3 { padding: 1rem; }
  .pl-3 { padding-left: 1rem; }
  .pl-1 { padding-left: .25rem; }
  .p-ul { padding-left: 1.5rem; }
  .py-2 { padding: 0 .5rem; }

  .mt-0 { margin-top: 0; }
  .mb-0 { margin-bottom: 0; }
  .m-0 { margin: 0; }
  .m-3 { margin: 1rem; }

  .rtp-btn {
    /* background: #009cde;
    color: #fff;
    padding: .3rem 1rem;
    border-radius: 20px;
    transition: all ease .3s; */
    background: #236192;
    color: #fff !important;
    border-radius: 25px;
    /* width: max-content; */
    display: inline-block;
    font-size: 17px;
    padding: 6px 16px;
    font-weight: 500;
    transition: all ease .3s;
    border: solid 2px #236192;
  }
  .rtp-btn:hover {
    background: #002554;
    border: solid 2px #002554;
    color: #fff;
  }
  .rtp-btn.active {
    background: #407ec9;
    color: #fff;
    border: solid 2px #e6e6e6;
  }
  .rtp-btn-dark {
    background: #236192;
    color: #fff;
    border-radius: 25px;
    display: inline-block;
    font-size: 17px;
    padding: 6px 16px;
    font-weight: 500;
    transition: all ease .3s;
  }
  .rtp-btn-dark:hover {
    background: #009cde;
    color: #fff;
  }

  .rtp-btn-linea {
    color: #009cde;
    background-color: transparent;
    transition: all ease .3s;
    padding: .3rem 1rem;
    border: 2px solid #009cde;
    border-radius: 20px;
  }
  .rtp-btn-linea:hover {
    background-color: #009cde;
    color: #fff;
  }

  /* efectos hover.css */
    /* Forward */
      .hvr-forward {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
      }
      .hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
      }
    /* Backward */
      .hvr-backward {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
      }
      .hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
      }
    /* Float */
      .hvr-float {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
      .hvr-float:hover, .hvr-float:focus, .hvr-float:active {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
      }
    /* Sink */
      .hvr-sink {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
      .hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
      }
/* estructura */


/* ==============================================================
* BREADCRUMBS
* ============================================================== */
  .rtp-breadcrumbs {
    margin-top: calc(88px + 1rem);
    padding-bottom: 1rem;
    font-size: .92em;
    color: #666;
  }
  .rtp-breadcrumbs span a {
    color: #009cde;
  }
/* breadcrumbs */


/* ==============================================================
* MENU
* ============================================================== */
  /* menu principal */
    /* #g-slider {
      margin-top: 88px;
    } */
    #g-navigation {
      position: fixed;
      top: 0;
      width: 100%;
      transition: top ease .3s;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    }
    #g-navigation a {
      color: #002554;
      transition: all ease .3s;
    }

    #menu_contenedor { 
      padding: .5rem 0;
      letter-spacing: -1px;
      font-size: 15px;
    }
    #menu_contenedor ul { 
      list-style:none;  
      margin: 0; 
      padding: 0; 
      padding-left: 1rem;
    }

    #menu_logo { float: left; padding-left: 5%; }
    #menu_barra_icono { color: #002554; padding:0 12px; }
    
    #menu_principal { display: inline-block; }
    #menu_principal > li { display: inline-block; margin: 0 -2px; line-height: 20px; vertical-align: middle; }
    #menu_principal > li > a { 
      color: #009CDE;
      padding: 0px 10px;
      height: 70px;
      display: flex;
      align-items: center;
      transition: background .3s;
    }

    #menu_barra { display: none; background: #002554; box-shadow: 0px 3px 20px rgba(1,1,1,.75); }
    #menu_barra_logo { float: left; margin: 19px 0 19px 3%; }
    #menu_barra_label { display: none; float: right; margin: 41px 3% 0 0; }

    #menu-buscador-wrapper {
      padding: 0 5% 0 1rem;
    }

  /* submenus */
    #menu_principal > li > ul, 
    .submenu-contenido {
      position:absolute;
      width:100%;
      height: calc(100vh + 80px);/*  */
      top: 0;
      left: 0;
      visibility: hidden;
      display: none;
      opacity: 0;
      -webkit-transition: opacity 0.3s;
      transition: visibility 0s linear 0.3s, opacity 0.3s linear;
    }

    .sub-submenu-contenido {
      position:absolute;
      width:100%;
      left: 0;
      visibility: hidden;
      display: none;
      opacity: 0;
      -webkit-transition: opacity 0.3s;
      transition: visibility 0s linear 0.3s, opacity 0.3s linear;
    }

    /* .servicios-btn-list {
      width:100%;
      left: 0;
      visibility: hidden;
      display: none;
      opacity: 0;
      -webkit-transition: opacity 0.3s;
      transition: visibility 0s linear 0.3s, opacity 0.3s linear;
    } */

  /* buscador */
    .search-form input.search-field {
      color: #009CDE !important;
      padding-top: 0px !important;
      padding: 0rem 0.75rem !important;
      width: 100%;
      border-color: #009CDE;
      border-radius: 30px;
      height: 30px !important;
    }
    input.search-submit {
      display: none !important;
    }
    
    /* https://stackoverflow.com/questions/44183808/how-to-change-placeholder-with-font-awesome-content-using-jquery */
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    .search-form input.search-field::placeholder {
      color: #009CDE;
      text-align: right;
      font-family: FontAwesome, rotoplas_regular;
      opacity: 1; /* Firefox */
    }

    /* #menu_principal li:hover > ul, #menu_principal li:hover > .submenu-contenido  { visibility: visible; opacity: 1; transition-delay:0s; } */
    /* #menu_principal li:hover > .submenu-contenido { visibility: visible; opacity: 1; transition-delay:0s; } */
    .sub-submenu:hover .sub-submenu-contenido { visibility: visible; opacity: 1; transition-delay:0s; }

    #plantas-menu-wrapper {
      display: none;
      visibility: hidden;
    }
/* menu */


/* ==============================================================
* SUBMENUS
* ============================================================== */
  .submenu-contenido {
    background: url(../../../rtp-resources/menu/mp-sm-background.jpg) right bottom no-repeat white;
    padding: 1rem 5% 1rem 5%;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 6px -6px;
    z-index: 1;
  }
  .submenu-contenido-elementos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
  .submenu-contenido-titulo {
    text-align: left;
    font-size: 50px;
    line-height: normal;
    width: 50%;
    float: left;
    margin-bottom: 5%;
  }
  .submenu-contenido-cerrar {
    font-size: 24px;
    text-align: right;
    cursor: pointer;
    width: 50%;
    float: left;
  }
  .submenu-contenido-cerrar div {
    width: 40px;
    height: 40px;
    display: inline-block;
    background: #236192;
    color: #fff;
    border-radius: 50%;
    padding: 7px 0; /* 10px 14px */
    margin-top: 10px;
    text-align: center;
  }

  .mp-sm-col {
    width: 16%;
    text-align: left;
    padding: 0 1%;
    float: left;
  }
  .mp-sm-col p, ul {
    margin: 0;
  }
  .mp-sm-col p {
    font-family: rotoplas_bold;
    color: #009CDE;
    min-height: 2rem;
    line-height: normal;
    margin-bottom: .5rem;
    font-size: 20px;
  }
  /* .sm-nosotros-col-list p {
    margin-top: 0;
    font-size: 30px;
    color: #009cde;
  } */

  .sm-tab-list ul {
    padding-left: 18px !important;
    font-size: 20px;
    line-height: normal;
    margin: 1rem 0 !important;
    margin-bottom: 0 !important;
  }
  .mp-sm-col ul {
    padding-left: 18px !important;
    font-size: 16px;
    line-height: normal;
    margin: 1rem 0 !important;
  }
  .sm-nosotros-col-list ul {
    padding-left: 18px !important;
    font-size: 20px;
    line-height: normal;
    margin: 1rem 0 !important;
  }

  .mp-sm-col ul li, 
  .sm-nosotros-col-list ul li,
  .sm-tab-list ul li {
    position: relative;
    margin: .2rem 0;
  }
  .mp-sm-col ul li:before {
    content: '';
    display: inline-block;
    height: 16px;
    width: 16px;
    background-image: url(../../../rtp-resources/menu/menu-vineta.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -20px;
    position: absolute;
    top: 3px;
  }
  .sm-tab-list ul li:before {
    content: '';
    display: inline-block;
    height: 18px;
    width: 18px;
    background-image: url(../../../rtp-resources/menu/menu-vineta.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -24px;
    position: absolute;
    top: 1px;
  }
  .sm-nosotros-col-list ul li::before {
    content: '';
    display: inline-block;
    height: 16px;
    width: 16px;
    background-image: url(../../../rtp-resources/menu/menu-vineta.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -20px;
    position: absolute;
    top: 6px;
  }

  #g-navigation .mp-sm-col ul li a:hover, 
  #g-navigation .sm-nosotros-col-list ul li a:hover {
    color: #009CDE;
  }
  /* submenu productos */
    /* .sm-prod-btn, */ 
    .rtp-btn-outline {
      padding: .5rem 1rem;
      color: #002554;
      border: 2px solid #002554;
      border-radius: 20px;
      transition: all ease .3s;
    }
    .sm-prod-btn:hover, 
    .rtp-btn-outline:hover {
      border: 2px solid #009CDE;
      color: #009CDE !important;
    }

  /* submenu nosotros */
    .sm-nosotros-col {
      display: inline-block;
      text-align: left;
      vertical-align: top;
    }
    .sm-nosotos-tab-nodo { 
      font-size: 16px; 
    }
    .sm-nosotos-tab-nodo-texto {
      display: inline-block;
      width: 45%;
      margin-right: 5%;
      vertical-align: top;
    }
    .sm-nosotos-tab-nodo-imagen {
      display: inline-block;
      width: 49%;
      vertical-align: top;
      height: 275px;
      text-align: right;
    }
    .sm-nosotos-tab-nodo-imagen img {
      width: auto;
      height: 100%;
    }
    .sm-nosotos-tab-nodo-texto a {
      font-size: 20px;
    }
    .sm-nosotos-tab-nodo-texto p:nth-child(1) {
      margin-top: 0;
      font-size: 30px;
      color: #009cde;
    }
    .sm-nosotos-tab-nodo a img {
      width: 17px;
      vertical-align: middle;
    }
    /* .sm-nosotos-tab-nodo img { width: 49%; } */
    .sm-nosotros-col-list { width: 25%; }
    .sm-nosotros-col-tabs { 
      width: 74%; 
      padding-left: 5%;
      border-left: 2px solid #009CDE;
    }
    .sm-nosotros-btn.active { color: #009CDE !important; }
    
/* submenuS */

@media screen and (max-width: 1440px) {
  .search-form input.search-field::placeholder {
    font-size: 14px;
  }
}
@media screen and (max-width: 1366px) {
  .search-form input.search-field::placeholder {
    font-size: 13px;
  }
}
@media screen and (max-width: 1304px) {
  .search-form input.search-field::placeholder {
    font-size: 12px;
  }

  #menu_logo {
    padding-left: 1rem;
  }
  #menu-buscador-wrapper {
    padding: 0 1rem 0 1rem;
  }
}
@media screen and (max-width: 1284px) {
  #g-footer .footer-soluciones-nodo a {
    font-size: 14px;
  }
  .footer-soluciones-nodo a span {
    display: inline-block;
    width: 65%;
    vertical-align: top;
  }
}
@media screen and (max-width: 1260px) {
  #menu_principal > li > ul, .submenu-contenido {
    visibility: visible;
    opacity: 1;
  }
  
  /* menu principal */
    #menu_logo { display: inline-block; padding-left: 5%; }
    #menu_barra_label { display: inline-block; margin: 20px 0% 0 0; }
    #menu_principal { display: none; }
    #menu_principal {
      padding-left: 0 !important;
      text-align: left;
      display: inline-block !important;
      position: absolute;
      left: -100%;
      top: 96px;
      background-color: #fff;
      box-shadow: 0px 5px 10px 0px rgba(1,1,1,.3);
      width: 100%;
    }
    #menu_principal > li { display: block; margin: 0px; border-top:1px solid #00afd7;/**/ }
    #menu_principal li ul { 
      padding-left: 2rem !important;
      margin-top: 0 !important;
      display: none;
    }

    
    #menu_principal li ul li ul { right: 0px; }
    #menu_principal > li > a {
      height: auto;
      padding: .5rem;
    }
  /* submenu productos */
    .mp-sm-col ul li,
    .sm-nosotros-col-list ul li {
      padding: .5rem 0;
    }
    .mp-sm-col ul li:before,
    .sm-nosotros-col-list ul li:before {
      top: 11px;
    }
    
    .submenu-contenido {
      padding: 0rem 0% 0rem 5%;
      position: relative;
      background: #fff;
      box-shadow: none;
      height: auto;
    }
    .submenu-contenido-elementos {
      height: auto;
    }
    .submenu-contenido-cerrar {
      display: none;
    }
    .submenu-contenido-titulo {
      display: none;
    }
    .mp-sm-col {
      width: auto;
      padding-right: 0rem;
      float: none;
      margin-bottom: 0;
    }
    .mp-sm-col p {
      min-height: auto;
      font-size: 16px;
    }
    .mp-sm-col ul {
      margin: 0 !important;
    }
    .sm-nosotros-col-list ul {
      font-size: 16px;
    }
    .sm-productos-cotiza {
      display: none;
    }
  /* submenu nosotros */
    #submenu-nosotros .submenu-contenido p {
      display: none;
    }
    #submenu-nosotros .submenu-contenido .sm-nosotros-col-list p {
      display: none;
    }
    #submenu-nosotros .submenu-contenido .sm-nosotros-col-list ul {
      display: block;
    }
    .sm-nosotros-col-list {
      width: 100%;
      margin-right: 0%;
      border-right: none;
    }
    .sm-nosotros-col-tabs {
      display: none;
    }
  /* servicios */
    #submenu-servicios .submenu-contenido p {
      display: none;
    }
    #submenu-servicios .submenu-contenido .sm-nosotros-col-list > ul {
      display: block;
    }
  /* servicios */
    #submenu-amigoplomero .submenu-contenido p {
      display: none;
    }
    #submenu-amigoplomero .submenu-contenido .sm-nosotros-col-list > ul {
      display: block;
    }
  /* distribuidores */
    #submenu-distribuidores .submenu-contenido p {
      display: none;
    }
    #submenu-distribuidores .submenu-contenido .sm-nosotros-col-list > ul {
      display: block;
    }
  /* buscador */
    .search-form input.search-field {
      margin: 1rem 0;
    }
}
@media screen and (max-width: 768px) {
  .search-form input.search-field::placeholder {
    font-size: 8px;
  }
}
@media screen and (max-width: 767px) {
  .search-form input.search-field::placeholder {
    font-size: 16px;
    text-align: center;
  }
  #menu_barra_label { display: inline-block; margin: 20px 1rem 0 0; }
  #menu_principal { top: 75px; }
}

/* ==============================================================
* FOOTER
* ============================================================== */
  #g-footer { border-top: none; padding-top: 1rem !important; }

  #g-footer .footer-contacto-btn a {
    color: #fff;
    transition: all ease .3s;
    margin: .25rem 0;
  }

  #g-footer a:hover {
    color: #fff;
  }

  .footer-contacto-btn a {
    padding: 0 .5rem;
  }
  #g-footer .footer-soluciones-nodo a:hover, #g-footer .footer-contacto-btn a:hover {
    color: #00AFD7;
  }

  #g-footer .footer-soluciones-nodo {
    display: inline-block;
    width: 100%;
    vertical-align: top;
  }
  #g-footer .footer-soluciones-nodo a {
    color: #fff;
    transition: all ease .3s;
    margin: .5rem 0;
    display: block;
    width: 100%;
  }
  #g-footer .footer-soluciones-nodo a img {
    display: inline-block;
    vertical-align: top;
    margin-top: 2px;
  }
  #g-footer .footer-soluciones-nodo a span {
    display: inline-block;
    width: 70%;
    vertical-align: top;
  }

  #g-footer h2 {
    color: #fff;
    font-family: rotoplas_regular;
    font-size: 1rem;
    margin-bottom: 0;
  }
  .footer-redes { display: inline-block; }
  .footer-redes h2 { text-align: left; }

  @media screen and (max-width: 768px) {
      #g-footer .footer-soluciones-nodo { width: 100%; }
  }

  @media screen and (max-width: 425px) {
    .footer-soluciones-nodo { text-align: left; padding: 0 1rem; }
    .footer-redes h2 { text-align: center; }
  }
/* footer _ */