/*
font-family: 'Nunito', sans-serif;
300, 900

font-family: 'Lora', serif;
400, 400i, 700, 700i

brown:  #2e250b
		rgba(46, 37, 11)
 */


/* @group Clear Stylesheet */
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;background-image:none;}body{line-height:1;color:black;background:white;text-align:left;}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" "";}
/* @end */


body {
	font-family: 'Lora', serif;
	font-size: 17px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	color: #2e250b;
}

a {
	text-decoration: none;
}

b, strong {
	font-weight: 700;
}

i, em {
	font-style: italic;
}

h1, h2, h3, h4, h5 {
	font-family: 'Nunito', sans-serif;
	font-weight: 900;
	line-height: 1.3;
}

	h1,
	h2 {
		font-size: 1.8em;
	}

	h3 {
		font-size: 1.5em;
	}

	h4, h5 {
		font-size: 1.3em;
	}

	h1 em,
	h2 em {
		font-style: normal;
		font-weight: 300;
	}

	@media( max-width: 420px ) {

		h1, h2 {
			font-size: 1.5em;
		}

		h3 {
			font-size: 1.2em;
		}

		h4, h5 {
			font-size: 1em;
		}

		h1, h2, h3, h4, h5 {
			-ms-word-break: break-all;
			word-break: break-all;
			word-break: break-word;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			hyphens: auto;
		}

	}

.width {
	max-width: 1020px;
	padding: 0 20px;
	box-sizing:  border-box;
	margin: 0 auto;
	position: relative;
}

.content {
	line-height: 1.5;
}

	.content p,
	.content ul,
	.content ol,
	.content h1,
	.content h2,
	.content h3,
	.content h4,
	.content h5,
	.content .button {
		margin-top: 1em;
	}

		.content *:first-child {
			margin-top: 0;
		}

	.content a {
		color: #2e250b;
		border-bottom: 1px solid #aaa;
	}

		.content a:hover {
			border-color: #2e250b;
		}

	.content ul,
	.content ol {
		padding-left: 1em;
	}

		.content ul {
			list-style-type: disc;
		}

		.content ol {
			list-style-type: decimal;
		}

a.button,
.button a {
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	border: 1px solid #2e250b;
	color: #2e250b;
}

	a.button:hover,
	.button a:hover,
	.button.active {
		background: #2e250b;
		color: #fff;
	}

