/* 
	Resets defualt browser settings
	reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; 	text-decoration: none; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }

/*
	Page style
*/


body{
	background: /*#c0c0c0;*/ url(../img/pattern/shattered_blue.png);
	position:relative;
	font-family: 'OpenSansRegular',calibri, arial,serif;
	/*color: #666666;*/
	color: #ffffff;
}

#largeur{
	width:960px;
	margin:auto;
	backg round:purple;
	position:relative;
}

header{
	width:100%;
	height:12px;
	background: #089c91;
	box-sh adow: 0px 1px 5px rgba(0, 0, 0, 0.5);
	ma rgin: 0 0 20px 0;
	positi on:fixed;
	z-index:1000;
}

/*************
	  NAV 
 *************/

#julien,#plard {
	font-family: 'AaarghNormal', calibri, arial,serif;
}

nav 
{
	backgrou nd:red;
	display:block;
	margin:0 auto;
	position:relative;
	width:960px;
	height:140px;

}
#title{

	width:300px;
	position:absolute;
	top:35px;
}

#julien {
	font-size:2em;
	margin-bottom:2px;
}

#plard{
	text-transform: uppercase;
	font-size:3.4em;
	position:relative;
	left:-5px;
}

nav #menu
{
	text-align:right;
	backgr ound:blue;
	width:100%;
	position:absolute;
	right:0px;
	top:60px;
	
}

nav #langue
{
	text-align:right;
	backgrou nd:blue;
	width:100%;
	position:absolute;
	right:0px;
	bottom:15px;
	
}

nav #menu a{
	text-transform: uppercase;
	margin:0 0 0 20px;
	padding:5px 15px;
	backgroun d:blue;
	text-decoration: none;
	font-size:1em;
	/*color: #666666;*/
	color: white;
	-moz-transition: all .2s;
    -webkit-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s;
}

nav #menu a:hover
{
    text-decoration: none;
	background: #089c91;
	color:white;
	-moz-transition: all .2s; 
    -webkit-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s;
}

nav #langue a{
	text-transform: uppercase;
	margin:0 10px;
	padding:0px 4px;
	backgroun d:orange;
	text-decoration: none;
	font-size:0.8em;
	/*color: #666666;*/
	color: white;
	-moz-transition: all .2s; 
    -webkit-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s;
}

nav #langue a:hover
{
    text-decoration: none;
	background: #089c91;
	color:white;
}

#menu  .current_page, #langue .current_page{
	background: #089c91;
	color:white;
}

#footer_menu a:visited
{
    text-decoration: none;
	color:white;
	
}
/*   FOOTER   */


footer{
	width:100%;
	height:70px;
	background: #056861;
	color: white;
	margin: 45px 0 0 0;
	posit ion:absolute;
	bott om:0;
}

#footer_menu {
	width:960px;
	margin:auto;
	backgro und: blue;
	position:relative;
	top:10px;
}

#footer_menu a{
	text-transform: uppercase;
	text-decoration: none;
	color:white;
	font-size:0.7em;
	margin-right:10px;
}

#copyright{
	display:inline-block;
	position: absolute;
	right: 0px;
}

#copyright span{
	text-transform: uppercase;
	font-size:0.7em;
	margin-left:10px;
}




/* WELCOME */

#welcome{
	width:100%;
	backgr ound: #089c91;
	margin: 72px auto ;
	text-align:center;
	/*color: #666666;*/
	color: white;
}

#welcome, #work{
	font-family: 'latoregular', calibri, arial ,serif;
}

#welcome div{
	position:static;
	width:800px;
	margin:auto;
	padding: 15px 0 3px 0;
	backgro und: yellow;
	text-transfor m: uppercase;
	font-size:1.6em;
	text-shad ow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	
}

#welcome p{
	margin-bottom:12px;
}


/* CATEGORIES */


#work{
	width:960px;
	ma rgin: auto;
	margin:0px 0px 100px 0px; 
	backg round: #d1e8a4;
}

.text{
	margin: 20px 0;
	text-align:justify;
	backgrou nd:red;
	padding:10px;
	height:80px;
}
.dessin, .trois, .video{
	display:inline-block;
	width:250px;
	vertical-align: top;
	background:white;

}

.dessin, .trois{
	margin-right:105px;
}

