html
{
    background-color: #26262c;
}
body
{
	background-color:#171717;
	font-family: 'Orator Std', Arial, sans-serif;
	margin:0px;
	font-size:1vw;
	padding:0px;
    padding-top:6vw;
	list-style:none;
	overflow-x: hidden;
}

#contenue
{
    
    margin: 0px 200px 0px 200px;
    /*background-color: rgb(56, 37, 26);*/
    background-color: #1c1c1f;
    border: 0.3vw solid #ff7607;
    border-radius: 50px;
    margin-bottom: 2vw;
    padding-bottom: 50px;
}

@font-face {
    font-family: "Harabara";
    src: url('Harabara.ttf');
}

.center li
{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	
}

.titre
{
	height:3vw;
	color:#ff9351;
	text-shadow: 0.1vw 0.2vw #101010;
	font-family:Harabara;


	/*font-style:italic;*/
    margin-top:0.5vw;
	font-size:1.4vw;

}

.titre21
{
	font-weight:bold;
	font-size:1.3vw;
	margin-top:1.5vw;
	text-decoration: underline;


}
.titre22
{
	padding-left:1.3vw;
	font-family: 'Calibri';
	color:#353535;
	font-size:1.2vw;
	display:inline;
	font-weight:bold;
}

.titre23
{
	font-size: 1.5vw;
	padding-top:2.8vw;
	text-shadow: 0.1vw 0.2vw #101010;
	color:#ffbd8d;
	font-weight:bold;
	padding-bottom:1vw;
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;

	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;

	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;

}

.titre24
{
	font-size: 1.3vw;
	text-shadow: 0.1vw 0.2vw #101010;
	color:#f99056;
	font-style:normal;
	font-family:Harabara;
	padding-top:1vw;
	padding-bottom:1vw;
	letter-spacing:0.1vw;
	
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
 
	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
 
	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
}

.titre25
{
	font-size: 1.2vw;
	text-shadow: 0.1vw 0.2vw #101010;
	color:#fb8748;
	font-style:normal;
	font-family:Harabara;
	padding-top:1vw;
	letter-spacing:0.1vw;
	
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
 
	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
 
	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
}

.titre26
{
	font-size: 1.2vw;
	text-shadow: 0.1vw 0.2vw #101010;
	color:#fb8748;
	font-style:normal;
	font-family:Harabara;
	letter-spacing:0.1vw;
}

.titre3
{
	font-weight:bold;
	display:block;
	color:#cccccc;
	
}

.titre3 ul
{
	padding-left:2vw;
}


.titre4
{
	font-weight:bold;
	display:block;
	color:#cccccc;
}

.titre4 ul
{
	margin:0.5vw;	
	padding:0;
}

.bandeau
{
	
	background: url('images/bandeau.png') no-repeat;
    width: 18vw;
    height: 3.1vw;
    background-size: 18vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5vw;
    margin-bottom: 2.5vw;
    animation: animationFrames ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: animationFrames ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: animationFrames ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    font-family: Calibri;
    font-size: 1.5vw;
    text-shadow: #863907 1px 1px , #863907 -1px 1px , #863907 -1px -1px , #863907 1px -1px;
    color: #ffc56d;
}

.date
{
	width:40px;
	text-align:center;
	padding:0.5vw 0;
	float:left;
	margin-right:1vw;
	margin-top:0.5vw;
	border:0.1vw solid #ccc;
	border-top:0.2vw solid #ff7607;
	border-radius:0.4vw;
	background-color:#202020;
	text-shadow:none;
	color: #aaaaaa;
	box-shadow:0.2vw 0.3vw #131313;
	font-size:16px;
	color:#ffa4a4;

}

.date2
{
	width:3.5vw;
	text-align:center;
	padding:0.5vw 0;
	float:left;
	margin-top:auto;
	margin-bottom:auto;
	border:0.1vw solid #ccc;
	border-top:0.2vw solid #ff7607;
	border-radius:0.4vw;
	background-color:#202020;
	text-shadow:none;
	color:#ff9f6b;
	box-shadow:0.2vw 0.3vw #131313;
	font-size:1vw;
	margin-left:-6.5vw;
	line-height:0.9vw;
	text-shadow: 0.1vw 0.2vw #151515;
}


.txtgras
{	
	color:#ffbd8d;
	font-size:16px;
}

.txtgras2
{
	font-weight:bold;
	color:#ffa4a4;
	font-size:1.1vw;
}


.txtpassion
{
	position:absolute;
	bottom:0vw;
	text-align:center;
	width:100%;
	top:9.5vw;
	/*font-family:'SWIsop3';*/
	color:#fb8748;
}

