/*
xnumerik
Yassine Abouchrif
23-02-2018
*/


body{
    overflow-x:hidden;
    font-family: 'Ubuntu',Sans-Serif;
    background: #eaeaea;
}
p{
    line-height:1.75
}
a{
    color:#e5651f;
}
a:hover{
    color:#e5651f;
}
.text-primary{
    color:#e5651f!important
}
.color-rouge{
    color: #ee1651;
}
.color-blue{
    color: #005ba5;
}
h1,h2,h3,h4,h5,h6{
    font-weight:100;
    font-family:'Candal',Sans-Serif;
    text-transform: uppercase;
}
section{
    padding:80px 0 80px 0;
}
section h2.section-heading{
    font-size: 54px;
    margin-top:0;
    margin-bottom:15px;
    letter-spacing: 3px;
}
section h3.section-subheading{
    font-size:26px;
    font-weight:100;
    margin-bottom:75px;
    text-transform:none;
    font-family: 'Ubuntu', sans-serif;
}

h1{
    color: #005ba5;
    font-size: 45px;
    color: #005ba5;
    margin-top: 40px;
    margin-bottom: 40px;
        
}
h2{
    font-size: 40px;
    background: url(../img/line-h2.png) center center repeat-x;
    margin-bottom: 40px;
}
h2 span{
    background: #eaeaea;
    padding: 0px 20px;
}


.merci{
    padding: 20px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
}
.merci1{
    font-size: 50px;
}

html, body, .masthead{
    height:800px;
}

.masthead-02{
    height:670px;
}

.masthead .container, .masthead .container .row{
    height: 100%;
}

header.masthead{
    text-align:left;
    color:#4c4c4c;
    background-image:url(../img/header.png);
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}
header.masthead .intro-text{
    padding-top:150px;
    padding-bottom:100px;
    text-align: left;
}

header.masthead .intro-text .intro-lead-in{
    font-size:22px;
    font-style:normal;
    line-height:22px;
    margin-bottom:25px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 100;
}
header.masthead .intro-text .intro-heading{
    font-size:50px;
    font-weight:700;
    line-height:50px;
    margin-bottom:25px;
    font-family: 'Ubuntu', sans-serif;
}
@media (min-width:768px){
    /*header.masthead .intro-text{
        padding-top:30%;
        padding-bottom:200px
    }*/
    header.masthead .intro-text .intro-lead-in{
        font-size:43px;
        font-style:normal;
        line-height:40px;
        margin-bottom:25px;
        font-family: 'Ubuntu', sans-serif;
        font-weight: 100;
    }
    header.masthead .intro-text .intro-heading{
        font-size:50px;
        font-weight:700;
        line-height:75px;
        margin-bottom:50px;
        font-family: 'Ubuntu', sans-serif;
    }
}

.masthead .student{
    display: flex;
    align-items: flex-end;
}

.effet-bg-header{
    background: url(../img/effet-bg-header.png) center bottom no-repeat;
    background-size: 100% 132px;
    height: 132px;
    position: relative;
    bottom: 132px;
    margin: 0;
    padding: 0;
}

.masthead .student .apply-btn{
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
}
.masthead .student .apply-btn-animation{
    position: absolute;
    margin-top: 0;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {bottom:0px;}
    50%  {bottom:30px;}
    100% {bottom:0px;}
    }
@keyframes example {
    0%   {bottom:0px;}
    50%  {bottom:30px;}
    100% {bottom:0px;}
}




.masthead .student .apply-btn:hover{
    -webkit-filter: contrast(120%);
    filter: contrast(120%);  
}

.masthead .student .img-student{
    margin-left: 60px;
}

.masthead .bloc-logo-text{
    margin-top: 30px;
}

.marker-list{
    list-style-image: url('../img/marker-list.png');
}

.p-h-students{
    font-size: 30px;
    margin-bottom: 60px;
    margin-top: 51px;
}

ul.marker-list li{
    padding-bottom: 28px;
}

ul.marker-list li span{
    top: -5px;
    position: relative;
    font-size: 20px;
    padding-left: 10px;
}

