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

0. RESET & CLEARFIX

------------------------------------------------
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
.overlaycaption,figure,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%; }
	
ol, ul  { list-style: none; }

:focus  { outline: 0; }

deleting the default appearence for form elements
input[type=text], input[type=password], input[type=submit], input[type=number], input[type=button], textarea, button, select { -moz-appearance: none; -webkit-appearance: none; }

HTML5 display definitions
article, aside, details, .overlaycaption, figure, footer, header, hgroup, menu, nav, section, dialog { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; visibility: hidden; }*/

.clearfix::after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0;  height: 0; }
.clearfix { *display: inline-block; }
.clear { clear: both; display: block; font-size: 0;	height: 0; line-height: 0; width:100%; }


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

1. BASICS

------------------------------------------------*/
html {
	height: 100%;
	/* font-size: 100%; 
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom 
	-ms-text-size-adjust: 100%;*/
	position: relative;
	}

body {
	/* font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;  */
	/* font-weight: 300; */
	/* font-size: 16px;  
	line-height: 25px;
	color: #ffffff; */
	text-align: left; 
	position: relative;
	
	background: rgb(35,40,44); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(35,40,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(35,40,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(35,40,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23282c', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	background-attachment: fixed;
	
	min-height: 100%;
	/* letter-spacing: 0.03em; */
	}
	/* strong { font-weight: 400; } */

body::after {
	content: "";
	width: 1000px;
	height: 1000px;
	position: fixed;
	top: 50%;
	left: 50%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 80%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.07) 0%,rgba(255,255,255,0) 80%); 
	background: radial-gradient(ellipse at center,  rgba(255,255,255,0.07) 0%,rgba(255,255,255,0) 80%); 
	filter: progid:DXImageTransform.Microsoft.gradient( body.startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=1 );
	}
body.seelist::after {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0;
	visibility: hidden;
	}



/* Headings
---------------------------------------- 
h1, h2, h3, h4, h5, h6 {
	font-family: 'Proxima Nova'; 
	font-weight: 500;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
	font-weight: 700;
	}

h1, .h1 { font-size: 58px; line-height: 67px; }
h2, .h2 { font-size: 40px; line-height: 48px; }
h3, .h3 { font-size: 32px; line-height: 40px; }
h4, .h4 { font-size: 24px; line-height: 30px; }
h5, .h5 { font-size: 18px; line-height: 26px; }
h6, .h6 { font-size: 13px; line-height: 18px; }
*/
/* Links */
a {
	text-decoration: none;
	color: #ffffff;
	transition: all 0.25s ease;
}

/* medias */
img, object, video, audio {
	max-width: 100%; 
	height: auto;
	display: inline-block;
	margin:0;
    vertical-align:top;
	}



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

1. HEADER

------------------------------------------------
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 115px;
	z-index: 1000;
	}*/

