/*  ------------------------------------------------------------------------------------------  *\
-	Portfolio : Pierrick Point - contact@pierrick.pro
\*  ------------------------------------------------------------------------------------------  */

/* Initialisation */

	@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);

	html, body { padding:0; margin:0; height:100%; overflow:hidden; color:#333; }
	a, a:visited { text-decoration:none; color:#E95C48; }
	a:focus, a:hover { text-decoration:none; color:#333; }
	body { font-family:"Source Sans Pro", sans-serif; font-weight:400; }
	h1, h2, h3, h4, h5, h6 { font-weight:300; margin:0; }
	a, a strong, a span, a small, a img {
		        transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
		-webkit-transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
		   -moz-transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
		     -o-transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; }
	
	input, select, button { font-family:"Source Sans Pro", sans-serif; font-weight:500; font-size:15px; line-height:30px; }

/* Structure */
	
	.area { position:relative; z-index:50; padding:0; margin:0; height:100%; width:100%; background-color:#F7F7F7; overflow:hidden; }
	.area .scene { position:relative; z-index:100; padding:0; margin:0; height:100%; width:100%; vertical-align:top; overflow:hidden; text-align:center; perspective:2000px; }
	.area .interface { position:absolute; z-index:500; top:25px; bottom:25px; left:25px; max-width:360px; text-align:left; white-space:nowrap; overflow:visible; }
	.area .projects { position:absolute; z-index:750; top:10px; right:10px; bottom:10px; left:10px; padding:25px; text-align:center; white-space:normal; overflow:hidden; background-color:rgba(55,55,55,0.95); }

/* Animations */

	.object,
	.object:after,
	.object:before,
	.layer { -webkit-transition:all 0.5s cubic-bezier(.7,-0.3,.0,1.3);
			    -moz-transition:all 0.5s cubic-bezier(.7,-0.3,.0,1.3);
		 	     -ms-transition:all 0.5s cubic-bezier(.7,-0.3,.0,1.3);
		  	      -o-transition:all 0.5s cubic-bezier(.7,-0.3,.0,1.3);
		     	     transition:all 0.5s cubic-bezier(.7,-0.3,.0,1.3); }
	.layer.frame { -webkit-transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; transition:opacity 0.5s ease; }
	.layer.light,
	.layer.shadow { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; }

/* Interface */

	.interface .headline { display:inline-block; vertical-align:top; }
	.interface .headline .name { font-size:25px; line-height:30px; color:#333; font-weight:400; }
	.interface .headline .name strong { color:#E85D4B; font-weight:400; }
	.interface .headline .desc { font-size:18px; line-height:20px; color:#555; font-weight:400; }
	.interface .headline .desc strong { color:#E85D4B; font-weight:600; }

	.interface .logo { display:inline-block; vertical-align:top; height:45px; width:45px; border-radius:50%; margin:5px 10px 0 0; background-color:#E85D4B; }

	.interface .space { display:block; height:25px; }

	.interface .view { display:inline-block; vertical-align:top; /* position:absolute; z-index:550; top:5px; left:15px; */ text-align:left; white-space:nowrap; margin-right:15px; }
	.interface .view .mode { display:inline-block; vertical-align:bottom; margin:0 15px 0 0; font-size:30px; line-height:40px; color:#555; }
	.interface .view .mode.active { color:#E85D4B; }
	.interface .view .mode:not(.active):hover { color:#000; cursor:pointer; }
	.interface .view .mode.tablet { margin-bottom:0; }
	.interface .view .mode.mobile { font-size:36px; margin:0 0 1px 4px; }

	.interface .option { display:inline-block; vertical-align:top; /* position:absolute; z-index:550; top:5px; left:130px; */ text-align:left; white-space:nowrap; border-left:1px solid #DDD; padding-left:14px; }
	.interface .option .type { display:inline-block; vertical-align:bottom; margin:0 10px 0 0; font-size:20px; line-height:40px; color:#555; cursor:pointer; }
	.interface .option .type.active { color:#CCC; }
	.interface .option .switch { display:inline-block; vertical-align:bottom; margin:0 5px 0 0; font-size:12px; line-height:40px; color:#E85D4B; }
	.interface .option .switch.fa-toggle-off { opacity:0.75; }

	.interface .menu { /* position:absolute; z-index:550; top:60px; left:15px; */ text-align:left; white-space:normal; }
	.interface .menu .label { display:block; font-size:15px; line-height:25px; font-weight:400; color:#888; margin:0 0 15px 0; }
	.interface .menu .more { font-size:15px; line-height:25px; font-weight:400; color:#888; margin:0; }
	.interface .menu .items { list-style-type:none; list-style-position:inside; margin:0; padding:0; }
	.interface .menu .items .item { list-style-type:none; list-style-position:inside; margin:0; padding:0; }
	.interface .menu .items .item a,
	.interface .menu .items .item a:visited { font-size:15px; line-height:25px; font-weight:400; color:#444; }
	.interface .menu .items .item a:not(.active):hover,
	.interface .menu .items .item a:not(.active):focus { color:#E85D4B; }
	.interface .menu .items .item a span { color:#AAA; }
	.interface .menu .items .item a.active { font-weight:600; color:#E85D4B; }
	.interface .menu .items .item a.active span { color:#E85D4B; }
	.interface .menu .items .item a.active:before { display:inline-block; margin:0 5px 0 0; font-family:"FontAwesome"; content:"\f054"; font-weight:400; color:#444; }

	.interface .footer { position:absolute; z-index:550; bottom:0; left:0; }
	.interface .footer .contact { display:block; font-size:14px; line-height:22px; font-weight:400; color:#888; }
	.interface .footer .social { display:flex; margin:15px 0 0 0; }
	.interface .footer .social a,
	.interface .footer .social a:visited { display:block; height:35px; width:35px; padding:0; margin:0 10px 0 0; background:#BBB; border-radius:4px; 
		-webkit-filter:grayscale(100%); -webkit-transition:all 0.1s ease-in-out;
		   -moz-filter:grayscale(100%);    -moz-transition:all 0.1s ease-in-out;
		    -ms-filter:grayscale(100%);     -ms-transition:all 0.1s ease-in-out;
		     -o-filter:grayscale(100%);      -o-transition:all 0.1s ease-in-out;
		        filter:grayscale(100%);         transition:all 0.1s ease-in-out; }
	.interface .footer .social a:hover,
	.interface .footer .social a:focus { 
		-webkit-filter:grayscale(0%);
		   -moz-filter:grayscale(0%);
		    -ms-filter:grayscale(0%);
		     -o-filter:grayscale(0%);
		        filter:grayscale(0%); }
	.interface .footer .social a.ventdautan { background:transparent url('../images/icon-ventdautan.png') top left no-repeat; }
	.interface .footer .social a.linkedin { background:transparent url('../images/icon-linkedin.png') top left no-repeat; }
	.interface .footer .social a.viadeo { background:transparent url('../images/icon-viadeo.png') top left no-repeat; }

/* Notifications */

	.notice { display:none; position:fixed; top:15px; right:15px; background-color:#FFF8; border:1px solid #DDD; padding:8px 12px; font-size:12px; line-height:20px; font-weight:400; color:#555; }
	@media (max-width:1599px) or (max-height:899px) { .notice { display:block; } }

/* Infos */

	/* Détail */

	.infos .project { display:block; margin-top:30px; font-size:14px; line-height:25px; font-weight:400; }
	.infos .project.hidden { display:none; }

	.infos .project .project-sep { height:1px; background-color:#DDD; margin:10px 0; width:25px; }

	.infos .project .project-name { font-size:16px; font-weight:600; }

	.infos .project .project-link a { font-size:15px; }
	.infos .project .project-link .fa { display:inline-block; vertical-align:bottom; margin:0 0 0 5px; font-size:12px; line-height:23px; color:#AAA; }
	.infos .project .project-desc { font-style:italic; color:#555; }

	.infos .project .project-client { display:none; }

	.infos .project .project-type { font-size:13px; }
	.infos .project .project-type .fa { display:inline-block; vertical-align:top; font-size:14px; line-height:25px; width:15px; text-align:center; margin:0 5px 0 0; color:#E85D4B; }

	/* Popup */

	.projects .project { display:none; position:absolute; left:25px; right:25px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); color:#DDD; }
	.projects .project.visible { display:inline-block; }
	
	.projects .project-close { display:none; position:absolute; top:15px; right:25px; font-size:40px; line-height:40px; font-weight:400; color:#E85D4B; }
	.projects .project-close.active { display:block; }

	.projects .project .project-sep { display:block; width:50px; height:1px; line-height:0; overflow:hidden; background-color:#888; margin:15px auto; }

	.projects .project .project-name { font-size:36px; line-height:40px; font-weight:300; text-transform:uppercase; color:#EEE; margin:0; }
	.projects .project .project-link { display:block; font-size:20px; line-height:30px; font-weight:400; }

	.projects .project .project-client { display:block; font-size:18px; line-height:25px; font-weight:300; color:#EEE; }
	.projects .project .project-date { display:block; font-size:15px; line-height:25px; font-weight:300; color:#BBB; }

	.projects .project .project-type { display:block; font-size:20px; line-height:30px; font-weight:300; color:#EEE; }
	.projects .project .project-type .fa { font-size:20px; line-height:30px; color:#E85D4B; margin:0 10px 0 0; }

	.projects .project .project-desc { display:block; font-size:16px; line-height:25px; font-weight:300; color:#CCC; }

/* Objets */

	.object { display:inline-block; position:relative; margin:52vh auto 0 auto; padding:0; overflow:visible; background-color:rgba(25,55,75,1); border:30px solid #111; /* cursor:pointer; */
		-webkit-perspective-origin:50% 50%; perspective-origin:50% 50%; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; }

	.object.loading { background-image:url("../images/gif_14.gif"); background-size:100% 100%; background-origin:50% 50%; background-repeat:no-repeat; background-blend-mode:screen; }
	.object.loading .layer.frame { opacity:0.25; }

	.object:before ,
	.object:after { content:""; display:block; position:absolute; z-index:300; opacity:0; }

	.object.no-perspective { /*
		-webkit-transform:translateY(-50%) scale(0.75) !important;
		   -moz-transform:translateY(-50%) scale(0.75) !important;
		    -ms-transform:translateY(-50%) scale(0.75) !important;
		     -o-transform:translateY(-50%) scale(0.75) !important;
		        transform:translateY(-50%) scale(0.75) !important; */ }

	.area .scene.preview { width:85%; margin-left:15%; }

	/* Objet › Écran */

	.object.screen { width:1600px; height:900px; /* 16:9 */ border-width:25px 25px 30px 25px; border-radius:5px;
		-webkit-transform:translateX(12%) translateY(-54%) scale(0.8) scaleX(1) scaleZ(1.2) rotateX(25deg) rotateY(20deg) rotateZ(-8deg) skew(0deg, 2deg);
		   -moz-transform:translateX(12%) translateY(-54%) scale(0.8) scaleX(1) scaleZ(1.2) rotateX(25deg) rotateY(20deg) rotateZ(-8deg) skew(0deg, 2deg);
		    -ms-transform:translateX(12%) translateY(-54%) scale(0.8) scaleX(1) scaleZ(1.2) rotateX(25deg) rotateY(20deg) rotateZ(-8deg) skew(0deg, 2deg);
		     -o-transform:translateX(12%) translateY(-54%) scale(0.8) scaleX(1) scaleZ(1.2) rotateX(25deg) rotateY(20deg) rotateZ(-8deg) skew(0deg, 2deg);
		        transform:translateX(12%) translateY(-54%) scale(0.8) scaleX(1) scaleZ(1.2) rotateX(25deg) rotateY(20deg) rotateZ(-8deg) skew(0deg, 2deg); }

	.object.screen.no-perspective { 
		-webkit-transform:translateX(8%) translateY(-52%) scale(0.8);
		   -moz-transform:translateX(8%) translateY(-52%) scale(0.8);
		    -ms-transform:translateX(8%) translateY(-52%) scale(0.8);
		     -o-transform:translateX(8%) translateY(-52%) scale(0.8);
		        transform:translateX(8%) translateY(-52%) scale(0.8); }

	.object.screen:before { opacity:1; z-index:100; bottom:-52px; left:50%; height:25px; width:250px; border:0px solid #1D1D1D; border-radius:0 0 5px 5px; background-color:#111; box-shadow:0 10px 15px #0A0A0A inset; 
		-webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); }
	.object.screen:after { opacity:1; bottom:-16px; right:0; height:4px; width:16px; border-radius:2px; background-color:#08F; box-shadow:0 0 30px #08F; }

	/* Objet › Tablette */

	.object.tablet { width:900px; height:600px; /* 2:3 */ border-width:40px 20px 50px 20px; border-radius:20px; border-color:#D0D0D0; box-shadow:0 30px 60px rgba(0,0,0,0.05); 
		-webkit-transform:translateX(10%) translateY(-60%) scale(1) scaleX(1) scaleZ(1.5) rotateX(30deg) rotateY(-10deg) rotateZ(8deg) skew(2deg, 0deg);
		   -moz-transform:translateX(10%) translateY(-60%) scale(1) scaleX(1) scaleZ(1.5) rotateX(30deg) rotateY(-10deg) rotateZ(8deg) skew(2deg, 0deg);
		    -ms-transform:translateX(10%) translateY(-60%) scale(1) scaleX(1) scaleZ(1.5) rotateX(30deg) rotateY(-10deg) rotateZ(8deg) skew(2deg, 0deg);
		     -o-transform:translateX(10%) translateY(-60%) scale(1) scaleX(1) scaleZ(1.5) rotateX(30deg) rotateY(-10deg) rotateZ(8deg) skew(2deg, 0deg);
		        transform:translateX(10%) translateY(-60%) scale(1) scaleX(1) scaleZ(1.5) rotateX(30deg) rotateY(-10deg) rotateZ(8deg) skew(2deg, 0deg); }

	.object.tablet.no-perspective { 
		-webkit-transform:translateX(10%) translateY(-54%) scale(1);
		   -moz-transform:translateX(10%) translateY(-54%) scale(1);
		    -ms-transform:translateX(10%) translateY(-54%) scale(1);
		     -o-transform:translateX(10%) translateY(-54%) scale(1);
		        transform:translateX(10%) translateY(-54%) scale(1); }

	.object.tablet:before { opacity:1; bottom:-35px; left:50%; height:20px; width:40px; border-radius:10px; border:1px solid #EEE; background-color:#DDD; box-shadow:0 0 15px #BBB inset; 
		-webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); }
	.object.tablet:after { opacity:1; top:-20px; left:0; height:6px; width:6px; border-radius:3px; background-color:#FA0; box-shadow:0 0 15px #FF0; }
	.object.tablet .layer.frame { border-color:#CCC; }
	.object.tablet .layer.shadow { background-color:rgba(255,255,255,0.2); box-shadow:0 15px 45px rgba(255,255,255,0.5); }

	/* Objet › Mobile */

	.object.mobile { width:480px; height:800px; /* 3:5 */ border-width:25px 20px 75px 20px; border-radius:15px; border-color:#1D1D1D; box-shadow:0 30px 60px rgba(0,0,0,0.05); 
		-webkit-transform:translateX(10%) translateY(-60%) scale(0.9) scaleX(1) scaleZ(3) rotateX(15deg) rotateY(0deg) rotateZ(4deg) skew(-2deg, 0deg);
		   -moz-transform:translateX(10%) translateY(-60%) scale(0.9) scaleX(1) scaleZ(3) rotateX(15deg) rotateY(0deg) rotateZ(4deg) skew(-2deg, 0deg);
		    -ms-transform:translateX(10%) translateY(-60%) scale(0.9) scaleX(1) scaleZ(3) rotateX(15deg) rotateY(0deg) rotateZ(4deg) skew(-2deg, 0deg);
		     -o-transform:translateX(10%) translateY(-60%) scale(0.9) scaleX(1) scaleZ(3) rotateX(15deg) rotateY(0deg) rotateZ(4deg) skew(-2deg, 0deg);
		        transform:translateX(10%) translateY(-60%) scale(0.9) scaleX(1) scaleZ(3) rotateX(15deg) rotateY(0deg) rotateZ(4deg) skew(-2deg, 0deg); }

	.object.mobile.no-perspective { 
		-webkit-transform:translateX(10%) translateY(-50%) translateY(-2%) scale(0.9);
		   -moz-transform:translateX(10%) translateY(-50%) translateY(-2%) scale(0.9);
		    -ms-transform:translateX(10%) translateY(-50%) translateY(-2%) scale(0.9);
		     -o-transform:translateX(10%) translateY(-50%) translateY(-2%) scale(0.9);
		        transform:translateX(10%) translateY(-50%) translateY(-2%) scale(0.9); }

	.object.mobile:before { opacity:1; bottom:-60px; left:50%; height:45px; width:50px; border-radius:25px; border:1px solid #1D1D1D; background-color:#111; box-shadow:0 0 15px #0A0A0A inset; 
		-webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); }
	.object.mobile:after { opacity:1; bottom:-38px; left:50%; height:4px; width:12px; border-radius:2px; background-color:#0F8; box-shadow:0 0 30px #0F8; 
		-webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); }

/* Calques */

	.object .layer { position:absolute; z-index:150; padding:0; margin:0; height:100%; width:100%; top:0; left:0; right:0; bottom:0; line-height:0; }

	/* Calque › Contenu */

	.object .layer.frame { z-index:200; overflow:hidden; background-position:top left; background-repeat:no-repeat; background-size:cover; border:1px solid #000; opacity:1; }


	.object .layer.frame img { position:relative; z-index:400; top:0; left:0; display:block; width:auto; height:100%; }
	.object .layer.frame iframe { position:absolute; z-index:400; top:0; right:0; bottom:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; border-width:0; overflow:hidden; }

	/* Calque › Lumière */

	.object .layer.light { z-index:250; box-shadow:0 0 50px rgba(225,225,255,0.2); mix-blend-mode:soft-light; pointer-events:none; 
		background:rgba(255,255,255,0.95);
		background:-webkit-linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 90%);
		background:-moz-linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 90%);
		background:-ms-linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 90%);
		background:-o-linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 90%);
		background:linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 90%); }
	.object.tablet .layer.light {
		background:-webkit-linear-gradient(50deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.5) 100%);
		background:-moz-linear-gradient(50deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.5) 100%);
		background:-ms-linear-gradient(50deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.5) 100%);
		background:-o-linear-gradient(50deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.5) 100%);
		background:linear-gradient(50deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.5) 100%); }
	.object.mobile .layer.light {
		background:-webkit-linear-gradient(200deg, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0) 100%);
		background:-moz-linear-gradient(200deg, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0) 100%);
		background:-ms-linear-gradient(200deg, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0) 100%);
		background:-o-linear-gradient(200deg, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0) 100%);
		background:linear-gradient(200deg, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0) 100%); }

	.object.loading .layer.light,
	.object:hover .layer.light { /* box-shadow:0 0 50px rgba(225,225,255,0.3); */ }
	.object:hover .layer.frame { /* border-color:#111; */ }

	.object.no-reflect .layer.light { background:transparent none; }

	/* Calque › Ombrage */

	.object .layer.shadow { z-index:100; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.2); box-shadow:0 15px 45px rgba(0,0,0,0.5); pointer-events:none; }

/* Responsive */

	/* XS */

	@media (max-width:767px) {
		.scene { }
		}

	/* SM */

	@media (min-width:768px) and (max-width:991px) {
		.scene { }
		}

	/* MD */

	@media (min-width:992px) and (max-width:1339px) {
		.scene { zoom:0.75; transform:translateY(10%); }
		}

	/* LG */

	@media (min-width:1340px) {
		.scene { }
		}