ul.marker-list-2{
    background: #005ba5;
    color: white;
    font-size: 21px;
    list-style-type: circle;
    padding-top: 15px;
    padding-bottom: 15px;
}


#step .bloc-step{
    background: #fff;
    box-shadow: 0px 0px 24px #c5c5c5;
    padding: 0px;
}

#step .bloc-step .step-icon{
    margin-top: 30px;
    margin-bottom: 30px;
    min-height: 122px;
}

#step .bloc-step .step-color-1{
    background: #005ca6; /* Old browsers */
    background: -moz-linear-gradient(top, #005ca6 0%, #0084cd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #005ca6 0%,#0084cd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #005ca6 0%,#0084cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005ca6', endColorstr='#0084cd',GradientType=0 ); /* IE6-9 */
    padding: 30px 10px;
    color: #fff;
    font-size: 20px;
    min-height: 190px;
}
#step .bloc-step .step-color-2{
    background: #0fb93d; /* Old browsers */
    background: -moz-linear-gradient(top, #0fb93d 1%, #16d859 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0fb93d 1%,#16d859 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0fb93d 1%,#16d859 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0fb93d', endColorstr='#16d859',GradientType=0 ); /* IE6-9 */
    padding: 30px 10px;
    color: #fff;
    font-size: 20px;
    min-height: 190px;
}
#step .bloc-step .step-color-3{
    background: #ee1652; /* Old browsers */
    background: -moz-linear-gradient(top, #ee1652 2%, #f62077 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ee1652 2%,#f62077 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ee1652 2%,#f62077 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee1652', endColorstr='#f62077',GradientType=0 ); /* IE6-9 */
    padding: 30px 10px;
    color: #fff;
    font-size: 20px;
    min-height: 190px;

}

#step .bloc-step .num-step {
    position: absolute;
    left: 0;
    right: 0;
     bottom: -34px;
}

#step .col-md-1-5{
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    top: 68px;
}

#study{
    background: url(../img/bg-study.png) center center no-repeat;
    background-size: cover;
    padding: 60px 50px 60px 50px;
}

#study .study-bloc{
    background: rgba(255, 255, 255, 0.89);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.31);
    padding: 60px;
}

#study h3{
    color: #005ba5;
    font-size: 40px;
}

#study p{
    font-size: 23px;
    color: #4f4f4f;
}

#contact .bloc-contact{
    background: #ee1651;
    padding: 40px;
    color: #fff;
    position: absolute;
    margin-top: 50px;
}
#contact .bloc-contact .titre-contact{
    font-size: 50px;
    margin: 40px 0px 146px 40px;
}
#contact .bloc-contact .p-contact{
    color: #f0ff06;
    font-size: 30px;
    font-weight: 100;
    font-family: 'Ubuntu', sans-serif;
    text-align: right;
    line-height: normal;
}

#contact .form-contact{
    background: #fff;
    box-shadow: 0px 0px 24px #ccc;
    padding-left: 25%;
    padding-top: 50px;
    padding-bottom: 50px;
}

#contact .form-contact .icon-input{
    float: left;
    margin-right: 15px;
    margin-top: 8px;
}

#contact .form-contact .form-control {
    display: block;
    width: 80%;
    height: 64px;
    padding: .375rem .75rem;
    font-size: 20px;
    line-height: 1.5;
    color: #495057;
    background-color: #f7f7f7;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
#contact .form-contact .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #adabab;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(20, 205, 79, 0.18);
}

#contact .form-contact .form-group select{
        color: #868e97;
}

#contact .form-contact .btn-envoyer{
    background: #16ea4e; /* Old browsers */
background: -moz-linear-gradient(top, #16ea4e 0%, #0c9730 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #16ea4e 0%,#0c9730 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #16ea4e 0%,#0c9730 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16ea4e', endColorstr='#0c9730',GradientType=0 ); /* IE6-9 */
    outline: none;
    border: none;
    padding: 15px;
    color: #fff;
    font-family: 'Candal';
    font-size: 22px;
    width: 80%;
    margin-left: 66px;
    cursor: pointer;
        box-shadow: 0px 0px 22px #ddd;
}
#contact .form-contact .btn-envoyer:hover{
background: #0c9730; /* Old browsers */
background: -moz-linear-gradient(top, #0c9730 0%, #16ea4e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #0c9730 0%,#16ea4e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #0c9730 0%,#16ea4e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c9730', endColorstr='#16ea4e',GradientType=0 ); /* IE6-9 */
    box-shadow: 0px 0px 12px #ddd;
    }

