/* Home */
#home-section .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  background-color: var(--blue);
  color: var(--white);
}

#home-section .intro-row {
  background-image: url('/wp-content/uploads/about-slide1-background.jpg');
  background-size: cover;
  background-position: center;
  height: calc(100vh - (65px + 2rem))
}

#home-section .intro-row .text-container {
  position: absolute;
  top: 50%;
  right: 18%;
  width: 330px;
  transform: translate(0, -50%);
}

/* about */
#about-section .video-container {
  background-color: var(--blue);
  color: var(--white);
}

#about-section .video-container iframe{width: 100%;height: 400px;}

#about-section .swiper-container {
  width: 100%;
  height: 725px;

  --swiper-pagination-bullet-inactive-color: gray;
  --swiper-pagination-color: white;
}

#about-section .swiper-container .swiper-slide {position: relative;}

/* About : slide 1 */
#about-section .swiper-container .swiper-slide.slide1 {
  background-image: url('/wp-content/uploads/about-slide1-background.jpg');
  background-size: cover;
  background-position: center;
}

#about-section .swiper-slide.slide1 .text-container {
  position: absolute;
  top: 50%;
  left: 62vw;
  width: 400px;
  transform: translate(0, -50%);
}

/* About : slide 2 */
#about-section .swiper-container .swiper-slide.slide2 {
  background-image: url('/wp-content/uploads/about-slide2-foreground.png'), url('/wp-content/uploads/about-slide2-background.jpg');
  background-size: auto, cover;
  background-position: -118px 100%, center;
  background-repeat: no-repeat;
}

#about-section .swiper-slide.slide2 .text-container {
  position: absolute;
  transform: translate(0, -50%);
}

#about-section .swiper-slide.slide2 .text-container.first-block {
  top: 25%;
  left: 6%;
  width: 295px;
}

#about-section .swiper-slide.slide2 .text-container.second-block {
  top: 25%;
  right: 18%;
  width: 345px;
  padding-left: 2rem;
  /* background-image: url("data:image/svg+xml,%3csvg width='8px' height='400px' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='3px' y1='0px' x2='3px' y2='200px' stroke='white' stroke-width='6' stroke-dasharray='1%2c18' stroke-dashoffset='5' stroke-linecap='round'/%3e%3c/svg%3e"); */
  background-repeat: no-repeat;
}

#about-section .swiper-slide.slide2 .content-icons {
  display: flex;
  right: 10%;
  top: 55%;
  width: 500px;
}

#about-section .swiper-slide.slide2 .text-container.fourth-block {
  top: 35%;
  left: 510px;
  width: 400px;
}

#about-section .swiper-slide.slide2 .content-icon-container.cuentos {margin-top: 0rem;}
#about-section .swiper-slide.slide2 .content-icon-container.actividades {margin-top: 0.75rem;}
#about-section .swiper-slide.slide2 .content-icon-container.audiolibros {margin-top: 1.75rem;}
#about-section .swiper-slide.slide2 .content-icon-container.canciones {margin-top: 4rem;}

.swiper-slide.slide2 .content-icon-container.canciones svg {width: auto;height: 55px;}
.swiper-slide.slide2 .content-icon-container svg path {fill: var(--epm-light-green);}

/* About : Shared : Content icon */
.content-icons {
  display: flex;
  justify-content: space-around;
}

.content-icon-container {
  position: relative;
  min-width: 100px;
  min-height: 100px;
}

.content-icon-container .icon-background {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.content-icon-container .svg-container {
  z-index: 1;
  position: relative;
  padding-top: 1rem;
}

.content-icon-container svg {
  width: auto;
  height: 50px;
  margin-bottom: 0.25rem;
}
.content-icon-container svg path {fill: currentColor;}
.content-icon-container .icon-text {
  z-index: 1;
  position: relative;
  white-space: nowrap;
}

/* About : slide 3 */
#about-section .swiper-container .swiper-slide.slide3 {
  background-image: url('/wp-content/uploads/about-slide3-background.jpg');
  background-size: cover;
  background-position: center;
}

#about-section .swiper-slide.slide3 .text-container {
  position: absolute;
  top: 48%;
  left: 25%;
  width: 465px;
  transform: translate(-50%, -50%);
}
.swiper-slide.slide3 .content-icon-container svg path {fill: var(--light-blue);}

