@charset "UTF-8";
/* CSS Document */

body {
	padding:0;
	margin:0;
	font-family:'Open Sans', Arial, sans-serif;
	font-weight: 400;
	overflow-x:hidden;
}

.wrap {
	width: 960px;
	margin: 0 auto;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3 s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.clear {
	clear:both;
}

a {
	font-family:'Open Sans', Arial, sans-serif;
	font-weight: 400;
	text-decoration:none;
}


/************************************************** HEADER *********************************************/
#header {
	position: relative;
	height:140px;
	padding-top: 65px;
	z-index:200;
	display:block;
	-webkit-transition: top 0.3s ease-out;
  -moz-transition: top 0.3s ease-out;
  -o-transition: top 0.3 s ease-out;
  -ms-transition: top 0.3s ease-out;
  transition: top 0.3s ease-out;
}

#logo {
	position:absolute;
	left:50%;
	width:150px;
	margin-left:-75px;
}

#menu-left, #menu-right {
	position:absolute;
	left:50%;
	margin-top:35px;
	width:400px;
}

#menu-left {
	margin-left:-475px;
}

#menu-right {
	margin-left:75px;
}

#menu-left div, #menu-right div {
	position:relative;
	font-size:14px;
	color:#999;
	text-transform:uppercase;
}

#menu-left div {
	float:right;
	margin-right:50px;
}

#menu-right div {
	float:left;
	margin-left:50px;
}

#menu-left a, #menu-right a {
	color:#999;
	padding-bottom:3px;
}
 
#menu-left a.current, #menu-left a:hover, #menu-right a.current, #menu-right a:hover {
	color:#153450;
	border-bottom:2px solid #153450;
}

#header .social {
	position:absolute;
	top:65px;
	right:0;
}

#header .social ul {
	padding:0;
	margin:0;
	list-style:none;
}

#header .social ul li {
	display:inline;
}

#header .social a {
	padding:0;
	margin:0;
}

#header .social a:hover {
	border:none;
}

#subtitle {
	width:700px;
	margin:10px auto 30px auto;
	font-size:30px;
	color:#999;
	line-height:40px;
	letter-spacing:1px;
	text-transform:uppercase;
	text-align:center;
	z-index:2;
	-webkit-transition: top 0.3s ease-out;
  -moz-transition: top 0.3s ease-out;
  -o-transition: top 0.3 s ease-out;
  -ms-transition: top 0.3s ease-out;
  transition: top 0.3s ease-out;
}

.bold {
	color:#153450;
}


/************************************************** GRID ********************************************/
.list {
	margin-bottom:30px;
}

.box {
	position:relative;
	float:left;
	width:300px;
	height:380px;
	margin:27px;
	color:#777;
	border-left:1px solid #e3e3e3;
	border-right:1px solid #e3e3e3;
	border-top:1px solid #e3e3e3;
	display:block;
	overflow:hidden;
	cursor:pointer;
	z-index:1;
	-webkit-transition: top 0.3s ease-out;
  -moz-transition: top  0.3s ease-out;
  -o-transition: top  0.3 s ease-out;
  -ms-transition: top  0.3s ease-out;
  transition: top 0.3s ease-out;
}

.box:nth-child(3n+3) {
	float:right;
	margin:27px 0;
}

.box:nth-child(3n+1) {
	margin:27px 0;
}

.box .content {
	width:300px;
	height:380px;
	font-size:14px;
	line-height:26px;
	color:#999;
	text-align:center;
	display:block;
	-webkit-font-smoothing:antialiased;
}

.box .logo {
	position:absolute;
	top:-74px;
	left:50%;
	width:74px;
	height:74px;
	margin-left:-37px;
	border:3px solid #FFF;
	background-color:#fff;
	background-repeat:no-repeat;
	background-position:center center;
	background-size: cover;
	opacity:0;
	display:block;
	z-index:4;
	-moz-border-radius:50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3 s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.box:hover .logo {
	top:100px;
	opacity:1;
}

.box h2 {
	position:relative;
	margin:35px auto 8px auto;
	letter-spacing:1px;
	font-size:24px;
	color:#153450;
	font-weight:normal;
	text-transform:uppercase;
	display:block;
	z-index:4;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3 s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.box:hover h2 {
	color:#FFF;
	margin-top:-40px;
}

.box .role {
	position:relative;
	line-height:18px;
	display:block;
	z-index:4;
}

.box:hover .role {
	color:#CCC;
}

.box .overlay {
	width:300px;
	height:380px;
	top:378px;
	position:absolute;
	background:#294052;
	-webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2 s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.box:hover .overlay {
	top:0px;
}


/***************************** PROJET ***************************/
#overlay_project {
	position:absolute;
	top:0;
	left:50%;
	width:302px;
	height:0px;
	opacity:0;
	z-index:0;
	-webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#overlay_project.active {
	position:fixed;
	background: #294052;
	z-index:500;
	overflow:inherit;
	opacity:1;
	-webkit-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out;
  -moz-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out;
  -o-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out;
  -ms-transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out;
  transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, margin-left 0.3s ease-out, opacity 0s ease-out;
}

#project {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:0;
	overflow:hidden;
	opacity:0;
	z-index:0;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3 s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#project.visible {
	top:0;
	height:auto;
	padding-bottom:100px;
	opacity:1;
	z-index:1000;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3 s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.center {
	width:980px;
	margin:0 auto;
}

#project .hero {
	position:absolute;
	left:0;
	top:-320px;
	width:100%;
	height:320px;
	overflow:hidden;
	opacity:0;
	z-index:1;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#project.visible .hero {
	top:0;
	background-repeat:no-repeat;
	background-position:top center;
	opacity:1;
	-webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

#project .imac {
	position:relative;
	width:618px;
	margin:-500px auto 0 auto;
	opacity:0;
	z-index:3;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#project .iphone {
	position:relative;
	width:231px;
	margin:-986px auto 0 640px;
	opacity:0;
	z-index:3;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}


#project.visible .imac {
	margin:50px auto 0 auto;
	opacity:1;
	-webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
	-webkit-transition-delay: 0.7s;
	transition-delay: 0.7s;
}

