html {font-size:100%}

body { background-color:#201E23; font-size:1em; margin:0; font-family: 'Noto Serif', serif}

#page { visibility:hidden; height:100%}

#loader {width:100px; height:100px; position:fixed; top:50%; left:50%; margin-top:-25px; margin-left:-25px; z-index:1}

#entete { width:100%; position:fixed; top:0; left:0; z-index:20}
	#bandeau { background-color:#201E23; position:fixed; width:100%; height:65px; z-index:20}
	#logo-airain { width:200px; position:fixed; left:0px; margin:10px; z-index:21; visibility:hidden}
	#navi-mobile { background-image:url(../Images/picto-navi.png); background-repeat:no-repeat; background-size:35px; 
	padding:25px; position:fixed; top:-50px; right:15px; z-index:20; display:none; cursor:pointer}
	
#navi{ position:fixed; left:220px; top:22px; margin:0; padding:0; overflow:hidden; z-index:21}
	#navi a { text-decoration:none; font-size:1.5em; font-family: 'Lato', sans-serif; color:#14AF96; display:inline-block; float:left; padding:5px; margin:0px 100px; position:relative; top:-300px; visibility:hidden; z-index:11}
	
/*page accueil*/
#global { visibility:hidden}
	#imagevitrine {background-image: url(../Images/fond-vitrine.jpg); background-repeat:no-repeat; background-attachment:fixed; background-size:cover; margin:0; width:100%; z-index:5}

.position-visuels { width:1300px; margin:0 auto; position:relative}

#accueil { margin:0px auto 150px auto; padding-top:200px}
#accueil img { width: 50%; display:block; margin:200px auto 0px auto; padding-bottom: 250px}
	

