*{
    color: #454948;
	font-family: 'raleway';
	overflow-x: hidden;
    margin: 0;
	padding: 0;
}

body{
	overflow-x: hidden;
}

h1{
	font-size: 40px;
}

h2{
	font-size: 36px;
	color: #638fa5;
	font-weight: 500;
}

h3{
	font-size: 32px;
}

h4{
	font-size: 28px;
}

h5{
	font-size: 24px;
}

h6{
	font-size: 22px;
}

/******** COULEURS DU SITE ********/
/*
	#454948 // COULEURS DU TEXTE 
	#638fa5 // COULEURS DES TITRES ET BACKGROUND FOOTER
	#b8b9b9 // COULEURS TRAITS
	#75b7cc // COULEURS BLEU + CLAIR

/******** SCROLLBAR ********/

::-webkit-scrollbar /* taille de la scrollbar*/
{
	width: 5px;
}

::-webkit-scrollbar-track
{
	background-color: #ebeeed;
}

::-webkit-scrollbar-thumb
{
	background-color: #638fa5;
	border-radius: 6px;
}

/******** SELECTION ********/
::-moz-selection {
	color: white;
	background: #75b7cc;
}
  
::selection {
	color: white;
	background: #75b7cc;
}

/******** CUSTOM ICON FONTS ********/
@font-face {
	font-family: 'fontello';
	src: url('../fonts/fontello.eot');
	src: url('../fonts/fontello.eot#iefix') format('embedded-opentype'),
		 url('../fonts/fontello.woff2') format('woff2'),
		 url('../fonts/fontello.woff') format('woff'),
		 url('../fonts/fontello.ttf') format('truetype'),
		 url('../fonts/fontello.svg#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
  }
  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
  /*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
	  font-family: 'fontello';
	  src: url('../font/fontello.svg?17419004#fontello') format('svg');
	}
  }
  */
   
   [class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
   
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	/* opacity: .8; */
   
	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;
   
	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;
   
	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: .2em;
   
	/* you can be more comfortable with increased icons size */
	/* font-size: 120%; */
   
	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
   
	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
   
  .icon-close:before { content: '\e802'; } /* '' */
  .icon-open-menu:before { content: '\e804'; } /* '' */
  .icon-phone:before { content: '\e806'; } /* '' */
  .icon-mail-alt:before { content: '\f0e0'; } /* '' */

/******** TRAIT ********/
.apropos .trait, .travaux .trait{
	width: 1px;
	height: 65px;
	background-color: #b8b9b9;
	position: absolute;
	top: 100vh;
	left: 50%;
}

.travaux .trait{
	top: 430px;
}


/******** MENU SCROLL TO ********/

	/* SCROLL TO - MENU DU HAUT TRANSPARENT*/
	.normal
	{
		position: fixed;
		width: 100%;
		height: 80px;
		transition: 0.5s;
		z-index: 2;
		background-color: transparent;
	}
	.normal a {
		font-size: 18px;
		color: #454948;
	}

	.normal .normal-img{
		display: initial;
		transition: 0.5s;
	}

	.suite .normal-img{
		display: none;
		transition: 0.5s;
	}

	.normal .suite-img{
		display: none;
		transition: 0.5s;
	}

	.suite .suite-img{
		display: initial;
		transition: 0.5s;
	}

	/*SCROLL TO - MENU EN BAS COULEUR */
	.suite, .navAutres
	{
		position: fixed;
		width: 100%;
		height: 80px;
		background-color: #f6fbfa;
		box-shadow: 0.5px 0.5px 5px grey;
		transition: 0.5s;
		z-index: 2;
	}

	.suite img, .navAutres img{
		width: 120px;
	}

	.suite a, .navAutres a {
		font-size: 16px;
	}

	.navAutres{
		box-shadow: 1px 1px 6px grey;
	}

header{
  	width: 100%;
  	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
}

nav ul{
    display: flex;
    list-style-type: none;
}

nav ul li a{
	text-decoration: none;
	margin-left: 30px;
	color: #454948;
}

nav ul li a:hover{
	color: #638fa5;
}

header img{
	position: absolute;
	top: 12px;

}

/*************** MENU BURGER *******************/
header .menu-offcanvas-open, header .menu-offcanvas{
	display: none;
}

@media screen and (max-width:900px) {
	.menu-pc{
		display: none;
	}

	nav ul li a{
		margin-left: 0;
	}

	header{
		justify-content: space-between;
	}

	header .header-img{
		margin-left: 40px;
	}

	header .menu-offcanvas-open{
		margin-right: 40px;
	}

	header .menu-offcanvas-open, header .menu-offcanvas{
		display: block;
	}

	header #menuControlOpen{
		background: none;
		border: none;
	}
	
	#menuControlOpen::before{
		content: '\e804';
		font-family: 'fontello';
		color: #638fa5;
		font-size: 28px;
		cursor: pointer;
	}
	
	.menu-close::before{
		content: '\e802';
		font-family: 'fontello';
		font-size: 20px;
		cursor: pointer;
		margin-bottom: 60px;
	}
	
	header .menu-offcanvas{
		display: block;
		background: #ebeeed;
		position: fixed;
		top: 0;
		right: -500px;
		width: 250px;
		height: 100%;
		padding: 40px 70px 60px 60px;
		max-width: 500px;
		margin-top: 0;
		z-index: 999999;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	
	header .menu-offcanvas nav{
		height: 40%;
	}
	
	header .menu-offcanvas nav ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		padding: 0;
		height: 100%;
	}
	
	header .menu-offcanvas nav ul a{
		color: #666;
	}
	
	header .menu-offcanvas button{
		background: none;
		border: none;
		color: #638fa5;
		font-size: 40px;
		font-family: 'Raleway';
		margin-bottom: 60px;
	}
	
	.offcanvasmenu-show .menu-offcanvas {
		right: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
}

@media screen and (max-width:600px) {
	header .menu-offcanvas{
		width: 163px;
	}
}

@media screen and (max-width:480px) {
	header .menu-offcanvas{
		width: 100%;
		padding: 0;
	}

	.menu-close::before{
		margin-left: 15px;
	}

}

/*************** PAGE D'ACCUEIL *******************/
.accueil{
  	width: 100%;
  	height: 100vh;
  	background-image: url(../images/6.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.overlayaccueil{
	width: 100%;
	height: 100vh;
	background-color: rgba(240, 246, 245, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.overlayaccueil h1{
	color: #638fa5;
	font-family: 'Montserrat';
	font-size: 60px;
	text-align: center;
}

.accueil p{
	font-size: 18px;
	padding-top: 15px;
	color: #454948;
}

#scrollanimation{
	width: 5px;
	height: 25px;
	padding: 10px;
	border-radius: 25px;
	border: 2px solid #638fa5;
	position: absolute;
	top: 87vh;
	left: 49.1%;
	animation-iteration-count: infinite;
	animation-duration: 3s;
}

#scrollanimation #petitscroll{
	width: 3px;
	height: 8px;
	margin: auto;
	background-color: #638fa5;
	border-radius: 5px;
}

/* A PROPOS */
.apropos{
	background-color: #f8fcfb;
	padding: 50px 0 50px 0;
	display: flex;
}


.aproposphoto{
	width: 50vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.photodescri{
	width: 25vw;
	height: 35vw;
	background-image: url("../images/photo-gaelle.jpg");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	transition: 0.5s;
}

.photodescri:hover{
	background-size: 110%;
}

.photodescri:hover .overlayapropos{
	background-color: rgba(99, 143, 165, 0.6);
	width: 25vw;
	height: 35vw;
	transition: 0.5s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.photodescri:hover .overlayapropos a{
	margin-left: 15px;
}

.overlayapropos{
	display: none;
}

.aproposTexte{
	width: 50vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items:  center;
	justify-content: center;
}

.aproposTexte h2{
	margin: 45px;
}

.aproposTexte p{
	text-align: justify;
	margin: 0 45px 0 55px;
}

.lienApropos{
	width: 50vw;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}

.lienApropos a, .projet-resultat a{
	color: white;
	background-color: #638fa5;
	text-decoration: none;
	padding: 13px 30px 13px 30px;
	transition: 0.3s;
	margin-left: 15px;
}

.lienApropos a:hover, .projet-resultat a:hover{
	color: white;
	background-color: #454948;
}

/* SERVICES */
.services{
	width: 100%;
	position: relative;
}
.servicesImg{
	width: 100%;
	height: 40vh;
	background-image: url(../images/9.jpg);
	background-color: #638fa5;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.overlayservices{
	height: 40vh;
	background-color: rgba(99, 143, 165, 0.7);
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}

.servicesTitle h2{
	color: white;
	font-size: 40px;
	font-weight: 500;
}

.box1{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 70%;
}

.box2{
	display: flex;
	justify-content: center;
	align-items: center;
}

.serviceCompetences{
	background-color: #f6fbfa;
}

.servicesDiv{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 30px 0 30px 0;
}

.serviceGrandebox{
	width: 30vw;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20px 5px 20px 5px;
}

.serviceBox{
	width: 20vw;
	padding: 40px 25px 40px 25px;
	transition: 0.3s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.serviceBox:hover{	
	box-shadow: 1px 1px 20px  #a8a8a8;
}

.serviceBox .bleu{
	display: initial;
}
.serviceBox .clair{
	display: none;
}
.serviceBox:hover  .clair{
	display: initial;
}
.serviceBox:hover .bleu{
	display: none;
}

.boxHover{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.serviceBox .boxHover h3{
	color: #638fa5;
	font-size: 24px;
	font-weight: 300;	
	padding: 10px 0 10px 0;
	text-align: center;
}

.serviceBox:hover .boxHover h3{
	color: #75b7cc;
	font-size: 24px;
	font-weight: 300;	
}

.serviceBox p{
	color: #454948;
	font-size: 14px;
	text-align: center;
}


/* RÉALISATION */
.real{
	background-color: #ebeeed;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.real h2{
	padding: 85px 0 25px 0;
}

.real-container { 
	position: relative; 
	width: 960px; 
	margin: 0 auto 100px auto; 
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;	
}
 
#filtres {
	margin-top:50px;
	padding:0;
	list-style:none;
	display: flex;
	justify-content: center;
}

#filtres li {
	float:left;
}
	
#filtres li span {
	display: block;
	padding: 10px 20px;		
	text-decoration:none;
	color:#666;
	cursor: pointer;
	margin-left: 10px;
}
	
#filtres li span.active {
	background: #638fa5;
	color:#fff;
}

#portfolioliste{
	overflow-y: hidden;
	margin-top: 45px;
}

#portfolioliste .portfolio {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	width:23%;
	margin:1%;
	display:none;
	float:left;
	overflow:hidden;
}

.gf-gallery-inner{
    overflow: hidden;
    position: relative;
}

.gf-gallery-inner::after{
    -webkit-transition: opacity .8s ease .2s;
    transition: opacity .8s ease .15s;
    position: absolute;
    content: '';
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(99, 143, 165, 0.8);
    opacity: 0;
    z-index: 0;
}

.gf-gallery-inner:hover::after{
    opacity: 1;
}

.effect-content{
    position: relative;
}

.effect-content::before{
    content: '';
    display: block;
    background-color: transparent;
    position: absolute;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    top: 50%;
    bottom: 50%;
    left: 25px;
    right: 25px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #fff;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #fff;
}

.effect-content::after{
    content: '';
    display: block;
    background-color: transparent;
    position: absolute;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    top: 25px;
    bottom: 25px;
    left: 51%;
    right: 50%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #fff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #fff;
}

.gf-gallery-inner:hover .effect-content::before{
    top: 25px;
    bottom: 25px;
    opacity: 1;
}

.gf-gallery-inner:hover .effect-content::after{
    left: 25px;
    right: 25px;
    opacity: 1;
}

.zoom-image{
    -webkit-transition: color .5s,opacity 1s,transform .5s;
    -moz-transition: color .5s,opacity 1s,transform .5s;
    -ms-transition: color .5s,opacity 1s,transform .5s;
    -o-transition: color .5s,opacity 1s,transform .5s;
    transition: color .5s,opacity 1s,transform .5s;
    top: 0;
    margin-right: -17.5px;
    margin-bottom: -17.5px;
    position: absolute;
    display: block;
    color: #fff;
    font-size: 14px;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
	z-index: 2222222;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	flex-direction: column;
	text-align: center;
}

.gf-gallery-inner:hover .zoom-image{
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.zoom-image span{
	color: white;
	font-weight: 500;
}

.zoom-image:hover{
	color: white;
	font-weight: 700;
	text-decoration: none;
}

.placeholder-image{
    background-color: #E0E8EE;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

#agrivegetalImg{
	background-image: url("../images/Portfolio/Web/Agrivegetal/Agrivegetal.jpg");
    display: block;
}

#polaImg{
	background-image: url("../images/Portfolio/Vidéo/Polaroid/Polaroid.jpg");
    display: block;
}

#astrophotoForetOrientImg {
	background-image: url("../images/Portfolio/Photo/Astrophoto\ -\ Lac\ de\ la\ Forêt\ d\'Orient/astrophoto-lac-foret-orient.jpg");
    display: block;
}

