@charset "utf-8";
/* Texte de l'application */


/* ---------------------------------------------------------*/
/*Web fonts*/

/* ---------------------------------------------------------*/
body,td,th {
	font-size: var(--text-size-medium); line-height: calc( var(--text-size-medium) + 9px ); 
	color: #111;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root {
	--text-color-black: #000;
	--text-color-mediumblack: #222;
	--text-color-lightblack: #444444;
	--text-color-grey: #666;
	--text-color-mediumgrey: #999;
	--text-color-lightgrey: #CCC;
	--text-color-white: #FFF;

	/*
	--text-color: #32aaa8;
	--text-color2: #f2bb38;
	--text-color3: #e52040;
	--text-color4: #0f74bb;

	--text-color5: #ff2525;
	--text-color6: #057bc9;
	--text-color7: #ecfd00;
	*/

	--text-primary-color1: #3157D4;
    --text-primary-color2: #FF9900;
    --text-primary-color3: #F9CD16;
    --text-primary-color4: #00D0B4;

	--text-secondary-color1: #2AC4FA;
    --text-secondary-color2: #FF9900;
    --text-secondary-color3: #00C54F;
    --text-secondary-color4: #a6ff00;

	--text-tertiary-color1: #243777;

	--text-primary-pal-color1: #4565D2;

	--text-quad-color1: #316BF2;

	--text-extra-color1: #ff0000;
	

	--text-size-extralarge: 55px;
	--text-size-big: 18px;
	--text-size-medium: 16px;
	--text-size-medium2: 15px;
	--text-size-small: 14px;
	--text-size-small2: 13px;
	--text-size-lil: 12px;
}


a         { /*font-family:  "Gotham-Regular", Arial, Helvetica, sans-serif;*/ font-size: 16px; line-height: 20px; color: var(--text-primary-color1); }
a:link    { text-decoration: none; }
a:visited { text-decoration: none; color: var(--text-quad-color1); }
a:hover   { text-decoration: underline; color: var(--text-quad-color1); }
a:active  { text-decoration: none; color: var(--text-quad-color1); }


/* ---------------------------------------------------------- */
/* Links */
a.Linkbreak         { text-decoration:none; line-height: inherit; }
a.Linkbreak:visited { text-decoration:none; }
a.Linkbreak:hover   { text-decoration:none; }
a.Linkbreak:active  { text-decoration:none; }

h1 { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 44px; line-height: 50px; font-weight: bold; margin: 10px 0 10px 0; } 
h2 { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 34px; line-height: 40px; font-weight: 900; margin: 10px 0 10px 0; } 
h3 { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 30px; line-height: 38px; font-weight: 900; margin: 10px 0 10px 0; } 
h4 { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 24px; line-height: 31px; font-weight: bold; margin: 10px 0 10px 0; } 
h5 { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 20px; line-height: 26px; font-weight: bold; margin: 10px 0 10px 0; } 
h6 { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 17px; line-height: 23px; font-weight: bold; margin: 10px 0 10px 0; } 



.text-extralarge { font-size: var(--text-size-extralarge); line-height: calc(var(--text-size-extralarge) + 7px);  }
.text-big { font-size: var(--text-size-big); line-height: calc(var(--text-size-big) + 5px);  }
.text-medium { font-size: var(--text-size-medium); line-height: calc(var(--text-size-medium) + 8px); }
.text-medium2 { font-size: var(--text-size-medium2); line-height: calc(var(--text-size-medium2) + 8px); }
.text-small { font-size: var(--text-size-small); line-height: calc(var(--text-size-small) + 7px); }
.text-lil { font-size: var(--text-size-lil); line-height: calc(var(--text-size-lil) + 6px); }

.text-read { font-size: var(--text-size-big); line-height: calc(var(--text-size-big) + 15px); color: var(--text-color-mediumblack); font-weight: 500; }

.text-primary-black { font-family: 'Encode Sans', Arial, Helvetica, sans-serif; font-weight: 900; }
.text-primary-bold { font-family: 'Encode Sans', Arial, Helvetica, sans-serif; font-weight: bold; }
.text-primary-regular { font-family: 'Encode Sans', Arial, Helvetica, sans-serif; font-weight: 500; }
.text-primary-light { font-family: 'Encode Sans', Arial, Helvetica, sans-serif; font-weight: 400; }

.text-secondary-bold { font-family: 'Dosis', Arial, Helvetica, sans-serif; font-weight: bold; }
.text-secondary-regular { font-family: 'Dosis', Arial, Helvetica, sans-serif; font-weight: 600; }
.text-secondary-light { font-family: 'Dosis', Arial, Helvetica, sans-serif; font-weight: 400; }

.text-tertiary-bold { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-weight: 700; }
.text-tertiary-regular { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-weight: 600; }
.text-tertiary-light { font-family: 'Cabin', Arial, Helvetica, sans-serif; font-weight: 400; }