.columns {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

	.columns-2 .column {
		width: calc(100% / 2 - 20px);
	}

	.columns-3 .column {
		width: calc(100% / 3 - 20px);
	}

	.columns-2.columns-lr .column:first-child {
		order: 1;
		text-align: right;
	}

	.columns-2.columns-lr .column:last-child {
		order: 2;
		text-align: left;
	}

	.columns-2.columns-lr.reverse .column:first-child {
		order: 2;
		text-align: left;
	}

	.columns-2.columns-lr.reverse .column:last-child {
		order: 1;
		text-align: right;
	}

	.content .columns {
		margin-top: 1em;
	}

	@media( max-width: 840px ) {

		.columns {
			flex-wrap: wrap;
		}

		.columns-2 .column {
			width: 100%;
			text-align: left !important;
			order: unset !important;
		}

		.columns-2 .column:first-child {
			margin-bottom: 40px;
			text-align: center !important;
		}

		.columns-3 {
			flex-wrap: wrap;
			max-width: 300px;
			margin-left: auto;
			margin-right: auto;
		}

		.columns-3 .column {
			width: 100%;
			margin-bottom: 40px;
		}

		.columns-3 .column:last-child {
			margin-bottom: 0;
		}

	}

.headerimage,
.spacerimage {
	width: 100%;
	min-height: 400px;
	height: 55vh;
	margin-top: 100px;
	margin-bottom: 100px;
	background: no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}

	.headerimage {
		margin-top: -30px;
	}

	@media (max-width: 767px) {

		.headerimage,
		.spacerimage {
			background-attachment: initial;
		}

	}

.header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 50px;
	z-index: 100;
	background: rgba(255,255,255,1);
	color: #2e250b;
	box-shadow: 0 0 15px rgba(46, 37, 11, .1);
	font-family: 'Nunito', sans-serif;
	font-weight: 300;
}

	.header.top {
		background: rgba(255,255,255,0);
		box-shadow: 0 0 15px rgba(46, 37, 11, 0);
	}

	.header.transition {
		-webkit-transition: all 500ms ease-in-out;
		-moz-transition: all 500ms ease-in-out;
		-o-transition: all 500ms ease-in-out;
		-ms-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
	}

	.header .logo {
		width: 50px;
		padding-top: 50px;
		height: 0;
		overflow: hidden;
		line-height: 2;
		display: inline-block;
		background: url(../img/logo.svg) no-repeat center center;
		background-size: contain;
		vertical-align: middle;
	}

		.header.transition .logo {
			-webkit-transition: opacity 500ms ease-in-out;
			-moz-transition: opacity 500ms ease-in-out;
			-o-transition: opacity 500ms ease-in-out;
			-ms-transition: opacity 500ms ease-in-out;
			transition: opacity 500ms ease-in-out;
		}

		.header.logo-hidden .logo,
		body.page-template-home .header.top:not(.logo-visible) .logo {
			opacity: 0;
		}

	.header .menu {
		display: inline-block;
	}

		.header .menu li {
			display: inline;
		}

			.header .menu li a {
				display: inline-block;
				padding: 15px;
				font-size: 18px;
				line-height: 20px;
				color: #2e250b;

				-webkit-transition: all 250ms ease-in-out;
				-moz-transition: all 250ms ease-in-out;
				-o-transition: all 250ms ease-in-out;
				-ms-transition: all 250ms ease-in-out;
				transition: all 250ms ease-in-out;
			}

				.header .menu li.current-menu-item a,
				.header .menu li a:hover {
					background: #2e250b;
					color: #fff;
				}

	.header .upload {

	}

		.header .upload.button a {
			padding-top: 10px;
			padding-bottom: 10px;
		}

	.header .language-switcher {
		position: absolute;
		top: 12px;
		right: 90px;
		padding: 0;
		margin: 0;
	}

		.header .language-switcher li {
			display: inline;
		}

			.header .language-switcher li a {
				display: inline-block;
				text-transform: uppercase;
				padding: 2px;
				margin-left: 3px;
				min-width: 30px;
				box-sizing: border-box;
				text-align: center;
			}

	.header .burger {
		display: none;
	}

	.header #menu-social {
		display: inline-block;
		margin-left: 10px;
		position: absolute;
		right: 20px;
		top: 12px;
	}

		.header #menu-social li {
			display: inline;
		}

		.header #menu-social li a {
			padding: 0;
			display: inline-block;
			margin-left: 3px;
			width: 26px;
			padding-top: 26px;
			overflow: hidden;
			height: 0;
			line-height: 2;
		}

		.header #menu-social li.facebook a {
			background: url(../img/icon-fb.svg) no-repeat center center;
			background-size: contain;
		}

		.header #menu-social li.instagram a {
			background: url(../img/icon-instagram.svg) no-repeat center center;
			background-size: contain;
		}

	@media( max-width: 980px ) {

		.header .burger {
			display: block;
			width: 60px;
			min-width: 50px;
			height: 50px;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			z-index: 100;
		}

			.header .burger .icon,
			.header .burger .icon:before,
			.header .burger .icon:after  {
				position: absolute;
				width: 30px;
				height: 3px;
				background: #2e250b;
				left: 20px;
				top: 50%;
				margin-top: -1px;
				pointer-events: none;
			}

				.header .burger .icon:before,
				.header .burger .icon:after {
					content: "";
					display: block;
					width: 100%;
					left: 0;
				}

				.header .burger .icon:before {
					margin-top: -10px;
				}

				.header .burger .icon:after {
					margin-top: 7px;
				}

				.header.open .burger .icon {
					background: transparent;
				}

					.header.open .burger .icon:before {
						-moz-transform: rotate(-45deg);
						-ms-transform: rotate(-45deg);
						-o-transform: rotate(-45deg);
						-webkit-transform: rotate(-45deg);
						transform: rotate(-45deg);
						margin-top: -2px;
					}

					.header.open .burger .icon:after {
						-moz-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						-o-transform: rotate(45deg);
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
						margin-top: -2px;
					}

		.header .logo {
			position: absolute;
			left: 0;
			top: 3px;
		}

		.header .width {
			height: auto;
			background: #fff;
			padding-bottom: 15px;
		}

		#menu-main {
			width: 100%;
			margin-top: 50px;
			text-align: center;
		}

			#menu-main a {
				display: block;
				width: 100%;
				max-width: 260px;
				box-sizing: border-box;
				margin-bottom: 5px;
				margin-left: auto;
				margin-right: auto;
			}

			#menu-main .upload a {
				max-width: 100px;
			}

		.header .language-switcher {
			position: static;
			display: block;
			text-align: center;
			padding: 0;
			margin: 15px auto 0;
		}

		.header #menu-social {
			position: static;
			width: 100%;
			margin: 10px 0;
			text-align: center;
		}

		.header {
			height: 50px;
			overflow: hidden;
		}

		.header.open {
			height: auto;
		}

	}

	@media (max-width: 767px) {

		.header.logo-hidden .logo,
		body.page-template-home .header.top .logo {
			opacity: 1;
		}

	}

