.entet-li {

    font-size: 14px;

    font-weight: 600;

    color: #eee;

    margin: 15px 1px !important;

    -webkit-transition: all .5s;

    transition: all .5s;

}



.slid-btn {

    margin-left: 0px;

}



.slid-btn:focus {

    color: #ffffff !important;

    background: #ff0000 !important;



}



.slid-btn:visited {

    color: #fff;

    background: #4135ff !important;

}



.slid-btn:focus-within {

    color: #fff;

    background: #ff0000 !important;

}



#carre {

    height: 19px;

    width: 19px;

    background: red;

    /*    -ms-transform: rotate(45deg); !* Internet Explorer *!

        -moz-transform: rotate(45deg); !* Firefox *!

        -webkit-transform: rotate(45deg); !* Safari et Chrome *!

        -o-transform: rotate(45deg); !* Opera *!*/

}





.newslatter .contact-form input[type='text'],

.newslatter .contact-form input[type='email'],

.newslatter .contact-form textarea {

    width: 100%;

    color: #fff;

    padding: 10px 0;

    border: 0;

    background: transparent;

    border-bottom: 2px solid #c8c3f4;

}



.newslatter .contact-form input[type='text']:focus,

.newslatter .contact-form input[type='email']:focus,

.newslatter .contact-form textarea:focus {

    border-bottom: 1px solid #2154cf;

}



.newslatter .contact-form textarea {

    max-width: 100%;

}



.newslatter .contact-form button[type='submit'] {

    background: #2154cf;

    border: none;

    color: #fff;

    /* padding: 15px 30px;*/

    border-radius: 0px;

    /* margin-top: 15px;*/

    font-weight: 600;

    cursor: pointer;

    position: relative;

}





.formStyle {

    background-color: #fc0e20;

    /*  padding: 20px;*/

    width: 100%;

    margin-bottom: 20px;

    border-bottom-width: 4px;

    border-bottom-style: solid;

    border-bottom-color: #ecf0f1;

    border-top-style: none;

    border-right-style: none;

    border-left-style: none;

    font-size: 1em;

    font-weight: 100;

    color: #ffffff;

}



.formButton {

    float: right;

    background-color: #ffffff;

    display: inline-block;

    color: #fc0e20;

    font-size: 28px;

    font-weight: 500;

    padding: 6px 24px;

    margin-top: 15px;

    margin-right: 60px;

    text-decoration: none;

}



.formButton:hover {

    background-color: #fc0e20;

    color: #ffffff;

}



.formButton:active {

    position: relative;

    top: 3px;

}



/*To remove the outline that appears on clicking the input textbox*/

input:focus {

    outline: none;

}



/* To format the placeholder text color */

::-webkit-input-placeholder {

    color: #ecf0f1;

}



:-moz-placeholder { /* Firefox 18- */

    color: #ecf0f1;

}



::-moz-placeholder { /* Firefox 19+ */

    color: #ecf0f1;

}



:-ms-input-placeholder {

    color: #ecf0f1;

}





::placeholder { /* Firefox, Chrome, Opera */

    color: #ffffff;

}





h1 {

    font-family: Futura, "Trebuchet MS", Arial, sans-serif;

    font-size: 24px;

    font-style: normal;

    font-variant: normal;

    font-weight: 700;

    line-height: 26.4px;

}



h3 {

    font-family: Futura, "Trebuchet MS", Arial, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-variant: normal;

    font-weight: 700;

    line-height: 15.4px;

}



p {

    font-family: Futura, "Trebuchet MS", Arial, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-variant: normal;

    font-weight: 400;

    line-height: 20px;

}



blockquote {

    font-family: Futura, "Trebuchet MS", Arial, sans-serif;

    font-size: 21px;

    font-style: normal;

    font-variant: normal;

    font-weight: 400;

    line-height: 30px;

}



pre {

    font-family: Futura, "Trebuchet MS", Arial, sans-serif;

    font-size: 13px;

    font-style: normal;

    font-variant: normal;

    font-weight: 400;

    line-height: 18.5714px;

}



.date {

    display: block;

    width: 100%;

    height: 100%;

    background: transparent;

    text-align: center;

    font-family: 'Helvetica', sans-serif;

    position: relative;

    border: 2px solid #1500d4;

    border-radius: .30rem;

    padding-bottom: 5px;

}



