/* #******* PAGES "OUR COURSES" AND "INCLUSIVITY" + MAIN MENU, CONTACT US BUTTON and MODAL ******# */


/* MAIN MENU */

.menu{
    background-color: #D4E1E4;
}

.menu-item{
    border-right: 1px solid #999 !important;
    border-radius: 0 !important;
}

.menu a{
    font-size: 26px;
    color: #000;
    font-weight: bold;
    padding: 20px !important;
}

.menu a:hover{
    color: #235BAA !important;
    transition: transform .2s;
    transform: scale(1.1);
}


/* CONTACT BUTTON */

.contact-button{
    text-align: center;
    
}

.contact-button a{
    display: inline-block;
    width: 100%;
    color: #000;
    font-weight: 800;
    font-size: 26px !important;
    background-color: #ecd1e1;
    border-radius: 8px;
    padding: 10px !important;
}

.contact-button a:hover{
    box-shadow: 1px -1px 15px 8px rgba(40, 174, 170, .5);
}


/* OUR COURSES PAGE */

.leaflet-title{
    margin-bottom: 80px;
}

.leaflet h2{
    font-size: 30px;
    color: #235BAA;
    font-weight: 800;
}

.leaflet-container{
	background-image: url("../img/courses-bg.jpg");
	background-size:cover;
	height: auto;
	width: 100%;
	background-position:top;
	background-repeat: no-repeat;
}

.leaflet-col{
    padding: 0;
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    border-bottom-left-radius: 21px;
    border-bottom-right-radius: 21px;
}

.leaflet-col:hover{
    box-shadow: 1px -1px 30px 16px rgba(40, 174, 170, .5);
}

.leaflet-container img{
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
}

.leaflet-ancor{
    background-color: #F1AEB1;
    border-bottom-left-radius: 21px;
    border-bottom-right-radius: 21px;
}

.leaflet a{
    color: #000;
    font-weight: 800;
    font-size: 20px;
    padding: 20px;
}


/* INCLUSIVITY PAGE */

.inclusive h2{
    font-size: 30px;
    color: #235BAA;
    font-weight: 800;
}

.inclusive p{
    color: #000;
    text-align: center;
}

.inclusive-bg-introduction{
    background-color: #E9CEDE;
}

.inclusive-bg-introduction p{
    color: #557096;
}

.inclusivity-bg-blue{
    background-color: #C8CBDE;
}

.inclusivity-bg-yellow{
    background-color: #FFE3AD;
}

.inclusivity-bg-orange{
    background-color: #F0B1A0;
}

.inclusivity-bg-green{
    background-color: #B0D2D0;
}

.inclusivity-border{
    border: 1px solid #000;
    border-radius: 21px;
}

.inclusivity-border span{
    text-decoration: underline;
    text-underline-offset: 4px;
}

.inclusivity-border-text{
    border-bottom-left-radius: 21px;
    border-bottom-right-radius: 21px;
}

.inclusivity-button{
    color: #000;
    font-weight: bold;
    width: 120px;
    border-radius: 10px;
}

.inclusivity-button:hover{
    box-shadow: 1px -1px 15px 6px rgba(40, 174, 170, .5);
}

.inclusivity-image-br{
    border-bottom-right-radius: 21px;
}

.inclusivity-img-text{
    font-weight: bold;
}