#txtdessin,#txtelect,#txtprogra,#txtcine, #txtjeu
{

	position:relative;
	width:40vw;
	margin-right:auto;
	margin-left:auto;
	margin-top:7vw;


	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;

	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
 	-webkit-transform-origin: 50% 50%;

	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
  
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

#blockdessin,#blockelect,#blockcinema,#blockprogra, #blockjeu
{
	display:none;
}

.citation:before
{
	display: inline-block;
    width: 1.6vw;
    height: 1.4vw;
    content: "";
    background: url("images/ico-guillemet.png") no-repeat 0 0;
    background-size: 100%;
	opacity:0.9;

}
.citation:after
{
	display: inline-block;
    width: 1.6vw;
    height: 1.4vw;
    content: "";
    background: url("images/ico-guillemet2.png") no-repeat 0 0;
    background-size: 100%;
	opacity:0.9;
}


#top
{
	position:relative;
    width: 100%;
    height: 2vw;
	background-color:#404040;
	background: url('images/top.png') repeat-x center;
	border-bottom-style:solid;
	border-bottom-width:0.1vw;
	border-bottom-color:#1c1c1f;

}

#toptxt
{
	height:2vw;
	color:#ffffff;
	font-size:1vw;
	font-family:'Trebuchet MS';
	/*font-weight:bold;
	font-style:italic;*/
	text-align:left;	
	padding-left:3vw;
	padding-top:0.5vw;
	
	background-color:#1c1c1f;
}


#ico-cv
{
	background: url('images/cv.png') no-repeat;
	width:1.1vw;
	height:1.1vw;
	background-size:1.1vw;
	float:right;
}

#barrenav
{
	position: relative;
	width: 100%;
	height: 3.5vw;
	background-color: #333333;
	border: 0.2vw solid #d9711f;
	border-right: 0px;  
	border-left: 0px ;  
	font-size:0.8vw;
	z-index:2;	
}

li
{
	font-family: 'Calibri', Arial;
}

.icon-accueil, .icon-galerie, .icon-profil, .icon-compet, .icon-passion, .icon-contact, .icon-menu 
{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.icon-accueil:before 
{
	display: inline-block;
    width: 1.8vw;
    height: 1.6vw;
    content: "";
    background: url("images/ico-accueil.png") no-repeat 0 0;
    background-size: 100%;

 }

.icon-galerie:before 
{
	display: inline-block;
    width: 1.8vw;
    height: 1.6vw;
    content: "";
    background: url("images/ico-galerie.png") no-repeat 0 0;
    background-size: 100%;
 }

.icon-profil:before {
	display: inline-block;
    width: 1.8vw;
    height: 1.6vw;
    content: "";
    background: url("images/ico-profil.png") no-repeat 0 0;
    background-size: 100%; 
}

.icon-compet:before 
{
	display: inline-block;
    width: 1.8vw;
    height: 1.6vw;
    content: "";
    background: url("images/ico-compet.png") no-repeat 0 0;
    background-size: 100%; 
}

.icon-passion:before
{
	display: inline-block;
    width: 1.8vw;
    height: 1.6vw;
    content: "";
    background: url("images/ico-passion.png") no-repeat 0 0;
    background-size: 100%; 
}

.ico-passion2 
{
	display: inline-block;
    width: 2.2vw;
    height: 2.2vw;
    content: "";
    background: url("images/ico-passion2.png") no-repeat;
	background-size:2.2vw;
	margin-top:3.5vw;
}
	
.ico-compet2 
{
  display: inline-block;
    width: 2.2vw;
    height: 2.2vw;
    content: "";
    background: url("images/ico-compet2.png") no-repeat;
	background-size:2.2vw;
	margin-top:3.5vw;
}
	
.ico-galerie2
{
	display: inline-block;
    width: 2.2vw;
    height: 2.2vw;
    content: "";
    background: url("images/ico-galerie2.png") no-repeat;
	background-size:2.2vw;
	margin-top:3.5vw;
}
	
.ico-profil2
{
	display: inline-block;
    width: 2.2vw;
    height: 2.2vw;
    content: "";
    background: url("images/ico-profil2.png") no-repeat;
	background-size:2.2vw;
	margin-top:3.5vw;
}
	
.ico-accueil2 
{
	display: inline-block;
    width: 2.2vw;
    height: 2.2vw;
    content: "";
    background: url("images/ico-accueil2.png") no-repeat;
	background-size:2.2vw;
	margin-top:3.5vw;
}
	
	
a, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.nav ul 
{
	max-width: 100%;
	margin: 0;
	padding:0px;
	padding-top: 0.2vw;
	list-style: none;
	font-size: 1.2em;
}

.nav li span 
{
	display: block;
	font-family:'Orator Std', Helvetica, sans-serif;
	
}

.nav a 
{
	display: block;
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
	-ms-transition: color .5s, background .5s, height .5s;
	transition: color .5s, background .5s, height .5s;
	color: rgba(249, 249, 249, 0);
}

.nav i
{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


a, button 
{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.no-touch .nav ul:hover a 
{
	color: rgba(249, 249, 249, 0);
}

.no-touch .nav ul:hover a:hover
{
	color: rgba(249, 249, 249, 0.99);
}

.nav li:nth-child(6n+1) {
	background: #26262c;
}

.nav li:nth-child(6n+2) {
	background: #26262c;
}

.nav li:nth-child(6n+3) {
	background: #26262c;
}

.nav li:nth-child(6n+4) {
	background: #26262c;
}

.nav li:nth-child(6n+5) {
	background: #26262c;
}

.nav li {
	float: left;
	width: 20%;
	text-align: center;
	-webkit-transition: border .5s;
	-moz-transition: border .5s;
	-o-transition: border .5s;
	-ms-transition: border .5s;
	transition: border .5s;
}

.no-touch .nav li:nth-child(6n+1) a:hover,.no-touch .nav li:nth-child(6n+1) a:active,.no-touch .nav li:nth-child(6n+1) a:focus 
{
	border-bottom: 0.3vw solid #ff7607;
}

.no-touch .nav li:nth-child(6n+2) a:hover,.no-touch .nav li:nth-child(6n+2) a:active,.no-touch .nav li:nth-child(6n+2) a:focus 
{
	border-bottom: 0.3vw solid #ff7607;
}

.no-touch .nav li:nth-child(6n+3) a:hover,.no-touch .nav li:nth-child(6n+3) a:active,.no-touch .nav li:nth-child(6n+3) a:focus 
{
	border-bottom: 0.3vw solid #ff7607;
}

.no-touch .nav li:nth-child(6n+4) a:hover,.no-touch .nav li:nth-child(6n+4) a:active,.no-touch .nav li:nth-child(6n+4) a:focus 
{
	border-bottom: 0.3vw solid #ff7607;
}

.no-touch .nav li:nth-child(6n+5) a:hover,.no-touch .nav li:nth-child(6n+5) a:active,.no-touch .nav li:nth-child(6n+5) a:focus 
{
	border-bottom: 0.3vw solid #ff7607;
}

.icon 
{
	padding-top: 0.2em;
}

.icon + span 
{
	margin-top: 0.7em;
	-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
	-o-transition: margin .5s;
	-ms-transition: margin .5s;
	transition: margin .5s;
}

#top-bar-container
{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
}

.nav a 
{
	height: 3.3em;
	border-style:solid;
	border-width:1px;
	border-color:#EEEEEE;
	border-bottom:none;
	border-top:none;
}

.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
	height: 4.8em;
}	


.no-touch .nav a:hover .icon + span 
{
	margin-top: 0.2em;
	-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
	-o-transition: margin .5s;
	-ms-transition: margin .5s;
	transition: margin .5s;
}

.nav i 
{
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0.3em;
	border-radius: 50%;
	font-size: 1.4em;
	box-shadow: 0 0 0 0.8em transparent;
	background: rgba(0,0,0,0.1);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: box-shadow .6s ease-in-out;
	-moz-transition: box-shadow .6s ease-in-out;
	-o-transition: box-shadow .6s ease-in-out;
	-ms-transition: box-shadow .6s ease-in-out;
	transition: box-shadow .6s ease-in-out;
}	
	

.no-touch .nav a:hover i,
.no-touch .nav a:active i,
.no-touch .nav a:focus i 
{		
	box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .4s ease-in-out;
	-moz-transition: box-shadow .4s ease-in-out;
	-o-transition: box-shadow .4s ease-in-out;
	-ms-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
}
		
#presentation
{
	width:100%;
	height:31em;
	position:absolute;
	background-color:#16191b;
	background-size:99vw;
	border-bottom-color:#ff7607;
	border-bottom-style:solid;
	border-bottom-width:0.2vw;
	z-index:1;

	animation: animationFrames3 ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;

	background: url('images/banniere.jpg') no-repeat center;
    background-size: 100%;
}

.presentation_overlay
{
	width:23.6%;
	height:31em;
	position:relative;

	background-color:#16191b;
    opacity:0;

    left:-10.3vw;
    padding:0px;
    margin:0px;
    border:0px;
    
    align-items: center;
    color: #fff;
    justify-content: center;
    display: flex;

    -ms-flex-negative: 0;
    flex-shrink: 0;
    
    transform: skew(-34deg);
    -webkit-transform: skew(-34deg);
    -moz-transform: skew(-34deg);
    
    -webkit-transition: opacity 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

.presentation_overlay p
{
    transform: skew(34deg);
    -webkit-transform: skew(34deg);
    -moz-transform: skew(34deg);
    font-size:1.5vw;
}

.presentation_overlay:first-child,
.presentation_overlay:last-child
{
    width:25%;
}

.presentation_overlay:first-child
{
    align-items: start;
}


.presentation_overlay:last-child
{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}


.presentation_overlay:hover
{
    opacity:0.8;
}

#banniere_parent
{
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display:flex;
    position:relative;
    z-index: 3;
    width:100%;
    flex-wrap: nowrap;
    
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    
    -webkit-animation: animationFrames3 ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;

    
}



#javascriptcode {
	background-image: url(images/banniere.jpg);
	background-repeat: repeat;
}

	
#blockc
{
	
	position:relative;
	color: #cccccc;
	height: 38vw;
 	background-color:#26262c;
    padding-bottom:2vw;
	text-align:center;


}

#blockc .titre3:before
{
	content:"";
	width:2vw;
	height:2vw;
	background-color:#F90;
	
}

#blockprofil
{
	
	position:relative;
	color: #909090;
	text-shadow: 0.1vw 0.2vw #050505;
	/*height: 130vw;*/
 	background-color:#26262c;
	text-align:center;
	border-bottom: 0.3vw solid #ff7607;

}



#blockprofil li
{
	margin-top:2vw;
	font-style: italic;
	width: 32vw;
	text-align:justify;
	font-size: 1vw;
	position:relative;	
	vertical-align:top;
	padding-bottom:1vw;
	display: block;
}

#blockprofil h2
{
	font-size: 1.5vw;
	padding-top:1.8vw;
	color:#ffbd8d;
}

#blockcgal
{
	
	position:relative;
	color: #cccccc;
	/*height: 698vw;*/
 	background-color:#26262c;
	text-align:center;
	border-bottom: 0.3vw solid #ff7607;
	border-right: none;  
	border-left: none ; 
    border-top: none ; 

}


#blockcgal ul {
	margin-left:0px;
	padding-left:0px;
}


#blockc2
{
    height: 21.3vw;
	position:relative;
	background-color:#292929
        ;
	border-bottom: 0.3vw solid #ff7607;
	text-align:center;
}


#blockc h2, #blockc2 h2
{
	font-size: 1.5vw;
	padding-top:1.8vw;
	text-shadow: 0.1vw 0.2vw #101010;
	color:#ffbd8d;
}


#blockcgal h2
{
	font-size: 1.5vw;
	padding-top:1.8vw;
	text-shadow: 0.1vw 0.2vw #101010;
	color:#ffbd8d;

}


#blockc li, #blockc2 li
{
	

	font-style: italic;
	width: 26vw;
	text-align:justify;
	text-shadow: 0.1vw 0.2vw #3d261e;
	display: inline-block;
    vertical-align:top;
	margin-right:7.5vw;
	margin-left:5.5vw;
	font-size: 1vw;

}




#prezcompet
{
	
	font-family:'calibri';
	font-style: italic;
	width: 56vw;
	text-align:justify;
	text-shadow: 0.1vw 0.2vw #3d261e;
	font-size: 1vw;
	display: block;
	margin-bottom:3.5vw;
	position:relative;
	color:#ffcccc;
	margin-left:auto;
	margin-right:auto;
}




#prezpassion
{
	
	font-family:'calibri';
	font-style: italic;
	width: 56vw;
	text-align:justify;
	text-shadow: 0.1vw 0.2vw #3d261e;
	font-size: 1vw;
	display: block;
	margin-bottom:2vw;
	position:relative;
	color:#ffcccc;
	margin-left:auto;
	margin-right:auto;
}

#prezprofil
{
	font-family:'calibri';
	font-style: italic;
	width: 56vw;
	text-align:justify;
	text-shadow: 0.1vw 0.2vw #3d261e;
	font-size: 1vw;
	display: block;
	margin-bottom:5vw;
	position:relative;
	color:#ffcccc;
	margin-left:auto;
	margin-right:auto;	
	
}

#blockcgal li:not(.dot)
{
	

	font-style: italic;
	width: 29vw;
	text-align:justify;
	/*text-shadow: 0.1vw 0.2vw #101010;*/
	display: inline-block;
    vertical-align:middle;
	font-size: 13px;

}



.pooshaper, .dominahdaper, .heameraper, .jinxaper, .heisenaper, .portraitaper, .dragonaper, .jeremaper, .emotionaper
{

	-webkit-filter: grayscale(100%); 

	-webkit-transition: all .4s ease; 
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 

}

.pooshaper:hover, .dominahdaper:hover, .heameraper:hover, .jinxaper:hover, .heisenaper:hover, .portraitaper:hover, .dragonaper:hover ,.jeremaper:hover, .emotionaper:hover
{
	-webkit-filter: grayscale(0%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

}


.pooshaper, .dominahdaper, .heameraper, .emotionaper, .jeremaper
{
	width:8.3vw;
	height:4.8vw;
	display:inline-block;
	margin-top:1vw;
	box-shadow:0.4vw 0.5vw #131313;
	border-width:0.1vw;
	border-color:#a8a8a8;
	border-style:solid;	
}


.jinxaper, .heisenaper, .portraitaper, .dragonaper
{
	width:6.0vw;
	height:6.7vw;
	display:inline-block;
	box-shadow:0.4vw 0.5vw #131313;
	border-width:0.1vw;
	border-color:#a8a8a8;
	border-style:solid;
}

.vidéos
{
	margin-top:1.5vw;	
	margin-left:2vw;
	border-width:0.4vw;
	border-color:#101419;
	border-style:solid;
	outline: 1px solid #384046;
	-webkit-transition: all .4s ease; 
    transition-duration: 0.4s;
}


#jinx, #lux, #visage, #heisen, #portrait, #dragon, #helico, #voituremode, #maison, #ps3xbox, #iphone, #fiatlux, #codarme, #drone, #jeu, #emotionlogo, #pokilogo, #osistemxlogo, #dreamteamlogo, #texture, #tigre, #jungko, #visage3d, #sonatines, #kieraenv, #scifiroom, #downthemill, #arcelorweb, #mattepaint , #gregpaint, #corpspaint, #venenorendu, #hibiki, #centurionshading, #terrainshading, #pegasusenv, #houdinibuilding
{
	display:inline-block;
	border-width:0.4vw;
	border-color:#101419;
	border-style:solid;
	outline: 1px solid #384046;
	-webkit-transition: all .4s ease; 
    transition-duration: 0.4s;
	z-index:1;
}

#jinx, #heisen, #portrait, #dragon, #emotionlogo, #pokilogo , #osistemxlogo, #dreamteamlogo, #tigre, #lux, #visage, #visage3d, #gregpaint, #corpspaint, #hibiki
{
	width:17vw;
	height:19vw;
	margin-top:0.2vw;
	margin-left:6vw;
}

#helico, #voituremode, #maison, #ps3xbox, #iphone, #codarme, #fiatlux, #jungko, #sonatines, #scifiroom, #downthemill, #arcelorweb,  #mattepaint, #venenorendu, #terrainshadin
{
	margin-left:2.5vw;
	width:25vw;
	height:14.8vw;
	margin-top:1vw;
}
 #houdinibuilding
{
	margin-left:2.5vw;
	width:25vw;
	height:12vw;
	margin-top:1vw;
}
 #pegasusenv
{
	margin-left:2.5vw;
	width:25vw;
	height:13vw;
	margin-top:1vw;
}


#centurionshading
{
    margin-left:2.5vw;
	width:25vw;
	height:13vw;
	margin-top:1vw;
    
}
 #drone
{
	margin-left:2.5vw;
	width:25vw;
	height:14.8vw;
	margin-top:1vw;

}

#kieraenv
{
   margin-left:2.5vw;
	width:25vw;
	height:14.8vw;
	margin-top:1vw; 
    
}

#jeu
{
	margin-left:3.5vw;
	width:23vw;
	height:14.8vw;
	margin-top:1vw;
}

#texture
{
	margin-left:6.5vw;
	width:16.6vw;
	height:16.6vw;
	margin-top:1vw;
}


#jinx:hover, #lux:hover, #visage:hover, #heisen:hover, #portrait:hover, #dragon:hover,#helico:hover, #voituremode:hover, #maison:hover, #ps3xbox:hover, #iphone:hover, #fiatlux:hover,   #codarme:hover,  #emotionlogo:hover , #pokilogo:hover , #osistemxlogo:hover , #dreamteamlogo:hover, #tigre:hover, #jungko:hover , #visage3d:hover, #sonatines:hover, #scifiroom:hover, #downthemill:hover, #arcelorweb:hover, #venenorendu:hover, #lux:hover, #hibiki:hover, #centurionshading:hover, #terrainshading:hover,#pegasusenv:hover, #houdinibuilding:hover


{
		outline-color:#ff7607;
   /* background-size: 110%;*/
    transform: scale(1.05, 1.05);
    cursor: pointer;
}

#drone:hover,#texture:hover, #jeu:hover, .vidéos:hover, #kieraenv:hover
{
		outline-color:#ff7607;
    
}


#jinx
{
	background: url('images/jinx.png') no-repeat center;
	background-size:17vw;
}

#mattepaint
{
    background: url('images/Galerie/matte_paint_01.jpg') no-repeat center;
	background-size:26vw;
}
#gregpaint
{
    background: url('images/Galerie/gregoire_paint.jpg') no-repeat center;
	background-size:16vw;    
    
}

#corpspaint
{
    background: url('images/Galerie/Exo4-Jambe_v2_resize.jpg') no-repeat center;
	background-size:16vw;    
    
}
#lux
{
	background: url('images/lux_rendu.jpg') no-repeat center;
	background-size:17vw;
}
#hibiki
{
	background: url('images/lighting_hibiki.jpg') no-repeat center;
	background-size:17vw;
}

#visage
{
	background: url('images/visage.jpg') no-repeat center;
	background-size:17vw;
}

#visage3d
{
	background: url('images/Galerie/Self_portrait_XL.jpg') no-repeat center;
	background-size:19vw;
}


#heisen
{
	background: url('images/heisenberg.png') no-repeat center;
	background-size:17vw;

}

#emotionlogo
{
	background: url('images/emotionlogo.png') no-repeat center;
	background-size:17vw;
	background-color:#23272a;

}

#pokilogo
{
	background: url('images/pokilogo.png') no-repeat center;
	background-size:14vw;
	background-color:#23272a;

}

#osistemxlogo
{
	background: url('images/osistemxlogo.png') no-repeat center;
	background-size:21vw;
	background-color:#23272a;

}

#dreamteamlogo
{
	background: url('images/blason-dream-team.png') no-repeat center;
	background-size:17.5vw;
	background-color:#23272a;

}

#portrait
{
	background: url('images/portrait.png') no-repeat center;
	background-size:17vw;
}

#dragon
{
	background: url('images/dragon.png') no-repeat center;
	background-size:17vw;
}

#tigre
{
	background: url('images/tigre.png') no-repeat center;
	background-size:17vw;
	background-color:#a05331;
}

#helico
{
	background: url('images/helico.png') no-repeat center;
	background-size:25vw;
}
#jungko
{
	background: url('images/Galerie/Mega_jungko_V1_XL.jpg') no-repeat center;
	background-size:27vw;
}

#voituremode
{
	background: url('images/voituremode.png') no-repeat center;
	background-size:25vw;
}


#centurionshading
{
	background: url('images/Galerie/Centurion_shading.jpg') no-repeat center;
	background-size:25vw;
}


#maison
{
	background: url('images/maison.png') no-repeat center;
	background-size:25vw;	
}

#drone
{
	background: url('images/drone.png') no-repeat center;
	background-size:50vw;	
	background-position:0vw;
}

#kieraenv
{
    
    background: url('images/Galerie/Kiera_Cabane_env01_XL.jpg') no-repeat center;
	background-size:50vw;	
	background-position:0vw;
}

#jeu
{
	background: url('images/jeu.png') no-repeat center;
	background-size:46vw;	
	background-position:0vw;
}

#texture
{
	background: url('images/texturedessins.jpg') no-repeat center;
	background-size:100vw;	
	background-position:0vw;
}

#ps3xbox
{
	background: url('images/ps3xbox.png') no-repeat center;
	background-size:25vw;	
}


#iphone
{
	background: url('images/iphone.png') no-repeat center;
	background-size:25vw;	
}

#fiatlux
{
	background: url('images/fiat_lux.jpg') no-repeat center;
	background-size:26vw;	
}

#arcelorweb
{
	background: url('images/Galerie/arcelor_web_02.jpg') no-repeat center;
	background-size:26vw;	
}

#sonatines
{
	background: url('images/Galerie/Sonatines_Candy01_XL.jpg') no-repeat center;
	background-size:29vw;
}

#codarme
{
	background: url('images/cod-arme.png') no-repeat center;
	background-size:25vw;	
}

.pooshaper
{
	
	background: url('images/poosh-apercu.png') no-repeat center;
	background-size:8.3vw;
}

.emotionaper
{
	
	background: url('images/emotion-apercu.png') no-repeat center;
	background-size:8.3vw;
}

.jeremaper
{
	
	background: url('images/cv-apercu.png') no-repeat center;
	background-size:8.3vw;
}

.dominahdaper
{
	background: url('images/dominahd-apercu.png') no-repeat center;
	background-size:8.3vw;
}

.heameraper
{
	background: url('images/heamer-apercu.png') no-repeat center;
	background-size:8.3vw;
}

.jinxaper
{
	background: url('images/jinx-apercu.png') no-repeat center;
	background-size:6.0vw;
}
	

.heisenaper
{
	background: url('images/heisen-apercu.png') no-repeat center;
	background-size:6.0vw;
	
}

.portraitaper
{
	background: url('images/portrait-apercu.png') no-repeat center;
	background-size:6.0vw;
}

.dragonaper
{
	background: url('images/dragon-apercu.png') no-repeat center;
	background-size:6.0vw;
}

#jeu:hover > .fleche,#jeu:hover > .fleche2
{
	display:inline-block;
	animation: animationFrames2 ease 0.5s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	-webkit-animation: animationFrames2 ease 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;

}



#texture:hover > .flechedessins, #texture:hover > .flechedessins2
{
	display:inline-block;
	animation: animationFrames2 ease 0.5s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	-webkit-animation: animationFrames2 ease 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;

}



#drone:hover > .flechedrone,#drone:hover > .flechedrone2
{
	display:inline-block;
	opacity:0.7;
	animation: animationFrames5 ease 0.5s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	-webkit-animation: animationFrames5 ease 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
}

#kieraenv:hover > .flechekieraenv,#kieraenv:hover > .flechekieraenv2
{
	display:inline-block;
	opacity:0.7;
	animation: animationFrames5 ease 0.5s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	-webkit-animation: animationFrames5 ease 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
}



.fleche

{
	width:2.5vw;
	height:2.5vw;
	border-radius:50%;
	background: url('images/fleche.png') no-repeat center;
	background-size:2.5vw;
	z-index:3;
	position:absolute;
	margin-top:6vw;
	margin-left:0.8vw;
	display:none;
}

.fleche2

{
	width:2.5vw;
	height:2.5vw;
	border-radius:50%;
	background: url('images/fleche.png') no-repeat center;
	background-size:2.5vw;
	display:none;
	z-index:3;
	position:absolute;
	margin-top:6vw;
	margin-left:19.5vw;
	transform:scaleX(-1);

}

.flechedessins

{
	width:2.5vw;
	height:2.5vw;
	border-radius:50%;
	background: url('images/fleche.png') no-repeat center;
	background-size:2.5vw;
	z-index:3;
	position:absolute;
	margin-top:6.8vw;
	margin-left:0.8vw;
	display:none;
}

.flechedessins2

{
	width:2.5vw;
	height:2.5vw;
	border-radius:50%;
	background: url('images/fleche.png') no-repeat center;
	background-size:2.5vw;
	display:none;
	z-index:3;
	position:absolute;
	margin-top:6.8vw;
	margin-left:13.4vw;
	transform:scaleX(-1);

}

.flechedrone, .flechekieraenv

{
	width:2.5vw;
	height:2.5vw;
	border-radius:50%;
	background: url('images/fleche.png') no-repeat center;
		background-size:2.5vw;
	z-index:3;
	position:absolute;
	margin-top:6vw;
	margin-left:0.8vw;
	display:none;
	opacity:0;
}

.flechedrone2, .flechekieraenv2

{
	width:2.5vw;
	height:2.5vw;
	border-radius:50%;
	background: url('images/fleche.png') no-repeat center;
		background-size:2.5vw;
	display:none;
	z-index:3;
	position:absolute;
	margin-top:6vw;
	margin-left:21.5vw;
	transform:scaleX(-1);
	opacity:0;


}



#persoprofil
{
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;

	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;

	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;

	background: url('images/perso2.png') no-repeat center;
	background-size:8.1vw;
	height:8.1vw;
	width:8vw;
	position: relative;
	display:inline-block;
	left:-16%;

}

#persocompet
{
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;

  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;

  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
 
	
	
	background: url('images/perso-amp.png') no-repeat center;
	background-size:8.1vw;
	height:8.1vw;
	width:8vw;
	position: relative;
	display:inline-block;
	left:16%;
}

#bulle1, #bulle2
{
	background-size:12.1vw;
	height:2.8vw;
	width:12.1vw;
	position: relative;
	margin-top: 1vw;
	display:inline-block;
	z-index:2;

}
#bulle1
{
	background: url('images/bulle.png') no-repeat ;
	background-size:12.1vw;
}

#bulle2
{
	background: url('images/bulle2.png') no-repeat ;
	background-size:12.1vw;

}

.bulle3
{
	background: url('images/bulle3.png') no-repeat ;
	background-size:10.4vw;
	height:2.3vw;
	width:10.4vw;
	position: relative;
	display:block;
	margin-bottom:1vw;

}

#bulle1
{
	left:-18%;
}

#bulle2
{
	left:8%;	
}

.blockniv
{
	width:73%;
	position:relative;	

}

.icoconf,.icointer,.icodebut
{
	
	height:11vw;
	width:4.5vw;
	position:relative;
	float:right;
	margin-top:1.5vw;	
}

.icodebutrond,.icointerrond,.icoconfrond
{
	margin-right:1.8vw;
	margin-left:auto;
	height:1.4vw;
	width:1.3vw;
	position:relative;	
}

.icodebutrond
{
	top:7.5vw;
}

.icointerrond
{
	top:5.5vw;
}

.icoconfrond
{

	top:3.5vw;
}

.icoconf
{
	background: url('images/ico-conf.png') no-repeat  ;
	background-size:4.2vw;
	}
	
.icodebut
{
	background: url('images/ico-debut.png') no-repeat  ;
	background-size:4.2vw;
	}
.icodebutrond
{
	background: url('images/ico-grad-rond.png') no-repeat  ;
	background-size:1.3vw;
	}
	
.icointerrond
{
	background: url('images/ico-grad-rond2.png') no-repeat  ;
	background-size:1.3vw;
	}
	
.icoconfrond
{
	background: url('images/ico-grad-rond3.png') no-repeat  ;
	background-size:1.3vw;
	}
	
.icointer
{
	background: url('images/ico-inter.png') no-repeat  ;
	background-size:4.2vw;
	}
	

.sepaorange
{
	background: url('images/separateur-orange.png') no-repeat center ;
	height:0.4vw;
	margin-top:1.2vw;
	width:100%;
	position:absolute;
	background-size:18.6vw;
}

.sepaorange2
{
	background: url('images/separateur-orange.png') no-repeat center ;
	height:0.4vw;
	bottom:1.5vw;
	position:absolute;
	background-size:18.6vw;
	width:100%;

}


.lireplus, .lireplus:hover
{
	background: url('images/lire-plus.png') no-repeat center;
	background-size:6.5vw;
	height:3vw;
	width:6.5vw;
	position: relative;
	display:inline-block;
}

.lireplus:hover
{

	 -ms-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
	transition-duration: 0.4s;
}

.plus2, .plus2:hover
{
	background: url('images/plus.png') no-repeat center;
	background-size:3.9vw;
	height:3vw;
	width:3.9vw;
	position: relative;
	display:inline-block;
	-ms-transform: scale(1,1);
    -webkit-transform: scale(1,1); 
    transform: scale(1,1);
}


.plus2:hover
{

	transition-duration: 0.4s;
	-ms-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
	  
}

#blockd
{
	position:relative;
    width: 100%;
    height: 45vw;
    padding-bottom: 10px;
	background-color:#1c1c1f;
	color: #cccccc;
	text-align:center;
	border-bottom: 0.3vw solid #ff7607;
	-webkit-transition: all .5s ease; 
	transition-duration: 0.5s;

}

#blockd2
{
	position:relative;
    width: 100%;
   /*height: 320vw;*/
	background-color:#1c1c1f;
	color: #cccccc;
	text-align:center;
		border-bottom: 0.3vw solid #ff7607;

}

 #blockd2 li
{

	font-style: italic;
	width: 28vw;
	text-align:justify;
	text-shadow: 0.1vw 0.2vw #101010;
	font-size: 1vw;
	height:14vw;
	position:relative;
}

#blockd li
{

	font-style: italic;
	width: 100%;
	text-align:justify;
	text-shadow: 0.1vw 0.2vw #3d261e;
	font-size: 1vw;
	display:inline;
	position:relative;
}



.h3compet li
{
	font-size: 1vw;
 margin: 0 auto;
}

#blockd h2, #blockd2 h2
{
	padding-top:1.8vw;
	font-size: 1.5vw;
	text-shadow: 0.1vw 0.2vw #101010;
	color:#ffbd8d;

}

#dominahdpart, #heamerpart, #pooshpart, #jinxpart, #visagepart, #portraitpart, #dragonpart, #heisenpart, #samuspart, #kritterpart, #osistemxpart, #polipart, #top10part, #maisonpart, #helicopart, #voituremodepart, #ps3xboxpart, #iphonepart, #fiatluxpart, #dronepart, #codarmepart, #jeupart, #emotionpart, #emotionpart2, #jeremypart, #pokipart ,#osistemxpart, #eclipsepart, #dreamteampart, #texturepart, #tigrepart, #luxpart, #dessinpart, #jungkopart, #kierapart, #showreelpart, #visage3dpart, #showreelrjspart, #sonatinespart, #battleshippart, #kieraenvpart, #corridorpart, #mappingtronpart, #scifiroompart, .gamepart, #robiepart, .devpart, .dessinpart, #venenorendupart, #hibikipart, #centurionpart, #terrainpart, #pegasusenvpart, #houdinibuildingpart
{
	
	background-color:#1c1c1f;
	width:100%;
	/*height:20.2vw;*/
	position:relative;
	margin-top:2vw;
	box-shadow: 0.0vw 0.6vw #181818;
	border-top:solid 0.1vw #d36021;
	border-bottom:solid 0.1vw #a94028;
}


#jeupart, #texturepart
{
	height:22.5vw;
}

#jinxpart ul, #portraitpart ul, #heisenpart ul , #dragonpart ul, #emotionpart2 ul, #pokipart ul , #osistemxpart ul, #dreamteampart ul, #tigrepart ul, #luxpart ul, #visagepart ul, #jungkopart ul, #visage3dpart ul
{
	/*margin:0;*/	
}
/*
#pooshpart:before, #samuspart:before, #polipart:before, #jinxpart:before, #luxpart:before, #visagepart:before, #portraitpart:before, #maisonpart:before, #dronepart:before,#jeupart:before,  #portraitpart:before, #maisonpart:before, #voituremodepart:before,  #kritterpart:before, #osistemxpart:before, #top10part:before, #dragonpart:before, #helicopart:before, #ps3xboxpart:before, #dominahdpart:before, #heamerpart:before, #heisenpart:before, #iphonepart:before, #fiatluxpart:before, #codarmepart:before, #emotionpart:before, #emotionpart2:before,  #pokipart:before, #osistemxpart:before,  #eclipsepart:before, #dreamteampart:before, #texturepart:before, #tigrepart:before, .jinx_description:before, .jungkopart:before, #kierapart:before, #jeremypart:before, #showreelpart:before, #visage3dpart:before, #showreelrjspart:before, #sonatinespart:before, #battleshippart:before, #kieraenvpart:before, #corridorpart:before, #mappingtronpart:before , scifiroompart:before
{
	content: "";
	position:absolute;
	display:inline-block;
	height:9.2vw;
	width:5.9vw;
}


 #samuspart:before, #polipart:before, #jeremypart:before
{

	background: url('images/ico-diff3.png') no-repeat ;		
	background-size:5.9vw;
	right:15.5vw;
	margin-top:5.5vw;
}

.hidden_before:before
{
    
    display:none !important;
}

#jeupart:before
{

	background: url('images/ico-diff3.png') no-repeat ;		
	background-size:5.9vw;
	right:14.5vw;
	margin-top:7.5vw;
}

 .jinx_description:before, #portraitpart:before, #luxpart:before, #visagepart:before , #jinxpart:before, #jungkopart:before, #visage3dpart:before
{

	background: url('images/ico-diff3.png') no-repeat ;		
	background-size:5.9vw;
	right:17.5vw;
	margin-top:6vw;
}

 #maisonpart:before, #voituremodepart:before, #dronepart:before, #fiatluxpart:before, #kierapart:before, #showreelpart:before, #showreelrjspart:before, #sonatinespart:before, #battleshippart:before, #kieraenvpart:before, #corridorpart:before
{

	background: url('images/ico-diff3.png') no-repeat ;		
	background-size:5.9vw;
	right:14vw;
	margin-top:5.5vw;
}


#kritterpart:before, #osistemxpart:before, #top10part:before, #pooshpart:before, #dominahdpart:before, #heamerpart:before, #emotionpart:before
{

	background: url('images/ico-diff2.png') no-repeat ;		
	background-size:5.9vw;
	right:15.5vw;
	margin-top:5.5vw;
}

#eclipsepart:before
{

	background: url('images/ico-diff1.png') no-repeat ;		
	background-size:5.9vw;
	right:15.5vw;
	margin-top:5.5vw;
}


 #helicopart:before, #ps3xboxpart:before 
{
	background: url('images/ico-diff2.png') no-repeat ;		
	background-size:5.9vw;
	right:14vw;
	margin-top:5.5vw;
}



#dragonpart:before, #texturepart:before, #mappingtronpart:before
{
	background: url('images/ico-diff2.png') no-repeat ;		
	background-size:5.9vw;
	right:17.5vw;
	margin-top:5.5vw;
}

#heisenpart:before,#tigrepart:before
{
	

	background: url('images/ico-diff1.png') no-repeat ;		
	background-size:5.9vw;
	right:17.5vw;
	margin-top:5.5vw;
	
}

#emotionpart2:before
{
	

	background: url('images/ico-diff1.png') no-repeat ;		
	background-size:5.9vw;
	right:17.5vw;
	margin-top:5.5vw;
	
}

#pokipart:before
{
	

	background: url('images/ico-diff1.png') no-repeat ;		
	background-size:5.9vw;
	right:17.5vw;
	margin-top:5.5vw;
	
}



 #dreamteampart:before
{
	

	background: url('images/ico-diff2.png') no-repeat ;		
	background-size:5.9vw;
	right:17.5vw;
	margin-top:5.5vw;
	
}


#iphonepart:before
{
	
	background: url('images/ico-diff1.png') no-repeat ;		
	background-size:5.9vw;
	right:14vw;
	margin-top:5.5vw;
}



#codarmepart:before
{
	background: url('images/ico-diff2.png') no-repeat ;		
	background-size:5.9vw;
	right:14vw;
	margin-top:5.5vw;
}
*/

.imgs ul
{
	padding-left:2vw;
	
}

.block1
{
	background-color:#26262c;
	width:100%;
	height:14.5vw;
	position:relative;
	margin-top:1.5vw;
	box-shadow: 0.0vw 0.6vw #181818;
	border-top:solid 0.1vw #d36021;
	border-bottom:solid 0.1vw #a94028;
}

.block2
{
	background-color:#161616;
	width:100%;
	height:14vw;
	position:absolute;
	box-shadow: 0.0vw 0.6vw #181818;
	border-top:solid 0.2vw #d36021;
	border-bottom:solid 0.2vw #a94028;
	margin-top:2.5vw;
}

.block3
{
	background-color:#26262c;
	width:80%;
	
	position:relative;;
	border:solid 0.1vw #d36021;
	border-radius:1vw;
	margin-bottom:2vw;
	text-align:center;
	display:inline-block;
	box-shadow: 0.0vw 0.6vw #181818;
}

.block3 p
{
	
font-size:0.9vw;
}

#dessin, #elect, #progra, #cinema, #jeuxvideo
{
	background-size:8.1vw;
	height:8.2vw;
	width:8vw;
	position: relative;
	display:inline-block;
	margin-top:4vw;
	margin-right: 3vw;
	margin-left: 3vw;
	transition-duration: 0.2s;
}

.dessin2,.progra2,.cinema2,.elect2, .jeuxvideo2
{
	background-size:5.1vw;
	height:5.1vw;
	width:5vw;
	position: relative;
	display:inline;
	margin-left:21vw;
	margin-top:1.2vw;
	float:left;
	animation: animationFrames4 ease 1s;
	animation-iteration-count: 1;
	-webkit-animation: animationFrames4 ease 1s;
 	-webkit-animation-iteration-count: 1;
	-moz-animation: animationFrames4 ease 1s;
	-moz-animation-iteration-count: 1;
}

#dessin
{
	background: url('images/dessin.png') no-repeat center;
	background-size:8.1vw;
}

#elect
{
	
	background: url('images/elect-ico.png') no-repeat center;
	background-size:8.1vw;

}

#progra
{
	background: url('images/progra-ico.png') no-repeat center;
	background-size:8.1vw;

}

#cinema
{	
	background: url('images/cinema-ico.png') no-repeat center;
	background-size:8.1vw;
}

#jeuxvideo
{	
	background: url('images/game-ico.png') no-repeat center;
	background-size:8.1vw;
}

#dessin:hover,#elect:hover,#progra:hover,#cinema:hover, #jeuxvideo:hover
{
	-ms-transform: translate(0px,-0.5vw); /* IE 9 */
    -webkit-transform: translate(0px,-0.5vw); /* Chrome, Safari, Opera */
    transform: translate(0px,-0.5vw);
	transition-duration: 0.2s;
	cursor:pointer;
}

#dessin:active,#elect:active,#progra:active,#cinema:active, #jeuxvideo:active
{
	-ms-transform: translate(0px,+0.4vw); /* IE 9 */
    -webkit-transform: translate(0px,+0.4vw); /* Chrome, Safari, Opera */
    transform: translate(0px,+0.4vw);
	transition-duration: 0.2s;
}

#toshop, #flash, #after, #premiere, #dreamviewer, #illustrator, #indesign
{
	height:6.2vw;
	width:6.2vw;
	position: absolute;
	display:inline-block;
	margin-left:-10vw;
	box-shadow:0.2vw 0.3vw #151515;

}

#thegimp, #solidworks, #web, #android_studio, #puredata, #unity
{
	height:6.2vw;
	width:6.2vw;
	position: absolute;
	display:inline-block;
	margin-left:-10vw;
}

#MMI, #jdb, #emm, #Equasoft, #UQAT, #IIM, #LS, #gatezero, #freelance
{
	height:4.3vw;
	width:7.4vw;
	position: relative;
	display:inline-block;
	float:right;
	right:4vw;
	top:2.5vw;
}

#RJS, #teacher
{
    height:4.3vw;
	width:4.3vw;
	position: relative;
	display:inline-block;
	float:right;
	right:5.3vw;
	top:2.2vw;
}



.toshop2, .flash2, .after2, .premiere2, .dreamviewer2, .illustrator2 , .indesign2, .houdini2
{
	height:2.5vw;
	width:2.5vw;
	position: relative;
	display:inline-block;
	box-shadow:0.2vw 0.3vw #151515;
	margin-left:2vw;
}

.toshop2:hover, .flash2:hover, .after2:hover, .premiere2:hover, .dreamviewer2:hover, .illustrator2:hover, .cinema4D2:hover, .arduino2:hover, .processing2:hover, .indesign2:hover, .blender2:hover, .unity2:hover, .max2:hover, .zbrush2:hover, .unreal2:hover, .substance_painter2:hover, .houdini:hover, .houdini2:hover
{
	-ms-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
	transition-duration: 0.2s;
}

#cinema4D, #arduino, #processing, #blender, #max, #unreal, #zbrush, #substance_painter, #houdini, #maya, #perforce
{
	height:6.5vw;
	width:6.5vw;
	position: absolute;
	display:inline-block;
	margin-left:-10vw;
}

.cinema4D2, .arduino2, .processing2, .blender2, .unity2, .max2, .zbrush2, .unreal2, .substance_painter2
{
	height:2.5vw;
	width:2.5vw;
	position:relative;
	display:inline-block;
	margin-left:2vw;
}

#txtdessin:before
{
	content:"";
	background: url('images/tempsav.png') no-repeat ;
	background-size:2.1vw;
	height:9.4vw;
	width:2.1vw;
	position: absolute;
	display:inline;
	top:-1vw;
	right:-5vw;
}

#txtelect:before
{
	content:"";
	background: url('images/tempsinter.png') no-repeat ;
	background-size:2.1vw;
	height:9.4vw;
	width:2.1vw;
	position: absolute;
	display:inline;
	top:-1vw;
	right:-5vw;
	
}

#txtcine:before
{
	content:"";
	background: url('images/tempsav.png') no-repeat ;
	background-size:2.1vw;
	height:9.4vw;
	width:2.1vw;
	position: absolute;
	display:inline;
	top:-1vw;
	right:-5vw;
}

#txtprogra:before
{
	content:"";
	background: url('images/tempsav.png') no-repeat ;
	background-size:2.1vw;
	height:9.4vw;
	width:2.1vw;
	position: absolute;
	display:inline;
	top:-1vw;
	right:-5vw;
	
}

#txtjeu:before
{
	content:"";
	background: url('images/tempsav.png') no-repeat ;
	background-size:2.1vw;
	height:9.4vw;
	width:2.1vw;
	position: absolute;
	display:inline;
	top:-1vw;
	right:-5vw;
	
}

#emm
{
	
	background: url('images/ico-ecolemulti.png') no-repeat center;	
	background-size:7.2vw;
}
#LS
{
	
	background: url('images/ico-ls.png') no-repeat center;	
	background-size:7.2vw;
}
#gatezero
{
	
	background: url('images/ico-gatezero.png') no-repeat center;	
	background-size:7.2vw;
}

#Equasoft
{
	
	background: url('images/logo-equasoft.png') no-repeat center;	
	background-size:7.2vw;
}

#MMI
{
	background: url('images/ico-mmi.png') no-repeat center;	
	background-size:7.2vw;
	
}

#UQAT
{
	background: url('images/ico-uqat.png') no-repeat center;	
	background-size:7.2vw;
	
}
#IIM
{
	background: url('images/ico-iim.png') no-repeat center;	
	background-size:7.2vw;
	
}
#freelance
{
	background: url('images/ico-freelance.png') no-repeat center;	
	background-size:7.2vw;
	
}
#RJS
{
	background: url('images/ico-rjs.png') no-repeat center;	
	background-size:4.3vw;
	
}
#teacher
{
	background: url('images/ico-teacher.png') no-repeat center;	
	background-size:4.3vw;
	
}

#jdb
{
	background: url('images/ico-sti2d.png') no-repeat center;	
	background-size:7.2vw;	
}

#toshop
{
	background: url('images/logiciels/ico-photoshop.png') no-repeat center;	
	background-size:6.1vw;
	
}

.toshop2
{
	background: url('images/logiciels/ico-photoshop.png') no-repeat center;	
	background-size:2.5vw;
}

#after
{
	background: url('images/logiciels/ico-after.png') no-repeat center;		
	background-size:6.1vw;
}

.after2
{
	background: url('images/logiciels/ico-after.png') no-repeat center;		
	background-size:2.5vw;
}

#illustrator
{
	background: url('images/logiciels/ico-illustrator.png') no-repeat center;		
	background-size:6.1vw;
}

#indesign
{
	background: url('images/logiciels/ico-indesign.png') no-repeat center;		
	background-size:6.1vw;
}

#thegimp
{
	background: url('images/logiciels/thegimp.png') no-repeat center;		
	background-size:6.1vw;
}

#solidworks
{
	
	background: url('images/logiciels/solidworks-logo.png') no-repeat center;		
	background-size:6.1vw;
}

.illustrator2
{
	background: url('images/logiciels/ico-illustrator.png') no-repeat center;		
	background-size:2.5vw;
}

.indesign2
{
	background: url('images/logiciels/ico-indesign.png') no-repeat center;		
	background-size:2.5vw;
}

#flash
{
	background: url('images/logiciels/ico-flash.png') no-repeat center;		
	background-size:6.1vw;
}

.flash2
{
	background: url('images/logiciels/ico-flash.png') no-repeat center;		
	background-size:2.5vw;
}

#premiere
{
	background: url('images/logiciels/ico-premiere.png') no-repeat center;		
	background-size:6.1vw;
}

.premiere2
{
	background: url('images/logiciels/ico-premiere.png') no-repeat center;		
	background-size:2.5vw;
}

#dreamviewer
{
	background: url('images/logiciels/ico-dream.png') no-repeat center;		
	background-size:6.1vw;

}

#android_studio
{
	background: url('images/logiciels/android_studio.png') no-repeat center;		
	background-size:6.1vw;
}

#unity
{
	background: url('images/logiciels/unity.png') no-repeat center;		
	background-size:6.1vw;
}

#puredata
{
	background: url('images/logiciels/pd.png') no-repeat center;		
	background-size:6.1vw;
}

#web
{
	background: url('images/web.png') no-repeat center;		
	background-size:6.1vw;
}

.dreamviewer2
{
	background: url('images/logiciels/ico-dream.png') no-repeat center;		
	background-size:2.5vw;

}


#cinema4D 
{
	background: url('images/logiciels/C4D.png') no-repeat center;		
	background-size:6.1vw;	
}

#max 
{
	background: url('images/logiciels/3dsmax-logo.png') no-repeat center;		
	background-size:6.1vw;	
}

#blender 
{
	background: url('images/logiciels/blender-logo.png') no-repeat center;		
	background-size:6.1vw;	
}

#maya
{
 	background: url('images/logiciels/maya.png') no-repeat center;		
	background-size:6.1vw;   
}

#perforce
{
 	background: url('images/logiciels/perforce.png') no-repeat center;		
	background-size:6.1vw;   
}

#zbrush
{
	background: url('images/logiciels/zbrush-logo.png') no-repeat center;		
	background-size:6.1vw;
}
#substance_painter
{
	background: url('images/logiciels/substance_painter-logo.png') no-repeat center;		
	background-size:6.1vw;
}
#houdini
{
	background: url('images/logiciels/houdini-logo.png') no-repeat center;		
	background-size:6.1vw;
}

.houdini2
{
	background: url('images/logiciels/houdini-logo.png') no-repeat center;		
	background-size:2.5vw;
}

#unreal
{
	background: url('images/logiciels/unreal-logo.png') no-repeat center;		
	background-size:6.1vw;
}
.blender2
{
	background: url('images/logiciels/blender-logo.png') no-repeat center;		
	background-size:2.5vw;
}

.max2
{
	background: url('images/logiciels/3dsmax-logo.png') no-repeat center;		
	background-size:2.5vw;
}

.zbrush2
{
	background: url('images/logiciels/zbrush-logo.png') no-repeat center;		
	background-size:2.5vw;
}


.unreal2
{
	background: url('images/logiciels/unreal-logo.png') no-repeat center;		
	background-size:2.5vw;
}

.substance_painter2
{
	background: url('images/logiciels/substance_painter-logo.png') no-repeat center;		
	background-size:2.5vw;
}

.cinema4D2
{
	background: url('images/logiciels/C4D.png') no-repeat center;		
	background-size:2.5vw;	
}


.unity2
{
	background: url('images/logiciels/unity.png') no-repeat center;		
	background-size:2.5vw;	
}

#arduino 
{
	background: url('images/logiciels/ico-arduino.png') no-repeat center;		
	background-size:6.1vw;	
}


.arduino2
{
	background: url('images/logiciels/ico-arduino.png') no-repeat center;		
	background-size:2.5vw;
		
}
#processing 
{
	background: url('images/logiciels/ico-processing.png') no-repeat center;		
	background-size:6.1vw;
		
}

.processing2
{
	background: url('images/logiciels/ico-processing.png') no-repeat center;		
	background-size:2.5vw;
		
}

.icone-videos,.icone-dessin,.icone-3D,.icone-progra,.icone-logo, .icone-flash, .icone-2D, .icone-jeu
{
	
	background-size: 3.5vw;
	height:2.7vw;
	width:3.5vw;
	margin-right:auto;
	margin-left:auto;
	margin-top:2.5vw;	
}

.icone-videos
{
	background:url('images/icone-videos.png') no-repeat center;
	background-size: 3.5vw;
}

.icone-flash
{
	background:url('images/icone-flash.png') no-repeat center;
	background-size: 3.5vw;
}

.icone-logo
{
	background:url('images/icone-logo.png') no-repeat center;
	background-size: 3.5vw;
}

.icone-dessin
{
	background:url('images/icone-dessin.png') no-repeat center;
	background-size: 3.5vw;
}

.icone-3D
{
	background:url('images/icone-3D.png') no-repeat center;
	background-size: 3.5vw;
}
.icone-2D
{
	background:url('images/icone-2D.png') no-repeat center;
	background-size: 3.5vw;
}

.icone-jeu
{
	background:url('images/icone-jeu.png') no-repeat center;
	background-size: 3.5vw;
}


.icone-progra
{
	background:url('images/icone-progra.png') no-repeat center;
	background-size: 3.5vw;

}



#avatar
{
	
	background:url('images/avatar3.png') no-repeat center;
	background-size:14.5vw;
	height:14.5vw;
	width:14.5vw;
	margin-left:auto;
	margin-right:auto;
	animation:ease-in-out;
	z-index:1;
	position:relative;
	margin-top:-13.7vw;
	border-radius:50%;

}


#avatar:hover
{

	animation:ease-in-out;
	border-radius:50%;
	-ms-transform: scale(0.95,0.95);  
    -webkit-transform: scale(0.95,0.95); 
    transform: scale(0.95,0.95); 
	transition-duration: 0.4s;

}


#avatar2
{
	position:relative;	
	background-size:14.5vw;
	height:12.5vw;
	width:12.5vw;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0vw;
	border:0.2em solid #d35700;
	border-radius:50%;
	-ms-transform: scale(1,1);  
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
	z-index:2;
	margin-top:3vw;
}

#avatar2:hover
{


	border:0.2em solid #d35700;
	border-radius:50%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0vw;
	-ms-transform: scale(1.1,1.1);  
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1); 
	transition-duration: 0.4s;
}

#avatar2:hover + #avatar
{
	-ms-transform: scale(0.95,0.95);  
    -webkit-transform: scale(0.95,0.95); 
    transform: scale(0.95,0.95); 
	transition-duration: 0.4s;
}
	
.cv 
{

	margin-bottom:3vw;	
	width:8vw;
	margin-left:auto;
	margin-right:auto;

}
	
.cv a
{
	color: #909090;
	text-shadow: 0.1vw 0.2vw #050505;	
	text-decoration:none;
}
.cv a:hover
{
	color: #d35700;
	text-shadow: 0.1vw 0.2vw #050505;	
}
	
.bulle-poly
{
	background:url('images/bulle-poly.png') no-repeat center;
	background-size:7.5vw;
	height:1.9vw;
	width:7.5vw;
	position:absolute;
	margin-left:36vw;
	margin-top:2.4vw;
	font-family:Calibri;
	font-size:1vw;
	text-shadow:#863907 1px 1px , #863907 -1px 1px , #863907 -1px -1px , #863907 1px -1px;
	color:#ffc56d;
	padding-right:1.5vw;
	padding-top:0.3vw;

}

.bulle-serieux
{
	background:url('images/bulle-serieux.png') no-repeat center;
	background-size:6.5vw;
	height:1.5vw;
	width:6.5vw;
	position:absolute;
	margin-left:37vw;
	margin-top:15.5vw;
	font-family:Calibri;
	font-size:1vw;
	text-shadow:#863907 1px 1px , #863907 -1px 1px , #863907 -1px -1px , #863907 1px -1px;
	color:#ffc56d;
	padding-right:1.2vw;
	padding-top:0.3vw;

}

.bulle-passion
{
	background:url('images/bulle-passion.png') no-repeat center;
	background-size:7.5vw;
	height:1.9vw;
	width:7.5vw;
	position:absolute;
	margin-left:54vw;
	padding-left:1.4vw;
	margin-top:2.4vw;
	font-family:Calibri;
	font-size:1vw;
	text-shadow:#863907 1px 1px , #863907 -1px 1px , #863907 -1px -1px , #863907 1px -1px;
	color:#ffc56d;
	padding-top:0.3vw;

}

.bulle-motiv
{
	background:url('images/bulle-motiv.png') no-repeat center;
	background-size:6.5vw;
	height:1.5vw;
	width:6.5vw;
	position:absolute;
	margin-left:54.5vw;
	margin-top:15.5vw;
	font-family:Calibri;
	font-size:1vw;
	text-shadow:#863907 1px 1px , #863907 -1px 1px , #863907 -1px -1px , #863907 1px -1px;
	color:#ffc56d;
	padding-left:1.1vw;
	padding-top:0.3vw;
}

.boutontop a
{
	background:#ff7607;
	right:10vw;
	position:absolute;
	bottom:0px;
	width:2.5vw;
	height:2.2vw;
	color:#161515;
	text-decoration:none;
	border-top:0.4vw solid #121110;
	border-radius:2vw 2vw 0 0;
	border-right:none;
	border-left:none;
	border-bottom:none;
	font-size:2.5vw;
	font-family:'OCR A Std';
	text-shadow:none;
}

#blocksocial
{
	position:relative;
    width: 100%;
    height: 31vw;
	background-color:#dddddd;
	display:inline-block;
    font-size:0.8vw;
}

#zone
{
	margin-top:1vw;
	margin-left:16vw;
	width:65vw;	
	height: 25vw;
}

#blocksocial h2
{
	padding-left:1.3vw;
	font-family: 'Calibri';
	font-style: italic;
	color:#282727;
	font-size:1.2vw;
	display:inline;
}

#email
{
	border-radius: 1vw;
}

#social
{	
	float:right;
	height:100%;
}

.sepaorangeblanc
{
	background: url('images/sepa-orange-blanc.png') no-repeat ;
	height:0.4vw;
	width:24.5vw;
	position:relative;
	background-size:25vw;
	display:inline-block;
}

#fb:hover, #deviantart:hover, #youtube:hover, #linkedin:hover, #artstation:hover
{
	opacity:0.5;	
	  -webkit-transition: all .4s ease; 
     transition-duration: 0.4s;
}


#fb
{
	background: url('images/facebook.png') no-repeat  ;
	display:inline-block;
	margin-top: 1.5vw;
	background-size:6.5vw;
	height:6.5vw;
	width:6.5vw;
	margin-left:15%;
	margin-right:15%;
}
#artstation
{
	background: url('images/artstation.png') no-repeat  ;
	display:inline-block;
	background-size:6.5vw;
	height:6.5vw;
	width:6.5vw;
}
#linkedin
{
	background: url('images/linkedin.png') no-repeat  ;
	display:inline-block;
	margin-top: 1.5vw;
	background-size:6.5vw;
	height:6.5vw;
	width:6.5vw;
	margin-left:15%;
	margin-right:15%;
}

#deviantart
{
	background: url('images/deviantart.png') no-repeat  ;
	display:inline-block;
	background-size:6.5vw;
	height:6.5vw;
	width:6.5vw;
}

.sepaorangeblanc2
{
	background: url('images/sepa-orange-blanc.png') no-repeat  ;
	height:0.4vw;
	width:24.5vw;
	position:relative;
	background-size:25vw;
	display:inline-block;
}

#youtube
{
	background: url('images/ico-youtube.png') no-repeat  ;
	height:2.5vw;
	width:6.1vw;
	position:relative;
	background-size:6vw;
	display:block;
	margin-top:1vw;
    margin-left:9vw;
}

.formulaire
{
	background-color:#505052;
	border-radius: 0.3vw;
	box-shadow: 0 0 0.5vw #FFFFFF;
	font-family: 'Calibri';
	font-style: italic;
	color:white;
	border:solid 0.2vw #404040;
	resize:none;
}

#footer
{
	width:100%;
	height:4vw;	
	background-color:#26262c;
	position:relative;
	font-size:0.9vw;
	border-top: solid 0.2vw #231611;
}

#footer ul li
{
	color: #a7a7a7;
    display: inline-block;
	list-style-type: none;
	text-decoration: none;	
	padding-left:3vw;
}

#droits
{
	font-size:0.8vw;
	margin-top:1vw;
	color: #a7a7a7;
	display:inline-block;
	margin-left:2vw;
	margin-top:0.9vw;
}

#sign
{
	
	background: url('images/signature.png') no-repeat  ;
	height:2.5vw;
	width:4vw;
	position:relative;
	background-size:4vw;
	margin-right:2vw;
	float:right;	
	display:inline-block;
	margin-top:0.8vw;
}

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:80%;
	max-height:80%;
	background-color:#181b1d;
}
#lightbox p {
    text-align:right; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}

