@import "desktop.css";


/*
*	================================================================
*	PANEL SLIDERS STYLES
*
*	================================================================
*/


div.panels-container ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info {
	width:50%;
}

div.panels-container ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span {
	font-size:1rem !important;
	line-height:1rem !important;
}

ul.panels-control li {
	width:3.125rem;
}


ul.panels-control li div a span, ul.panels-control li div a span:before {
	background-size:0.85rem;
}


/*
*	================================================================
*	SPLIT-PANEL STYLES (PHOTOGRAPHY + BRANDING STYLES MARKUP)
*
*	================================================================
*/


div.split-panel-container {

	overflow-y:auto;
	margin:5.000rem 0 0 0;
	height:calc(100% - 3.438rem - 3.438rem); /* Substract from total page height the height of <div-top-menu> and <nav>	*/

}

div.split-panel-container div.split-panel-container--top {
	height:auto;
	background:#101010 none;
	width:calc(100% - 2.125rem - 2.125rem);
	margin:0 auto;
}

div.split-panel-container div.split-panel-container--top>div {
	display:block;
}

div.split-panel-container div.split-panel-container--top div.split-panel-container--top---left {
	width:100%;
	height:auto;
	padding:0 1.313rem;
	background:transparent none;


}

div.split-panel-container div.split-panel-container--top div.split-panel-container--top---left h4 {
	font-size:3.000rem;
	margin:0;
	padding:3.000rem 0 0 0;
	text-align:left;
}
div.split-panel-container div.split-panel-container--top div.split-panel-container--top---left h6 {
	font-size:1rem;
	text-align:left;
}



div.split-panel-container div.split-panel-container--top div.split-panel-container--top---right {
	width:100%;
	height:auto;
	background:transparent none;
	padding:0 1.313rem;
}

div.split-panel-container div.split-panel-container--top div.split-panel-container--top---right p {
	font-size:1rem;
	line-height:1.125rem;
	max-width:42.688rem;
	width:100%;
	margin:2.938rem 0 0 0;
	padding:0 0 3.313rem 0;


}


div.split-panel-container div.split-panel-container--bottom {
	height:auto;
	margin:1.250rem 0 3.438rem 0;

}

div.split-panel-container div.split-panel-container--bottom ul {

	white-space:normal;
	width:100%;
	height:auto;
	text-align:center;
	transform:none !important;
	transition:none !important;
	padding:0 2.125rem;
	display:flex;
	align-items:center;
	justify-content:center;
	align-content:center;
	flex-flow:row wrap;

}

div.split-panel-container div.split-panel-container--bottom ul li {
	padding:0;
	margin:0 0 1.250rem 0;
	width:50%;
	height:19.750rem;
}

div.split-panel-container div.split-panel-container--bottom ul li:nth-child(even) {

	margin:0 0 1.250rem 1.250rem;
	width:calc(50% - 1.250rem);

}

div.split-panel-container div.split-panel-container--bottom ul li div.panel-content {

}

div.split-panel-container div.split-panel-container--bottom ul li div.panel-content a.panel-content--link-wrapper {
	padding:0;
}


div.split-panel-container div.split-panel-container--bottom ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span {

	opacity:1;
	transition:none;
	line-height:19.750rem;
	display:none;
}

ul.panels-control.split {
	display:none;
}

/*

Styles for hovering split panels

*/

div.split-panel-container div.split-panel-container--bottom ul li:hover div.panel-bg div.panel-bg--img {
	opacity:.50;
	filter: grayscale(10%);
	-webkit-filter: grayscale(10%);
}

div.split-panel-container div.split-panel-container--bottom ul li:hover div.panel-content a.panel-content--link-wrapper div.panel-content---info span  {
	opacity:1;

}

/*
*	================================================================
*	TOP-MENU STYLES - BASIC STYLES FOR THE heading type <div>
*	acting as second <nav> for subsections
*
*	================================================================
*/

div.top-menu {
	bottom:0;
	top:auto;
	height:3.438rem;
	border-top:#060606 0.063rem solid;
	border-bottom:none;
}

div.top-menu ul li span {
	line-height:3.438rem !important;
	font-size:0.875rem !important;

}

div.top-menu ul li:first-of-type span[class*="closer-btn"]:hover {
	-webkit-transform:none;
	-moz-tranform:none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
}

div.top-menu ul li:first-of-type span[class*="closer-btn"]:hover + span {
	color:#b3b3b3;
}

/*
*	================================================================
*	ART-OF-DETAIL STYLES
*
*	================================================================
*/

div.art-of-detail div.art-of-detail--wrapper:before {

	display:none;
}