/* logo dark bg 
header::after {
	content: "";
	width: 500px;
	height: 800px;
	position: absolute;
	top: 0%;
	left: 50%;
	z-index: 1000;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: -moz-radial-gradient(250px 250px, ellipse,  rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-radial-gradient(250px 250px, ellipse,  rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%); 
	background: radial-gradient(250px 250px,  rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( body.startColorstr='#100000000', endColorstr='#00ffffff',GradientType=1 );
	
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease 0.3s;
	}
	body.seelist:not(.listscrollable-active) header::after { opacity: 1; visibility: visible; }

header .header-left {
	padding: 40px 0 0 120px;
	color: #ffffff;
	}

header .header-left > span {
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s ease 1.0s;
	-moz-transform: translateY(-15px);
	-ms-transform: translateY(-15px);
	-o-transform: translateY(-15px);
	-webkit-transform: translateY(-15px);
	transform: translateY(-15px);
	}
	header .header-left span.list-name { 
		transition-delay: 1.15s; 
		font-weight: 600; 
	}
	header .header-left span.list-name small { 
		font-weight: 400;
		font-size: 0.8em;
		opacity: 0.8;
	}
	header .header-left span.list-user { 
		color: rgba(255,255,255,0.7);
	}
	body.startlist header .header-left > span {
	opacity: 1;
	visibility: visible;
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	}

header .header-left .activate-listscrollable {
	width: 20px;
	height: 30px;
	position: absolute;
	top: 46px;
	left: 45px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s ease 1.4s;
	}
	body.startlist header .header-left .activate-listscrollable { opacity: 1; visibility: visible; left: 55px; }

header .header-left .activate-listscrollable span, header .header-left .activate-listscrollable span::after, header .header-left .activate-listscrollable span::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 5px;
	background: #ffffff;
	position: absolute;
	top: calc(50% - 2px);
	left: calc(50% - 2px);
	transition: width 0.35s ease, left 0.35s ease;
	}

header .header-left .activate-listscrollable span::after {
	top: -9px;
	left: 0;
	}

header .header-left .activate-listscrollable span::before {
	top: auto;
	bottom: -9px;
	left: 0;
	}

header .header-left .activate-listscrollable:hover span { width: 10px;  left: calc(50% - 5px); }
header .header-left .activate-listscrollable:hover span::after { width: 10px; left: 2px; }
header .header-left .activate-listscrollable:hover span::before { width: 10px; left: 5px; }

header .header-right {
	float: right;
	padding: 40px 60px 0 0;
	color: #ffffff;
	text-align: right;
	margin: 0;
	}

header .header-right div {
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s ease 1.0s;
	-moz-transform: translateY(-15px);
	-ms-transform: translateY(-15px);
	-o-transform: translateY(-15px);
	-webkit-transform: translateY(-15px);
	transform: translateY(-15px);
	}
	header .header-right div:nth-child(1) { 
		transition-delay: 1.15s; 
	}
	body.startlist header .header-right div {
	opacity: 1;
	visibility: visible;
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	}

header a:hover {
	color: rgba(255,255,255,0.7);
	}

header .header-bottom {
	position: fixed;
	left: 120px;
	bottom: 37px;
	
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s ease 1.4s;
	-moz-transform: translateY(15px);
	-ms-transform: translateY(15px);
	-o-transform: translateY(15px);
	-webkit-transform: translateY(15px);
	transform: translateY(15px);
	}
	body.startlist header .header-bottom {
	opacity: 1;
	visibility: visible;
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	}*/

.share-list li {
	width: auto;
	margin-right: 15px;
	display: inline-block;
	}

.share-list li a {
	width: 7px;
	display: block;
	}
	.share-list li.twitter a { width: 15px; }
	.share-list li.google a { width: 18px; }

.share-list li a svg path {
	fill: #ffffff;
	transition: all 0.25s ease;
	}
	.share-list li a:hover svg path {
	fill: rgba(255,255,255,0.6);
	}


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

1. LOGO

------------------------------------------------*/
#logo {
	width: 150px;
	height: 150px;
	position: fixed;
	z-index: 1001;
	top: 50%;
	left: 50%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
	-webkit-transition: all 0.922s cubic-bezier(0.516, 0.000, 0.416, 1.000) 2.3s;
	   -moz-transition: all 0.922s cubic-bezier(0.516, 0.000, 0.416, 1.000) 2.3s;
		 -o-transition: all 0.922s cubic-bezier(0.516, 0.000, 0.416, 1.000) 2.3s;
			transition: all 0.922s cubic-bezier(0.516, 0.000, 0.416, 1.000) 2.3s; /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.516, 0.000, 0.416, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.516, 0.000, 0.416, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.516, 0.000, 0.416, 1.000);
			transition-timing-function: cubic-bezier(0.516, 0.000, 0.416, 1.000);
	}

body.start #logo { 
	top: 63px;
	width: 65px;
	height: 65px;
	/* safari bug on animation > top has been adapted (instead of 30 63)
	-moz-transform: translateX(-50%) translateY(0%);
	-ms-transform: translateX(-50%) translateY(0%);
	-o-transform: translateX(-50%) translateY(0%);
	-webkit-transform: translateX(-50%) translateY(0%);
	transform: translateX(-50%) translateY(0%);
	*/
	}

/* Logo Text */
#logo [class*='letter'] {
	opacity: 0;
	transition: all 1.2s ease;
	fill: #ffffff;
	}

#logo .letter-a { transform: translateX(74px) translateY(48px) scale(0.7); transition-delay: 1.49s; }
#logo .letter-l { transform: translateX(57px) translateY(84px) scale(0.7); transition-delay: 1.35s; }
#logo .letter-i { transform: translateX(74px) translateY(84px) scale(0.7); transition-delay: 1.07s; }
#logo .letter-s { transform: translateX(93px) translateY(84px) scale(0.7); transition-delay: 1.28s; }
#logo .letter-t { transform: translateX(115px) translateY(84px) scale(0.7); transition-delay: 1.56s; }
#logo .letter-b { transform: translateX(75px) translateY(122px) scale(0.7); transition-delay: 1.42s; }
#logo .letter-y { transform: translateX(101px) translateY(122px) scale(0.7); transition-delay: 1.21s; }

