/*
    Extra small devices (portrait phones, less than 576px)
*/
@media (max-width: 575.98px) {
    .btn-navbar{
        display: block;
    }
    nav{
        display: block;
        position: fixed;
        top: 45px;
        right: 0;
        left: 100%;
        max-height: 100%;
        background-color: var(--primary-color);
        overflow: scroll !important;
    }
    nav.show{
        left: 60px;
    }
    nav > ul .sub{
        display: none;
        position: relative;
        z-index: 9999;
        padding: 10px;
        margin: 0;
        margin-left: 10px;
        background-color: white;
        top: 100%;
        width: 90%;
        left: 0;
    }
    nav > ul > li:hover .sub{
        display: block;
    }
    nav > ul .sub .col-md-8,  nav > ul .sub .col-md{
        padding: 0 !important;
    }
    nav > ul .sub .row{
        padding: 0 !important;
        margin: 0 !important;
    }
    .tab-formation > a {
        padding: 10px 5px;
    }
    .tabcontent{
        padding: 0;
        margin: 0;
        padding-left: 5px;
        width: 60%;
    }
    .search-content input {
        width: 100%;
        font-size: 16px;
    }
    .section-contomer p{
        padding: 15px;
        margin: 0;
        font-weight: 200;
        width: 70%;
        font-size: 13px;
    }
}




/*
    Small devices (landscape phones, less than 768px)
*/
@media (max-width: 767.98px) {
    .content-social{
        z-index: 9;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 60px;
    }
    .content-social img.logo {
        display: block;
        width: 90%;
        margin: auto !important;
    }
    .content-nav.fixed{
        left: 60px;
    }
    .container-body{
        margin-left: 59px;
    }
    .section-contomer{
        margin: 0 20px 80px 20px;
    }
    .school-describtion > img{
        display: none;
    }
    .content-formation ul {
        display: none;
    }
    .content-nav {
        padding: 15px;
    }
    nav > ul {
        display: block;
    }
    nav > ul > li > a {
        position: relative;
        font-size: 17px;
        display: block;
        padding: 10px 20px;
        font-family: var(--font-family-oswald);
        color: white;
        text-transform: uppercase;
    }
    /*
    nav > ul .sub{
        display: none;
        position: absolute;
        z-index: 1;
        padding: 30px 10px;
        background-color: white;
        top: 0%;
        width: 400px;
        left: calc(100% + 30px);
        transform: translateX(-100%);
        transition: 0.15s;
    }*/
    .school-describtion .desc {
        padding: 80px 10px 160px 30px;
    }
    .section-about .left::after{
        display: none;
    }
    .content-experience{
        margin-bottom: 50px;
    }
    ul.content-formation-footer {
        display: block;
    }
    .esg-btn.block {
        display: inline-block;
    }
}




/*
    Medium devices (tablets, less than 992px)
*/
@media (min-width: 768px) and (max-width: 991.98px) {
}




/*
    Large devices (desktops, less than 1200px)
*/
@media (min-width: 992px) and (max-width: 1199.98px){
    nav > ul > li > a {
        position: relative;
        font-size: 14px;
        display: block;
        padding: 10px 10px;
        font-family: var(--font-family-oswald);
        color: white;
        text-transform: uppercase;
    }
    /*
    nav > ul .sub{
        display: none;
        position: absolute;
        z-index: 1;
        padding: 10px;
        background-color: white;
        top: 100%;
        width: 740px;
        left: calc(50% + 250px);
        transform: translateX(-50%);
        transition: 0.15s;
    }*/
}




/*
    Extra large devices (large desktops, 1200px and up)
*/
@media (min-width: 1200px) {
}