#photoTroyesNoelImg {
	background-image: url("../images/Portfolio/Photo/Troyes\ Noël/troyes-noel.jpg");
    display: block;
}

#photoTroyesCityImg {
	background-image: url("../images/Portfolio/Photo/Troyes\ Ville/troyes-city.jpg");
    display: block;
}

#steedFastImg {
	background-image: url("../images/Portfolio/Design/SteedFast/steedfast.jpg");
    display: block;
}

#cvAppImg {
	background-image: url("../images/Portfolio/App/CVApp/cvapp.jpg");
    display: block;
}

#libertyTravelImg {
	background-image: url("../images/Portfolio/App/LibertyTravel/libertytravel.jpg");
    display: block;
}

#photoIledYeuImg {
	background-image: url("../images/Portfolio/Photo/Ile\ d\'Yeu/ile-yeu.jpg");
    display: block;
}

.placeholder-image::before{
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 75%;
}

.placeholder-image::after{
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
	background-color: rgba(99, 143, 165, 0.7);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.placeholder-image:hover .placeholder-image::after{
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}

.container:after { 
	content: "\0020"; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
	height: 0;
}
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}


/* CONTACT */
.contact{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-bottom: 80px;
	background-color: #f6fbfa;
}

.contact h2{
	padding: 85px 0 10px 0;
}

