#home{
	background-color: black;
}

#home img{		
    opacity: 0.8;
}

#home .btNavajo img{
	opacity: 1;
}


.btMap{
	display: inline-table;
	position: relative;
	background-color: rgba(60, 107, 145, 0.25);
	cursor: pointer;
	transition: background-color 0.5s;
}

.btMap_FOCUS{
	background-color: rgba(60, 107, 145, 1);
	cursor: initial;
}

.btMap span{
	color: white;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#Project li{
	margin-bottom: initial;
}

#contact{
	min-height: initial;
}

.IconesPart{
	position: relative;
	width: 100%;
}

.IconeBloc{
	position: relative;
	float: left;
	width: 50%;
	height: 100px;
}

.IconeContener{
	position: relative;
	float: left;
	width: 33%;
	height: 100%;
}

.IconeContener img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}

.IconeText{
	position: relative;
	float: left;
	width: 66%;
	height: 100%;
}

.IconeText span{
	color: #4c4744;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;	
}




@media screen and (orientation: portrait) {


	/*-----------------------HOME--------------------*/

	#home img{
		width: auto;
    	height: 667px;
    	transform: translate(-40%, 0px);
    	opacity: 0.8;
	}

	#home h2{
		margin-top: 10px;
	}

	#home p{
		margin-top: 30px;
	}

	#home .btNavajo{
		margin-top: 40px;
		position: relative;
		font-size: 1rem;
		padding: 10px 0px;
		color: rgb(96, 67, 51);
		background-color: rgb(255, 222, 173);
		margin-left: calc(50% - 130px);
		width: 300px;
	}

	#home .btNavajo span{
		font-size: 1rem;
	}

	#home .btNavajo img{
		position: absolute;
	    top: 50%;
	    left: -15px;
	    width: 70px;
	    height: auto;
	    transform: translate(-50%, -50%);
	}

	#home .btn-scroll-down{
		top: calc(50% + 200px);
	}

	/*----------------------UTILS---------------------*/

	.blocNavajo{
		width: 80%;
		margin: 0px 10%;		
	}

	.blocNavajo p{
		text-align: justify;
	}

	.page{
		padding-bottom: 0;
	}

	h2{
		margin-bottom: 50px;
	}

	/*------------------------INTRO-----------------------*/

	#intro_Navajo h3{
		text-align: center;
		margin: 50px 0px;
	}

	

	/*------------------------TECHNO-----------------------*/

	#shema{
		margin: 50px 0px;
		width: 120%;
		transform: translate(-9%,0);
	}

	/*--------------------------MAP-------------------------*/

	#plan3D{
		margin-bottom: 30px;
	}

	.btMap{
		width: 100px;
		height: 40px;
	}

	.btMap span{
		letter-spacing: 1px;
	}

	/*--------------------------PHOTO PETER-------------------*/

	#Project .bandeauPhoto img{
		margin-bottom: 30px;
	}

	.contener_bouton{
		position: relative;
		width: 100%;
		height: 100px;
	}

	.boutonDownload{
		position: absolute;
		width: 80%;
		height: 100px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #3c6b91;
	}

	.boutonDownload:-webkit-any-link{
		color: white;
	}

	.boutonDownload span{
		position: absolute;
	    width: 80%;
	    text-align: center;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}

	/*---------------------------PHOTO CHAPTER----------------------------*/

	.bloc_photo_chapter{
		float: left;
		width: 45%;
		margin-bottom: 30px;
	}

	.bloc_photo_chapter:nth-child(2n){
		margin-left: 10%;
	}

	.bloc_photo_chapter img{
		margin-bottom: 10px;
	}

	.chapter_name{
		line-height: 1;
		display: block;
	}

	.chapter_job{
		font-style: italic;
		font-size: 0.8em;
		display: block;
	}	

	#Chapter .bandeau_photo_x3 img {
	    margin-bottom: 30px;
	}

	.bandeau_photo_x3_legende{
		float: left;
		width: 90%;
    	margin: 0;
    	margin-left: 5%;
    	margin-bottom: 30px;
	}

	#Chapter .contener_bouton{
		height: 200px;
	} 

	#Chapter .boutonDownload{
		height: 170px;
	} 

	/*---------------------------PHOTO NPF----------------------------*/

	.bloc_photo_NPF{
		float: left;
		width: 100%;		
	}	

	.bloc_photo_NPF img{
		width: 50%;
		margin-left: 25%;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.NPF_name{
		text-align: center;
		line-height: 1;
		display: block;
	}

	.NPF_job{
		text-align: center;
		font-style: italic;
		font-size: 0.8em;
		display: block;
		margin-bottom: 40px;
		width: 60%;
    	margin-left: 20%;
	}

	.NPF_skill{
		display: block;		
	}

	.NPF_skill li{
		font-size: 0.8em;
	}

	.sousListe li{
		list-style: circle;
	}

	



}