div.art-of-detail div.art-of-detail--wrapper {

	position:static;
	overflow-y:auto;


}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content {

	width:100%;
	height:auto;
	display:block;
	margin:0 0 4.375rem 0;
}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content>div{
	display:block;
	padding:0 0 0 2.125rem;
}


div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left {

	text-align:left;
	width:100%;
	height:auto;
	margin:7.375rem 0 0 0;

}


div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left h3 {
	line-height:2.750rem;
	text-align:left;
	padding:0;
}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left h3 span {
	text-align:left;
	direction:ltr;
}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left h3 span:first-of-type {
	font-size:2.250rem;
}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left h3 span:last-of-type {
	font-size:3.500rem;
}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left a.content-art-of-detail-btn {

	position:static;
	font-size:0.875rem;
	padding:0.750rem 1rem;
}



div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----right {
	max-width:31.000rem;
	width:100%;
	height:auto;
	margin:2.750rem 0 0 0;
}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----right div.art-of-detail--wrapper---content----right-----text {

	margin:0;
	overflow-y:visible;
}
div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----right div.art-of-detail--wrapper---content----right-----text p {
	padding:0;
	font-size:0.875rem;
	line-height:1.125rem;

}

/*
*	================================================================
*	ORIGINALS-DETAIL STYLES
*
*	================================================================
*/

div.originals-detail div.originals-detail--content-wrapper {
	overflow-y:auto;
}