#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
	margin:auto;
    background:url(images/overlay.png) repeat; 
    text-align:center;
	display:none;
	z-index:90;
}
#content
{
	position:relative;
	margin-top:15vh;	
}

@keyframes animationFrames{
  0% {
    opacity:0;
    transform:  translate(0px,-1em)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}


@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,-1em)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@keyframes animationFrames3{
  0% {
    opacity:0.2;
    transform:  scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes animationFrames3{
  0% {
    opacity:0.2;
    -webkit-transform:  scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}


@keyframes animationFrames4{
  0% {
    opacity:0;
    transform:  translate(-3em,0px) ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px) ;
  }
}

@-webkit-keyframes animationFrames4{
  0% {
    opacity:0;
    -webkit-transform:  translate(-3em,0px) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px) ;
  }
}


@keyframes animationFrames2{
  0% {
    opacity:0;

  }
  100% {
    opacity:1;

  }
}

@-webkit-keyframes animationFrames2{
  0% {
    opacity:0;

  }
  100% {
    opacity:1;

  }
}


@keyframes animationFrames5{
  0% {
    opacity:0;

  }
  100% {
    opacity:0.7;

  }
}

@-webkit-keyframes animationFrames5{
  0% {
    opacity:0;

  }
  100% {
    opacity:0.7;

  }
}


@keyframes transit{
  0% {
    opacity:0;
    transform:  translate(-23.1vw,0px) ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px) ;
  }
}

