/*
*	================================================================
*	HTML BOILERPLATE
*
*	================================================================
*/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
html { font-size: 100%; /*overflow-y: scroll;*/ -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
::-moz-selection { background: white; color: black; text-shadow: none; }
::selection { background: white; color: black; text-shadow: none; }



/*

================================================

A.- CUSTOM SCROLLBAR

================================================

*/


.mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct background pointer events to js */ }
.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }

.mCustomScrollBox{ /* contains plugin's markup */
	position: relative;
	overflow: hidden;
	height: 100%;
	max-width: 100%;
	outline: none;
	direction: ltr;
}

.mCSB_container{ /* contains the original content */
	overflow: hidden;
	width: auto;
	height: auto;

}
/*
.mCSB_inside > .mCSB_container{ margin-right: 1.875rem; }*/

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */

.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
	margin-right: 0;
	margin-left: 1.875rem;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
	position: absolute;
	/*
	width:1rem;*/
	width:0.630rem;
	height: auto;
	left: auto;
	top: 0;
	right: 0;
	bottom: 0;
}

/*===============================================================
USE scrollbarPosition:'outside' IN js INIT FOR VIDEO PLAYER !!!!!
WE WILL ADJUST THE POSITION TO THE LEFT BASED ON
div.video-player div.video-player--container---text-holder padding
================================================================ */

.mCSB_outside + .mCSB_scrollTools{ /*right: -66px;*/  left:-3.188rem} /* scrollbar position: outside  */

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
	right: auto;
	left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -1.625rem; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 1.250rem 0; }

.mCSB_scrollTools .mCSB_draggerRail{
	/*
	width:1rem;*/
	width:0.630rem;
	height: 100%;
	margin: 0 auto;
}

.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
	cursor: pointer;
	width: 100%;
	height: 1.875rem; /* minimum dragger height */
	z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
	position: relative;
	/*
	width:1rem;*/
	width:0.630rem;
	height: 100%;
	margin: 0 auto;
	text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
	display: block;
	position: absolute;
	height: 1.250rem;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }

/* HORIZONTAL SCROLLBAR
=================================================== */

.mCSB_horizontal.mCSB_inside > .mCSB_container{
	margin-right: 0;
	margin-bottom: 1.875rem;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */

.mCSB_scrollTools.mCSB_scrollTools_horizontal{
	width: auto;
	/*
	height: 0.250rem;*/
	height: 3rem;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
}

.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
		/*
	 bottom: 0.438rem;
	 bottom:1rem;*/
	 bottom:-1.5rem;
} /* scrollbar position: outside */

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
	width: 100%;
	height: 0.063rem;
	margin: 0 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
	width: 30px; /* minimum dragger width */
	height: 100%;
	left: 0;
	/*THIS LINE BLOW IS NEW!!!!*/
	bottom:0.219rem;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
	width: 100%;
	height: 0.500rem;
	margin: 0 auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
	/*height: 12px;  auto-expanded scrollbar */
	height: 2rem; /* auto-expanded scrollbar */
	margin: 0 auto;

	transition:height 0.5s ease;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
	/*height: 8px;  auto-expanded scrollbar */
	height: 2rem; /* auto-expanded scrollbar */
	margin: 0 0;

	transition:height 0.5s ease
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
	display: block;
	position: absolute;
	width: 20px;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }

/* SYNTAX theme  */

.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }

.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

.mCSB_scrollTools .mCSB_draggerRail{
	/*
	border-left:0.063rem #313135 solid;
	border-top:0.063rem #313135 solid;
	border-bottom:0.063rem #313135 solid;
	border-right:none;
	background-color: #202023; background-color: rgba(32,32,35,1);

	filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";*/

	border:0.063rem #252525 solid;

	background-color:#252525;
	-webkit-transition: background-color 0.25s linear;
	-moz-transition: background-color 0.25s linear;
	-o-transition: background-color 0.25s linear;
	-ms-transition: background-color 0.25s linear;
	transition: background-color 0.25s linear;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {

	border-left:none;
	border-top:0.063rem #313135 solid;
	border-bottom:none;
	border-right:none;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{

	background-color: #2d2d31; background-color: rgba(255,0,0,1);
	filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)";

	-webkit-transition: background-color 0.25s linear;
	-moz-transition: background-color 0.25s linear;
	-o-transition: background-color 0.25s linear;
	-ms-transition: background-color 0.25s linear;
	transition: background-color 0.25s linear;/**/
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background-color: #2d2d31; background-color: rgba(98,99,103,1);
	filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)";
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
	/*
	background-color: #2d2d31; background-color: rgba(102,102,102,1);
	background-color: #2d2d31; background-color: rgba(237,36,60,1);
	filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100";
	border-radius:0.250rem;*/
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background-color: #2d2d31; background-color: rgba(255,0,0,1);
	filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)";
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
	background-image: url(mCSB_buttons.png); /* css sprites */
	background-repeat: no-repeat;
	opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_buttonUp{
	background-position: 0 0;
}

.mCSB_scrollTools .mCSB_buttonDown{
	background-position: 0 -1.250rem;
}

.mCSB_scrollTools .mCSB_buttonLeft{
	background-position: 0 -2.500rem;
}

.mCSB_scrollTools .mCSB_buttonRight{
	background-position: 0 -3.500rem;
}

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }

/*

================================================

0.- KEYFRAMES

================================================

*/

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);}}

