@font-face {
    font-family: "HK Grotesk bold";
    src:url("../fonts/webfontkit/hkgrotesk-boldlegacy-webfont.eot") format("eot"),
		url("../fonts/webfontkit/hkgrotesk-boldlegacy-webfont.svg") format("svg"),
		url("../fonts/webfontkit/hkgrotesk-boldlegacy-webfont.ttf") format("ttf"),
		url("../fonts/webfontkit/hkgrotesk-boldlegacy-webfont.woff") format("woff"),
		url("../fonts/webfontkit/hkgrotesk-boldlegacy-webfont.woff2") format("woff2");
}
@font-face {
	font-family: "HK Grotesk light";
	src:url("../fonts/webfontkit/hkgrotesk-lightlegacy-webfont.eot") format("eot"),
		url("../fonts/webfontkit/hkgrotesk-lightlegacy-webfont.svg") format("svg"),
		url("../fonts/webfontkit/hkgrotesk-lightlegacy-webfont.ttf") format("ttf"),
		url("../fonts/webfontkit/hkgrotesk-lightlegacy-webfont.woff") format("woff"),
		url("../fonts/webfontkit/hkgrotesk-lightlegacy-webfont.woff2") format("woff2");
}
@font-face {	
	font-family: "HK Grotesk regular";
	src:url("../fonts/webfontkit/hkgrotesk-regularlegacy-webfont.eot") format("eot"),
		url("../fonts/webfontkit/hkgrotesk-regularlegacy-webfont.svg") format("svg"),
		url("../fonts/webfontkit/hkgrotesk-regularlegacy-webfont.ttf") format("ttf"),
		url("../fonts/webfontkit/hkgrotesk-regularlegacy-webfont.woff") format("woff"),
		url("../fonts/webfontkit/hkgrotesk-regularlegacy-webfont.woff2") format("woff2");
}
@font-face {
	font-family: "HK Grotesk medium";
	src:url("../fonts/webfontkit/hkgrotesk-mediumlegacy-webfont.eot") format("eot"),
		url("../fonts/webfontkit/hkgrotesk-mediumlegacy-webfont.svg") format("svg"),
		url("../fonts/webfontkit/hkgrotesk-mediumlegacy-webfont.ttf") format("ttf"),
		url("../fonts/webfontkit/hkgrotesk-mediumlegacy-webfont.woff") format("woff"),
		url("../fonts/webfontkit/hkgrotesk-mediumlegacy-webfont.woff2") format("woff2");
}
@font-face {
	font-family: "HK Grotesk semibold";
	src:url("../fonts/webfontkit/hkgrotesk-semiboldlegacy-webfont.eot") format("eot"),
		url("../fonts/webfontkit/hkgrotesk-semiboldlegacy-webfont.svg") format("svg"),
		url("../fonts/webfontkit/hkgrotesk-semiboldlegacy-webfont.ttf") format("ttf"),
		url("../fonts/webfontkit/hkgrotesk-semiboldlegacy-webfont.woff") format("woff"),
		url("../fonts/webfontkit/hkgrotesk-semiboldlegacy-webfont.woff2") format("woff2");
}

/******** reset ********/

* > [class*='col-'] { 
	margin: 0px; 
	padding: 0px;
}

html, body{
	height: 100.1%;
	min-height: 100%;
	position: relative;
}

#principal{
	padding: 0px;
}

a:link, a:visited, a:active{
  font-family: "HK Grotesk light";
  color: black;
}
p a:hover{
  background-color: black;
  color: white;
  text-decoration: none;
}

/**************************************
*********** PARTIE CENTRALE ***********
***************************************/

#centre{
	min-height: 100%;
	padding-bottom:45px;
	position: absolute;
}

.photographie {
	width:100%;
	height:auto;
}

.textes {
	display: inline-block;
	float: left;
	padding-top:100px;
	padding-left:50px;
	padding-bottom:40px;
	word-wrap: break-word;
	-webkit-hyphens: auto;
  	-moz-hyphens: auto;
  	-ms-hyphens: auto;
  	-o-hyphens: auto;
  	hyphens: auto;
}

.textes2 {
	display: inline-block;
	float: left;
	padding-top:40px;
  padding-right: 40px;
	word-wrap: break-word;
	-webkit-hyphens: auto;
  	-moz-hyphens: auto;
  	-ms-hyphens: auto;
  	-o-hyphens: auto;
  	hyphens: auto;
}