/* About : slide 4 */
#about-section .swiper-container .swiper-slide.slide4 {
  background-image: url('/wp-content/uploads/about-slide4-foreground.png'),
    url('/wp-content/uploads/about-slide4-background.png');
  background-size: 950px, cover;
  background-position: -30px 100%, center;
  background-repeat: no-repeat;
}

#about-section .swiper-slide.slide4 .text-container {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 465px;
  transform: translate(-50%, -50%);
}

#about-section .swiper-slide.slide4 .text-container.first-block {
  top: 25%;
  left: 15%;
  width: 210px;
}

#about-section .swiper-slide.slide4 .text-container.second-block {
  top: 30%;
  left: 695px;
  width: 288px;
  padding: 1rem;
  background-image: url(/wp-content/uploads/about-slide4-textbubble.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#about-section .swiper-slide.slide4 .third-block {
  left: 76%;
  top: 380px;
  width: 510px;
}

#about-section .swiper-slide.slide4 .third-block img {
  height: 75px;
  width: auto;
}

#about-section .swiper-slide.slide4 .third-block img:nth-child(3) {
  height: auto;
  width: 75px;
}

/* About : separator */
#about-separator svg {
  height: 30px;
}

/* about : epm */
#about-epm {
  background-color: #f3f6f7;
}

#about-epm .epm-logo {
  max-height: 50px;
}

#about-section .placeholder-row .col-12 {
  height: 400px;
  position: relative;
}

#about-section .placeholder-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#about-section .placeholder-row h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* about summary */
#about-summary .header-row {border-radius: 50px 50px 0 0;}
#about-summary .header-row img {    
  height: 75px;
  padding-right: 1rem;
}

#about-summary .summary-row .left-column .content-container {
  border: dotted var(--green) 3px;
  border-top: none;
  border-radius: 0 0 0 50px;

}
#about-summary .summary-row .right-column .content-container {
  border: dotted var(--light-blue) 3px;
  border-top: none;
  border-radius: 0 0 50px 0;
}

#about-summary .level-header-container img {height: 40px; padding-right: 0.5rem;}
#about-summary .content-icon-container {min-width: 60px;}
#about-summary .content-icon-container .icon-background {
  width: 60px;
  height: 60px;
}
#about-summary .content-icon-container svg {height: 30px;color: var(--blue);}
#about-summary .content-icon-container .icon-text {font-size: 0.8em;}

/* Shared */
/* Shared : download row */
.aldea.download-row .title-container img{height: 25px;padding-right: 1rem;}
.aldea.download-row .download-button i{padding-right: 1rem;}
/* Shared : actions-row */
.aldea.actions-row {
  background: url('/wp-content/uploads/bottom-row-background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.aldea.actions-row .button img {height: 25px;}
.aldea.actions-row .text-container img {padding-left: 0.5rem; height: 16px;}

/* primera */
#basica-section .video-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  background-color: var(--blue);
  color: var(--white);
}

#primera-main-section .video-container {
  background-color: var(--blue);
  color: var(--white);
}

#primera-main-section .video-container iframe {
  width: 100%;
  min-height: 600px;
}

#primera-main-section .abilites-icons .ability-icon-container {
  max-width: 115px;
}

#primera-main-section .abilites-icons .ability-icon-container img {
  height: 60px;
  margin-bottom: 0.5rem;
}

#primera-main-section .abilites-icons .ability-icon-container div {
  line-height: 1;
}

#primera-main-section .download-container .download-button {
  width: 400px;
  max-width: 100%;
  border-radius: 20px;
  background-color: var(--green);
  color: var(--white);
  margin: 0 auto;
}

#primera-main-section .download-container .download-button:hover {
  background-color: var(--epm-light-green);
}

#primera-main-section .actions-row .button {
  color: var(--green);
}

/* primera book */
.aldea.download-row .svg-container svg {height: 30px;width: auto;}

#primera-book-section .video-container,
#primera-activities-section .video-container,
#primera-song-section .video-container,
#primera-song-section .ui-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px;
  background-color: var(--blue);
  color: var(--white);
}
#primera-book-section .video-container iframe	{width: 100%; height: 100%;}

.primera-section .actions-row .button-container .button{line-height: 1;}
.primera-section  .actions-row .button-container svg{height: 30px;width: auto;}

