/* Score pageRank Google Speed : 92/100 ; A optimiser : Code Javascript - Affichage/Lisibilité Telephone ; Code créé exclusivement par Hugo Vial-Jaime ; code libre d'utilisation */
/* Code CSS non optimisé ; réduction et optimisation de la feuille de style à venir*/
/*reset*/
h1, h2, p, ol,ul {
 margin:0;
 padding:0;
 list-style : none ;
 }
/*Règles générales*/
html
{
height:100%;
background: white url("./img/fond.jpg")no-repeat left bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*video*/
video { 
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
 background: url('./img/fond.jpg') no-repeat;
  background-size: cover;
  volume: 0;
}
.stopfade { 
   opacity: 1;
}
@media screen and (max-width: 500px) { 
  div{width:70%;} 
  #vidpause {visibility: hidden;}
}
@media screen and (max-device-width: 800px) {
  html { background: url("./img/fond.jpg") #000 no-repeat center fixed; }
  #bgvid { display: none; }
  #vidpause {visibility: hidden;}
}
a
{
color:white;
}
h1
{
font-size:16px;
}
h2
{
font-size:14px;
}
body{
width:100%;
margin:10px;
margin: auto;
font-family: monospace;
}
header
{
height:0px;
}
#module
{
margin: auto;
max-width: 960px;
}
#main {
width:100%;
margin:auto;
}
/*Slider*/
	/*-Initialisation des valeurs*/
#SliderRenard {
	position: relative;
	float: left;
	z-index: 3;
	font-size: 0px;
	word-spacing: -1px;
}

#SliderRenard .contenu_slider {
	position:relative;
	width: 500px;
	height: 275px;
	overflow: hidden;
	margin:4px;
}

#SliderRenard .slider {
	position: absolute;
	left:0; top:0;
	width: 500%;
	height: 300px;
	-webkit-animation: slider 15s infinite;
	-moz-animation: slider 15s infinite;
	animation: slider 15s infinite;
}

#SliderRenard figure {
	position:relative;
	padding:0; margin:0;
	background-color: black;
}

figure { 
	display: inline-block;
	margin: 0;
}

	/*-Animation slider*/
@-webkit-keyframes slider {
	0%, 10%, 100%		{ left: 0 }
	15%, 35%		{ left: -100% }
	40%, 65%		{ left: -200% }
	70%, 95%		{ left: -300% }
}
@-moz-keyframes slider {
	0%, 10%, 100%		{ left: 0 }
	15%, 35%		{ left: -100% }
	40%, 65%		{ left: -200% }
	70%, 95%		{ left: -300% }
}
@keyframes slider {
	0%, 10%, 100%		{ left: 0 }
	15%, 35%		{ left: -100% }
	40%, 65%		{ left: -200% }
	70%, 95%		{ left: -300% }
}

	/*-Fig caption : texte_bas*/
		/*--Initialisation des valeurs*/
#SliderRenard figcaption {
	position:absolute;
	padding: 20px 20px; 
	margin:0;
	left:0; right:0; bottom: 0px;
	text-align:center;
	font-size: 18px;
	color: rgb(0, 128, 109);
	background: #000;
	background: rgba(255,255,255,0.8);
	border-top: 1px solid rgb(225,225,225);
	-webkit-animation: anim_legende 15s infinite;
	-moz-animation: anim_legende 15s infinite;
	animation: anim_legende 15s infinite;
}
		/*--Animation*/
@-webkit-keyframes anim_legende {
	0%, 35%, 65%, 100%		{bottom: -55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{bottom: 0px;}
}
@-moz-keyframes anim_legende {
	0%, 35%, 65%, 100%		{bottom: -55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{bottom: 0px;}
}
@keyframes anim_legende {
	0%, 35%, 65%, 100%		{bottom: -55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{bottom: 0px;}
}

	/*-Time Line*/
		/*--Initialisation des valeurs*/
#timeline {
	position: absolute;
	background: #999;
	bottom: 11px;
	left: 25px;
	height: 1px;
	background: rgb(0, 128, 109);
	width: 0;
	-webkit-animation: timeliner 15s infinite;
	-moz-animation: timeliner 15s infinite;
	animation: timeliner 15s infinite;
}
		/*--Animation*/
@-webkit-keyframes timeliner {
	0%, 35%, 65%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 460px;	}
}
@-moz-keyframes timeliner {
	0%, 35%, 65%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 460px;	}
}
@keyframes timeliner {
	0%, 35%, 65%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 460px;	}
}