.premiere-image{
	margin-top:130px;
}
	
h1 {
	font-family: "HK Grotesk light";
	font-size:63px;
}

p {
	font-family: "HK Grotesk bold";
	font-size:18px;
}

.gouttieres {
	padding-bottom:1px;
	padding-right:1px;
}

.contact{
  font-family: "HK Grotesk light";
  padding-top: 20px;
  padding-bottom: 20px;
}

/******** boutons suivant et précédent ********/
	
.suivant, .precedent {
	padding-top:32px;
	font-family: "HK Grotesk medium";
	font-size:11px;
	color:black;
	z-index:100;
}	

.suivant{
	text-align:right;
}	

.glyphicon-menu-left, .glyphicon-menu-right{
		font-size:23px;
		padding-top:4px;
}
	
/**************************************
************ PARTIE GAUCHE ************
***************************************/

#gauche{
	margin-top:0px;
	padding-left: 50px;
}

#logo{
	margin-top:32px;
	width:125px;
}

.navbar-brand{
	float:none;
}

#separateur{
	height:5.3px;
	background-color:#32FFDC;
	width:33px;
	margin-top:26px;
	margin-bottom:17px;
}

.navbar-default {
    background-color: white;
    border-color: white;
}

.navbar-fixed-left {
	width: 125px;
	position: fixed;
	border-radius: 0;
	height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
	float: none;  /* Cancel default li float: left */
}

#menu{
	font-size: 23px;
	color: black;
	font-family: "HK Grotesk medium";
	line-height: 26px;
}

#menu li{
	margin-bottom: 9px;
}

#menu a:link, a:active, a:visited, a:focus {
  color: #000;
  text-decoration: none;
  font-family: "HK Grotesk medium";
} 

#menu a:hover {
	color: #fff;
	text-decoration: none;
	background-color:black;
}

#menu a.highlight{
	background-color:black;
	color:white;
}

/*********** réseaux sociaux **********/

#rs{
	position: fixed;
	bottom: 0;
	padding-bottom: 15px;
	color: black;
}

#rs a:link{
 	color: #000;
 	text-decoration: none;
    margin-right: 20px;
    font-size: 20px;
}

#rs a:hover{
	color: RGB(90,90,90);
 	text-decoration: none;
}

#rs a:visited {
	color: #000;
	text-decoration: none;
}

#rs a:active {
	color: #fff;
	text-decoration: none;
}

.fab {
	font-size: 20px;
	letter-spacing: 20px;
}

/********** pied de page copyright **********/

#copyright {
	font-family: "HK Grotesk bold", "sans-serif";
	font-size: 10px;
	position: absolute;
	bottom: 0;
	padding-bottom: 15px;
	padding-top:10px;
}

/***************************************
************ TRI DES IMAGES ************
***************************************/

#tri{
	position: fixed;
	right: 0px;
	font-family: "HK Grotesk medium";
	padding: 15px 0px 15px 0px;
	-webkit-transform-origin: right bottom;
	-webkit-transform: rotate(-90deg);
	transform-origin: right bottom;
	transform: rotate(-90deg);
}

#tri li {
	list-style:none;
	width: auto;
	float:right;
	margin-left: 15px;
	font-family: "HK Grotesk medium";
	font-size:13px;
}

.logo, .identites, .affiches, .webdesign, .edition, .divers {
	display: inline-block;
	float: left; 
	width:33.33%;
	margin:0px 0px;
	height:auto;
}

.pointer {
	cursor: pointer;
}

#check-identites:checked ~ #tag-identites {
	background-color: black;
	color: white;
}
#check-logo:checked ~ #tag-logo {
	background-color: black;
	color: white;
}
#check-edition:checked ~ #tag-edition {
	background-color: black;
	color: white;
}
#check-divers:checked ~ #tag-divers {
	background-color: black;
	color: white;
}
#check-affiches:checked ~ #tag-affiches {
	background-color: black;
	color: white;
}
#check-tous:checked ~ #tag-tous {
	background-color: black;
	color: white;
}

.check-invisible {
	display:none;
}

/***************************************
************** FORMULAIRE **************
***************************************/