.info-realisation { text-align:center; width:100%; font-family: 'Lato', sans-serif; font-size:1.3em; color:#EB5A0F; position:absolute; display:block; margin-top:-50px; z-index:11}
	.info-realisation .info-categorie { font-size:0.9em; color:#14AF96}

h1 { color:#EB5A0F; font-family: 'Lato', sans-serif; font-size:2em; text-align:center; margin: 50px auto 30px auto; padding-top: 70px}

#prestations { position:relative; margin-bottom:25px}
	#prestations span { display:block; width:200px; text-align:center; margin:0 auto; font-family: 'Lato', sans-serif; color:#14AF96; font-size:1.5em}
	#prestations p { color:#AFBEC8; text-align:center; margin:0 15px 0 15px; padding-bottom:10px}

#realisations { margin-bottom:100px}
	#realisations ul { padding:0; list-style:none}
	#realisations li { width:325px; height:325px; overflow:hidden; float:left; display:block; position:relative}
		#realisations li a { text-decoration:none}
		#realisations li img {height:325px; margin:auto}

#apropos { position:relative; margin-bottom:25px}
	#apropos span { display:block; width:200px; text-align:center; margin:0 auto; font-family: 'Lato', sans-serif; color:#14AF96; font-size:1.5em}
	
#apropos-detail { display:block}
	#apropos-detail p { color:#AFBEC8; text-align:center; margin:0 15px 0 15px; padding-bottom:10px}

#contact { }
	#mail {color:#14AF96; display:block; text-align:center; margin:0 auto 25px auto}
	#blocreseaux {display:block; text-align:center; margin:0 auto 25px auto}
	.reseauxsociaux { padding:25px; text-decoration:none}
#mentions-legales {color:#AFBEC8; text-decoration:none; display:block; text-align:center; margin:0 auto 50px auto}
	

/* page projet*/
.position-projet { width:1300px; margin:0 auto; position:relative}

h2 { color:#EB5A0F; font-family: 'Lato', sans-serif; font-size:2em; text-align:center; margin: 100px auto 30px auto}
h3 { color:#14AF96; font-family: 'Lato', sans-serif; font-size:1em; text-align:center; margin: 50px auto 20px auto}

#infos-projet { display:inline-block; width:315px; padding-right:10px; margin:0; float:left; text-align:right}
	.titre-info { color:#EB5A0F; font-family: 'Lato', sans-serif; font-size:1.1em}
	.detail-info { color:#14AF96}
#description-projet { display:inline-block; width:650px; margin:0; padding-left:10px; float:left; color:#AFBEC8; text-align:justify}
#description-projet a { text-decoration:none; color:#14AF96}
#mentions-legales a { text-decoration:none; color:#14AF96}

#galerie { position:relative; width:100%; margin:30px auto 50px auto;
	/*désactiver sélection texte selon les moteurs de recherches*/
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
	#precedent { background-image:url(../Images/fleche-precedent.png); background-repeat:no-repeat; width:40px; height:70px; position:absolute; top:50%; margin-top:-35px; left:0; cursor:pointer}
	#suivant { background-image:url(../Images/fleche-suivant.png); background-repeat:no-repeat; width:40px; height:70px; position:absolute; top:50%; margin-top:-35px; right:0; cursor:pointer}
	#galerie img { width:100%; display:block}
	
	#images-galerie { display:none}

/* page photographies*/
	/*voir lightbox.css*/
	#galerie-photos { position:relative; width:100%; margin:30px auto 50px auto}
	#galerie-photos img { width:162px; height:162px; overflow:hidden; float:left; display:inline-block; position:relative}
	
/* page video*/
	.galerie-video { position:relative; width:100%; margin:30px auto 50px auto}
	.galerie-video video { width:100%}


.pagetype { display:none}

.retourligne { clear:both}



@media screen and (max-width: 1500px) {
	/*accueil*/
	.position-visuels { width:1000px}
	
	h1 { font-size:1.7em}
	
	#realisations li { width:250px; height:250px}
		#realisations li img {height:250px}
		
	.info-realisation { font-size:1.2em}
		.info-realisation .info-categorie { font-size:0.8em}
	
	#apropos span { width:175px; font-size:1.4em}
	#apropos-droite { width:500px}
		#monparcours { background-size:175px; padding-top:130px}
	#apropos-gauche { width:500px}
		#pkAirain { background-size:175px; padding-top:130px}
		
	/*page projet*/
	.position-projet { width:1000px}
	
	h2 { font-size:1.7em}
	
	#infos-projet { width:240px}
	#description-projet { width:500px}
	
	/* page photographies*/
	#galerie-photos img { width:166px; height:166px}
}

@media screen and (max-width: 1200px) {
	body { font-size:0.9em}
	
	#logo-airain { width:250px}
	#navi a { font-size:1.1em}
	
	/*accueil*/
	.position-visuels { width:800px}
	
	h1 { font-size:1.5em}
	
	#realisations li { width:266px; height:266px}
		#realisations li img {height:266px}
	
	.info-realisation { font-size:1.1em}
		.info-realisation .info-categorie { font-size:0.8em}
	
	#apropos span { width:150px; font-size:1.3em}
	#apropos-droite { width:400px}
		#monparcours { background-size:150px; padding-top:115px}
	#apropos-gauche { width:400px}
		#pkAirain { background-size:150px; padding-top:115px}
		
	#contact span { font-size:1em}
	
	/*page projet*/
	.position-projet { width:800px}
	
	h2 { font-size:1.7em}
	
	#infos-projet { width:190px}
		.titre-info { font-size:1.0em}
	#description-projet { width:400px}
	
	/* page photographies*/
	#galerie-photos img { width:160px; height:160px}
}

@media screen and (max-width: 900px), screen and (max-height: 450px) {
	/*version mobile*/
	body { font-size:0.9em}
	
	#bandeau { height:60px}
	#logo-airain { width:175px}
	#navi-mobile { display:block}
	#navi{ background-color:#EB5A0F; position:fixed; left:0px; top:-300px; margin:0; padding:80px 0 0 0; width:100%; height:250px;
	writing-mode: horizontal-tb; display:none; z-index:11}
	#navi a { font-size:1.8em; display:block; float:none; padding:10px; margin:10px; position:relative; top:0px; text-align:center; visibility:hidden}
	
	/*page accueil*/
	.position-visuels { width:100%}
	
	#accueil { margin:0px auto 75px auto; padding-top:75px}
		#accueil img { width: 70%; margin:270px auto 0px auto; padding-bottom:320px}

	.info-realisation { font-size:1em; margin-top:0px; padding:10px 0; position:relative; z-index:10}
		.info-realisation .info-categorie { font-size:0.8em}
	
	h1 { font-size:1.5em; text-align:center; margin: 20px auto 10px auto}

	#realisations { margin-bottom:50px}
		#realisations li { width:100%; height:100%; position:relative}
			#realisations li img { width:100%; height:100%}
	
	#apropos { margin-bottom:50px}
		#apropos span { color:#14AF96; width:100%; font-size:1.3em; padding:20px 0 10px 0}
	
	/* page projet*/
	.position-projet { width:100%; text-align:center}
	
	h2 { font-size:1.5em; margin: 75px auto 10px auto}
	
	#infos-projet { width:95%; padding:10px 0 10px 0; margin:0; float:none; text-align:center}
		.titre-info { font-size:1.1em}
	#description-projet { width:95%; padding:10px 0 10px 0; margin:0; float:none; text-align:center}
	
	#galerie { margin:20px auto 40px auto}
		#precedent { width:30px; height:50px; top:50%; margin-top:-15px; background-size:contain}
		#suivant { width:30px; height:50px; top:50%; margin-top:-15px; background-size:contain}
	
	/* page photographies*/
		/*voir lightbox.css*/
		#galerie-photos { margin:20px auto 30px auto}
		#galerie-photos img { width:50%; height:auto}
		
	/* page video*/
		#galerie-video { margin:20px auto 30px auto}
}

			
/* commentaire */