/* primera actividades */
#primera-activities-section .content-row {min-height: 400px;}
#primera-activities-section .video-container iframe{width:100%;height:100%;border: none;}

/* primera canciones */
#primera-song-section .first-row iframe {
  width: 100%;
  min-height: 600px;
}

#primera-song-section .song-sidebar-container button{
  width: 100%;
  transition: background-color 0.75s ease-in-out;
}
#primera-song-section .song-sidebar-container.active button{background-color: var(--light);}
#primera-song-section .song-sidebar-container .index-container {position: relative;}
#primera-song-section .song-sidebar-container .index-number,
#primera-song-section .song-sidebar-container .index-icon {
  transition: opacity 0.5s ease-in-out;
}
#primera-song-section .song-sidebar-container .index-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0.8em;
  transform: translate(-50%, -50%);
}
#primera-song-section .song-sidebar-container.active .index-container .index-number{opacity: 0;}
#primera-song-section .song-sidebar-container:not(.active) .index-container .index-icon{opacity: 0;}
#primera-song-section .song-sidebar-container .thumbnail-container img{height:90px;min-width:160px;}
#primera-song-section .song-sidebar-container .title-container{flex-grow: 1;}

#primera-song-section .song-descriptions .song-header {
  padding: 0.25rem 0.3rem 0.25rem 1rem;
  border-radius: 0 25px 25px 0;
}

#primera-song-section .song-header .svg-container {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  line-height: 1;
  background-color: var(--white);
}

#primera-song-section .song-header .svg-container svg {
  height: 75%;
  width: 75%;
  color: var(--light-blue);
}

#primera-song-section .song-header .svg-container svg path {fill: currentColor;}

#primera-song-section .song-content {
  font-size: 1.15em;
}

#primera-song-section .song-content ol {
  list-style-position: inside;
  padding: 0;
}

/* shared : download modal */
.modal-root.download-modal {
  position: absolute;
  top: calc(65px + 2rem);
  width: 100%;
  height: calc(100% - (65px + 2rem) - (139.68px + 6rem))
}

.modal-root.download-modal .modal-overlay {
  background: url('/wp-content/uploads/site-download-form-foreground.png'),
  url('/wp-content/uploads/site-download-form-background.jpg');
  background-size: 1600px 900px, cover;
  background-repeat: no-repeat;
  background-position: 30% 5vh, center;
  background-color: unset;
}

.modal-root.download-modal .modal-dialog {
  top: 230px;
  width: 800px;
  max-width: 90%;
  padding: 2rem 0.5rem;
  transform: translate(-50%,0);
}

#download-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

#download-form .input-container {
  padding: 3px;
  margin: 0 0 6px;
}

#download-form input,
#download-form select {
  max-width: 100%;
}

#download-form input[type="text"],
#download-form input[type="email"],
#download-form select {
  width: 100%;
  padding: 2px 8px;
  border: none;
  border-radius: 25px;
  background-color: var(--blue);
  color: white;
}

#download-form .wpcf7-response-output {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--epm-dark-green);
}

#download-form .wpcf7 form.invalid .wpcf7-response-output, 
#download-form .wpcf7 form.unaccepted .wpcf7-response-output, 
#download-form .wpcf7 form.payment-required 
#download-form .wpcf7-response-output {
  border-color: var(--yellow);
}

#download-form .download-message {display: none;}
#download-form .input-type-radio .first {margin: 0;}
#download-form .input-container.datos .wpcf7-list-item {margin: 0;}

#download-form.hide-info-fields .fill-message,
#download-form.hide-info-fields .name,
#download-form.hide-info-fields .email,
#download-form.hide-info-fields .input-type-radio,
#download-form.hide-info-fields .institucion,
#download-form.hide-info-fields .location,
#download-form.hide-info-fields .datos {display: none;}
#download-form.hide-info-fields .download-message {display: block;}

/* basica */
#basica-coming-soon-section {
  height: calc(100vh - (65px + 2rem));
  width: 100%;
  background-image: url('/wp-content/uploads/coming-soon-background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#basica-coming-soon-section .text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
}

#basica-coming-soon-section .text-container svg path {fill:currentColor}