.categorie, .thumbnail{
	width:250px;
	height:130px;
	overflow:hidden;
	vertical-align: top;
	box-sha dow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	backgrou nd:orange;
	padding:0px;
	border-top:solid 8px #089c91;
	border-bottom:solid 8px #089c91;
	position:relative;
}

.thumbnail{
	width:250px;
	height:130px;
	backgro und:orange;

}

#thumbnail_2d,#thumbnail_3d,#categorie_3d,#thumbnail_video{
	position:absolute;
	z-index:1;
}


.categorie .cover{
	width:100%;
	height:100%;
	position:absolute;
	z-index:20;
}
	

h1{
    font-family: Calibri, arial, serif;
    font-weight: normal;
    text-transform: uppercase;
	font-size: 1.5em;
}

#demoreel{
	display:none;
}

/* *****************
		WORK 
 * ****************/


/*
	Menu
*/

.thumbnail .cover{
	width:250px;
	height:130px;
	position:absolute;
	background:rgba(0,0,0,0.5);
	z-index:20;
}
.thumbnail span ,.categorie span{
    color: white;
    text-transform: uppercase;
    font-size: 2em;
    text-align: right;
    position: absolute;
	top:70%;
	right:0;
	backg round:white;
	padding:0 10px;
	z-index:100;
}

.menu{
	bac kground:yellow;
	width:250px
}
.menu li{
	text-align:right;
	text-transform:uppercase;
	mar gin:10px 0 0 0;
}

#menu_current div,#menu_permanent div{
	padding:13px 0;
}

#menu_permanent div{
	margin-top: 5px;
}

.menu a{
	text-decoration: none;
	/*color: #666666;*/
	color: white;
	padding:10px ;
	-moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
	border-ri ght:5px solid white;
	
}

#menu_permanent a{
	margin-top:10px;
	background:#089c91;
	color: white;
}

.menu a:hover,#menu_permanent a:hover{
	background:#089c91;
	text-decoration: none;
	color: white;
	padding:10px 20px 10px 45px ;
	-moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s;
}

.menu a:visited{
	text-decoration: none;
	/*color: #666666;*/
	color: white;
	
}

#menu_current{
	margin: 70px 0 0 0;
}

#menu_permanent{
	margin-top: 100px;
}


   /* banniere */

.container_work,.menu, .container_about{
	display:inline-block;
	vertical-align:top;
	backgro und:green;
}
.container_work{
	width:600px;
	position:relative;
	left:106px;
}

.banniere{
	position:relative;
	width:596px;
	height:200px;
	overflow:hidden;
	margin:auto;
	background: white;
	box-sh adow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.banniere span{
	text-transform: uppercase;
    font-size: 20px;
	position:absolute;
	right:0;
	bottom:5%;
	background: rgba(255, 255, 255, 0.8);
	padding:10px;
	z-index:400;
	box-s hadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.up{
	position:relative;
	width:596px;
	height:200px;
	margin:auto;
}
.up span{
	text-transform: uppercase;
    font-size: 20px;
	position:absolute;
	right:-20px;
	bottom:20px;
	background: #089c91;
	color:white;
	padding:10px;
	z-index:600;
	bo x-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}

.repli{
	width:20px;
	height:8px;
	position:absolute;
	right:-20px;
	bottom:12px;
	background: url(../img/repli_5.png);
	z-index:500;
}


/*
	images 
*/

.container_work ul{
	margin:25px auto ;
	back ground:yellow;
	font-size : 0;
}

.container_work li {
	width:197px;
	height:200px;
	display: inline-block;
	overflow:hidden;
	background: white;
	position: relative;
	margin-left:2px;
	margin-top:2px;
	vertical-align:top;
}

.container_work li{background:rgba(8, 156, 145, 0.2);}


li .img
{
	wid th:300px;
	position:absolute;
	z-index:10;
}

.categorie .cover, li .cover{
	width:100%;
	height:100%;
	position:absolute;
	opacity:0;
	background:black;
	-moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
	z-index:20;
}

.categorie:hover .cover, .container_work li:hover .cover{
	opacity:0.5;
	-moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}

.container_work li span {
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    text-align: left;
    position: absolute;
	top:70%;
	left:-170px;
	backgr ound:white;
	width:150px;
	padding-left:10px;
	z-index:100;
		-moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s;
}

.container_work li:hover span{
	left:0;
	-moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s;
}

	/* blocks invisibles */
	
.work_block{
	display:none;
}

.container_work div:first-child{
	display:block;
}

/* *****************
		ABOUT 
 * ****************/
strong{
	font-weight: bold;
}
em{
	font-style:italic
}


 #about {
	position:relative;
	width:850px;
	backgro und:orange;
	margin:auto;	
	margin-top:20px;
	box-shado w: 0px 2px 5px rgba(0, 0, 0, 0.3);
 }

#about_text{
	position:relative;
	background:white;
	padding:15px;
	text-align:justify;
	font-si ze: 1.2em;
	font-family: 'latoregular', calibri, arial,serif;
}