.form-area{
	font-family: "HK Grotesk semibold";
}

.form-control{
	background-color: black;
	border-radius: 0px;
	font-size: 18px;
	color: #32FFDC;
	height:50px;
	margin-bottom:20px;
}

.btn {
    color: black;
    background-color: #32FFDC;
    border-color: white;
	width: 30%;
	height: 50px;
	border-radius: 0px;
	font-size: 18px;
}

.btn-primary:hover {
    color: white;
    background-color: #32FFDC;
    border-color: white;
}

/**************************************
********** SURVOL DES IMAGES **********
***************************************/

/* Conteneur principal */

.overlay-image {
	 position: relative;
	 width: 100%;
}

.overlay-image .text {
	font-family: "HK Grotesk medium";
	color: #32FFDC;
	font-size: 40px;
	line-height: 40px;
	text-align: left;
	position: absolute;
	padding:30px;
	width: 100%;
}

/* Overlay */

.overlay-image .hover {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .2s ease; 
}

/* Apparition overlay sur passage souris */

.overlay-image:hover .hover {
	opacity: 1;
}

/* Hover background et texte uniquement */

.overlay-image .normal {
	transition: .2s ease;
}

.overlay-image:hover .normal {
	opacity: 0;
}

/**************************************
************ PETITS ECRANS ************
***************************************/

@media (max-width: 1300px) {
	#logo{
		width:70px;
	}
	
	#menu{
		font-size: 17px;
		line-height: 22px;
	}
	
	#gauche{
		padding-left: 45px;
	}
	
	.fab {
		font-size: 25px;
		letter-spacing: 10px;
	}
	
	.premiere-image{
		margin-top:85px;
	}
	
	.textes{
		padding-top:60px;
	}	
}

/**************************************
************** TABLETTES **************
***************************************/

@media (max-width: 992px) {
	
	.logo, .identites, .affiches, .webdesign, .edition, .divers {
		width:50%;
	}
	
	#menu, #separateur{
      	display: none;
   	}
	
	#logo{
		width:60px;
		margin-top:100px;
	}
	
	.photographie {
		width:100%;
	}
	
	#rs a {
		display:block;
		padding-top: 10px;
	}
	
	.fab {
		font-size: 30px;		
	}	
	
	#gauche{
		padding-left: 30px;
	}
	
	#tri{
		padding: 5px 0px 5px 0px;
	}
	
	.textes, .textes2 {
		width:100%;
		padding-top:50px;
		padding-left:0px;
	}
	
	h1 {
		font-size: 50px;
	}
  
  li a:link, li a:active, li a:visited, li a:focus {
      color: white;
      font-family:"HK Grotesk medium"; 
  }
}


/**************************************
************* SMARTPHONES *************
***************************************/

@media (max-width: 768px) {
	.logo, .identites, .affiches, .webdesign, .edition, .divers {
		width:100%;
	}
	
	#menu, #rs, #separateur, #droite {
      	display: none;
   	}
	
	#logo{
		margin-top:0px;
		width:65px;
		text-align:center;
	}

	#gauche{
      margin-top:20px;
      margin-left:42%;
      padding-left:0px;
      width: 10%;
	}

	.textes, .textes2 {
		padding-top: 20px;
		padding-left:30px;
		padding-right:30px;
	}
	
	h1 {
		font-size: 40px;
	}
	
	p {
		font-size: 16px;
	}
	
	.navbar-fixed-left {
	  	position: relative;
	}
	
	#centre{
		margin-top:100px;
	}
	
	.overlay-image .hover{
 		width: 100%;
	}
	
	#copyright {
		padding-left:30px;
		margin-top:50px;
	}
	
	.form-area{
		margin-left: 30px;
		margin-right:30px;
	}
		
	.suivant, .precedent {
		display:none;
	}
	
	.premiere-image{
		margin-top:0px;
	}
    
}

/**************************************
************* MENU BURGER *************
***************************************/

@media (min-width: 992px) {
	#menuToggle{
		display:none;
	}
}
@media (min-width: 768px){

	#tri-burger{
		display:none;
	}
}
	
