/*
Theme Name: Wulffy
Description: This is a beautiful custom theme for Julien Wulff
Author URI: http://wulff.graphics/
*/
  /*******************************/
 /******   GLOBAL STYLES   ******/
/*******************************/
	
	@font-face {
		font-family: "Apercu";
		src: url(fonts/apercu-regular.woff) format("woff2"),
			url(fonts/apercu-regular.woff) format("woff");
		font-weight:normal;
		font-style:normal;
	}

	@font-face {
		font-family: "Apercu";
		src: url(fonts/apercu-medium.woff2) format("woff2"),
			url(fonts/apercu-medium.woff) format("woff");
		font-weight: bold;
		font-style: normal;
	}

	body {
		font-family: Apercu, sans-serif;
		line-height: 1.5;
		font-size: 16px;
		background: #FFF;
		margin: 0;
		padding: 0;
	}

	*, :before, :after {box-sizing: border-box;}

	a {
		text-decoration: none;
		color: #ED1847;
	}

	img {max-width: 100%;}

	h1, h2 {
		font-family: 'Playfair Display', serif;
		font-weight: normal;
		line-height: 1.3;
	}

	h1 {
		font-size: 36px;
	}
	@media (min-width: 800px) {
		h1 {
			font-size: 54px;
		}
	}

	/* Responsive image container to keep the image ratio before the image is loaded */
	/* Ratio of the image but be hardcoded in the HTML as padding on the .image-container */
	.image-container {
		position: relative;
		width: 100%;
		height: 0;
	}
	.image-container img {
		position: absolute;
		top: 0; 
		left: 0; 
		width: 100%;
		height: 100%;
	}
	
	/* Handle WordPress admin bar */
	body.admin-bar #site-header {
		top: 32px;
	}

	/* Force scrollbar to avoid issues with masonry on windows */
	html {
		overflow-y: scroll; 
	} 

	.text {
		font-family: 'Playfair Display', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	}

  /************************/
 /******   HEADER   ******/
