body, html {
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -.3px;
    color: var(--black) !important;
    text-rendering: optimizeLegibility;
    font-size: 15px;
    background-color: var(--grey);}

.container {
    max-width: 1020px !important;}

/** Colors */

:root {
    --black: #27273f;
    --grey: #f6f7f9;
    --green : #13ca75;
    --light-blue: #eef2fe;
    --blue: #3f58f2;
    --red:tomato;}

.green {
    color:var(--green);}


figure {
    margin: 0;}

.card-body {
    background-color: #fff;
    padding: 2em 1em 2em 1em;
    color: #575757;
    font-weight: 600;
    border-radius: 0px 0px 8px 8px;
    text-align: center;}

/** Breadcrumb */

.breadcrumb {
    background-color: transparent;
    padding: 1rem 0rem;}

.breadcrumb-item a {
    color: var(--blue);}

.breadcrumb-item.active {
    color: var(--black);}

/** Menu */

.dropdown-menu {
    background-color: #fff !important;}

.white {
    background-color: var(--grey);}

.card {
    margin: 2em 0em 2em 0em;
    background-color: #fff;
    border: 2px solid #ecf0f5;
    border-radius: 8px;}

.card-faq {
    padding: 0em;
    background-color: #fff;
    border: 2px solid #ecf0f5;
    border-radius: 8px;}

.card-white {
    padding: 2em 1em 2em 1em;
    background-color: #fff;
    border: 1px solid #64738f;
    border-radius: 8px;
    color: #172030;}

.card-white h2 {
    color: #172030;}

.card-header {
    border-bottom: none;
    background-color: white;}

.list {
    list-style-type: none;}

/*****   Font        *****/

.font20 {
    font-size: 20px;}

.font-600 {
    font-weight: 600;}

.fa-check {
    color: var(--green);}

.fa-times {
    color: var(--red);}

.fa-star {
    color: goldenrod;}

.verticalmiddle {
    display: flex;
    flex-direction: column;
    justify-content: center;}

.border-img {
    border : 2px solid #ecf0f5;
    border-radius: 8px;}

.button-cta {
    background-color: tomato;
    padding: 1em 1em 1em 1em;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.2em;
    margin: 2em 0em 2em 0em;
    transition: all ease 0.5s}

.button-cta:hover {
    background-color: #fff;
    padding: 1em 1em 1em 1em;
    border-radius: 4px;
    text-align: center;
    color: tomato;
    font-weight: 600;
    font-size: 1.2em;
    margin: 2em 0em 2em 0em;}

.comparateur {
    background: linear-gradient(to right,#4a4ab5,#40d06c);
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.3em;
    cursor: pointer;}

.circle {
    border-radius: 50%;
    border: 3px solid #ecf0f5;
    text-align: center;
    height: 45px;
    width: 45px;
    font-size: 22px;}

.grid {
    align-content: center;
    display: grid;
    justify-content: center;}

.cta-accroche {
    margin-top: 50px;
    margin-bottom: 50px;}

.slogan {
    text-align: center;
    font-size: 1.1em;}

ul.no-bullets {
        list-style-type: none; /* Remove bullets */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margins */}

.boutoncontact{
    display: inline;
    border: 2px solid white;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    transition: all ease 0.5s;
    border-radius: 30px;}

.boutoncontact:hover{
    border: 2px solid white;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff;
    color: #21d279;}

.titre {
    margin-bottom: 50px;}

nav {
	display: inline-block;
	width: 100%;}

nav > ul {
	list-style: none;
	padding: 0;
	margin: 0;}

nav > ul > li {
	float: left;
    padding-top: 9px;}

nav > ul > li:last-child {
	margin-right: 0px !important}

nav > ul > li > ul.sub-nav {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding: 5px 30px 5px 15px;
    text-align: left;
    line-height: 30px;
    border-top: 2px solid #21d279;}

nav > ul > li > ul.sub-nav a{
    color: #383f5c;}

nav > ul > li > ul.sub-nav a:hover{
    color: #21d279;}

nav > ul > li:hover > ul.sub-nav {
    display: block;}

a,.btnfrom {
	text-decoration: none !important;
	-webkit-transition: all ease 0.5s;
	-khtml-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	transition: all ease 0.5s;}

a.active {
	color: #21d279;}

nav > ul > li > a {
	color: #fff;
	text-transform: uppercase;
	font-size: 1em;}

nav > ul > li > a:hover {
	color: #21d279;}

section {
    width: 100%;
    padding-top: 4em;
    padding-bottom: 4em;}

.news figure {
    margin: 0 !important;}

.first-section {
    background-color:var(--grey);
    margin-top: 2em;}

.btn-link {
    font-weight: 600;
    color: var(--black);
    background-color: transparent;
    text-decoration: none;}

.btn-link:hover {
    font-weight: 600;
    color: var(--black);
    background-color: transparent;
    text-decoration: none;}

.hero {
    min-height: 400px;
    padding: 50px;
    padding-top: 70px;}

.logo {
    max-width: 190px;}

h1, h2, h3, h4 {
    color: var(--black);}

h1 {
    font-size: 2.3em;
    font-weight: 600;}

@media screen and (max-width: 428px) {
    h1 {
        font-size: 1.8em;
        margin-bottom: 1em;}}

.card h1 {
    margin-bottom: 1em;
    font-size: 2em;}

.card h2   {
    font-size: 1.5em;}
    
h2 {
    font-size: 1.5em;
    font-weight: 600;}

.h2 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--black);}

h3, h4 {
    font-size: 1.2em;
    margin-bottom: 1em;}

section a {
    color: var(--blue);}

section a:hover {
    color: var(--blue);}

footer a {
    color: white;}

.footer span {
    color: white;
    font-size: 10px;
    padding-top: 20px;
    text-align: center;
    margin-bottom: 0px;}

.arrow {
    width: 20px;}

.nocolor {
    color: var(--black) !important;}

.more {
    margin-top: 6em;}

footer {
    padding: 1em 0em 1em 0em;}

footer a:hover {
	color: #808681;}

footer p {
    font-size: 1em;}

.big-picture {
    border-radius: 8px;
    border: 2px solid #ecf0f5;}

.footer {
    padding: 2em 2em 1em 2em;
    background-color: #253727;}

.copyright {
    font-size: 12px;
    color: var(--black);
    padding-top: 20px;}

.nomargin {
	margin: 0 !important;}

/** Sidebar **/    
.sticky-md-top {
    top: 65px;}

/** Modal **/

.modal-lg {
    max-width: 1280px;}

.modal-content {
    border: none;
    border-radius: 8px;
    padding: 1em;}

.modal-content h2 {
    color: #444;
    font-weight: 800;}

.modal-content h3 {
    font-weight: 600;
    color: #444;}

.button-bonus, .button-info, .button-close {
    padding: 1.2em 1em 1.2em 1em;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: white;
    font-size: .9em;
    text-align: center;}

.button-close {
    background-color: tomato;}

.button-bonus {
    background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
    background-size: 200% auto;
    transition: 0.5s;}

.button-bonus:hover {
    background-position: right center;
    transform: scale(1.03);
    color: white;
    text-decoration: none;}

.button-cat {
    transition: 0.5s;
    padding: 0.5em;
    color: var(--black);
    font-size: 1em;
    text-align: center;
    background-color: #fff;
    border: 2px solid #ecf0f5;
    border-radius : 4px;
    font-weight: 500;}

.button-cat:hover {
    transition: 0.5s;
    padding: 0.5em;
    color: var(--black);
    font-size: 1em;
    text-align: center;
    background-color: #ecf0f5;
    border: 2px solid #fff;
    font-weight: 500;}

.button-info {
    background-color:var(--blue);}


/** Résolution **/

@media screen and (min-width: 1080px) {

	nav > ul > li {
		margin-right: 11em;}
}

@media screen and (max-width: 1024px) {
	.formcontact {
		padding: 0px 30px;}

	nav > ul > li {
		margin-right: 10.886em;}}

@media screen and (max-width: 980px) {
	nav > ul > li {
		margin-right: 5.648em;}}

@media screen and (max-width: 780px) {
	nav > ul > li {
		margin-right: 5.410em;}}

@media screen and (max-width: 660px) {

	nav > ul > li {
		margin-right: 2.552em;
	}

}

@media screen and (max-width: 480px) {
	.formcontact {
		padding: 0px 10px;}

	nav {
		padding-left: 0px;
		padding-right: 0px;}

	nav > ul > li {
		margin-right: 1.124em;
	}
}

@media screen and (max-width: 380px) {
	nav {
		padding-left: 0px;
		padding-right: 0px;}

	nav > ul > li {
		margin-right: 0;
		padding: 5px 10px 0px;}

	nav > ul > li:nth-child(odd) {
		float: left !important;}

	nav > ul > li:nth-child(even) {
		float: right !important;}}

@media screen and (max-width: 320px) {
	nav > ul > li {
		padding: 5px 5px 0px;}

	.logo {
		font-size: 2.150em;}}

@media (min-width: 1080px) {
  .container {
    max-width: 1020px;}}

@media (max-width: 780px) {
    .container {
		padding-right: 1.5em !important;
		padding-left: 1.5em !important;}}

@media (max-width: 428px) {
    .container {
        width: 100%;
	    padding-right: 1em !important;
        padding-left: 1em !important;}

    .cpart > span, .cpart.link > a {
        padding-top: 0 !important;}

    section.first-section {
        margin-top: 2em;}

    .button-close {
        font-size: 0.7em;}
    
    .button-bonus {
        font-size: 1em;}

    .csite ul{
        padding-left: 0 !important;}}

@media (max-width: 428px) {
    nav{
        margin-top: 0;}

   section {
        padding-top: 2em;}}

.btnnav {
    border: none;
    padding: 0;
    background-color: #fff;
    transition: all ease 0.5s;}

.btnnav:hover {
    color: #21d279;}

.btn-contact {
    border: none;
    background-color: transparent;
    line-height: 45px;
    transition: all ease 0.5s;}

.navbar {
    min-height: 0px;
    margin-bottom: 0px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    background-color: var(--grey);}

.navbar-brand {
    text-transform: uppercase;
    color: var(--black);
    margin-right: 30px;}

.navbar-nav > li {
    margin-right: 1.5em;}

.nav > li > a, .dropdown-menu > li > a  {
    text-transform: uppercase;
    color: var(--black);}

.navbar-toggle .icon-bar {
    background-color: var(--black);}

.nav > li > a:focus, .nav > li > a:hover, .navbar-brand:focus, .navbar-brand:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover  {
    background-color: transparent;
    color: #47165a;}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: transparent;
    border:none}

.navbar-brand {padding: 10px 15px}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--black);}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

.navbar-toggler {
    border: 2px solid var(--black);}

.navbar-expand-lg .navbar-toggler {
    color: rgba(0,0,0,.5);}

.sidebartitle {
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;}

#faqExample button {
    white-space: initial}