#basica-coming-soon-section .content-icon-container{min-width:125px;}
#basica-coming-soon-section .content-icon-container .icon-background{width:125px;height:125px;}
#basica-coming-soon-section .content-icon-container svg{height: 60px;margin-bottom: 0.5rem;}
#basica-coming-soon-section .content-icon-container .icon-text{font-size: 1.2em;}

/* basica main */
#basica-main-section  .abilites-icons .ability-icon-container {max-width: 115px;}
#basica-main-section  .abilites-icons .ability-icon-container img {
  height: 60px;
  margin-bottom: 0.5rem;
}
#basica-main-section .abilites-icons .ability-icon-container div {line-height: 1;}

#basica-main-section .video-container {
  background-color: var(--blue);
  color: var(--white);
}

#basica-main-section .video-container iframe {
  width: 100%;
  min-height: 600px;
}

#basica-main-section .download-container .download-button {
  width: 400px;
  max-width: 100%;
  border-radius: 20px;
  background-color: var(--blue-basic);
  color: var(--white);
  margin: 0 auto;
}
#basica-main-section .download-container .download-button:hover {background-color: var(--light-blue);}

#basica-main-section .aldea.actions-row {
  background: url('/wp-content/uploads/bottom-row-basica-background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
#basica-main-section .actions-row .button {color: var(--blue-basic);}
#basica-main-section .actions-row .button:hover {background-color: var(--summary-blue);}

/* basica book */
#basica-book-section .first-row .area-container {
  width: 100%;
  height: 725px;
  background-image: url('/wp-content/uploads/basica-intro-foreground.png'),
    url('/wp-content/uploads/about-slide4-background.png');
  background-size: 1100px, cover;
  background-position: -30px 100%, center;
  background-repeat: no-repeat;
}

#basica-book-section .first-row .text-container {
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%);
}

#basica-book-section .first-row .text-container.first-block {
  top: 32%;
  left: 659px;
  width: 288px;
  padding: 1.25rem 3.5rem;
  background-image: url(/wp-content/uploads/about-slide4-textbubble.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#basica-book-section .first-row .text-container.second-block {
  top: 54%;
  left: 1300px;
  width: 500px;
}

#basica-book-section .stories-row .header span {padding-right: 0.5rem;}
#basica-book-section .stories-row .header img {height: calc(1rem * 1.2);}

#basica-book-section .stories-row .d-grid {display: grid;}
#basica-book-section .stories-row .area-container {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 2rem;
}

#basica-book-section .stories-row .area-container img {
  margin-bottom: 1rem;
  border-radius: 15px;
}

#basica-book-section .stories-row .area-container .story-link {
  border-radius: 15px;
  padding: 0.5rem;
  background-color: currentColor;
}

#basica-book-section .stories-row .area-container .text-container {padding: 0 1rem;}

/* basica storie */
.basica-story .header-row .svg-container {line-height: 0;}
.basica-story .header-row .svg-container svg {height: 0.9rem;}

.basica-story .youtube-row .area-container{line-height: 0;}
.basica-story .youtube-row iframe {width: 100%;height: 725px; padding-bottom: 1rem;}
.basica-story .issuu-row .area-container{line-height: 0;}
.basica-story .issuu-row iframe {width: 100%;height: 725px;}

.basica-story .stories-row #stories-swiper {padding: 0 1.5rem;}
.basica-story .stories-row .swiper-button-prev, .basica-story .stories-row .swiper-rtl .swiper-button-next{left: 0;}
.basica-story .stories-row .swiper-button-next, .basica-story .stories-row .swiper-rtl .swiper-button-prev{right: 0;}
.basica-story .stories-row .swiper-button-prev::after, .basica-story .stories-row .swiper-rtl .swiper-button-next::after{content: unset;}
.basica-story .stories-row .swiper-button-next::after, .basica-story .stories-row .swiper-rtl .swiper-button-prev::after{content: unset;}

.basica-story .stories-row .swiper-button-next, .basica-story .stories-row .swiper-button-prev{font-size: 4rem;}

.basica-story .stories-row .area-container img {
  margin-bottom: 1rem;
  border-radius: 15px;
}
.basica-story .stories-row .area-container .story-link {
  display: inline-block;
  margin: 0 1.5rem;
  border-radius: 15px;
  padding: 0.5rem;
  background-color: currentColor;
}
.basica-story .stories-row .area-container .text-container {padding: 0 1rem;}