@-webkit-keyframes tansit{
  0% {
    opacity:0;
    -webkit-transform:  translate(-23.1vw,0px) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px) ;
  }
}


/********************** CSS galerie justifier  ************************/

.onoffswitch {
    position: absolute;
	 width: 200px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	right:20px;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "Personnal Work";
    padding-left: 10px;
    background-color: #666666; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "Professional Work";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    left: 0px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	left:165px;
}




@media screen and (max-width: 1400px) 
{
/*.nav li
{
width:11.7vw;	
}*/


	
}



@media screen and (max-width: 1300px) {
	
	.img_tab2
	{
		width:900px;	
	}
	
	#video
	{
		width:800px;
		height:460px;
	
	}
	
	#sketchfab
	{
		width:800px;	
		height:460px;
	}
	
	
	
	
}


@media screen and (max-width: 1200px) {
	.grid {
		padding: 10px 10px 10px 10px;
	}
	.grid li {
		width: 40%;
		/*min-width: 300px;*/
	}
	.img_tab2
	{
		width:700px;	
	}
	
	#video
	{
		width:700px;
		height:393px;
	
	}
	
	#sketchfab
	{
		width:700px;	
		height:393px;
	}
	
	.img_galerie
	{
		height:200px !important;
		background-size:initial;	
	}
    
    #contenue
    {
        margin: 0px 100px 0px 100px;
        border-radius:30px;
    }
    
    #blockcgal li:not(.dot)
    {
    font-size:12px;   
    }
    

    .txtgras
    {
        font-size:15px;
    }
}