body.start #logo [class*='letter'] {
	opacity: 1;
	transform: translateX(0px) translateY(0px) scale(1);
	}
/* Logo Text */


/* Logo Dots */
#logo .dot {
	transition: all 1.0s ease 1s;
	fill: rgba(255,255,255,0.2);
	}

#logo g {	
	-webkit-animation: rotatedots 110s linear infinite;
  	-moz-animation: rotatedots 110s linear infinite;
  	-ms-animation: rotatedots 110s linear infinite;
  	-o-animation: rotatedots 110s linear infinite;
  	animation: rotatedots 110s linear infinite;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	}
	@-moz-keyframes rotatedots { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes rotatedots { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
	@keyframes rotatedots { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }

#logo g .dot:nth-child(1) { transition-delay: 1.07s; }
#logo g .dot:nth-child(2) { transition-delay: 1.21s; }
#logo g .dot:nth-child(3) { transition-delay: 1.35s; }
#logo g .dot:nth-child(4) { transition-delay: 1.56s; }
#logo g .dot:nth-child(5) { transition-delay: 1.03s; }
#logo g .dot:nth-child(6) { transition-delay: 1.49s; }
#logo g .dot:nth-child(7) { transition-delay: 1.00s; }
#logo g .dot:nth-child(8) { transition-delay: 1.21s; }
#logo g .dot:nth-child(9) { transition-delay: 1.28s; }
#logo g .dot:nth-child(10) { transition-delay: 1.63s; }
#logo g .dot:nth-child(11) { transition-delay: 1.14s; }
#logo g .dot:nth-child(12) { transition-delay: 1.42s; }
#logo g .dot:nth-child(13) { transition-delay: 1.56s; }
#logo g .dot:nth-child(14) { transition-delay: 1.70s; }
#logo g .dot:nth-child(15) { transition-delay: 1.45s; }
#logo g .dot:nth-child(16) { transition-delay: 1.10s; }
#logo g .dot:nth-child(17) { transition-delay: 1.33s; }
#logo g .dot:nth-child(18) { transition-delay: 1.60s; }

body.start #logo .dot {
	fill: rgba(255,255,255,1);
	}




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

1. PAGE LOADER

------------------------------------------------*/
#list-title {
	position: fixed;
	top: 50%;
	left: 50%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
	width: calc(100% - 300px);
	text-align: center;
	z-index: 900;
	}

#list-title .list-user {
	margin-bottom: 20px;
	text-shadow: 0px 0px 20px #ffffff;
	color: transparent;
	opacity: 0;
	transform: scale(0.9);
	
	-webkit-transition: text-shadow 2.06s ease 2.45s, opacity 3.06s ease 2.15s, transform 14.5s ease 2.15s;
    -moz-transition: text-shadow 2.06s ease 2.45s, opacity 3.06s ease 2.15s, transform 14.5s ease 2.15s;
    -ms-transition: text-shadow 2.06s ease 2.45s, opacity 3.06s ease 2.15s, transform 14.5s ease 2.15s;
    -o-transition: text-shadow 2.06s ease 2.45s, opacity 3.06s ease 2.15s, transform 14.5s ease 2.15s;
    transition: text-shadow 2.06s ease 2.45s, opacity 3.06s ease 2.15s, transform 14.5s ease 2.15s;
	}

body.start #list-title .list-user {
	text-shadow: 0px 0px 0px #ffffff;
	opacity: 1;
	/*transform: scale(1.0);*/
	}

#list-title .list-name {
	text-shadow: 0px 0px 20px #ffffff;
	color: transparent;
	opacity: 0;
	transform: scale(0.9);
	font-weight: 600;
	
	-webkit-transition: text-shadow 2.07s ease 3.06s, opacity 3.07s ease 2.75s, transform 14.5s ease 2.75s;
    -moz-transition: text-shadow 2.07s ease 3.06s, opacity 3.07s ease 2.75s, transform 14.5s ease 2.75s;
    -ms-transition: text-shadow 2.07s ease 3.06s, opacity 3.07s ease 2.75s, transform 14.5s ease 2.75s;
    -o-transition: text-shadow 2.07s ease 3.06s, opacity 3.07s ease 2.75s, transform 14.5s ease 2.75s;
    transition: text-shadow 2.07s ease 3.06s, opacity 3.07s ease 2.75s, transform 14.5s ease 2.75s;
	}
	#list-title .list-name small { 
		font-weight: 400;
		font-size: 0.8em;
		opacity: 0.8;
	}

