@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400|Source+Sans+Pro:300,400');
/* for these fonts:
	font-family: 'Open Sans', sans-serif;
	font-family: 'Source Sans Pro', sans-serif;
*/
body {
	font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; line-height: 24px;
	color: #555; margin: 0; padding: 0;
}
#wrapper { position: relative; max-width: 960px; margin: 0 auto; }
#lang {position: absolute; width: 20px; top: 5px; right: 20px; z-index: 10;}

/* --- entête --- */
header { height: 80px; position: relative; padding: 1em; }
#logo {
	position: absolute; top: 10px; left: 10px;
	width: 340px; height: 54px;
	background: url(../images/nomNatachaKio.png) no-repeat 0 0; background-size: 80%;
}
#logo a span {display: none;}
#logo img {position: absolute; width:80px; top:20px; right: -20px;}
#souslogo {
	font-weight: 400; font-size: 1.3em; color: rgba(194, 194, 194, 0.9);
	position:absolute; width: 200px; top: 30px; right: 50px;
	}
header nav {
	position: absolute; right: 5%; top: 40px;
	font-size: 1.3em;
	z-index: 1;
	}
header nav a.mobilemenu {
	position: absolute; bottom: 15px; right: 10px;
	width: 32px; height: 32px;
	background: url(../images/icon_menu.svg) no-repeat 0 0;
	background-size: contain;
	display: none;
}
header nav li {display: inline-block; padding: 0 10px;}
nav li {list-style: none;}
nav a { text-decoration: none; color: #555;}
nav a:hover {border-bottom: 1px solid #555; }
.mediaNavphot {display: none;}
#navphot nav a:hover {border-bottom: none;}
nav a:visited {color: #555; }
.encours {font-weight: 400; }
.encours:hover {border-bottom: none;}
/* --- footer --- */
footer {
	clear: both; width: 60%; margin: 0 auto; padding: 10px 50px; position: relative;
	border-top: solid 1px rgba(210, 210, 210, 0.9);
	font-size: 0.8em; font-weight: 400; color: rgb(180, 180, 180); text-align: center; line-height: 1.2em;
	}
footer a {color: rgb(180, 180, 180);}
#contact {color: rgb(140, 140, 140);}
form {
	position: absolute; top: -260px; left: 100px; width:210px; height: 230px;
	padding: 10px; border: solid 1px #c4c4c4;
	background-color: #f0f0f0;
	font-family: 'Open Sans', sans-serif; font-weight: 400; color: #555;  line-height: 24px;
	text-align: left;
	z-index: 2; display: none;
	}
label {margin-left: 2px;}
input, textarea {display:block; width: 200px; margin-top: -4px; font-family: 'Open Sans', sans-serif; font-weight: 400; color: #555; text-align: left; border: solid 1px #c4c4c4;}
textarea {height: 80px; font-size: 11px;}
#submit {
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	width: 60px; margin-top: 20px; margin-left: 145px;
	text-align: center;
}
#antispm {position:absolute; bottom:8px; left:12px;font-size: 0.8em;line-height: 1.8em}
input#ctrl {display: inline-block; width: 15px;}
#submit:hover {cursor: pointer;}
#fermerform {position: absolute; top: -2px; right: -2px;}
#fermerform:hover {cursor: pointer; background-color: rgba(224, 224, 224, 0.5);}

/* sections principales */
h1 {position: absolute; left: -9999px;}
h2 {
	font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center;
	margin-top: 0;
}

/* page d'accueil */
div.horizcontain {padding: 3% 5%; position: relative;}
#profil {float: left; width: 25%;}
#eaulum {float: right; width: 65%;}
#portrait {float: left; width: 22%; margin-bottom: 50px; margin-left: 20px}
#univers {float: right; width: 62%;  margin-right: 15px;}
#eaulum img, #portrait img {
	width: 100%;
	-moz-box-shadow:7px 7px 12px rgba(104, 104, 104, 0.6);
	-webkit-box-shadow:7px 7px 12px rgba(104, 104, 104, 0.6);
	box-shadow:7px 7px 15px rgba(104, 104, 104, 0.6);
}
#portrait img {
-moz-border-radius:7px 7px 7px 7px;
-webkit-border-radius:7px 7px 7px 7px;
border-radius:7px 7px 7px 7px;
}

/* pages photographies */
#main {position: relative; margin-top: 20px;}
#navphot { position: absolute; top: 50px; width: 180px; font-size: 1.1em; line-height: 3em; }
.navsec {display: none;}

#slider {position: absolute; width: 65%; right: 50px; top: 50px;}


/**Media Queries**/

@media screen and (max-width: 840px) {
	header { height: 90px;}	
	header nav {width: 100%; text-align: center; top:auto; bottom: 0; font-size: 1.2em;}
	#logo {width: 272px; height: 43px;}
	#logo img {width:60px; top:10px;}
	#souslogo {font-size: 1.1em; top: 15px; right:30px; width: 175px;}
	/* pour page d'accueil:*/
	#eaulum {width: 50%;}
	#profil {width: 40%;}
	.navsec {display: none;}
}

/* breakpoint spécifique pour pages de photographies : */
@media screen and (max-width: 690px) {
	h2 { padding-top: 30px;}
	#navphot { top: -20px;  width: 100%; text-align: center; font-size: 1em; line-height: 1em;}
	#navphot ul { margin: 0; padding-left: 0;}
	#navphot li {display: inline-block;  padding: 0 7px; height: 30px;}
	.mediaNavphot {display: inline; visibility: hidden;}
	#slider {width: 70%; position: relative; margin: 0 auto; right: auto; top:25px;}
	#main {margin-bottom: 60px;}
	.navsec {display: none;}
}

@media screen and (max-width: 480px) {
	header {height: 50px; }
	#logo {width: 218px; height: 35px;}
	#logo img {width:45px; right:-15px;}
	#souslogo {font-size: 1em; top:10px; right: 0;}
	#lang {right: 35px;}
	h2 { padding-top: 10px;}
	header nav a.mobilemenu {display: block;}
	header nav a.mobilemenu:visited {color: #adadad; }
	header nav a:hover {border-bottom:none; }
	header nav ul { display: none; position: absolute; top:-36px;	right: 0; height:auto;}
	header nav li {
		display: block; padding: 0; border: 1px solid rgba(255,255,255,0.2);
		text-align: left; background-color: #adadad;
		}
	header nav li a {
		color: #ffffff; font-size: 0.9em;
		display: inline-block; width: 117px; padding: 5px 10px;
		}
	header nav li a:visited {color: #ffffff;}
	header nav li a:hover {background-color: rgba(255, 255, 255, 0.2);}
	footer {width:90%; padding: 5px 0;}
	header nav li a.encours {color: #936f6f;}
	header nav li a.encours:hover {background-color: #adadad;}
	/* pour page d'accueil:*/
	#profil, #eaulum, #portrait, #univers {float: none;width: auto; margin-top: auto; position: relative;}
	#portrait img { width: 60%; margin-left: 35%; margin-top: 10px;}
	
	#navphot {display:none;}
	.navsec {display: block; padding: 0; background-color: #bbbbbb;}
	header nav li.navsec a {
		color: #ffffff; font-size: 0.7em;
		display: inline-block; width: 107px; padding: 3px 5px 3px 25px;;
		}
	header nav li.navsec a.encours {color: #936f6f;}
	header nav li.navsec a.encours:hover { background-color: #bbbbbb;}
	#slider {position: relative; width: 90%;}
}