/* CSS Document */
@charset "UTF-8";

/* site general + de 1600px de large  */
* {
	padding:0;
	margin:0;
	}

img {
    width: auto;
}

/* Menu */

header nav {
    text-align: right;
	margin-top: 15px;
}

header nav li {
	list-style: none;
}

header nav a {
	font-weight: 200;
	font-size: 16px;
	padding-bottom: 10px;
    transition: border 2s;
    border-bottom: 3px solid transparent;
}

header nav a:hover {
	transition: border 2s;
    transition-timing-function: ease;
    border-bottom: 3px solid #000;  	
}

/* CONTENT */

/* image header */

section {
	width: 1600px;
	padding-top: 50px;
	display: block;
	clear: both;
	margin: auto;
}

#img-header {
	width: 100%;
}

#titre {
    margin-top: -200px;
    margin-bottom: 150px;
	margin-left: 60px;
}

#texte {
	float: left;
	width: 680px;
	margin-left: 60px;
}

H2 {
	font-size:50px;
	padding-bottom: 0px;
	background-color: #fff;
}

H3 {
	font-size: 20px;
    font-weight: 400;
	background-color: #fff;
	display: inline-block;
}

.categorie {
	font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    background-color: #fff;
	display: inline-block;
	padding: 5px;
	font-size: 20px;
}

.vertical {
	transform: rotate(-180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: block;
	font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
	letter-spacing: 5px;
    float: left;
	height: auto;
	margin: 0px;
	padding-bottom: 0px;
	margin-right: 20px;
}

#identite, #mission, #reponse {
	margin-bottom: 50px;
}

#mission, #reponse, .copyright {
	margin-left: 100px;
	width: 450px;
} 

#mission p, #reponse p {
	font-size: 14px;
} 

.description {
	margin-bottom: 5px;
	font-weight: 700;
}

#identite a {
	font-size: 16px;
    color: #0FD98C;
    padding-bottom: 10px;
    transition: border 2s;
    border-bottom: 3px solid transparent;
    transition-timing;-function: ease;
}

#identite a:hover {
	transition: border 2s;
    transition-timing-function: ease;
    border-bottom: 3px solid #0FD98C;  
}

h4 {
	font-family: 'Petit Formal Script', cursive;
    text-transform: none;
	letter-spacing: normal;
	margin-bottom: 10px;
}

.copyright {
	font-style: italic;
	font-size: 12px;
}

section nav  {
	transform: rotate(-180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
	height: 396px;
    margin: 0px;
    padding: 0px;
	float: left;
}

section nav li  {
    margin: 0px;
    padding: 0px;
	margin-bottom: 50px;
	list-style: none;
	float: left;
}

section nav a  {
	font-size: 15px;
	font-weight: 700;
	padding-left: 10px;
    border-left: 3px solid #OOO;
	transition: border 0.5s;
    transition-timing-function: ease;
	color: #0FD98C;
}

section nav a:hover  {
    border-left: 3px solid #0FD98C; 
	color: #0FD98C;
	transition: border 0.5s;
    transition-timing-function: ease;
}
#colonne {
	width: 860px;
	float: left;
	margin-bottom: 50px;
	text-align: right;
}

#first {
	width: 100%;
	padding-bottom: 25px;
}

#last{
	margin-left: 210px;
}

#img1 {
	width: 100%;
	margin-bottom: 1px;
}

#img2 {
	float: left;
	margin-right: 5px;
	width: 540px; 
}

#img3 {
	width: 1055px;
	margin-bottom: 1px;
}

#img4 {
	width: 530px;
}

#img5 {
	width: 520px;
}
    
/* RESPONSIVE */
/* ///////////////// 320 à 480 /////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 479px) {
	
	section {
	width: 320px;
	padding-top: 30px;
}

	
header nav a {
	font-size: 12px; 
}	

#titre {
    margin-bottom: 30px;
    margin-top: 0px;
    margin-left: 0px;
	}
	
H2 {
    font-size: 24px;
	background-color: #000;
	color: #fff;
}

H3 {
    font-size: 14px;
	background-color: #000;
	color: #fff;
}

.categorie {
    font-size: 13px;
	background-color: #000;
	color: #fff;
}
	
#texte {
	width: 315px;
	margin-left: 0px;
	margin-right: 5px;
}

.description {
    font-size: 12px;
}

.vertical {
    font-size: 12px;
}
	
#identite a {
    font-size: 12px;
	margin-left: 33px;
}	
#identite, #mission, #reponse {
    margin-bottom: 30px;
}

h4 {
	text-align: left;
	margin-left: 0px;
}

#mission, #reponse, .copyright {
    margin-left: 60px;
    width: auto;
}
	
section nav {
    height: 374px;
}
	
section nav a {
font-size: 13px;
	}
	
section nav li {
	margin-bottom: 30px;
}
	
#mission p, #reponse p {
    font-size: 11px;
}

.copyright {
    font-size: 9px;
}
	
#colonne {
	width: 320px;
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
}

#first {
	padding-bottom: 0px;
}

#logo-imajeans {
    margin-bottom: 10px;
	width: 240px;
}
	
#last {
    margin-left: 0px;
	width: 225px;
}
	
#img1 {
	width: 100%;
	margin-bottom: 1px;
}

#img2 {
	width: 100%;
	margin-bottom: 5px;
}

#img3 {
	width: 100%;
	margin-bottom: 1px;
}

#img4 {
	width: 100%;
}

#img5 {
	width: 100%;
}  

}

/* ///////////////// 480 à 640 /////////////////////////////// */


