html{
width: 100%;
height: 100%;
}

body{
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.05em;
font-weight: 400;
background: #000;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

a{text-decoration : none;color: #000;}
a:hover{text-decoration : underline;color: #000;}
img{border: none;}

.box{
width: 20%;
height: 20%;
margin: -1px;
padding: 0.072em 0.08em 0.11em 0.08em;
float: left;
position: relative;
background-color: #EEE;
box-shadow: inset 0 0px 0 1px rgba(0,0,0,0.05);
text-align: center;
}
.box a, .box div{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
box-shadow: inset 0 0px 0 1px rgba(0,0,0,0.05);
text-align: center;
}
.box a:hover{
opacity: 0;
}
.box a img{
position: absolute;
top: 50%;
bottom: 50%;
right: 50%;
left: 50%;
display: inline-block;
margin-top: -50px;
margin-left: -50px;
}
.b24 a img{
margin-top: -72px;
margin-left: -80px;
}

.b02 div p a, .b05 div a{
position: relative;
display: inline-block;
box-shadow: none;
text-align: left;
}
.b02 div p a:hover, .b05 div a:hover{opacity:1;}

.box div p{
padding: 10px 15px;
margin: 0;
text-align: left;
}
.name{
display: block;
font-size: 24px;
color: #FFF;
font-weight: 400;
margin-bottom: 5px;
}
.box div p i{
display: block;
font-size: 14px;
color: #000;
font-weight: 400;
}
.box div p span{
margin-top: 5px;
font-size: 12px;
display: inline-block;
}

.right{
text-align: right !important;
}
.link_coulisses{
display: inline-block;
height: 70px;
width: 70px;
background: url(coulisses.svg);
background-size: 100% 100%;
float: right;
margin: 3px 0 0 0;
}

.social{
position: absolute;
right: 14px;
bottom: 12px;
height: 30px;
text-align: right;
}
.social a{
display: inline-block;
height: 30px;
width: 30px;
}
.social a:hover{opacity: 0.6 !important;}
.fb{background: url(fb.png);}
.pi{background: url(pi.png);}
.ab{background: url(ab.png);margin: 0 7px 0 3px;}

.b02_social{display: none !important;}


@media screen and (max-width: 1000px){
	.box{width: 25%;}
	.b03,.b21,.b20,.b18,.b17{display: none;}

	.b02 div{background: #72a581 !important;}
	.b04 div{background: #279a82 !important;}
	.b05 div{background: #009183 !important;}
	.b06 div{background: #a49375 !important;}
	.b07 a{background: #798a76 !important;}
	.b08 a{background: #428277 !important;}
	.b09 a{background: #007b78 !important;}
	.b10 a{background: #a5756a !important;}
	.b11 div{background: #7e6f6c !important;}
	.b12 a{background: #506a6d !important;}
	.b13 a{background: #00656e !important;}
	.b14 a{background: #a55560 !important;}
	.b15 a{background: #815362 !important;}
	.b16 a{background: #595164 !important;}
	.b19 a{background: #214f65 !important;}
	.b22 a{background: #a62a57 !important;}
	.b23 a{background: #842f59 !important;}
	.b24 a{background: #5f325b !important;}
	.b25 a{background: #34355c !important;}
}

@media screen and (max-width: 800px){
	.box{width: 33.333%;}
	.b03,.b20,.b18,.b17,.b11,.b06,.b04{display: none;}
	.b21{display: block;}

	.b02 div{background: #6db286 !important;}
	.b05 div{background: #03a687 !important;}
	.b07 a{background: #a0b080 !important;}
	.b08 a{background: #72a581 !important;}
	.b09 a{background: #279a82 !important;}
	.b10 a{background: #a49375 !important;}
	.b12 a{background: #798a76 !important;}
	.b13 a{background: #428277 !important;}
	.b14 a{background: #a5756a !important;}
	.b15 a{background: #7e6f6c !important;}
	.b16 a{background: #506a6d !important;}
	.b19 a{background: #a55560 !important;}
	.b21 div{background: #815362 !important;}
	.b22 a{background: #595164 !important;}
	.b23 a{background: #a62a57 !important;}
	.b24 a{background: #842f59 !important;}
	.b25 a{background: #5f325b !important;}
}

@media screen and (max-width: 600px){
	.box{width: 50%;}
	.b21,.b05{display: none;}
	.b02_social{display: block !important;}

	.b02 div{background: #a1c085 !important;}
	.b07 a{background: #6db286 !important;}
	.b08 a{background: #72a581 !important;}
	.b09 a{background: #03a687 !important;}
	.b10 a{background: #009c88 !important;}
	.b12 a{background: #279a82 !important;}
	.b13 a{background: #009183 !important;}
	.b14 a{background: #428277 !important;}
	.b15 a{background: #007b78 !important;}
	.b16 a{background: #506a6d !important;}
	.b19 a{background: #00656e !important;}
	.b22 a{background: #595164 !important;}
	.b23 a{background: #214f65 !important;}
	.b24 a{background: #5f325b !important;}
	.b25 a{background: #34355c !important;}
}

@media screen and (max-width: 400px){
	.box{width: 99.91%;}
	.b06{display: none;}
	.b02_social{display: block !important;}

	.b02 div{background: #d1cf82 !important;}
	.b07 a{background: #a0b080 !important;}
	.b08 a{background: #a1c085 !important;}
	.b09 a{background: #6db286 !important;}
	.b10 a{background: #03a687 !important;}
	.b12 a{background: #279a82 !important;}
	.b13 a{background: #009183 !important;}
	.b14 a{background: #428277 !important;}
	.b15 a{background: #506a6d !important;}
	.b16 a{background: #595164 !important;}
	.b19 a{background: #5f325b !important;}
	.b22 a{background: #842f59 !important;}
	.b23 a{background: #a62a57 !important;}
	.b24 a{background: #c82254 !important;}
	.b25 a{background: #d91d52 !important;}
}

.b01 a{background: #ffde00;}.b01 a:hover{opacity: 0.7 !important;}
.b02 div{background: #a0b080;}
.b03 div{background: #72a581;}
.b04 div{background: #279a82;}
.b05 div{background: #009183;}.b05 div:hover{opacity: 1 !important;}
.b06 div{background: #ce9d72;}
.b07 a{background: #a49375;}
.b08 a{background: #798a76;}
.b09 a{background: #428277;}
.b10 a{background: #007b78;}
.b11 div{background: #cc7c68;}
.b12 a{background: #a5756a;}
.b13 a{background: #7e6f6c;}
.b14 a{background: #506a6d;}
.b15 a{background: #00656e;}
.b16 a{background: #ca585e;}
.b17 div{background: #a55560;}
.b18 div{background: #815362;}
.b19 a{background: #595164;}
.b20 div{background: #214f65;}
.b21 div{background: #c82254;}
.b22 a{background: #a62a57;}
.b23 a{background: #842f59;}
.b24 a{background: #5f325b;}
.b25 a{background: #34355c;}

.b10{background: url(creations/gh.jpg) no-repeat center;background-size: cover;}
.b07{background: url(creations/castles.jpg) no-repeat center;background-size: cover;}
.b08{background: url(creations/rfs.jpg) no-repeat center;background-size: cover;}
.b09{background: url(creations/moon.jpg) no-repeat center;background-size: cover;}
.b12{background: url(creations/pictos.jpg) no-repeat center;background-size: cover;}
.b13{background: url(creations/jewels.jpg) no-repeat center;background-size: cover;}
.b14{background: url(creations/straffe.jpg) no-repeat center;background-size: cover;}
.b15{background: url(creations/tammer.jpg) no-repeat center;background-size: cover;}
.b16{background: url(creations/got.jpg) no-repeat center;background-size: cover;}
.b19{background: url(creations/twentyfour.jpg) no-repeat center;background-size: cover;}
.b22{background: url(creations/artbook.jpg) no-repeat center;background-size: cover;}
.b23{background: url(creations/itw.jpg) no-repeat center;background-size: cover;}
.b24{background: url(creations/invisible.jpg) no-repeat center;background-size: cover;}
.b25{background: url(creations/artbeat.jpg) no-repeat center;background-size: cover;}


/* ABOUT */

header{
height: 200px;
width: 100%;
background: #ffde00;
}
.hbox{
width: 33%;
height: 160px;
float: left;
margin: 20px 0 0 0;
text-align: center;
}
header .hbox:first-child{border-right: 1px dashed #000;}
header .hbox:last-child{border-left: 1px dashed #000;}

.hb1:before{ 
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.hbox img{
width: 50%;
max-height: 160px;
vertical-align: middle;
}

.hbox p{
position: relative;
overflow: hidden;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 15px;
padding: 0;
}

.job{
display: block;
margin: 0 0 20px 0;
font-weight: bold;
font-size: 18px;
}
.adress{
font-size: 12px;
}
.adress i{font-size: 14px;padding: 0 0 5px 0;display: inline-block;}


.box-job{
height: 300px;
width: 25%;
float: left;
position: relative;
overflow: hidden;
}

.job_logo{
background: #000;
position: absolute;
text-align: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.job_logo img{
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
}

.box-job:hover .job_logo{
top: -300px;
bottom: 300px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.box-job p{
background: #EEE;
height: 260px;
padding: 10px;
margin: 10px;
}
.job_title{
font-size: 14px;
display: block;
font-weight: bold;
margin: 0 0 5px 0;
}
.box-job i, .edu-box p i{font-family: Georgia, serif;}
.box-job b, .edu-box p b{
display: block;
font-size: 13px;
margin: 10px 0 10px;
padding: 15px 0 0 0;
border-top: 1px dotted #333;
}
.job_time{
display: block;
color: #666;
margin: 10px 0 0 0;
}

.education{
background: #DDD;
clear: both;
}
.edu-box{
width: 32.5%;
margin: 10px 0 0 0;
display: inline-block;
background: #DDD;
vertical-align: top;
}
.edu-box p{
padding: 10px 20px;
text-align: center;
}

.skills{
height: 200px;
background: #FFF;
clear:both;
}
.skills div{
width: 16.667%;
float: left;
height: 100px;
text-align: center;
color: #FFF;
font-size: 14px;
position: relative;
}
.skills div span{
position: absolute;
top: 50%;
bottom: 50%;
right: 10px;
left: 10px;
margin-top: -28px;
}
.skills div span i{
display: block;
font-weight: 300;
border-top: 1px dotted #000;
margin: 10px 0 0 0;
padding: 5px 0 0 0;
}

.s01{background: #BBB;}
.s02{background: #555;}
.s03{background: #AAA;}
.s04{background: #777;}
.s05{background: #888;}
.s06{background: #444;}
.s07{background: #999;}
.s08{background: #666;}
.s09{background: #888;}
.s10{background: #333;}
.s11{background: #BBB;}
.s12{background: #666;}

@media screen and (max-width: 900px){
	.box-job{width: 50%;height: 250px;}
	.box-job p{height:210px !important;}

	.skills div{width: 33.333%;}
	.skills{height: 400px;}
}
@media screen and (max-width: 500px){
	.box-job{width: 100%;height: 240px;}
	.job_logo{display: none;}
	.box-job p{margin-bottom: 0 !important;}
	.bj1{border-bottom: 10px solid #000;}

	.education{}
	.edu-box{width: 100%;border-bottom: 10px solid #000;padding-bottom: 20px;height: auto;}

	.skills div{width: 50%;}
	.skills{height: 600px;}
}


/* PROJECTS */

.project_infos{
background: #FFF000;
float: left;
position: relative;
}
.project_infos div{
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
margin: 0;
position: absolute;
z-index: 1;
}
.pi_title{
font-size: 54px;
font-family: Georgia, serif;
font-style: italic;
display: block;
border-bottom: 1px dotted #000;
padding: 0 0 20px 10px;
margin: 0 0 5px 0;
}
.pit_castle{font-size: 40px !important;}

@media screen and (max-width: 1100px){
	.tf20{width: 25% !important;}
	.infos_20{width: 100% !important;height: 25%;}.infos_20 .img_scale{display: none;}
}
@media screen and (max-width: 900px){
	.pi_title, .pit_castle{font-size: 30px !important;padding-left: 0;}
}
@media screen and (max-width: 700px){
	.infos_50{width: 100% !important;}
	.infos_25{width: 100% !important;height: 50%;}.infos_25 .img_scale{display: none;}
	.infos_20{width: 100% !important;height: 30%;}.infos_20 .img_scale{display: none;}
	.gh100{width: 100% !important;height: 40%;}.gh100 .img_scale{display: none;}
	.c42{width: 100% !important;height: 30%;}.c42 .img_scale{display: none;}
	.img_50,.img_75,.img_20,.img_60,.img_25,.img_33{width: 100% !important;}
	.tf20{width: 50% !important;}
}
@media screen and (max-width: 400px){
	.tf20{width: 100% !important;}
}

.pi_type{
font-size: 13px;
font-style: italic;
display: block;
margin: 0 0 10px 0;
}
.pi_description{
font-size: 14px;
font-weight: 300;
}
.pi_description i{font-family: Georgia, serif;}

.back{
position: absolute;
bottom: 0;
right: 0;
text-align: right;
}

.infos_50{width: 50%;}
.infos_33{width: 33.333%;}
.infos_25{width: 25%;}
.infos_20{width: 20%;}

.img_20{width: 20%;float: left;}
.img_25{width: 25%;float: left;}
.img_33{width: 33.333%;float:left;}
.img_50{width: 50%;float: left;}
.img_60{width: 60%;float: left;}
.img_66{width: 66.667%;float: left;}
.img_75{width: 75%;float: left;}
.img_100{width: 100%;float: left;}

.img_scale{
width: 100%;
float: left;
position: relative;
z-index: -1;
}


.soon_back{
display: block;
text-align: center;
height: 100px;
line-height: 100px;
clear:both;
}















.box a:hover,.box a,.box div:hover,.box div,.social a,.social a:hover, .job_logo{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}