#chiffres-cles {
    background-color: #f7f7f7;
}
#chiffres-cles p{
    font-size: 18px;
    line-height: normal;
    padding: 10px;
}

/*progresse style*/  


    .progress{
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
.progress:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 12px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.progress .progress-left{
    left: 0;
}
.progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 12px;
    border-style: solid;
    position: absolute;
    top: 0;
}
.progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.progress .progress-right{
    right: 0;
}
.progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: #eaeaea;
    font-size: 34px;
    color: #5c5c5c;
    line-height: 135px;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%;
}
.progress.cle1 .progress-bar{
    border-color: #005BA6;
}
.progress.cle1 .progress-left .progress-bar{
    animation: loading-1 1.5s linear forwards 1.8s;
}
.progress.cle2 .progress-bar{
    border-color: #0fba3e;
}
.progress.cle2 .progress-left .progress-bar{
    animation: loading-3 1s linear forwards 1.8s;
}
.progress.cle3 .progress-bar{
    border-color: #ee1651;
}
.progress.cle3 .progress-left .progress-bar{
    animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.cle4 .progress-bar{
    border-color: #eead16;
}
.progress.cle4 .progress-left .progress-bar{
    animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
    }
}
@keyframes loading-3{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@keyframes loading-4{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes loading-5{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(170deg);
        transform: rotate(170deg);
    }
}
@media only screen and (max-width: 990px){
    .progress{ margin-bottom: 20px; }
}

/*end progresse style*/


.carousel-control-prev-icon{
    background-image: url('../img/prev-icon.png');
}

.carousel-control-next-icon{
    background-image: url('../img/next-icon.png');
}

.carousel-control-next-icon, .carousel-control-prev-icon{
    width: 16px;
    height: 32px;
}

.students-bg{
        background: #f7f7f7;
}
.students-bg h2 span {
    background: #f7f7f7;
    
}

#students h3{
    color: #ee1651;
    margin-top: 15px;
}

#students .img-client{
        border: 10px solid #fff;
    box-shadow: 0px 0px 20px #999;
    height: 95%;
}



@media (min-width:768px){
    section{
        padding:80px 0 80px 0;
    }
}

::-moz-selection{
    background:#ffe0e9;
    text-shadow:none
}
::selection{
    background:#ffe0e9;
    text-shadow:none
}
img::selection{
    background:0 0
}
img::-moz-selection{
    background:0 0
}
body{
    -webkit-tap-highlight-color:#005ba5;
}


.logo-img{
    margin-bottom: 10px;
}

.logo-img:hover{
    opacity: 0.7;
}



.btn-derouler{
    height: 40px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    position: absolute;
    bottom: 20px;
    opacity: 0.5;
}
.btn-derouler:hover{
opacity: 0.3;
    }




#partenaires{
    padding: 10px 0;
    margin-top: -110px;
}


.logo-carsouel {
  padding: 15px;
  width: 250px !important;
  text-align: center;
  margin: 0 auto;

}
@media screen and (max-width: 315px)  {
  .logo-carsouel{
    width: 190px !important;
  }
  }

footer{
    padding: 24px 0 24px 0;
    background: #5c5c5c;
}
#pied-footer{
    height: 15px;
    background: #ee1651;
    }

footer p{
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 100;
    color: #fff;
}

footer p a{
    color: #eead16;
}

.btn-derouler2{
    
    text-align: right;
    position: absolute;
    margin-top: -44px;
    right: 20px;

    
}
.btn-derouler2:hover{
opacity: 0.8;
    }





