/****************************** Basic ******************************/
@media all and (min-width: 37em) {
	body{
		font-size: .8em;
	}
	#banner h1 {
		width:75%;
	}
}

@media all and (min-width: 50em) {
	body{
		font-size: .9em;
	}
}

@media all and (min-width: 75em) {
	body{
		font-size: 1em;
	}
}

header,
nav,
aside,
footer
{
  display:block;
}

main2,
main,
section
{
	display:inline;
}

body {
	margin: 0;
	font-family: "Arial Narrow - Regular", "Arial Narrow - Bold", sans-serif;
	font-size: .12em;
	line-height: 1.5;
}

.logo-wrap{
	display:flex;
	justify-content: space-between;
	margin: 20px 25px 40px 25px;
	box-sizing: border-box;
}

.logo-wrap img{
		max-height: 120px !important;
	}

h1 {
	font-size: 34px !important;
}

.emphas1{
	font-size: 125%;
	font-weight:bold;
}

ul{
	list-style-type:disc;
}

li{
	margin:10px 0;
}

li.float_l{
	float:left;
	margin-right:120px;
}

.ashr{
	height:10px;
	border:0;
	background:url(img/bg.gif) repeat left top;
}

strong{
	font-weight:bold;
}

#wrapper {
	padding-top:2px;
    padding-left:2%;
    padding-right:2%;
    padding-bottom:2%;
	margin:auto;
}

#chpass{
    font-size: 75% !important;
}

#passphrase{
    width: 60% !important;
}

#rep_pass, #rep_quest{
    width: 60% !important;
}
	
#banner {
	background-color: #FFFFFF;
	padding: 1% 1% 0px 1%; /* padding-bottom in px to ensure that the background-image does not mix with the text */
	border:1px solid black;
}

#banner h1 {
	width:100%;
	text-align:center;
	margin:auto;
	margin-bottom:1%;
}

#banner h1 span {
	display:inline;
	line-height: 1.2;
}

span.fr {
	color:#668d8c;
}

span.de {
	color:#668d8c;
}

span.en {
	color:#668d8c;
}

.content {
	padding: 1%;
	background-color:#fff;
	border: 1px solid #bbb;
}

.content2 {
	padding: 3%;
	background-color:#fff;
	border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    width: 40%;
    float: left;

}

.content3 {
	padding: 3%;
	background-color:#fff;
	border-top: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    width: 60%;
    float: left;
}

.col_1{
	float:left;
	width:49%;
	margin-top:3%;
	margin-right:1%;
}

.col_2{
	float:right;
	width:49%;
	margin-top:3%;
	margin-left:1%;
}

.col_3{
	float:right;
	width:49%;
	margin-top:2.4%;
	margin-left:1%;
	
}

.col_4{
	float:right;
	width:49%;
	margin-bottom:2%;
	margin-top:10%;
	margin-right:1%;
}

#footer {
	padding: .2% 1%;
	margin-top:1%;
	background-color: #FFF;
	text-align:center;
}

img{
	border:0 !important;
}


.clear_all{
	clear:both;
}

fieldset{
	/*padding:1%;*/
	border:0;
}

label, input{
	padding:0.5% 1%;
	margin:1%;
}

label{
	border-sizing: border-box;
	float:left;
	width:28%;
	/*text-align:right;*/
	text-transform:uppercase;
	clear: left;
}

input#login, input#password, input#passwd{
	float:left;
	width:60%;
	outline:none; 
	border:1px solid #bbb;
}

input.submitOnly{
	float:none;
	width:auto;
	font-size:120%;
	color:#70a8d6;
	background:#dde5ea;
	border:1px solid #70a8d6;
	cursor:pointer;	
}

input.submit{
	float:left;
	margin-left:33%;
	width:auto;
	padding:0.5% 1%;
	font-size:120%;
	color:#ffffff;
	background:#668d8c;
	border:1px solid #415A59;
	cursor:pointer;
	clear:both;
}

button.submit{
	float:left;
	margin-left:33%;
	width:auto;
	padding:0.5% 1%;
	font-size:120%;
	color:#ffffff;
	background:#668d8c;
	border:1px solid #415A59;
	cursor:pointer;
	clear:both;
}

input.submit_consent{
	float:left;
	width:auto;
	padding:0.5% 1%;
	font-size:120%;
	color:#ffffff;
	background:#668d8c;
	border:1px solid #415A59;
	cursor:pointer;
	clear:both;
}



div.error{
	clear:both;
	margin-top:1%;
	width:98%;
	text-align:center;
	border:1px solid red;
	background-color:white;
	color:red;
	padding:1%;
}

.aligncenter{
	text-align:center;
}




a.link, a.hover, a.active, a.focus, a.visited{
	text-decoration:underline;

}

.flex-container {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;            
    padding: 20px 0;
}

.flex-container.justify-space-between {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}


.flex-item{
	box-sizing: border-box;
	border: 1px solid #bbb;
	margin: 10px 1%;
	padding: 10px;
    -webkit-flex: 1 1 48%;
    -ms-flex: 1 1 48%;
        flex: 1 1 48%;

}

.item-border{
    box-sizing: border-box;
	border: 1px solid #bbb;
	margin: 10px 1%;
	padding: 10px;
    width: 100%;
}

.flex-item-basic{
	box-sizing: border-box;
	margin: 0 1%;
}

ul.phone-number > li {
	list-style: none;
}

a.avoid-underline{
	text-decoration: none;
}

a.avoid-underline:hover{
	text-decoration: underline;
}


.x-hidden{
    width: 90% !important;
    left: 5% !important;
    top: 15% !important;
}

.x-shadow{
    width: 90% !important;
    left: 5% !important;
    top: 15% !important;
}

.x-window-body{
    width: auto !important;
    height: auto !important;
}

/****************************** Media queries ******************************/

@media all and (max-width: 37em) {
	body{
		font-size: .8em;
	}
	#banner h1 {
		width:75%;
	}
    .container{
        width: 100% !important;
    }
	
	.logooo{
		max-width:80% !important;
	}

	.logooo_minis{
		max-width:100% !important;
	}

	.img-thumbnail {
		border: 0 !important;
	}

}


@media all and (min-width: 37em) {
	body{
		font-size: .8em;
	}
	#banner h1 {
		width:75%;
	}
    .container{
        width: 100% !important;
    }
	
	.logooo{
		max-width:40% !important;
	}

	.logooo_minis{
		max-width:70% !important;
	}

	.img-thumbnail {
		border: 0 !important;
	}

}

@media all and (min-width: 50em) {
	body{
		font-size: .9em;
        width: 100% !important;
	}
    .container{
        width: 100% !important;
    }
	
	.logooo{
		max-width:40% !important;
	}

	.logooo_minis{
		max-width:70% !important;
	}

	.img-thumbnail {
		border: 0 !important;
	}

}

@media all and (min-width: 75em) {
	body{
		font-size: 1em;
        width: 100% !important;
	}
    .container{
        width: 100% !important;
    }
	
	.logooo{
		max-width:40% !important;
	}

	.logooo_minis{
		max-width:70% !important;
	}

	.img-thumbnail {
		border: 0 !important;
	}

}

.toto{
		max-width:85% !important;
}

.liser{
	max-width: 70% !important;
}

.logo_partnaire{
	max-width:350px;
    padding-left: 1%;
	margin:1% 2% 1% 0;
}
.logo_partnaire2{
	max-width:300px;
    padding-left: 1%;
	margin:1% 2% 1% 0;
}

.logo_partnaire_uni{
	max-width:130px;
    padding-left: 1%;
	margin:1% 2% 1% 0;
}