body.start #list-title .list-name {
	text-shadow: 0px 0px 0px #ffffff;
	opacity: 1;
	transform: scale(1.0);
	}


#list-title a.start-list {
	font-family: 'Proxima Nova'; 
	font-weight: 400;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 11px;
	display:  inline-block;
	position: absolute;
	left: 50%;
	bottom: -140px;
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: 0;
	/*visibility: hidden; safari + chrome issue */
	-webkit-transition: opacity 0.5s ease 4.20s, visibility 0.5s ease 4.20s, color 0.25s ease;
    -moz-transition: opacity 0.5s ease 4.20s, visibility 0.5s ease 4.20s, color 0.25s ease;
    -ms-transition: opacity 0.5s ease 4.20s, visibility 0.5s ease 4.20s, color 0.25s ease;
    -o-transition: opacity 0.5s ease 4.20s, visibility 0.5s ease 4.20s, color 0.25s ease;
    transition: opacity 0.5s ease 4.20s, visibility 0.5s ease 4.20s, color 0.25s ease;
	}
	#list-title a.start-list:hover { color: rgba(255,255,255,0.6); }
	body.start #list-title a.start-list { opacity: 1; visibility: visible; }
	
#list-title a.start-list span {
	display: block;
	opacity: 0;
	transition: opacity 0.65s ease 4.20s, transform 0.65s ease 4.25s;
	-moz-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	}
	body.start #list-title a.start-list span {
	opacity: 1;
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	}

#list-title a.start-list .arrow { 
	fill: #ffffff;
	-webkit-transform: translateY(-15px);
	-moz-transform: translateY(-15px);
	-ms-transform: translateY(-15px);
	-o-transform: translateY(-15px);
	transform: translateY(-15px);
	/*opacity: 0; safari + chrome issue */
    -webkit-transition: all 0.7s ease 4s;
    -moz-transition: all 0.7s ease 4s;
    -ms-transition: all 0.7s ease 4s;
    -o-transition: all 0.7s ease 4s;
    transition: all 0.7s ease 4s;
	}
	body.start #list-title a.start-list .arrow {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	}

.arrow { fill: #ffffff; width: 10px; }


/* Hide List title (safari need starting point (0) for translateY see below) */
body #list-title .list-user span,
body #list-title .list-name span { 
	display: inline-block;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	}

body.seelist #list-title .list-user span, body.startlist #list-title .list-user span,
body.seelist #list-title .list-name span, body.startlist #list-title .list-name span { 
	-webkit-transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000); /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	-webkit-transform: translateY(-140px);
	-moz-transform: translateY(-140px);
	-ms-transform: translateY(-140px);
	-o-transform: translateY(-140px);
	transform: translateY(-140px);
	}
body.seelist #list-title .list-name span, body.startlist #list-title .list-name span { transition-delay: 0.07s; }

body.seelist #list-title, body.startlist #list-title { 
	-webkit-transition: all 0.7s ease;
	   -moz-transition: all 0.7s ease;
		 -o-transition: all 0.7s ease;
			transition: all 0.7s ease;
	transition: all 0.7s ease;
	opacity: 0;
	visibility: hidden;
	}

body.seelist #list-title a.start-list, body.startlist #list-title a.start-list { 
	transition: all 0.7s ease;
	opacity: 0;
	visibility: hidden;
	}



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

1. PAGE BODY

------------------------------------------------*/
#page-body {
	/*width: 100%;
	height: 100vh;
	z-index: 800;
	position: relative;
	overflow: hidden;  /* prevent scrollbar*/
	}

#page-body::after {
	display:none;
	content: "";
	width: 60%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 805;
	background: rgba(0,0,0,0.6);
	background: -moz-linear-gradient(left, rgba(0,0,0,0.6) 0%, rgba(254,254,254,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.6)), color-stop(100%, rgba(254,254,254,0)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.6) 0%, rgba(254,254,254,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.6) 0%, rgba(254,254,254,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.6) 0%, rgba(254,254,254,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(254,254,254,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#fefefe', GradientType=1 );
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease 0.3s;
	}
	body.seelist #page-body::after { opacity: 1; visibility: visible; }

#list-item-bg .bg-item {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 101%;
	left: 0;
	overflow: hidden;
	z-index: 800;
	
	-webkit-transition: top 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000)/*, height 0.01s ease 0.8s*/;
	   -moz-transition: top 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000)/*, height 0.01s ease 0.8s*/;
		 -o-transition: top 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000)/*, height 0.01s ease 0.8s*/;
			transition: top 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000)/*, height 0.01s ease 0.8s*/;
	-webkit-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	}
	#list-item-bg .bg-item.fromtop { top: -101%; }
		
	body.seelist #list-item-bg .bg-item.active {	
	top: 0;
	/*height: 100%;*/
	z-index: 802;
		
	-webkit-transition: top 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000), height 0.01s ease;
	   -moz-transition: top 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000), height 0.01s ease;
		 -o-transition: top 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000), height 0.01s ease;
			transition: top 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000), height 0.01s ease;
	-webkit-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	}

	body.seelist #list-item-bg .bg-item.tmp-invisible:not(.active) {	
	opacity: 0;
	}