#project.visible .iphone {
	margin:-380px auto 0 640px;
	opacity:1;
	-webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
	-webkit-transition-delay: 0.82s;
	transition-delay: 0.82s;
}

#project h1 {
	margin:60px auto 50px auto;
	font-weight:normal;		
	text-align:center;
	font-size:60px;
	color:#FFF;
	text-transform:uppercase;
	letter-spacing:3px;
	opacity:0;
	-webkit-font-smoothing:antialiased;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#project.visible h1 {
	opacity:1;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 1.2s;
	transition-delay: 1.2s;
}

#project p {
	width:620px;
	margin:0 auto 40px auto;
	font-weight:normal;	
	text-align:center;
	font-size:14px;
	line-height:20px;
	letter-spacing:1px;
	color:#FFF;
	opacity:0;
	-webkit-font-smoothing:antialiased;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#project p.link {
	margin:-20px auto 40px auto;
	opacity:0;
}

#project p.margin {
	margin:0px auto;
}

#project.visible p {
	opacity:1;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 1.2s;
	transition-delay: 1.2s;
}

#project p.link a {
	border-bottom:1px solid rgba(255, 255, 255, 0);
	opacity:0.6;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#project p.link a:hover {
	border-bottom:1px solid rgba(255, 255, 255, 1);
	opacity:1;
}

#project .line {
	margin:0 auto 40px auto;
	text-align:center;
	opacity:0;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#project.visible .line {
	opacity:1;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 1.3s;
	transition-delay: 1.3s;
}

#project .infos {
	margin:0 auto;
	margin-bottom:30px;
	display:table;
	opacity:0;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#project.visible .infos {
	opacity:1;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 1.5s;
	transition-delay: 1.5s;
}

#project .infos p {
	position:relative;
	float:left;
	width:auto;
	padding:0 35px;
	font-size:12px;
	font-weight:normal;	
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	line-height:20px;
	display:block;
	-webkit-font-smoothing:antialiased;
}

#project .infos p a.sb:hover {
	border-bottom:none;
}

#project .screen {
	position:relative;
	width:800px;
	padding-top:24px;
	padding-bottom:50px;
	margin:0 auto;
	text-align:center;
	background:url('img/barnav.png') top center no-repeat;
	display:block;
}

#project .screen.mobile {
	padding-top:0;
	background:none;
}

#project #screens h2 {
	margin:0px auto 0px auto;
	font-weight:normal;	
	text-align:center;
	font-size:30px;
	color:#FFF;
	text-transform:uppercase;
	letter-spacing:3px;
	-webkit-font-smoothing:antialiased;
}

#project #screens .line {
	margin:40px auto 30px auto;
	text-align:center;
}

#project #screens .lineinfo {
	margin:30px auto 90px auto;
	text-align:center;
}

#project #screens {
	opacity:0;
	-webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#project.visible #screens {
	position:relative;
	opacity:1;
	-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
	-webkit-transition-delay: 2s;
	transition-delay: 2s;
}


#project .screen img {
	position:relative;
	opacity:1;
	-webkit-box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.18);
  box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.18);
}

#project .screen.mobile img {
	-webkit-box-shadow: none;
  box-shadow: none;
}

