:root {
    --libbela-primary-color: #33cc99;
    --libbela-primary-color-hover: #10865f;

    --libbela-secondary-color: #3FC3C4;

    --libbela-terciary-color: #BEFFEC;
}


/* Couleurs du thème */
.primay-color {
	color: var(--libbela-primary-color);
}

.secondary-color {
	color: var(--libbela-secondary-color);
}

.terciary-color {
	color: var(--libbela-terciary-color);
}

.text-libbela {
	color: 	#4ac7c9 !important;
}

.text-lightgrey {
	color: lightgrey;
}

a{
	color: var(--libbela-primary-color);
}
a:hover, a:focus{
	color: var(--libbela-primary-color-hover);
}

html, body, #app {
	width: 100% !important;
	min-height: 100vh;
	margin: auto;
}

main {
	color: #fff;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#app {
	background: transparent linear-gradient(180deg, #72DAB9 0%, #2B6A60 78%, #1A4737 100%) 0% 0% no-repeat padding-box;
	max-width: 1920px;
	width: 100%;
	height: 100%;
}

.container {
	padding-left: 5%;
	padding-right: 5%;
}

/* Menu Burger / politiques */
.burger-on, .politiques-on {
	display: block;
	position: absolute;
	height: 100vh;
	width: 100%;
	z-index: 999999;
}

.politiques-on {
	display: flex !important;
}

.burger-off, .politiques-off {
	display: none !important;
}

#page-politiques {
	width: 100%;
}

#page-politiques > div {
	padding: 8% 0 0 0;
	width: 100%;
	height: 80vh;
	margin-top: 10vh;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0px 3px 6px #00000029;
}

.scroll {
	overflow-y: scroll;
	padding: 0 5% 0 5%;
	height:  55vh;
	border-bottom: 0.2px solid #ccc;
	padding-bottom: 1rem;
}

#page-politiques h1 {
	font-family: 'Poppins';
	margin-bottom: 2rem;
}

#page-politiques p {
	font-size: 1.1rem;
}

#cancel-politiques {
	position: absolute;
	cursor: pointer;
	color: #6e6e6e !important;
	font-weight: 100 !important;
	font-size: 2rem;
	top: .8rem;
	right: .8rem;
}

.blur {
	filter: blur(4px);
}

.no-scroll {
	position: fixed !important;
}

.pl-5 {
	padding-left: 3rem;
}

.pr-5 {
	padding-right: 3rem;
}






/*******************
*	Style général
********************/

img {
	max-width: 100%;
}

p {
	font-family: 'Roboto' !important;
	font-size: 1.1rem;
}

h1 {
	font-family: 'Roboto';
	font-weight: 300 !important;
}

h4 {
	font-size: 0.9em;
	font-weight: 900;
}

.form-control:focus {
	border: transparent !important;
}

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

.text-unbold {
	font-weight: normal;
}

.text-italic {
	font-style: italic;
}

.indent-1 {
	margin-left: 10%;
}

.color-picto {
	-webkit-background-clip:text;
	color:transparent;
}

.secondary-title {
	color: #48c6c9;
	font-size: 2.3rem !important;
	font-weight: 300;
}

.form-title {
	color: #1e9fbc !important;
}

.poppins {
	font-family: 'poppins' !important;
}

.no-border-focus:focus {
	box-shadow: none !important;
	border: none !important;
	height: 40px;
}

.under-reussi {
	position:  relative;
	display: inline-block;
}
.under-reussi::after {
	content: "";
	position: absolute;
	height: 13px;
	width: 110%;
	bottom: -15px;
	rotate: -2.5deg;
	left: -3%;
	background-color: #1EC286;
	border-top-left-radius: 65%;
	border-bottom-right-radius: 65%;
}




/************
*	HEADER
*************/
#btn-burger {
	display: none;
	cursor: pointer;
}

