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

body
{
  margin:0;
  padding:0;
}

@font-face {
    font-family: 'dolce_vitaregular';
    src: url('dolce_vita-webfont.eot');
    src: url('dolce_vita-webfont.eot?#iefix') format('embedded-opentype'),
         url('dolce_vita-webfont.woff2') format('woff2'),
         url('dolce_vita-webfont.woff') format('woff'),
         url('dolce_vita-webfont.ttf') format('truetype'),
         url('dolce_vita-webfont.svg#dolce_vitaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*== Sections ==*/
section h1
{
	padding:10px 100px 50px 100px;
	text-align:center;
	color:white;
	border-top:1px solid red;
	margin:0;
	}

h2
{
	padding: 0;
	text-align:center;
	color:white;
	margin:0;
	font-family: 'dolce_vitaregular';
	letter-spacing: 3px;
	}
	
section:nth-child(even) h1 {background:#222;} /*on différencie la couleur 1 section sur 2*/

#mysect1
{
  background: url(LePhenix.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  min-height: 100vh;
}

#mysect1 h1
{
 padding: 10px 100px 20px 100px;
}

.thumb
{
	display:block;
	float:left;
	margin-left:30px;
	margin-bottom:30px;
}

.boitethumbs
{
	padding-top:20px;
	padding-right:20px;
	padding-bottom:50px;
	background:#222;
	border-bottom: 1px solid #444;
}

.lastboitethumbs
{
	padding-top:20px;
	padding-right:20px;
	padding-bottom:50px;
	background:#222;
}

.espace
{clear:both;}

#mysect3
{
  background:url(square.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  min-height: 100vh;
  position:relative;
  text-align:center;
  border-top:1px solid red;
}

#mysect3 h1
{
	width:600px;
	margin:auto;
	background: #333;
	border-radius: 0 0 20px 20px;
	border-top:none;
	border-right:1px solid red;
	border-bottom:1px solid red;
	border-left:1px solid red;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
}

#mysect3 footer
{
	background: #222;
	border-top: 1px solid #FF001B;
	position:absolute; bottom: 0;
	display:block;
	height:auto;
	width:100%;
	text-align:center;
}

footer ul
{
	list-style:none;
	padding-top:5px;
	padding-bottom:5px;
}

footer ul li
{
	display:inline;
	padding-left: 25px;
	padding-right: 25px;
	font-family: 'dolce_vitaregular';
	color: #CCC;
	font-size:1.2em;

}

li a
{
	text-decoration:none;
	color:#CCC;
}

li a:hover
{
	color:#FF001B;
}

/********* Superposition simple de texte sur une image *******/
/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Image originale */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}
/* Texte original */
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 font-family: 'dolce_vitaregular'; line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

/********* Hover image et texte *******/
/* Overlay */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
}

/********* Hover background et texte uniquement *******/
.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}



/*== V nav ==*/
#op-verticalnav {position:fixed; top:0; right:0; left: auto;height: 100%;display:table}
#op-verticalnav .op-sectionlist {height:100%; text-align:center; display:table-cell; vertical-align:middle}
#op-verticalnav .op-v-item {display:block}
#op-verticalnav .justify-height {}
#op-verticalnav .op-v-link {display:block; margin:20px 0}
#op-verticalnav .v-marker {width:15px; height:15px; border-radius:50%; background-color:rgba(255,0,27,.4); display:inline-block; vertical-align:middle; margin-bottom:-2px; margin-right:10px;border: 1px solid #e1001b;}
#op-verticalnav .op-v-link:hover .v-marker, #op-verticalnav .op-v-item .op-v-link.active .v-marker {background-color:rgba(255,0,27,1); }
#op-verticalnav .op-v-itemdesc {display:inline-block; font-size:14px; position:absolute; white-space:nowrap; line-height:normal; padding:0 34px 0 0;vertical-align:middle}
#op-verticalnav .op-v-itemdesc .op-v-itembg{display:inline-block; background-color:rgba(0,0,0,.5); color:#fff; padding:4px 10px 6px 10px; border:1px solid rgba(160,160,160,.2); border-radius:4px; }
#op-verticalnav .op-v-link:hover .op-v-itemdesc {right:0px; }