@import url('https://fonts.googleapis.com/css?family=Karla:400,500,600,700,800');
@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}

html {scroll-behavior: smooth;}

*{margin:0;box-sizing: border-box}
body{font-family: 'Karla', sans-serif}

header{z-index: 9000;position: relative}
header .flex{align-items: center;}

.flex{display: flex;justify-content: space-between}
.c, .cc{margin: 0 auto;width:1200px}

.cc{width: 950px;}

.cl1{color:#ff7c0f}
.cl2{color:#173F96}

a{text-decoration: none;}

header{background-color: #000}
.logo{height: 75px;padding: 9px 0 5px}

.btn{padding:25px; background-color: #ff7c0f; color: #000;display: inline-block;text-transform: uppercase;cursor: pointer;}
.btn:hover{background-color: #173F96 !important;color:#fff}

.masq{background-color: rgba(0,0,0,.3);}

.c1{background-repeat: no-repeat;background-size: cover;}
.c1 .c{align-items: center;}
.c1 .masq{padding: 100px;height: 800px;}
.c1 h1{font-size: 3.2em;color:#fff;width: 50%;text-transform: uppercase;}

.c1 h1 strong{display: block;color: #000;font-weight: 800;margin-bottom: 15px;font-size: 1.2em;}

.c1 .form{width:35%; background-color: rgba(255,255,255,.7);padding: 40px;}
.c1 h2, .c1 .form span{margin-bottom: 20px;text-align: center;display: block;}
.c1 h2{font-size: 1.8em;text-transform: uppercase;font-weight: 800;}
.c1 .form span{font-size: 1.4em;font-weight: 600;}
.c1 .form form input, .c1 .form form select{padding: 15px;margin-bottom: 15px;border: 1px solid rgb(221, 220, 220);width:100%}
.c1 .form form input.btn{border: none!important;}
.c1 label{display:block;margin-bottom: 5px;}
.c1 .rem{display:block;font-size: 0.9em;color: #666}
.c1 span.btn{display:block;font-size: 1em;margin-top: 20px;}

.succes{display: block;margin-bottom: 20px;background: #13b348;color: #fff;padding: 20px;}

.c1 .bloc_2, .c1 .bloc_3{transform: translateX(100px);transition: 0.2s ease;width: 1px !important;visibility: hidden;height: 1px;}
.c1 .bloc_2.show, .c1 .bloc_3.show{width: 100% !important;transform: translateX(0);visibility: visible;height: auto;}


.c2 .flex div{padding: 30px;height: 100px;}
.c2 .flex .box1{width:40%;background-color: #ff7c0f;position: relative;}
.c2 .flex .box2{width:60%}
.c2 .flex .box1::after{content:"";right: -50px;top: 0;position: absolute;border-top: 50px solid transparent;border-left: 50px solid #ff7c0f;
    border-bottom: 50px solid transparent;}
.c2 .flex .box1 span{font-size: 1.6em;text-align: end;display: block;font-weight: 800;}
.c2 .flex .box2 p{margin-left: 50px;}

.c3{background-color: rgb(232,232,232);padding: 100px 0;}

.c3 .flex{align-items: center;}

.c3 .box1{width:60%;margin: 0 auto;text-align: center;}
.c3 .box1 h2{font-size: 2.5em; color: #ff7c0f;margin-bottom: 20px;}
.c3 .box1 p{margin-bottom: 70px;}
.c3 .left, .c3 .middle, .c3 .right{width: 32%;}
.c3 .child{display: flex; align-items: center;margin-bottom: 25px;}
.c3 .child span{font-size: 1.2em;width: 70%;}
.c3 .flex .middle img{width: 100%;}
.c3 .img{width:100px;height: 100px;padding: 15px;text-align: center;background-color: #fff;border-radius: 70px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.c3 .img img{width: 90%;}
.c3 .left{text-align: start;}
.c3 .left .child{justify-content: flex-end;text-align: end}
.c3 .right .child{justify-content: flex-start;}
.c3 .right .img{margin-right: 15px;}
.c3 .left .img{margin-left: 15px;}

.c4,.c5{width: 49%;margin-top: 100px;margin-bottom: 100px;}
.c4{background-size: cover;background-repeat: no-repeat;}
.c4 .masq{padding: 40px;text-align: center;background-color: rgba(0,0,0,.6);color:#fff;height: 100%;}
.c4 .masq h2{font-size: 3em;font-weight: 800;}
.c4 .masq .title{font-size: 2em; color:#ff7c0f;font-weight: 800;margin: 20px 0;display: block;}
.c4 .masq p{font-size: 1.3em;}
.c4 .masq .euros{width: 65%;text-transform: uppercase;background-color: #ff7c0f;padding: 30px;margin:30px 0;display: inline-block;font-size: 1.6em;color:#173F96;font-weight: 800;}
.c5{border: 2px solid #173F96;padding: 0 40px;text-align: center;}
.c5 h2{margin-bottom: 20px;color: #333;font-size: 2em;font-weight: 800;}
.c5 img{width: 100%;}

.c6{background-color: rgb(232,232,232)}
.c6 .flex{display: flex;align-items: center;background-color: #ff7c0f;color: #000;padding: 100px}
.c6 .flex div{width: 60%;}
.c6 h2{margin-bottom: 20px;}
.c6 .btn{background-color: #000;color: #fff;}

footer{background-color: #000;padding: 30px;text-align: center;}
footer span{display: block;color: #fff;font-size: 1.5em;margin-bottom: 20px;}
footer .flex{justify-content: center;}
footer img{max-width:130px;max-height:130px;margin: 10px;object-fit: contain;}

.p50{padding: 50px;}

@media (max-width : 960px) {
    .c{width:100%}
    .flex{display: block;}

    .header .cc{text-align: center;}

    .c1 .masq{padding:30px;text-align: center;}
    .c1 h1{font-size: 1.5em;width: 100%;}
    .c1 .form{width:100%;margin-top:30px;padding:20px}
    .c2 .flex .box1{width: 300px;margin: 0 auto;}
    .c2 .flex span{text-align: center!important;}
    .c2 .flex .box1::after{right: 0;top: 100px;position: absolute;border-left: 150px solid transparent;border-top: 50px solid #ff7c0f;border-right: 150px solid transparent;}
    .c2 .flex .box2{width: 100%;margin-top: 60px;height: auto;}
    .c2 .flex .box2 p{margin-left: 0;}
    .c3 .box1{width:90%}
    .c3 .box1 h2{font-size: 1.8em}
    .c3 .left, .c3 .middle, .c3 .right{width: 100%;padding: 20px;}
    .c3 .flex .middle img{width: 80%;}
    .c3 .flex .middle{text-align: center;}
    .c4, .c5{width:100%;margin-bottom: 0;margin-top: 0;}
    .c6 .flex{display: block;padding: 40px;}
    .c6 .flex div{margin-bottom: 40px;}

}