header {
	font-family: 'Poppins';
	background-color: #fff;
	box-shadow: 0px 3px 6px #00000029;
	padding-bottom: 20px;
}

header a {
	color: var(--libbela-primary-color) !important;
	letter-spacing: 0.040em;
}

header .contact, header .button-log {
	font-size: 0.8em;
}

#logo-libbela {
	width: 100px;
	margin-top: -20px;
}
#logo-libbela img:first-child {
	transform: rotate(90deg);
}

#nav-libbela {
	font-size: 1.2em;
	margin-left: auto;
	margin-right: 0;
}

#nav-libbela li {
	margin-left: 1rem;
}




/***********
*	 FAQ
************/
#faq {
	padding: 4% 2% 6% 2%;
}
#faq p, #faq li {
	color: #707070;
	font-family: 'Poppins' !important;
	font-size: 1.4rem;
	font-weight: 300;
}

#faq .faq-title {
	color: #48c6c9;
	font-size: 2.2rem !important;
	font-family: 'Roboto' !important;
	font-weight: 300;
	margin-top: 2rem;	
}

.edit-btn, .edit-btn:hover {
	color: #48c6c9;
	font-style: italic;
    font-size: 0.7rem;
}



/*******************
*	 Se connecter
********************/
#form-login .bg-label{
	box-shadow: 0px 3px 6px #00000029;
	background: #61DDB5 0% 0% no-repeat padding-box;
	border-radius: 0.375rem 0px 0px 0.375rem;
	font-size: 1.5em;
	padding: 0px 10px 0px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#form-login .form-group {
	width: 100%;
	max-width: 250px;
}

#form-login div > label {
	height: 45px;
	min-width: 60px;
}

#form-login .form-group input{
	box-shadow: 0px 3px 6px #00000029 !important;
	height: 45px !important;
	width: 100%;
	box-shadow: none;
	border: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding-left: 1.5rem;
}

#form-login .label-absolute {
	height: 0px !important;
	min-width: 60px;
	font-size: 1.3rem;
}

#form-login label.is-focus {
	font-size: 0.6rem;
	top: 0;
}

#form-login .has-error {
	border-color: red !important;
}




/************
*	Accueil
*************/

.bg-nuage {
	background: url('../../../web/images/bg/nuage-location.png') 0 0 no-repeat;
	background-size: 100% 580px;
	min-height: 600px !important;
}

/* Pourquoi s'assurer chez Libbela */
#get-my-tarif {
	margin: auto;
	max-width: 30%;
}

#get-my-tarif > div:first-child {
	box-shadow: 0px 3px 20px #00000029;
	border-radius: 60px;
	background-color: #fff;
}

#get-my-tarif input {
	border-radius: 60px;
	border: transparent;
}

#get-my-tarif input:focus {
	box-shadow: none;
}

#get-my-tarif button {
	font-size: 1rem;
	white-space: nowrap;
}

#why-insure-libbela > div {
	padding-left: 5%;
	padding-right: 5%;
	background: rgba(25, 142, 128, 0.72) 0% 0% no-repeat padding-box;
}

#why-insure-libbela li {
	font-size: 1.1em;
	margin-left: 15px;
}

#why-insure-libbela {
	background-image: url('../images/bg/cliffs-111534_640.jpeg');
	background-size: cover;
	color: #fff;
	width: 100%;
}

.questions {
	font-size: 2rem;
}
.faq {
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 2.5rem;
}

.double-image {
	position: relative;
	height: 60%;
	width: 100%;
}
.double-image img {
	width: 50%;
	height: 80%;
	object-fit: cover;
	position: absolute;
}
.double-image img:last-child {
	width: 60;
	height: 100%;
	left: 25%;
	top: 35%;
}



/************
*	Adhérer
*************/
/* Step bar */
.bloc-step{
	font-family: 'Poppins';
}

.bloc-step button {
	font-size: 0.85em;
}

