/*  (c) 2020 ¡Hey! Ideas que inspiran - CSS by Grupo Interactivo  */

#reso {
  display: none;
  position: fixed;
  bottom: 0;
  left: 32px;
  width: 78px;
  height: 18px;
  font-size: 0.7em;
  color: #ffffff;
  text-align: center;
  background-color: #2E4469;
  z-index: 2000;
}
#reso:hover {
  background-color: #06A3E4;
}
  #reso:after {
  content: "XL";
}

/*-------------  XL  ------------  */
@media(min-width: 1500px) {
  
}

/*-------------  LG  ------------  */
@media(max-width: 1200px) {
  #reso:after { content: "LG"; }

  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.875em;
  }
  #mainNav .navbar-nav .nav-item.nav-last .nav-link {
      padding-right: 1.0em;
  }
  #mainNav .navbar-brand {
    width: 273px;
  }
  .block-content-text .col-12 {
    padding-right: 20px;
  }

  .videogrid .card-body::after,
  .videolist .slick-slide::after {
    top:50px;
    font-size: 22px;
  }
}

/*-------------  MD  ------------  */
@media(max-width: 991.9px) {
  #reso:after { content: "MD"; }

  #homepic {
    margin-top: 70px;
  }

  .homepic-content h1 {
    font-size: 2.2em;
  }
  .homepic-content h4 {
    font-size: 1.1em;
  }
  .homepic-content .btn-gi {
    margin-left: 49%;
  }
  #page-contents {
    background-size: contain;
  }

  .btn-hv-cta{
    font-size: 0.9em;
    letter-spacing: 0.15em;
    max-height: 40px;
    height: 40px;
    padding: 0.8em 1.6em 0.8em 1.6em;
    margin-top: 5em;
    box-shadow: 0 7px 14px rgba(0,0,0,.24);
  }
  #searchbox {
    top: 70px;
  }
  .topic-line li {
    width: 100%;
  }
  .videogrid .card-body::after {
    top:42px;
  }
  #page-contents.single.event h1{
    font-size: 1.9em;
  }
  .persona-hey {
    padding-left: 6%;
    padding-right: 6%;
  }

  #mainNav .dropdown-menu {
    background-color: transparent;
    padding: 20px 8px;
  }
  #mainNav .dropdown-menu:before {
    display: none;
  }

  #mainNav {
    height: 70px;
    background-color: #ffffff;
    padding: 0;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,0.12);
    -moz-box-shadow: 0 3px 6px 0 rgba(0,0,0,0.12);
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.12);
  }
  #mainNav .container {
    min-width: 100%;
    padding: 0;
  }
  #mainNav .navbar-brand {
    width: 260px;
    margin-left: 36px;
    margin-top: 10px;
  }
  #mainNav .navbar-toggler,
  #mainNav .navbar-toggler:hover,
  #mainNav .navbar-toggler:focus,
  #mainNav .navbar-toggler:active {
    margin-right: 36px;
    margin-top: -6px;
    border:none;
    outline: none;
  }
  .hamb .lineh{
    width: 30px;
    height: 3px;
    background-color: #f28b50;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 0 solid #000000;
    display: block;
    margin: 7px auto;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .hamb:hover{
    cursor: pointer;
  }
  .hamb.is-active{
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .hamb.is-active .lineh{
  background-color: #f3b32e;
  }
  .hamb.is-active .lineh:nth-child(2){
    width: 0;
  }
  .hamb.is-active .lineh:nth-child(1),
  .hamb.is-active .lineh:nth-child(3){
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }
  .hamb.is-active .lineh:nth-child(1){
    -webkit-transform: translateY(13px);
    -ms-transform: translateY(13px);
    -o-transform: translateY(13px);
    transform: translateY(13px);
  }
  .hamb.is-active .lineh:nth-child(3){
    -webkit-transform: translateY(-8px) rotate(90deg);
    -ms-transform: translateY(-8px) rotate(90deg);
    -o-transform: translateY(-8px) rotate(90deg);
    transform: translateY(-8px) rotate(90deg);
  }
  .navbar-collapse {
    position: absolute;
    top: 70px;
    right: -50%;
    width: 50%;
    height: calc(100vh - 100px);
    max-height: 540px;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 20px;
    background-color: #f28b50;
    -moz-border-radius: 0 0 0 60px;
    -webkit-border-radius: 0 0 0 60px;
    border-radius: 0;
    border: 0 solid #000000;
    border-bottom:12px #58595b solid;
    -webkit-box-shadow: inset -10px 0 18px -5px rgba(0,0,0,.25);
    -moz-box-shadow: inset -10px 0 18px -5px rgba(0,0,0,.25);
    box-shadow: inset -10px 0 18px -5px rgba(0,0,0,.25);
    -webkit-transition: all 0.4s cubic-bezier(.47,1.64,.41,.8);
    -o-transition: all 0.4s cubic-bezier(.47,1.64,.41,.8);
    transition: all 0.4s cubic-bezier(.47,1.64,.41,.8);
  }
  .navbar-collapse.show {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  .navbar-collapse ul.navbar-nav {
    padding: 30px 60px 30px 42px;
    height: 98%;   /*  89%;  */
    overflow: hidden;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.93em;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.50em 0 0.55em 0;
    margin-top: 18px;
    color: #ffffff;
    text-align: left;
    border-bottom: 1px #ffffff solid;
  }
  #mainNav .navbar-nav .nav-item.nav-last .nav-link {
      padding-right: 0;
  }
  #mainNav .navbar-nav .nav-item .nav-link.active, 
  #mainNav .navbar-nav .nav-item .nav-link:hover,
  #mainNav .navbar-nav .nav-item .nav-link:focus {
    margin-left: 5%;
    color: #ffffff;
    border:none;
    outline: none;
    border-bottom: 1px #bbb solid;
  }
  #mainNav .navbar-nav .nav-item .nav-link::after {
    display: none;
  }
  #mainNav .navbar-nav .nav-item.dropdown .nav-link::before {
      display: block;
      position: absolute;
      right: 32px;
      margin-top: 6px;
      content: '';
      width: 9px;
      height: 9px;
      background-color: red;
      background: url('../img/icons/caret-down.svg') top center no-repeat;
      background-size: cover;
  }
  #mainNav .dropdown-menu {
      padding-top: 0;
  }
  #mainNav .dropdown-menu ul li a {
      font-size: 0.813em;
      font-weight: 400;
      line-height: 1.2em;
      color: #ffffff;
      margin-bottom: 0.5em;
  }
      #mainNav .dropdown-menu ul li a:focus,
      #mainNav .dropdown-menu ul li a:hover {
          color: #ffdd00;
      }

  #suscribeModal .modal-content {
    padding: 0;
    background: #00aeef url('../img/bg_contact2.jpg') top center repeat-x;
  }
  #suscribeModal .ctextcol {
    background-color: #ffdd00;
    padding-bottom: 32px;
  }
  #suscribeModal .ln-form {
    margin-top: 10px;
    padding-left: 18px;
  }
  #suscribeModal .modal-header {
    padding-right: 24px;
  }
  #suscribeModal .modal-body {
    padding: 0 15px;
  }
  #suscribeModal .btn-hv-cta2 {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .bt-search {
    position: fixed;
    top:22px;
    right:100px;
    z-index:1150;
  }
  .ic_search {
    width: 24px;
    height: 24px;
    fill: #777;
  }
  .ic_search:hover {
    fill: #f3b32f;
  }

  .block-intro h2[typeis="bigtitle"] {
      font-size: 1.6em;
  }
  .block-intro p {
    max-width: 70%;
  }

  .block-grid {
    padding-bottom: 20px;
  }
  .block-grid .card {
    min-height: 210px;
  }
  .block-grid .card h3 {
    font-size: 1.0em;
  }
  .block-content-text .col-12 {
    padding-right: 15px;
  }
  .recom-list .card {
    min-height: 170px;
  }
  .recom-list .card h3 {
    font-size: 1.1em;
  }

  .block-content-text .table-responsive-sm {
    min-width: 85%;
  }
  #suscribeModal h5 {
    font-size:0.9em;
  }
  #suscribeModal h5 span {
    font-size:1.4em;
  }
  #avisoModal .modal-dialog {
    max-width: 80%;
    max-height: 90%;
  }
  #avisoModal h4 {
    font-size: 2.2em;
  }
  #avisoModal p {
    font-size: 0.938em;
  }
  .grid-title {
      margin-bottom: 1.2em;
  }
}