.text-shadow { text-shadow: 0px 0px 2px rgb(0, 0, 0, 0.5); }
.text-shadow-white { text-shadow: 0px 0px 2px rgb(255, 255, 255, 1); }


/*Form*/
form  {
    margin: 60px 0 0 0 !important;
 }
.form{ margin: 0 0 0 0  !important; }

.form-field { 
	width: 90%; float: left; padding: 15px 5% 10px 5%; margin: 0 0px 10px 0px; 
	font-size: var(--text-size-small); color: #333; line-height: 20px; 
	border: solid 2px #DDD; border-radius: 20px; outline: none; 
}
.form-field:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  }

/*
.form-button1 { 
	width: 200px; padding: 15px 0; border: none; background-color: #000; border-radius: 18px; 
	font-family: "Gotham-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 13px; 
}
.form-button1:hover { background-color: #DB0051; cursor: pointer; }
*/



/*Custom file upload*/
input[id="file-upload"] { display: none; }
input[id="file-upload2"] { display: none; }
input[id="file-upload3"] { display: none; }
input[id="file-upload4"] { display: none; }
input[id="file-upload5"] { display: none; }
input[id="file-upload6"] { display: none; }
input[id="file-upload7"] { display: none; }
input[id="file-upload8"] { display: none; }
input[id="file-upload9"] { display: none; }
input[id="file-upload10"] { display: none; }

input[id="file-upload-image"] { display: none; }
input[id="file-upload-image2"] { display: none; }
input[id="file-upload-image3"] { display: none; }
input[id="file-upload-image4"] { display: none; }
input[id="file-upload-image5"] { display: none; }
input[id="file-upload-image6"] { display: none; }
input[id="file-upload-image7"] { display: none; }
input[id="file-upload-image8"] { display: none; }
input[id="file-upload-image9"] { display: none; }
input[id="file-upload-image10"] { display: none; }

label.custom-upload i { margin: 0 4px 0 0; }

