@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Outfit:wght@300;400;500;700&display=swap');


/*GENERAL*/
html
{
	height : 100%;
}
*
{
	box-sizing : border-box;
	outline : none;
	-webkit-tap-highlight-color : rgba(255, 255, 255, 0);
}
BODY
{
	margin : 0;
	font-family : 'Open Sans',sans-serif;
	font-size : 14px;
	color : #353535;
	background-color: #008890;
}
::-webkit-scrollbar
{
	width: 5px;
	height: 5px;
}
::-webkit-scrollbar-thumb
{
	background: #008890;
}
::-webkit-scrollbar-track
{
	background: #ddd;
}
h1,h2
{
	margin : 0;
	padding : 25px 0 10px;
	text-align : center;
	font-size : 26px;
	font-weight : normal;
	color : #353535;
}
h3
{
	margin : 0;
	padding : 25px 0 10px;
	font-size : 25px;
	color: #008990;
	font-weight: 400;
	text-align : center;
}
hr
{
	display : block;
	width : 100px;
	margin : 0 auto;
	padding : 0 0 20px;
	max-width : 100%;
	border : 0;
	border-top : 3px solid #008890;
}
.center
{
	justify-content : center;
	text-align : center;
}
.middle
{
	display : flex!important;
	align-items : center!important;
}
.middle.center
{
	justify-content : center;
}

/*FORMULAIRE*/
#captchagc,
#captchagc *
{
	box-sizing: border-box;
	outline: none;
}
#captchagc
{
	position: relative;
	background-color: #E7E7E7;
	border: 1px solid #D6D6D6;
	width: 250px;
	height: 70px;
	overflow: hidden;
	margin: 10px auto;
}
#captchagc > img:nth-of-type(1)
{
	position: absolute;
	top: 18px;
	left: 18px;
	width: 34px;
	height: 34px;
	z-index: 2;
	margin: 0!important;
}
#captchagc > img:nth-of-type(2)
{
    position: absolute;
    top: 40px;
    left: 25px;
    width: 25px;
	height: 25px;
	z-index: 3;
	margin: 0!important;
	animation: 3s ease-out 1s infinite running captchagc;
}
@keyframes captchagc
{
	0% { left: 25px; }
	25% { left: 25px; }
	50%{ left: 210px; }
	100%{ left: 210px; }
}
#captchagc > img:nth-of-type(1) + div
{
	position: absolute;
	top: 14px;
	right: 14px;
	border: 1px solid #535353;
	border-radius: 4px;
	width: 41px;
	height: 40px;
	background-color: #FFF;
	z-index: 1;
}
#captchagc > img:nth-of-type(1) + div.accept
{
	border: 1px solid #F3990C;
}
#captchagc > img:nth-of-type(1) + div.hover
{
	border: 1px solid #1CD129;
}
#captchagc:before
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	content: ">>>>>>>>";
	font-family: 'Open sans', sans-serif;
	font-size: 17px;
}
#captchagc.valid:after
{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	content: "";
	background-color: rgba(255,255,255,0.9);
	z-index: 3;
}
#captchagc > i
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	opacity: 0;
	transition: ease-in-out 200ms opacity, ease-in-out 200ms left;
}	
#captchagc.valid > i:nth-of-type(1)
{
	opacity: 1;
	left: 17%;
}
#captchagc > i:nth-of-type(1):before
{
	content: "\f00c";

	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	
	padding: 5px;
	color: #12D954;
	font-size: 30px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 100%;
	background-color: #FFF;
	border: 2px solid #12D954;
}
#captchagc > i:nth-of-type(2)
{
	position: absolute;
	top: 23px;
	left: 113px;
	z-index: 5;
	font-size: 25px;
	opacity: 1;
}
#captchagc.valid > img:nth-of-type(1)
{
	top: 18px!important;
	left: 197px!important;
}
#captchagc.valid > img:nth-of-type(2)
{
	display: none;
}

form
{
	display : inline;
}
input[type='text'],
input[type='password'],
select,
textarea
{
	margin : 2px 0;
	padding : 6px;
	border : 1px solid #CCC;
	border-radius : 2px;
	outline : none;
	font-family : 'Open Sans',sans-serif;
	font-size: 14px;
	width: 100%;
}
select
{
	padding : 4px 6px;
}
textarea
{
	padding : 6px;
}
input[type='text']:focus,
input[type='password']:focus,
select:focus,
textarea:focus
{
	border : 1px solid #008890;
	outline : none;
}

fieldset
{
	margin : 0;
	padding : 0;
	border : 0;
}
fieldset > legend
{
	text-align : center;
	font-size : 16px;
	font-weight : bold;
}
fieldset > ul
{
	margin : 0;
	padding : 0;
	font-size : 0;
	list-style : none;
}
fieldset > ul > li
{
	display : inline-block;
	width : 50%;
	margin : 0;
	padding : 0;
	font-size : 14px;
	vertical-align: middle;
}