.contact p{
	color: #454948;
	text-align: center;
}

#formulaire{
	margin: 5vw 0 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

input::placeholder, textarea::placeholder{
	color: #454948;
	font-size: 15px;
}

#nom, #prenom, #email{
	width: 35vw;
	background-color: transparent;
	border: none;
	margin-bottom: 3vw;
	border-bottom: 1px solid  #75b7cc;
	padding: 0.5vw 0 0.5vw 0.5vw;
	color: #454948;
	font-size: 15px;
}

textarea{
	width: 35vw;
	height: 100px;
	margin-bottom: 3vw;
	border: none;
	border-bottom: 1px solid  #75b7cc;
	background-color: transparent;
	color: #454948;
	padding: 0.5vw 0 0.5vw 0.5vw;
}

#boutonenvoyer input{
	color: white;
	background-color: #638fa5;
	border: none;
	padding: 13px 30px 13px 30px;
	transition: 0.3s;
	font-size: 16px;
}

#boutonenvoyer input:hover{
	background-color: #454948;
}

.formulairevalide{
	color: #454948;
	padding-top: 35px;
}

/* FOOTER */
footer{
	width: 100%;
	background-color: #638fa5;
}

footer .footer-haut{
	padding: 5vw 0 5vw 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-logo{
	width: 40vw;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.footer-infos{
	width: 40vw;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.footer-infos a{
	color: white;
	text-decoration: none;
	padding: 10px 35px; 
}

.infos-texte #tel{
	display: flex;
    justify-content: flex-start; 
    align-items: center; 
}

.infos-texte #tel:before{
	content: '';
}

.infos-texte #tel::before{
	content: '\e806';
	font-family: 'fontello';
	color: white;
	font-size: 20px;
	margin-right: 14px;
}