/*Slides*/
#slides {
				margin: 0 auto;
				float: left;
			}
			
			#slides div {
				float: left;
				height: 241px;
				margin: 10px;
				overflow: hidden;
				position: relative;
				width: 300px;
text-align: initial;
color: chite;
			}
			
			
			
			#slides div img {
				left: 0;
				position: absolute;
				top: 0;
				transition: transform 0.5s ease-in-out;
				-moz-transition: -moz-transform 0.5s ease-in-out;
				-o-transition: -o-transform 0.5s ease-in-out;
				-webkit-transition: -webkit-transform 0.5s ease-in-out;
				width:300px;
				height:241px;
				background-color: rgba(73, 72, 72, 0.75);
			}
			
			#slides div.slide-down:hover img {
				transform: translateX(300px);
				-moz-transform: translateX(300px);
				-o-transform: translateX(300px);
				-webkit-transform: translateX(300px);
			}
			#slides div.slide-left:hover img {
				transform: translateX(-300px);
				-moz-transform: translateX(-300px);
				-o-transform: translateX(-300px);
				-webkit-transform: translateX(-300px);
			}
			
			#slides div.slide-up:hover img {
				transform: translateY(-300px);
				-moz-transform: translateY(-300px);
				-o-transform: translateY(-300px);
				-webkit-transform: translateY(-300px);
			}


/*Classes*/
.html5
{
background-color: rgb(236, 152, 0);
color: white;
line-height: 2!important;
margin-bottom: 0px!important;
}
.css3
{
background-color: rgb(0, 185, 200);
color: white;
line-height: 2!important;
}
.java
{
background-color: #CDB200;
color: white;
width: 40%;
line-height: 2!important;
}
.php
{
background-color: #6082bb;
color: white;
width: 70%;
line-height: 2!important;
}
.photo
{
background-color: #100660;
color: white;
line-height: 2!important;
}
.Illustrator
{
background-color:#4c2400;
line-height: 2!important;
width: 80%;
color: white;
margin-bottom: 0px!important;
}
.inkscape
{
background-color:#C0BBA0;
line-height: 2!important;
width: 80%;
color: white;
}
.wildfire
{
background-color:black;
line-height: 2!important;
width: 60%;
color: white;
}
.Gimp
{
background-color:#4f4939;
line-height: 2!important;
width: 60%;
color: white;
}
.pro, .etudes, .matos
{
background-color:#424242;
line-height: 2!important;
color: white;
}
#slides div p {
				padding: 0 10px;
				font-size: 12px;
				margin-bottom: 5px;
				line-height: 1.4;
			}
/*photographieBox*/
#photographie
{
width:220px;
height:220px;
float:left;
margin: 2px;
position: relative;
}
#photographie.big
{
font-size:20px;
font-weight:bold;
text-transform:uppercase;
text-align:center;
}
#photographie > a > figure> img
{
webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: elevation;
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: elevation;
-moz-transition-property: opacity;
-moz-transition-duration: 1s;
-moz-transition-timing-function: elevation;
transition-property: opacity;
transition-duration: 1s;
}
#photographie > figure > img
{
border: 1px solid rgb(71, 71, 71);
}
#photographie>a>figure>figcaption
{
font-size: 14px;
color: white;
height: 0px;
text-align: center;
font-weight:bold;
}
#photographie p
{
padding: 5px;
font-size:14px;
}

/*Contact*/
#contact
{
border: 1px solid rgb(71, 71, 71);
width:220px;
height:220px;
float:left;
position:relative;
margin: 2px;
font-family: monospace;
font-size:13px;
background:url(img/shine.png);
background-position: -262px 0;
background-color: rgba(0, 128, 109, 0.7);
color: white;
background-repeat: no-repeat;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
}
#contact:hover{
background-position: 200px 0;
}