@media screen and (orientation: portrait) and (min-width: 760px){
	
	/*-----------------------HOME--------------------*/

	#home .header{
		    margin: 100px 100px;
    		width: calc(100% - 200px);
	}

	/*------------------------INTRO-----------------------*/

	.sousblocNavajo{
		width: 80%;
		margin: 0px 10%;
	}

	#intro_Navajo h3{
		text-align: center;
		margin: 50px 0px;
	}

	

	/*------------------------TECHNO-----------------------*/

	#shema{
		margin-top: 50px;
		width: 110%;
		transform: translate(-5%,0);
	}

	/*--------------------------PHOTO PETER-------------------*/

	#Project .bandeauPhoto img{

		width: 80%;
		margin-left: 10%;
		margin-top: 25px;
		margin-bottom: 25px;
	}

	/*---------------------------ICONE CHAPTER---------------------*/

	.doubleColonne .colonneDroite img{
		width: 60%;
		margin-left: 20%;
	}

	/*---------------------------PHOTO CHAPTER----------------------------*/

	.bloc_photo_chapter{
		float: left;
		width: 30%;
		margin-bottom: 30px;
	}

	.bloc_photo_chapter:nth-child(2n){
		margin-left: initial;
	}

	.bloc_photo_chapter:nth-child(2){
		margin-left: 5%;
	}

	.bloc_photo_chapter:nth-child(3){
		margin-left: 5%;
	}

	.bloc_photo_chapter:nth-child(5){
		margin-left: 5%;
	}

	#Chapter .bandeau_photo_x3 img {
	    width: 80%;
    	margin-left: 10%;
    	margin-top: 25px;
    	margin-bottom: 25px;
	}

	.bandeau_photo_x3_legende{
		float: left;
	    width: 80%;
	    margin: 0;
	    margin-left: 10%;
	    margin-bottom: 10px;
	    margin-top: 10px;
	    font-size: 1.5em;
	    text-align: center;
	}

	.boutonDownload{
		width: 40%;
    	height: 80px;
	}

	#Chapter .contener_bouton{
		height: 200px;
	} 

	#Chapter .boutonDownload{
		height: 120px;
    	width: 600px;
	} 

	/*---------------------------PHOTO NPF----------------------------*/

	.bloc_photo_NPF{
		float: left;
		width: 45%;		
		height: 700px;
	}	

	.bloc_photo_NPF:nth-child(2n){
		margin-left: 10%;
	}

	.bloc_photo_NPF img{
		width: 70%;
		margin-left: 15%;
	}

	/*------------------------------ICONE AVANTAGE------------------------*/

	.IconesPart{
		margin-bottom: 50px;
	}

	.IconeBloc{
		height: 140px;
	}

	.IconeText span{
			transform: translate(-25%,-50%);
	}


}