#list-item-bg .bg-item .bg-container {
	width: 100%;
	height: 100%;
	position: absolute;
	top: -80%;
	left: 0;
	background-size: cover;
	background-position: center center;
	
	-webkit-transition: all 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition: all 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition: all 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition: all 0.852s cubic-bezier(0.722, 0.000, 0.416, 1.000); /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	}
	#list-item-bg .bg-item.fromtop .bg-container { top: 80%; }
	body.seelist #list-item-bg .bg-item.active .bg-container {
	top: 0;
		
	-webkit-transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition: all 0.752s cubic-bezier(0.722, 0.000, 0.416, 1.000); /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
			transition-timing-function: cubic-bezier(0.722, 0.000, 0.416, 1.000);
	}

#list-item-info .info-item  {
	position: fixed;
	top: calc(50% - 40px);
	left: 120px;
	z-index: 810;
	color: #ffffff;
	max-width: calc(40%);
	}

#list-item-info .info-item .info-top  {
	position: absolute;
	top: -22px;
	left: 0px;
	-moz-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	-o-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	}

#list-item-info .info-item .info-bottom  {
	position: absolute;
	bottom: -18px;
	left: 0px;
	-moz-transform:translateY(100%);
	-ms-transform:translateY(100%);
	-o-transform: translateY(100%);
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	overflow: hidden;
	}

.info-meta  {
	float: left;
	font-size: 12px;
	line-height: 21px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 40px;
	color: rgba(255,255,255,0.8);
	}

.info-meta span {
	display: block;
	}

.info-meta .meta-big  {
	display: block;
	font-size: 15px;
	font-weight: 400;
	}

#list-item-info .info-item .info-name {
	position: relative;
	left: -2px;
	/*opacity: 1;
	visibility: visible;  issue for watch trailer button */
	}

#list-item-info .info-item .info-name h2 {
	font-size: 70px;
	line-height: 76px;
	}

#list-item-info .info-item .info-name h2 .word  {
	display: inline-block;
	}

.watch-trailer {
	font-size: 12px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
	display: inline-block;
	}
	.watch-trailer:hover { color: rgba(255,255,255,0.7); }

.watch-trailer svg  {
	width: 8px;
	margin-right: 5px;
	}

.watch-trailer svg path  {
	fill: #ffffff;
	transition: all 0.25s ease;
	}
	.watch-trailer:hover svg path { fill: rgba(255,255,255,0.7); }

/*#list-item-position {
	 border: 2px solid #ffffff; */
	/* position: fixed; */
	/* top: calc(50% - 24px); */
	/* left: calc(50% - 22px); 
	z-index: 810;
	width: 44px;
	height: 44px;
	border-radius: 100%;
	text-align: center;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	}

#list-item-position ul {
	transition: all 0.6s ease;
	}

#list-item-position ul li {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	font-weight: 500;
	margin: 15px 0;
	margin-bottom: 15px;
	display: inline-block;
	}
	#list-item-position ul li:first-child { margin-top: 0; }
	#list-item-position ul li:last-child { margin-bottom: 0; }
	#list-item-position ul li a { color: rgba(255,255,255,0.7); }
	#list-item-position ul li a:hover { color: #ffffff; }

#list-item-position ul li.active {
	color: #ffffff;
	}
	#list-item-position ul li.active a { cursor: default; color: #ffffff; }
	


/* Show Item */
#list-item-info .info-item { 
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease 0s;
	}
	body.seelist #list-item-info .info-item.active {
	opacity: 1;
	visibility: visible;
	}

#list-item-info .info-item .info-meta {
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s ease 0s;
	}
	body.seelist #list-item-info .info-item.active .info-meta {
	opacity: 1;
	visibility: visible;
	}