@media screen and (max-width: 1000px) {
	.grid {
		padding: 10px 10px 10px 10px;
	}
	.grid li {
		/*width: 100%;*/
		min-width: 200px;
	}
	.img_galerie
	{
		height:200px !important;
		background-size:initial;	
	}
	
	.img_tab2
	{
		width:500px;	
	}
	#video
	{
		width:500px;
		height:281px;
	
	}
	
	#sketchfab
	{
		width:500px;
		height:281px;
	
	}
}

@media screen and (max-width: 800px) {
	.grid {
		padding: 10px 10px 10px 10px;
	}
	.grid li {
		/*width: 100%;*/
		min-width: 200px;
	}
	
	.img_galerie
	{
		height:150px !important;
		background-size:initial;	
	}
	
	.img_tab2
	{
		width:400px;	
	}
	#video
	{
		width:400px;	
		height:197px;

	}
	#sketchfab
	{
		width:400ppx;
		height:197px;
	
	}
    
    #contenue
    {
        margin: 0px 50px 0px 50px;
        border-radius:15px;
    }
    
    #blockcgal li:not(.dot)
    {
    font-size:8px;   
    }
    
    .txtgras
    {
        font-size:10px;
    }
}





.grid {
	padding: 30px 50px 30px 50px;
	/*max-width: 1300px;*/
	margin: 0 auto;
	list-style: none;
	text-align: center;
		-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.grid li {
	display: inline-block;
	width: 15vw;
	margin: 0;
	padding: 5px;
	text-align: left;
	position: relative;
	vertical-align: middle;
	border: 1px solid #000000;
    border-bottom: 5px solid #111;
	background-color: rgba(20,20,20,0.5);

	
}

.grid figure {
	margin: 0;
	position: relative;
}

.grid figure div {
	max-width: 100%;
	display: block;
	position: relative;
}

.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px;
	background: #2c3f52;
	color: #f79420;
}

