/*********** Import des feuilles de mise en forme générales **********/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400);
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url("mep.css");
@import url("ours.css");
@import url("menu.css");

/****** BASICS *********/
html {
	width:100%; height:100%;
}
body {
	margin:0px;
	padding:0px;
	width:100%; height:100%;
	position:relative; top:0px; left:0px;
	background-color:#d9e7e7;
	font-family:'Open Sans', Helvetica, Tahoma, sans-serif;
	font-size:15px;
}
/* 698cb1 */
a {
	color:#1b3b5e;
	transition:all 0.1s;
	text-decoration:none;
}
a:hover {
	color:#223244;
}

#fantome {
	display:none; position:absolute; z-index:600;
}

.cool-btn, .cool-btn-wide {
	display:inline-block;
	padding:8px 20px;
	background-color:#107bb4; color:white;
	font-size:18px; transition:all 0.2s;
}

.cool-btn-wide {
	display:block; text-align:center; margin-top:10px;
}
.cool-btn:hover, .cool-btn-wide:hover {
	background-color:black;
	color:white;
}

.ctn {
	width:1100px; margin:0px auto;
}


/***** SQUELETTE ******/
#header {
	position:fixed; top:0px; left:0px; right:0px; margin:0px; padding:15px;
	z-index:9002;
	background-color:black;
	color:white; text-align:center; font-size:25px; text-transform:uppercase;
}



#content {
	position:relative; top:0px; left:0px;
	margin:30px auto;
	width:1100px;
}

#footer {
	position:fixed; bottom:0px; left:0px; right:0px; margin:0px; padding:15px;
	z-index:9001;
	background-color:black;
	color:white; text-align:center; font-size:12px;
}

.msg {
	margin:10px; padding:10px;
	border:1px dashed #990000;
	color:#990000;
}

.bloc-blanc {
	width:100%;
	margin-bottom:30px;
	background-color:white;
}


/****** IDENTIFICATION ******/
.pagelog-field, .pagelog-submit {
	padding:8px; font-size:15px; border-radius:5px;
	color:#1b3b5e; border:1px solid #1b3b5e;
}
.pagelog-submit {
	background-color:#1b3b5e; color:white; cursor:pointer;
	transition:all 0.2s;
}
.pagelog-submit:hover {
	background-color:#e87301;
}


/******* RESPONSIVE ******/
@media all AND (max-width:1099px) {
	#content, .ctn {
		width:95%;
	}
	.header-wrap {
		width:95%;
	}
	#footer {
		width:100%;
	}
	.bloc-blanc {
		width:95%;
	}
}
@media all AND (orientation:portrait), screen AND (max-width:800px), print {
	#content, .header-wrap, .ctn{
		width:95%;
	}
	#entete, .entete-titre1, .entete-titre2 {
		text-align:center;
	}
	#footer {
		width:100%;
	}
	.footer-cv, .footer-realisations, .footer-contact {
		display:inline-block; padding:0px; background-image:none; width:auto;
	}
	.skills {
		width:calc(100% - 80px);
		margin-right:0px;
	}
	.titre-experience, .titre-formation, .titre-competences, .titre-loisirs, .titre-contact {
		background-position:top center;
		padding:80px 10px 10px 10px;
		text-align:center;
		margin-bottom:15px;
	}
	.real-liste {
		width:100%; margin:15px 0px;
	}
	.t-l {
		width:25%;
	}
	.tab-contact-field, .tab-contact-text {
		width:100%;
	}
	.tr-index-left, .tr-index-center, .tr-index-right {
		text-align:center;
	}
	.img-article, .img-article-big {
		max-height:300px; max-width:100%;
	}
	.img-article-big {
		max-height:600px;
	}
}
@media print {
	#header, #footer {
		display:none;
	}
}