@charset "utf-8";
/* CSS Pestañas Desplegables */

/*-- Escritorio --*/
ul.resp-tabs {
  float: left;
  width: 100%;
  height: auto;
  list-style: none;
  border-bottom: 1px solid #f0f0f0;
  padding: 0;
  margin: 0;
  clear: both;
}
ul.resp-tabs li {
  position: relative;
  float: left;
  height: 100%;
  background-color: #002b49;
  font-family: var(--sec-font-family);
  font-size: 15px;
  color: #fff;
  line-height: 39px;
  border-radius: 2px 2px 0 0;
  padding: 0px 15px;
  margin: 0;
  margin-top: 3px;
  margin-right: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: all .2s;
}
ul.resp-tabs li.active {
  display: block;
  background-color: #e50050;
  color: #fff;
}
.tipos-programa-jovenes ul.resp-tabs li.active {
  background-color: #feda02;
  font-weight: 600;
  color: #333;
}
.tipos-programa-trabajo ul.resp-tabs li.active {
  background-color: #71b300;
}
.resp-tab-wrap {
  width: 100%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px 3px;
  overflow: auto;
  clear: both;
}
.resp-tab-content {
  display: none;
  padding: 50px 5%;
}
.resp-tab-drawer-heading {
  display: none;
}
/* Pestañas Home Jóvenes */
.home-jovenes .programas-logo {
  width: 60px;
  height: 60px;
  background: url(https://cdn.topschool.info/wp-content/uploads/home/puntos-corporativos-top-school.svg) no-repeat;
  margin: 0 auto 20px;
}
.home-jovenes > .section-inner {
  padding-bottom: 50px;
}
#programas.home-jovenes > div > .ts-title {
  text-transform: uppercase;
}
#programas.home-jovenes .ts-subtitle {
  font-size: 27px;
  font-weight: 600;
  padding-top: 10px;
}
#programas.home-jovenes ul.resp-tabs {
  display: table;
  float: none;
}
#programas.home-jovenes ul.resp-tabs li {
  display: table-cell;
  position: relative;
  width: 25%;
  float: none;
  font-size: 22px;
  color: #333;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
  background-color: #ebeef1;
  border: 5px solid #fff;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0;
  padding-bottom: 15px;
  overflow: visible;
}
#programas.home-jovenes ul.resp-tabs li:last-child {
  border-right: 0;
}
#programas.home-jovenes ul.resp-tabs li:hover {
  background-color: #002b49;
  color: #fff;
}
#programas.home-jovenes ul.resp-tabs li.active, #programas.home-jovenes ul.resp-tabs li.active:hover {
  background-color: #feda02;
  color: #333;
}
#programas.home-jovenes ul.resp-tabs li:before {
  content: "\f063";
  position: absolute;
  bottom: 111%;
  left: 0;
  right: 0;
  font-family: var(--fa-font-family);
  font-size: 38px;
  font-weight: 600;
  color: #002b49;
  margin: 0 auto;
  opacity: .6;
  transition: opacity .2s, color .2s;
  clear: both;
}
#programas.home-jovenes ul.resp-tabs li.active:before, #programas.home-jovenes ul.resp-tabs li.active:hover:before {
  color: #e50050;
  opacity: 1;
}
#programas.home-jovenes ul.resp-tabs li:hover:before {
  opacity: 1;
}
#programas.home-jovenes ul.resp-tabs li:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid transparent;
  margin: 0 auto;
  transition: border .2s;
}
#programas.home-jovenes ul.resp-tabs li:hover:after {
  border-top: 20px solid #002b49;
}
#programas.home-jovenes ul.resp-tabs li.active:after, #programas.home-jovenes ul.resp-tabs li.active:hover:after {
  border-top: 20px solid #feda02;
}
.home-jovenes .tabs-icon-wrap {
  width: 100%;
  height: 95px;
  margin: 20px 0 10px;
}
.home-jovenes .tabs-icon {
  width: 110px;
  height: 95px;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
.home-jovenes .tabs-icon svg {
  width: 110px;
  height: 95px;
}
.home-jovenes .tabs-icon path, .home-jovenes .resp-tabs li.active:hover .tabs-icon path {
  fill: #333;
}
.home-jovenes .resp-tabs li:hover .tabs-icon path {
  fill: #fff;
  transition: fill .2s;
}
#programas.home-jovenes ul.resp-tabs li p {
  margin: 0;
}
#programas.home-jovenes .resp-tab-wrap {
  box-shadow: none;
}
#programas.home-jovenes .resp-tab-content {
  padding-top: 50px;
  padding-bottom: 50px;
}
#programas.home-jovenes .resp-tab-wrap .camp {
  height: 180px;
  margin-top: 25px;
}
@media only screen and (max-width: 1350px) {
  #programas.home-jovenes .tabs-icon-wrap {
    height: 85px;
  }
  .home-jovenes .tabs-icon {
    width: 100px;
    height: 85px;
  }
  #programas.home-jovenes ul.resp-tabs li {
    font-size: 20px;
  }
}
/*-- Móvil --*/
@media only screen and (max-width: 999px) {
  .resp-tabs, #programas.home-jovenes ul.resp-tabs {
    display: none;
  }
  .resp-tab-drawer-heading {
    display: block;
    position: relative;
    background-color: #002b49;
    font-family: var(--sec-font-family);
    font-size: 15px;
    color: #fff;
    border: none;
    padding: 15px 20px;
    margin: 0 0 7px 0;
    cursor: pointer;
    -webkit-touch-callout: none;
    -ms-user-select: none;
    user-select: none;
    transition: all .2s;
  }
  .resp-tab-drawer-heading:last-child {
    margin: 0;
  }
  #programas.home-jovenes .resp-tab-drawer-heading {
    background-color: #ebeef1;
    font-size: 19px;
    color: #333;
    text-align: left;
    padding: 25px;
    padding-left: calc(30% + 30px);
  }
  #programas.home-jovenes .resp-tab-drawer-heading:hover {
    background-color: #002b49;
    color: #fff;
  }
  .resp-tab-drawer-heading span {
    margin-left: 30px;
  }
  .resp-tab-drawer-heading i {
    position: absolute;
    top: 50%;
    left: 15px;
    font-size: 20px;
    color: #fff;
    transition: color .2s;
    transform: translateY(-50%);
  }
  #programas.home-jovenes .resp-tab-drawer-heading svg {
    position: absolute;
    top: 50%;
    left: calc(25% + 15px);
    width: 65px;
    height: 47px;
    transition: fill .2s;
    transform: translateY(-50%);
  }
  #programas.home-jovenes .resp-tab-drawer-heading svg, #programas.home-jovenes .resp-tab-drawer-heading.d-active:hover svg {
    fill: #333;
  }
  #programas.home-jovenes .resp-tab-drawer-heading:hover svg {
    fill: #fff;
  }
  .resp-tab-drawer-heading span:after {
    content: "\f067";
    position: absolute;
    right: 12px;
    top: 11px;
    font-family: var(--fa-font-family);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    transition: color .2s;
  }
  #programas.home-jovenes .resp-tab-drawer-heading span:after, #programas.home-jovenes .d-active:hover span:after {
    font-size: 22px;
    color: #333;
    right: 25px;
    top: 23px;
  }
  #programas.home-jovenes .resp-tab-drawer-heading:hover span:after {
    color: #fff;
  }
  .d-active {
    background-color: #e50050;
    color: #fff;
  }
  #programas.home-jovenes .d-active, #programas.home-jovenes .d-active:hover, .tipos-programa-jovenes .d-active {
    background-color: #feda02;
    color: #333;
    font-weight: 600;
  }
  .tipos-programa-jovenes .d-active i {
    color: #333;
  }
  .tipos-programa-adultos .d-active {
    background-color: #25bdd4;
  }
  .tipos-programa-ano-escolar .d-active {
    background-color: #b40224;
  }
  .tipos-programa-trabajo .d-active {
    background-color: #71b300;
  }
  .d-active span:after {
    content: "\f068";
    color: #fff;
  }
  #programas.home-jovenes .d-active span:after, .tipos-programa-jovenes .d-active span:after {
    color: #333;
  }
  .resp-tab-content {
    display: none;
    padding: 35px 5vw 25px;
  }
  .home-jovenes .tabs-icon {
    width: 90px;
    height: 75px;
  }
  #programas.home-jovenes .tabs-icon-wrap {
    height: 75px;
  }
  #programas.home-jovenes ul.resp-tabs li {
    font-size: 19px;
  }
}