.grid .figcaption2 {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: none;
	color: #f79420;
}

.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #fff;
}

.grid figcaption span:before {
	/*content: 'by ';*/
}

.grid figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #f79420;
	color: #fff;
}

.grid .figcaption2 a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: none;
	color: #fff;
}

/* Individual Caption Styles */

/* Caption Style 1 */


/* Caption Style 3 */
.cs-style-3 figure {
	overflow: hidden;
}

.cs-style-3 figure div {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
	
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.no-touch .cs-style-3 figure:hover div,
.cs-style-3 figure.cs-hover div {
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);
	
	filter: brightness(30%);
        -webkit-filter: brightness(30%);
        -moz-filter: brightness(30%);
        -o-filter: brightness(30%);
        -ms-filter: brightness(30%);
	
}

.no-touch .cs-style-3 .figcaption2:hover div,
.cs-style-3 .figcaption2.cs-hover div {
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	transform: translateY(30px);
	
	filter: brightness(30%);
        -webkit-filter: brightness(30%);
        -moz-filter: brightness(30%);
        -o-filter: brightness(30%);
        -ms-filter: brightness(30%);
	
}

figure.hover div {
filter: brightness(30%);
        -webkit-filter: brightness(30%);
        -moz-filter: brightness(30%);
        -o-filter: brightness(30%);
        -ms-filter: brightness(30%);
}