.step {
	position: relative;
}

.bar-step {
	bottom: 14px;
	left: 50%;
	position: absolute;
	display: block;
	width: 110%;
	border: 0.3px solid #fff;
	background-color: #fff;
}
.bar-step-ok {
	border: 1.5px solid #fff;
}

.circle {
	display: block;
	height: 28px;
	width: 28px;
	margin: auto;
	border-radius: 100%;
	background-color: #fff;
}


/* Bon à savoir */
#good-to-know {
	padding: 5%;
}
#good-to-know p{
	text-indent: 2%;
}
#good-to-know h2 {
	position: relative;
	display: inline-block;
	font-size: 1.7rem;
	font-weight: 400;
	color: #1e9fbc !important;
}
#good-to-know h2::after {
	content: "";
	position: absolute;
	bottom: -2px;
	height: 1px;
	width: 70%;
	left: 15%;
	background-color: var(--libbela-primary-color);
}

/* Form adhérer */
.border-adhere {
	border: 5px solid #4ac7c9;
	border-radius: 42px;
	margin-top: 5%;
	padding: 5%;
}

#form-adhere {
	background: #fff;
	padding: 5% 10% 5% 10%;
	margin-bottom: 10%;
}

#form-adhere .form-group {
	border: 1px solid #717171;
	border-radius: 20px;
	box-shadow: 0px 3px 6px #00000029;
	padding-left: 1.3rem;
	padding-right: 1.3rem;
	margin-top: 3.5rem;
	color: dark;
}

.form-group.is-focus {
	border-color: transparent !important;
}

#form-adhere .input-group-text{
	line-height: 100%;
    height: 100%;
	margin-left: -1.3rem;
	margin-right: 3px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}


#form-adhere .input-group-append .input-group-text{
	margin-left: 0;
	margin-right: -1.3rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

#form-adhere .form-group input{
	height: 53px;
	box-shadow: none;
	border: none;
}

.label-relative{
	position: relative;
	color: lightgrey;
}

.label-relative .form-control-sm {
	height: 3.2rem !important;
	font-weight: 200;
	padding-left: 3px;
}

.label-absolute {
	position: absolute !important;
	top: 0.5rem;
	left: 1.3rem;
	z-index: 99;
	transition: all .3s;
	font-weight: 300;
	font-size: 1.5rem;
	padding-left: 3px;
	height: 0;
	/* Pour retirer l'effet cliquable du label */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */
}

label.is-focus {
	font-size: 0.7rem;
	top: 0;
}

.has-addons .label-absolute{
	left: 2.7rem;
}

.has-error {
	border-color: red !important;
}

#erreur_message {
	border: none !important;
	box-shadow: none !important;
	padding-left: 1rem;
	width: 100%;
}


/* Recap adhérer */
#recap-adhere h2 {
	color: #48c6c9;
	font-size: 1.1rem;
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

#recap-adhere p {
	font-size: 0.8rem;
	margin-bottom: 0.275rem;
	font-family: 'Poppins' !important;
	font-weight: 300;
}


/* Payement */
#payement .active {
	border: 4px solid #3FC3C2;
}

.choix_payement i{
	font-size: 4em;
}

.choix_payement {
	border: 4px solid #B7CACA;
	border-radius: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 25%;
	color: #4a8b8b;	
}

.choix_payement p {
	padding-left: 0.3rem;
	padding-right: 0.3rem;
}

#payement .checkbox label{
	font-family: 'Poppins';
	margin-bottom: 1rem;
}

#payement p {
	font-size: 1rem;
}

.text-info-payement,  {
	font-size: 1rem !important;
}

form input, form textarea {
	font-family: 'Poppins';
	font-weight: 200 !important;
}

/* Fond nuage */
.title-nuage {
	display: inline-flex;
}
.title-nuage i {
	margin-top: 0.5rem;
	margin-right: 1rem;
}

