@font-face{
    font-family:Poppins-Medium;
    src:url(fonts/Poppins-Medium.dd8c8fd1.woff) format("woff");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:Poppins-Light;
    src:url(fonts/Poppins-Light.a24a0d3f.woff) format("woff");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:Lato-Light;
    src:url(fonts/Lato-Light.e6a4ea4d.woff) format("woff");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:icomoon;
    src:url(fonts/icomoon.08f5644c.eot);
    src:url(fonts/icomoon.08f5644c.eot) format("embedded-opentype"),url(fonts/icomoon.98b63604.ttf) format("truetype"),url(fonts/icomoon.14e79d54.woff) format("woff"),url(images/icomoon.4f163040.svg) format("svg");
    font-weight:400;
    font-style:normal
}
[class*=" icon-"],[class^=icon-],i{
    font-family:icomoon!important;
    speak:none;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.icon-arrow-up-circle:before{
    content:"\E90D"
}
.icon-cancel:before{
    content:"\E90C"
}
.icon-info:before{
    content:"\E90B"
}
.icon-search:before{
    content:"\E900"
}
.icon-access:before{
    content:"\E901";
    color:#86c5f4
}
.icon-adress:before{
    content:"\E902"
}
.icon-down-arrow:before{
    content:"\E903"
}
.icon-family:before{
    content:"\E904";
    color:#d69800
}
.icon-fire:before{
    content:"\E905";
    color:#ed074f
}
.icon-green:before{
    content:"\E906";
    color:#aedd87
}
.icon-paper-plane:before{
    content:"\E907";
    color:#fff
}
.icon-phone:before{
    content:"\E908"
}
.icon-right-arrow:before{
    content:"\E909"
}
.icon-time:before{
    content:"\E90A"
}
.formations{
    margin-top:-35px;
    margin-bottom:100px
}
.formations h2{
    letter-spacing:-1px;
    margin-left:0
}
.formations h2:before{
    content:"";
    background:#d9f0ff;
    position:absolute;
    z-index:-1;
    width:180px;
    height:35%;
    margin-top:-15px;
    margin-left:-40px
}
.formations:nth-child(odd) h2:before{
    background:#1570b8
}
.formations p,.formations ul>*{
    font-family:Segoe UI Light,-apple-system,BlinkMacSystemFont,San Francisco,Helvetica,Arial,sans-serif
}
.formations ul{
    list-style:none
}
.formations ul>*{
    color:#1570b8
}
.formations--img{
    width:calc(100% + 60px);
    height:250px;
    margin-left:-30px;
    margin-bottom:35px
}
@media (min-width:768px){
    .formations:not(:first-child){
        margin-top:50px
    }
    .formations:first-child .formations--content{
        display:grid;
        grid-template-areas:"a b" "c c"
    }
    .formations:first-child .formations--content>.formations--list{
        grid-area:c;
        grid-template-columns:1fr;
        margin-left:25%
    }
    .formations:first-child .formations--content>.formations--intro{
        grid-area:a;
        width:80%;
        text-align:right;
        justify-self:flex-end;
        align-self:flex-end
    }
    .formations:first-child .formations--img{
        grid-area:b;
        width:calc(80% + 60px);
        margin-left:25px
    }
    .formations:nth-child(2) .formations--content{
        display:flex;
        flex-direction:column-reverse
    }
    .formations:nth-child(2) .formations--img{
        width:80%;
        height:300px;
        margin-left:22%;
        margin-bottom:-18px
    }
    .formations:nth-child(2) .formations--list{
        margin-left:22%;
        margin-bottom:50px
    }
    .formations:nth-child(3) .formations--content{
        display:flex;
        flex-direction:column
    }
    .formations:nth-child(3) .formations--intro{
        margin-left:22%;
        margin-bottom:35px
    }
    .formations:nth-child(3) .formations--img{
        width:80%;
        height:300px;
        margin-left:22%;
        margin-bottom:-18px
    }
    .formations:nth-child(3) .formations--list{
        margin-left:22%;
        margin-bottom:0;
        margin-top:50px
    }
    .formations:nth-child(4) .formations--content{
        display:flex;
        flex-direction:row-reverse
    }
    .formations:nth-child(4) .formations--img{
        width:40%;
        max-height:450px;
        height:auto;
        margin-left:0;
        margin-bottom:0
    }
    .formations:nth-child(4) .formations--list{
        margin-right:35px;
        margin-top:35px
    }
    .formations h2:before{
        height:90%
    }
    .formations h2:after{
        font-size:150px;
        position:absolute;
        color:#fff;
        left:6%
    }
    .formations:first-child h2:after{
        content:"1";
        bottom:-11%;
        left:7%
    }
    .formations:nth-child(2) h2:after{
        content:"2";
        bottom:-3.5%
    }
    .formations:nth-child(3) h2:after{
        content:"3";
        bottom:-7%
    }
    .formations:nth-child(4) h2:after{
        content:"4";
        bottom:-11.5%
    }
}
@media (min-width:1024px){
    .formations:first-child .formations--content>.formations--intro{
        width:60%
    }
    .formations:nth-child(4) .formations--content{
        justify-content:center
    }
}
@media (min-width:1280px){
    footer{
        margin-top:100px
    }
    .formations{
        max-width:1280px;
        margin:0 auto
    }
    .formations h2{
        width:75%;
        margin:0 60px
    }
    .formations:first-child .formations--content{
        grid-template-columns:2fr 1fr
    }
    .formations:first-child .formations--content>.formations--intro{
        width:40%;
        margin-left:30%
    }
    .formations:first-child .formations--img{
        grid-area:a;
        width:65%;
        margin-left:30%;
        margin-top:35px
    }
    .formations:first-child .formations--content>.formations--list{
        margin-left:20%
    }
    .formations:first-child .formations--content>.formations--list>ul{
        margin-left:5%
    }
    .formations:nth-child(2) h2{
        width:85%
    }
    .formations:nth-child(2) .formations--content{
        flex-direction:row-reverse
    }
    .formations:nth-child(2) .formations--img{
        width:30%;
        height:auto;
        max-height:500px;
        margin-left:0;
        margin-bottom:15px;
        margin-right:80px
    }
    .formations:nth-child(2) .formations--list{
        margin-top:80px;
        margin-right:50px
    }
    .formations:nth-child(3) .formations--content{
        display:grid;
        grid-template-areas:"a" "b" "c";
        margin-right:80px
    }
    .formations:nth-child(3) .formations--intro{
        grid-area:a;
        margin-top:60px;
        margin-bottom:0
    }
    .formations:nth-child(3) .formations--img{
        grid-area:c;
        width:35%;
        height:200px;
        margin-left:60%;
        margin-bottom:0;
        margin-top:-45px
    }
    .formations:nth-child(3) .formations--list{
        grid-area:b
    }
    .formations:nth-child(4) .formations--content{
        justify-content:normal
    }
    .formations:nth-child(4) .formations--img{
        width:30%;
        margin-right:12%;
        margin-top:50px
    }
    .formations:nth-child(4) .formations--list{
        margin-right:15%;
        margin-top:12%
    }
    .formations h2:after{
        left:8%
    }
    .formations:first-child h2:after{
        left:8.5%;
        bottom:-5%
    }
    .formations:nth-child(2) h2:after{
        bottom:-.5%
    }
    .formations:nth-child(3) h2:after{
        bottom:-11.5%
    }
    .formations:nth-child(4) h2:after{
        bottom:-5%
    }
}