/*

  Header

============================================================================= */

/*  Override main.css styles
------------------------------------- */

#header {
  height: 72px;
}

.course-container:after {
  content: '';
  display: block;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  height: 400px;
  background: var(--color-primary);
  z-index: -1;
}

/*

  Content

============================================================================= */

/* Section: profiles features
------------------------------------- */

.content section.main-description .register-button-wrapper {
  position: relative;
  height: 6rem;
  width: 100%
}
.main-description .description-course{
  padding: 0 1rem 2rem 1rem;
}
.content section.main-description .title-subtitle-wrapper {
  height: 354px;
  color: #fff;
}

.content section.main-description .title-subtitle-wrapper h2 {
    color: var(--color-light);
  font-family: var(--font-primary) !important;
  font-weight: 400;
}


.content section.main-description .title-subtitle-wrapper .start-now {
  width: 50%;
}

.content section.main-description button.register-button {
  display: block;
  width: 90%;
  border: none;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.content section.main-description .mode-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.content section.main-description .mode-wrapper .icon {
  display: inline-block;
  background-color: #E83853;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}

.content section.main-description .mode-wrapper .icon.grabado {
  background-color: #72c2f8;
}

.content section.main-description .mode-wrapper .label {
  font-size: 18px;
  font-weight: 700;
  line-height: 23.4px;
  margin-left: 12px;
}

/* Section: profiles features
------------------------------------- */

.content section.main-description h1 strong {
  color: var(--color-secondary) !important;
  font-weight: inherit !important;
}


/* Section: profiles features
------------------------------------- */
.content section.profile-features{
    padding: 3rem 0 0 0;
}
.content section.profile-features .feature {
  display: flex;
  justify-content: stretch;
  background: var(--color-sixth);
  font-family: var(--font-secondary);
  font-size: 16px;
  height: 80px;
  margin: 0 1rem 1.5rem 1rem;
  border-radius: 8px;
}
.content section.profile-features .row>*{
    padding: 0;
}

.content section.profile-features .feature img {
  width: 24px;
  margin: 1rem;
}

.content section.profile-features .feature .description {
  display: flex;
  justify-content: start;
  align-items: center;
  height: inherit;
}

/*  Section: mode description
------------------------------------- */

.content section.mode-description .panel {
  display: flex;
  justify-content: stretch;
  padding: 2rem 1rem 2rem 1.5rem;
  background: var(--color-sixth);
}

.content section.mode-description .panel img.icon {
  width: 7rem;
}


.content section.mode-description .panel .description {
  padding-left: 2rem;
}


/*  Section: certificates carousel
------------------------------------- */

.content section.certificates-carousel .description {
  font-size: 1rem;
  line-height: 1.5rem;
}

.content section.certificates-carousel button.arrow {
  transform: scale(0.7);
}

.content section.certificates-carousel figure {
  position: relative;
}

.content section.certificates-carousel figure img {
  max-width: 100%;
  max-height: 20rem;
}



.content section.certificates-carousel button.zoom {
  position: absolute;
  border: none;
  background: #f2f2f2;
  padding: 0.2rem 0.5rem 0.4rem 0.5rem;
  border-radius: 0.3rem;
  z-index: 1;
  bottom: 1rem;
  right: 1.2rem;
}

.content section.certificates-carousel button.zoom img {
  width: 1.2rem;
  transition: width 500ms;
}

.content section.certificates-carousel button.zoom:hover img {
  width: 1.3rem;
}

.content section.certificates-carousel .animated {
  position: absolute;
  top: 6rem;
  opacity: 0;
  transition: all 500ms;
  transform: translateX(-100%);
}



.content section.certificates-carousel .animated__slidein {
  opacity: 1;
  transform: translateX(0);
}

.content section.certificates-carousel .animated__fadeout {
  opacity: 0;
  transform: translateX(100%);
}
.content section.certificates-carousel{
	height: auto;
}
.certificates-images-cnt figure:first-child{
	margin: 0 3rem 0 0;
}
.certificates-images-cnt figure {
	flex: 1;
}
.certificates-images-cnt figure img {
	height: 222px;
  cursor: pointer;
}
.content section.scholarships{
	margin-top: 4rem;
}


/*  Section: certificates list
------------------------------------- */

.content section.certificates-list .certificate {
  padding: 1rem;
  border: 0.08125rem solid var(--color-secondary);
}

.content section.certificates-list .certificate img.icon.ok {
  width: 2rem;
}

.content section.certificates-list .certificate .prices {
  text-align: center;
}
.title-accordeon{
    cursor: pointer;
}
.certificates-images-cnt{
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin: 2rem 0 1.5rem 0;
}

.content section.certificates-list .certificate .label {
  font-size: 0.875rem;
  line-height: 0.875rem;
}


/*  Section: benefits
------------------------------------- */

.content section.benefits .title-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
}

.content section.benefits .title {
  font-family: var(--font-primary) !important;
  margin-left: 25px;
  margin-bottom: 0;
  font-weight: 400;
}
.content section.benefits .other-benefits .title {
  color: var(--color-light);
  
}


.content section.benefits .icon {
  border-radius: 50%;
  height: 48px;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
}


.content section.benefits .big {
  background: var(--color-secondary);
  border-radius: 8px;
  margin-bottom: 24px;
  padding: 42px;
}

.content section.benefits .big .title {
  eennaryrfont-size: 40px;
}


.content section.benefits .big h3 {
  font-size: 40px;
}

.content section.benefits .big .description {
  font-size: 18px;
  line-height: 23px;
  margin-top: 32px;
}



.content section.benefits .big .icon {
  background: var(--color-primary)
}


.content section.benefits .small {
  background-color: var(--color-primary);
  border-radius: 8px;
  padding: 35px;
  height: 100%;
}

.content section.benefits .small{
  color: white;
}

.content section.benefits .small .description {
  font-size: 16px;
  line-height: 20.8px;
  color: white;
  margin-top: 32px;
}

.content section.benefits .small .icon {
  background: white;
}

.content section.benefits .other-benefits h4.title {
    font-size: 20px;
    line-height: 34px;
}

.content section.benefits .other-benefits > div {
    padding: 10px;
}

/*  Section: scholarship
------------------------------------- */

.content section.scholarships {
  background: var(--color-sixth);
  margin-top: 6rem;
  padding-top: 32px;
  padding-bottom: 32px;
}




.content section.scholarships img.ribbon {
  width: 95px;
}


.content section.scholarships p {
  font-size: 16px;
}

/* Section: course content
------------------------------------- */

section.course-content .items-wrapper .item h4,
section.course-content .items-wrapper .item h5,
section.course-content .items-wrapper .item .description
{
  font-family: var(--font-secondary);
  color: var(--color-gray);
}

section.course-content .items-wrapper .item h4 {
  font-size: 18px;
  font-weight: 700;
}

section.course-content .items-wrapper .item h5 {
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 400;
}

section.course-content .items-wrapper .item .description {

}

/* Section: schedule
------------------------------------- */

.content section.schedule-wrapper .schedule {
  width: 100%;
  background-color: var(--color-sixth);
  padding-bottom: 2rem;
  padding-top: 2rem;
  margin:0;
}

.content section.schedule-wrapper .dates {
  padding-top: 1.5rem;
  padding-left: 3rem;
  padding-bottom: 1rem;
}

@media (max-width: 767px) {

  .content section.schedule-wrapper .dates {
	  padding-left: 0;
  }
	
  .schedule .dates h2,
  .schedule .dates h4 {
    text-align: center;
  }
}

.content section.schedule-wrapper .dates h4,
.content section.schedule-wrapper .time h4 {
  font-size: 1.1rem;
  font-weight: 700;

}

.content section.schedule-wrapper .dates h2,
.content section.schedule-wrapper .time h2 {
  font-size: 1rem;
  font-weight: 400;

}

.content section.schedule-wrapper .dates h5,
.content section.schedule-wrapper .time h5 {
  margin-top: 0.3rem;
}


.content section.schedule-wrapper .time {
  text-align: center;
  border-left: 1px solid var(--blue-gray20);
  padding-bottom: 1rem;
}

.content section.schedule-wrapper .time img {
  width: 2.5rem;
}

.content section.schedule-wrapper .time .range {
  display: none;
}

.content section.schedule-wrapper .time .range.active {
  display: block;
}

.content section.schedule-wrapper .time figure {
  height: 64px;
  width: 64px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 0 auto 24px auto;
}

.content section.schedule-wrapper .time figure img {
  height: 40px;
}


.content section.schedule-wrapper .flags img {
  width: 3rem;
  margin: .5rem .5rem 0;
  cursor: pointer;
}

.content section.schedule-wrapper .recorded {
  padding-top: 1rem;
  text-align: center;
}

.content section.schedule-wrapper .recorded img {
  width: 4rem;
}

.content section.schedule-wrapper .recorded h5 {
  font-size: 1.5rem;
}

.content section.schedule-wrapper .sessions {
  padding-top: 1rem;
  text-align: center;
}

.content section.schedule-wrapper .sessions img {
  width: 3.5rem;
}

.content section.schedule-wrapper .sessions h5 {
  font-size: 1.5rem;
}

/*

  Sidebar

============================================================================= */

.placeholder {
  background: transparent;
}

.purchase-panel-wrapper,.fomr-wrapper{
  width: 450px;
}
.purchase-panel-wrapper {
  position: absolute;
  top: 230px;
  z-index: 1;
}

.purchase-panel-wrapper.floating {
  position: fixed;
  top: 0;
}
.purchase-panel-wrapper.floating .purchase-panel > figure {
  display: none;
}

.purchase-panel,
.info-panel,
.form-panel {
  border-radius: 1.2rem;
  background: white;
  border: 1px solid #E8ECF2;
}

.purchase-panel h6,.form-panel h6 {
  padding: 2rem 1.5rem 0 1.5rem;
}

.form-panel > p,
.purchase-panel > p {
  /*padding-left: 3rem;*/
}

@media (max-width: 991px) {
  .purchase-panel-wrapper {
    position: relative;
    top: unset;
    z-index: unset;
    width: 100%;
    display: block;
  }
}


/* Course image
------------------------------------- */

.purchase-panel .course-image {
  border-radius: 8px 8px 0 0;
  margin-left: -1px;
  margin-top: -1px;
  width: 101% !important;
  height: 222px;
}

@media (max-width: 991px) {
  .purchase-panel .course-image {
    display: none;
  }
}

/* Prices
------------------------------------- */

.purchase-panel .prices-wrapper {
  height: 100px;
}

@media (max-width: 991px) {
  .purchase-panel .prices-wrapper {
    display: none !important;
  }
}

.purchase-panel .price {
  text-align: center;
  font-family: var(--font-secondary);
}

.purchase-panel .price.before {
  font-family: var(--font-secondary);
  font-size: 16px;
  text-decoration: line-through;
  color: #566477;
}

.purchase-panel .price.now {
  color: var(--color-gray1);
  font-family: var(--font-secondary);
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 600;
}

/* Purchase button
------------------------------------- */

.purchase-panel .purchase-now {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 44px;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 600;
  color: black;
  border: none;
  border-radius: 4px;
  background-color: var(--color-secondary);
}

@media (max-width: 991px) {
  .purchase-panel .purchase-now-wrapper {
    display: none !important;
  }
}

/* Purchase features
------------------------------------- */

.purchase-panel .purchase-features {
  padding: 2rem 2rem 0 2rem;
  margin: 0;
  list-style: none;
}

.purchase-panel .purchase-features li {
  display: flex;
  justify-content: stretch;
  align-items: start;
}

.purchase-panel .purchase-features li figure {
  overflow: hidden;
}

.purchase-panel .purchase-features li figure img {
  margin-right: 1.5rem;
  width: 20px;
  height: 20px;
}

.purchase-panel .purchase-features li p {
  width: 82%;
  font-size: 14px;
}

/* Service features
------------------------------------- */

.purchase-panel .service-features {
  padding-top: 1.5rem;
  padding-left: 3rem;
  list-style: none;
}

.purchase-panel .service-features  li {
  margin-bottom: 0.5rem;
  display: flex;
}

.purchase-panel .service-features li img {
  width: 1.1rem;
  margin-right: 1rem;
}

/* Brochure item
------------------------------------- */

.brochure.separator {
  border-top: 1px solid #e8ecf2;
  margin: 24px 30px 24px 30px;
}

.brochure-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  background-color: var(--color-secondary);
  border-radius: 6px;
  border: none;
  height: 72px;
  margin: 0 30px 0 30px;
  padding: 0 16px;
}