/*Animation*/
.anim
{
  position: absolute;
  top:150px;
  padding-left: 2px;
  -webkit-animation:spin 2s linear;
  -webkit-animation-fill-mode: both;
  -webkit-transform-origin: 50% 100%;
  -moz-animation:spin 2s linear;
  -moz-animation-fill-mode: both;
  -moz-transform-origin: 50% 100%;
  -ms-animation:spin 2s linear;
  -ms-animation-fill-mode: both;
  -ms-transform-origin: 50% 100%;
  animation:spin 2s linear;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {-webkit-transform: rotate(-2deg) scaleY(1.05);top:150px;}
  35% {-webkit-transform: rotate(2deg) scaleY(1);}
  50% {-webkit-transform: rotate(-2deg);} 
  65% {-webkit-transform: rotate(1deg);} 
  80% {-webkit-transform: rotate(-1deg);}   
  100% {-webkit-transform: rotate(-20deg);}   
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {-moz-transform: rotate(-2deg) scaleY(1.05);top:150px;}
  35% {-moz-transform: rotate(2deg) scaleY(1);}
  50% {-moz-transform: rotate(-2deg);} 
  65% {-moz-transform: rotate(1deg);} 
  80% {-moz-transform: rotate(-1deg);}   
  100% {-moz-transform: rotate(-20deg);}   
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {-ms-transform: rotate(-2deg) scaleY(1.05);top:150px;}
  35% {-ms-transform: rotate(2deg) scaleY(1);}
  50% {-ms-transform: rotate(-2deg);} 
  65% {-ms-transform: rotate(1deg);} 
  80% {-ms-transform: rotate(-1deg);}   
  100% {-ms-transform: rotate(-20deg);}   
}
@-keyframes spin {
  0% {transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {transform: rotate(-2deg) scaleY(1.05);top:150px;}
  35% {transform: rotate(2deg) scaleY(1);}
  50% {transform: rotate(-2deg);} 
  65% {transform: rotate(1deg);} 
  80% {transform: rotate(-1deg);}   
  100% {transform: rotate(-20deg);}   
}

/*Accordéon*/
.accordeon p{
     height:0;
     transition:height 1s ease;
	 padding:5px;
}
.accordeon:hover p{
     height:auto;
}
.accordeon p{
     transform: scaleY(0);
     transform-origin: 50% 0;
     transition:transform 1s ease;
}
.accordeon:hover p{
     transform: scaleY(1);
}
.accordeon {
	 height:70px;
}

/*Social*/

 li.ic_mail{background-image: url(img/setpack_social_066.png); height: 31px; width: 33px; background-position: -99px 50%; }
 li.ic_linkedin{background-image: url(img/setpack_social_066.png); height: 31px; width: 33px; background-position: -165px 50%; }
 li.ic_viadeo{background-image: url(img/setpack_social_066.png); height: 31px; width: 33px; background-position: -195px 50%; }
 li.ic_skype{ height: 31px; width: 33px; margin:none ;  }
 
#SkypeButton_Call_DahuConcept_1_paraElement
 {
 float: left;
 }
#SkypeButton_Call_DahuConcept_1_paraElement > a > img
{
margin: 7px!important;
vertical-align: -27px!important;
}
li.ic_mail, li.ic_linkedin, li.ic_viadeo
{
float: left;
margin: 7px;
margin-bottom:0px;
list-style: none;
width: 30px;
height: 31px;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
li:hover {
	-webkit-opacity: .8;
	-moz-opacity: .8;
	opacity: .8;
	 -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
ul.icon_socials li a {
display: block;
width: 100%;
height: 100%;}

/*Boites*/
#bloc_kit2
{
    display: inline-block;
    width:100px;
    height:100px;
    position: relative;  
	opacity: 0.6;
	margin:5px;
	background-size:cover;
	box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.77);
-moz-box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.3);
transition: width 1s, transform 1s;
-webkit-transition: width 1s, transform 1s;
-ms-transition: width 1s, transform 1s;
-moz-transition: width 1s, transform 1s;
border: 1px solid rgba(37, 37, 37, 1);
}
#bloc_kit2:hover {
    box-shadow: 0px 0px 15px #000000;
transition: width 0.8s, transform 0.8s;
-webkit-transition: width 0.8s, transform 0.8s;
-ms-transition: width 0.8s, transform 0.8s;
-moz-transition: width 0.8s, transform 0.8s;
transform: scale(4);
-webkit-transform: scale(4);
-ms-transform: scale(4);   
-moz-transform: scale(4);
border: 1px solid white;
background-color:white;
opacity: 1;
z-index:2;
}

