@charset "utf-8";
/* CSS Document */


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


@font-face {
	font-family: 'Oxygen';
	src: url('webfonts/Oxygen/Oxygen.woff') format('woff');
	font-weight: normal; font-style: normal;
}

@font-face {
	font-family: 'Oxygen-Bold';
	src: url('webfonts/Oxygen-Bold/Oxygen-Bold.woff') format('woff');
	font-weight: normal; font-style: normal;
}

/*
@font-face {
	font-family: 'KoHo';
	src: url('webfonts/KoHo/KoHo-Regular.woff') format('woff');
	font-weight: normal; font-style: normal;
}

@font-face {
	font-family: 'KoHo-Bold';
	src: url('webfonts/KoHo/KoHo-Bold.woff') format('woff');
	font-weight: normal; font-style: normal;
}
*/



/* ---------------------------------------------------------*/


body,td,th {
	font-family: "Oxygen", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


a         { font-family:  "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #22579c; }
a:link    { text-decoration: none; }
a:visited { text-decoration: none; color: #22579c; }
a:hover   { text-decoration: underline; color: #3D8DF5; }
a:active  { text-decoration: none; color: #22579c; }


/* ---------------------------------------------------------- */
/* 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; }


.title { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 45px; line-height: 55px; color: #111; margin: 10px 0; }
.title2{ font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 22px; line-height: 25px; color: #111; margin: 10px 0; }

.title-page { width: 94%; padding: 20px 3% 5px 3%; float: left; ;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 25px; line-height: 40px;  
	color: #22579c; /*border-bottom: solid 1px #3D8DF5;*/ }
.title-section { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 25px; line-height: 35px; color: #696C86; margin: 15px 0 20px 0; }

.text  { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 17px; line-height: 26px; color: #111; margin: 10px 0; }
.text2 { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 26px; color: #111; margin: 10px 0; }
.text3 { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 26px; color: #111; margin: 10px 0; }
.text4 { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #666; margin: 10px 0; }
.text5 { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #666; margin: 5px 0; }

.text-bold { font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; }
.text-normal { font-family: "Oxygen", Arial, Helvetica, sans-serif; }

p { margin: 5px 0; }



/*Connexion*/
.card-connexion-page1 { 
	width: 40%; height: 90vh; padding: 5vh 5%; float: left; 
	background-color: #000; background: url('img/background_connexion.jpg'); background-size: cover; background-position: right top;
}
.card-connexion-page2 { 
	width: 36%; height: 90vh; padding: 5vh 7%; float: left; position: relative;
	display: flex; align-items: center; 
}


.card-connexion-set { width: 1000px; height: auto; margin: 12% auto 80px auto; }
.card-connexion-set-st1 { width: 280px; height: auto; margin-right: 20px; float: left; }
.card-connexion-set-st1_ { width: 280px; height: auto; margin-left: 20px; float: left; }
.card-connexion-set-st1_50 { width: 100%; float: left; margin: 0 0 0 0; }

.card-connexion {
	width: 700px; height: auto; float: left; padding: 20px 0 10px 0;
	background-color: #FFF; box-shadow: 0px 1px 35px rgba(0, 0, 0, 0.2); border-radius: 10px;
}
.card-connexion-cover { 
	width: 100%; height: 110px; padding-top: 15px; margin-bottom: 15px; display: flex; align-items: center; 
	background: linear-gradient(90deg, #01A1BD 0%, #215383 100%);
	border-radius: 10px 10px 0 0; text-align: center; text-transform: uppercase;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 28px; line-height: 36px; color: #FFF;
}



.card-connexion3-set { width: 700px; height: auto; margin: 7% auto 80px auto; }
.card-connexion3 {
	width: 100%; height: auto; float: left; padding: 20px 0 10px 0;
	background-color: #FFF; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); border-radius: 10px;
}
.card-connexion3-cover { 
	width: 100%; height: 110px; padding-top: 15px; margin-bottom: 15px; display: flex; align-items: center; 
	background: linear-gradient(90deg, #01A1BD 0%, #215383 100%);
	border-radius: 10px 10px 0 0; text-align: center; text-transform: uppercase;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 28px; line-height: 36px; color: #FFF;
}

/**/




.form2-label {
	width: 88%; padding: 10px 6% 0 6%; margin: 12px 0 0 0; float: left;
	border: 1px solid #C5C5C5; border-radius: 10px; transition: 0.15s; 
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 30px; color: #2c72b3; font-weight: normal;
}
.form2-label:hover { 
	margin-left: -1%; padding-left: 7%; padding-right: 6%; 
	background-color: #FFF; border: 1px solid #d7e1eb; /*#f3f7fc a9bcce*/ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.18); transition: 0.15s; 
}

.form2-label-field { width: 100%; float: left; margin: 0 0 10px 0; }

.form2-field {
	width: 100%; float: left; padding: 5px 0 5px 0; margin: -5px 0 0 0;
	background-color: transparent;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 25px; color: #282c5f; border:none; outline: none;
}

.form2-text-title { 
	width: 90%; padding: 25px 5%; margin: 0px 0 20px 0;
	background-color: #eff4f8 ;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 30px; line-height: 35px; color: #282c5f;  
}
.form2-text-subtitle  { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 26px; color: #2c72b3; }


.button-form {
	width: 400px; padding: 10px 0 15px 0; border: none; background-color: #3D8DF5;  border-radius: 15px;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 15px; 
}
.button-form:hover { background-color: #6494c0; color: #FFF; cursor: pointer; }




.form3-label {
	width: 100%; padding: 10px 0 0 0; margin-bottom: 10px; float: left; transition: 0.1s;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #444; font-weight: normal;
}
.form3-label-field { width: 100%; float: left; margin: 0 0 0 0; }

.form3-field {
	width: 90%; padding: 12px 5%; 
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; color: #111;  
	background-color: #FFF; border: solid 2px #CCC; border-radius: 10px; outline: none; transition: 0.2s; 
}
.form3-field:hover { 
	background-color: #FFF; border: solid 2px #3D8DF5; transition: 0.1s; 
}

.form3-field:focus , .form3-label-field.active .form3-field, .form3-label-field.active .select-custom-third  { 
	background-color: #FFF; border: solid 2px rgb(61, 141, 245, 0.6); box-shadow: 1px 1px 20px rgb(61, 141, 245, 0.4); transition: 0.1s;
}


.form3-field_,.form3-field__ {
	width: 90%; padding: 14px 5%; 
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 25px; color: #111;  
	background-color: #FFF; border: solid 2px rgb(61, 141, 245, 0.5); border-radius: 10px; outline: none; transition: 0.2s; 
	box-shadow: 1px 1px 20px rgb(61, 141, 245, 0.3);
}
.form3-field_:hover { 
	padding: 14px 5%; 
	background-color: #FFF; border: solid 2px #3D8DF5; 
	box-shadow: 1px 1px 30px rgb(61, 141, 245, 0.5); transition: 0.1s; 
}
.form3-field__ { background-color: #FFF; border: solid 2px #CCC; box-shadow: none; }

.form3-field.readonly { background-color: #EEE; }

.form3-row { width: 100%; }
.form3-row:hover > .form3-label { color: #3D8DF5; transition: 0.1s; }

.form3-text-title { 
	width: 90%; padding: 15px 5% 5px 5%; margin: 0px 0 10px 0;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 28px; color: #3D8DF5;  
}
.form3-text-subtitle  { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; color: #2c72b3; }



.button-form2 {
	width: 400px; padding: 10px 0 10px 0; border: none; 
	background-color: #FFF; border: solid 2px #3D8DF5; border-radius: 15px; transition: 0.2s;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; color: #3D8DF5; font-size: 14px; 
}
.button-form2:hover { background-color: rgb(61, 141, 245, 0.07); color: #3D8DF5;  }
.button-form3 {
	width: 400px; padding: 13px 0 13px 0; border: none; 
	background: linear-gradient(180deg, #01A1BD 0%, #3D8DF5 100%); border-radius: 15px; transition: 0.2s;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 14px; 
}
.button-form3:hover { 
	background: linear-gradient(180deg, #00c271 0%, #00c271 100%); cursor: pointer; transition: 0.2s;
}

.button-form4 {
	width: 350px; padding: 15px 0 15px 0; border: none; 
	background: #3D8DF5; border-radius: 15px; transition: 0.2s;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 15px; 
}
.button-form4:hover { 
	background: #ff7f00; cursor: pointer; transition: 0.2s;
}

.button-form-filter {
	width: 400px; padding: 10px 0 10px 0; margin-top: 5px; border: none; background-color: #EEE;  border-radius: 15px;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; color: #666; font-size: 13px; line-height: 20px;
}
.button-form-filter:hover { background-color: #3D8DF5; color: #FFF; cursor: pointer; }







/*Selected*/
.select-custom-third,.select-custom-third2 { 
	width: 81%; position: relative; float: left; margin-top: -18px; padding: 9px 4% 2px 4%; 
	background-color: #FFF; border: solid 2px #CCC; border-radius: 10px; outline: none; transition: 0.1s; 
}
.select-custom-third:hover,.select-custom-third2:hover {  
	/*padding: 8px 4% 1px 4%;*/
	border: solid 2px rgb(61, 141, 245, 0.6); box-shadow: 1px 1px 20px rgb(61, 141, 245, 0.4); transition: 0.1s; 
}


.select-custom {
	width: 101%; margin: 0 0 0 0; position: relative; float: left; 
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
	display: none;
}

.select-custom:after, .select-custom-third:after, .select-custom-third2:after {
	content: '<>';
	font: 17px "Consolas", monospace; 
	color: #2C72B3;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 11px;

	/*Adjust for position however you want*/
	top: 16px;
	padding: 0 0 2px 0;
	/*border-bottom: 1px solid #999;*/

	/*left line */
	position: absolute;
	pointer-events: none;
}

.select-custom select, .select-custom-third select , .select-custom-third2 select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	/* Add some styling */
	display: block; width: 98%; float: right; padding: 5px 0 13px 0;
	background-color: transparent; background-image: none; border: none;-ms-word-break: normal; word-break: normal; border-radius: 3px; outline: none;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 14px; color: #282c5f;
}

.select-custom select, .select-custom-third select {
	width: 98%; float: right; padding: 10px 0 24px 2%;
	font-size: 14px; color: #111;
	/*border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/
}



/* The radiobox */
.radiobox {
	display: block;
	position: relative;
	padding: 6px 30px 4px 25px; 
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #444;
}

.radiobox:hover { color: #3D8DF5; }
  
  /* Hide the browser's default radio button */
  .radiobox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
    position: absolute;
	top: 6px;
	left: 0;
    height: 14px;
    width: 14px;
    background-color: #FFF;  border: solid 2px #3D8DF5;
    border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .radiobox:hover input ~ .checkmark {
    background-color: rgb(253, 207, 0, 0.2); border: solid 2px #fdcf00; transition: 0.2s;
  }
  
  /* When the radio button is checked, add a blue background */
  .radiobox input:checked ~ .checkmark {
    background-color: #3D8DF5; transition: 0.5s;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radiobox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radiobox .checkmark:after {
      top: 3px;
      left: 3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
  }


/***********************************************/
/* The container */
.checkedbox {
	display: block;
	position: relative;
	padding: 6px 30px 4px 25px; 
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #444; 
  }

.checkedbox:hover { color: #3D8DF5; }
  

  /* Hide the browser's default checkbox */
  .checkedbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0; 
  }
  
  /* Create a custom checkbox */
  .checkmark2 {
	position: absolute;
	top: 7px;
	left: 0;
	height: 14px;
	width: 14px;
	background-color: #FFF; border: solid 2px #3D8DF5;
	border-radius: 15%;
  }
  
  /* On mouse-over, add a grey background color */
  .checkedbox:hover input ~ .checkmark2 {
	background-color: rgb(253, 207, 0, 0.2); border: solid 2px #fdcf00; transition: 0.2s;
  }
  
  /* When the checkbox is checked, add a blue background */
  .checkedbox input:checked ~ .checkmark2 {
	background-color: #3D8DF5; /*border: solid 2px #3D8DF5;*/ /*#215383*/ transition: 0.5s;
  }
  
  /* Create the checkmark2/indicator (hidden when not checked) */
  .checkmark2:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the checkmark2 when checked */
  .checkedbox input:checked ~ .checkmark2:after {
	display: block; 
  }
  
  /* Style the checkmark2/indicator */
  .checkedbox .checkmark2:after {
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
  }


/* The switch - the box around the slider */
.switch { position: relative; display: inline-block; width: 40px; height: 25px; }
/* Hide default HTML checkbox */
.switch input { opacity: 0; width: 0; height: 0; }
/* The slider */
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(61, 141, 245, 0.3); -webkit-transition: .3s; transition: .3s; }
.slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .3s; transition: .3s; }
input:checked + .slider { background-color: #3D8DF5; }
input:focus + .slider { box-shadow: 0 0 1px #3D8DF5; }
input:checked + .slider:before { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); }
/* Rounded sliders */
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.switch-label { font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #3D8DF5; 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-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; }

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

.custom-file-upload, .custom-file-upload3 {
	width: 100%; height: 70px; padding: 0 0; margin: 12px 0 0 0; display: block; 
	background-color: #8dabc7; border-radius: 10px; box-shadow: 1px 1px 10px rgb(0, 0, 0, 0.15); 
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 14px; cursor: pointer; color: #fff; overflow: hidden;
}
.custom-file-upload:hover { background-color: #6494c0; }

.custom-file-upload3 { background-color: #3D8DF5; }
.custom-file-upload3:hover { background-color: #ff7f00; }

.custom-file-upload-text { font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 12px; }

.custom-file-upload-st1 { width: 28%; height: 70px; float: left; display: flex; align-items: center; font-size: 20px; } 
.custom-file-upload-st2 { width: 52%; float: left; padding: 15px 3% 0 5%; font-size: 14px; line-height: 20px; } 
.custom-file-upload-st3 { width: 12%; float: left; padding-top: 25px; } 

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


 /*#f3f7fc a9bcce 2c72b3*/
/**/



.formlabel,.formlabel1 {
	width: 25%; margin: 10px 0; float: left;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 30px; color: #111; font-weight: normal;
 }
.formlabel_field { width: 72%; margin-right: 3%; float: left; }

.formfield,.formfield_,.formfield1 {
	width: 94%; float: left; padding: 23px 3%; margin: 6px 0px 12px 0px;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 16px; color: #333; line-height: 20px; border: none; border-radius: 16px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.formfield_ { padding: 16px 3% }
.formfield1 { box-shadow: none; border: solid 2px #DDD; }



.form-aero-label {
	width: 100%; margin: 10px 0 0 0; float: left;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 30px; color: #444444; font-weight: normal;
}
.form-aero-label-field { width: 100%; float: left; margin: 0 0 10px 0; }
.form-aero-label-50 { width: 48%; margin-right: 2%; float: left; }
.form-aero-label-33 { width: 31.3%; margin-right: 2%; float: left; }


.form-aero-field,.form-aero-field_ {
	width: 100%; float: left; padding: 2px 0 15px 0; margin: 0 0 10px 0px;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 17px; color: #111; line-height: 20px; border:none; border-bottom: solid 2px #CCCCCC;
}
.form-aero-field_ { padding: 0 0 7px 0; }
.form-aero-field:focus,.form-aero-field_:focus { border-bottom: solid 2px #FF2742; }


/*
.filterfield,.filterfield_ {
	width: 31%; padding: 5px 0 15px 0; margin: 0 2% 14px 0;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 15px; color: #111; line-height: 16px; 
	background-color: transparent; border: none;  border-bottom: solid 2px #BBBBBB;
}
.filterfield_ { width: 31%; padding: 5px 0 10px 0; margin: 0 2% 14px 0; }
*/

.filterfield,.filterfield_,.filterfield2 {
	width: 98%; padding: 14px 0 8px 0; margin: 0 2% 8px 0;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 13px; color: #666; line-height: 16px; 
	background-color: transparent; border: none; /*border-radius: 7px;*/  border-bottom: solid 2px #CCC;
	box-shadow: none; border-radius: 0; outline: none;
}
/*.filterfield_ { width: 98%; padding: 14px 0 13px 0; margin: 0 2% 8px 0; font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; }*/
.filterfield:focus,.filterfield_:focus { color: #3D8DF5; border-bottom: solid 2px #3D8DF5; }
.filterfield2 { padding: 14px 0 4px 0; border-bottom: none; }





/*
.searchfield {
	width: 88.5%; float: left; padding: 30px 3%;
	font-family: "Oxygen-Bold", Arial, Helvetica, sans-serif; font-size: 19px; color: #333; line-height: 20px; border: none;
}


.formfieldConnexion,.formfieldConnexion_ {
	width: 92%; float: left; padding: 18px 3%; margin: 0 2% 12px 0;
	font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 16px; color: #333; line-height: 18px; border: solid 1px #CCC; border-radius: 7px;
}

.formfieldConnexion_ {
	padding: 10px 3%;
}

.formfieldSupport { width: 94%; padding: 27px 3%; margin: 7px 0 10px 0; transition: 0.2s;
font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 20px; color: #333; line-height: 28px; border: solid 2px #E4E4E4; border-radius: 25px; }
.formfieldSupport:hover { border: solid 2px #FF2742; transition: 0.25s; }
.formfieldSupport:focus { padding: 27px 5%; border: solid 2px #888; transition: 0.1s; }

.formfieldSupport1 { width: 94%; padding: 20px 3%; margin: 7px 0 10px 0; transition: 0.2s;
font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 18px; color: #333; line-height: 26px; border: solid 2px #E4E4E4; border-radius: 25px; }
.formfieldSupport1:hover { border: solid 2px #FF2742; transition: 0.25s; }
.formfieldSupport1:focus { padding: 20px 5%; border: solid 2px #888; transition: 0.1s; }


.formfieldSupportSelected { width: 100%; padding: 10px 3%; margin: 7px 0 10px 0;
font-family: "Oxygen", Arial, Helvetica, sans-serif; font-size: 20px; color: #333; line-height: 30px; border: solid 2px #E4E4E4; border-radius: 25px; }
*/


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



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

	.title { font-size: 18px; line-height: 24px; }
	.title2{ font-size: 17px; line-height: 23px; }
	.title-page { font-size: 17px; line-height: 22px; }
	.title-section { font-size: 22px; line-height: 32px; }

	.text  { font-size: 15px; line-height: 23px; }
	.text2 { font-size: 13px; line-height: 23px; }

	/*filterfield,.filterfield_ { width: 98%; }*/


	/*.form3-row { margin: 0 0 15px 0; }
	.form3-label { width: 100%; padding: 10px 0 0 0; }
	.form3-label-field { width: 100%; margin: 5px 0 0 0; }
	.form3-field { width: 90%; min-height: 30px; padding: 10px 5%; font-size: 14px; line-height: 22px; }
	.form3-field:focus { width: 90%; padding: 10px 5%; }*/
	.button-form3 { width: 100%; }

	.select-custom select, .select-custom-third select , .select-custom-third2 select {
		padding: 5px 0 15px 0; font-size: 13px; 
	}


	.card-connexion-set { width: 70%; margin: 12% auto 80px auto; }
	.card-connexion-set-st1_ { width: 100%; margin-left: 0;  }
	.card-connexion-set-st1_50 { width: 46%; float: left; margin: 20px 2% 0 2%; }
	.card-connexion { width: 100%; padding: 20px 0 10px 0; }


	.custom-file-upload, .custom-file-upload3 { font-size: 14px; }
	.custom-file-upload-text { font-size: 9px; }
	.custom-file-upload-st1 { font-size: 16px; } 
	.custom-file-upload-st2 { font-size: 12px; line-height: 16px; }  

	.card-connexion-page1 { width: 80%; height: 200px; padding: 50px 10%; }
	.card-connexion-page2 { width: 80%; height: auto; padding: 50px 10%; }

}

@media screen and (min-width: 800px){
	
	.title { font-size: 18px; line-height: 24px; }
	.title2{ font-size: 17px; line-height: 23px; }
	.title-page { font-size: 17px; line-height: 22px; }
	.title-section { font-size: 22px; line-height: 32px; }

	.text  { font-size: 14px; line-height: 22px; }
	.text2 { font-size: 13px; line-height: 23px; }

	/*.filterfield,.filterfield_ { width: 47%; }*/


	/*.form3-row { margin: 0 0 0 0; }
	.form3-label { width: 40%; padding: 10px 0 0 0; }
	.form3-label-field { width: 60%; margin: 0 0 0 0; }
	.form3-field { width: 94%; min-height: 30px; padding: 20px 3%; font-size: 14px; line-height: 23px; }
	.form3-field:focus { width: 90%; padding: 20px 5%; }*/
	.button-form3 { width: 400px; }

	.select-custom select, .select-custom-third select , .select-custom-third2 select {
		padding: 5px 0 15px 0; font-size: 13px; 
	}


	.card-connexion-set { width: 70%; margin: 12% auto 80px auto; }
	.card-connexion-set-st1_ { width: 100%; margin-left: 0;  }
	.card-connexion-set-st1_50 { width: 46%; float: left; margin: 20px 2% 0 2%; }
	.card-connexion { width: 100%; padding: 20px 0 10px 0; }


	.custom-file-upload, .custom-file-upload3 { font-size: 14px; }
	.custom-file-upload-text { font-size: 9px; }
	.custom-file-upload-st1 { font-size: 16px; } 
	.custom-file-upload-st2 { font-size: 12px; line-height: 16px; }  

	.card-connexion-page1 { width: 40%; height: 90vh; padding: 5vh 5%; }
	.card-connexion-page2 { width: 41%; height: 90vh; padding: 5vh 7% 5vh 2%; }


}

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

	.title { font-size: 18px; line-height: 24px; }
	.title2{ font-size: 17px; line-height: 23px; }
	.title-page { font-size: 18px; line-height: 22px; }
	.title-section { font-size: 23px; line-height: 33px; }

	.text  { font-size: 15px; line-height: 24px; }
	.text2 { font-size: 14px; line-height: 25px; }

	/*.filterfield,.filterfield_ { width: 31%; }*/


	/*.form3-field { width: 94%; min-height: 30px; padding: 20px 3%; font-size: 14px; line-height: 23px; }
	.form3-field:focus { width: 90%; padding: 20px 5%; }*/

	.select-custom select, .select-custom-third select , .select-custom-third2 select {
		padding: 5px 0 15px 0; font-size: 14px; 
	}


	.card-connexion-set { width: 1000px; margin: 12% auto 80px auto; }
	.card-connexion-set-st1_ { width: 280px; margin-left: 20px; }
	.card-connexion-set-st1_50 { width: 100%; float: left; margin: 0 0 0 0; }
	.card-connexion { width: 700px; padding: 20px 0 10px 0; }



}

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

	.title { font-size: 20px; line-height: 26px; }
	.title2{ font-size: 18px; line-height: 24px; }
	.title-page { font-size: 19px; line-height: 24px; }
	.title-section { font-size: 24px; line-height: 34px; }

	.text  { font-size: 16px; line-height: 25px; }
	.text2 { font-size: 14px; line-height: 25px; }


	/*.form3-field { width: 94%; min-height: 30px; padding: 20px 3%; font-size: 16px; line-height: 25px; }
	.form3-field:focus { width: 90%; padding: 20px 5%; }*/
	.select-custom select, .select-custom-third select , .select-custom-third2 select {
		padding: 5px 0 15px 0; font-size: 14px; 
	}


	.custom-file-upload, .custom-file-upload3 { font-size: 16px; }
	.custom-file-upload-text { font-size: 10px; }
	.custom-file-upload-st1 { font-size: 16px; } 
	.custom-file-upload-st2 { font-size: 13px; line-height: 18px; } 
}

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

	.title { font-size: 20px; line-height: 26px; }
	.title2{ font-size: 18px; line-height: 24px; }
	.title-page { font-size: 20px; line-height: 25px; }
	.title-section { font-size: 25px; line-height: 35px; }

}


.color2 { color: #FFF; }
.color3 { color: #444; }
.color4 { color: #4B9C32; }
.color5 { color: #009ABF; }
.color6 { color: #999; }
.color7 { color: #111; }
.color9 { color: #5f696d; }

.color1 { color: #3D8DF5; }
.color10 { color:#fdcf00; }
.color8 { color: #00c271; }
.color11 { color:#ff7f00; }
.color12 { color:#ff0000; }

.FontSize14 { font-size: 14px; line-height: 16px; }
.FontSize30 { font-size: 30px; line-height: 10px; }

/*

.color4 { color: #444; }
.color5 { color: #4B9C32; }
.color6 { color: #F2B600; }
.color7 { color: #FC10FC; }
.color8 { color: #111; }
*/