.brochure-item p,
.brochure-item figure {
  margin: 0;
}

.brochure-item p {
  flex: 1;
  font-family: var(--font-secondary) !important;
  font-size: 0.9rem !important;
  color: #313c4c;
}

.brochure-item figure:last-of-type {
  background: var(--color-primary);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brochure-item figure:last-of-type img {
  width: 16px
}

/* Service teachers
------------------------------------- */
.content section.teachers-wrapper{
  padding: 1rem 0;
}
.content section.teachers-wrapper .teacher {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.content section.teachers-wrapper .teacher .logos {
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
}

.content section.teachers-wrapper .teacher .logos img {
  height: 21px;
  width: unset;
}

.content section.teachers-wrapper .teacher figure {
  hidden: 18rem;
  overflow: hidden;
  width: 200px;
  border-radius: 8px;
}

.content section.teachers-wrapper .teacher figure img {
  border-radius: 8px;
  height: 250px;
}

.content section.teachers-wrapper .teacher .description {
  text-align: center;
  font-size: 14px;
}

.content section.teachers-wrapper .teacher .description p {
  font-size: 14px;
  font-family: var(--font-secondary);
  line-height: 1.1rem;
}

.content section.teachers-wrapper .teacher .description {
  height: 60px;
  overflow: hidden;
}

.content section.teachers-wrapper .teacher .description.shown {
  height: auto;
  overflow: unset;
}

/*
Show more buttons
----------------------------------------*/

.show-more {
  cursor: pointer;
  margin-top: 0 !important;
}

.show-more span {
    font-size: 14px;
}

.show-more.shown .more {
  display: none;
}

.show-more:not(.shown) .less {
  display: none;
}

.show-more img {
  width: 14px;        
  transition: all 500ms;
}

.show-more.shown img {
  transform: rotate(180deg);
}

/* Contact form
------------------------------------- */

.purchase-panel form {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.purchase-panel form a {
  color: #000;
  font-weight: 700;
}

.purchase-panel form span.label {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 5px;
  color: #566477;
}

.purchase-panel form input[type=text] {
  width: 100%;
  height: 48px;
  border: 1px solid #d0d9e4;
  padding: 0.8rem 0.5rem 0.8rem 1rem;
  font-size: 14px;
  margin-bottom: 1.3rem;
  border-radius: 8px;
}

.purchase-panel form input[type=text]::placeholder {
  color: silver;
  font-weight: 700;
}

.purchase-panel form button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 44px;
  font-family: var(--font-secondary);
  font-size: 16px;
  color: #000;
  border: none;
  border-radius: 4px;
  background-color: var(--color-secondary);
}
.purchase-panel .purchase-features{
	padding: 2rem 1.5rem 0 1.5rem;
}
.purchase-panel .purchase-features li p{
	width: 100%;
}
.purchase-panel .purchase-features figure, .purchase-panel .purchase-features p{
	margin: 0 0 0.5rem 0;
}
.brochure.separator, .brochure-item{
	margin: 1.5rem;
}
.purchase-panel h2{
	padding: 0;
	margin: 2.5rem 1.5rem 0 1.5rem !important;
}
.purchase-panel form input[type=text]{
	margin: 0 0 0.5rem 0;
}
.purchase-panel form button{
	margin: 1.5rem 0 0 0;
}
.text-danger{
	margin: 0 0 0.5rem 0 !important;
}
.row>*{
	padding: 0 1rem;
}
.accordion.big .items-wrapper{
	margin: 0;
}
.faq .row{
	margin: 0;
}

.content section.teachers-wrapper .teacher .logos img{
	margin: 0.5rem;
}
section.features .feature{
	height: auto !important;
	padding: 1.5rem;
}

/* Floating purchase button
------------------------------------- */

#floating-purchase-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 1rem 0 1rem 0;
}

#floating-purchase-button button {
  width: auto;
  height: 48px;
  font-size: 1rem;
  padding: 0 1.5rem;
}