/************************/

	#site-header {
		background: #999;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 70px;
		z-index: 5;
	}
	body {
		padding-top: 70px;
	}

	#site-header .site-brand {
		width: 220px;
		background: black;
	}
	#site-header nav {
		width: calc(100% - 220px);
	}

	/* Mobile navigation */
	@media (max-width: 799px) {

		#site-header nav ul {
			position: fixed;
			top: 70px;
			left: 0;
			width: 100%;
			height: calc(100% - 10px);
			background: #999;
			margin: 0;
			padding: 10px 0;
			list-style-type: none;
			transform: scaleY(0);
			transform-origin: 0 0;
			transition: 200ms;
		}
		#site-header nav ul li {
			transform: translateX(70px);
			transition: 250ms;
			transition-delay: 200ms;
			opacity: 0;
		}
		#site-header nav ul a {
			display: block;
			color: white;
			padding: 10px 20px;
			font-size: 20px;
			transition: 250ms;
		}
		#site-header nav ul a:hover {
			background: rgba(0, 0, 0, .1);
		}

		/* Open navigation animation */
		.navigation-open #site-header nav ul {
			transform: scaleY(1);

		}
		.navigation-open #site-header nav ul li {
			transform: translateX(0);
			opacity: 1;
		}
		.navigation-open #site-header nav li:nth-child(2) {transition-delay: 250ms;}
		.navigation-open #site-header nav li:nth-child(3) {transition-delay: 300ms;}
		.navigation-open #site-header nav li:nth-child(4) {transition-delay: 350ms;}
		.navigation-open #site-header nav li:nth-child(5) {transition-delay: 400ms;}
		.navigation-open #site-header nav li:nth-child(6) {transition-delay: 450ms;}
		.navigation-open #site-header nav li:nth-child(7) {transition-delay: 500ms;}
		.navigation-open #site-header nav li:nth-child(8) {transition-delay: 550ms;}
		.navigation-open #site-header nav li:nth-child(9) {transition-delay: 600ms;}

		/* Hamburger icon */
		#mobile-nav-switch {
			position: fixed;
			top: 23px;
			right: 20px;
			width: 24px;
			height: 24px;
			cursor: pointer;
		}
		#mobile-nav-switch:after {
			/* Add a larger pseudo element to make the hamburger easier to touch */
			content: "";
			display: block;
			position: absolute;
			width: 70px;
			height: 70px;
			right: -20px;
			top: -23px;
		} 
		#mobile-nav-switch div {
			position: absolute;
			top: calc(50% - 2px);
			width: 100%;
			height: 2px;
			background: white;
			transition-timing-function: cubic-bezier(.55,.055,.675,.19);
			transition-duration: 75ms;
		}
		#mobile-nav-switch div:before,
		#mobile-nav-switch div:after {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 2px;
			background: white;
			top: -8px;
			transition: top 75ms ease 120ms, transform 75ms cubic-bezier(.55,.055,.675,.19)
		}
		#mobile-nav-switch div:after {
			top: 8px;
		}

		/* Turn the hamburger into a cross */
		.navigation-open #mobile-nav-switch div {
		    transition-delay: 120ms;
		    transition-timing-function: cubic-bezier(.215,.61,.355,1);
		    transform: rotate(45deg);
		}
		.navigation-open #mobile-nav-switch div:before,
		.navigation-open #mobile-nav-switch div:after {
			top: 0;
			transition: top 75ms ease, transform 75ms cubic-bezier(.215,.61,.355,1) 120ms;
		}
		.navigation-open #mobile-nav-switch div:after {
			transform: rotate(-90deg);
		}
	}

	/* Desktop navigation */
	@media (min-width: 800px) {
		#site-header {
			background: rgba(0,0,0,.4);
		}
		#mobile-nav-switch {
			display: none;
		}
		#site-header nav ul {
			margin: 0 20px 0 0;
			padding: 0;
			list-style-type: none;
			display: flex;
			justify-content: flex-end;
			height: 100%;
			align-items: center;
			flex-wrap: wrap;
		}
		#site-header nav ul li {
		}
		#site-header nav ul a {
			display: block;
			color: white;
			padding: 5px 10px;
			transition: 250ms;
		}
		#site-header nav ul a:hover {
			color: black;
		}

		#site-header nav ul a.social {
			text-indent: -999px;
			overflow: hidden;
			background: url(graphics/logo-instagram.svg) center no-repeat;
			background-size: 20px;
			width: 40px;
			height: 34px;
			padding: 0;
		}
		#site-header nav ul a.social.behance {
			background-image: url(graphics/logo-behance.svg);
		}
		#site-header nav ul a.social.yamanote {
			background-image: url(graphics/logo-yamanote.svg);
		}
		#site-header nav ul a.social:hover {
			filter: brightness(0);
		}
	}



  /************************/
 /******   FOOTER   ******/
/************************/

	#site-footer {
		margin: 20px;
	}


  /****************************/
 /******   FRONT PAGE   ******/
/****************************/

	#front-page h1 {
		padding: 0 10px;
		max-width: 15em;
	}
	@media (min-width: 800px) {
		#front-page h1 {
			padding: 50px 20px;
		}
	}


  /*******************************/
 /******   PROJECTS LIST   ******/