/*-------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------LANDSCAPE--------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (orientation: landscape) {


	/*----------------------UTILS---------------------*/

	.page{
		padding-bottom: 0;
	}

	h2{
		margin-bottom: 50px;
	}


	/*-----------------------HOME--------------------*/


	#home h2{
		margin-top: 100px;
	}

	#home p{
		margin-top: 50px;
		margin-left: 25%;
		width: 50%;
	}	

	#home_fond{
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
    	height: 100%;
    	transform: translate(-50%, -50%);    	
	}

	#home .btNavajo{
		margin-top: 60px;
		position: relative;
		padding: 10px 10px;
		color: rgb(96, 67, 51);
		background-color: rgb(255, 222, 173);
		margin-left: calc(50% - 400px);
		width: 800px;
	}

	#home .btNavajo img{
		position: absolute;
	    top: 50%;
	    left: 0;
	    width: 100px;
	    transform: translate(-50%, -50%);	    
	}	

	/*------------------------INTRO-----------------------*/

	.sousblocNavajo{
		width: 50%;
		margin: 0px 25%;
	}

	#intro_Navajo{
		min-height: initial;
	}

	#intro_Navajo h3{
		text-align: center;
		margin: 50px 0px;
	}

	/*------------------------TECHNO-----------------------*/

	#shema{
		margin-bottom: 50px	
	}

	#schema_2 img{
		margin-left: 25%;
	}

	/*--------------------------MAP-------------------------*/

	#plan3D{
		margin-bottom: 30px;
	}

	.btMap{
		width: 100px;
		height: 40px;
	}

	.btMap span{
		letter-spacing: 1px;
	}

	/*--------------------------PHOTO PETER-------------------*/

	.bandeauPhoto{
		margin-top: 50px;
		width: 80%;
		margin-left: 10%;
	}

	#Project .bandeauPhoto img{
		width: 49%;				
	}

	#Project .bandeauPhoto img:nth-child(2){
		margin-left: 1%;			
	}

	/*--------------------------BOUTON DOWNLOAD-------------------*/

	.contener_bouton{
		position: relative;
		width: 100%;
		height: 200px;
	}

	.boutonDownload{
		position: absolute;
		width: 380px;
		height: 90px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #3c6b91;
	}

	.boutonDownload:-webkit-any-link{
		color: white;
	}

	.boutonDownload span{
		position: absolute;
	    width: 80%;
	    text-align: center;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}

	/*--------------------------CHAPTER------------------*/

	.colonne{
		float: left;
	}

	.colonneGauche{
		width: 70%;
	}

	.colonneGauche li{
		margin-bottom: initial;
	}

	.colonneDroite{
		position: relative;
		width: 30%;
		height: 550px;
	}

	.colonneDroite img{
		position: absolute;
		top: 50%;
		transform: translate(30px,-50%);
	}

	.IconeText span{
		transform: translate(-40%,-50%);
	}

	#Chapter .contener_bouton{
		height: 200px;
	} 

	#Chapter .boutonDownload{
		height: 110px;
    	width: 680px;
	} 
	


	/*---------------------------PHOTO CHAPTER----------------------------*/

	.bloc_photo_chapter{
		float: left;
		width: 18%;
		margin-bottom: 30px;
		margin-left: 2.5%;
	}

	.bloc_photo_chapter:nth-child(1){
		margin-left: initial;
	}

	.bloc_photo_chapter img{
		margin-bottom: 10px;
	}

	.chapter_name{
		line-height: 1;
		display: block;
	}

	.chapter_job{
		font-style: italic;
		font-size: 0.8em;
		display: block;
	}

	#Chapter .bandeau_photo_x3{
		margin-top: 50px;
    	width: 80%;
    	margin-left: 10%;
    	height: 520px;
	}

	#Chapter .bandeau_photo_x3 img {
	    float: left;
    	width: 32%;
    	margin-right: 1%;   	
	}

	.bandeau_photo_x3_legende{
		float: left;
	    width: 80%;
	    margin: 0;
	    margin-left: 10%;
	    margin-bottom: 20px;
	    margin-top: 40px;
	    font-size: 1.1em;
	    text-align: center;
	}

	#Chapter{
		/*margin-bottom: 50px;*/
	}

	/*---------------------------PHOTO NPF----------------------------*/

	.bloc_photo_NPF{
		float: left;
		width: 22%;		
		margin-left: 4%;
	}	

	.bloc_photo_NPF:nth-child(1){
		margin-left: initial;
	}

	.bloc_photo_NPF img{
		width: 80%;
		margin-left: 10%;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.NPF_name{
		text-align: center;
		line-height: 1;
		display: block;
	}

	.NPF_job{
		text-align: center;
		font-style: italic;
		font-size: 0.8em;
		display: block;
		margin-bottom: 40px;
		width: 80%;
    	margin-left: 10%;
	}

	.NPF_skill{
		display: block;		
	}

	.NPF_skill li{
		font-size: 0.8em;
	}

	.sousListe li{
		list-style: circle;
	}


	

}

/*-------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------IPAD--------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------*/


@media screen and (orientation: landscape) and (min-width: 1020px){
	
	/*-----------------------HOME--------------------*/

	#home .header{
		margin: 160px 0px;
	}

	#home .header h2{
		margin-top: 10px;
		font-size: 2rem;
	}

	#home .btNavajo{
		font-size: 1.5rem;
		margin-left: calc(50% - 275px);
    	width: 550px;
	}

	#home .btNavajo img{		
	    width: 80px;	     
	}

	#home .btn-scroll-down{
		top: calc(50% + 260px);
	}

	/*----------------------UTILS---------------------*/

	.blocNavajo{
		width: 80%;
		margin: 0px 10%;		
	}

	/*------------------------INTRO-----------------------*/

	.sousblocNavajo{
		font-size: 1em;
		width: 60%;
    	margin: 0px 20%;
	}

	.sousblocNavajo li{
		font-size: 1.2em;
		line-height: 1.1em;
	}
}