*/
#list-item-info .info-item .info-meta span {
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s ease;
	-moz-transform: translateY(10px);
	-ms-transform: translateY(10px);
	-o-transform: translateY(10px);
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	}
	#list-item-info .info-item.active .info-meta span { transition-delay: 0.8s; }
	#list-item-info .info-item.active .info-meta .meta-big { transition-delay: 0.95s; }
	body.seelist #list-item-info .info-item.active .info-meta span {
	opacity: 1;
	visibility: visible;
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	}


#list-item-info .info-item .info-bottom div  {
	opacity: 0;
	visibility: hidden;
	transition: all 0.8s ease 1s;
	-moz-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	}
	body.seelist #list-item-info .info-item.active .info-bottom div {
	opacity: 1;
	visibility: visible;
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	}

#list-item-info .info-item .info-name h2 span.letter  {
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	transform: scale(0.7);
	display: inline-block;
	}
	#list-item-info .info-item.active .info-name h2 span.letter  {
	transition: all 0.8s ease;
	}

#list-item-info .info-item.active .info-name h2 span.letter:nth-child(1) { transition-delay: 0.42s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(2) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(3) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(4) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(5) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(6) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(7) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(8) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(9) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(10) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(11) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(12) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(13) { transition-delay: 0.42s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(14) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(15) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(16) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(17) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(18) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(19) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(20) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(21) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(22) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(23) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(24) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(25) { transition-delay: 0.42s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(26) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(27) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(28) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(29) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(30) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(31) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(32) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(33) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(34) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(35) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(36) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(37) { transition-delay: 0.42s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(38) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(39) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(40) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(41) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(42) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(43) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(44) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(45) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(46) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(47) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 span.letter:nth-child(48) { transition-delay: 0.79s; }


#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(1) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(2) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(3) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(4) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(5) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(6) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(7) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(8) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(9) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(10) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(11) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(12) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(13) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(14) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(15) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(16) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(17) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(18) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(19) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(20) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(21) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(22) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(23) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(24) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(25) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(26) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(27) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(28) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(29) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(30) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(31) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(32) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(33) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(34) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(35) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(36) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(37) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(38) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(39) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(40) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(41) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(42) { transition-delay: 0.86s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(43) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(44) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(45) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(46) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(47) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(2n) span.letter:nth-child(48) { transition-delay: 0.44s; }


#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(1) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(2) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(3) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(4) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(5) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(6) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(7) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(8) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(9) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(10) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(11) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(12) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(13) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(14) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(15) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(16) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(17) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(18) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(19) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(20) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(21) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(22) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(23) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(24) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(25) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(26) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(27) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(28) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(29) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(30) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(31) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(32) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(33) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(34) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(35) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(36) { transition-delay: 0.44s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(37) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(38) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(39) { transition-delay: 0.37s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(40) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(41) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(42) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(43) { transition-delay: 0.65s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(44) { transition-delay: 0.51s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(45) { transition-delay: 0.30s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(46) { transition-delay: 0.79s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(47) { transition-delay: 0.58s; }
#list-item-info .info-item.active .info-name h2 .word:nth-child(3n) span.letter:nth-child(48) { transition-delay: 0.44s; }

body.seelist #list-item-info .info-item.active .info-name h2 span.letter {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	}


/* #list-item-position {  */
	/* opacity: 1; */
	/* visibility: visible; */
	/* transform: scale(1); */
	/* border-width: 1px; */
	/* transition: opacity 0.6s ease 0.6s, visibility 0.6s ease 0.6s, transform 0.6s ease 0.6s, left 0.5s ease 1.5s; */
	/* } */
	/* body.startlist #list-item-position {  */
	/* opacity: 1; */
	/* visibility: visible; */
	/* transform: scale(2); */
	/* left: 42px; */
	/* } */
	/* body.seelist #list-item-position {  */
	/* transition: all 0.5s ease; */
	/* transform: scale(1); */
	/* border-width: 2px; */
	/* } */

