@font-face {
    font-family: 'Candara';
    src:  url('../fonts/Candara.eot');
    src:  url('../fonts/../fonts/Candara.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Candara.woff2') format('woff2'),
         url('../fonts/Candara.woff') format('woff'),
         url('../fonts/Candara.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Bold';
    src:  url('../fonts/Roboto-Bold.eot');
    src:  url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold.woff2') format('woff2'),
         url('../fonts/Roboto-Bold.woff') format('woff'),
         url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Roboto Black';
    src:  url('../fonts/Roboto-Black.eot');
    src:  url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Black.woff2') format('woff2'),
         url('../fonts/Roboto-Black.woff') format('woff'),
         url('../fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Regular';
    src:  url('../fonts/Roboto-Regular.eot');
    src:  url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular.woff2') format('woff2'),
         url('../fonts/Roboto-Regular.woff') format('woff'),
         url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
	margin: 0;
    padding: 0;
    color: #435861;
	font-family: 'Roboto Regular';
    font-family: 'Candara';
    font-size: 20px;
}
a {
    color: #435861;
    text-decoration: none;
}
ul, ul li { list-style:none;}

.b {
    font-weight: bold;
}
.up {
    text-transform: uppercase;
}
.hl {
    color: #d91e49;
}
section{ width: 100%; float: left; box-sizing: border-box; position: relative;}
.cus-row { width: 100%; float: left;}[class*="cus-col-"] { float: left; padding-left:15px; padding-right:15px; box-sizing: border-box;}
.cus-col-1 { width: 8.33%;}
.cus-col-2 { width: 16.66%;}
.cus-col-3 { width: 25%;}
.cus-col-4 { width: 33.33%;}
.cus-col-5 { width: 41.66%;}
.cus-col-6 { width: 50%;}
.cus-col-7 { width: 58.33%;}
.cus-col-8 { width: 66.66%;}
.cus-col-9 { width: 75%;}
.cus-col-10 { width: 83.33%;}
.cus-col-11 { width: 91.66%;}
.cus-col-12 { width: 100%;}
.left { float: left;}
.right { float: right;}
.align-left { text-align: left;   }
.align-right { text-align: right;}
.align-center { text-align: center;}
.img-responsive { max-width: 100%; height: auto;}
.img-responsive.logo-img { max-width: 99%;}
.container {
    margin: auto;
    max-width: 1280px;
}
.btn {
   font-family: 'Roboto Bold';
    color: #FFF;
    background-color: #0d3644;
    text-transform: uppercase;
    width: fit-content;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 14px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    border-radius: 4px;
    padding-left: 22px;
    padding-right: 22px;
	transition:all .3s linear;
}
.btn:hover {
    background-color: #4f6a73;
	transition:all .3s linear;
}
.header {
    background-color: #bfbfbf;
    border-bottom: solid 3px #d91e49;
    height: 82px;
    font-size: 17px;
}
.logo {
	 padding-left:45px;
}
.email {
    line-height: 82px;
	padding-right:45px;
	font-family: 'Roboto Regular';
}
.menu {
    background-color: #1eb6c4;
    text-align: center;
    height: 46px;
    line-height: 46px;
    font-size: 17px;
	position:relative;
}
.menu a {
    color: #FFF;
    margin-left: 20px;
    margin-right: 20px;
	font-family: 'Roboto Regular';
}
.banner {
    background-image: url(../assets/img-intro.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    /* padding: 26% 0; */
    max-height: 530px;
    height: 530px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro {
    text-align: center;
    line-height: 10px;
}
.banner .intro span, .acheter .intro span {
    color: #FFF;
    background-color: #1eb6c4;
    font-size: 40px;
    font-weight: bolder;
    padding: 10px 20px;
    line-height: 40px;
    margin-bottom: 5px;
    display: block;
    max-width: max-content;
    margin: 0 auto;
}
.acheter .intro {
    line-height: 15px;
}
.acheter .intro span {
    font-size: 30px;
	padding: 8px 50px;
}
.acheter .cus-row {
    margin-top: 40px;
}
.acheter ul {
    padding: 0;
    display: flex;
    align-items: center;
}
.acheter ul li:first-child {
    min-width: 70px;
}
.solution {
    color: #FFF;
    background-color: #d91e49;
    text-align: center;
    font-size: 42px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bolder;
}
.solution_banner {
    padding-top: 35%;
    background-repeat: no-repeat;
    background-image: url(../assets/img-solutions.jpg);
    background-size: cover;
    position: relative;
}
.solution_supports {
    color: #FFF;
    text-align: center;
    background-color: #0dbdc6;
    font-weight: bold;
    padding-top: 3%;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 28px;
    position: absolute;
    bottom: -38px;
    right: 76px;
    width: 32%;
    max-width: 500px;
}
.signatures img {
    max-width: 400px;
	width:100%;
}
.signatures a.btn {
	margin-left:0;
}
.signatures [class*="cus-col-"]:last-child {
	height: 300px;
    display: flex;
    align-items: center;
}
.rgpd {
    padding: 0px 50px;
}
.rgpd a.btn {
	margin-right:0;
}
.rgpd [class*="cus-col-"]:first-child {
	min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
}
.rgpd [class*="cus-col-"]:first-child img {
	max-width: 200px;
}
.rgpd [class*="cus-col-"]:last-child img {
	max-width: 100%;
}

.pack_signatures {
    background-color: #0dbdc6;
    color: #000;
    padding: 30px;
    padding-left: 250px;
    padding-right: 250px;
    margin: 0 auto;
}
.pack_signatures_inner {
	max-width: 880px;
    margin: 0 auto;
}
._title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    font-family: 'Roboto Regular';
}
._main {
    font-family: 'Roboto Regular';
    font-size: 18px;
    line-height: 1.4;
}
.pack_signatures hr {
    border: none;
    border-bottom: 3px double #052638;
    outline: none;
    height: 0;
    max-width: 300px;
	margin: 20px auto 25px;
}
.pack_signatures .cartouches {
    display: flex;
    flex-direction: row;
    font-weight: bold;
}
.pack_signatures .cartouches .cartouche {
    background-color: #FFF;
    color: #003543;
    border-radius: 5px;
    margin: 20px 10px;
    padding: 50px 10px 40px;
    flex: 1;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Roboto Bold';
    text-align: center;
    position: relative;
}
.pack_signatures .cartouches .cartouche img {
    position: absolute;
    top: -30px;
    max-width: 65px;
}
.pack_signatures .cartouches .cartouche .tarif {
    font-size: 17px;
    background-color: #d91e49;
    color: #FFF;
    border-radius: 5px;
    width: 85%;
    margin: auto;
    top: 40px;
    position: absolute;
    height: 40px;
    line-height: 40px;
    margin-bottom: 0;
    /* margin-top: 0; */
    bottom: -28px;
    left: 15px;
}

.suite {
    margin-top: -5px;
}
.suite .solution_banner {
	padding-top: 49%;
    background-image: url(../assets/img-footer.jpg);
}
.acheter {
    padding: 50px 50px;
}
.signatures {
    padding: 50px 50px 0;
}
.acheter a.btn, .signatures a.btn, .rgpd a.btn {
    margin-top: 20px;
    display: block;
}

.footer {
    position: relative;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: #0d3644;
	color: #fff;
    font-size: 14px;
}
.footer ._right {
    position: absolute;
	top:0;
    right: 20px;
}
.footer a {
    color: #fff;
    font-size: 14px;
    margin: 0px 10px;
}
.menu-icon {
    position: absolute;
    top: 10px;
    right: 15px;
	display:none;
    cursor: pointer;
}
.menu-icon span {
    width: 27px;
    height: 3px;
    background: white;
    margin: 5px 0;
    display: block;
}

@media only screen and (max-width: 767px) {
body {
    font-size: 18px;
}
.btn {
    font-size: 18px;
}
.menu-icon {
	display:block;
}
.menu a {
    display: block;
    text-align: left;
}
nav {
    position: absolute;
    width: 100%;
    float: left;
    z-index: 999;
    background: #1eb6c4;
    top: 45px;
	padding-bottom: 20px;
	display:none;
}
[class*="cus-col-"] {width:100%;}
section {
	padding-left:15px !important;
	padding-right:15px !important;
}
.pack_signatures .cartouches {
    display: block;
}
.solution_banner {
    padding-top: 115%;
    background-size: contain;
}
.solution_supports {
    right: 0%;
    width: 100%;
    max-width: 94%;
}
.logo_part {
    display: flex;
    align-items: center;
}
.logo {
    padding-left: 15px;
}
.logo img {
	max-width: 80%;
}
.email {
    line-height: 65px;
    padding-right: 15px;
}
.email a {
    font-size: 14px;
}
.banner .intro span, .acheter .intro span {
    font-size: 15px;
    line-height: 20px;
    padding: 8px 15px;
}
.acheter [class*="cus-col-"] {
	padding-left: 0px;
    padding-right: 0px;
}
.signatures [class*="cus-col-"]:last-child {
    height: auto;
}
.handshake,.suite, .rgpd [class*="cus-col-"], .signatures [class*="cus-col-"] {
    padding: 0 !important;
}
.solution {
    font-size: 24px;

}
.footer {
    text-align: left;
}
.solution_supports {
    font-size: 20px;
}
.banner {
    max-height: 200px;
    height: 195px;
}
.pack_signatures .cartouches .cartouche {
	max-width: 70%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 90px;
}

.pack_signatures .cartouches .cartouche span.hl {
	width: 100%;
    display:block;
}
.pack_signatures .cartouches .cartouche img {
    left: 35%;
}
.pack_signatures_inner br {
	display:none;
}
.pack_signatures {
    padding-bottom: 50px !important;
}
.pack_signatures .cartouches .cartouche:last-child {
    margin-bottom: 65px;
}
.acheter ul:last-child .btn {
    font-size: 16px;
}
._main {
    font-size: 16px;
}
    .pack_signatures .cartouches .cartouche .tarif {
        left: 5%;
        width: 90%;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .btn {
        font-size: 20px;
    }
    .solution_supports {
        width: 50%;
    }
    .solution_banner {
        padding-top: 20%;
    }
    .solution_supports {
        width: 88%;
        top: 0;
        bottom: 0;
        position: relative;
        left: 0;
    }
    .pack_signatures {
        padding-left: 50px;
        padding-right: 50px;
    }
    .pack_signatures .cartouches .cartouche .tarif {
        left: 5%;
        width: 90%;
    }
}