@media screen and (orientation: landscape) and (min-width: 1200px){
	#Chapter .bandeau_photo_x3{
		height: 560px;
	}
}

@media screen and (orientation: landscape) and (min-width: 1400px){
	#Chapter .bandeau_photo_x3{
		height: 630px;
	}
}

@media screen and (orientation: landscape) and (min-width: 1600px){
	#Chapter .bandeau_photo_x3{
		height: 690px;
	}
}

@media screen and (orientation: landscape) and (min-width: 1800px){
	#Chapter .bandeau_photo_x3{
		height: 760px;
	}
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------Desk--------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (orientation: landscape) and (min-width: 1900px){
	
	/*----------------------UTILS---------------------*/	

	h2{
		font-size: 3em;
	}

	.blocNavajo{
		width: 60%;
		margin: 0px 20%;		
	}

	/*-----------------------HOME--------------------*/

	#home .header{
		margin: 80px 0px;
	}

	#home .header h2{
		margin-top: 100px;
		font-size: 4rem;
	}

	#home .btNavajo{		
		font-size: 2rem;
		margin-left: calc(50% - 400px);
		width: 800px;
	}

	#home .btNavajo img{		
	    width: 100px;	     
	}

	#home .btn-scroll-down{
		top: calc(50% + 300px);
	}

	#home .btNavajo{
		font-size: 1.5rem;
		margin-left: calc(50% - 300px);
    	width: 600px;
	}

	#home_fond{
		height: 110%;
	}

	/*------------------------INTRO-----------------------*/

	.sousblocNavajo{
		font-size: 1.5em;
		width: 40%;
    	margin: 0px 30%;
	}

	.sousblocNavajo li{
		font-size: 1.2em;
		line-height: 1em;
	}

	/*------------------------TECHNO-----------------------*/

	#shema{
		margin-top: 50px;		
		margin-bottom: 100px;		
	}

	/*--------------------------MAP-------------------------*/

	.btMap{
		width: 220px;
		height: 50px;
	}

	.btMap span{
		letter-spacing: 1px;
	}

	#bt_Overall{
		margin-top: 50px;
	}

	#bt_Zoom{
		margin-left: 10px;
	}

	/*--------------------------PHOTO PETER-------------------*/

	.bandeauPhoto{
		margin-top: 50px;
		margin-bottom: 50px;
		width: 60%;
		margin-left: 20%;
	}

	/*---------------------------PHOTO CHAPTER----------------------------*/

	.bloc_photo_chapter img{
		margin-bottom: 10px;
	}

	.chapter_name{
		font-size: 1.1em;	
		line-height: 1;		
	}

	.chapter_job{		
		font-size: 0.8em;		
	}

	#Chapter .bandeau_photo_x3{
		margin-top: 50px;
    	width: 100%;
    	margin-left: 0%;
	}

	#Chapter .bandeau_photo_x3 img {
	    float: left;
    	width: 32.6%;
    	margin-right: 1%;   	
	}

	#Chapter .bandeau_photo_x3 img:nth-child(3){
		margin-right: 0%;
	}

	.bandeau_photo_x3_legende{
		float: left;
	    width: 80%;
	    margin: 0;
	    margin-left: 10%;
	    margin-bottom: 20px;
	    margin-top: 40px;
	    font-size: 1.7em;
	    text-align: center;
	}

	#Chapter{
		margin-bottom: 100px;
	}

	#Chapter .bandeau_photo_x3{
		height: 850px;
	}

	/*---------------------------ICONE AVANTAGE----------------------------*/

	.IconeBloc{
		height: 170px;
	}

	.IconeText span{
		font-size: 1.5em;
	}

	.colonneDroite{
		height: 800px;
	}
}

@media screen and (orientation: landscape) and (min-width: 2100px){
	#Chapter .bandeau_photo_x3{
		height: 910px;
	}
}

@media screen and (orientation: landscape) and (min-width: 2300px){
	#Chapter .bandeau_photo_x3{
		height: 1000px;
	}
}

@media screen and (orientation: landscape) and (min-width: 2500px){
	#Chapter .bandeau_photo_x3{
		height: 1080px;
	}
}