.zoom {
	position:absolute;
	width:240px; 
	height:240px;
	display:block;
	border-radius:100%;
	-webkit-border-radius:100%;
  -moz-border-radius:100%;
  -o-border-radius:100%;
	background:#d3d3d3; /* Old browsers */
	background:-moz-linear-gradient(top,  #d3d3d3 10%,#ffffff 30%, #e2e2e2 50%, #ffffff 70%, #d3d3d3 80%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(10%,#d3d3d3), color-stop(30%,#FFFFFF,) color-stop(50%,#e2e2e2), color-stop(70%,#ffffff), color-stop(80%,#d3d3d3)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #d3d3d3 10%,#ffffff 30%, #e2e2e2 50%, #ffffff 70%, #d3d3d3 80%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #d3d3d3 10%,#ffffff 30%, #e2e2e2 50%, #ffffff 70%, #d3d3d3 80%); /* Opera 11.10+ */
	box-shadow:0 0 5px 2px rgba(0, 0, 0, 0.25); 
	z-index:99999;
	overflow:hidden;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	-ms-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
}

.zoom:hover {
	width:340px; 
	height:340px;
}

.zoom div {
	position: relative;
	width:220px; 
	height:220px;
	margin:10px 10px;
	border-radius:100%;
	-webkit-border-radius:100%;
  -moz-border-radius:100%;
  -o-border-radius:100%;
  background-repeat:no-repeat;
  background-position:-50px -50px;
	display:block;
	overflow:hidden;
	z-index:100000;
	box-shadow:inset 0 0 10px 0px rgba(0, 0, 0, 0.15);
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	-ms-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
}

.zoom:hover div {
	width:320px;
	height:320px;
	background-position:0 0;
	overflow:hidden;
}

.zoom div img {
	margin-left:-50px;
	margin-top:-50px;
	display:block;
	-webkit-transition:all 0.2s ease-out;
  -moz-transition:all 0.2s ease-out;
  -o-transition:all 0.2s ease-out;
  -ms-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
}

.zoom:hover div img {
	margin-left:0px;
	margin-top:0px;
}

@media (max-width: 568px) {
	.zoom {
		display:none;
	}
}

.op50 {
	opacity:0.5;	
}

.back {
	position:fixed;
	top:-70px;
	right:0px;
	height:70px;
	margin-right:20px;
	padding-left:20px;
	font-size:14px;
	color:#fff;
	text-transform:uppercase;
	font-weight:normal;	
	line-height:14px;
	z-index:10000000;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-font-smoothing:antialiased;
}

.back.visible {
	top:0;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.back:hover {
	opacity:1;
}

.back img {
	position:relative;
	float:left;
	margin-top:2px;
	z-index:10000001;
	cursor:pointer;
	-webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.back div {
	float:left;
	margin-top:32px;
	margin-left:15px;
	cursor:pointer;
}


/************************************** ABOUT ************************************/
#about {
	position:absolute;
	left:0;
	width:100%;
	height:470px;
	margin-top:-470px;
	background:#141414;
	z-index:10;
	-webkit-transition: left 0s ease-out, margin-top 0.3s ease-out;
  -moz-transition: left 0s ease-out, margin-top 0.3s ease-out;
  -o-transition: left 0s ease-out, margin-top 0.3s ease-out;
  -ms-transition: left 0s ease-out, margin-top 0.3s ease-out;
  transition: left 0s ease-out, margin-top 0.3s ease-out;
}

#about.visible {
	-webkit-transition: left 0.3s ease-out, margin-top 0.3s ease-out;
  -moz-transition: left 0.3s ease-out, margin-top 0.3s ease-out;
  -o-transition: left 0.3s ease-out, margin-top 0.3s ease-out;
  -ms-transition: left 0.3s ease-out, margin-top 0.3s ease-out;
  transition: left 0.3s ease-out, margin-top 0.3s ease-out;
}

#bio {
	float:left;
	width:425px;
	font-family:'DIN Next W01 Regular', Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	color:#666;
	font-size:14px;
	line-height:20px;
	letter-spacing:1px;
}

#clients {
	float:left;
	width:140px;
	margin-left:80px;
	font-family:'DIN Next W01 Regular', Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	color:#666;
	font-size:14px;
	line-height:20px;
	letter-spacing:1px;
}

#certifications {
	float:left;
	width:215px;
	margin-left:80px;
	font-family:'DIN Next W01 Regular', Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	color:#666;
	font-size:14px;
	line-height:20px;
	letter-spacing:1px;
}

#resume {
	float:left;
	width:215px;
	margin-left:80px;
	font-family:'DIN Next W01 Regular', Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	color:#666;
	font-size:14px;
	line-height:20px;
	letter-spacing:1px;
}

span.name {
	font-size:12px;
	color:#999;
	letter-spacing:0;
	margin-left:45px;
}

p {
	margin:0 0 15px 0;
	padding:0;
}

p a {
	color:#FFF;
}

p a:hover {
	border-bottom:1px solid #FFF;
}

h3 {
	font-size:28px;
	color:#FFF;
	margin:60px 0 40px 0;
	letter-spacing:1px;
	font-family:'DIN Next W01 Regular', Arial, sans-serif;
	font-weight:normal;	
}


/********************************** FOOTER **********************************/
#footer {
	width:100%;
	background:#141414;	
}

.copyright {
	padding:30px 0;
	text-align:center;
	font-size:14px;
	color:#494949;
	line-height:22px;
}

.copyright a {
	color:#494949;
	text-decoration:underline;
}

.copyright a:hover {
	text-decoration:none;
}