@media (max-width:1414px){
#contact .bloc-contact{
padding: 15px;
}
#contact .bloc-contact .titre-contact {
    font-size: 38px;
    margin: 40px 0px 218px 17px;
}
#contact .form-contact {
    padding-left: 20%;
}

}




@media (max-width:1024px){
.effet-bg-header{
background-size: 100% 85px;
}
#study h3 {
font-size: 38px;
}
#contact .bloc-contact {
padding: 22px;
}
#contact .bloc-contact .titre-contact {
font-size: 40px;
margin: 101px 0px 146px 0px;
}
#contact .form-contact {
padding-left: 15%;
}

}

@media (min-width:1720px){
#contact .bloc-contact{
width: 30%;
}

}

@media (min-width:1920px){
#contact .bloc-contact{
width: 28%;
}

}

@media (min-width:2050px){
#contact .bloc-contact{
width: 24%;
}

}

@media (min-width:2480px){
#contact .bloc-contact{
    width: min-content;
}

}



















@media (max-width:768px){

    html, body, .masthead {
    height: 630px;
    }

    .masthead-02{
        height: 556px;
    }

    .effet-bg-header {
    background-size: 100% 40px;

    }

    h1{
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
    }
    h2{
    font-size: 36px
    }


    .masthead .img-student{
    display: none;
    }

    ul.marker-list-2{
    font-size: 16px;
    background: rgba(15, 92, 154, 0.7);
    }
    .p-h-students {
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 0px;
}

    #step .bloc-step .step-icon {
    display: none;
    }
    #step .bloc-step .step-color-1, #step .bloc-step .step-color-2, #step .bloc-step .step-color-3{
    min-height: auto;
    }
    #step .bloc-step {
    background: transparent;
    box-shadow: none;
    padding: 15px;
    }
    #step{
    padding-bottom: 60px;
    }

    #study{
    padding: 15px;
    }

    #study .study-bloc {

    padding: 30px;
    }

    .btn-derouler{
    display: none;
    }

    .marker-list {
    list-style-image: url(../img/marker-list-pet.png);
    }

    ul.marker-list li span {
    font-size: 15px;
    padding-left: 0px;
    }

    ul.marker-list li{
    padding-bottom: 10px;
    }


    .intro-text{
    text-align: center !important;
    /*background: rgba(217, 85, 41, 0.61);*/
    background-clip: content-box, padding-box;
    padding-top: 36% !important;
    }

    header.masthead{
    background-size: 250% 100%;
    background-color: #005ba5;
    }

    header.masthead .intro-text .intro-lead-in{
    padding-top: 0px;
    }
    section{
    padding: 30px 0;
    }

    section h2.section-heading {
    font-size: 34px;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 3px;
    }


    #partenaires {
    padding: 0px;
    }
    footer p {
    font-size: 15px;

    }


    #contact .bloc-contact{
        margin-top: 0;
        position: relative;
    }

    #contact .bloc-contact .titre-contact {
    font-size: 32px;
    margin: 15px 0px 20px 0px;
}
#contact .bloc-contact .p-contact{
    font-size: 18px;
}
#contact .form-contact {
    padding-left: 0;
    /*margin-top: 253px;*/
}

#contact .form-contact .btn-envoyer{
    width: 100%;
    margin-left: 0;
}
section#contact {
    padding:  0;
}
#students h2{
    font-size: 25px;
    background: none;
}
#students h2 span{
padding: 0;
    }

#students #carouselExampleControls .text-right{
text-align: center !important;
margin-bottom: 30px;
}
#students #carouselExampleControls .text-right img{
width: 60%;
}
#students #carouselExampleControls .text-left {
text-align: center !important;
}
#students .line-sep{
display: none;
}
#students #carouselExampleControls .titre-client, #students #carouselExampleControls .text-client, #students #carouselExampleControls .n-client{
width: 100%;
padding: 10px 28px;
}
#students .img-client {
height: 100%;
}


#chiffres-cles{
    background: #eef7ff;
}

}



@media (max-width:391px){

#contact .form-contact .form-control{
width: 77%;
}

h2 {
font-size: 27px;
}

.icon-input{
    width: 40px;
}

#study h3 {
    font-size: 32px;
}
}