@font-face {
    font-family: 'merlo';
    src: 
    	 url('../fonts/merlo_round_bold-webfont.woff2') format('woff2'),
         url('../fonts/merlo_round_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'merlo_regul';
    src: url('../fonts/merlo_round_regular-webfont.woff2') format('woff2'),
         url('../fonts/merlo_round_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'merlo_med';
    src: url('../fonts/merlo_round_medium-webfont.woff2') format('woff2'),
         url('../fonts/merlo_round_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ----------------------------- */
/* == soft reset                 */
/* ----------------------------- */

/* switching box model for all elements */
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

a, button[type=submit], input[type=submit]
{	-webkit-transition: all 0.25s linear;
       -moz-transition: all 0.25s linear;
        -ms-transition: all 0.25s linear;
         -o-transition: all 0.25s linear;
            transition: all 0.25s linear;
}

/* soft reset */
html,
body { margin: 0; padding: 0; }
ul,
ol { padding-left: 2em; }
ul.unstyled { list-style: none; }
img { vertical-align: middle; border: 0; }


/* ----------------------------- */
/* == typography                 */
/* ----------------------------- */

/* base font-size corresponds to 10px and is adapted to rem unit */
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
}

body {

	color: #777777;
	font-family: "Ubuntu", sans-serif;
	font-weight: 340;
	font-size: 1.4em; /* equiv 14px */
	line-height: 1.5; /* adapt to your design */
}

/* font-sizing for content */
/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p,
ul,
ol { margin: .75em 0 0; line-height: 1.5; }

a {text-decoration: none;}

em { font-style: italic; }
strong { font-weight: bold; }
mark {
	padding:2px 4px;
	background: #ff0;
}





/* ----------------------------- */
/* == browsers consistency       */
/* ----------------------------- */

/* avoid top margins on first content element */
p:first-child,
ul:first-child {
	margin-top: 0;
}

/* avoid margins on nested elements */
li p,
li ul,
li ol { margin-top: 0; margin-bottom: 0; }



/* ----------------------------- */
/* ==forms                       */
/* ----------------------------- */

/* forms items */
form, fieldset { border: none; }
input,
button,
label,
.btn { vertical-align: middle; font-family: inherit; font-size: inherit; }
label { display: inline-block; vertical-align: middle; cursor: pointer; }
legend { border: 0; white-space: normal; }
textarea {background-color:#f4f4f4; width:100%;border:0;padding:5px; overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
	min-height: 5em; vertical-align: top; font-family: inherit; font-size: inherit; resize: vertical; }
    select {background-color:#f4f4f4;}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor: pointer; -webkit-appearance: button; /* clickable input types in iOS */ }
input[type="checkbox"],
input[type="radio"] { padding: 0; /* Corrects excess space around these inputs in IE8/9 */ }
input[type="search"] { -webkit-appearance: textfield; }

/* if select styling bugs on WebKit */
/* select { -webkit-appearance: none; } */

/* 'x' appears on right of search input when text is entered. This removes it */
::-webkit-input-placeholder { color: #777; font-size: .9em;}
input:-moz-placeholder,
textarea:-moz-placeholder { color: #777; font-size: .9em; }

/* Removes inner padding and border in FF3+ */
button::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner { border: 0; padding: 0; }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'] {padding: 8px 10px; border: 0; font-weight: 300; font-size:12pt;}

input {background-color:#fff;}
.select-style {position: relative; width: 100%; border-radius: 0; overflow: hidden; background-color: white;}
.select-style select {padding: 5px 10px 5px 5px; margin-bottom: 0 !important; width: 130% !important; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; color: #555;}
.select-style:after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 20px; background: url("../images/select.png") no-repeat 0% 50%;}


/* ----------------------------- */
/* ==  WEB                       */
/* ----------------------------- */
.container {position: relative; width: 1120px; margin-left: auto; margin-right: auto;}

/*Header*/

header {position: fixed; top: 0; left: 0; right: 0; z-index: 10;}

	header .top_header {background-color: #333333; height: 44px; padding: 12px 0; color: white; font-family: "merlo_regul", sans-serif;}
	header .top_header a {color: white;}
		header #nosportails_menu {display: none;}
		header .top_header .menu_top_header span {text-transform: uppercase;}
		header .top_header .menu_top_header .nosportails {margin: 0;}
		header .top_header .menu_top_header ul {display: inline-block; margin: 0; padding: 0; list-style-type: none;}
		header .top_header .menu_top_header ul li {display: inline-block; margin-left: 25px;}
		header .top_header .menu_top_header ul li .actif {color:#FF5522}
		header .top_header .menu_top_header ul li a:hover {color:#FF5522}		
	
	header .bottom_header {background: white; clear: both;}
		header .bottom_header a.logo {display: inline-block;  -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
		header .bottom_header img{max-width:100%;}
		header .bottom_header .baseline {float: right; margin: 15px 0 0 0; font-family: "Ubuntu", sans-serif; font-weight: 500; font-size: 2em; vertical-align: middle; color: #FF5522;}
		header .bottom_header .baseline span {font-weight: 300; font-size: .5em; vertical-align: middle;}


/*Champ de saisie*/
.champ{ background-color:#ffffff; border:0; padding:5px;font-size:13pt;width:90% }

/*Bouton connexion*/
.bouton {
  font-size:10pt;
  background-color:#F4F4F4;
  color:#FF5522;
	border:2px solid #FF5522;
	text-transform:uppercase;
	padding:5px 10px 5px 10px;
  height:33px;
	cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

.bouton:hover, .bouton:focus, .bouton:active {background-color:#FF5522;	color:#ffffff;}

.connexion_bloc {
    background-color: #F7F7F7;
    text-align: center;
    margin: 0.5%;
    float: left;
    padding: 25px;
    width: 70%;
}

.connexion_bloc_unique {
    background-color: #F7F7F7;
    text-align: center;
    margin: 0.5% auto;
    padding: 25px;
    width: 49%;
}

.bloctitre {
    color: #FF5522;
    font-size: 14pt;
    height: auto;
    min-height: 60px;
    margin: 0;
}

.bloctexte{font-size:10pt; min-height:190px;}
.left{text-align:left; padding-left:25px}

.lien {color:#707070}
.lien:hover {color:#FF5522}


/* ----------------------------- */
/* ==  RESPONSIVE			        	 */
/* ----------------------------- */

@media only screen and (max-width: 1120px) {
	.container {width: 980px;}
	header .top_header .menu_top_header ul li {margin-left: 10px}
}

@media only screen and (max-width: 980px) {
	.hidden_md {display: none;}
	.show_md {display: block;}
	.container {width: 768px;}		
	header .bottom_header .baseline {display: inline-block; float: right; margin: 0 0 0 20px;}
	header .btn_menu_smart {position: absolute; top: -95px; right: 0; color: black; font-size: 2em; padding: 10px; margin: 26px 0 0 0; line-height: 1;}
	header .navigation {height: auto;}
	#input_menu_toggle:checked ~ ul {display: block !important;}
	#main .texte_contain {padding-left: 10px; padding-right: 0;}
  .connexion_bloc{background-color:#F4F4F4; width:93%; margin-bottom:20px;padding:20px}
  .connexion_bloc_unique{background-color:#F4F4F4; width:93%; margin-bottom:20px;padding:20px} 
  .bloctexte{min-height:0px;}
}

@media only screen and (max-width: 768px) {
	.container {width: 100%; padding: 0 4%;}
	.menu_top_header {position: relative;}
	#nosportails_menu:checked ~ ul {display: block !important;}
	header {position: relative; top: inherit; left: inherit; right: inherit; z-index: 10;}
	header .top_header .menu_top_header ul {display: none; position: absolute; top: 30px; left: -20px; padding: 10px; width: 250px; z-index: 1000; background: #333;}
	header .top_header .menu_top_header ul li {display: block; padding: 5px 0;}
	header .btn_menu_smart {right: 3%;}
}

@media only screen and (max-width: 620px) {
	header .bottom_header a.logo {display: block;  text-align:center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
	header .bottom_header img{max-width:100%;}
	header .bottom_header .baseline {font-size: 1.5em; float: left; margin: 10px 0 20px 0;}
	header .btn_menu_smart {top: -80px;}
}

@media only screen and (max-width: 320px) {
	header .bottom_header .baseline {text-align: right;line-height: 1.2;}
	header .bottom_header .baseline span {display: block; text-align: right;}
	header .btn_menu_smart {top: -75px;}
}

.clear {clear:both}