.pict1:hover,.pict2:hover,.pict5:hover,.pict9:hover
{
width:178px!important;
}
.pict1{
background-image:url("./img/grap_paysage.jpg");
}
.pict2{
background-image:url("./img/renard_deau.jpg" );
}
.pict3{
background-image:url("./img/grap_gaia.jpg" );
}
.pict3:hover
{
width:141px!important;
}
.pict4{
background-image:url("./img/glace_tableau.jpg" );
}
.pict5{
background-image:url("./img/music_tableau.jpg");
background-position: center;
}
.pict6{
background-image:url("./img/zerg_mur.jpg" );
}
.pict7{
background-image:url("./img/logo_webuzzing.jpg" );
}
.pict7:hover{
width:168px!important;
}
.pict8{
background-image:url("./img/logo_matuvu.jpg" );
}
.pict9{
background-image:url("./img/site_lebiologis.jpg" );
}
.pict10{
background-image:url("./img/espaceco.jpg" );
background-position: center;
}
.pict10:hover
{
width:148px!important;
}
.pict11{
background-image:url("./img/laicite.jpg" );
background-position: center;
}
.pict11:hover
{
width:198px!important;
}
#bloc_kit
{
	background-image:url("./img/petitpoint.png" );
    display:inline-block;
    width:100px;
    height:100px;
    position: relative;  
	box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.77);
	-moz-box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.3);
	margin:5px;
	transition: 1s;
	-webkit-transition: 1s;
	-ms-transition: 1s;
	-moz-transition: 1s;
	background-color: rgba(0, 0, 0, 0.3);
	opacity:0.6;
}
/*Images*/
#bloc_kit:hover{
	transition: 1s;
	-webkit-transition: 1s;
	-ms-transition: 1s;
	-moz-transition: 1s;
	background-color: rgba(0, 128, 109, 1);
	opacity:1;
}
.bloc_kit img
{
	-webkit-filter:grayscale(0);
	filter:grayscale(0);
		 }

/*formulaire*/

.titre {
	color:#ffffff;
	font-size:24px;
}

.champtxt
{
  width:300px;
  font-size:16px;
  padding:5px;
  margin:0px;
}
.btn_noir:hover{
	background-color:#000000;
}
.base
{
font-family: 'Shadows Into Light', cursive;
/*border-radius:50px 50px 0px 0px;*/
margin: auto;
box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.7);
transition: background 1.5s;
}	
#contact_form{
background-color: rgba(0, 0, 0, 0.7);
	width:100%;
	height:300px;
	display:none;
	z-index:6;
	margin-bottom: -130px;
}
#contact_form_close{
	color:#ffffff;
	font-weight:500;
	text-align:center;
	padding:10px;
	cursor:pointer;
	font-size: 15px;
	width: 200px;
	max-height: 200px;
	padding-bottom: 100px;
padding-top: 100px;
margin-top: 10px;
margin-bottom:2px;

}
#div2{
background-color: rgba(0, 0, 0, 0.7);
	width:100%;
	height:262px;
	display:none;
	z-index:6;
	margin-bottom: -70px;
}
#div2_close{
	color:#ffffff;
	font-weight:500;
	text-align:center;
	padding:10px;
	cursor:pointer;
	font-size: 13px;
	padding-bottom: 50px;
padding-top: 50px;
max-height: 100px;
width:100px;
	z-index:2;
	margin-top: 5px;
	margin-bottom:2px;
}
#div3{/*Créations*/
background-color: rgba(0, 0, 0, 0.7);
	width:100%;
	height: 230px;
	padding-top: 8px;
	padding-bottom: 9px;
	display:none;
	z-index:6;
	margin-bottom: -90px;
}
#div3_close{
	color:#ffffff;
	font-weight:500;
	text-align:center;
	padding:10px;
	cursor:pointer;
	font-size: 14px;
	width: 140px;
	padding-bottom: 70px;
