/*Root*/
:root {
    --blue: #00b2b8;
    --blue-opacity: #00b2b865;
    --deep-blue: #261E53;
    --deep-blue-opacity: #261e5359;
    --gradient: linear-gradient(180deg, #00ACB5 48%, #00868d 89%);
    --box-grey-bg: rgba(217, 217, 217, 0.233);
    --container: 70%;
}

/*---------- RESPONSIVE DESKTOP -----------*/

/*----------Responsive Desktop 1 (Mi pantalla) -----------*/
@media only screen
and (max-width: 1920px) {
}

/*----------Responsive Desktop 2 -----------*/
@media only screen
and (max-width: 1536px) {
    .training-card.noimage p {
        width: auto;
    }
    .training-card-container {
        gap: 50px;
    }
    .training-card {
        background-size: 40%;
    }
    .training-card.last {
        background-position-x: 50px;
    }
    .programmes-page {
        --container: 80%
    }
    .box-icon {
        width: 100px;
        right: -20px;
    }
    .hero-training-title {
        font-size: 125px;
    }
    .coaches-container-parent h2, .coaches-container-parent h5 {
        text-align: center;
    }
    .hero-training-title {
        font-size: 100px;
    }
    .location-page {
        --container: 80%
    }
    .gallery {
        width: 65%;
    }
    .hero-programmes.contact {
        background-position: 0;
    }
}

/*----------Responsive Desktop 3 -----------*/
@media only screen
and (max-width: 1440px) {
    .s1-programmesfeat-boxes {
        gap: 50px;
    }
    .gradient-box, .grey-box {
        height: 300px;
    }
    .s2-education-text p {
        width: 80%;
    }
    .s2-education-text {
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: end;
    }
    .hero-training-title {
        font-size: 115px;
    }
    .coaches-container {
        width: 80%;
    }
    .title.coach-info {
        font-size: 40px;
    }
    .text-overlay {
        width: 50%;
    }
    .watermark {
        height: 60px;
    }
}

/*----------Responsive Desktop 4 -----------*/
@media only screen
and (max-width: 1366px) {
    :root {
        --container: 80%;
    }
    .menu-box h3 {
        font-size: 25px;
    }
    .menu-box {
        padding: 15px 20px;
        width: 275px;
    }
    .hero-training-title {
        font-size: 100px;
    }
    .gallery {
        width: 70%;
    }
    .gallery-image {
        height: 400px;
    }
    .watermark {
        height: 70px;
    }
}

/*----------Responsive Desktop 5 -----------*/
@media only screen
and (max-width: 1280px) {
    .training-card.last {
        background-position-x: 20px;
    }
    .hero-training-title {
        font-size: 100px;
    }
    .hero-programmes.team {
        background-position: 0;
    }
    .gallery-image {
        height: 350px;
        width: 300px;
    }
    .watermark {
        height: 65px;
    }
}



/*---------- RESPONSIVE TABLET -----------*/

/*----------Responsive Tablet (iPad Air horizontal) -----------*/
@media only screen 
  and (max-width: 1180px) {
    :root {
        --container: 90%;
    }
    .gradient-box p, .grey-box p {
        font-size: 15px;
    }
    h3.headline {
        font-size: 50px;
    }
    span.overlay-text {
        font-size: 100px;
    }
    .s2-education-image {
        display: flex;
        align-items: center;
    }
    .s2-education-text p {
        width: 100%;
    }
    .s2-education-image img {
        width: 400px;
    }
    .s2-education-container {
        gap: 50px;
    }
    .hero-programmes {
        background-size: auto;
    }
    .programmes-content-services {
        gap: 100px;
    }
    .text-overlay {
        width: 60%;
    }
    .grey-box.location h3, .gradient-box.location h3 {
        font-size: 18px;
    }
    .s1-programmesfeat-boxes {
        gap: 25px;
    }
    .watermark {
        height: 67px;
    }
}

/*----------Responsive Tablet (iPad Air vertical) -----------*/
@media only screen 
  and (max-width: 820px) {
    .menu-toggle {
        display: flex;
        z-index: 1000;
        position: relative;
    }
    /* .menu-toggle .bar {
        transform-origin: left;
    }
    .menu-toggle:hover .bar:first-child {
        transform: rotate(45deg);
    }
    .menu-toggle:hover .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle:hover .bar:nth-child(3) {
        transform: rotate(-45deg);
    } */
    .navbar-list li {
        font-size: 25px;
        right: -200px;
        position: relative;
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .navbar-list {
        opacity: 0;
        position: absolute;
        flex-direction: column;
        top: 10px;
        right: 10px;
        padding: 125px 65px;
        align-items: end;
        background-color: var(--blue);
        height: auto;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
        border-radius: 20px;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }
    .navbar-list li a .contact-button {
        background: none;
        padding: 0;
        font-size: 25px;
    }
    .navbar-list.active {
        opacity: 1;
        pointer-events: all;
    }
    .navbar-list li.active {
        right: 0px;
        opacity: 1;
    }
    .features-container {
        flex-direction: column;
        gap: 75px;
    }
    .features-text {
        text-align: center;
    }
    .align-left {
        text-align: center;
    }
    .complex {
        margin-top: 150px;
    }
    footer {
        flex-direction: column;
        gap: 50px;
        padding: 40px 40px;
    }
    footer .logo {
        text-align: center;
    }
    footer .logo img {
        width: 125px;
    }
    .footer-container {
        width: 100%;
    }
    .hero-training-title {
        text-align: center;
    }
    .hero-training {
        background-position-x: -300px;
    }
    .hero-training-title {
        font-size: 100px;
    }
    .training-card p {
        width: 70%;
    }
    .training-card {
        background-position-x: 400px;
        background-position-y: 0px;
        background-size: 55%;
        padding: 30px;
    }
    .training-card.last {
        background-position-y: 100%;
        background-size: 100%;
        background-position-x: -150px;
    }
    .hero-programmes {
        background-position: -600px -250px;
    }
    .s1-programmesfeat-boxes {
        flex-direction: column;
    }
    .gradient-box, .grey-box {
        width: 80%;
    }
    .s1-programmesfeat-boxes {
        margin-top: 50px;
    }
    .s1-programmesfeat-title {
        text-align: center;
    }
    .s2-education-container {
        flex-direction: column-reverse;
    }
    .s2-education-image {
        justify-content: center;
    }
    .s2-education-text  {
        text-align: center;
    }
    .s2-education-text h2, .s2-education-text h3 {
        width: 100%;
    }
    h3.headline {
        font-size: 45px;
    }
    span.overlay-text {
        white-space: nowrap;
    }
    .s3-programmes-menu {
        flex-direction: column;
        gap: 75px;
        align-items: center;
    }
    .programmes-content-services {
        flex-direction: column;
        align-items: center;
    }
    .programmes-content-services-container {
        width: 70%;
    }
    .coach-info-container {
        top: 100px;
    }
    .coaches-container {
        width: 90%;
    }
    .grey-box.location, .gradient-box.location {
        width: 80%;
    }
    .text-overlay {
        width: 85%;
    }
    .location-content {
        flex-direction: column-reverse;
        margin-top: 25px;
    }
    .location-content-text {
        width: 90%;
        text-align: center;
    }
    .location-content-text p {
        text-align: center;
        width: 100%;
    }
    .location-content-image {
        margin-top: 25px;
        width: 92%;
    }
    .location-content-image img {
        width: 100%;
    }
    .gallery {
        width: 85%;
    }
    .gallery-image {
        height: 300px;
        width: 250px;
    }
}

/*----------Responsive Tablet (iPad Mini vertical) -----------*/
@media only screen 
  and (max-width: 768px) {
    .complex-text {
        font-size: 35px;
    }
    .hero-training-title {
        font-size: 90px;
        letter-spacing: -7px;
    }
    .hero-programmes.team {
        background-position: -100px;
    }
}



/*---------- RESPONSIVE MOBILE -----------*/

/*----------Responsive Mobile 1 (iPhone 12 Pro, iPhone 14 Pro Max, iPhone XR) -----------*/
@media only screen
and (max-width: 500px) {
    .footer-container {
        flex-direction: column;
        gap: 50px;
    }
    .footer-links {
        text-align: center;
    }
    .footer-links-ul li a {
        text-align: center;
    }
    header {
        padding: 15px 50px;
    }
    .bgimage-cards {
        flex-direction: column;
    }
    .complex-title {
        font-size: 50px;
        letter-spacing: -2.2px;
    }
    .complex-text {
        font-size: 25px;
        letter-spacing: -1.5px;
        padding: 0 50px;
    }
    .complex-title .gradient-text {
        width: auto;
    }
    .training-card-container {
        flex-direction: column;
        gap: 0;
    }
    .hero-training {
        background-position-x: -600px;
    }
    .training-card {
        background-position-x: 250px;
        background-position-y: 200px;
        background-size: 80%;
        padding: 30px;
    }
    .training-card.last {
        background-position-y: 100%;
        background-size: 150%;
        background-position-x: -235px;
    }
    .training-card.noimage.gradient-bg {
        text-align: left;
    }
    .training-card.noimage {
        text-align: right;
    }
    .hero-training-title {
        font-size: 75px;
        letter-spacing: -6px;
    }
    .s2-education-image img {
        width: 100%;
    }
    h3.headline {
        font-size: 35px;
    }
    .menu-box img {
        width: 75px;
    }
    img.young {
        left: -40px;
    }
    .click-advisor {
        font-size: 17px;
    }
    .programmes-content-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .programmes-content-title h5 {
        width: 90%;
    }
    .hero-programmes {
        background-position: -950px -250px;
    }
    .hero-training-title {
        font-size: 60px;
        letter-spacing: -4px;
    }
    .hero-programmes.team {
        background-position: -200px;
    }
    .coach-info-container {
        width: 80%;
    }
    .coach-info-container {
        top: 200px;
    }
    .coaches-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    .coach {
        flex: none;
        width: 100px;
    }
    .team-page footer {
        margin-top: 650px;
    }
    .text-overlay {
        font-size: 25px;
    }
    .title {
        font-size: 32px;
        text-wrap: balance;
    }
    .location-title .title, .location-title .pre-title {
        text-align: center;
    }
    .gallery {
        grid-template-columns: 1fr;
    }
}

/*----------Responsive Mobile 2 (iPhone SE) -----------*/
@media only screen
and (max-width: 375px) {
    .navbar-list {
        height: 90vh;
    }
    img.logo {
        height: 45px;
    }
    .complex-text {
        padding: 0 50px;
    }
    .hero-training-title {
        font-size: 80px;
        letter-spacing: -6px;
    }
    .training-card {
        background: none;
    }
    .training-card.last {
        background: none;
    }
    .hero-training-title {
        font-size: 70px;
    }
    .gradient-box, .grey-box {
        height: auto;
    }
    .coach-info-container {
        top: 250px;
    }
    .text-overlay {
        font-size: 22px;
    }
}

/*----------Responsive Mobile 3 (Samsung Galaxy S8+) -----------*/
@media only screen
and (max-width: 360px) {
    .hero-training-title {
        font-size: 60px;
    }
    .programmes-content-title.gradient-programmes h2 {
        font-size: 30px;
    }
    .programmes-content-title.gradient-programmes h5 {
        font-size: 25px;
        margin-top: 12px;
    }
    .programmes-content-title h2 {
        font-size: 30px;
    }
    .programmes-content-title h5 {
        font-size: 25px;
        margin-top: 12px;
    }
    .click-advisor {
        font-size: 16px;
    }
}



/*---------- MOBILE & TABLET SHOW/HIDE -----------*/
@media only screen  
  and (max-width: 820px) {
	.tabletHide {
		display: none;
	}
}

@media only screen  
  and (min-width: 821px) {
	.tabletShow {
		display: none;
	}
}

@media only screen  
  and (max-width: 500px) {
	.mobileHide {
		display: none;
	}
}

@media only screen  
  and (min-width: 500px) {
	.mobileShow {
		display: none;
	}
}