@media (max-width: 992px) {
	
	#burger, #tri-burger{
		height:0px;
	}	
	
	a
	{
	  	text-decoration: none;
	  	color: white;
	  	transition: color 0.3s ease;
	}	
	a:hover
	{
	  	color: #32FFDC;
	  	text-decoration: none;
	}
	a:active
	{
	  	color: #32FFDC;
		text-decoration: none;
	}
	
	#menuToggle
	{
		display: block;
		width: 55px;
		position: fixed;
		top: 30px;
		left: 30px;
		  
		z-index: 1;
		  
		-webkit-user-select: none;
		user-select: none;
	}
	
	#menuToggle input
	{
		display: block;
		width: 55px;
		height: 45px;
		position: absolute;
		top: -7px;
		left: -5px;
		  
		cursor: pointer;
		  
		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */
		  
		-webkit-touch-callout: none;
	}
	
	/* Just a quick hamburger */
	#menuToggle span
	{
		display: block;
		width: 47px;
		height: 4px;
		margin-bottom: 10px;
		position: relative;
		  
		background: #32FFDC;
		border-radius: 0px;
		  
		z-index: 1;
		  
		transform-origin: 4px 0px;
		  
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.55s ease;
	}
	
	#menuToggle span:first-child
	{
		transform-origin: 0% 0%;
	}
	
	#menuToggle span:nth-last-child(2)
	{
		transform-origin: 0% 100%;
	}
	
	/* Transform all the slices of hamburger into a crossmark */
	#menuToggle input:checked ~ span
	{
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
		background: #32FFDC;
	}
	
	/* But let's hide the middle one */
	#menuToggle input:checked ~ span:nth-last-child(3)
	{
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	
	/* Oh yeah and the last one should go the other direction */
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
		transform: rotate(-45deg) translate(0, -1px);
	}
	
	/* Make this absolute positioned at the top left of the screen */
	#burgernav
	{
		position: absolute;
		width: 270px;
		margin: -100px 0 0 -50px;
		padding: 50px;
		padding-top: 125px;
		text-align:left;
		height:2000px;
	  
		background: black;
		opacity:0.8;
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
	  /* to stop flickering of text in safari */ 
		transform-origin: 0% 0%;
		transform: translate(-100%, 0);
	  	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}
	
	#burgernav li
	{
	  padding: 0px;
	  font-size: 30px;
	  font-family: "HK Grotesk regular";
	  text-align:left;
	  line-height:30px;
	  margin-bottom:15px;
	}
  
  #burgernav a.highlight{
	color:#32FFDC;
  }
	
	/* And let's slide it in from the left */
	#menuToggle input:checked ~ ul
	{
	  transform: none;
	}

/**************************************
********* MENU TRI SMARTPHONES *********
***************************************/

	#tri-smartphone
	{
		display: block;
		position: fixed;
		right: 30px;
		top: 25px;

		z-index: 2;
	  
		-webkit-user-select: none;
		user-select: none;
	}
	#tri-smartphone input
	{
	  display: block;
	  width: 55px;
	  height: 45px;
	  position: absolute;
	  top: -7px;
	  left: -5px;
	  
	  cursor: pointer;
	  
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */
	  
	  -webkit-touch-callout: none;
	}
	#tri-smartphone span
	{
	  
	  position: relative;
	  font-size:35px;
	  
	  color: #32FFDC;
	  
	  z-index: 1;
	  
	  transform-origin: 15px 20px;
	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  opacity 0.55s ease;
	}
	
	
	/* Oh yeah and the last one should go the other direction */
	#tri-smartphone input:checked ~ span:nth-last-child(2)
	{
	  transform: rotate(180deg);
	}
	#tri-burger-nav
	{
	  position: absolute;
	  width: 270px;
	  margin: -100px 0 0 -170px;
	  padding: 50px;
	  padding-top: 125px;
	  text-align:left;
	  height:1000px;
	  
	  background: black;
	  opacity:0.8;
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased;
	  /* to stop flickering of text in safari */ 
	  transform-origin: 0% 0%;
	  transform: translate(100%, 0);
	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}
	
	#tri-burger-nav li
	{
	  padding: 0px;
	  font-size: 20px;
	  font-family: "HK Grotesk regular";
	  text-align:left;
	  line-height:20px;
	  margin-bottom:15px;
	}
	
	/* And let's slide it in from the left */
	#tri-smartphone input:checked ~ ul
	{
	  transform: none;
	}
}