div.originals-detail div.originals-detail--content-wrapper:before {
	/* content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle; */
	display:none;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content {

	width:100%;
	height:auto;
	display:block;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content>div{
	display:block;
	padding:0 0 0 2.125rem;

}

/* LEFT DIV
=================================================== */

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content div.originals-detail---content----left {
	width:100%;
	height:auto;
	text-align:left;
	margin:4.027rem 0 0 0;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content h4.originals-detail---content----heading {

	font-size:3.000rem;
}



div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content a.originals-detail---content----video-btn {
	margin:1.750rem 0 0 0 !important;
	padding:0.750rem 1rem;
	position:static;
	font-size:0.875rem;
}

/* RIGHT DIV
=================================================== */

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content div.originals-detail---content----right {
	max-width:31.000rem;
	width:100%;
	height:auto;
	text-align:left;
	margin:2.750rem 0 3.348rem 0;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content p.originals-detail---content----text {

	width:100%;
	height:auto;
	overflow-y:visible;
	margin:1.313rem 0 0 0;
	font-size:0.875rem;
	line-height:1.125rem;
	padding:0;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul {
	margin:2.000rem 0 0 0;
	width:150%;
	padding:0;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li {

	width:14.28571428571429%;
	height:3.750rem;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto;
}

/*
*	================================================================
*	BACKGROUND SLIDERS STYLES
*
*	================================================================
*/

div.bg-slider div.bg-slider--ui-holder {

	bottom:1.5rem;
	right:0;
	top:auto;
	text-align:center;

}




/*
*	================================================================
*	NAV STYLES
*
*	================================================================
*/

nav {

	border-top:none;
	top:0;
	height:100%;
	pointer-events:none;
	background:none;

}


nav div.mainLogo {
	background:#0f0f0f none;
	display:block;
	width:100%;

	height:3.438rem;
	border-right:none;
	border-top:none;
	border-bottom:#060606 0.063rem solid;
	pointer-events:auto;
	position:relative;
	left:0;

	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}

nav div.mainLogo:hover {
	background:#0f0f0f none;
}

nav div.mainLogo a {
	width:11.063rem;
	height:3.348rem;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:1.125rem center;
	background-image:url(../img/main-logo.svg);
}

nav div.mainLogo span.mobileMenu {
	display:block;
	cursor:pointer;
	width:1.375rem;
	height:0.625rem;
	position:absolute;
	top:1.375rem;
	right:1.563rem;
	background: linear-gradient(
		to bottom,
		currentColor, currentColor 20%,
		transparent 20%, transparent 40%,
		currentColor 40%, currentColor 60%,
		transparent 60%, transparent 80%,
		currentColor 80%, currentColor 100%
	);

}

nav ul {
	pointer-events:auto;
	list-style:none;
	padding:0;
	width:100%;
	min-height:100%;
	margin:0;
	display:block;
	border-left:transparent 0 none;
	position:absolute;
	background:rgba(16,16,16,.95) none;

	transform:translateX(100%);
	opacity:1;
  transition: transform 0.8s cubic-bezier(1.000, 0.000, 0.000, 1.000);
}


nav ul.visible {

  transform:translateX(0);
	transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);

}

nav ul span.slash {
	display:none;
}

nav ul li {
	display:block;
	padding:0.625rem 0 0.625rem 1.125rem; /* give some more padding so borders are perfectly aligned	*/
	width:100%;
	height:100%;
	margin:0;
}

nav ul li a {
	display:block;
	text-align:left;
}

nav ul li a span {
	backface-visibility: hidden;
	display:block;
	margin:0;
	position:relative;
	text-align: left;
	width: 100%
}


nav ul li a.active span {
	color:red;
}


/*
*	================================================================
*	MUSIC-PLAYER STYLES
*
*	================================================================*/



div.music-player div.music-player--render {
	display:none;
}

div.music-player div.music-player--ui {
	height:12.313rem;
	background:#191919 none;
}

div.music-player div.music-player--ui ul {
	padding:3.438rem 0 0 0;
}

div.music-player div.music-player--ui ul li.music-player--ui---play-btn {
	width:7.625rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---play-btn div.music-player--ui---play-btn----icon {
	margin:0 0 0 4.250rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---progress {
	width:calc(100% - 11.875rem); /* Make the progress bar responsive in width in relation with the fixed size of the other elements	*/

}

div.music-player div.music-player--ui ul li.music-player--ui---progress:before,  div.music-player div.music-player--ui ul li.music-player--ui---progress:after {
	display:block;
}

div.music-player div.music-player--ui ul li.music-player--ui---progress div.music-player--ui---progress----bar-container {
	width:78.77697841726619%; /* Make the actual bars relative to the width of its parent so we have some space at he right	*/
	margin:0 auto;
}


div.music-player div.music-player--ui ul li.music-plater--ui---info-toggler {
	width:4.250rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---progress div.music-player--ui---progress----bar-container div.music-player--ui---progress----bar-container-----bg {
	background:#0f0f0f none;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume {
	display:none;
}


div.music-player div.music-player--body {

	height:calc(100% - 3.438rem - 3.438rem - 6.9018rem - 1.938rem); /* Calculate the height of the player body based on the remaining space after substracting the height of the player heading (at the bottom), and player ui heights and its padding */

}

div.music-player div.music-player--body div.music-player--body---playlist ul {
	font-size:0.875rem
}

div.music-player div.music-player--body div.music-player--body---playlist ul li {
	padding:1rem 3.250rem 1rem 3.875rem;
}


div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content {

	padding:2.938rem 4.688rem 3.438rem 3.750rem;

}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content h3 {
	font-size:1.875rem;
}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content p {

	font-size:0.875rem;
	line-height:1.125rem;

}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content ul {
	margin:1.813rem 0 0 0;
	font-size:0.875rem;
	line-height:1.125rem;

}

/*
*	================================================================
*	PHOTO GALLERY STYLES
*
*	================================================================
*/

div.photo-gallery div.photo-gallery--container {
	height:calc(100% - 3.438rem - 9.750rem - 3.438rem);
	margin:3.438rem 0 0 0;
}

div.photo-gallery div.photo-gallery--container:after {
	display:block;
}

div.photo-gallery div.photo-gallery--container div.photo-gallery--container---cell div.photo-gallery--container---cell----img-holder {
	background-size:auto 75%;
}



div.photo-gallery div.photo-gallery--thumbs-container  {
	padding:0 0.625rem;
	overflow-y: hidden;

}

div.photo-gallery div.photo-gallery--ui ul li div {
	width:5.063rem !important;
}

div.photo-gallery div.photo-gallery--ui ul li:first-of-type div span {
	background:transparent url('../img/ui/arrow_prev.svg') no-repeat center center;
}

div.photo-gallery div.photo-gallery--ui ul li:last-of-type div span {
	background:transparent url('../img/ui/arrow.svg') no-repeat center center;
}


div.photo-gallery div.photo-gallery--ui ul li div span:before {
	display:none !important;
}

div.photo-gallery div.photo-gallery--ui ul li div:hover span {
	-webkit-transform:none !important;
	-moz-tranform:none !important;
	-o-transform: none !important;
	-ms-transform: none !important;
	transform: none !important;
}

div.photo-gallery div.photo-gallery--desc div p {

	font-size:1rem;
	line-height:1.250rem;
	width:86.71875%;

}


div.photo-gallery.is-fullscreen ~ nav {
	top:-3.438rem;
}

/*
*	================================================================
*	VIDEO PLAYER STYLES
*
*	================================================================
*/



div.video-player div.video-player--container {
	overflow-y:auto;
	height:100%;
	position:static;
	margin:3.438rem 0 0 0;

}

div.video-player div.video-player--container>div {
	position:static;

}

div.video-player div.video-player--container---frame-holder:before {
	display:none;
}

div.video-player div.video-player--container---frame-holder {
	height:auto;
	width:100%;
}

div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source {

	width:100%;
	position:relative;
}

div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source div.video-player--container---frame-holder----share {

	text-align:right;
	margin:1rem 5% 0 0;

}

div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source div.video-player--container---frame-holder----share {

	font-size:0.875rem;

}


div.video-player div.video-player--container---text-holder {
	padding:0 0 0 2.215rem;
	height:auto;
	margin:0;
	width:68.359375%;
}

div.video-player div.video-player--container---text-holder div.video-player--container---text-holder----heading h3 {

	margin:3rem 0 0 0;
	padding:0 0 2.125rem 0;


}

div.video-player div.video-player--container---text-holder div.video-player--container---text-holder----desc p {
	padding:0 0 10rem 0;

}


/*
*	================================================================
*	PROJECT STYLES
*
*	================================================================
*/


section.projects {

}

section.photography, section.branding-identity {
	background:#000 none;
}


/*
*	================================================================
*	MOTION GRAPHICS STYLES
*
*	================================================================
*/

section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul {
	padding:2.188rem 0;


}

/*=================================================
	ARTOF SUB-SECTION STYLES
=================================================== */


div.art-of-fundation--heading ul li:last-of-type span.art-of-fundation--heading---info---logo-ref {

	background-size:5.000rem auto;
}

/*
*	================================================================
*	HOME STYLES
*
*	================================================================
*/

section.home div.wrapper div.content {
	width:70%;
}

section.home div.wrapper div.content p {

	font-size:1.750rem;
	line-height:1.750rem;
	margin:0 0 0.500rem 0;

}

section.home div.wrapper div.content span {

	font-size:0.813rem;

}

/*
*	================================================================
*	INFO STYLES
*
*	================================================================
*/

section.info div.wrapper {
	padding:0 0 0 0;


} /* The <div> holding the content */

section.info div.content {

	padding:3.188rem 1.625rem 3.188rem 1.625rem;


}

section.info div.content ul {
	margin:0;
	display:block;
}

section.info div.content ul:last-of-type {
	margin-bottom:1.188rem;
}


section.info div.content ul li.info-list--heading {

	margin:1.938rem 0 1.438rem 0 !important;

}

/*
*	================================================================
*	CLIENTS STYLES
*
*	================================================================
*/



section.clients div.content {
	max-width:none;
	width:100%;
	height:100%;
	padding:0 10%;
	margin:0 auto;
	overflow-y:auto;
}

section.clients div.content ul {
	margin:8rem auto 0 auto;
	align-items:flex-start;
	align-content:flex-start;

}

/*
*	================================================================
*	MOCAP STYLES
*
*	================================================================
*/


section.mocap:before {
	display:none;
}

section.mocap div.content {
	overflow-y:auto;
	height:100%;
	max-width:none;
	padding:0 10%;
	display:block;
}

section.mocap div.content>div {
	display:block;
}

section.mocap div.content div.mocap-content--left {
	width:100%;
	margin:7.000rem 0 0 0;

}

section.mocap div.content div.mocap-content--right {
	width:100%;
	margin:3.000rem 0 0 0;
}


section.mocap div.content div.mocap-content--left div.content-mocap--main-logo {
	width:7.688rem;
	height:6.125rem;
	background-size:contain;
}

section.mocap div.content div.mocap-content--left a.content-mocap-btn {
	display:none;

	/* DO NOT Display the external button	*/
}

section.mocap div.content div.mocap-content--right p.content-mocap--text, section.mocap div.content div.mocap-content--right ul.content-mocap--contact {
	font-size:0.875rem;
	text-align: center;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos {
	text-align:center;
	margin:2.875rem 0 5rem 0;

}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li div {

	background-position:center;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--contact li a:not([href^="mailto:"]) {
	color:white;
	text-decoration:underline;
	display:block;
	margin:1rem 0 0 0;
}  /* Make the second button more prominent and act as primary source for visiting the mocap.pl site*/



/*
*	================================================================
*	MUSIC STYLES
*
*	================================================================
*/


section.music div.content ul li a {
	background-size:50%;
}



/*=================================================

GENERAL OVERRDIDES

=================================================== */



/*=================================================
MUSIC PLAYER OVERRDIDES
=================================================== */


body.music.oktave-music div.music-player div.music-player--heading ul li:last-of-type span.music-player--heading---info---logo-ref {
	background-size:9.188rem auto;

}

body.music.music-imaginary div.music-player div.music-player--heading ul li:last-of-type span.music-player--heading---info---logo-ref {

	background-size:6.938rem auto;

}