/* 
	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: url(../img/pattern/shattered_blue.png);
	position:relative;
	font-family: 'OpenSansRegular',calibri, arial,serif;
	color: white;
	
}


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

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

nav 
{
	backgro und:yellow;
	display:block;
	margin:0 auto 20px auto;
	position:relative;
	width:450px;
	height:250px;

}


#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
{
	backgrou nd:blue;
}

nav #langue
{
	backgrou nd:orange;
	position:relative;
	top:15px;
	right:5px;
	font-size:1.6em;
}

nav #langue a
{
    text-decoration: none;
	background: #089c91;
	color:white;
	padding: 0 10px 0 10px;
	
}

nav #menu
{
	display:block;
	text-align:right;
	backgrou nd:blue;
	width:100%;
	positio n:relative;
	top:150px;
	
}


nav #menu a{
	display:inline-block;
	text-transform: uppercase;
	padding:5px 15px ;
	margin:0 0 10px 0;
	backgroun d:purple;
	text-decoration: none;
	font-size:2em;
	color: white;
}



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


footer{
	width:480px;
	height:45px;
	margin: 45px 0 0 0;

}


#footer_menu {
	width:100%;
	margin:auto;
	backgrou nd: blue;
	position:relative;
	top:10px;
}

#footer_menu a{
	display:none;
}

#copyright{
	display:inline-block;
	position:static;
	width:100%;
	margin: 0px auto;
	backgro und:yellow;
	text-align: center;
}

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


/* WELCOME */

#welcome{
	width:100%;
	margin: 25px auto ;
	text-align:center;
}

#welcome div{
	position:static;
	width:90%;
	margin:auto;
	padding: 15px 0 3px 0;
	backgro und: yellow;
	font-size:1.4em;
	text-align:justify;
	
}

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

#slides {
	display:none;
}

#container {
	width:450px;
	height:216px;
	overflow:hidden;
	background: grey;
	border: solid white 10px;
}

#demoreel{
	display:block;
}
/* CATEGORIES */

#largeur{
	width:480px;
	margin:auto;
	backgro und:purple;
}

#work{
	width:300px;
	margin: auto;
	backg round: white;
	vertical-align: top;
	position:relative;
}

.text{
	display:none;
}

.dessin, .trois, .video{
	display:block;
	width:250px;
	margin:0px auto 15px auto;
	vertical-align: top;
	float:none;
	background:grey;
}



.categorie, .thumbnail{
	width:250px;
	height:130px;
	overflow:hidden;
	vertical-align: top;
	backgrou nd:orange;
	position:relative;
}




.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;
}


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


/*
	Menu
*/

.thumbnail{
	margin-left:10px
}



.menu{
	backgr ound:yellow;
	width:480px;
	position:relative;

}

.menu li{
	
	text-align:right;
	text-transform:uppercase;
}

.menu ul{
	display:inline-block;
	position:absolute;
}


.menu a{
	text-decoration: none;
	background:white;
	color: #089c91;
	padding:10px ;
	-moz-transition: all 0s; 
    -webkit-transition: all 0s; 
    -o-transition: all 0s; 
    transition: all 0s;
	
}

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

.menu a:visited{
	text-decoration: none;
	color: white;
	
}

#menu_current{
	margin: 0;
	backgr ound:grey;
	position:relative;
	margin:10px 0;
}

#menu_current li{
	display:inline-block;
	margin: 0 10px 10px 10px
}

#menu_permanent{
	margin-top: 0;
	backgr ound:orange;
	right:10px;
	top:0;
}

#menu_permanent a{
	margin:0px;
	font-size: 3em;
	width: 100px;
	padding: 2px 10px;
}

#menu_permanent a:hover{
	margin:0px;
	font-size: 3em;
	width: 100px;
	padding: 2px 10px;
}

#menu_permanent div{
	margin-top: 0;
}

#menu_permanent a:visited{
	text-decoration: none;
	color: white;
	
}
   /* banniere */

.container_work, .container_about{
	display:inline-block;
	vertical-align:top;
	backgro und:green;
}
.container_work{
	width:480px;
	position:static;
	backgrou nd:blue;
	overflow:hidden;
}

.banniere{
	position:relative;
	width:480px;
	height:160px;
	overflow:hidden;
	margin:auto;
	background: white;

}

.banniere img{
	width:480px;
}

.banniere span{
	text-transform: uppercase;
    font-size: 20px;
	position:absolute;
	right:0;
	bottom:5%;
	padding:10px;
	z-index:400;
	box-s hadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.up{
	position:relative;
	width:480px;
	height:160px;
	margin:auto;
	background:yellow;
}

.up span{
	text-transform: uppercase;
    font-size: 20px;
	position:absolute;
	right:20px;
	bottom:-8px;
	padding:10px;
	z-index:600;
	box-shadow: 3px -2px 3px rgba(0, 0, 0, 0.5);
}

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




/*
	images 
*/

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

.container_work li {
	width:160px;
	height:160px;
	display: inline-block;
	overflow:hidden;
	position: relative;
	margin-left:0px;
	margin-top:0px;
	vertical-align:top;
}



li .img
{
	width:160px;
	position:absolute;
	z-index:10;
}



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 .cover{
	opacity:0.5;
	z-index:20;
}

.container_work li:hover .cover{
	opacity:0;
	-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:-170px;
	-moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s;
}


/* *****************
		ABOUT 
 * ****************/

#about{
	width:450px;
	backgrou nd:orange;
	height:800px;
}

 #about_text{
	position:relative;
	top:195px;
	background:white;
}


.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:300px;
	backgr ound:purple;
	font-family: calibri, arial,serif;
}

#cv{
	margin:30px 20px 0;
	font-size: 1.3em;
}

#about_info_block {
	width:450px;
	height:195px;
	background: url(../img/encart_3.png);
	top:0px;
	left:0px;
}

#about_info_block #repli3, #about_info img {
	display:none;
}

#cv{
	position:absolute;
	display:inline-block;
	right:-35px;
	bottom:20px;
}

#cv div{
	font-size: 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:none;
	position:absolute;
	right:0px;
	bottom:-13px
	
}

#cv_jpg{
	max-width: 100%;
	max-height: 100%;
}

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

 #contact{
	width:480px;
	heig ht:600px;
	background:white;
	margin:auto;	
	margin-top:20px;
	margin-bottom:200px;
	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;

}