/*******************************/

	.projects {
		padding: 5px;
	}
	@media (min-width: 800px) {
		.projects {
			padding: 15px;
		}
	}
	
	/* Filter controls */
	.projects-filters {
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
	}
	.projects-filters a {
		display: block;
		padding: 10px 20px;
		margin: 5px;
		background: rgba(0,0,0,.4);
		color: white;
		-webkit-font-smoothing: off;
		transition: 250ms;
	}
	.projects-filters a:hover {
		background: rgba(0,0,0,1);
	}
	.projects-filters a.selected {
		background: black;
	}

	.projects-list {
		overflow: hidden;
	}
	.projects-list .project {
		width: 100%;
		padding: 5px;
		position: relative;
		display: block;
		/*float: left;*/
		display: inline-block;
	}
	@media (min-width: 500px) {
		.projects-list .project {
			width: 50%;
		}
	}
	@media (min-width: 900px) {
		.projects-list .project {
			width: 33.33%;
		}
	}
	@media (min-width: 1800px) {
		.projects-list .project {
			width: 25%;
		}
	}
	.projects-list .project img {
		width: 100%;
		height: auto;
		display: block;
	}

	.projects-list .project .caption {
		color: black;
		padding: 5px 0 20px 0;
	}
	.projects-list .project h2 {
		margin: 5px 0;
		font-family: Apercu, sans-serif;
	}
	.projects-list .project .tags {
		font-size: 12px;
	}
	@media (min-width: 900px) {
		.projects-list .project .caption {
			position: absolute;
			top: 5px;
			left: 5px;
			width: calc(100% - 10px);
			height: calc(100% - 10px);
			background: transparent;
			transition: 250ms;
			overflow: hidden;
			z-index: 3;
		}
		.projects-list .project:hover .caption {
			background: rgba(255,255,255,.8);
		}
		/*.projects-list .project:before {
			content: "";
			background: rgba(255,255,255,.8);
			position: absolute;
			top: 5px;
			left: 5px;
			width: calc(100% - 10px);
			height: calc(100% - 10px);
			z-index: 2;
			opacity: 0;
			transform: scaleY(0.25) scaleX(0.75);
			transition: 250ms;
		}
		.projects-list .project:hover:before {
			opacity: 1;
			transform: scaleY(1) scaleX(1);
		}*/
		.projects-list .project h2 {
			position: absolute;
			top: 20px;
			left: 20px;
			margin: 0;
			font-size: 30px;
			transform: translateX(-25px);
			opacity: 0;
			transition: 250ms;
		}
		.projects-list .project .tags {
			position: absolute;
			bottom: 20px;
			right: 20px;
			text-align: right;
			transform: translateX(25px);
			opacity: 0;
			transition: 250ms;
		}
		.projects-list .project:hover h2,
		.projects-list .project:hover .tags {
			transform: translateX(0);
			opacity: 1;
		}
	}


  /****************************/
 /******   ABOUT PAGE   ******/
/****************************/

	#about-page {
		background: black;
		color: white;
		padding: 0 10px;
	}
	#about-page section a {
		color: white;
		text-decoration: underline;
	}
	#about-page section h2 {
		font-weight: bold;
		margin: 0;
		font-size: 100%;
		text-transform: uppercase;
	}

	#about-page section {
		max-width: 1000px;
		padding: 20px 0;
		margin: 0 auto;
	}

	/* Services section */
	#about-page .section-services {
		border-top: none;
	}
	#about-page .section-services .services {
		padding: 30px 0;
		margin: 0;
	}

	/* Intro section */
	#about-page .section-intro {
		margin-bottom: 30px;
	}
	#about-page .section-intro .text-lang {
		margin-bottom: 30px;
	}
	@media (min-width: 900px) {
		#about-page .section-intro {
			display: flex;
		}
		#about-page .section-intro .text-lang {
			width: 33.33%;
			padding: 0 15px;
		}
		#about-page .section-intro .text-lang:first-child {
			padding-left: 0;
		}
		#about-page .section-intro .text-lang:last-child {
			padding-right: 0;
		}
	}

	/* Process section */
	#about-page .section-workflow {
		background: white;
		color: black;
		max-width: none;
		padding: 50px 10px;
		margin: 0 -10px;
	}

	#about-page .section-workflow h1 {
		margin-top: 0;
	}

	@media (min-width: 900px) {
		#about-page .section-workflow h1,
		#about-page .section-workflow .workflow-container {
			max-width: 1000px;
			margin: 0 auto;
		}
		#about-page .section-workflow .workflow-container {
			padding-top: 80px;
			padding-left: 490px;
			background: white url(graphics/spiral-white.svg) 0px 50px no-repeat;
			background-size: auto 95%;
		}
	}
	#about-page .section-workflow .step {
		position: relative;
		padding-left: 100px;
		padding-bottom: 60px;

	}
	#about-page .section-workflow .step img {
		position: absolute;
		top: 0;
		left: 0;
		width: 70px;
	}
	#about-page .section-workflow .step h3 {
		margin: 0;
		font-size: 24px;
		line-height: 1.4;
	}
	@media (min-width: 900px) {
		#about-page .section-workflow .step h3 {
			font-size: 32px;
		}
	}

	/* Image section */
	#about-page .section-image {
		height: 300px;
		margin: 0 -10px;
		max-width: none;
		background-size: cover;
		background-position: center;
	}
	@media (min-width: 900px) {
		#about-page .section-image {
			height: 500px;
			background-attachment: fixed;
		}
	}


  /******************************/
 /******   PROJECT PAGE   ******/