padding-top: 70px;
max-height: 140px;
margin-top: 8px;
margin-bottom:2px;
}
#div0{/*Presentation*/
background-color: rgba(0, 0, 0, 0.7);
	width:100%;
	height:295px;
	display:none;
	padding-top: 10px;
margin-bottom: -100px;
}
#div0_close{
	color:#ffffff;
	font-weight:500;
	text-align:center;
	padding:10px;
	cursor:pointer;
	font-size: 12px;
	width: 70px;
	padding-bottom: 35px;
padding-top: 35px;
max-height: 70px;
margin-top: 5em;
margin-bottom:6px;
	}

#message
{
width: 80%;
height: 100px;
margin: 20px;
border:none;
}
input {
margin: 10px;
padding: 10px;
border: none;
}
label {
font-family: monospace;
font-size: 17px;
padding:6px;
}
button {
background-color: white;
font-family: monospace;
border: none;
padding: 20px;
-webkit-box-shadow: 0 0 0 3px white, 0 0 6px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 0 3px white, 0 0 6px 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 0 3px white, 0 0 6px 3px rgba(0, 0, 0, .3);
}
#vidpause { 
font-family: monospace;
  width: 100%;
  padding: .6rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1rem;
  background: rgba(255,255,255,0.23);
  box-shadow: none;
  color:#fff;
  transition: background 1.5s;
}
#vidpause:hover { 
background-color: rgba(0, 0, 0, 0.7);
transition: background 1.5s;
}
.base:hover
{
background: rgba(255,255,255,0.23);
transition: background 1.5s;
}
/*Contenu 1*/
	/*Marges*/
#Contenu1 {
background: linear-gradient( white, rgb(197, 197, 197));
height: 280px;
padding : 0 10px
}
#Contenu1 .item {
float: left;
margin: 0 10px;
width: 220px;
}
#Contenu1 .item:first-child {
margin-left: 0;
}
#Contenu1 .item:last-child {
margin-right: 0;
}
#Contenu1 .item h1 {
padding: 20px 0 20px 20px; 
}
#Contenu1 .item p {
padding: 20px 10px 25px;
}
#Contenu1 > article > a > figure > img {
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
#Contenu1 > article > a > figure > img:hover
{
opacity:0.5;
margin-top: 25px;
}

/*Animation d'apparition*/
#photographie, #contact
{
-webkit-animation: animated_opacity 3s 1;
animation: animated_opacity 3s 1;
-moz-animation: animated_opacity 3s 1;
}
#SliderRenard,#slides
{
-webkit-animation: animated_opacity 2s 1;
animation: animated_opacity 2s 1;
-moz-animation: animated_opacity 2s 1;
}
@keyframes animated_opacity
{
0%		{opacity:0;}
20%		{opacity:0;}
100%	{opacity:1;}
}
@-webkit-keyframes animated_opacity
{
0%		{opacity:0;}
20%		{opacity:0;}
100%	{opacity:1;}
}
@-moz-keyframes animated_opacity
{
0%		{opacity:0;}
20%		{opacity:0;}
100%	{opacity:1;}
}
#boite
{
	-webkit-animation: animated_opacity 2s 1;
	animation: animated_opacity 2s 1;
	-moz-animation: animated_opacity 2s 1;
	width:100%;
	float: left;
	position:relative;
}
#portfolio
{
position:relative;
-webkit-animation: animated_boite 3s 1;
animation: animated_boite 3s 1;
-moz-animation: animated_boite 3s 1;
z-index:1;
width:100%;
float: left;
}
@keyframes animated_boite
{
0%		{bottom:50px;opacity:0;}
25%		{bottom:50px;opacity:0;}
50%		{bottom:0px;opacity:0.5;}
100%	{bottom:0px;opacity:1;}
}
@-webkit-keyframes animated_boite
{
0%		{bottom:50px;opacity:0;}
25%		{bottom:50px;opacity:0;}
50%		{bottom:0px;opacity:0.5;}
100%	{bottom:0px;opacity:1;}
}
@-moz-keyframes animated_boite
{
0%		{bottom:50px;opacity:0;}
25%		{bottom:50px;opacity:0;}
50%		{bottom:0px;opacity:0.5;}
100%	{bottom:0px;opacity:1;}
}