/* ***************************************** */
/* ***************************************** */
	/* Feuille de style du porfolio  */
/* ***************************************** */
/* ***************************************** */

/* ******** Balises ******** */
html {
	height:100%;
	overflow:hidden;
}
body {
	height:100%;
}

nav {
	opacity:0;
	font-family:"Quattrocento","Latin";
	padding-bottom:31px; /* Logo height = 62px -> depasse de la motié*/
	
	position:relative;
	z-index:10;
	background:white;
	
	transition:opacity 0.8s ease 0s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes lancement {
    from {opacity: 1;}
    to {opacity: 0;}
}
@keyframes lancement {
    from {opacity: 1;}
    to {opacity: 0;}
}
nav .content_nav {
	padding:10px;
	padding-bottom:5px;
	border-bottom: 1px dotted rgb(80,80,80);
}
nav:hover {
	opacity:1;
}

nav .content_nav .retour {
	text-align:center;
}
nav .content_nav .nom_portfolio {
	word-break: keep-all;
	display:block;
}
nav .content_nav .n_page {
	margin-top:10px;
	list-style-type:none;
}
nav .content_nav .n_page li {
	display:inline-block;
}
nav .content_nav .wrap_logo {
	text-align:center;
	height:0px;
}
nav .content_nav .logo {
	position:relative;
	top:-26px; /* Logo height = 62 px, -> remonte de motié = -31px, padding de +5px -> -26px */
}

.actif {
	color:rgb(0,0,0);
	text-decoration:underline;
	word-break: keep-all;
}
.actif:hover {
	color:rgb(0,0,0);
	text-decoration:underline;
	word-break: keep-all;
}

footer{
	text-align:center;
	font-family:"Quattrocento","Latin";
	font-style:italic;
	position:absolute;
	bottom:5px;
	width:100%;
	background:white;
	border-top:1px solid rgb(220,220,220);
	padding-top:5px;
	opacity:0;
	
	transition:opacity 0.8s ease 0s;
}
footer:hover {
	opacity:1;
}
/* ******** Classes ******** */
.container {
	padding:0;
	margin:0;
	height:100%;
}
.container-fluid {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
.row {
	width:100%;
	margin:0;
	padding:0;
}

.flecheGauche a {
	display:block;
	width:15%;
	opacity:0.1;
	position:absolute;
	left:0;
	top:0%;
	height:95%;
	padding-top:40%;
	text-align:center;
	transition:opacity 0.8s ease 0s;
	font-size:2em;
}
.flecheDroite a {
	display:block;
	width:15%;
	opacity:0.1;
	position:absolute;
	right:0;
	top:0%;
	height:95%;
	padding-top:40%;
	font-size:2em;
	text-align:center;
	transition:opacity 0.8s ease 0s;
}

.flecheGauche:hover a{
	opacity:1;
	color:red;
}
.flecheDroite:hover a{
	opacity:1;
	color:green;
}


/* ******** Id ******** */
#wrapper_img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	text-align:center;
}
#img_affichee {
	max-width:100%;
	max-height:100%;
	
	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
	transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
	
	padding:30px;
}
#reseaux {
	text-align:left;
}

/* ****** Responsive ****** */
@media screen and (max-width: 767px) { /* Portable - xs */
}
@media (min-width: 768px) { /* Tablette - sm */
}
@media (min-width: 992px) { /* Netbook - md */
}
@media (min-width: 1200px) { /* Ordinateur - lg */
}