.cs-style-3 figcaption {
	/*height: 100px;*/
	width: 100%;
	top: auto;
	bottom: 0;
	opacity: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.cs-style-3 .figcaption2 {
	/*height: 100px;*/
	width: 100%;
	top: 0;
	bottom: auto;
	opacity: 0;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY-(100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}

.cs-style-3 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

/* Caption Style 4 */


/* Caption Style 7 */
.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }

.cs-style-7 figure div {
	z-index: 10;
}

.cs-style-7 figcaption {
	height: 100%;
	width: 100%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
	-moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
	transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
	box-shadow: 0 0 0 0px #2c3f52;
}

.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
	opacity: 1;
	height: 130%;
	box-shadow: 0 0 0 10px #2c3f52;
}

.cs-style-7 figcaption h3 {
	margin-top: 86%;
}

.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
	opacity: 0;
	-webkit-transition: opacity 0s;
	-moz-transition: opacity 0s;
	transition: opacity 0s;
}

.cs-style-7 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
	-webkit-transition: opacity 0.3s 0.2s;
	-moz-transition: opacity 0.3s 0.2s;
	transition: opacity 0.3s 0.2s;
	opacity: 1;
}

.img_galerie
{
	background-size: 400px;
	height: 10vw;	
}

.checkbox_recherche
{
	display:none;	
}

.Preview_travaux
{
    
    width: 15vw !important;
    cursor: pointer;
}



.mySlides1, .mySlides2, .mySlides3, .mySlides4 , .mySlides5, .mySlides6  {display: none}
/*img {vertical-align: middle;}*/

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}