.custom-upload, .custom-upload2 {
	width: 100%; height: 150px; padding: 0 0; margin: 12px 0 0 0; display: block; position: relative;
	background-color: #8dabc7; border-radius: 15px; box-shadow: 1px 1px 10px rgb(0, 0, 0, 0.15); 
	font-size: var(--text-size-small); cursor: pointer; color: #fff; overflow: hidden;
}
.custom-upload:hover { background-color: #6494c0; }

.custom-upload2 { margin: 10px 0 0 0; height: 90px; background-color: #3D8DF5; }
.custom-upload2:hover, .custom-upload.active:hover, .custom-upload2.active:hover { background-color: var(--text-secondary-color1); }

.custom-upload.active, .custom-upload2.active { background-color: #BBB; }


.custom-upload-text { font-size: var(--text-size-small2); font-weight: bold; }
.custom-upload-text2 { font-size: var(--text-size-lil); }

.custom-upload-st1 { width: 100%; height: 150px; float: left; display: flex; align-items: center; } 
.custom-upload-st2,.custom-upload2-st2 { 
	width: 80%; height: 150px; float: left; padding: 15px 10% 0 10%; position: absolute; display: flex; align-items: center;
	font-size: var(--text-size-small); line-height: calc(var(--text-size-small) + 5px); text-align: center;
	background-color: rgb(0, 0, 0, 0.1);
	padding-top: 50px; transition: 0.2s;
}
.custom-upload2-st2 { height: 100px; padding-top: 0; font-size: var(--text-size-big); }

/*#file-upload-image-title,#file-upload-title { font-size: var(--text-size-small); font-weight: bold;  }*/
.custom-upload-st2 > div .custom-upload-text { display: none; }
.custom-upload-st2:hover > div .custom-upload-text { display: inline-block; }
.custom-upload-st2 > div .custom-upload-text2 { display: none; }
.custom-upload-st2:hover > div .custom-upload-text2 { display: inline-block; }

.custom-upload-st2:hover { background-color: rgb(0, 0, 0, 0.6); padding-top: 0; transition: 0.2s; }
.custom-upload-st3 { width: 12%; float: left; padding-top: 25px; } 

.selected-file-label {
	width: 80%; border: 1px solid #ccc;
}



/* Tooltip container */
a.tooltip2 { text-decoration:none; line-height: inherit; }
.tooltip2 {
	position: relative;
	/* display: inline-block; */
  }

/* Tooltip text */
.tooltip2 .tooltip2text {
	visibility: hidden;
	width: 150px;
	background-color: var(--text-primary-color1);
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	font-size: var(--text-size-lil);
	font-weight: 600;

	/* Position the tooltip2 text - see examples below! */
	position: absolute;
	z-index: 1;
}
.tooltip2 .tooltip2text.right {
	top: 5px; left: 100%;
}
.tooltip2 .tooltip2text.left {
	top: 10px; right: 100%;
}
.tooltip2 .tooltip2text.top  {
	bottom: 102%;
	left: calc(50% - 75px);
	
}
.tooltip2 .tooltip2text.bottom  {
	top: 102%;
	left: calc(50% - 75px);
}

/* Show the tooltip2 text when you mouse over the tooltip2 container */
.tooltip2:hover .tooltip2text {
	visibility: visible;
}


/* Responsive design */
/* phones portrait */
@media screen and (max-width: 600px) {

	:root {
		--text-size-extralarge: 35px;
		--text-size-big: 17px;
		--text-size-medium: 15px;
		--text-size-medium2: 14px;
		--text-size-small: 13px;
		--text-size-small2: 12px;
		--text-size-lil: 11px;
	}
	
	h1 { font-size: 30px; line-height: 36px; margin: 10px 0 10px 0; } 
	h2 { font-size: 26px; line-height: 30px; margin: 10px 0 10px 0; } 
	h3 { font-size: 22px; line-height: 26px; margin: 10px 0 10px 0; } 
	h4 { font-size: 19px; line-height: 23px; margin: 10px 0 10px 0; } 
	h5 { font-size: 18px; line-height: 21px; margin: 10px 0 10px 0; } 
	h6 { font-size: 16px; line-height: 21px; margin: 10px 0 10px 0; } 

	
	.text-align-left-tab { text-align: center; }
	.text-align-right-tab { text-align: center; }
	.text-align-left-mobile { text-align: center; }
	.text-align-right-mobile { text-align: center; }

}


/* tablets portrait, phones landscape */
@media screen and (min-width: 768px) {

	:root {
		--text-size-extralarge: 35px;
		--text-size-big: 17px;
		--text-size-medium: 15px;
		--text-size-medium2: 14px;
		--text-size-small: 13px;
		--text-size-small2: 12px;
		--text-size-lil: 11px;
	}

	h1 { font-size: 32px; line-height: 36px; margin: 10px 0 10px 0; } 
	h2 { font-size: 26px; line-height: 30px; margin: 10px 0 10px 0; } 
	h3 { font-size: 22px; line-height: 26px; margin: 10px 0 10px 0; } 
	h4 { font-size: 19px; line-height: 23px; margin: 10px 0 10px 0; } 
	h5 { font-size: 17px; line-height: 20px; margin: 10px 0 10px 0; } 
	h6 { font-size: 16px; line-height: 21px; margin: 10px 0 10px 0; } 
	
	/*
	h1 { font-size: 40px; line-height: 44px; margin: 10px 0 10px 0; } 
	h2 { font-size: 32px; line-height: 38px; margin: 10px 0 10px 0; } 
	h3 { font-size: 26px; line-height: 35px; margin: 10px 0 10px 0; } 
	h4 { font-size: 22px; line-height: 26px; margin: 10px 0 10px 0; } 
	h5 { font-size: 18px; line-height: 24px; margin: 10px 0 10px 0; } 
	h6 { font-size: 16px; line-height: 21px; margin: 10px 0 10px 0; } 
	*/


	.text-align-left-tab { text-align: center; }
	.text-align-right-tab { text-align: center; }
	.text-align-left-mobile { text-align: left; }
	.text-align-right-mobile { text-align: right; }
	
}


/* tablets landscape */
@media screen and (min-width: 992px) {

}


/**/
@media screen and (min-width: 1200px) {

	.text-align-left-tab { text-align: left; }
	.text-align-right-tab { text-align: right; }
	.text-align-left-mobile { text-align: left; }
	.text-align-right-mobile { text-align: right; }

}


/**/
@media screen and (min-width: 1500px) {


}


/**/
@media screen and (min-width: 1600px) {

	:root {
		--text-size-extralarge: 50px;
		--text-size-big: 18px;
		--text-size-medium: 16px;
		--text-size-medium2: 15px;
		--text-size-small: 14px;
		--text-size-small2: 13px;
		--text-size-lil: 12px;
	}

	h1 { font-size: 42px; line-height: 52px; margin: 10px 0 10px 0; } 
	h2 { font-size: 34px; line-height: 40px; margin: 10px 0 10px 0; } 
	h3 { font-size: 28px; line-height: 34px; margin: 10px 0 10px 0; } 
	h4 { font-size: 23px; line-height: 28px; margin: 10px 0 10px 0; } 
	h5 { font-size: 20px; line-height: 26px; margin: 10px 0 10px 0; } 
	h6 { font-size: 17px; line-height: 22px; margin: 10px 0 10px 0; } 

}


/**/
@media screen and (min-width: 1800px) {
	

}


/**/
@media screen and (min-width: 2000px) {

}