.infos-texte #mail{
	display: flex;
    justify-content: flex-start; 
    align-items: center; 
}

.infos-texte #mail:before{
	content: '';
}

.infos-texte #mail::before{
	content: '\f0e0';
	font-family: 'fontello';
	color: white;
	font-size: 20px;
	margin-right: 10px;
}

.footer-reseaux{
	margin-top: 25px;
}

.footer-reseaux a{
	margin-left: 15px;
}

footer .footer-bas {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 1vw;
	text-align: center;	
}

footer .footer-bas p, footer .footer-bas a{
	color: white;
	text-decoration: none;
}

/*************** HEADER AUTRES PAGES *******************/
header{
    background-color: #f6fbfa;
}

.headerPages{
    width: 100%;
    height: 350px;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 80px;
}

.headerPages .overlayHeader{
    height: 350px;
    background-color: rgba(99, 143, 165, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
    flex-direction: column;
}

.headerPages .overlayHeader h1{
    color: white;
    font-weight: 500;
}

.headerPages .overlayHeader p{
    color: rgb(238, 238, 238);
    margin-top: 5px;
}

#headerMentions{
    background-image: url("../images/Header-img/header-mentions.jpg");
}

#headerPola{
	background-image: url("../images/Header-img/Réalisations/Vidéo/Polaroid/bandeau-header.jpg");
}