.img-inclusive{
    background-size:cover;
	height: auto;
	max-width: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.img-inclusive-1{
	background-image: url("../img/restarter.jpg");
}

.img-inclusive-2{
	background-image: url("../img/basic-practice.jpg");
}

.img-inclusive-3{
	background-image: url("../img/all-in-one-diversificacion.jpg");
}

.img-inclusive-4{
	background-image: url("../img/beginners.jpg");
}

/* MODAL INCLUSIVITY PAGE */

.mod-win-content{
    border: 3px solid #000; 
    border-radius: 21px;
}

.mod-win-header{
    border-bottom: 0px; 
    margin-top: 3.25px;
}

.mod-win-header button{
    font-size: 30px;
}

.mod-win-body{
    margin-top: 3.25em; 
    border-bottom: 0px;
}

.mod-win-margin-top{
    padding-top: 1.75em !important;
}

.mod-win-body-img-cont img{
    width: 270px; border-radius: 21px;
}

.mod-win-col{
    text-align: center;
}

.mod-win-col img{
    width: 270px; border-radius: 21px;
}

.mod-win-button{
    padding-top: 1.75em !important;
    padding-bottom: 1em !important;
}

.mod-win-button a{
    width: 150px; 
    border-radius: 10px; 
}

#modal1, #modal2{
    background-color: rgba(90, 242, 250, .3) !important;
    backdrop-filter: blur;
}
.modal-open .container-fluid{
    -webkit-filter: blur(10px) !important;
    -moz-filter: blur(10px) !important;
    -o-filter: blur(10px) !important;
    -ms-filter: blur(10px) !important;
    filter: blur(10px) !important;
}




/* DIGITAL SECTION*/

.digital-features {
    overflow: visible;
    position: relative;
}

.digital-section {
    margin-bottom: -20%;
    padding-top: 15%;
    position: relative;
    
}

#digital-section1{
    z-index: 7;
    padding-top: 0;
}

#digital-section2{
    z-index: 6;
}

#digital-section3{
    z-index: 5;
}

#digital-section4{
    z-index: 4;
}

#digital-section5{
    z-index: 3;
}

#digital-section6{
    z-index: 2;
}

#digital-section7{
    z-index: 1;
    margin-bottom: 3%;
}

.feature-section-margin-top-section1{
    padding-top: 80px;
}









/* DIGITAL PAGE */

.digital{
    text-align: center;
}

.digital h2{
    color: #235B89;
    font-weight: bold;
}

.digital h3{
    font-weight: bold;
}

.digital-bg-introduction{
    color: #557080;
    background-color: #B9D2D0;
}

.digital-bg-introduction span a{
    color: #102C65 !important;
    text-decoration: underline;
}

.section3-border{
    border: 3px solid #FA5C01;
    border-radius: 15px;
}

.section3 h3{
    color: #102C65;
    font-weight: 500;
}

.features h3{
    color: #000;
}

.features p{
    margin-bottom: 0% !important;
    color: #000;
}

.features img{
    border-radius: 20px;
}

.feature-section-margin-top{
    padding-top: 180px;
}

.feature-section-margin-bottom{
    padding-bottom: 80px;
}

.feature-component-margin-right{
    margin-right: 50px;
}

.feature-component-margin-left{
    margin-left: 50px;
}

.features-section-1{
    background-color: #D9BECE;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    align-items: center;
}

.features-text-margin-top{
    margin-top: 40px;
}

.features-text-margin-bottom{
    margin-bottom: 40px;
}

.features-section-1 span{
    font-weight: bold;
    font-size: 28px;
}

.features-section-2{
    background-color: #FFD39D;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    align-items: center;
    text-align: left;
}

.features-section-3{
    background-color: #C4BCDB;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
}

.features-section-3 h3{
    text-align: left;
}

.features-section-3 p{
    text-align: left;
}

.col-easy-access {
    padding: 0% !important;
}


.divTop-margin1{
    padding-top: 0px !important;
}

.divTop-margin2{
    padding-top: 10px !important; 
}

.features-section-4{
    background-color: #E0A190;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    text-align: left;
}

.features-section-4-img2{
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
}

.features-section-4-img1{
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.features-section-5{
    background-color: #E3C9C5;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    align-items: center;
    text-align: left;
}

.features-section-6{
    background-color: #CBDDE7;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    align-items: center;
}

.features-section-7{
    background-color: #C0E9C1;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    align-items: center;
}

.digital-contact-button{
    margin-top: 65px;
    margin-bottom: 65px;
}





/* ### @medias ### */

@media (min-width: 768px) {
    .col-easy-access {
        width: 16.1%;
    }
}

@media screen and (min-width: 992px){
    .col-lg-5 {
        width: 45%;
    }

    .custom-width{
        width: 51%;
    }
}

@media screen and (max-width: 1320px){
    .digital-section{
        padding-top: 14%;
    }
}

@media screen and (max-width: 1200px){
    p {
        font-size:20px;
    }

    .menu a{
        font-size: 20px;
    }

    .digital-section{
        padding-top: 11%;
    }
}

@media screen and (max-width: 1024px){

    #modal1-img2, #modal1-img3, #modal2-img2, #modal2-img3{
        display: none;
    }

    #digital-section1 img{
        margin-top: 3%;
        margin-bottom: 3%;
    }

    .feature-component-margin-right{
        margin-right: 0px;
    }
    
    .feature-component-margin-left{
        margin-left: 0px;
    }

}