.footer {
	height: 40px;
}

	.footer .menu {
		display: block;
	}

		.footer .menu li {
			display: inline;
		}

			.footer .menu li a {
				display: inline-block;
				padding: 13px;
				font-size: 14px;
				color: #2e250b;
			}

				.footer .menu li.current-menu-item a,
				.footer .menu li a:hover {
					background: #2e250b;
					color: #fff;
				}

	@media( max-width: 420px ) {

		.footer {
			text-align: center;
		}

		.footer .menu li:first-child {
			display: none;
		}

	}

.slideshow {
	position: relative;
}

	.slideshow .slides {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

		.slideshow .slides .slide {
			position: absolute;
			width: 100%;
			height: 100%;
			display: none;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
		}

			.slideshow .slide:first-child {
				display: block;
			}

	.slideshow.inited {

	}

		.slideshow.inited .slide {
			opacity: 0;
			display: block;
			z-index: 5;
		}

		.slideshow.inited .slide.active {
			opacity: 1;
			z-index: 10;
		}

		.slideshow.inited .slide.next {
			z-index: 15;
		}

		.slideshow.inited.transition .slide {
			-webkit-transition: opacity 500ms ease-in-out;
			-moz-transition: opacity 500ms ease-in-out;
			-o-transition: opacity 500ms ease-in-out;
			-ms-transition: opacity 500ms ease-in-out;
			transition: opacity 500ms ease-in-out;
		}

	.slideshow .handles {
		position: absolute;
		bottom: 20px;
		left: 0;
		width: 100%;
		text-align: center;
	}

		.slideshow .handles .handle {
			width: 26px;
			height: 30px;
			display: inline-block;
			cursor: pointer;
			position: relative;
			z-index: 50;
		}

			.slideshow .handles .handle:after {
				content: "";
				display: block;
				width: 16px;
				margin-left: -8px;
				height: 16px;
				margin-top: -8px;
				border: 1px solid #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				border-radius: 50%;
			}

			.slideshow .handles .handle.active:after,
			.slideshow .handles .handle:hover:after {
				background: #fff;
			}

	.slideshow .navigation div {
		position: absolute;
		z-index: 45;
		top: 0;
		width: 20%;
		min-width: 160px;
		height: 100%;
		cursor: pointer;
	}

		.slideshow .navigation div:after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			width: 50px;
			height: 90px;
			margin-top: -45px;
			background: no-repeat center center;
			background-size: contain;
		}

		.slideshow .navigation .prev {
			left: 0;
		}

			.slideshow .navigation .prev:after {
				left: 20px;
				background: red;
			}

		.slideshow .navigation .next {
			right: 0;
		}

			.slideshow .navigation .next:after {
				right: 20px;
				background: red;
			}