.space-top {
	margin-top: 6rem !important;
}

.bg-small-nuage-general, .bg-small-nuage-general a {
	color: #0B5D7C;
	font-family: 'poppins';
}

.bg-small-nuage-general .h2 {
	font-weight: 300;
	font-size: 1.6rem;
}

.bg-small-nuage-general .p{
	display: block;
	font-size: 1rem;
	margin-left: 2rem;
}

.bg-small-nuage-general {
	background-size:  100% 160px;
	background-repeat: no-repeat;
	margin-top: 1.8rem;
	min-height: 160px;
}

.bg-small-nuage-general > a {
	margin-left: 4rem;
	padding-top: 30px;
}

.bg-small-nuage-general a{
	display: block;
	text-decoration: none;
}

.bg-small-nuage-1 {
	background-image: url('../../../web/images/bg/bg-nuage-1.png');
}

.bg-small-nuage-2 {
	background-image: url('../../../web/images/bg/bg-nuage-2.png');
}

.bg-small-nuage-3 {
	background-image: url('../../../web/images/bg/bg-nuage-3.png');
}




/*************
*	Contact
**************/
#form-contact .form-group {
	border: 1px solid #717171;
	border-radius: 10px;
	box-shadow: 0px 3px 6px #00000029;
	padding-left: 1.3rem;
	padding-right: 1.3rem;
	margin-top: 2.5rem;
	color: dark;
}

#form-contact .form-group input{
	height: 53px;
	box-shadow: none;
	border: none;
}

#form-contact .form-group textarea{
	box-shadow: none;
	border: none;
	resize: none;
	width: 100%;
	padding: 0 1.5rem 0 1.5rem;
}

#form-contact .form-group.textarea {
	padding: 0;
	padding-top: 1rem;
	padding-bottom: .75rem;
}


/* MY CAROUSEL */
#info-guarantees-carousel {
	display: none;
}

#my_carousel .item > div {
	padding: 1rem;
	border-radius: 8px;
	min-height: 230px;
}

#my_carousel .item i {
	background: transparent linear-gradient(180deg, #72DAB9 0%, #2B6A60 78%, #1A4737 100%) 0% 0% no-repeat padding-box !important;
	-webkit-background-clip: text !important;
	font-size: 2rem;
	margin-top: 1rem;
}

#my_carousel .item .material-icon {
	transform: scale(1.4);
}

#my_carousel .item h3 {
	font-size: 1.2rem;
}

#my_carousel .item p {
	font-size: 1rem;
}

#my_carousel {
	width: 90%;
	margin: auto;
	overflow: hidden;
}
#my_carousel div.carousel__container {
	width: 100%;
	height: 230px;
	position: relative;
	display: flex;
}
#my_carousel div.item {
	left: 100%;
	position: absolute;
	width: 30%;
}

#my_carousel div.item:nth-child(1) {
	left: 0;
	animation: anim_left_1 2s 3.5s;
}
#my_carousel div.item:nth-child(2) {
	left: 35%;
	animation: anim_left_2 2s 3.5s;
}
#my_carousel div.item:nth-child(3) {
	left: 70%;
	animation: anim_left_3 2s 3.5s;
}
#my_carousel div.item:nth-child(4) {
	left: 105%;
	animation: anim_left_4 2s 3.5s;
}

/* Animations carousel */
@keyframes anim_left_1 {
	from { left: 0%; }
	to { left: -35%; }
}
@keyframes anim_left_2 {
	from { left: 35%; }
	to { left: 0%; }
}
@keyframes anim_left_3 {
	from { left: 70%; }
	to { left: 35%; }
}
@keyframes anim_left_4 {
	from { left: 105%; }
	to { left: 70%; }
}

/* FIN MY CAROUSEL */