.about_title{
	position:relative;
	backgr ound:yellow;
	left:-35px;
}

.about_title img{
	display:block;
	position:relative;
	backgro und:orange;
	top:-10px;
}

.about_title h1{
	position:relative;
	display:inline-block;
	margin:10px 0;
	padding:5px 20px 5px 10px;
	background:#089c91;
	color:white;
	font-family: 'OpenSansRegular', calibri, arial,serif;
}

#about_text p{
	margin-bottom:10px;
	font-family: calibri, arial,serif;
}

#about_text li{
	font-family: calibri, arial,serif;
}

#about_text ul{
	display:inline-block;
	vertical-align:top;
	backgrou nd:orange;
	margin:0 20px ;
}

#about_text h2{
	margin:10px 0;
	font-weight:bold;
	color: #077870;
	
}
.about_blocks div{
	display:inline-block;
	vertical-align:top;
	backgro und:orange;
}

.about_date{
	width:90px;
	text-align:right;
	margin-right:20px;
}

.about_contenu{
	width:500px;
	backgr ound:purple;
	font-family: calibri, arial,serif;
}

#about a, #about strong{
	font-weight:bold;
	color: #077870;
}

#cv{
	position:absolute;
	display:inline-block;
	right:-20px;
	bottom:20px;
	marg in:20px;
	backgr ound:orange;
}

#cv div{
	font-size: 1.1em;
	display:inline-block;
	color:white;
	font-family: 'OpenSansRegular'calibri, arial,serif;
	margin: 0px;
}
#cv a {
	font-weight:normal;
	color:white;
	padding:8px;
	background:#089c91;
}

#dl{
vertical-align:middle;
margin-right:10px;
	}

#cv .cv{
	display:block;
	position:absolute;
	right:0px;
	bottom:-11px
	
}


#about_info_block{
	width:220px;
	background:#089c91;
	right:-50px;
	top:25px;
	position:absolute;
}



#about_info_block #repli3{
	position:absolute;
	right:0px;
	display:block;
}

/* *****************
		CONTACT
 * ****************/
 #banniere_contact{
	width:700px;
	height:0px;
	background:red;
	overflow:hidden;
	margin:auto;
}

 #contact{
	width:800px;
	heig ht:600px;
	background:white;
	margin:auto;	
	margin-top:20px;
	margin-bottom:540px;
	box-shado w: 0px 2px 5px rgba(0, 0, 0, 0.3);
 }
 #contact img {
	margin-top:10px;
 }
 
/* FONTS */

@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fonts/open-sans-fontfacekit/OpenSans-Regular-webfont.eot');
    src: url('../fonts/open-sans-fontfacekit/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/open-sans-fontfacekit/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/open-sans-fontfacekit/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/open-sans-fontfacekit/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
	
@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../fonts/open-sans-fontfacekit/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/open-sans-fontfacekit/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/open-sans-fontfacekit/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/open-sans-fontfacekit/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/open-sans-fontfacekit/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AaarghNormal';
    src: url('../fonts/Aaargh-fontfacekit/Aaargh-webfont.eot');
    src: url('../fonts/Aaargh-fontfacekit/Aaargh-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Aaargh-fontfacekit/Aaargh-webfont.woff') format('woff'),
         url('../fonts/Aaargh-fontfacekit/Aaargh-webfont.ttf') format('truetype'),
         url('../fonts/Aaargh-fontfacekit/Aaargh-webfont.svg#AaarghNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato/lato-reg-webfont.eot');
    src: url('../fonts/lato/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato/lato-reg-webfont.woff') format('woff'),
         url('../fonts/lato/lato-reg-webfont.ttf') format('truetype'),
         url('../fonts/lato/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}