/******************************/

	#project-page {

	}
	#project-page .container {
		padding: 0 10px;
		max-width: 1000px;
		margin: 0 auto;
		overflow: hidden;
	}
	#project-page section .container {
		padding: 50px 10px;
	}
	#project-page .section-black {
		background: black;
		color: white;
		margin: 50px 0;
	}
	#project-page h1 {
		margin: 1em auto .25em auto;
		max-width: 960px;
	}
	#project-page .tags-light {
		font-size: 12px;
		color: #BBB;
		max-width: 980px;
	}
	#project-page .tags-light a {
		color: #BBB;
		transition: 250ms;
	}
	#project-page .tags-light a:hover {
		color: black;
	}
	#project-page .highlights {
		font-size: 32px;
		margin: 50px 0;
	}
	#project-page .highlights .container {
		padding: 30px;
		background: #EEE;
		max-width: 960px;
	}

	#project-page .section-intro {
	}

	/* Intro section */
	#project-page .section-intro .text-lang {
		margin-bottom: 30px;
	}
	@media (min-width: 900px) {
		#project-page .section-intro .container {
			display: flex;
		}
		#project-page .section-intro .text-lang {
			width: 33.33%;
			padding: 0 10px;
		}
	}
	#project-page .section-images {
		overflow: hidden;
	}
	#project-page .section-images .container {
		padding: 0 5px;
	}
	#project-page .section-images.section-black .container {
		padding: 5px;
	}
	#project-page .section-images figure {
		float: left;
		padding: 5px;
		margin: 0;
		width: 100%;
	}
	#project-page .section-images img {
		width: 100%;
		height: auto;
		display: block;
	}
	#project-page .section-images figure.quarter {
		width: 50%;
	}
	@media (min-width: 900px) {
		#project-page .section-images .container {
			padding: 0 10px;
		}
		#project-page .section-images.section-black .container {
			padding: 10px;
		}
		#project-page .section-images figure {
			padding: 10px;
		}
		#project-page .section-images figure.half {
			width: 50%;
		}
		#project-page .section-images figure.quarter {
			width: 25%;
		}
	}
	#project-page .section-images figcaption {
		padding: 5px 10px;
		color: white;
		background: black;
		float: left;
	}

	#project-page .section-images.section-black figcaption {
		color: black;
		background: white;
	}
	#project-page .free-text .container {
		max-width: 980px;
	}
	#project-page .free-text h1 {
		margin: .5em 0;
	}

	/* Social media share section */
	#project-page .section-share {
		font-size: 24px;
		margin: 50px 0;
		text-align: center;
	}
	#project-page .section-share .container {
		padding: 30px;
		background: #EEE;
		max-width: 960px;
	}
	#project-page .section-share .share-link {
		display: inline-block;
		width: 32px;
		height: 32px;
		margin-left: 10px;
		vertical-align: top;
		background: url(graphics/logo-facebook.svg) center no-repeat;
		background-size: 24px;
		color: black;
		opacity: .75;
		border-radius: 8px;
		transition: 250ms;
		text-indent: -999px;
		overflow: hidden;
	}
	#project-page .section-share .share-link:hover {
		opacity: 1;
		background-color: rgba(0, 0, 0, .15);
	}
	#project-page .section-share .share-link.facebook  {background-image: url(graphics/logo-facebook.svg); padding-left: 26px;}
	#project-page .section-share .share-link.twitter   {background-image: url(graphics/logo-twitter.svg);  padding-left: 32px;}
	#project-page .section-share .share-link.pinterest {background-image: url(graphics/logo-pinterest.svg);padding-left: 29px;}

	#project-page .section-video .video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}
	#project-page .section-video .video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.more-projects {}
	.more-projects h1 {
		margin: 100px 10px 10px 10px;
		border-top: 3px solid #DDD;
		padding-top: .5em;
	}
	@media (min-width: 800px) {
		.more-projects h1 {
			margin: 200px 20px 20px 20px;
		}
	}


  /**********************/
 /******   BLOG   ******/