.carousel {
	position: relative;
}

	.carousel.inited .carousel-wrapper {
		overflow: hidden;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}

		.carousel.inited .carousel-wrapper .carousel-content {
			position: relative;
			padding: 0;
		}

	.carousel.inited .carousel-wrapper .product.empty {
		display: none;
	}

	.carousel.inited .carousel-wrapper .carousel-content {
		-webkit-transition: left 250ms ease-in-out;
		-moz-transition: left 250ms ease-in-out;
		-o-transition: left 250ms ease-in-out;
		-ms-transition: left 250ms ease-in-out;
		transition: left 250ms ease-in-out;
	}

	.carousel .navigation div {
		position: absolute;
		top: 50px;
		height: 40px;
		margin-top: -20px;
		top: 50%;
		width: 20px;
		background: no-repeat center center;
		background-size: contain;
		cursor: pointer;

		-webkit-transition: opacity 250ms ease-in-out;
		-moz-transition: opacity 250ms ease-in-out;
		-o-transition: opacity 250ms ease-in-out;
		-ms-transition: opacity 250ms ease-in-out;
		transition: opacity 250ms ease-in-out;
	}

		.carousel .navigation div.hidden {
			opacity: 0.3;
			pointer-events: none;
		}

		.carousel .navigation .prev {
			left: -40px;
			background-image: url(../img/arrow-left.svg);
		}

		.carousel .navigation .next {
			right: -40px;
			background-image: url(../img/arrow-right.svg);
		}

	@media( max-width: 1100px ) {

		.carousel.inited {
			width: calc(100% - 60px);
			margin-left: 30px;
		}

		.carousel .navigation .prev {
			left: -30px;
		}

		.carousel .navigation .next {
			right: -30px;
		}

	}

.main {
	padding: 80px 0;
	box-sizing: border-box;
	min-height: calc(100vh - 40px);
}

.genres {
	text-align: center;
	margin: 40px auto;
	display: none;
}

	.genres li {
		display: inline-block;
		padding: 10px;
		cursor: pointer;
		border: 1px solid #2e250b;
		margin: 0 10px;
	}

		.genres li.active {
			background: #2e250b;
			color: #fff;
		}