#headerAgri{
	background-image: url("../images/Header-img/Réalisations/Développement/Agrivegetal/bandeau-header.jpg");
}

#headerAstrophotoForet{
	background-image: url("../images/Header-img/Réalisations/Photo/Astrophoto\ -\ Lac\ de\ la\ Forêt\ d\'Orient/bandeau-header.jpg");
}

#headerPhotoNoelTroyes{
	background-image: url("../images/Header-img/Réalisations/Photo/Troyes\ -\ Noël/bandeau-header.jpg");
}

#headerPhotoTroyesCity{
	background-image: url("../images/Header-img/Réalisations/Photo/Troyes\ -\ Ville/bandeau-header.jpg");
}

#headerSteedFast{
	background-image: url("../images/Header-img/Réalisations/Design/SteedFast/bandeau-header.jpg");
}

#headerCVApp {
	background-image: url("../images/Header-img/Réalisations/App/CVApp/bandeau-header.jpg");
}

#headerLibertyTravel {
	background-image: url("../images/Header-img/Réalisations/App/LibertyTravel/bandeau-header.jpg");
}

#headerIleYeu {
	background-image: url("../images/Header-img/Réalisations/Photo/Ile\ d\'Yeu/bandeau-header.jpg");
}

/*************** MENTIONS LÉGALES ***************/
.mentions{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 5% 0%;
	background-color: #f8fcfb;
}