/*-------------  SM  ------------  */
@media(max-width: 767.9px) {
  #reso:after { content: "SM"; }

.block-events .event-title {
  font-size: 1.3em;
}
.block-events .event-tick {
  width: 100%;
  float: none;
  text-align: center;
  margin-top: 30px;
}
.block-events .event-info {
  width: 100%;
  float: none;
  text-align: center;
  margin-top: 30px;
}

  #homepic {
    margin-top: 68px;
    padding-bottom: 24px;
  }
  .orightbox {
    width: 45%;
    /*height: 100%;*/
    margin-top: 120px;
    background-size: contain;
  }
  .homepic-content {
    position: relative;
    left: 0;
    top:0;
    right: 0;
    margin-top: 1.0em;
    width: 90%;
    max-width: 100%;
    padding: 0 30px;
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0); 
    -ms-transform: translateX(0) translateY(0); 
    -o-transform: translateX(0) translateY(0); 
    transform: translateX(0) translateY(0);
  }
  .homepic-content h1 {
    font-size: 2.5em;
    color: #58595b;
    text-shadow: 0px 1px 6px rgba(255, 255, 255, 0.4);
  }
  .homepic-content h1 span {
    font-size: 0.75em;
    color: #58595b;
  }
  .homepic-content h4 {
    font-size: 1.2em;
    font-weight: 300;
    color: #58595b;
    margin-bottom: 1.8em;
  }
  .homepic-content .btn-gi {
    margin-left: 52%;
  }
  .picwrap {
    background: transparent url('../img/event01_m.jpg') top center no-repeat;
    background-size: cover;
  }
  .picwrap .mainpic {
    min-height: 450px;
  }

  .quote-content {
    width: 78%;
  }
  #searchbox button.close {
    right: 30px;
  }
  .bt-search {
      position: fixed;
      top: 22px;
      right: 80px;
      z-index: 1150;
  }
  .bg-ball-one,
  .bg-ball-two,
  .bg-ball-three,
  .bg-ball-four {
    display: none;
  }
  .quote-text {
    font-size: 1.6em;
    line-height: 1.4em;
  }

  footer .legal-txt p {
    font-size: 0.93em;
    line-height: 1.3em;
    text-align: center;
  }
  footer .legal-txt h4 + p {
    font-size: 1em;
    margin-bottom: 2em;
  }
  footer h4 {
    font-size: 0.94em;
    text-align: center;
    max-width: 100%;
  }

  .videogrid .card-body::after {
    top:60px;
    font-size: 24px;
  }
  #page-contents.single .post-mainpic {
    padding: 0 8%;
  }
  #page-contents.single.event {
      margin-top: 30px;
  }
  #page-contents.single.event .event-video {
    margin-bottom: 2.5em;
  }
  .article-cont img {
    max-width: 80%;
  }







  .navbar-collapse {
    right: -60%;
    width: 60%;
  }
  #mainNav .navbar-brand {
    width: 240px;
    margin-left: 24px;
  }
  #mainNav .navbar-toggler,
  #mainNav .navbar-toggler:hover,
  #mainNav .navbar-toggler:focus,
  #mainNav .navbar-toggler:active {
    margin-right: 20px;
  }
  .navbar-collapse ul.navbar-nav {
    padding-right: 42px;
  }

  .block-intro h2[typeis="bigtitle"] {
    font-size: 1.4em;
  }
  .block-intro p {
    max-width: 100%;
  }
  #accordion .card {
    width: 100%;
    max-width: 100%;
  }

  .block-grid .card {
    min-height: 228px;
  }
  .block-pagebuttons {
    padding-bottom: 12px;
  }
  .container.sm-wide {
    max-width: 96%;
  }
  .block-informes .btn-dload {
      font-size: 0.813em;
  }
  .pagination {
    margin-top: 1em;
    margin-bottom: 0em;
  }
  .page-link {
    font-size: 0.9em;
    min-width: 36px;
    min-height: 38px;
  }
  .block-content-text .table-responsive-sm {
    min-width: 100%;
  }
  .creditcard {
    width:80%;
  }
  .ln-form {
    margin-top: 40px;
  }
  .gi-form-field:placeholder-shown ~ .gi-form-label {
    font-size: 0.96em;
  }
  #tasasModal h4,
  #suscribeModal h4 {
    font-size: 1.6em;
  }
  #avisoModal {
    z-index: 1170;
  }
  #avisoModal h4 {
    text-align: center;
    font-size: 2.1em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
  #avisoModal p {
    text-align: center;
    font-size: 1em;
  }
  #avisoModal .modal-body {
    position:relative;
    top: 0;
  }

}