@media screen and (min-width: 480px) and (max-width: 639px) {
	
section {
	width: 480px;
	padding-top: 30px;
}

#logo {
    width: 50%;
    float: left; 
}
	
header nav a {
	font-size: 13px; 
}
	

#titre {
    margin-bottom: 30px;
    margin-top: -68px;
    margin-left: 30px;
	}
	
H2 {
    font-size: 30px;
}

H3 {
    font-size: 14px;
}

.categorie {
    font-size: 16px;
	padding-top: 0px;
}
	
#texte {
	width: 420px;
	margin-left: 30px;
	margin-right: 30px;
}

.description {
    font-size: 12px;
}
	.vertical {
    font-size: 12px;
}
#identite, #mission, #reponse {
    margin-bottom: 30px;
}

h4 {
	text-align: left;
	margin-left: 0px;
}

#mission, #reponse, .copyright {
    margin-left: 60px;
    width: auto;
}
	
section nav {
    height: 301px;
}
	
section nav a {
font-size: 13px;
	}
	
section nav li {
	margin-bottom: 30px;
}
	
#mission p, #reponse p {
    font-size: 11px;
}

.copyright {
    font-size: 10px;
}
	
#colonne {
	width: 480px;
	margin-top: 30px;
	text-align: center;
}

#first {
	padding-bottom: 0px;
}

#logo-imajeans {
    margin-bottom: 10px;
	width: 300px;
}
	
#last {
    margin-left: 0px;
}
	
#img1 {
	width: 100%;
	margin-bottom: 1px;
}

#img2 {
	width: 100%;
	margin-bottom: 5px;
}

#img3 {
	width: 100%;
	margin-bottom: 1px;
}

#img4 {
	width: 240px;
}

#img5 {
	width: 234px;
}  
	
}

/* //////////////////////// 640 à 960 //////////////////////// */

@media screen and (min-width: 640px) and (max-width: 959px) {
#logo {
    width: 50%;
    float: left; 
}
	
header nav a {
	font-size: 14px; 
}
	
section {
	width: 640px;
	padding-top: 40px;
}

	#titre {
    margin-bottom: 30px;
    margin-top: -68px;
    margin-left: 30px;
	}
	
	H2 {
    font-size: 30px;
}
		H3 {
    font-size: 17px;
}
	.categorie {
    font-size: 16px;
	padding-top: 0px;
}
	
    #texte {
	width: 580px;
	margin-left: 30px;
	margin-right: 30px;
}
	.description {
    font-size: 14px;
}
	.vertical {
    font-size: 12px;
}
	#identite, #mission, #reponse {
    margin-bottom: 30px;
}

	#mission, #reponse, .copyright {
    margin-left: 80px;
    width: auto;
}
	section nav {
    height: 341px;
}
	section nav a {
font-size: 13px;
	}
	
	#colonne {
	width: 640px;
	margin-top: 30px;
		text-align: center;
}

#first {
	padding-bottom: 0px;
}
	#logo-imajeans {
    margin-bottom: 10px;

	}
	
	#last {
    margin-left: 0px;
}
	
	#img1 {
	width: 100%;
	margin-bottom: 1px;
}

#img2 {
	width: 100%;
	margin-bottom: 5px;
}

#img3 {
	width: 100%;
	margin-bottom: 1px;
}

#img4 {
	width: 321px;
}

#img5 {
	width: 314px;
}  
 
}

/* ////////////////////////960 à 1280 //////////////////////// */


@media screen and (min-width: 960px) and (max-width: 1279px) {
	

section {
	width: 960px;
	padding-top: 40px;
}
	
	#titre {
		margin-bottom: 130px;
	}
	
	H2 {
    font-size: 48px;
}
	.categorie {
    font-size: 18px;
}
	
    #texte {
	width: 458px;
}
	.description {
    font-size: 14px;
}

	#mission, #reponse, .copyright {
    margin-left: 80px;
    width: auto;
}
	section nav {
    height: 429px;
}
	
	#colonne {
	width: 442px;
}

#first {
	padding-bottom: 80px;
}
	#logo-imajeans {
	width: 350px;
    margin-bottom: 25px;
    margin-top: 150px;
	}
	
	#last {
    margin-left: 0px;
}
	
	#img1 {
	width: 100%;
	margin-bottom: 1px;
}

#img2 {
	float: left;
	margin-right: 5px;
	width: 324px;
}

#img3 {
	width: 631px;
	margin-bottom: 1px;
}

#img4 {
	width: 316px;
}

#img5 {
	width: 310px;
}

#iti {
	font-style: italic;
	font-size: 9px;
}
}


/* ////////////////////1280 à 1600 //////////////////////////// */

@media screen and (min-width: 1280px) and (max-width: 1599px) {
	
section {
	width: 1280px;
}
	
#texte {
	width: 600px;
}
	
	#colonne {
	width: 620px;
	margin-bottom: 100px;
}

#first {
	padding-bottom: 100px;
}	
	
	#img1 {
	width: 100%;
	margin-bottom: 1px;
}

#img2 {
	float: left;
	margin-right: 5px;
	width: 432px;
}

#img3 {
	width: 843px;
	margin-bottom: 1px;
}

#img4 {
	width: 424px;
}

#img5 {
	width: 414px;
}

#iti {
	font-style: italic;
	font-size: 10px;
}
}