.date .binds {

    position: absolute;

    height: 15px;

    width: 60%;

    background: transparent;

    border: 2px solid #fc0e20;

    border-width: 0 5px;

    top: -6px;

    left: 0;

    right: 0;

    margin: auto;

}



.date .header-calender {

    background: transparent;

    display: block;

    padding: 8px 0;

    color: transparent;

    border-bottom: 2px solid #1500d4;

}



.date .day {

    color: #FFFFFF;

}



.date .month {

    color: #FFFFFF;

}



.date .year {

    color: #FFFFFF;

}





.toto {

    position: absolute;

    top: 10px;

    left: 10px;

}



.titi {

    position: absolute;

    top: 30;

    left: 30;

    z-index: 2;

}





.multicouche {

    position: relative;

    display: block;

}



.multicouche img {

    position: absolute;

    display: block;

    height: 100%;

}







.multicouche .divCalque {

    position: absolute;

    display: block;

    height: 80%;width: 80%

}

.multicouche .divCalqueLettre {

    position: absolute;

    display: block;

    height: 29%; width: 39%;

}



.couche1 {

    z-index: 1;

    top: 3%;

    left: 10%;

}





.couche2 {

    z-index: 2;

}



.couche2:hover {

    z-index: 1 !important;

}



.couche2:visited {

    z-index: 1 !important;

}



.couche1:hover {

    z-index: 2 !important;

}



.couche1:visited {

    z-index: 2 !important;

}



.couche3 {



    top: 54%;

    left: 48%;



}



.couche3 {

    z-index: 3;

}



.info-service{

    width: 100%;

    height: 100%;

    text-align: center;

    margin-left: 0px !important;

}

.top-section{

    margin-top: 115px;

    height: 365px;

    position: relative;

}

.back-div{

    text-align: center;

    color: #FFFFFF

}

.back-div-container{

    margin: 0;

    position: absolute;

    top: 50%;

    left: 50%;

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}

.flesh-down-row{



    margin-top: 10%;

    width: 100%;

}

.back-title{

    font-size: 63px;

color: #ffffff;

    width: 100%;

}

.back-small-title{

    font-size: 30px;

    color: #ffffff;

    width: 100%;

}







.multicalque {

    position: relative;

    display: block;

    height: 600px;

}



.multicalque img {

    position: absolute;

    display: block;

    height: 100%;

}







.multicalque .divCalque {

    position: absolute;

    display: block;

    height: 80%;width: 80%

}

.multicalque .divCalqueLettre {

    position: absolute;

    display: block;

    height: 29%; width: 39%;

}



.calque1 {

    z-index: 1;

    top: 3%;

    left: 3%;

}





.calque2 {

    z-index: 2;

}



.margin-parag{

    margin-top: 6%;

}



.numero{

    font-size: 37px;

    color: blue;

    font-weight: 600;

    text-decoration: underline;

}

.title-bloc{

    font-size: 22px;

    font-weight: 600;



}

.left-num{

    padding-left: 15%;

}







.multimage {

    position: relative;

    display: block;

    height: 500px;

}



.multimage img {

    position: absolute;

    display: block;

    height: 100%;

}

.multimage .divCalque {

    position: absolute;

    display: block;

    height: 57%;

    width: 68%;



}

.multimage .divCalqueLettre {

    position: absolute;

    display: block;

    height: 29%; width: 39%;

}

.image1 {

    z-index: 1;

    top: 3%;

    left: 32%;

}

.image2 {

    z-index: 2;

    top: 58%;

    /* left: 50%; */

    right: 38%;

}





.element{



    /*background-color: #0548ae  !important;*/

   /* background-image: linear-gradient(139deg ,#2b78e9, rgba(255,255,255,0) 59%);*/



}