#floating-purchase-button a {
  width: auto;
  height: 48px;
  font-size: 1rem;
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Checkboxes
------------------------------------- */

.conditions a {
  text-decoration: underline;
}

span.error {
  font-size: 13px;
}

/* CSS for styling the custom checkbox */
.custom-checkbox-container {
  display: inline-block;
  vertical-align: middle;
}
.custom-checkbox-label {
  display: inline;
  margin-left: 15px;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: 14px;
}
.custom-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0
}
.custom-checkbox-input:checked::after {
  content: '\2713';
  font-size: 16px;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about-course{
    padding: 2.5rem 1rem 1rem;
}


@media (max-width: 47.99875rem) {
  .content section.schedule-wrapper .flags img {
    width: 2.3rem;
  }
  .content section.schedule-wrapper .dates h4,
  .content section.schedule-wrapper .time h4 {
    font-size: 0.8rem;
  }

  .content section.schedule-wrapper .dates h5,
  .content section.schedule-wrapper .time h5 {
    font-size: 1rem;
  }
  .content section.certificates-list .certificate img.icon.ok {
    width: 1.5rem;
  }

  .content section.certificates-list .certificate .prices {
    text-align: left;
  }
    .content section.certificates-carousel figure img{
    	max-width: 100%;
    }
    section.features .feature{
    	padding: 0 1.5rem 1.5rem;
    }
	.content section.scholarships {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
  .content section.main-description h1 {
    font-size: 2rem;
    line-height: 2rem;
  }
  .content section.mode-description .panel img.icon {
    width: 4rem;
  }
  .content section.certificates-carousel figure img {
    max-width: 80%;
  }
  .content section.main-description .title-subtitle-wrapper {
    height: auto;
    padding: 4rem 1rem 0 1rem;
  }
  .content section.main-description .title-subtitle-wrapper .start-now {
    width: 100%;
  }
}
@media (max-width: 35.999rem) {
    .content section.certificates-carousel figure img {
        max-width: 100%;
    }
    .content section.certificates-carousel .animated {
        top: 4rem;
    }
    .free-class{
        margin-bottom: 24px;
    }
    .certificates-images-cnt{
        flex-direction: column;
        margin: 2.5rem 0 0 0;
    }
    .certificates-images-cnt figure:first-child{
        margin: 0 0 2.5rem 0;
    }
    .course-container:after{
        display: none;
    }
    .banner-course-cnt{
        background-color: var(--color-black);
        color: var(--color-light);
    }
    .form-wrapper{
        margin: 0 0 3rem;
    }
}
@media (max-width: 1400px) {
  .purchase-panel-wrapper,.fomr-wrapper{
    width: auto;
  }
}

/* Telephone codes selector
------------------------------------- */


.mobile-wrapper .telephone-code-selector {
	top: 10px;
	left: 10px;
}

.mobile-wrapper input {
	padding-left: 60px !important
}


/* Startup sidebar
------------------------------------- */

.startup-sidebar {
    padding-top: 80px;
    padding-bottom: 70px;
}

.startup-sidebar .description {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center !important;
  display: block;
}

.startup-sidebar .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.startup-sidebar .logo-container img {
    height: 23px;
}