/*#info-guarantees {
	position: relative;
}
#info-guarantees > div {
	display: flex;
	justify-content: space-evenly;
}

#info-guarantees > div > div {
	width: 25%;
	min-height: 200px;
	padding: 2%;
	border-radius: 10px;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 10px 40px #00000010;
}

#info-guarantees i {
	font-size: 3em;
	background: transparent linear-gradient(180deg, #91EED2 0%, #51C9CD 100%) 0% 0% no-repeat padding-box;
	-webkit-background-clip: text;

}

#info-guarantees h3{
	font-weight: 400;
	font-size: 1.2rem;
	margin-bottom: 1rem;
	font-family: 'poppins';
}
#info-guarantees p {
	font-size: 1.1rem;
	font-weight: 300;
}

#info-guarantees div.arrow {
	top: 100px;
	position: absolute;
}*/




/***********************
*	 MENTIONS LGALES
************************/

#cgu {
	color: black;
	font-size: 0.8em;
	padding: 0 5% 20% 5%;
	margin-top: 5%;
	position: relative;
}
#cgu p {
	font-family: 'Poppins' !important;
	font-weight: 300;
}

.statut-mentions{
	display: flex;
	justify-content: end;
	width: 100%;
	left: 0;
	top: 0;
	position: absolute;
}

.statut-mentions img {
	width: 40%;
	max-height: 250px;
	bottom: -35px;
	position: absolute;
}




/************
*	FOOTER
*************/

footer {
	font-weight: 300;
	padding-top: 5%;
}

footer, h4 {
	color: #fff;
	font-size: 0.85em !important;
	margin-bottom: 15px !important;
}

h4.fc {
	font-size: 1.2em !important;
	font-weight: 300;
}

footer div:first-child h4 {
	letter-spacing: 1.5px;
}
footer a {
	color: #fff;
}
footer a:hover {
	color: rgb(41, 159, 197) !important;
}

footer .nav-link {
	padding-left: 0;
	color: #fff;
}

#copyright, #copyright a {
	font-family: Poppins;
	font-weight: 300;
	margin-top: 70px;
	text-decoration: none;
}

#newsletter input {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	font-size: 0.8em;
}

#newsletter button {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.btn-swap {
	height: 120%;
}

.bar-small-device {
	display: none;
}


/**/
/*barre de progression*/
.div_activity, .div_activity_background{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1000000;
    width: 100%;

    position: fixed;
}

.activity_info{
    color: #e83c13;
    font-weight: bold;
    margin: 18% auto 0 auto;
    position: fixed;
    text-align: center;
    width: 100%;
}

.div_activity_background{
    background: rgba(0,0,0,.5);
    z-index: 100000;
}

.my_modal{
    background: rgba(0,0,0,.5);
}

.div_activity .progress{
    margin: 20% auto 0 auto;
    width: 50%;
	background-color:  #33cc99 !important
    opacity: 1;
}

.spin-colo: {
	color: #33cc99 !important
}

.div_activity_fixe{
    height: 50px;
    left: auto;
    padding: 20px 0;
    position: relative;
    top: auto;
}

.div_activity_fixe .progress{
    margin: 0 auto;
}

#wrap.blurry{
	filter: blur(4px);
}

.progress-circle{
	position: fixed;
    top: 40%;
    text-align: center;
    width: 100%;
    font-size: 5rem;
}

.progress-color {
	color: var(--libbela-primary-color);
}
/*barre de progression*/

/*CHECKOUT*/
.ml-payment{
	font-size: .8rem;
	margin:  3rem 0 0 0;
}

.card-frame {
    border: solid 1px #13395E;
    border-radius: 3px;
    width: 100%;
    margin: 1.5rem auto;
    height: 40px;
    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2)
}

.card-frame.frame--rendered {
    opacity: 1
}

.card-frame.frame--rendered.frame--focus {
    border: solid 1px #13395E;
    box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15)
}

.card-frame.frame--rendered.frame--invalid {
    border: solid 1px #D96830;
    box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15)
}