.conteneurMentions{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sectionInfosSite{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.sectionInfosSite .hebergementSite, .sectionInfosSite .realSite{
    width: 45%;
}

.mentions h2{
    padding-bottom: 15px;
}

.realSite a{
    text-decoration: none;
    color: #638fa5;
}

.sectionProprietes, .sectionResponsabilite, .sectionCookies{
    margin-top: 5%;
}

.sectionProprietes p, .sectionResponsabilite p, .sectionCookies p{
    text-align: justify;
}

/*************** AUTRES PAGES - TRAVAUX ***************/
.travaux{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 5%;
	background-color: #f6fbfa;
}

.travaux-explication{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;	
	flex-direction: column;
}

.travaux-explication h2{
	margin: 9% 0 5% 0;
}

/* PROJETS */
.projet-explication{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 5% 0;
	width: 80vw;
}

.projet-explication .texte-travaux, .projet-explication .img-travaux{
	width: 45%;
}


.astroLac .texte-travaux{
	width: 100%;
}

.projet-explication .img-travaux img{
	border-radius: 5px;
	width: 85%;
}

.projet-explication .logo-projects img{
	width: 30%;
}

.projet-explication .logo-projects{
	display: flex;
    justify-content: center;
    align-items: center;
}

.projet-explication .texte-travaux .travaux-title{
	display: flex;
	align-items: center;
}

.projet-explication .texte-travaux .travaux-title h3, .projet-resultat h3{
	padding-bottom: 5%;
}

.projet-explication .texte-travaux p{
	text-align: justify;
}

.projet-explication .texte-travaux a{
	color: #638fa5;
	text-decoration: none;
	transition: 0.3s;
}

.projet-explication .texte-travaux a:hover{
	color: #75b7cc;
	transition: 0.3s;
}

.projet-explication .img-travaux{
	margin: auto;
}

.projet-img-diapo{
	margin: 55px 0;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-column-gap: 50px;
	grid-row-gap: 50px;
}

.projet-img-diapo .image-item{
	width: 300px;
	cursor: pointer;
}

.projet-resultat{
	width: 80vw;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

.projet-resultat p{
	margin: 0% 0 2% 0;
}

.projet-resultat a{
	margin-top: 3%;
	margin-left: 0;
}

/* SLIDER */
.img-window {
	width: 100vw;
	height: 100vh;
	background-color: rgba(99, 143, 165, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.popup-img {
	max-height: 80vh;
	max-width: 80vw;
	z-index: 200;
}

.img-btn-next, .img-btn-prev {
	display: block;
	padding: 8px 30px;
	position: fixed;
	top: 47vh;
	z-index: 500;
	cursor: pointer;
	right: 0;
}

.img-btn-next span, .img-btn-prev span {
	font-size: 2rem;
	color: white;
}

.img-btn-prev {
	left: 0;
	right: auto;
}

/*************************************************** RESPONSIVE ********************************************/
@media screen and (max-width: 1030px){
	/* PROJETS */
	.projet-img-diapo{
		grid-template-columns: auto auto;
	}
}

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

	/** ACCUEIL **/
	h1{
		font-size: 55px !important;
		text-align: center;
	}
	
	.accueil{
		background-position: center;
	}
	.accueil p{
		font-size: 17px;
	}
	
	#scrollanimation{
		left: 48.5%;
		width: 4px;
		height: 23px;
		padding: 9px;
	}

	/** A PROPOS **/
	.photodescri{
		width: 30vw;
    	height: 45vw;
	}

	.photodescri:hover .overlayapropos{
		width: 30vw;
		height: 45vw;
	}
		
	.aproposTexte h2{
		margin-top: 35px;
	}

	.lienApropos, .projet-resultat a{
		width: auto;
	}

	.lienApropos a, .projet-resultat a{
		padding: 13px 20px 13px 20px;
	}

	/** REALISATION **/
	.real-container {
		width: 768px; 
	}

	/** CONTACT **/
	.contact{
		padding-bottom: 60px;
	}

	textarea{
		width: 45vw;
		height: 120px;
		margin-bottom: 8vw;
	}

	#nom, #prenom, #email{
		width: 45vw;
		margin-bottom: 5vw;
	}

	/*************** AUTRES PAGES - TRAVAUX ***************/
	.projet-explication .texte-travaux {
		width: 48%;
	}

	.astroLac .texte-travaux {
		width: 100%;
	}
			
	.projet-explication .img-travaux img{
		width: 100%;	
	}

}

@media only screen and (max-width: 767px) {

	/** ACCUEIL **/
	h1{
		font-size: 50px !important;
	}
	
	.accueil p{
		font-size: 16px;
	}
	
	#scrollanimation{
		left: 47.5%;
	}

	/** A PROPOS **/
	.apropos{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.aproposphoto, .aproposTexte{
		width: 100%;
	}

	.apropos .trait, .travaux .trait{
		height: 40px;
	}

	/** SERVICES **/
	.servicesDiv{
		flex-direction: column;
	}

	.box1{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 90%;
	}
	
	.box2{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
	}

	.box1 .serviceBox{
		width: 30vw;
	}

	.box1 .serviceGrandebox{
		width: 40vw;
	}

	.box2 .serviceBox{
		width: 50vw
	}

	.box2 .serviceGrandebox{
		width: 60vw;
	}

	/** REALISATION **/
	.real-container { 
		width: 100%; 
	}
	
	#portfolioliste .portfolio {
		width:48%;
		margin:1%;
	}

	/** CONTACT **/
	textarea{
		width: 65vw;
		height: 125px;
		margin-bottom: 10vw;
	}

	#nom, #prenom, #email{
		width: 65vw;
		margin-bottom: 8vw;
	}

	/** FOOTER **/
	footer .footer-haut{
		display: flex;
		flex-direction: column;
		padding: 5vw 0 2vw 0;
	}

	.footer-logo{
		width: 100%;
		padding-bottom: 20px;
	}

	.footer-infos{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.infos-texte #tel, .infos-texte #mail{
		justify-content: center;
	}

	.footer-reseaux{
		margin-top: 15px;
	}

	footer .footer-bas p{
		padding-bottom: 8px;
	}

	/* MENTIONS LÉGALES */
	.headerPages .overlayHeader h1{
        text-align: center;
    }

    .conteneurMentions{
        width: 90%;
    }   
    
    .sectionInfosSite{
        width: 100%;
        flex-direction: column;
    }

    .sectionInfosSite .hebergementSite, .sectionInfosSite .realSite{
        width: 100%;
        margin-top: 5%;
	}
	
	/*************** AUTRES PAGES - TRAVAUX ***************/
	.travaux-explication h2{
		margin-top: 11%;
	}
	/*** POLAROID ***/
	.projet-explication{
		flex-direction: column;
		padding: 3% 0 5% 0;
		width: 80vw;
	}
	
	.projet-explication .img-travaux{
		margin-top: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.projet-explication .texte-travaux, .projet-explication .img-travaux{
		width: 80vw;	
	}
	
	.projet-explication .img-travaux img{
		width: 80%;
	}

	.projet-img-diapo{
		grid-template-columns: auto;
	}

	/* POPUP */
	.img-btn-next, .img-btn-prev {
		padding: 8px 10px;
	}

	.img-btn-next span, .img-btn-prev span {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 480px){
	/** ACCUEIL **/
	h1{
		font-size: 45px !important;
	}
		
	#scrollanimation{
		left: 46.8%;
		width: 4px;
		height: 18px;
		padding: 8px;
	}

	/** A PROPOS **/
	.apropos{
		padding-bottom: 0;
	}
	.lienApropos{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.lienApropos a{
		margin-bottom: 15px;
	}

	.aproposTexte h2 {
		margin-bottom: 20px;
		font-size: 32px;
	}

	/** SERVICES **/
	.servicesTitle h2{
		font-size: 32px;
	}

	.servicesDiv{
		flex-direction: column;
	}
	
	.box1{
		justify-content: center;
		flex-direction: column;
	}
	
	.box1 .serviceBox{
		width: 50vw;
	}
	
	.box1 .serviceGrandebox{
		width: 80vw;
	}
	
	.box2 .serviceBox{
		width: 50vw
	}
	
	.box2 .serviceGrandebox{
		width: 80vw;
	}

	/** REALISATION **/
	.real h2{
		text-align: center;
		padding: 50px 0 10px 0;
		font-size: 32px;
	}

	.container {
		width: 70%;
	}

	#portfolioliste{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	#portfolioliste .portfolio{
		width: 90%;
	}
	
	.clearfix{
		display: flex;
    	flex-direction: column;
    	justify-content: center;
		align-items: center;
		margin-top: 15px !important;
	}

	/** CONTACT **/
	.contact h2{
		font-size: 32px;
	}

	.contact{
		padding-bottom: 40px;
	}

	textarea{
		width: 75vw;
		margin-bottom: 13vw;
	}

	form{
		margin-top: 20px;
	}

	#nom, #prenom, #email{
		width: 75vw;
		margin-bottom: 10vw;
	}

	/*************** AUTRES PAGES - TRAVAUX ***************/
	.travaux-explication h2{
		margin-top: 15%;
	}

	/* POPUP */
	.popup-img {
		max-height: 90vh;
    	max-width: 90vw;
	}

	.img-btn-next {
		padding: 8px 0px;
	}

	.img-btn-prev {
		padding: 8px 5px;
	}

	.img-btn-next span, .img-btn-prev span {
		font-size: 1rem;
	}
}

@media screen and (max-width: 380px){
	/* PROJETS */
	.projet-img-diapo img{
		width: 275px;
	}
}