.element:hover{

    background-color: #0548ae  !important;

    background-image: linear-gradient(139deg ,#2b78e9, rgba(255,255,255,0) 47%);

    color: #ffffff;

}

.element:hover p{

    color: #ffffff !important;

}



.icon1{

     background-image: url(https://www.connexion.edufrance.education/front/media/img/etude-france/tab1.png);

     height: 100px;

    width: 30%;

     background-position: center;

     background-repeat: no-repeat;



 }

.icon2{

    background-image: url("https://www.connexion.edufrance.education/front/media/img/etude-france/tab2.png");

    height: 100px;

    width: 30%;

    background-position: center;

    background-repeat: no-repeat;



}

.icon3{

    background-image: url("https://www.connexion.edufrance.education/front/media/img/etude-france/tab3.png");

    height: 100px;

    width: 30%;

    background-position: center;

    background-repeat: no-repeat;



}









.icon1:hover{

    background-image: url(https://www.connexion.edufrance.education/front/media/img/etude-france/tab12.png);



}

.icon2:hover{

    background-image: url("https://www.connexion.edufrance.education/front/media/img/etude-france/tab22.png");



}

.icon3:hover {

    background-image: url("https://www.connexion.edufrance.education/front/media/img/etude-france/tab32.png");

}



.element:hover .icon1{

     background-image: url(https://www.connexion.edufrance.education/front/media/img/etude-france/tab12.png);

 }

.element:hover .icon2{

    background-image: url(https://www.connexion.edufrance.education/front/media/img/etude-france/tab22.png);

}

.element:hover .icon3{

    background-image: url(https://www.connexion.edufrance.education/front/media/img/etude-france/tab32.png);

}



.staff{

    width: 255px;

    margin-right: 30px;

    margin-bottom: 5%;

}



#tabs{

    background: #ffffff;

    color: #000000;

}

#tabs h6.section-title{

    color: #000000;

    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;

    text-transform: unset;

    font-size: 30px;

    margin-bottom: 25px;





}



#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

    color: #f3f3f3;

    background-color: transparent;

    border-color: transparent transparent #f3f3f3;

    border-bottom: 4px solid !important;

    font-size: 20px;

    font-weight: bold;

}

#tabs .nav-tabs .nav-link {

    border: 1px solid transparent;

    border-top-left-radius: .25rem;

    border-top-right-radius: .25rem;

    color: #0f58c9;

    font-size: 20px;
}







/*section {

    padding: 60px 0;

}*/



section .section-title-france {

    text-align: center;

    color: #000000;

    margin-bottom: 30px;

    /*text-transform: uppercase;*/

    font-size: 40px;

}

.card{

border: 0px solid rgba(0, 0, 0, 0.125) !important;

}

.card-header{

 background-color: rgba(0, 0, 0, 0) !important;

}

.btn-link{

color: #000000 !important;

    font-size: 50% !important;

    text-decoration: none !important;

    font-weight: 600;

    padding: 0px !important;

}



















/****   Authentification form  ****/

.authentification h1 {
    font-size: 34px !important;
    color: #186DD3 !important;
    padding-bottom: 1.5em !important;
}


.login-div-cont {
    background-image: url(https://www.connexion.edufrance.education/front/media/img/cnx.png);
    background-size: cover;
    background-position: center;
    height: 100vh; /* 100% of the viewport height */
    padding: 5em;
        border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    
    box-shadow: 10px 10px 37px #121212;
}
.row.connexion-row{
        background-image: url(https://www.connexion.edufrance.education/front/media/img/background-login.png);
        flex-flow: nowrap !important;
        padding: 2em 12em;
}

hgroup {

    text-align:left;

    margin-top: 4em;    

}
.cad-bor{
background-color:#fff !important;border-bottom-right-radius: 30px;border-top-right-radius: 30px;
    box-shadow: 10px 10px 37px #121212;
}
.authentification input::placeholder {

    color: #636363;

}
@media screen and (min-width:791px) {
    .mbl-lgo{
    display: none;
}
}
@media screen and (max-width:791px) {
    .row.connexion-row {
    padding: 2em 1em;
    flex-direction: column !important;
    margin-left: 0em !important;
    margin-right: 0em !important;
            height: 100%;
            background-image: url("https://www.connexion.edufrance.education/front/media/img/cnx-mobile.png");
    flex-flow: nowrap !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.authentification input {
    font-size: 25px !important;
    padding: 15px 15px 15px 15px !important;
}
.button-cnxs {
    background: #00caf3 !important;
    font-size: 17px !important;
    font-weight: 700 !important; 
}
.mbl-flx{
        display: flex
;
    flex-direction: column;
    gap: 8em;
}
.desk-lgo{
    display: none;
}
.col-6.cad-bor {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
    .authentification h1 {
        font-size: 43px !important;
        padding-bottom: 0.5em !important;
        padding-top: 1.5em;
        line-height: 50px !important;
        color:#fff !important;
    }
.authentification {
           padding: 3em 0em 2em 0em !important;
        width: 100% !important;
}
    .cad-bor {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .login-div-cont {
        display: none;
    }
}

.authentification {

    width: 90%;

   /* margin: 4em auto; */

    padding: 3em 2em 2em 2em;



}



.authentification .group {

    position: relative;

    margin-bottom: 45px;

}


.authentification input {
    font-size: 18px;
    padding: 15px 15px 15px 15px;
    -webkit-appearance: none;
    display: block;
    /* background: #fafafa; */
    color: #636363;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #EAE5E5;
}

.authentification input:focus { outline: none; }



.authentification label {

    color: #999;

    font-size: 18px;

    font-weight: normal;

    position: absolute;

    pointer-events: none;

    left: 5px;

    top: 10px;

    transition: all 0.2s ease;

}

/* active */

.authentification input:focus ~ label, input.used ~ label {

    top: -20px;

    transform: scale(.75); left: -2px;

    /* font-size: 14px; */

    color: #4a89dc;

}

/* Underline */

.authentification .bar {

    position: relative;

    display: block;

    width: 100%;

}

.authentification .bar:before, .bar:after {

    content: '';

    height: 2px;

    width: 0;

    bottom: 1px;

    position: absolute;

    background: #4a89dc;

    transition: all 0.2s ease;

}

.authentification .bar:before { left: 50%; }

.authentification .bar:after { right: 50%; }

/* active */

.authentification input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }

/* Highlight */

.authentification .highlight {

    position: absolute;

    height: 60%;

    width: 100px;

    top: 25%;

    left: 0;

    pointer-events: none;

    opacity: 0.5;

}

/* active */

.authentification input:focus ~ .highlight {

    animation: inputHighlighter 0.3s ease;

}



.authentification .button {

    position: relative;

    display: inline-block;

    padding: 12px 24px;

    margin: .3em 0 1em 0;

    width: 100%;

    vertical-align: middle;

    color: #fff;

    font-size: 16px;

    line-height: 20px;

    -webkit-font-smoothing: antialiased;

    text-align: center;

    letter-spacing: 1px;

    background: transparent;

    border: 0;

    border-bottom: 2px solid #3160B6;

    cursor: pointer;

    transition: all 0.15s ease;

}

.authentification .button:focus { outline: 0; }

/* Button modifiers */

.authentification .buttonBlue {

    background: #ff0000;

    text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);

}

.button-cnxs:hover { background: #f00; }



.row.connexion-row h1 {
    font-size: 44px;
    color: #fff;
    padding-bottom: 0.5em;
        line-height: 35px;
}
.row.connexion-row h2 {
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    line-height: 30px;
}
.button-cnxs{
    color: #fff !important;
    background: #186DD3;
    width: 100%;
    text-align: center;
    border: none;
    padding: 1em;
    border-radius: 20px;
    font-size: 19px;
    cursor: pointer;
        margin-top: 1em;
}


.item-accompagenement{

    height: 100px;

}

.item-faicon{

    font-size: 34px;

    margin-top: 20%;

    color: red;

    background: #ffffff;

    padding: 30px;

    border-radius: 50%;

}

.item-cadre{

    background-color: #ffffff !important;

}

.item-cadre:hover .item-faicon{

  /*  font-size: 50px;*/

    color: #ffffff;

    background: #FF0000;



}



.item-cadre-content{

    padding-top: 10% !important;

}

.item-cadre-p{

    text-align: justify !important;

    padding: 10% !important;

}

.blog .item {

    /*box-shadow: 0px 5px 10px 0px rgba(148, 146, 245, 0.15) !important;*/

    box-shadow: 3px 3px 10px 2px rgba(148, 146, 245, 0.15) !important;

    border-radius: 5px !important;

}



.alert-modal {
    width: 40% !important;
    height: 35% !important;
    padding: 0 !important;
}



.tel-number .number-phone {
    /*display:none;*/
}
.tel-number:hover .number-phone {
  /*  display:block;*/

}
.button-actif{
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}


.quote-area-inscription {
    background-image: url(https://www.connexion.edufrance.education/front/media/img/inscription.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 40px;
    margin: 0;
}

.bg-overlay-inscription:before {
   /* background-color: rgba(15, 39, 101, 0.85) !important;*/
    z-index: 0;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}