/* #list-item-position ul li { */
	/* opacity: 0; */
	/* visibility: hidden; */
	/* transition: all 0.6s ease 1s; */
	/* } */
	/* #list-item-position ul li.active {  */
	/* transition-delay: 0.8s; */
	/* width: 42px; */
	/* height: 42px; */
	/* line-height: 42px; */
	/* } */
	/* body.seelist #list-item-position ul li.visible {  */
	/* opacity: 0; */
	/* visibility: hidden; */
	/* transform: scale(0.8); */
	/* } */
	body.startlist #list-item-position ul:not(.change) li.active { 
	transition: opacity 0.6s ease 0.8s, visibility 0.6s ease 0.8s, transform 0.6s ease 0.8s, font-size 0.5s ease 2.0s, height 0.5s ease 2.0s, width 0.5s ease 2.0s, line-height 0.5s ease 1.7s;
	}
	body.startlist #list-item-position ul li.active { 
	opacity: 0;
	visibility: hidden;
	width: 40px;
	height: 40px;
	line-height: 40px;
	}

	/* body.list-visible #list-item-position ul li {  */
	/* transition: all 0.6s ease !important; */
	/* transition-delay: 0s !important; */
	/* } */


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

1. FOOTER

------------------------------------------------
footer {
	position: fixed;
	left: 60px;
	bottom: 40px;
	width: calc(100% - 120px);
	color: rgba(255,255,255,0.4); 
	font-size: 11px;
	line-height: 20px;
	z-index: 1000;
	}

footer .copyright { 
	float: left;
	}

footer .copyright #logo-footer {
	fill: #ffffff;
	width: 48px;
	margin-right: 10px;
	top: 1px;
	position: relative;
	}

footer .copyright #logo-footer .logo-simple { 
	fill: rgba(255,255,255,0.6); 
	}

footer .alb-links { 
	float: right;
	}

footer .alb-links a  { 
	color: rgba(255,255,255,0.4); 
	}
	footer .alb-links a:hover  { color: rgba(255,255,255,0.8); }*/

/* Hide Footer 
body.seelist footer, body.startlist footer { 
	transition: all 0.6s ease;
	opacity: 0;
	visibility: hidden;
	}

body.seelist footer .copyright, body.startlist footer .copyright,
body.seelist footer .alb-links, body.startlist footer .alb-links { 
	transition: all 0.6s ease;
	-moz-transform: translateY(20px);
	-ms-transform: translateY(20px);
	-o-transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	}
	body.seelist footer .alb-links, body.startlist footer .alb-links { transition-delay: 0.05s; }
*/


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

1. small list

------------------------------------------------*/
#list-scrollable {
	position: relative;
	z-index: 811;
	overflow: hidden;
	}

#list-scrollable::before, #list-scrollable::after {
	content: "";
	position: fixed;
	width: 100%;
	height: 200px;
	top: 0;
	left: 0;
	z-index: 812;
	background: -moz-linear-gradient(top,  rgba(35,40,44,1) 30%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(35,40,44,1) 30%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom,  rgba(35,40,44,1) 30%,rgba(255,255,255,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=0 );
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	pointer-events: none;
	}
#list-scrollable::after {
	height: 140px;
	top: auto;
	bottom: 0;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	}
	.listscrollable-active #list-scrollable::before, .listscrollable-active #list-scrollable::after { 
		transition-delay: 0.7s;
		opacity: 1; 
		visibility: visible; 
	}

#list-scrollable #list-small {
	/*margin-top: 343.5px;		/* calc via javascript */
	/*margin-bottom: 209.5px;		/* calc via javascript */
	}

#list-scrollable #list-small .list-item {
	width: calc(100% - 240px);
	max-width: 1300px;
	margin: 30px auto 0 auto; 
	position: relative;
	padding: 20px 0;
	}
	#list-scrollable #list-small .list-item:first-child { margin-top: 0;}

#list-scrollable #list-small .list-item .list-info {
	width: calc(100% - 40px - 300px);
	position: relative;
	/*margin-left: 35px;*/
	}

#list-scrollable #list-small .list-item .list-info::before {
	content: "";
	width: calc(100% + 75px + 20px);
	height: calc(100% + 20px + 20px);
	z-index: 0;
	background: rgba(255,255,255,0.07);
	position: absolute;
	top: -20px;
	left: -75px;
	border-radius: 3px;
	transition:  all 0.2s ease;
	opacity: 0;
	visibility: hidden;
	}
	#list-scrollable #list-small .list-item .list-info:hover::before {
	opacity: 1;
	visibility: visible;
	}

#list-scrollable #list-small .list-item .list-position {
	font-size: 15px;
	font-weight: 500;
	border: 2px solid rgba(255,255,255,0.2);
	position: absolute;
	top: 1px;
	left: -55px;
	text-align: center;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 40px;
	transition:  all 0.2s ease;
	}
	#list-scrollable #list-small .list-item .list-position:hover {
	border-color: #ffffff;
	}