@-moz-keyframes pulse {
	0% { background-color:transparent; }
	100% { background-color: #626367; }
}

@-webkit-keyframes pulse {
	0% { background-color:transparent; }
	100% { background-color: #626367; }
}

@keyframes pulse {
	0% { background-color:transparent; }
	100% { background-color: #626367; }
}


/*

================================================

1.- FONT LOADING

================================================

*/

/*
@font-face {
	font-family: 'Changa-Light';
	src: url('../fonts/Changa-Light.eot');
	src: local('?'), url('../fonts/Changa-Light.woff') format('woff'), url('../fonts/Changa-Light.ttf') format('truetype'), url('../fonts/Changa-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}





@font-face {
	font-family: 'Changa-Medium';
	src: url('../fonts/Changa-Medium.eot');
	src: local('?'), url('../fonts/Changa-Medium.woff') format('woff'), url('../fonts/Changa-Medium.ttf') format('truetype'), url('../fonts/Changa-Medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}*/

@font-face {
	font-family: 'DIN-Condensed';
	src: url('../fonts/DINNextLTPro-Condensed.eot');
	src: local('?'), url('../fonts/DINNextLTPro-Condensed.woff') format('woff'), url('../fonts/DINNextLTPro-Condensed.ttf') format('truetype'), url('../fonts/DINNextLTPro-Condensed.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'United-Heavy';
	src: url('../fonts/UnitedSansSmCdHv.eot');
	src: local('?'), url('../fonts/UnitedSansSmCdHv.woff') format('woff'), url('../fonts/UnitedSansSmCdHv.ttf') format('truetype'), url('../fonts/UnitedSansSmCdHv.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'United-Light';
	src: url('../fonts/UnitedSansSmCdLt.eot');
	src: local('?'), url('../fonts/UnitedSansSmCdLt.woff') format('woff'), url('../fonts/UnitedSansSmCdLt.ttf') format('truetype'), url('../fonts/UnitedSansSmCdLt.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*

================================================

2.- GLOBAL STYLES

================================================

*/

html,body {
    font: normal normal normal 100%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
	background:#0f0f0f none;
	width:100%;
	height:100%;
	overflow-y:hidden;
}

a {
	outline:none;
	border:none;

}

div.main-holder {
	width:100%;
	height:100%;
	overflow-y:hidden;

	/* Make he holder to not display so we can fade in/out
		using jQuery
	=================================================== */

	display:none;



}

section {
	width:100%;
	height:100%;
	overflow-y:hidden;
	position:relative;
	z-index:0;

	/* Make the section to not display so we can turn them
		on/off by changing their css display property
		to block
	=================================================== */

	display:none;

	/* Add css for fadeing-out when sharing
	===================================================*/
	transition:opacity 0.5s linear;
	opacity:1;


}

section.current {
	display:block;

}

div.module {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;

	/* Add css for fadeing-out when sharing
	===================================================

	opacity:1;*/

	-webkit-transform:translateY(100%);
	-moz-tranform:translateY(100%);
	-o-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;


}

div.img-loader {
	display:none;
}


/*=================================================
STYLES FOR BULK LOADING
=================================================== */

.bulk-loader {
	display:none;
} /* class to hide all bulk-loader nodes on DOM*/

.bulk-child-img {
	/*
	opacity:1 !important;
	DO NOT SET OPACITY FOR THE ITEM. LET THE TRANSITION FROM .loading TAKE THE DEFAULT VALUES FROM
	EACH ITEM BY THEIR OWN. JUST USE A TRANSITION PROPERTY TO WHATEVER TRANSPARENCY THOSE UNKNOWN ITEMS HAVE :)))
	*/
	transition: opacity 0.5s  linear 0.5s;
} /* class to fade in any node with a class of .bulk-child-img */

.bulk-child-img.loading {
	opacity:0 !important;
	transition-delay:0s;
}	/* class to fade out/hide any node with a class of .bulk-child-img when loading*/




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

div.panels-container {
	width:100%;
	height:100%;
	overflow-x:hidden;
}

div.panels-container ul {
	list-style-type:none;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	white-space:nowrap;

	-webkit-transform:translateX(0);
	-moz-tranform:translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
div.panels-container ul li {
	width:25%;
	height:100%;
	display:inline-block;
	vertical-align:top;
	border-right:#101010 0.063rem solid;
	margin-right:-0.281rem; /* fix for inlin-blocked elements margin*/
	position:relative;
	white-space:normal;
}

div.panels-container ul li:nth-child(even) {
	background:#191919 none;
}

div.panels-container ul li:nth-child(odd)  {
	background:#101010 none;
}

div.panels-container ul li div.panel-bg {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:0;
	background:#101010 none;

}

div.panels-container ul li div.panel-bg div.panel-bg--img {
	width:100%;
	height:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
	opacity:.10;

	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);

	-webkit-transition: opacity 0.5s linear, filter 0.5s linear;
	-moz-transition: opacity 0.5s linear, filter 0.5s linear;
	-o-transition: opacity 0.5s linear, filter 0.5s linear;
	-ms-transition: opacity 0.5s linear, filter 0.5s linear;
	transition: opacity 0.5s linear, filter 0.5s linear;

}



div.panels-container ul li div.panel-content {
	width:100%;
	height:100%;
	text-align:center;
	position:absolute;
	z-index:1;

}

div.panels-container ul li div.panel-content a.panel-content--link-wrapper:before {
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}


div.panels-container ul li div.panel-content a.panel-content--link-wrapper {
	width:100%;
	height:100%;
	display:inline-block;
	vertical-align:middle;
	text-decoration:none;

} /* The wrapper for the panel content*/



div.panels-container ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info {
	display:inline-block;
	vertical-align:middle;
	color:#626367;
	text-transform:uppercase;
	width:90%;
}
div.panels-container ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span {

	color:#626367;
	display:block;
	width:100%;
	text-shadow:#000 0 0.063rem 0;
	line-height:1.500rem;

	font-family:'Changa', sans-serif;

	-webkit-transition: color 0.5s linear 0.25s;
	-moz-transition: color 0.5s linear 0.25s;
	-o-transition: color 0.5s linear 0.25s;
	-ms-transition: color 0.5s linear 0.25s;
	transition: color 0.5s linear 0.25s;
}

div.panels-container ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span.panel-content----info-light {
	font-weight:300;
	font-size:1.250rem;
}

div.panels-container ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span.panel-content----info-bold {

	font-weight:500;
	font-size:1.875rem;


}

ul.panels-control {
	padding:0;
	margin:0;
	list-style-type:none;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;

}

ul.panels-control li {
	height:100%;
	width:5.250rem;
	display:inline-block;
	vertical-align:middle;
	color:white;
	position:absolute;
	text-align:center;
	top:0;

	opacity:1;
	visibility: visible;

	transition: visibility 0s linear, opacity 0.5s linear;


}

ul.panels-control li.hidden {
	opacity:0;
	visibility: hidden;

	transition-delay: 0.5s,0s;
}


ul.panels-control li:first-of-type {
	transform:rotate(180deg);
}

ul.panels-control li:last-of-type {
	right:0;
}

ul.panels-control li div {
	width:100%;
	height:100%;
}

ul.panels-control li div a:before {
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

ul.panels-control li div a {
	display:inline-block;
	vertical-align:middle;
	background:rgba(16,16,16,.1) none;
	text-decoration:none;
	width:100%;
	height:100%;
	position:relative;
	pointer-events:auto;

	-webkit-transition: background 0.5s linear;
	-moz-transition: background 0.5s linear;
	-o-transition: background 0.5s linear;
	-ms-transition: background 0.5s linear;
	transition: background 0.5s linear;

	overflow:hidden;/**/




}

ul.panels-control li div a span:before {
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	display:inline-block;
	vertical-align:middle;
	background:transparent url('../img/ui/arrow_hover.svg') no-repeat center;
	left:-100%;
}

ul.panels-control li div a span {
	background:transparent url('../img/ui/arrow.svg') no-repeat center;
	display:inline-block;
	vertical-align:middle;
	width:100%;
	height:100%;

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);

	-webkit-transform:translateX(0);
	-moz-tranform:translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);

}

/*

Styles for the arrow hovering

*/

ul.panels-control li:hover div a {
	background:rgba(16,16,16,.85) none;
}

ul.panels-control li:hover div a span {
	-webkit-transform:translateX(100%);
	-moz-tranform:translateX(100%);
	-o-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}




/*

Styles for hovering panels

*/

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

div.panels-container ul li:hover div.panel-content a.panel-content--link-wrapper div.panel-content---info span  {
	color:#fff;

}



/*
*	================================================================
*	PANELS ORIGINALS MARK UP -- ADDED BY TOP LEVEL CLASS .orignals on
*	div.panels-container
*
*	================================================================
*/

div.panels-container.originals ul li {

	width:20%;
}

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

div.panels-container.originals ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span {

	color:#626367;
	display:block;
	width:100%;
	text-shadow:#000 0 0.063rem 0;
	line-height:1.500rem;

	font-family:'Changa', sans-serif;

	-webkit-transition: color 0.5s linear 0.25s;
	-moz-transition: color 0.5s linear 0.25s;
	-o-transition: color 0.5s linear 0.25s;
	-ms-transition: color 0.5s linear 0.25s;
	transition: color 0.5s linear 0.25s;
}


div.panels-container.originals ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span.panel-content----info-light {
	font-weight:300;
	font-size:1.125rem;
	margin:0.250rem 0 0 0;
	font-family:'DIN-Condensed', sans-serif;

	color:#ff0000;
}

div.panels-container.originals ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span.panel-content----info-bold {

	font-weight:500;
	font-size:1.875rem;


}

/*

Styles for hovering panels

*/

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

div.panels-container.originals ul li:hover div.panel-content a.panel-content--link-wrapper div.panel-content---info span.panel-content----info-bold  {
	color:#fff;

}





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

div.split-panel-container {
	width:100%;
	height:calc(100% - 4.500rem - 4.375rem); /* Substract from total page height the height of <div-top-menu> and <nav>	*/
	margin:4.500rem 0 0 0;



}

div.split-panel-container div.split-panel-container--top {
	height:50%;
	background:transparent none;

}

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

div.split-panel-container div.split-panel-container--top div.split-panel-container--top---left {
	width:37.29166666666667%;
	height:100%;
	padding:8.938rem 5.875rem 0 0;
	background:#101010 none;

}

div.split-panel-container div.split-panel-container--top div.split-panel-container--top---left h4 {
	padding:0;
	margin:0;
	line-height:3.750rem;

	font-family:'United-Heavy', sans-serif;
	color:#fff;
	font-size:3.750rem;
	text-transform:uppercase;
	text-align:right;
}
div.split-panel-container div.split-panel-container--top div.split-panel-container--top---left h6 {
	padding:0;
	margin:0;

	font-family:'Changa', sans-serif;
	color:#ff0000;
	font-size:1rem;
	text-transform:uppercase;
	text-align:right;
	font-weight:500;
}




div.split-panel-container div.split-panel-container--top div.split-panel-container--top---right {
	width:62.70833333333333%;
	height:100%;
	background:#191919 none;
	padding:8.938rem 5.063rem 0 5.875rem;
}

div.split-panel-container div.split-panel-container--top div.split-panel-container--top---right p {
	padding:0;
	margin:0;
	font-family:'Changa', sans-serif;
	font-size:1.500rem;
	line-height:1.750rem;
	color:#626367

}




div.split-panel-container div.split-panel-container--bottom {
	height:50%;
	overflow-x:hidden;


}

div.split-panel-container div.split-panel-container--bottom ul {
	list-style-type:none;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	white-space:nowrap;


	-webkit-transform:translateX(0);
	-moz-tranform:translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}




div.split-panel-container div.split-panel-container--bottom ul li {
	width:25%;
	height:100%;
	display:inline-block;
	vertical-align:top;
	border-right:#101010 0.063rem solid;
	/*margin-right:-0.063rem;  fix for inlin-blocked elements margin*/
	position:relative;
	white-space:normal;


}

div.split-panel-container div.split-panel-container--bottom ul li:nth-child(even) {
	background:#191919 none;
}

div.split-panel-container div.split-panel-container--bottom ul li:nth-child(odd)  {
	background:#101010 none;
}

div.split-panel-container div.split-panel-container--bottom ul li div.panel-bg {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:0;
	background:#101010 none;


}




div.split-panel-container div.split-panel-container--bottom ul li div.panel-bg div.panel-bg--img {
	width:100%;
	height:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
	opacity:.10;

	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);

	-webkit-transition: opacity 0.5s linear, filter 0.5s linear;
	-moz-transition: opacity 0.5s linear, filter 0.5s linear;
	-o-transition: opacity 0.5s linear, filter 0.5s linear;
	-ms-transition: opacity 0.5s linear, filter 0.5s linear;
	transition: opacity 0.5s linear, filter 0.5s linear;

}



div.split-panel-container div.split-panel-container--bottom ul li div.panel-content {
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;

}




div.split-panel-container div.split-panel-container--bottom ul li div.panel-content a.panel-content--link-wrapper {
	width:100%;
	height:100%;
	display:block;
	text-decoration:none;
	padding:2.625rem 0 0 3.750rem;

}




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

	text-transform:uppercase;
}
div.split-panel-container div.split-panel-container--bottom ul li div.panel-content a.panel-content--link-wrapper div.panel-content---info span {

	color:#626367;
	display:block;
	width:100%;
	text-shadow:#000 0 0.063rem 0;
	line-height:1.125rem;
	color:white;

	font-size:1rem;

	opacity:0;

	font-family:'Changa', sans-serif;

	-webkit-transition: opacity 0.5s linear 0.25s;
	-moz-transition: opacity 0.5s linear 0.25s;
	-o-transition: opacity 0.5s linear 0.25s;
	-ms-transition: opacity 0.5s linear 0.25s;
	transition: opacity 0.5s linear 0.25s;
}

/*

CONTROLS FOR THE SPLIT PANEL

We just need to reposition the ul acting as ui controls. everhing else is agnostic :)))))

*/

ul.panels-control.split {
	padding:0;
	margin:0;
	list-style-type:none;
	width:100%;
	height:calc(50% - 4.375rem);
	position:absolute;
	top:auto;
	bottom:4.375rem;
	left:0;
	pointer-events: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 {

	position:absolute;
	z-index:2;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:4.500rem;
	background:#0f0f0f none;
	border-bottom:#060606 0.063rem solid;

}

div.top-menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	width:100%;
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

div.top-menu ul li div {
	cursor:pointer;
}

div.top-menu ul li span {
	display:inline-block;
	vertical-align:middle;
	height:100%;
	line-height:4.500rem;

}

div.top-menu ul li:first-of-type span {

	color:#b3b3b3;
	font-family:'DIN-Condensed', sans-serif;
	font-size:1rem;
	text-transform:uppercase;
}

div.top-menu ul li:first-of-type span[class*="closer-btn"] {
	width:0.875rem;
	height:0.875rem;
	background:transparent url('../img/ui/closer-icon.svg') no-repeat center left;
	margin:-0.156rem 0 0 2.125rem;
	cursor:default;

	-webkit-transform:rotate(0);
	-moz-tranform:rotate(0);
	-o-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);

	-webkit-transition: transform 0.25s ease-out;
	-moz-transition: transform 0.25s ease-out;
	-o-transition: transform 0.25s ease-out;
	-ms-transition: transform 0.25s ease-out;
	transition: transform 0.25s ease-out;


} /* Selector for any span under a top.menu <div> node with a class of closer-btn*/

div.top-menu ul li:first-of-type span[class*="closer-btn"] + span {
	padding:0 0 0 1.500rem;


	-webkit-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-o-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;
}

/*

Styles for hovering a closer button on any section/subsection with a div.panel as heading

*/


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

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




/**/


div.music-player div.music-player--heading ul li:last-of-type span.music-player--heading---info---text-ref {
	margin:0 5.3125% 0 0;
	/*
	display:none;*/

}

div.top-menu ul li:last-of-type {
	text-align:right;

}



div.top-menu ul li:last-of-type span[class*="info"] {
	margin:0 2.125rem 0 0;

}

div.top-menu ul li:last-of-type span[class*="srg"] {
	padding:0 2.750rem 0 0;
	position:relative;
	background:transparent url('../img/ui/srg-logo.svg') no-repeat right 53%;
} /* Class to use when the photo-gallery is related to BRANDING --- REUSE THIS ON AN BODY OVERRRIDE BASED ON BODY CLASS COMING FROM DEEPLINKING!!! */


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

div.art-of-detail {
	/*
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;*/

	/*

	Possibly the avobe will be part of module class. See if the other modules share styles!!!

	Own styles

	*/



}

div.art-of-detail div.art-of-detail--wrapper:before {
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

div.art-of-detail div.art-of-detail--wrapper {
	width:100%;
	height:100%;
	text-align:center;
	position:relative;
	z-index:1;


}
div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content {
	/**/


	width:75.78125%;
	height:22.000rem;
	display:inline-block;
	vertical-align:middle;
}


div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content>div{
	display:inline-block;
	vertical-align:middle;
	position:relative;
}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left {
	width:40.2076124567474%;
	height:100%;
	text-align:right;
}


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:4.735rem;
	width:100%;
	color:#fff;
	text-transform:uppercase;
	margin:0;
	padding:2.063rem 0 0 0;
	text-align:right;


}

div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----left h3 span {
	display:block;
	padding:0;
	text-align:right;
	direction: rtl; /* prevent overflowing by setting text direction from right to left so words do no break from the wrong side */

}

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-family:'United-Light', sans-serif;
	font-size:4.735rem;

}

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-family:'United-Heavy', sans-serif;
	font-size:5.625rem;


}

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 {
	margin:1.750rem 0 0 0 !important;
	position:absolute;
	right:0;
	padding:0.750rem 1.188rem;

}

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.dummy {
	pointer-events: none;
}



div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content div.art-of-detail--wrapper---content----right {
	width:59.7923875432526%;
	height:100%;
	text-align:left;
}

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 {
	width:100%;
	height:100%;
	margin:0 0 0 4.000rem;
	overflow-y:auto;
}
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 5.438rem 0 3.188rem;
	margin:0;
	color:#626367;
	font-family:'Changa', sans-serif;
	font-size:1rem;
	line-height:1.500rem;
	text-shadow: rgba(0,0,0,.85) 0 0.063rem 0.063rem;

}


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



div.originals-detail {
	/*
	Potentially part of the module class


	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;*/


	/*
	Own styles
	*/

}

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

div.originals-detail div.originals-detail--content-wrapper {
	width:100%;
	height:100%;
	text-align:center;
	position:relative;
	z-index:1;
}
div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content {
	/* max-width:100.625rem;
	width:95%;
	display:inline-block;
	vertical-align:middle; */

	width:85.78125%;
	height:22.000rem;
	display:inline-block;
	vertical-align:middle;


}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content>div{
	display:inline-block;
	vertical-align:middle;
	position:relative;

}

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

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content div.originals-detail---content----left {
	width:40.2076124567474%;
	height:100%;
	text-align:right;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content h4.originals-detail---content----heading {
	font-size:5.625rem;
	line-height:5.625rem;
	width:100%;
	font-weight:400;
	padding:3.063rem 0 0 0;
	margin:0;
	font-family:'United-Heavy', sans-serif;
	color:#fff;
	text-transform:uppercase;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content a.originals-detail---content----video-btn {
	/* margin:4.813rem auto 0 auto; */
	margin:1.750rem 0 0 0 !important;
	position:absolute;
	right:0;
	padding:0.750rem 1.188rem;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content a.originals-detail---content----video-btn.dummy {
	pointer-events: none;
}

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

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content div.originals-detail---content----right {
	width:59.7923875432526%;
	height:100%;
	text-align:left;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content p.originals-detail---content----text {
	font-family:'Changa', sans-serif;
	font-size:1rem;
	line-height:1.500rem;
	color:#626367;
	/*
	width:62.76560967636483%;
	height:100%;
	*/

	width:90%;


	margin:0 0 2rem 4.000rem;
	padding:0 5.438rem 0 3.188rem;

	/*margin:0 auto;
	padding:0;*/
	text-shadow: rgba(0,0,0,.85) 0 0.063rem 0.063rem;
}





div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul {
	padding:0 0 0 3.188rem;
	/* margin:7.813rem auto 0 auto; */
	margin:0 0 0 4.000rem;
	list-style-type:none;
	width:90%;

	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	align-content:flex-start;
	flex-flow:row wrap;
}

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;
}

/*

Styles for the originals logos

*/

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li.originals-detail--content--logos---chao2 {
	background-image:url('../img/projects/originals/chao2-logo.svg');
	background-size:80% auto;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li.originals-detail--content--logos---vray {
	background-image:url('../img/projects/originals/vray-logo.svg');
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li.originals-detail--content--logos---mocap {
	background-image:url('../img/info/mocap-gray.svg');
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li.originals-detail--content--logos---autodesk {
	background-image:url('../img/projects/originals/autodesk-logo.svg');
	background-size:70% auto;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li.originals-detail--content--logos---evermotion {
	background-image:url('../img/info/ever-gray.svg');
	background-size:60% auto;
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li.originals-detail--content--logos---ephere {
	background-image:url('../img/projects/originals/ephere-logo.svg');
}

div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content ul li.originals-detail--content--logos---vivex {
	background-image:url('../img/projects/originals/vivex-logo.svg');
	background-size:60% auto;
}




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

div.bg-slider {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	/*
	z-index:0;*/

}

div.bg-slider ul {
	padding:0;
	margin:0;
	list-style-type:none;
	width:100%;
	height:100%;

	opacity: .35;

}

div.bg-slider ul li {
	width:100%;
	height:100%;
	/*
	background:transparent url('../img/slides/home/01.jpg') no-repeat center center;*/
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover !important;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	/**/
	opacity:0;



	-webkit-transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	-ms-transition: opacity 1s linear;
	transition: opacity 1s linear;


}

div.bg-slider ul li.current {
	opacity:.65;

}

div.bg-slider div.bg-slider--ui-holder {
	position:absolute;
	top:1.5rem;
	right:2rem;
	min-width:1rem;
	width:100%;
	height:1rem;




	text-align:right;


}



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


		width:0.375rem;
		height:0.375rem;
		border-radius:0.375rem;
		margin:0 0.250rem;
		display:inline-block;



		position:relative;

		/**/
		z-index:10;

		background:transparent none;
		border:#626367 0.063rem solid;

		transition:background 0.5s linear, border 0.5s linear;

}



div.bg-slider div.bg-slider--ui-holder span.loading {
	-webkit-animation:pulse 0.25s linear infinite;
	-moz-animation:pulse 0.25s linear infinite;
	animation:pulse 0.25s linear infinite;
}
div.bg-slider div.bg-slider--ui-holder span.loaded {
	background:#626367 none;
	border:transparent 0.063rem solid;
}

div.bg-slider div.bg-slider--ui-holder span.loaded.current {
	background:red none;
	border:red 0.063rem solid;
}




/*
*	================================================================
*	EXTERNAL BUTTON STYLES / BORDERED BUTTONS
*
*	================================================================
*/

a.btn-external-changa {
	display:block;

	max-width:12.750rem;
	width:100%;
	height:auto;

	margin:0 auto;
	font-family:'Changa', sans-serif;
	font-weight:500;
	font-size:1rem;
	text-transform:uppercase;

	color:#b3b3b3;

	text-decoration:none;
	padding:1.188rem;

	background:transparent none;
	border:currentColor 0.063rem solid;

	-webkit-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear;
	-moz-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear;
	-o-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear;
	-ms-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear;
	transition: background 0.3s linear, color 0.3s linear, border 0.3s linear;


	overflow:hidden;

	outline:none;
}

a.btn-external-changa span {
	text-align:center;
	width:100%;

	margin:0 auto;
	display:block;
	position: relative;

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);

	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility:    hidden;
  	-ms-backface-visibility:     hidden;
}

a.btn-external-changa span:after {

	content:attr(data-hover);
	position: absolute;
	left:0;
    top:500%;
	width:100%;
	height:100%;
	font-size:inherit;


}

a.btn-external-changa:hover {
	background:#b3b3b3 none;
	color:#000;
	border:#b3b3b3 0.063rem solid;
}

a.btn-external-changa:hover span {
	-webkit-transform: translateY(-500%);
	-moz-transform: translateY(-500%);
	-o-transform: translateY(-500%);
	-ms-transform: translateY(-500%);
	transform: translateY(-500%);
}


/*

Styles for rotator container -- generic

*/

div.rotatorContainer {
	display:inline-block;
	vertical-align:middle;
	overflow-x:hidden;
	overflow-y:hidden;
	white-space: nowrap;
	padding:0;
	margin:0;
	position:relative;
	text-overflow:ellipsis;
	color:inherit;
}


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

nav {
	position:fixed;
	bottom:0;
	left:0;
	color:#626367;
	font-size:1rem;
	font-family:'Changa', sans-serif;
	font-weight:500;
	text-transform:uppercase;
	background:#0f0f0f none;
	border-top:#060606 0.063rem solid;
	width:100%;
	/*z-index:10;*/


	/**/webkit-transition: bottom 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s;
	-moz-transition: bottom 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s;
	-o-transition: bottom 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s;
	-ms-transition: bottom 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s;
	transition: bottom 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s;
}

/*



nav.out {


	bottom:-100%;

}*/

nav div.mainLogo {

	display:inline-block;
	vertical-align:middle;
	width:11.063rem;
	height:4.375rem;
	border-right:#060606 0.063rem solid;
	/**/
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url(../img/main-logo.svg);

	position:relative;
	left:0;




	-webkit-transition: background-color 0.25s linear, left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s;
	-moz-transition: background-color 0.25s linear, left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s;
	-o-transition: background-color 0.25s linear, left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s;
	-ms-transition: background-color 0.25s linear, left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s;
	transition: background-color 0.25s linear, left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s;/**/

}

nav div.mainLogo.out {

	left:-100%;
}

nav div.mainLogo a {

	display:inline-block;
	width:100%;
	height:100%;
	vertical-align:middle;
	background:transparent none;
	border:none;
	outline:none;

}


nav div.mainLogo span.mobileMenu {
	display:none;
}


nav div.mainLogo:hover  {
	background-color:#181818;
}


nav ul {
	list-style:none;
	padding:0 0 0 1.563rem;
	margin:0;
	display:inline-block;
	vertical-align:middle;
	border-left:#1c1c1c 0.063rem solid;

	opacity:1;

	-webkit-transition: opacity 0.5s linear 1s;
	-moz-transition: opacity 0.5s linear 1s;
	-o-transition: opacity 0.5s linear 1s;
	-ms-transition: opacity 0.5s linear 1s;
	transition: opacity 0.5s linear 1s;



}

/*


nav ul.out {
	opacity:0;
}*/

nav ul span.slash {
	padding:0.094rem 0 0 0;
	display:inline-block;
	vertical-align:middle;
}

nav ul li {
	display:inline-block;
	vertical-align:middle;
	padding:1.53rem 0; /* give some more padding so borders are perfectly aligned	*/
	height:100%;
}

nav ul li a {
	color:inherit;
	text-decoration:none;
	display:block;
	text-align:center;
	border:none;
	outline:none;
	overflow:hidden;
}


nav ul li a span {
	backface-visibility: hidden;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    text-align: center;
    transition: transform 0.3s ease 0s;
    vertical-align: middle;
    width: 100%
}

nav ul li a span:before {
	content: attr(data-hover);
	width:100%;
	height:100%;
	position:absolute;
	top:100%;
	color:red;
	transform: translate3d(0px, 0px, 0px);

}

nav ul li a:hover span, nav ul li a.current span {
	transform: translateY(-100%);
}



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

div.music-player {

	/*

	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#0f0f0f none;
	overflow:hidden;*/


	/*
	-webkit-transform:translateY(100%);
	-moz-tranform:translateY(100%);
	-o-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);



	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);*/

	/*

	Own Styles

	*/

	background:#0f0f0f none;
	overflow:hidden;

}

/*



div.music-player div.music-player--heading {
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:4.500rem;
	background:#0f0f0f none;
	border-bottom:#060606 0.063rem solid;
}

div.music-player div.music-player--heading ul {
	padding:0;
	margin:0;
	list-style-type:none;
	width:100%;
	height:100%;
	display:inline-block;
	vertical-align:middle;


}
*/
div.music-player div.music-player--heading ul li {
	display:inline-block;
	vertical-align:middle;
	width:50%;
	height:100%;
}



div.music-player div.music-player--heading ul li span {
	display:inline-block;
	vertical-align:middle;
	height:100%;
	line-height:4.500rem;

}

/*


div.music-player div.music-player--heading ul li:first-of-type span {
	cursor:pointer;
	color:#b3b3b3;
	font-family:'DIN-Condensed', sans-serif;
	font-size:1rem;
	text-transform:uppercase;
}

div.music-player div.music-player--heading ul li:first-of-type span.music-player--heading---info---closer-btn {
	width:0.875rem;
	height:0.875rem;
	background:transparent url('../img/ui/closer-icon.svg') no-repeat center left;
	margin:-0.188rem 1.500rem 0 5.3125%;
}*/

div.music-player div.music-player--heading ul li:last-of-type {
	text-align:right;
}

div.music-player div.music-player--heading ul li:last-of-type span {
	font-family:'Changa', sans-serif;
	font-size:1rem;
	color:#fff;
	text-transform:uppercase;
}

div.music-player div.music-player--heading ul li:last-of-type span.music-player--heading---info---logo-ref {
	/*
	background:transparent none;
	background-size:12.125rem auto;
	width:94.6875%;
	height:100%;
	margin:0 5.3125% 0 0;

	display:none;*/
}

/*

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

	display:none;
}*/

/*

show/hide following logo styles based on a class added to the music-player either at div.music-player or div.music-player--heading nodes
--------------------------------------------------------------------------------------------------------------------------------------------

*/

/*



div.music-player div.music-player--heading ul li:last-of-type span.music-player--heading---info---logo-ref {
	background:transparent url('../img/music/oktave-color.svg') no-repeat center right;
	background-size:12.125rem auto;
	width:94.6875%;
	height:100%;
	margin:0 5.3125% 0 0;

}*/
/*
div.music-player div.music-player--heading ul li:last-of-type span.music-player--heading---info---logo-ref {
	background:transparent url('../img/music/mi-color-player.svg') no-repeat center right;
	background-size:10.688rem auto;
	width:94.6875%;
	height:100%;




}*/

/*
--------------------------------------------------------------------------------------------------------------------------------------------
*/


div.music-player div.music-player--render {
	width:100%;
	height:15.125rem;
	background:#191919 none;
	position:relative;
	z-index:-1;
}

div.music-player div.music-player--render div.music-player--render---canvas-holder {
	width:100%;
	height:calc(100% - 4.500rem);
	position:absolute;
	bottom:0;
}

div.music-player div.music-player--render div.music-player--render---timestamp {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	text-align:center;
}

div.music-player div.music-player--render div.music-player--render---timestamp:before {
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

div.music-player div.music-player--render div.music-player--render---timestamp h6 {
	color:#fff;
	display:inline-block;
	vertical-align:middle;
	padding:0;
	font-weight:500;
	margin:4.500rem 0 0 0; /* compensate the height of the heading at fixed position and render including its height */
	width:100%;
	font-size:3.750rem;
	font-family:'DIN-Condensed', sans-serif;
}

div.music-player div.music-player--ui {
	width:100%;
	height:4.438rem;
	border-bottom:#060606 0.063rem solid;
}

div.music-player div.music-player--ui ul {
	padding:0;
	margin:0;
	list-style-stype:none;
	width:100%;
	height:100%;

}

div.music-player div.music-player--ui ul li {
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

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



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

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 {
	font-size:0.875rem;
	font-family:'DIN-Condensed', sans-serif;
	color:#fff;
	position:absolute;
	top:calc(50% - 0.563rem);
	display:none; /* This will show only on tablet 	*/

}

div.music-player div.music-player--ui ul li.music-player--ui---progress:before{
	content:attr(data-progress);
	left:1.500rem;

}

div.music-player div.music-player--ui ul li.music-player--ui---progress:after{
	content:attr(data-total);
	right:1.500rem;
}



div.music-player div.music-player--ui ul li.music-player--ui---progress div.music-player--ui---progress----bar-container:before {
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

div.music-player div.music-player--ui ul li.music-player--ui---progress div.music-player--ui---progress----bar-container {

	height:100%;
	text-align:center;
	position:relative;
	width:96.79043423536816%; /* Make the actual bars relative to the width of its parent so we have some space at he right	*/
}

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:#191919 none;
	width:100%;
	height:0.125rem;
	display:inline-block;
	vertical-align:middle;



}

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 span.music-player--ui---progress----bar-container-----bg------seeker {
	display:block;
	height:100%;
	width:0;
	background:red none;

	pointer-events: none; /* do not allow pointer events on the progress indicator. We will use parent nodes as reference */
}

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

div.music-player div.music-player--ui ul li.music-plater--ui---info-toggler div {
	width:1.125rem;
	height:100%;
	margin:0 auto;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url('../img/ui/info-hidden-btn.svg');
	cursor:pointer;
}



div.music-player div.music-player--ui ul li.music-player--ui---volume:before {
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume {
	width:9.688rem;
	height:100%;
	text-align:center;

}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul {
	list-style-type:none;
	padding:0;
	margin:0;
	width:95%;
	height:50%;
	display:inline-block;
	vertical-align:middle;


}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li {
	width:0.375rem;
	margin:0;

	position:relative;

}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li div {
	position:absolute;
	bottom:0.600rem;
	left:0;
	width:0.125rem;
	background:#191919 none;
	pointer-events:none;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(1) div {
	height:0.563rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(2) div {
	height:0.625rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(3) div {
	height:0.688rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(4) div{
	height:0.750rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(5) div{
	height:0.813rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(6) div{
	height:0.875rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(7) div{
	height:0.938rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(8) div{
	height:1rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(9) div{
	height:1.063rem;
}

div.music-player div.music-player--ui ul li.music-player--ui---volume ul li:nth-child(10) div{
	height:1.125rem;
}



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-----handler {
	position:absolute;
	width:1rem;
	height:1rem;
	border-radius:1rem;
	background:#fff none;
	/*left:calc(25% - 0.5rem);*/
	left:0;
	top:calc(50% - 0.5rem);
}


div.music-player div.music-player--body {
	width:100%;
	height:calc(100% - 4.438rem - 15.125rem - 4.500rem); /* Calculate the height of the player body based on the remaining space after substracting the height of the player heading, player render and player ui heights	*/
	position:relative;
	overflow:hidden;
}

div.music-player div.music-player--body>div {
	position:absolute;
	width:50%;
	height:100%;
	top:0;
	overflow-y:auto;
	transition:left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), width 0.5s ease;

}

div.music-player div.music-player--body div.music-player--body---playlist {
	left:0;
	width:100%;
	transition-delay:0s,0s;
}

div.music-player div.music-player--body div.music-player--body---playlist ul {
	width:100%;
	height:100%;
	list-style-stype:none;
	padding:0;
	margin:0;
	font-family:'Changa', sans-serif;
	font-size:1rem;
	color:#626367;



}

div.music-player div.music-player--body div.music-player--body---playlist ul li:before {
	content:'';
	position:absolute;
	display:block;
	width:1rem;
	height:100%;
	left:1.250rem;
	top:0;

	opacity:0.5;

	transition:opacity 0.5s linear;

	background:transparent url('../img/ui/track-muted.svg') no-repeat center center;
}

div.music-player div.music-player--body div.music-player--body---playlist ul li {
	position:relative;
	width:100%;
	padding:1.313rem 3.250rem 1.313rem 3.875rem;
	background:transparent none;
	color:inherit;
	text-transform:capitalize;
	border-bottom:#060606 0.063rem solid;
	cursor:pointer;

	-webkit-transition: background 0.5s linear, color 0.5s linear;
	-moz-transition: background 0.5s linear, color 0.5s linear;
	-o-transition: background 0.5s linear, color 0.5s linear;
	-ms-transition: background 0.5s linear, color 0.5s linear;
	transition: background 0.5s linear, color 0.5s linear;
}

div.music-player div.music-player--body div.music-player--body---playlist ul li:after {
	content:attr(data-time);
	display:inline-block;
	vertical-align:middle;
	position:absolute;
	font-family:'DIN-Condensed', sans-serif;
	color:#626367;
	right:3.250rem;
	margin:0.063rem 0 0 0;

}

div.music-player div.music-player--body div.music-player--body---playlist ul li div.rotatorContainer {

	width:calc(100% - 3.250rem); /* substract the padding right to leave room for the timestamp at :after */
	height:100%;
}

div.music-player div.music-player--body div.music-player--body---playlist ul li div.rotatorContainer span {
	pointer-events: none;
}

/*

Styles for the current track

*/



div.music-player div.music-player--body div.music-player--body---playlist ul li.current {
	background:#191919 none;
	color:#fff;
}

div.music-player div.music-player--body div.music-player--body---playlist ul li:hover:before, div.music-player div.music-player--body div.music-player--body---playlist ul li.current:before {
	background:transparent url('../img/ui/track-current.svg') no-repeat center center;
	opacity:1;
}

div.music-player div.music-player--body div.music-player--body---playlist ul li.current:after {
	color:#fff;
}



div.music-player div.music-player--body div.music-player--body---text {
	left:100%;
	border-left:#060606 0.063rem solid;
	transition-delay:0s,0.5s;
}


/*

Styles for the music player info panel

*/

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

	padding:4.063rem 9.000rem 4.063rem 4.938rem;

}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content h3 {
	font-family:'United-Heavy', sans-serif;
	text-transform:uppercase;
	font-weight:400;
	font-size:2.250rem;
	color:#fff;
	line-height:1.500rem;
	padding:0;
	margin:0;
}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content p {
	padding:0;
	margin:2.375rem 0 0 0;
	color:#626367;
	font-size:1rem;
	font-family:'Changa', sans-serif;
	line-height:1.500rem;

}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content ul {
	padding:0;
	margin:2.563rem 0 0 0;
	list-style-type:none;
	font-family:'Changa', sans-serif;
	font-size:1rem;
	line-height:1.500rem;
	color:#626367;
}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content ul li.heading {
	color:#fff;
}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content ul li.mail a {
	color:red;
	text-decoration:none;

}

div.music-player div.music-player--body div.music-player--body---text div.music-player--body---text----content ul li.external a {
	color:inherit;

}
/*
width:1.125rem;
	height:100%;
	margin:0 0 0 2.938rem;
	cursor:pointer;


HIde the node holding the <audio> tag
*/

div.music-player div.music-player--audio-holder {
	display:none;
}







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

div.photo-gallery {

	/*

	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;


	-webkit-transform:translateY(0);
	-moz-tranform:translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);*/


	/*

	Own Styles

	*/

	background:#101010 none;
}


div.photo-gallery div.photo-gallery--heading ul li {
	display:inline-block;
	vertical-align:middle;
	width:33.33333333333%;
	height:100%;
}


div.photo-gallery div.photo-gallery--heading ul li:nth-child(2), div.photo-gallery div.photo-gallery--heading ul li:last-of-type {
	text-transform:uppercase;
	font-family:'Changa', sans-serif;
	font-size:1rem;
	color:#fff;
	font-weight:500;
}

div.photo-gallery div.photo-gallery--heading ul li:nth-child(2) {
	text-align:center;
	overflow:hidden;


}

div.photo-gallery div.photo-gallery--heading ul li:nth-child(2) span {
	color:#b3b3b3;
	position:relative;
	cursor:pointer;
}

div.photo-gallery div.photo-gallery--heading ul li:nth-child(2) b {
	font-weight:400;
	color:red;
}

div.photo-gallery div.photo-gallery--heading ul li:nth-child(2) span.photo-gallery--heading---info---desc-toggler {


	-webkit-transform:translateY(0);
	-moz-tranform:translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), color 0.5s linear;
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), color 0.5s linear;
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), color 0.5s linear;
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), color 0.5s linear;
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), color 0.5s linear;

}

div.photo-gallery div.photo-gallery--heading ul li:nth-child(2) span.photo-gallery--heading---info---fullscreen {
	transition:color 0.5s linear;
}

div.photo-gallery div.photo-gallery--heading ul li:nth-child(2) span:hover {
	color:#fff;
}

div.photo-gallery div.photo-gallery--heading ul li:nth-child(2) span.photo-gallery--heading---info---desc-toggler:before {
	content:attr(data-close);
	width:100%;
	height:100%;
	font-size:inherit;
	color:inherit;
	font-family:inherit;
	position:absolute;
	top:100%;


}

/*

Styles for the gallery container

*/
div.photo-gallery div.photo-gallery--container {
	width:100%;
	height:calc(100% - 4.500rem - 9.750rem - 4.375rem); /* Get the height f the main photo-gallery container by substracting the total width - the height og the photo-gallery heading - the height of the thumbs-container - the height of the navigation at the bottom	*/


	margin:4.500rem 0 0 0; /* Add as margin-top the same height of the photo-gallery--heading <div> */
	padding:0;

	position:relative;
	z-index:-1;

	opacity:1;



	-webkit-transform:scale(1);
	-moz-tranform:scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), height 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), height 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), height 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), height 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), height 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.5s linear;/**/

	/*

	temporary styles until flickity is activated

	*/


	overflow:hidden;

}

div.photo-gallery div.photo-gallery--container:after {
	content:attr(data-count);
	display:none;
	position:absolute;
	width:100%;
	bottom:4%;
	text-align:center;
	font-size:0.875rem;
	font-family:'DIN-Condensed', sans-serif;
	color:#fff;
}

div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	list-style-type: none;
	white-space:nowrap;
	transform:translateX(0);

	transition:transform 0.35s cubic-bezier(0.190, 1.000, 0.220, 1.000);

}


div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder li.photo-gallery--container----cell {

	width:100%;
	height:100%;
	padding:0;
	margin:0;
	display:inline-block;
	vertical-align:middle;
	position:relative; /* USE POSITION RELATIVE HERE SO CAN IMPLEMENT AN ABSOLUTE POSITIONED LOADING SPIN JUST FOR THIS TYPE OF ITEM*/

	opacity:0;

	transition:opacity 0s linear 0s;/**/

}

div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder li.photo-gallery--container----cell div.photo-gallery--container---cell-----spinner {
	position:absolute;
	top:0;
	left:0;
	background:transparent none;
	width:100%;
	height:100%;
}

div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder li.photo-gallery--container----cell div.photo-gallery--container---cell-----spinner svg {
	position:absolute;
	top:calc(50% - 1rem);
	left:calc(50% - 1rem);

	-webkit-animation:spin 0.5s linear infinite;
	-moz-animation:spin 0.5s linear infinite;
	animation:spin 0.5s linear infinite;
}



div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder li.photo-gallery--container----cell.current {

	opacity:1;/**/
	transition-duration:0.5s;
	transition-delay: 0.15s;
}



div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder li.photo-gallery--container----cell div.photo-gallery--container---cell-----img-holder {
	width:100%;
	height:100%;

	opacity:1;
	transition:opacity 0.5s linear;

	/*
	background:transparent url('../img/ui/02.jpg') no-repeat center center;*/
	background-color:transparent;
	background-repeat:no-repeat;
	background-position: center;
	background-size:auto 80%;
}

div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder li.photo-gallery--container----cell div.photo-gallery--container---cell-----img-holder.loading {
	opacity:0;
}

div.photo-gallery div.photo-gallery--container ul.photo-gallery--container---holder li.photo-gallery--container----cell div.clicker {
	position:absolute;
	top:0;
	left:0;
	right:0;
	/*background:rgba(255,0,0,.15) none;*/
	width:100%;
	height:100%;
	margin:0 auto;


	/*cursor:url('../img/ui/zoom-icon.svg'), pointer;*/

}

/*

Styles for the thumbs-container

*/

div.photo-gallery div.photo-gallery--thumbs-container  {
	width:100%;
	height:9.750rem;
	padding:0 3.188rem;

	-webkit-transform:translateY(0);
	-moz-tranform:translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);

	-webkit-transition: transform 0.45s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.45s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.45s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.45s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.45s cubic-bezier(0.190, 1.000, 0.220, 1.000);

	overflow-x:auto;



}

div.photo-gallery div.photo-gallery--thumbs-container ul.photo-gallery--thumbs-container---holder {
	list-style:none;
	padding:0;
	margin:0;
	text-align:left;
	display:inline-block;
	white-space: nowrap;

}

div.photo-gallery div.photo-gallery--thumbs-container  ul.photo-gallery--thumbs-container---holder li.photo-gallery--thumbs-container----cell {


	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
	opacity:.25;
	border:transparent 0.250rem solid;
	transition:opacity 0.5s linear, border 0.5s ease-in-out;

	width:12.250rem;
	height:6.875rem;
	margin:0 0.188rem;

	background:#191919 none;



}

div.photo-gallery div.photo-gallery--thumbs-container  ul.photo-gallery--thumbs-container---holder li.photo-gallery--thumbs-container----cell div.photo-gallery--thumbs-container----cell-----img-holder {
	width:100%;
	height:100%;

	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% auto;

	opacity:1;

	transition:opacity 0.5s linear;

}

div.photo-gallery div.photo-gallery--thumbs-container  ul.photo-gallery--thumbs-container---holder li.photo-gallery--thumbs-container----cell div.photo-gallery--thumbs-container----cell-----img-holder.loading {
	opacity: 0;
}

div.photo-gallery div.photo-gallery--thumbs-container  ul.photo-gallery--thumbs-container---holder li.photo-gallery--thumbs-container----cell.current,  div.photo-gallery div.photo-gallery--thumbs-container  ul.photo-gallery--thumbs-container---holder li.photo-gallery--thumbs-container----cell:hover{
	opacity:1;
	border:#ff0000 0.250rem solid;
}



/*

Styles for the gallery description

*/



div.photo-gallery div.photo-gallery--desc {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:0;

	visibility:hidden;
	opacity:0;

	-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-moz-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-o-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-ms-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	transition: visibility 0s linear 0.5s, opacity 0.5s linear;


}

div.photo-gallery div.photo-gallery--desc div:before {
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

div.photo-gallery div.photo-gallery--desc div {
	width:100%;
	height:100%;
	text-align:center;
	overflow-y:auto;
}

div.photo-gallery div.photo-gallery--desc div p {
	vertical-align:middle;
	display:inline-block;
	width:66.25%;
	padding:6rem 0 4.500rem 0;

	margin:0;
	font-size:1.250rem;
	font-family:'Changa', sans-serif;
	font-weight:500;
	color:#626367;

}



/*

Styles for the navigation UI arrows

*/

div.photo-gallery div.photo-gallery--ui {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% - 9.750rem); /* Make same height as div.photo-gallery--container. This time do not substract the height of the div.photo-gallery--heading and nav just the thumbs-container	*/
	pointer-events:none;

}



div.photo-gallery div.photo-gallery--ui ul {
	padding:0;
	margin:0;
	list-style-type:none;
	width:100%;
	height:100%;

	color:#fff;
	font-family:'DIN-Condensed', sans-serif;
	font-size:1.500rem;
}



div.photo-gallery div.photo-gallery--ui ul li {
	display:inline-block;
	vertical-align:middle;
	width:50%;
	height:100%;

	-webkit-transform:translateX(0);
	-moz-tranform:translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);


	-webkit-transition: transform 0.3s ease-out;
	-moz-transition: transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	-ms-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}

div.photo-gallery div.photo-gallery--ui ul li:nth-child(2) {
	display:none;
	font-size:0.875rem;
	text-align:center;
	border-left:#060606 0.063rem solid;
	border-right:#060606 0.063rem solid;
	line-height:3.438rem;

}

div.photo-gallery div.photo-gallery--ui ul li:before {
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}


div.photo-gallery div.photo-gallery--ui ul li:last-of-type {
	text-align:right;

}


div.photo-gallery div.photo-gallery--ui ul li div {
	display:inline-block;
	vertical-align:middle;
	width:12.063rem;
	height:10%;
	cursor:pointer;
	pointer-events:auto;

}
div.photo-gallery div.photo-gallery--ui ul li:nth-child(2) div {
	cursor:default;
}



div.photo-gallery div.photo-gallery--ui ul li div span {
	display:inline-block;
	pointer-events:none;

	width:100%;
	height:100%;



	-webkit-transform:translateX(0);
	-moz-tranform:translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

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

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




div.photo-gallery div.photo-gallery--ui ul li:first-of-type div span:before {
	content:attr(data-count);
	position:absolute;
	font-size:inherit;
	color:inherit;
	display:block;
	top:calc(50% - 1rem);
	left:-3.188rem;


	pointer-events:none;

	-webkit-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

div.photo-gallery div.photo-gallery--ui ul li:last-of-type div span:before {
	content:attr(data-count);
	position:absolute;
	font-size:inherit;
	color:inherit;
	display:block;
	top:calc(50% - 1rem);

	pointer-events:none;

	right:-3.188rem;

	-webkit-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

div.photo-gallery div.photo-gallery--ui ul li:first-of-type div:hover span {
	-webkit-transform:translateX(33%);
	-moz-tranform:translateX(33%);
	-o-transform: translateX(33%);
	-ms-transform: translateX(33%);
	transform: translateX(33%);
}


div.photo-gallery div.photo-gallery--ui ul li:first-of-type div:hover span:before {
	left:0;
}

div.photo-gallery div.photo-gallery--ui ul li:last-of-type div:hover span {
	-webkit-transform:translateX(-33%);
	-moz-tranform:translateX(-33%);
	-o-transform: translateX(-33%);
	-ms-transform: translateX(-33%);
	transform: translateX(-33%);
}


div.photo-gallery div.photo-gallery--ui ul li:last-of-type div:hover span:before {
	right:0;
}

/* Styles for the fullscreen widget
=================================================== */

div.photo-gallery div.photo-gallery--fullscreen {
	position:fixed;
	z-index:100;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(15,15,15,.98) none;

	white-space: nowrap;
	overflow-x:hidden;

	visibility: hidden;
	opacity:0;

	transition: visibility 0s 0.5s, opacity 0.5s 0s;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--fullscreen---closer {
	position:absolute;
	top:1.750rem;
	/*right:3.188rem;*/
	left:2.125rem;
	width:1rem;
	height:1rem;
	z-index:100;
	cursor:pointer;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--fullscreen---zoom-external {
	position:absolute;
	top:1.500rem;
	right:2.000rem;
	z-index:100;
	font-family:'Changa', sans-serif;
	text-transform: uppercase;
	color:#fff;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--fullscreen---zoom-external a {
	text-decoration:none;
	color:inherit;
	border:none;
	outline:none;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--fullscreen---closer span {
	display:block;
	width:100%;
	height:100%;

	transform:rotate(0);

	transition:transform ease 0.25s;

	background:transparent url('../img/ui/closer-icon.svg') no-repeat center;
}


div.photo-gallery div.photo-gallery--fullscreen ul.main-carousel {
	/*
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;*/

	list-style-type: none;
	padding:0;
	margin:0;

	width:100%;
	height:100%;

	transform: translateX(0);

	transition:transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);


	height:100%;
}

div.photo-gallery div.photo-gallery--fullscreen ul.main-carousel li.carousel-cell {
	width:100%;
	height:100%;
	white-space:normal;
	display:inline-block;
	vertical-align: middle;
	text-align:center;

	position: relative;

}

div.photo-gallery div.photo-gallery--fullscreen ul.main-carousel li.carousel-cell:before {
	content:'';
	height:100%;
	display:inline-block;
	vertical-align: middle;
}



div.photo-gallery div.photo-gallery--fullscreen ul.main-carousel li.carousel-cell svg {
	position:absolute;
	top:calc(50% - 1rem);
	left:calc(50% - 1rem);

	-webkit-animation:spin 0.5s linear infinite;
	-moz-animation:spin 0.5s linear infinite;
	animation:spin 0.5s linear infinite;

}

div.photo-gallery div.photo-gallery--fullscreen ul.main-carousel li.carousel-cell img {
	opacity:1;
	transition:opacity 0.5s linear;
	max-height:100%;
	max-width:100%;

	display:inline-block;
	vertical-align: middle;
}



div.photo-gallery div.photo-gallery--fullscreen ul.main-carousel li.carousel-cell img.loading {
	opacity:0;
}

/* STYLES FOR THE FULLSCREEN GALLERY UI
=================================================== */

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--ui.fullscreen ul li {
	display:inline-block;
	vertical-align: middle;
	border:none;

	opacity:1;
	visibility: visible;
	transition:opacity 0.5s linear 0.5s, visibility 0s linear 0s;

}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--ui.fullscreen ul li.hidden {

	opacity:0;
	visibility: hidden;

	transition-delay:0s,0.5s;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--ui.fullscreen ul li div {
	cursor:pointer;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--ui.fullscreen ul li span {
	transform:none;

}



/*

CSS OVERRIDES FOR THE PHOTO-GALLERY

*/




div.photo-gallery.has-info div.photo-gallery--desc {
	opacity:1;
	visibility:visible;
	transition-delay:0s,0s;
}




div.photo-gallery.has-info div.photo-gallery--container {
	height:100%;

	opacity:.25;

	-webkit-transform:scale(2);
	-moz-tranform:scale(2);
	-o-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
}

div.photo-gallery.has-info div.photo-gallery--ui:not(.fullscreen) ul li:first-of-type, div.photo-gallery div.photo-gallery--ui ul li:first-of-type.hidden {
	-webkit-transform:translateX(-100%);
	-moz-tranform:translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

div.photo-gallery.has-info div.photo-gallery--ui:not(.fullscreen) ul li:last-of-type, div.photo-gallery div.photo-gallery--ui ul li:last-of-type.hidden {
	-webkit-transform:translateX(100%);
	-moz-tranform:translateX(100%);
	-o-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

div.photo-gallery.has-info div.photo-gallery--thumbs-container  {
	-webkit-transform:translateY(200%);
	-moz-tranform:translateY(200%);
	-o-transform: translateY(200%);
	-ms-transform: translateY(200%);
	transform: translateY(200%);
}

div.photo-gallery.has-info div.photo-gallery--heading ul li:nth-child(2) span.photo-gallery--heading---info---desc-toggler {

	-webkit-transform:translateY(-100%);
	-moz-tranform:translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);

}


div.photo-gallery.is-fullscreen div.photo-gallery--fullscreen {
	visibility: visible;
	opacity:1;
	transition-delay:0s,0.5s;
	pointer-events: auto;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--fullscreen---closer:hover span {
	transform:rotate(180deg);
}

div.photo-gallery.is-fullscreen ~ nav {
	bottom:-4.375rem;
}

div.photo-gallery div.photo-gallery--fullscreen div.photo-gallery--ui.fullscreen {
	height:100%;
}

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

div.video-player {

	/*

	Own Styles

	*/

	background:#101010 none;

}

/*

Specific Styles for the <div.top-menu> including the  ul.video-player--heading---controls

*/

div.video-player div.video-player--heading ul li {
	display:inline-block;
	vertical-align:middle;

}

div.video-player div.video-player--heading ul li div {
	display:inline-block;
	vertical-align:middle;
	cursor:pointer
}



div.video-player div.video-player--heading ul li:first-of-type {
	width:50%;
}

div.video-player div.video-player--heading ul li:last-of-type {
	text-align:right;
	font-size:1rem;
	font-family:'DIN-Condensed', sans-serif;
	color:#b3b3b3;
	text-transform:uppercase;
	margin:0 2.125rem 0 0;
	width:calc(50% - 2.125rem);
}

div.video-player div.video-player--heading ul li:last-of-type div span {
	position:relative;
	color:inherit;

	-webkit-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-o-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;

}

div.video-player div.video-player--heading ul li:last-of-type div:first-of-type span {
	padding:0 0.438rem 0 0;

}

div.video-player div.video-player--heading ul li:last-of-type div:first-of-type span:before {
	content:'';
	display:inline-block;
	position:absolute;
	left:-2.500rem;
	top:calc(50% - 0.500rem);
	width:1rem;
	height:0.875rem;
	background:transparent url('../img/ui/arrow_prev.svg') no-repeat center center;
	cursor:default;

	-webkit-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: left 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

div.video-player div.video-player--heading ul li:last-of-type div:last-of-type span {
	padding:0 2.500rem 0 0.438rem;

}

div.video-player div.video-player--heading ul li:last-of-type div:last-of-type span:after {
	content:'';
	display:inline-block;
	position:absolute;
	right:-0.063rem;
	top:calc(50% - 0.500rem);
	width:1rem;
	height:0.875rem;
	background:transparent url('../img/ui/arrow.svg') no-repeat center center;
	cursor:default;

	-webkit-transition: right 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: right 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: right 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: right 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: right 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}


/*

Styles for the hovering on video-player--heading---controls

*/

div.video-player div.video-player--heading ul li:last-of-type div:not(.disabled):hover span {

	color:#fff !important;

}

div.video-player div.video-player--heading ul li:last-of-type div:first-of-type:not(.disabled):hover span:before {
	left:-3.000rem;
}
div.video-player div.video-player--heading ul li:last-of-type div:last-of-type:not(.disabled):hover span:after {
	right:-.563rem;
}


/*

Styles for the video-player container

*/

div.video-player div.video-player--container {
	width:100%;
	height:calc(100% - 4.375rem - 4.500rem); /* Make the total height of the video-player container 100% - the height of the <nav> - de height of the div.top-menu	*/
	margin:4.375rem 0 0 0; /* Add a margin top equal to the height of the <nav> */
	position:relative;
}

div.video-player div.video-player--container>div {
	position:absolute;
	top:0;

}

div.video-player div.video-player--container---frame-holder:before {
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

div.video-player div.video-player--container---frame-holder {
	height:100%;
	width:calc(100% - 29.875rem - 7.77rem);
	left:calc(29.875rem + 7.77rem);
	text-align:center;
	/*
	background:cyan none;*/
}

div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source {
	display:inline-block;
	vertical-align:middle;

	width:calc(92.98611111111111% - 7.77rem);/**/

	/*height:81.67028199566161%;  THIS HEIGHT WILL BE SET BY JS	*/
	margin:0 auto;
	background:#191919 none;

	opacity:1;
	transition:opacity 1s linear 0.5s;

} /* The <div> holding the frame source  1,777777777777778*/

div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source.loading {
	opacity:0;
	transition-delay:0;
	transition-duration:0;

}

div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source iframe {
	width:100%;
	height:100%;
	margin:0;
	padding: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:1rem;
	color:#b3b3b3;
	font-family:'DIN-Condensed', sans-serif;
	text-align:left;
	text-transform:uppercase;
	margin:0.500rem 0 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 div {
	display:inline-block;

}
div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source div.video-player--container---frame-holder----share span:first-of-type {
	width:1rem;
	height:1rem;
	background:transparent url('../img/ui/share-icon.svg') no-repeat center center;
	display:inline-block;
	vertical-align:middle;
	margin:0 0 0.063rem 0;


}

div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source div.video-player--container---frame-holder----share span:last-of-type {
	line-height:1rem;
	margin:0.063rem 0 0 1.500rem;
	padding:0;
	cursor:pointer;

	transition: color 0.5s linear;
}


/*

Styles for hovering over share button

*/



div.video-player div.video-player--container---frame-holder div.video-player--container---frame-holder----source div.video-player--container---frame-holder----share div:hover span:last-of-type {
	color:#fff;
}



div.video-player div.video-player--container---text-holder {
	height:calc(100% - 10rem - 2rem);
	/*
	VERY IM PORTANT ---

	SUBSTRACT FROM TOTAL HEIGHT ANY PADDING????...not OR MARGINS ADDED TO CHILD ELEMENS.
	Most important are margins.  bottom
	Use paddings to shrink the thing
	*/
	margin:0 0 10rem 0;
	width:calc(29.875rem + 7.77rem);
	padding:0 0 0 3.188rem;
	left:0;



}

div.video-player div.video-player--container---text-holder div.video-player--container---text-holder----heading div.rotatorContainer {
	max-width:calc(29.875rem + 7.77rem);
	width:100%;
	overflow-x:hidden;
	white-space: nowrap;
	font-size:1.750rem;
	line-height:1.875rem;
	color:#fff;
	font-family:'United-Heavy', sans-serif;
	text-transform:uppercase;

	position:relative;
	text-overflow:ellipsis;
	overflow-y:hidden;

	margin:2rem 0 0 0;
	padding:2.125rem 0;
}

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

	font-family:'United-Heavy', sans-serif;
	font-size:1.750rem;
	line-height:1.875rem;
	color:#fff;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:0.09rem;
	width:calc(29.875rem + 7.77rem);

	display:inline;
}



div.video-player div.video-player--container---text-holder div.video-player--container---text-holder----desc {
	overflow-y:auto;
	height:100%;
	width:100%;

	opacity:1;

	transition: opacity 0.5s 0.5s;


}

div.video-player div.video-player--container---text-holder div.video-player--container---text-holder----desc.loading {
	opacity: 0;
	transition-delay:0s;
	transition-duration: 0s;
}

div.video-player div.video-player--container---text-holder div.video-player--container---text-holder----desc p {
	padding:0 0 1rem 0;
	margin:0;
	font-size:0.875rem;
	line-height:1.125rem;
	color:#626367;
	font-family:'Changa', sans-serif;
	font-weight:500;
}

/*=================================================
CSS OVERRIDES FOR VIDEO PLAYER ARROW BUTTONS
=================================================== */

div.video-player div.video-player--heading ul li div.disabled {
	pointer-events: none;
}

div.video-player div.video-player--heading ul li div.disabled span {
	color:transparent;
}

div.video-player div.video-player--heading ul li div.disabled span:before, div.video-player div.video-player--heading ul li div.disabled span:after {
	display:none !important;
}


/*
*	================================================================
*	SHARE-SCREEN STYLES
*
*	================================================================
*/

div.share-screen {

	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;

	z-index:10000;

	-webkit-transform:translateY(100%);
	-moz-tranform:translateY(100%);
	-o-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), background 0.5s linear;
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), background 0.5s linear;
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), background 0.5s linear;
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), background 0.5s linear;
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), background 0.5s linear;

	transition-delay:0s,0s;

	font-family:'DIN-Condensed', sans-serif;
	font-size:1rem;
	color:#626367;
	letter-spacing:0.094rem;
	text-transform:uppercase;

	background:transparent none;


}

div.share-screen div.share-screen--wrapper:before {
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

div.share-screen div.share-screen--wrapper {
	width:100%;
	height:100%;
	text-align:center;
}

div.share-screen div.share-screen--wrapper---social-buttons {
	display:inline-block;
	vertical-align:middle;
	width:90%;


}

div.share-screen div.share-screen--wrapper---social-buttons ul {

	list-style:none;
	padding:0 0 1.500rem 0;
	margin:0 auto;
	background:transparent none;
	border:#626367 0.063rem solid;
	line-height:1.250rem;
	max-width:18.000rem;
	width:100%;
	color:#fff;
	position:relative;
}




div.share-screen div.share-screen--wrapper---social-buttons ul li:not(.bitly-content) {
	text-transform:uppercase;
	line-height:2.500rem;
	color:#626367;
	cursor:pointer;
	width:100%;
	height:100%;

	overflow-y:hidden;


	-webkit-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-o-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;
}

div.share-screen div.share-screen--wrapper---social-buttons ul li:not(.bitly-content) span {
	position:relative;
	display:inline-block;
	vertical-align: middle;
	width:100%;
	height: 100%;

	webkit-transform:translateY(0);
	-moz-tranform:translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);

	-webkit-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-moz-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-o-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-ms-transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

div.share-screen div.share-screen--wrapper---social-buttons ul li:not(.bitly-content) span:after {
	content:attr(data-social);
	display:block;
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	color:#ff0000;
}

div.share-screen div.share-screen--wrapper---social-buttons ul li:not(.bitly-content):hover span {

	webkit-transform:translateY(-100%);
	-moz-tranform:translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);

}

div.share-screen div.share-screen--wrapper---social-buttons ul li.bitly-content {
	border-bottom:#626367 0.063rem solid;
	margin:0 0 2.500rem 0;
	font-family:'Changa', sans-serif;
	font-weight:500;
}

div.share-screen div.share-screen--wrapper---social-buttons ul li.bitly-content span {
	display:inline-block;
	vertical-align: middle;
	width:100%;
	height:100%;
	padding:1.875rem 0;
	text-transform:none;
	letter-spacing:0;

}

div.share-screen div.share-screen--wrapper---social-buttons ul li:not(.bitly-content):last-of-type {
	margin:0 0 1.250rem 0;
}

div.share-screen div.share-screen--wrapper---social-buttons ul div.share-screen--wrapper---social-buttons----social-closer-----share {
	position:absolute;
	display:block;
	top:-1.500rem;
	right:-1.500rem;
	width:3rem;
	height:3rem;
	border-radius:1.500rem;
	text-color:transparent;
	font-size:0;
	border:#626367 0.063rem solid;


	background:#0f0f0f none;

	cursor:pointer;

	-webkit-transition: border 0.25s linear, background 0.25s linear;
	-moz-transition: border 0.25s linear, background 0.25s linear;
	-o-transition: border 0.25s linear, background 0.25s linear;
	-ms-transition: border 0.25s linear, background 0.25s linear;
	transition: border 0.25s linear, background 0.25s linear;
}


div.share-screen div.share-screen--wrapper---social-buttons ul div.share-screen--wrapper---social-buttons----social-closer-----share span {
	display:inline-block;
	vertical-align: middle;
	width:100%;
	height:100%;
	background:transparent url('../img/ui/close_share_btn.svg') no-repeat center center;

	webkit-transform:rotate(0);
	-moz-tranform:rotate(0);
	-o-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);

	-webkit-transition: transform 0.25s ease;
	-moz-transition: transform 0.25s ease;
	-o-transition: transform 0.25s ease;
	-ms-transition: transform 0.25s ease;
	transition: transform 0.25s ease;

}

div.share-screen div.share-screen--wrapper---social-buttons ul div.share-screen--wrapper---social-buttons----social-closer-----share:hover {
	border:#ff0000 0.125rem solid;
	background:#ff0000 none;
}


div.share-screen div.share-screen--wrapper---social-buttons ul div.share-screen--wrapper---social-buttons----social-closer-----share:hover span {
	webkit-transform:rotate(180deg);
	-moz-tranform:rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}


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

section.home div.wrapper {
	width:100%;
	height:100%;
	text-align:center;
	position:relative;
	z-index:100;
}

section.home div.wrapper:before {
	content:'';
	height:100%;
	display:inline-block;
	vertical-align: middle;
}

section.home div.wrapper div.content {
	max-width:57.500rem;
	width:100%;
	display:inline-block;
	vertical-align: middle;
	font-style:italic;
	font-family:'Changa', sans-serif;
}

section.home div.wrapper div.content p {
	padding:0;
	margin:0 0 1rem 0;
	font-size:2.250rem;
	line-height:2.125rem;
	color:#b6b6b6;

}

section.home div.wrapper div.content span {
	font-size:1rem;
	color:#626367;

}


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



section.info div.wrapper {
	width:100%;
	height:100%;
	padding:0 0 4.688rem 0;


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




section.info div.content {
	padding:8.125rem 3.188rem 0 3.188rem;
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	overflow-y:auto;

}

section.info div.content ul {
	padding:0;
	/*
	margin:0 11.000rem 0 0;
	*/

	margin:0 9.416800428036383% 0 0;
	list-style-type:none;
	max-width:26.813rem;
	width:100%;
	line-height:1rem;
	display:inline-block;
	vertical-align:top;

}

section.info div.content ul:last-of-type {
	margin:0;
}

section.info div.content ul li {
	font-size:0.813rem;
	font-family:'Changa', Helvetica Neue, Helvetica, Arial, sans-serif;
	color:#626367;
}

section.info div.content ul li.info-list--heading {
	font-size:1.500rem;
	line-height:1.500rem;
	text-transform:uppercase;
	color:#bbbbbb;
	margin:1.938rem 0 1.438rem 0;
	font-family:'United-Heavy', Helvetica Neue, Helvetica, Arial, sans-serif;
}

section.info div.content ul li.info-list--heading:nth-child(1) {
	margin:0 0 1.438rem 0;
	/*
	We are switching margins here so we can target the proper margins for ALL but the first li.info-list--heading
	*/
}

section.info div.content ul li.info-list--link {
	color:red;
}

section.info div.content ul li.info-list--link a {
	color:inherit;
	text-decoration:none;
}

section.info div.content ul li.info-list--link a:hover {
	text-decoration:underline;
}

section.info div.content ul li.info-list--logo {
	width:33.3333333%;
	height:2.125rem;
	display:inline-block;
	vertical-align:middle;
	margin:0 0 1rem 0;
}

section.info div.content ul li.info-list--logo.oktave {
	background:transparent url('../img/info/oktave-gray.svg') no-repeat center left;
}

section.info div.content ul li.info-list--logo.mi {
	background:transparent url('../img/info/mi-gray.svg') no-repeat center center;
	background-size:contain;
}

section.info div.content ul li.info-list--logo.mocap {
	background:transparent url('../img/info/mocap-gray.svg') no-repeat center center;

}

section.info div.content ul li.info-list--logo.bc {
	background:transparent url('../img/info/bc-gray.svg') no-repeat center left;
	background-size:80%;
}

section.info div.content ul li.info-list--logo.ever {
	background:transparent url('../img/info/ever-gray.svg') no-repeat center center;
	background-size:80%;
}

/*

Styles for info bg-slider - REMOVE AFTER JS



section.info div.bg-slider ul li {
	background:transparent url('../img/slides/info/01.jpg') no-repeat center center;
}*/

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


section.projects {

}

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

div.art-of-fundation--heading ul li {
	width:50%;
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

div.art-of-fundation--heading ul li:last-of-type span.art-of-fundation--heading---info---logo-ref {
	width:5.688rem;
	height:100%;
	background:transparent url('../img/ui/art-of-logo.svg') no-repeat center right;
}



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

section.motion-graphics {

}

section.motion-graphics div.motion-graphics--heading ul li {
	width:50%;
	display:inline-block;
	vertical-align:middle;
}


section.motion-graphics div.motion-graphics--heading ul li:last-of-type span {
	color:#fff;
	font-family:'Changa', sans-serif;
	font-size:1rem;
	font-weight:500;

	text-transform:uppercase;
}

section.motion-graphics div.motion-graphics--thumbs-container {
	width:100%;
	height:calc(100% - 4.500rem - 4.375rem); /* Substract from total page height the height of <div-top-menu> and <nav>	*/
	margin:4.500rem 0 0 0; /* Add at top the margin from div.top-menu	*/

}

section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder {
	width:100%;
	height:100%;

	overflow-y:auto;

}
section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul {
	padding:2.563rem 0 2.563rem 2.125rem;
	text-align:center;
	margin:0;
	list-style-type:none;
}

section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul li {
	display:inline-block;
	vertical-align:top;
	margin:0 0.313rem 0.688rem 0;
	cursor:pointer;
	color:#626367;
	text-align:left;
	-webkit-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-o-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;
}

section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul li a {
	display:inline-block;
	vertical-align:top;
	width:100%;
	height:100%;
	color:inherit;
}

section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul li a div.thumb {

	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	opacity:0.35;
	width:18.625rem;
	height:9.750rem;
	background-color:#313234;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-transition: filter 0.5s linear, opacity 0.5s linear;
	-moz-transition: filter 0.5s linear,opacity 0.5s linear;
	-o-transition: filter 0.5s linear, opacity 0.5s linear;
	-ms-transition: filter 0.5s linear, opacity 0.5s linear;
	transition: filter 0.5s linear, opacity 0.5shome linear;

}


section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul li a div.rotatorContainer {
	max-width:18.625rem;
	width:100%;
	overflow-x:hidden;
	white-space: nowrap;
	font-size:0.875rem;
	color:inherit;
	font-family:'Changa', sans-serif;
	text-transform:uppercase;
	padding:0.875rem 0 0 0;home
	position:relative;
	text-overflow:ellipsis;
	overflow-y:hidden;
}


/* in motion thumbnails hovering
=================================================== */

section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul li:hover {
	color:#fff;
}

section.motion-graphics div.motion-graphics--thumbs-container div.motion-graphics--thumbs-container---thumbs-scrolling-holder ul li:hover a div.thumb {

	filter: grayscale(10%);
	-webkit-filter: grayscale(10%);
	opacity:0.65;


}

/*
*	================================================================
*	ORIGINALS STYLES
*
*	================================================================
*/

section.originals div.originals--heading ul li {
	width:50%;
	display:inline-block;
	vertical-align:middle;
}

section.originals div.originals--heading ul li:last-of-type span {
	color:#fff;
	font-family:'Changa', sans-serif;
	font-size:1rem;
	font-weight:500;
	text-transform:uppercase;
}



/*
*	================================================================
*	PHOTOGRAPHY + BRANDING STYLES
*
*	================================================================
*
*/

section.photography div.photography--heading ul li, section.branding-identity div.branding-identity--heading ul li {
	width:50%;
	display:inline-block;
	vertical-align:middle;
}

section.photography div.photography--heading ul li:last-of-type span, section.branding-identity div.branding-identity--heading ul li:last-of-type span {
	color:#fff;
	font-family:'Changa', sans-serif;
	font-size:1rem;
	font-weight:500;
	text-transform:uppercase;
}

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

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

section.clients div.content ul {
	padding:0;
	margin:0;
	width:100%;
	height:100%;

	list-style-type:none;

	display:flex;
	align-items:center;
	justify-content:center;
	align-content:center;
	flex-flow:row wrap;
}

section.clients div.content ul li {
	width:16.500rem;
	height:10rem;
	padding:0;
	margin:0;


}

section.clients div.content ul li div {
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-color:transparent;
	background-position:center;
}

section.clients div.content ul li:nth-child(1) div {

	background-size:50%;
}

section.clients div.content ul li:nth-child(2) div {

	background-size:auto 60%;
}

section.clients div.content ul li:nth-child(3) div {

	background-size:60% auto;
}

section.clients div.content ul li:nth-child(4) div {

	background-size:50% auto;
}

section.clients div.content ul li:nth-child(5) div {

}

section.clients div.content ul li:nth-child(6) div {

	background-size:50% auto;
}

section.clients div.content ul li:nth-child(7) div {

	background-size:40%;
}

section.clients div.content ul li:nth-child(8) div {

	background-size:40%;
}

section.clients div.content ul li:nth-child(9) div {

	background-size:55%;
}

section.clients div.content ul li:nth-child(10) div {

	background-size:55%;
}

section.clients div.content ul li:nth-child(11) div {

	background-size:35%;
}

section.clients div.content ul li:nth-child(12) div {

	background-size:60%;
}

section.clients div.content ul li:nth-child(13) div {

	background-size:55%;
}

section.clients div.content ul li:nth-child(14) div {

	background-size:30%;
}

section.clients div.content ul li:nth-child(15) div {

	background-size:70%;
}

section.clients div.content ul li:nth-child(16) div {

	background-size:50%;
}

section.clients div.content ul li:nth-child(17) div {

	background-size:55%;
}

section.clients div.content ul li:nth-child(18) div {

	background-size:60%;
}

section.clients div.content ul li:nth-child(19) div {

	background-size:60%;
}

section.clients div.content ul li:nth-child(20) div {

	background-size:60%;
}


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

section.mocap {
	text-align:center;

	/*
	inherits width:100% and height:100%; from GLOBAL STYLES
	*/

}

section.mocap:before {
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}

section.mocap div.content {
	display:inline-block;
	vertical-align:middle;
	max-width:65.000rem;
	width:100%;
	font-family:'Changa', sans-serif;
	font-weight:500;

	position:relative;
	z-index:0;



}

section.mocap div.content>div {
	display:inline-block;
	vertical-align: middle;
}

section.mocap div.content div.mocap-content--left {
	width:15.375rem;
	margin:-4.000rem 0 0 0;
}

section.mocap div.content div.mocap-content--right {
	width:calc(100% - 15.375rem - 6.000rem);
	margin:0 0 0 6.000rem;
}

section.mocap div.content div.mocap-content--left div.content-mocap--main-logo {
	width:15.375rem;
	height:12.250rem;
	display:block;
	margin:0 auto;
	background:transparent url('../img/mocap/mocap_logo.png') no-repeat center center;
}

section.mocap div.content div.mocap-content--left a.content-mocap-btn {
	margin-top:2.875rem;
	/* inherits styles from a.btn-external-changa from GLOBAL STYLES	*/

}


section.mocap div.content div.mocap-content--right p.content-mocap--text {
	padding:0;
	margin:0;
	font-size:1rem;
	line-height:1.500rem;
	color:#808080;
	text-align:left;
	text-shadow: rgba(0,0,0,.85) 0 0.063rem 0.063rem;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--contact {
	padding:0;
	font-size:1rem;
	list-style-type:none;
	color:#626367;
	text-shadow: rgba(0,0,0,.85) 0 0.063rem 0.063rem;
	text-align: left;
}


section.mocap div.content div.mocap-content--right ul.content-mocap--contact li:first-of-type {
	color:#fff;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--contact li a {
	color:inherit;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--contact li a[href^="mailto:"] {
	color:red;
	text-decoration:none;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--contact li a[href^="http"] {
	display:none;
} /* Avoid redunancy hidding the link to external source when big button is present */

section.mocap div.content div.mocap-content--right ul.content-mocap--logos {
	padding:0;
	list-style-type:none;
	width:100%;
	text-align:left;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li {
	width:16.66666666666667%;
	height:4.250rem;
	display:inline-block;
	vertical-align:middle;
	margin:0;
	padding:0;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li div {
	width:100%;
	height:100%;
	background-color:transparent;
	background-repeat: no-repeat;
	background-position:center left;
}


section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(1) div {
	background-size:75% auto;
}


section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(2) div {
	background-size:75% auto;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(3) div {
	background-size:auto 45%;
}


section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(4) div {
	background-size:auto 55%;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(5) div {
	background-size:75% auto;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(6) div {
	background-size:55% auto;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(7) div {
	background-size:55% auto;
}

section.mocap div.content div.mocap-content--right ul.content-mocap--logos li:nth-child(8) div {
	background-size:55% auto;
}


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


section.music div.content {
	width:100%;
	height:100%;

}

section.music div.content ul {
	padding:0;
	margin:0;
	list-style-type:none;
	width:100%;
	height:100%;
}

section.music div.content ul li {
	display:inline-block;
	vertical-align:middle;
	width:50%;
	height:100%;
	opacity:.45;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-webkit-transition: opacity 0.25s linear, filter 0.25s linear;
	-moz-transition: opacity 0.25s linear, filter 0.25s linear;
	-o-transition: opacity 0.25s linear, filter 0.25s linear;
	-ms-transition: opacity 0.25s linear, filter 0.25s linear;
	transition: opacity 0.25s linear, filter 0.25s linear;
}

section.music div.content ul li:first-of-type {

	border-right:#060606 0.063rem solid;

}

section.music div.content ul li a {
	display:block;
	width:100%;
	height:100%;
	border:none;
	outline:none;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;

}



section.music div.content ul li:first-of-type a {
	background-image:url('../img/music/mi-color.svg');
}

section.music div.content ul li:last-of-type a {
	background-image:url('../img/music/oktave-color.svg');

}


/*

Styles for hovering logos

*/

section.music div.content ul li:hover {

	opacity:.85;
	filter: grayscale(10%);
	-webkit-filter: grayscale(10%);

}






/*
*	================================================================
*	BODY OVERRIDE STYLES
*
*	================================================================
*/

.module.current {
	transform:translateY(0);
}

body.sharing div.share-screen {
	transform:translateY(0);
	background:rgba(15,15,15,.95) none;

	transition-delay:0s,0.5s;
}


body.sharing section.current, body.sharing div.module.current {
	opacity:.25;
}

body.sharing nav {

	bottom:-4.375rem;
}


/*

OVERRIDE STYLES FOR THE MUSIC PLAYER

*/



body.music div.music-player div.music-player--heading ul li:last-of-type span.music-player--heading---info---text-ref {
	display:none;
}

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

	background:transparent url('../img/music/oktave-color.svg') no-repeat center right;
	background-size:12.125rem auto;
	width:94.6875%;
	height:100%;
	margin:0 5.3125% 0 0;


}

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

	background:transparent url('../img/music/mi-color-player.svg') no-repeat center right;
	background-size:10.688rem auto;
	width:94.6875%;
	height:100%;
	margin:0 5.3125% 0 0;

}

/* OVERRIDES FOR MUSIC-PLAYER
=================================================== */


div.music-player.showing-info div.music-player--body div.music-player--body---playlist {
	width:50%;
}

div.music-player.showing-info div.music-player--body div.music-player--body---text {
	left:50%;
	width:50%;
	transition-delay:0.25s,0.25s;
}

div.music-player.showing-info div.music-player--ui ul li.music-plater--ui---info-toggler div {
	background-image:url('../img/ui/info-visible-btn.svg');
} /* Styles for info button icon when disabled*/

div.music-player[data-playing="0"] div.music-player--ui ul li.music-player--ui---play-btn div.music-player--ui---play-btn----icon {
	background:transparent url('../img/ui/play-btn.svg') no-repeat center center;
	width:1.125rem;
	height:100%;
	margin:0 0 0 2.938rem;
	cursor:pointer;
}
div.music-player[data-playing="1"] div.music-player--ui ul li.music-player--ui---play-btn div.music-player--ui---play-btn----icon.paused {
	width:1.125rem;
	height:100%;
	margin:0 0 0 2.938rem;
	cursor:pointer;
	background:transparent url('../img/ui/pause-btn.svg') no-repeat center center;
} /* Styles for play icon when paused track*/


div.music-player[data-volume="1"] li.music-player--ui---volume ul li:nth-child(1) div {
	background:#ed243c none !important;
}

div.music-player[data-volume="2"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="2"] li.music-player--ui---volume ul li:nth-child(2) div {
	background:#ed243c none;
}

div.music-player[data-volume="3"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="3"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="3"] li.music-player--ui---volume ul li:nth-child(3) div {
	background:#ed243c none;
}

div.music-player[data-volume="4"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="4"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="4"] li.music-player--ui---volume ul li:nth-child(3) div, div.music-player[data-volume="4"] li.music-player--ui---volume ul li:nth-child(4) div {
	background:#ed243c none;
}

div.music-player[data-volume="5"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="5"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="5"] li.music-player--ui---volume ul li:nth-child(3) div, div.music-player[data-volume="5"] li.music-player--ui---volume ul li:nth-child(4) div, div.music-player[data-volume="5"] li.music-player--ui---volume ul li:nth-child(5) div {
	background:#ed243c none;
}

div.music-player[data-volume="6"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="6"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="6"] li.music-player--ui---volume ul li:nth-child(3) div, div.music-player[data-volume="6"] li.music-player--ui---volume ul li:nth-child(4) div, div.music-player[data-volume="6"] li.music-player--ui---volume ul li:nth-child(5) div, div.music-player[data-volume="6"] li.music-player--ui---volume ul li:nth-child(6) div {
	background:#ed243c none;
}

div.music-player[data-volume="7"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="7"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="7"] li.music-player--ui---volume ul li:nth-child(3) div, div.music-player[data-volume="7"] li.music-player--ui---volume ul li:nth-child(4) div, div.music-player[data-volume="7"] li.music-player--ui---volume ul li:nth-child(5) div, div.music-player[data-volume="7"] li.music-player--ui---volume ul li:nth-child(6) div, div.music-player[data-volume="7"] li.music-player--ui---volume ul li:nth-child(7) div {
	background:#ed243c none;
}

div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(3) div, div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(4) div, div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(5) div, div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(6) div, div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(7) div, div.music-player[data-volume="8"] li.music-player--ui---volume ul li:nth-child(8) div  {
	background:#ed243c none;
}

div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(3) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(4) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(5) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(6) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(7) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(8) div, div.music-player[data-volume="9"] li.music-player--ui---volume ul li:nth-child(9) div  {
	background:#ed243c none;
}

div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(1) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(2) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(3) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(4) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(5) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(6) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(7) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(8) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(9) div, div.music-player[data-volume="10"] li.music-player--ui---volume ul li:nth-child(10) div  {
	background:#ed243c none;
}

/* BODY OVERRIDES FOR VIDEO-PLAYER
=================================================== */

body[class*=originals] div.video-player div.video-player--heading ul li:last-of-type{
	display:none;
} /* Hide the next/prev buttons from video player if we are viewing a video from originals...meaning there is no prev/next video*/

@media screen and (max-width: 90.000rem){

	div.art-of-detail div.art-of-detail--wrapper div.art-of-detail--wrapper---content {
		height:18.000rem;
	}

	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:3.735rem;
	}


	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:3.735rem;

	}

	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:4.125rem;


	}

	div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content p.originals-detail---content----text {
		height:19.000rem;
		overflow-y:auto;
	}

	div.originals-detail div.originals-detail--content-wrapper div.originals-detail---content h4.originals-detail---content----heading {
		line-height:3.375rem;
		font-size:4.125rem;
	}
}