/*-------------  XS  ------------  */
@media(max-width: 575px) {
  #reso:after { content: "XS"; }

  .navbar-collapse {
    right: -80%;
    width: 80%;
  }
  .navbar-collapse ul.navbar-nav {
      position: relative;
  }
  .hamb .lineh {
    width: 24px;
  }
  .block-title h3 {
      font-size: 1.6em;
      margin-top: 0.5em;
      margin-bottom: 1.4em;
  }
  .block-events .event-card {
    margin-top: 1.2em;
    margin-bottom: 1em;
  }
  .block-events .event-title-head {
    min-height: 75px;
  }
  .more-likethis {
    padding-top: 10px;
    text-align: center;
  }
  .quote-text {
    font-size: 1.5em;
    line-height: 1.3em;
  }
  .quote-text span {
    font-size: 2.2em;
  }
  .article-cont,
  .post-responsab {
    padding-left: 24px;
    padding-right: 24px;
  }



/* ---- SOCIAL ---- */
  .social-links {
    /*display: inline-block;*/
    /*float: left;*/
    position: relative;
    left: 0;
    margin-left:0;
    top: 36px;
    width: 100%;
  }
  .social-links ul li {
    display: inline;
    padding: 0 10px;
  }
  .social-links ul li a {
    color: #0074a7;
  }
  .social-links ul li i {
    font-size: 1.2em;
    color: #ffffff;
  }
  .social-links ul li i:hover {
    color: #ffffff;
  }

  #searchbox form input[type="text"] {
    width: 60%;
    left: 20%;
  }
  .bt-search {
      top: 20px;
      right: 70px;
  }
  .ic_search {
    width: 18px;
    height: 18px;
  }
  .block-grid .card {
    max-width: 260px;
  }
  .recom-list .card {
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
  .topic-line {
    padding-top: 30px;
  }
  #page-contents.blog h1,
  .breadcrumb {
    padding: 0 24px;
  }
  .col-temas {
    padding-left: 40px;
    padding-right: 40px;
  }
  .recomen {
    padding: 0 24px;
  }
  .videogrid .card-body::after {
    top:65px;
  }
  footer .legal-txt p {
    padding: 0 32px;
  }
  .block-grid .card {
    min-height: 0;
  }
  .block-grid .card {
    margin-top: 12px;
    margin-bottom: 22px;
  }
  .block-content-video h4,
  .block-content-video .col-12.col-sm-6:nth-child(2) {
    text-align: center;
  }
  .vid-thumb {
      width: 75%;
      margin-left: 10%;
      margin-bottom: 30px;
  }
  .vid-circle {
      width: 120px;
      height: 120px;
  }
  #news-header h3 {
      font-size: 0.938em;
      margin-top: 4em;
  }
  .post-grid {
    margin-top: 18em;
  }
  .page-link {
    font-size: 0.8em;
    min-width: 34px;
    min-height: 34px;
  }
  .page-item:first-child .page-link,
  .page-item:last-child .page-link {
    font-size: 0.8em;
  }
  #avisoModal .modal-dialog {
    width: 100%;
    max-width: 100%;
    height: 90%;
  }
  #cookieconsent h4,
  #cookieconsent p {
    margin-top: 0.5em;
    text-align: center;
  }
  #cookieconsent .btn-hv-cta {
    margin-top: 15px;
  }
}