@media screen and (max-width: 767px){

    .menu a{
        font-size: 14px;
    }

    .leaflet-col{
        padding: 3em;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .contact-button a{
        width: 75% !important;
	}

    .inclusivity-image-br{
        border-radius: 0px;
    }

    .img-inclusive{
        height: 475px !important;
    }

    #img-inclusive-3{
        height: 700px !important;
    }

    .order1{
        order: 1;
    }

    .order2{
        order: 2;
    }

    .mod-win-margin-top{
        padding-top: 1em !important;
    }    

    .features-section-1,
    .features-section-2,
    .features-section-3,
    .features-section-4,
    .features-section-5,
    .features-section-6,
    .features-section-7 {
        text-align: center;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }

    .digital-section{
        padding-top: 0% !important;
    }

    .feature-section-margin-top{
        padding-top: 180px;
    }

    .responsive{
        padding: 5%!important;
    }

    #digital-section6 img{
        margin-top: 3%;
        margin-bottom: 3%;
    }

    .features-section-3 h3{
        text-align: center;
    }

    .features-section-3 p{
        text-align: center;
    }

    .features-section-4-img1,  .features-section-4-img2{
        padding: 2% !important;
        border-radius: 8% !important;
        height: auto !important;
        width: 100% !important;
    }

    .phone-img{
        text-align: center !important;
    }

    .feature-section-margin-bottom{
        padding-bottom: 50px;
    }

    .features p{
        margin-bottom: 5% !important;
    }

    .features-text-margin-bottom{
        margin-bottom: 0% !important;
    }

    .responsive-visibility2{
        display: none;
    }

    .responsive-visibility{
        display: block !important;
    }

}

@media screen and (max-width: 575px){

    .menu a{
        font-size: 18px;
		border-right: 0px !important;
		border-bottom: 1px solid #999 !important;
	}

    .contact-button a{
        width: 100% !important;
    }

    .contact-button{
        margin-bottom: 0px !important;
    }

    .contact-responsive{
        margin-top: 0px !important;
        margin-bottom: 2em;
        width: 60%;
    }

    .contact-responsive a{
        font-size: 18px;
    }

    .leaflet-row-responsive{
        margin-top: 0 !important;
    }

    .leaflet-container{
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        background-repeat: repeat;
    }

    .leaflet-title{
        margin-bottom: 0px;
        margin-top: 3em;
    }

    #modal1-img2, #modal1-img3, #modal2-img2, #modal2-img3{
        display: none;
    }

    .mod-win-body{
        padding: 0 !important;
    }

    .mod-win-col img{
        width: 200px;
    }

    .feature-section-margin-top-section1-resp{
        padding-top: 40px !important;
    }

    .feature-section-margin-top-section3-resp,
    .feature-section-margin-top-section4-resp{
        padding-top: 80px !important;
    }

    .feature-section-margin-top-section2-resp,
    .feature-section-margin-top-section5-resp,
    .feature-section-margin-top-section6-resp,
    .feature-section-margin-top-section7-resp{
        padding-top: 120px !important;
    }

    .features-text-margin-bottom{
        margin-bottom: 0% !important;
    }

}

@media screen and (max-width: 370px){

    .contact-button a{
        font-size: 16px;
	}

}  

@media screen and (max-width: 302px){

    .contact-button a{
        font-size: 12px;
	}

} 

@media screen and (max-width: 280px){

    .contact-button a{
        font-size: 12px !important;
        margin-top: 30px;
	}

    .leaflet-container{
        margin-top: 0px !important;
    }
 
} 

.responsive-visibility{
    display: none;
}