fieldset > ul > li .input
{
	display : block;
	width : 100%;
	padding : 5px;
	text-align : left;
	font-size : 0;
}
fieldset > ul > li .input > label
{
	display: block;
	font-weight: 400;
	font-size : 16px;
	padding: 3px 0;
}
fieldset > ul > li .input > div > *
{
	font-size: 14px;
}
fieldset > ul > li .input > div > input,
fieldset > ul > li .input > div > select,
fieldset > ul > li .input > div > textarea
{
	display : inline-block;
	width : 100%;
	font-size : 14px;
}
fieldset > ul > li.double
{
	width : 100%;
}

/*NOTIFICATIONS*/
.notification
{
	margin : 10px;
	padding : 10px 20px;
	border-radius : 3px;
	text-align : left;
	color : #FFF;
}
.notification.small
{
	margin : 0;
}
.notification:before
{
	display : inline-block;
	margin : 0 10px 0 0;
	font-family : "Font Awesome 5 Pro";
	font-size : 18px;
	vertical-align : middle;
	text-rendering : auto;
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
}
.notification > span
{
	display : inline-block;
	width : calc(100% - 40px);
	vertical-align : middle;
}
.notification.closable:after
{
	content : "\f00d";
	position : absolute;
	top : 50%;
	right : 0;
	margin : 0 10px 0 0;
	font-family : "Font Awesome 5 Pro";
	font-size : 18px;
	vertical-align : middle;
	transform : translateY(-50%);
	cursor : pointer;
	text-rendering : auto;
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
}
.notification.absolute
{
	position : absolute;
	top : 0;
	right : 0;
	left : 0;
}
.notification.validation,
.button.validation
{
	background-color : #37bc9b;
}
.notification.validation:before
{
	content : "\f00c";
}
.notification.information,
.button.information
{
	background-color : #5D9CEC;
}
.notification.information:before
{
	content : "\f05a";
}
.notification.erreur,
.button.erreur
{
	background-color : #F05050;
}
.notification.erreur:before
{
	content : "\f06a";
}
.notification.alert,
.button.alert
{
	background-color : #f0bd50;
}
.notification.alert:before
{
	content : "\f071";
}
.notification.disable,
.button.disable
{
	background-color : #A2A2A2;
}

#site
{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	background-color: #FFF;
}
#site img
{
	max-width: 100%!important;
	height: initial!important;
}
#site .page
{
	padding: 10px;
}
header
{
	background-color: #008890;
	height: 120px;
}

footer
{
	background-color: #008890;
	height: 120px;
}
a,
a:visited,
a:hover,
a:link
{
	color: #353535;
	text-decoration: underline;
	cursor: pointer;
	font-weight: 400;
}
.button
{
	display: inline-block;
	color: #FFF!important;
	text-decoration: none!important;
	border: 0;
	margin: 0;
	padding: 15px 20px;
	border-radius: 8px;
	background-color: #008990;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
}
.button:hover
{
	background-color: #0BA3AC;
}
#agence
{
	font-size: 17px;
	display: block;
	padding: 25px 10px;
	text-align: center;
	font-weight: 700;
}
#agence a
{
	text-decoration: none;
	font-weight: 700;
	font-size: 17px;
}
#partenaires
{
	position: relative;
	padding: 0 20px;
	height: 495px;
	overflow: hidden;
}
#partenaires > .partenaires-precedent
{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
	font-size: 25px;
}
#partenaires > .partenaires-suivant
{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
	font-size: 25px;
}
#partenaires > ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}
#partenaires > ul > li
{
	position: absolute;
	top: 0;
	width: calc(100% - 40px);
	margin: 0;
	padding: 20px;
	background-color: #dedede;
	border-radius: 10px;
	transition: 400ms ease-in-out opacity;
	opacity: 0;
}
#partenaires > ul > li:not(.select)
{
	pointer-events: none;
}
#partenaires > ul > li.select
{
	opacity: 1;
	transition-delay: 400ms;
}
#partenaires > ul > li .partenaire-image
{
	position: relative;
	height: 200px;
}
#partenaires > ul > li .partenaire-image img
{
	object-fit: contain;
	height: 100%!important;
    width: 100%!important;
}
#partenaires > ul > li .partenaire-texte
{
	padding: 20px 0;
	height: 180px;
	/*display: flex;*/
	/*align-items: center;*/
	overflow: auto;
	margin: 10px 0;
}
#partenaires > ul > li .partenaire-nom
{
	font-size : 19px;
	font-weight: 700;
	margin-bottom: 10px;
}
#partenaires > ul > li .partenaire-site a
{
	display: block;
}