/**********************/

	#news-page {
		max-width: 800px;
		margin: 0 auto;
	}
	#news-page article {
		border-top: 5px solid black;
		margin: 50px 10px;
	}
	#news-page article h1 a {
		color: black;
	}
	#news-page article .date {
		opacity: .5;
		margin-top: -20px;
		margin-bottom: 20px;
	}
	#news-page article img {
		width: 100%;
		height: auto;
	}


  /********************************/
 /******   APPEAR EFFECTS   ******/
/********************************/

	#about-page .out-of-sight .step,
	.section-intro.out-of-sight .text-lang,
	.section-services.out-of-sight h1,
	.section-images.out-of-sight figure {
		transform: translateY(100px);
		opacity: 0;
	}
	.project.out-of-sight { /* because it conflicts with the isotope library */
		opacity: 0;
	}
	/*.scroll-up .section-intro.out-of-sight .text-lang,
	.scroll-up .project.out-of-sight,
	.scroll-up .section-services.out-of-sight h1,
	.scroll-up .section-images.out-of-sight figure
	{
		transform: translateY(-100px);
	}*/
	#about-page .visible .step,
	.section-intro.visible .text-lang,
	.section-services.visible h1,
	.section-images.visible figure {
		transform: translateX(0);
		opacity: 1;
		transition: transform 500ms, opacity 500ms;
	}
	.project.visible {
		opacity: 1;
		transition: opacity 500ms;
	}
	#about-page .visible .step:nth-child(1) {transition-delay: 300ms;}
	#about-page .visible .step:nth-child(2) {transition-delay: 500ms;}
	#about-page .visible .step:nth-child(3) {transition-delay: 700ms;}
	#about-page .visible .step:nth-child(4) {transition-delay: 900ms;}
	#about-page .visible .step:nth-child(5) {transition-delay: 1100ms;}
	#about-page .visible .step:nth-child(6) {transition-delay: 1300ms;}
	#about-page .visible .step:nth-child(7) {transition-delay: 1500ms;}
	#about-page .visible .step:nth-child(8) {transition-delay: 1700ms;}

	.section-intro.visible .text-lang:nth-child(1) {transition-delay: 300ms;}
	.section-intro.visible .text-lang:nth-child(2) {transition-delay: 450ms;}
	.section-intro.visible .text-lang:nth-child(3) {transition-delay: 600ms;}


	.project.visible:nth-child(6n+0) {transition-delay: 500ms;}
	.project.visible:nth-child(6n+1) {transition-delay: 100ms;}
	.project.visible:nth-child(6n+2) {transition-delay: 400ms;}
	.project.visible:nth-child(6n+3) {transition-delay: 200ms;}
	.project.visible:nth-child(6n+4) {transition-delay: 600ms;}
	.project.visible:nth-child(6n+5) {transition-delay: 300ms;}


	.project.initial.visible:nth-child(1) {transition-delay: 100ms;}
	.project.initial.visible:nth-child(2) {transition-delay: 200ms;}
	.project.initial.visible:nth-child(3) {transition-delay: 300ms;}
	.project.initial.visible:nth-child(4) {transition-delay: 400ms;}
	.project.initial.visible:nth-child(5) {transition-delay: 500ms;}
	.project.initial.visible:nth-child(6) {transition-delay: 600ms;}
	.project.initial.visible:nth-child(7) {transition-delay: 700ms;}
	.project.initial.visible:nth-child(8) {transition-delay: 800ms;}

	.section-images.visible figure:nth-child(1) {transition-delay: 100ms;}
	.section-images.visible figure:nth-child(2) {transition-delay: 200ms;}
	.section-images.visible figure:nth-child(3) {transition-delay: 300ms;}
	.section-images.visible figure:nth-child(4) {transition-delay: 400ms;}
	.section-images.visible figure:nth-child(5) {transition-delay: 500ms;}
	.section-images.visible figure:nth-child(6) {transition-delay: 600ms;}
	.section-images.visible figure:nth-child(7) {transition-delay: 700ms;}
	.section-images.visible figure:nth-child(8) {transition-delay: 800ms;}
	.section-images.visible figure:nth-child(9) {transition-delay: 900ms;}
	.section-images.visible figure:nth-child(10) {transition-delay: 1000ms;}
	.section-images.visible figure:nth-child(11) {transition-delay: 1100ms;}
	.section-images.visible figure:nth-child(12) {transition-delay: 1200ms;}