#list-scrollable #list-small .list-item .list-position span {
	transition:  all 0.2s ease;
	}
	#list-scrollable #list-small .list-item .list-info:hover .list-position span {
	opacity: 0;
	visibility: hidden;
	}

#list-scrollable #list-small .list-item .list-position svg {
	position: absolute;
	top: 50%;
	left: 51%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	width: 9px;
	margin-right: 0px;
	opacity: 0;
	visibility: 0;
	transition:  all 0.2s ease;
	}
	#list-scrollable #list-small .list-item .list-info:hover .list-position svg {
	opacity: 1;
	visibility: visible;
	}
	#list-scrollable #list-small .list-item .list-position svg path { fill: #ffffff !important; }

#list-scrollable #list-small .list-item .list-bottom {
	margin-top: 5px;
	}

#list-scrollable #list-small .list-item .list-bottom .info-meta {
	margin: 0;
	}

#list-scrollable #list-small .list-item .list-bottom .info-meta:last-child {
	float: right;
	}

#list-scrollable #list-small .list-item .list-bottom .info-meta span {
	display: inline-block;
	margin:  0 3px;
	}
	#list-scrollable #list-small .list-item .list-bottom .info-meta span:first-child { margin-left: 0; }
	#list-scrollable #list-small .list-item .list-bottom .info-meta span:last-child { margin-right: 0; }

#list-scrollable #list-small .list-item .list-poster {
	width: 260px;
	overflow: hidden;
	border-radius: 3px;
	position: absolute;
	right: 4px;
	top: 50%;
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	transition:  all 0.2s ease;
	}

#list-scrollable #list-small .list-item .list-info:hover ~ .list-poster {
	transition:  all 0.4s ease 0.1s;
	right: 0px;
	opacity: 1;
	visibility: visible;
	}


/* show hide list scrollable */
#list-scrollable {
	transition: max-height 0.05s ease 0.7s;
	max-height: 0;
	}

body.listscrollable-active #list-scrollable {
	transition-delay: 0s;
	max-height: 10000px;
	}

#list-scrollable #list-small .list-item {
	-moz-transform: translateX(-10px);
	-ms-transform: translateX(-10px);
	-o-transform: translateX(-10px);
	-webkit-transform: translateX(-10px);
	transform: translateX(-10px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
	}
	body.listscrollable-active #list-scrollable #list-small .list-item {
	opacity: 1;
	visibility: visible;
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	transform: translateX(0px);	
	transition: all 0.7s ease 1.35s;
	}
	body.listscrollable-active #list-scrollable #list-small .list-item.active { transition-delay: 0.75s; }
	body.listscrollable-active #list-scrollable #list-small .list-item.active-2 { transition-delay: 0.9s; }
	body.listscrollable-active #list-scrollable #list-small .list-item.active-3 { transition-delay: 1.05s; }
	body.listscrollable-active #list-scrollable #list-small .list-item.active-4 { transition-delay: 1.2s; }

/* body.list-visible #list-item-position {  */
	/* transition: all 0.5s ease 0.7s; */
	/* } */
	body.listscrollable-active #list-item-position { 
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8);
	transition: all 0.5s ease, transform 0.2s ease 0.5s;
	}

body.listscrollable-active #page-body::after { 
	transition: all 0.5s ease 0.5s;
	opacity: 0;
	visibility: hidden;
	}

body #list-item-position ul li a span {
	transition: opacity 0.6s ease 1.1s;	/* opacity becaus conflict with the rest */
	}
body.list-visible #list-item-position ul li.active a span {
	transition-delay: 0.9s;
	}
	body.listscrollable-active #list-item-position ul li a span { 
	opacity: 0;
	transition: all 0.2s ease 0.5s;
	}


/*body.listscrollable-active #list-item-info .info-item.active{ 
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s ease 0s;
	}*/



/* Protoype */
.prototype-message {
	position: fixed;
	z-index: 1000;
	bottom: 40px;
	/*left: calc(50% - 105px);*/
	right: 40px;
	background: rgba(0,0,0,0.9);
	border-radius: 4px;
	padding: 15px;
	font-size:  13px;
	line-height: 21px;
	color: rgba(255,255,255,0.7);
	width: 180px;
	border: 1px solid rgba(255,255,255,0.3);
	text-align: center;
}


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

3. Login

------------------------------------------------*/
#login-register {
	width: 100%;
	height: 100vh;
	position: relative;
}

#login-register-inner {
	width: 360px;
	height: 440px;
	position: absolute;
	top: calc(50% - 250px);
	left: calc(50% - 150px);
	background: #000000;
}