/* Portrait */
@media only screen
and (min-width : 320px)
and (max-width : 480px) 
{
	/*--------HEADER---------*/

	.page > header{
		display:  block;
		background-color: #ffffff;
		padding: 0;
		margin: 0em;
		height: 5.4em;
	}
	.page .banner{
		display: inline-block;
		height: 20em;
		width: 100%;
		background-size: 110%;
		padding: 0;
		margin: 0;
	}

	.page > h1 {
		width: 95%;
		font-size: 2.0em;
		position: relative;
		top: 0;
		padding: .4em 0 .5em .5em;
		margin: 0 0 1em 0;
	}

	.page > header nav {
		width: 90%;
		padding: 0 0 0 5%;
		margin:0;
	}
	.page nav .logo {
		height: 5.3em;
		width: 95%;
		background-size: 100%;
		float: left;
		padding: 0 0 0 0;
		margin: 0 !important;
	}

	.page > header nav ul {
		width: 100%;
		padding: 1.1em 0 0 0;
		margin: 0;
	}
	.page > header nav li a{
		width: 90%;
		float: left;
		font-size: 0.85em;
		padding: 1.75em 1em 0.65em 0;
	}

	.page > main {
		width: 100%;
	}
	article .infog{
		float: none;
		width: 80%;
		text-align: center;
		margin: 2em;
		padding: 0;
	}
	article .personne {
		width: 160px;
		float: none;
		margin: 0 20%;
		text-align: center;
	}
	article .temoignage .citation {
		font-size: 1.2em;
		font-style: italic;
		padding: 1em;
	}
	aside {
		float: none;
		margin-bottom: 10px;
		width: 94%;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		-o-box-shadow: none;
	}
}


/* Portrait */
@media only screen
and (min-width : 360px)
and (max-width : 640px) {

	.page > header nav {
		width: 95%;
		height: 6.0em;
		padding: 1% 0 0 5%;
		margin:0;
	}
	.page nav .logo {
		width: 85%;
		margin: 0 !important;
		padding: 0 !important;
	}
	.page > header nav ul {
		width: 100%;
		padding: 1.7em 0 0 0;
		margin: 0;
	}
	.page > header nav li a{
		width: 90%;
		float: left;
		font-size: 0.85em;
		padding: 1.75em 1em 0.65em 0;
	}
	aside {
		float: none;
		margin-bottom: 10px;
		width: 94%;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		-o-box-shadow: none;
	}
}

@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait){
	
	.page .banner{
		margin: 0 0 5.5em 0;
	}
	.page > header{
		height: 5.0em ;
	}
	.page > header nav {
		padding-left: 3%;
	}
	.page nav .logo {
		width: 29%;
		margin: 0;
		padding: 0;
	}
	.page > header nav li a{
		font-size: 0.60em !important;
		padding: 2em .5em 1em .5em !important;
	}
	.page > h1 {
		width: 65% !important;
    	font-size: 1.75em;
		padding: .4em 1em .5em 1em !important;
    	top: 11.5em;
	}
	.page > main {
		width: 95%;
	}
	article .temoignage .citation {
		width: 95% !important;
	}
	article .infog{
		float: left;
		width: 30%;
		text-align: center;
		margin: 2em;
		padding: 0;
	}
}


@media only screen
and (min-width : 600px)
and (max-width : 1280px) {
	
	.page .banner{
		margin: 0 0 5.5em 0;
	}
	.page > header nav li a{
		font-size: 0.75em;
		padding: 1.5em .5em 1.25em .5em;
	}
	.page > h1 {
		width: 55%;
		padding: .4em 0 .5em 0.5em;
	}
	p {
		font-size: 1.15em;
		padding: 0 0 0.2em 0;
		color: #2c3e50;
	}
}


@media only screen
and (min-width : 980px)
and (max-width : 1280px) {
	
	.page .banner{
		margin: 0 0 5.5em 0;
	}
	.page > h1 {
		width: 55%;
		padding: .4em 0 .5em 1.0em;
		margin: 0 0 1em 0;
	}
}


@media only screen
and (min-width : 900px)
and (max-width : 1920px) {
	
	.page > header nav {
		padding-left: 3%;
	}
	.page nav .logo {
		width: 15%;
		margin: 0 !important;
    	padding: 0 2em 0 0;
	}
	.page > header nav li a{
		font-size: .75em;
		padding: 1.75em 1em 0.9em 1em;
	}
	
	p {
		font-size: 1.25em;
		padding: 0 0 0.2em 0;
		color: #2c3e50;
	}
	
}

@media only screen
and (min-width : 1800px)
and (max-width : 1920px) {
	
	.page > h1 {
    top: 11.9em;
	}
	
}


/*
@media only screen
and (min-width : 1400px)
and (orientation : landscape) {
		footer {
			background: #eeeeee url(../img/background_footer.png) no-repeat 80% 100% /cover;
		}
}

@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait)
and (orientation : portrait) {
	
		h1 {
			font-size: 3em;
		}
}