.references {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

	.references .reference {
		width: 200px;
		display: block;
		position: relative;
		margin: 10px 10px 30px;
		line-height: 1.2;
	}

		.references .reference .cover-wrapper {
			display: block;
			position: relative;
			width: 100%;
		}

			.references .reference .cover {
				width: 100%;
				height: auto;
				display: block;
			}

			.references .reference .info {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 5;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px;
				box-sizing: border-box;
				background: rgba(46, 37, 11, .8);
				color: #fff;
				opacity: 0;
				text-align: center;
				font-size: 15px;
			}

				.references .reference:hover .info {
					opacity: 1;
				}

	.references .reference .title {
		text-align: center;
		margin-top: 5px;
		display: block;
	}

	.references .reference.empty {
		height: 0;
		padding: 0;
	}

.home.main {
	padding-top: 0;
}
	.home__intro {
		height: 100vh;
		min-height: 500px;
		background: #2e250b;
		margin-bottom: 100px;
		position: relative;
	}

		.home__intro .animation {
			background: #fff;
			height: 100vh;
			padding: 60px 40px 20px;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 20;
			pointer-events: none;
			overflow: hidden;

			-webkit-transition: opacity 1000ms ease-in-out;
			-moz-transition: opacity 1000ms ease-in-out;
			-o-transition: opacity 1000ms ease-in-out;
			transition: opacity 1000ms ease-in-out;
		}

			.home__intro .animation video,
			.home__intro .animation img {
				width: auto;
				display: block;
				margin: 0 auto;
				max-height: 500px;
			}

			.home__intro .animation.hidden {
				opacity: 0;
			}

		.home__intro .slideshow {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

			.home__intro .slideshow .slide {
				background-position: center center;
				background-attachment: fixed;
			}

			.home__intro .slideshow:after {
				content: "";
				display: block;
				width: 40px;
				margin-left: -20px;
				height: 30px;
				background: url(../img/arrow-down.svg) no-repeat center center;
				background-size: contain;
				position: absolute;
				left: 50%;
				bottom: 30px;
				pointer-events: none;
				z-index: 50;

				-webkit-transition: opacity 500ms ease-in-out;
				-moz-transition: opacity 500ms ease-in-out;
				-o-transition: opacity 500ms ease-in-out;
				-ms-transition: opacity 500ms ease-in-out;
				transition: opacity 500ms ease-in-out;
			}

				.home__intro .slideshow.scrolled:after {
					opacity: 0;
				}

	@media (max-width: 767px) {

		.home__intro .slideshow .slide {
			background-attachment: initial;
		}

		.home__intro .animation {
			display: none;
		}

		.home__intro {
			height: 60vh;
			min-height: 200px;
		}

	}

	.home__featured {
		margin: 100px auto;
		text-align: center;
		padding: 40px 60px;
		width: calc(100% - 40px);
		max-width: 1220px;
		box-sizing: border-box;
		border-top: 2px solid #2e250b;
		border-bottom: 2px solid #2e250b;
	}

		.home__featured .button {
			margin: 0;
		}

		.home__featured .carousel.inited .carousel-wrapper .carousel-content {
			-webkit-transition: left 750ms ease-in-out;
			-moz-transition: left 750ms ease-in-out;
			-o-transition: left 750ms ease-in-out;
			-ms-transition: left 750ms ease-in-out;
			transition: left 750ms ease-in-out;
		}

	@media( max-width: 1100px ) {

		.home__featured {
			padding-left: 20px;
			padding-right: 20px;
		}

	}

.about {

}

	.about__intro {

	}

		.about__intro .icon {
			display: block;
			margin: 0 auto;
			width: 100px;
			height: auto;
			margin-top: 60px;
		}

		.about__intro .columns {
			padding-top: 40px;
			padding-bottom: 80px;
		}

	.about__people .width {
		margin: 100px auto;
	}

		.about__people li {
			margin-bottom: 80px;
		}

		.about__people img {
			max-width: 300px;
			width: 100%;
			height: auto;
		}

	.about__people .image {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background: red;
		display: inline-block;
	}

.services {

}

	.services .columns-3 {
		margin-bottom: 80px;
	}

.studio {

}

	.studio.main {
		padding-top: 0;
	}

	.studio .image-wrapper {
		position: relative;
		overflow: hidden;
		height: 80vh;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
	}

		.studio .image-wrapper:first-child {
			height: 55vh;
		}

	.studio .columns {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	@media (max-width: 767px) {

		.studio .image-wrapper {
			background-attachment: initial;
		}

	}

.references-wrapper {
	position: relative;
}

	.references-wrapper .width {
		text-align: center;
		padding-top: 40px;
	}

	.references-wrapper .view {
		text-align: right;
	}

		.references-wrapper .view li {
			display: inline;
		}

	.references-table-wrapper {
		overflow-x: scroll;
		width: 100%;
		margin: 40px auto;
	}

		.references-table {
			margin: 0 20px;
		}

			.references-table th {
				padding: 10px;
				font-weight: bold;
				border-right: 1px solid #aaa;
			}

				.references-table th:last-child {
					border-right: 0;
				}

				.references-table.sortable th {
					cursor: pointer;
					position: relative;
					padding-right: 30px;
				}

					.references-table.sortable th:after {
						content: "";
						display: block;
						border: 6px solid #aaa;
						border-color: transparent transparent transparent transparent;
						position: absolute;
						right: 10px;
						top: 50%;
					}

						.references-table.sortable th.sorting-asc:after {
							border-color: transparent transparent #aaa transparent;
							margin-top: -9px;
						}

						.references-table.sortable th.sorting-desc:after {
							border-color: #aaa transparent transparent transparent;
							margin-top: -3px;
						}

			.references-table td {
				border-top: 1px solid #aaa;
				border-right: 1px solid #aaa;
				padding: 10px;
			}

				.references-table td:last-child {
					border-right: 0;
				}

	@media( max-width: 860px ) {

		.references-wrapper .view {
			padding-top: 0;
			text-align: left;
			padding-bottom: 20px;
		}

		.genres {
			margin: 0;
			position: absolute;
			right: 20px;
			top: 81px;
			width: 140px;
			z-index: 50;
		}

			.genres li {
				display: none;
				width: 100%;
				box-sizing: border-box;
				background: #fff;
				margin: -1px 0 0;
			}

			.genres li.active {
				display: block;
			}

			.genres.open li {
				display: block;
			}

	}

.contact {
}

	.contact__intro .button {
		margin-bottom: 40px;
	}

	.contact__logo {
		width: 200px;
		max-width: 100%;
		height: auto;
		margin-top: 100px;
		margin-right: -10px;
	}