/*-------------  XXS  ------------  */
@media(max-width: 450px) {
  #reso:after { content: "XXS"; }

  img.gal-zoom {
      min-height: 100px;
  }
  .d-xxs { display: block; }
  .navbar-collapse {
    right: -90%;
    width: 90%;
  }
  #mainNav .navbar-brand {
    width: 220px;
  }
  .bt-search {
    right:70px;
  }

  .videogrid .card-body::after {
    top:54px;
    font-size: 20px;
  }
  .block-grid .card {
    margin-bottom: 18px;
  }

  footer a.social-icon {
    margin-left: 5%;
    margin-right: 5%;
  }
  footer a.social-icon svg {
    width: 16px;
  }
  footer .legal-txt p {
    line-height: 1.4em;
  }
  .block-grid {
    width: 70%;
  }
  .btn-dload {
    font-size: 0.9em;
  }
  .block-notific a.btn-info.btn-info-sm {
    font-size: 0.84em;
    line-height: 0.95;
  }
  .block-notific a.btn-info.btn-info-sm .button-text {
    padding-left: 17px;
  }
  .sidemenu li {
    width: 94%;
    text-align: center;
  }

  .page-link {
    display: none;
  }
  .page-count,
  .page-item:first-child .page-link,
  .page-item:last-child .page-link {
    display: block;
  }

}

/*-----------  Below 360px  ----------  */
@media(max-width: 361px) {
  #reso:after { content: "XXXS"; }

  #mainNav .navbar-brand {
    width: 190px;
    margin-top: 0px;
  }
  .bt-search {
    right:60px;
  }
  img.gal-zoom {
      min-height: 80px;
  }
  footer .legal-txt p {
    display: none;
  }
  .gi-form-field:placeholder-shown ~ .gi-form-label {
    font-size: 0.8em;
  }
  .videogrid .card-body::after {
    top:42px;
  }
}

/*-----------  Menu fix on LG  ----------  */
@media screen and (min-width: 992px) and (max-width: 1080px) {
    #hey-header #mainNav .container {
      width: 100%;
      max-width: 1080px;
    }
}