html,body{ 
	font-family: 'Montserrat', sans-serif; font-weight: 300; padding: 0; margin: 0; color: #fff; background: #000; font-size: 20px;   width: 100vw; height: 100vh; overflow: hidden; 
	-webkit-font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures;
	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden; 
	transform: translateZ(0);
	-webkit-font-smoothing: subpixel-antialiased;
}
strong{font-weight: 700;}

.loading_animation {display: flex; flex-direction: column; align-items: center; justify-content: center;position: absolute; left: 0; top: 0;  width: 100%; height: 100%; transition: all .4s; z-index: 4; cursor: pointer;}
.loading_animation span {font-size: 12px; color: #fafafa; transition: all .4s; transition-delay: 10s; opacity: 0; position: absolute; top: 50%; left: 0; width: 100%; text-align: center; z-index: 11;}
body[data-active_scene="loading"] span {opacity: 1;}

.loading_animation .svg_container{width: 700px; height: 700px; display: block; margin: 0 auto; position: absolute; transition: all 1s; z-index: 10; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.loading_animation .svg_container img{width: 100%; height: auto; display: none; position: absolute; left: 0; top: 0; z-index: 1; /*transform: scale(.4); opacity: 0; transition: all 3s;*/}
.loading_animation .svg_container svg{position: absolute; width: 30%; top: 180px; left: calc(35% + 4px); position: relative; z-index: 2; background: #000; transition: all .2s; opacity: 0;}
.loading_animation .svg_container svg #right_eye rect,
.loading_animation .svg_container svg #left_eye  rect{filter: drop-shadow(0 0 8px rgba(159,219,254,.5));}
.loading_animation.loaded .svg_container svg{opacity: 1;}

/*
.loading_animation .svg_container.animate svg:nth-child(2){animation: glitch .8s 1; animation-delay: .8s; opacity:0;}
.loading_animation .svg_container.animate svg:nth-child(3){animation: glitch_2 .6s 1; animation-delay: .8s; opacity: 0; }
.loading_animation .svg_container.animate svg:nth-child(3) #the_text{filter: invert(100%);}
.loading_animation .svg_container.animate svg #collector path{transition: all .4s;}
*/
nav{position: fixed; z-index: 100; height: 100vh; display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; padding: 0 10px; width: 0; opacity: 0; overflow: hidden; transition: all .6s; box-sizing: border-box;}
nav a{width: 10px; height: 10px; border-radius: 100%; overflow: hidden; line-height: 1000; display: block; background: rgba(255,255,255,.2); margin: 5px;}
nav a.active{background: rgba(255,255,255,.4);}

body.loaded:after{opacity: 0; z-index: 1;}
body.loaded {height: auto; overflow: auto;}
body.loaded .loading_animation {width: 200px; height: 300px; left: 40px; top: 40px;}
body.loaded .loading_animation .svg_container{width: 200px;}

@keyframes glitch {
	0% {
		opacity: 1;
		transform: translate3d(50px, 0, 0);
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
   } 
	50% {
	   opacity: .5;
	   clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
   }
	80% {
	   opacity: .5;
	   transform: translate3d(-10px,5px,0);
		filter: hue-rotate(135deg);
   }
}
@keyframes glitch_2 {
	0% {
		opacity: 1;
		transform: translate3d(-20%, 30%, 0);
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
		filter: hue-rotate(135deg);

   } 
	50% {
	   opacity: .5;
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		filter: hue-rotate(135deg);

   }
	60% {
	   opacity: 1;
		transform: translate3d(10%, 10%, 0);
		clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 50%);
	   filter: hue-rotate(20deg);
   }
	70% {
	   opacity: 1;
		transform: translate3d(5%, 5%, 0);

   }
	80% {
	   opacity: .5;
	   transform: translate3d(-10px,5px,0);
		filter: hue-rotate(-40deg);
   }

}

canvas {position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; object-fit: cover; z-index: 1;}
main{ z-index: 2; position: sticky; top: 0; left: 0; height: 0; overflow: hidden;}
main section{height: 0; overflow: hidden; width: 100%; display: flex; flex-direction: row; align-items: center; position: relative; z-index: 4; scroll-snap-align:end;}
main section.dark{background:#000;}
main section .content_wrapper{padding: 100px 0 100px 100px; box-sizing: border-box; width: 40%; position: relative; z-index: 2;}
main section h2{font-size: 4rem; font-weight: 500; line-height: 4rem; margin: 0 0 20px;}
main section p{font-size: 1.2rem; line-height: 1.4rem; margin-bottom: 0;}

main section.dark img{max-width: 60%; max-height: 100%; width: auto; height: auto; z-index: 1; transition: all 2s; opacity: 1; transform: translateY(50vh); filter: saturate(0);}
main section.dark.active img{transform: none;}

/*main:after{content:""; display: block; position: absolute; bottom: 0; width: 100%; height: 50vh; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);}*/

.collectors_container{position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;  width: 100vw; height: 100vh; transition: all 1s; z-index: -1; opacity: 0; background: #000; background-image: url(../media/splash_sequence/splash_sequence_10.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;}
.collectors_container .content_wrapper{width: 100%; padding: 0 0 60px;}
.collectors_container .content_wrapper p{ text-align: center; font-size: 1.5rem; vertical-align: middle; opacity: 0; transition: all 1s; transition-delay: 1.2s;}
.collectors_container .content_wrapper p a{font-size: 1rem; display: inline-block; text-align: center; opacity: .8; text-decoration: underline; vertical-align: top; color: rgba(255,255,255,.65); transition: all .2s; position: relative;}
.collectors_container .content_wrapper p a:hover{color: rgba(255,255,255,1);}
.collectors_container .content_wrapper p a + a:before{content:""; width: 2px; height: 30px; margin: 0 15px 0; vertical-align: top; overflow: hidden; line-height: 1000; background: rgba(255,255,255,.5); display: inline-block;}

.collectors_container .list{display: block; text-align: center; padding: 0; height: 120px;}
.collectors_container .list_item{ border: 2px solid rgba(255,255,255,.4); border-radius: 100%; vertical-align: top; display: inline-block; width: 120px; height: 120px; text-align: center; line-height: 96px; margin: 50px 10px 10px; overflow: hidden; box-sizing: border-box; padding: 10px; transition: all .6s; opacity: 0; }
.collectors_container .list_item a{transition: all 1s; display: block;}
.collectors_container .list_item:hover {box-shadow: 0 0 30px #ffd01588;}
.collectors_container .list_item:hover a{transform: scale(1.08);}
.collectors_container .list_item svg,
.collectors_container .list_item img{display: block; width: 100%; /*filter: grayscale(100%);*/}


body[data-active_scene="collectors"] {}
body[data-active_scene="explore"] .collectors_container,
body[data-active_scene="collectors"] .collectors_container{opacity: 1; z-index: 5;}
body[data-active_scene="explore"] .collectors_container p,
body[data-active_scene="collectors"] .collectors_container p{opacity: 1;}
body[data-active_scene="collectors"] .loading_animation,
body[data-active_scene="explore"] .loading_animation{opacity: 0;}
body[data-active_scene="explore"] .list_item,
body[data-active_scene="collectors"] .list_item{opacity: 1; margin-top:0; /*transition-delay: 1s;*/}
/*
body[data-active_scene="collectors"] .list_item:nth-child(n+1){transition-delay: 2s;}
body[data-active_scene="collectors"] .list_item:nth-child(n+2){transition-delay: 2.4s;}
body[data-active_scene="collectors"] .list_item:nth-child(n+3){transition-delay: 2.6s;}
body[data-active_scene="collectors"] .list_item:nth-child(n+4){transition-delay: 2.8s;}
body[data-active_scene="collectors"] .list_item:nth-child(n+5){transition-delay: 3s;}
*/
body[data-active_scene="collectors"] main,
body[data-active_scene="explore"] main{height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; z-index: 4;}
body[data-active_scene="explore"] canvas {z-index: 4;}
body[data-active_scene="explore"] section {height: 100vh; opacity: 1 !important;}
body[data-active_scene="explore"] nav{width: 40px; opacity: 1;}
body[data-active_scene="explore"] section.double{margin-top: 100vh;}


.icon{width: 30px; height: 30px; background-size: contain; background-position: center center; background-repeat: no-repeat; filter: invert(100%); display: inline-block;}
.icon + .icon{margin-left: 5px;}
.icon.icon_facebook{background-image: url("images/icon_facebook.svg");}
.icon.icon_twitter{background-image: url("images/icon_twitter.svg");}
.icon.icon_instagram{background-image: url("images/icon_instagram.svg");}

.icon.icon_linkedin{background-image: url("images/icon_linkedin.svg");}
.icon.icon_play{background-image: url("images/icon_play.svg");}
.icon.icon_pause{background-image: url("images/icon_pause.svg");}

.icon.icon_volume_off{background-image: url("images/icon_volume_off.svg?v=1");}
.icon.icon_volume_high{background-image: url("images/icon_volume_high.svg?v=1");}
.icon.icon_volume_low{background-image: url("images/icon_volume_low.svg?v=1");}

.icon.icon_fullscreen_on{background-image: url("images/icon_fullscreen_on.svg");}
.icon.icon_fullscreen_off{background-image: url("images/icon_fullscreen_off.svg");}

.icon.icon_back{background-image: url("images/icon_arrow_left.svg");}
.icon.icon_close{background-image: url("images/icon_close.svg?v=2");}


/*Collection Page*/
.carousel_container{width: 24%; padding-top: 15%; border-radius: 7px; overflow: hidden; position: absolute; left: 38%; top: 15.4vw; background: #000;}

.carousel{width:100% !important; height: 100% !important; opacity: 0; position: absolute !important; left: 0; top: 0;}
.carousel .glide__track{width:100%; height: 100%; position: relative; z-index: 1;}
.carousel .glide__controls {position: absolute; left: 0; margin-top: -10px; top: 50%; width: 100%; z-index: 2; height: 20px; overflow: visible;}
.carousel .glide__controls button{position: absolute; z-index: 2; left: 10px; top: 0; width: 20px; height: 20px;  background: url("images/icon_arrow_left.svg") no-repeat center center; background-size: contain; line-height: 1000px; overflow: hidden; border: none;}
.carousel .glide__controls button+button{right: 10px; left: auto; transform: scaleX(-1);}

.carousel .list{height: 100%; padding: 0; margin: 0; position: relative; z-index: 1;}
.carousel .carousel_item{padding: 0; margin: 0; display: block; overflow: hidden; width: 100%; height: 100%; background: #000; position: relative; z-index: 1;}
.carousel .carousel_item .carousel_item_content{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: #000;}
.carousel .carousel_item .carousel_item_content video,
.carousel .carousel_item .carousel_item_content .image_container{position:absolute; display:  block; width: 100%; height: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: contain; z-index: -1;}
.carousel .carousel_item .carousel_item_content video{width: 100%; max-height: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: contain;}

.carousel .carousel_item .carousel_item_content .title_container {position: absolute; left: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 60%, rgba(255,255,255,0) 100%); z-index: 2; text-align: left; padding:7px 8px 5px; line-height: normal; box-sizing: border-box; max-width: 100%;}
.carousel .carousel_item .carousel_item_content .title_container strong{font-weight: 700; font-size: .6em; line-height: normal; display: block; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.carousel .carousel_item .carousel_item_content .title_container span,
.carousel .carousel_item .carousel_item_content .title_container a{font-weight: 400; font-size: .5rem; line-height: normal;  display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: 2px; color: inherit; text-decoration: none;}
.carousel .carousel_item .carousel_item_content .title_container a{text-decoration: underline; font-size: .4rem;}
.carousel .carousel_item .carousel_item_content .action_container {position: absolute; z-index: 3; left: 10px; top: 10px;}
.carousel .carousel_item .carousel_item_content .action_container a{display: inline-block;}
.carousel .carousel_item .carousel_item_content .action_container .icon {display: block; margin: 0 !important; width: 20px; height: 20px;}
.carousel .carousel_item .carousel_item_content .action_container .icon_pause {display: none;}
.carousel .carousel_item .carousel_item_content .action_container .icon_volume_low {display: none;}
.carousel .carousel_item .carousel_item_content .action_container .icon_volume_high {display: none;}

.carousel .carousel_item .carousel_item_content.playing .action_container .icon_pause {display: block;}
.carousel .carousel_item .carousel_item_content.playing .action_container .icon_play {display: none;}

.carousel .carousel_item .carousel_item_content.no_audio .action_container .action_volume{opacity: .2;}
.carousel .carousel_item .carousel_item_content.no_audio .action_container .icon_volume_low{display: none;}
.carousel .carousel_item .carousel_item_content.no_audio .action_container .icon_volume_off{display: block;}
.carousel .carousel_item .carousel_item_content.no_audio .action_container .icon_volume_high{display: none;}

.carousel .carousel_item .carousel_item_content:not(.no_audio):not(.muted) .action_container .icon_volume_low{display: none;}
.carousel .carousel_item .carousel_item_content:not(.no_audio):not(.muted) .action_container .icon_volume_off{display: none;}
.carousel .carousel_item .carousel_item_content:not(.no_audio):not(.muted) .action_container .icon_volume_high{display: block;}

.carousel .carousel_item .carousel_item_content:not(.no_audio).muted .action_container .icon_volume_low{display: block;}
.carousel .carousel_item .carousel_item_content:not(.no_audio).muted .action_container .icon_volume_off{display: none;}
.carousel .carousel_item .carousel_item_content:not(.no_audio).muted .action_container .icon_volume_high{display: none;}

.form_container{transition: all .6s; z-index: 100;  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center;}
.form_container input{font-size: 1.5rem; text-align: center; padding: 20px; background: rgba(0,0,0,.3); color: #fff; border: none; border-bottom: 2px solid rgba(255,255,255,.6); font-family: 'Montserrat', sans-serif; font-weight: 500; max-width: 80%; width: 50%; display: block; outline: none;}
.form_container a{display: block; text-align: center; font-weight: 500; color: inherit; text-decoration: none; margin-top: 20px;}

.form_container .error_message{display: block; opacity: 0; transition: all .2s; font-size: .6rem; color: rgb(200,0,0);}
.form_container.error .error_message{opacity: 1; text-align: center;}
.form_container.error input{background: rgba(50,0,0,.3);}

.carousel_loading_container {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all .6s; opacity: 0;}
.carousel_loading_container svg {}

body.collection main{display:flex; transition: all .6s; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-image: url(images/background_collection_dark.jpg?auto=format,compress&lossless=true); background-position:center top; background-repeat: no-repeat; background-size: 100% auto;}
body.collection main:before{transition: all .6s; opacity: 0; content:""; width: 100%; height: 100%; display: block; position: absolute; z-index: -1; background-image: url(images/background_collection_light.jpg?auto=format,compress&lossless=true); background-position:center top; background-repeat: no-repeat; background-size: 100% auto;}
body.collection main.loaded:before{opacity: 1;}
body.collection main.loading .form_container{opacity: 0;}
body.collection main.loaded .form_container{display: none;}

body.collection main.loading .carousel_loading_container {opacity: 1;}
body.collection main.loaded .carousel_loading_container {opacity: 0; display: none;}
body.collection main.loaded .carousel {opacity: 1;}
body.collection main.loaded{transform: scale(1.5); }

main.fullscreen {transform: scale(1) !important;}
main.fullscreen .carousel_container{width:calc(100vw - 40px); height: calc(100vh - 40px); padding-top:0; overflow: hidden; position: fixed; left:20px; top:20px; box-shadow: 0 0 20px rgba(0,0,0,1); transform: none;}

body.collection header,
body.collection footer{position: fixed; width: 100%; box-sizing: border-box; padding: 20px; left: 0; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center;}
body.collection footer{top: auto; bottom: 0; width: auto; right: 0; left: auto;}
body.collection footer span{font-size: .7rem;}
body.collection footer span:first-child{margin-right: 10px;}
body.collection header a{filter: invert(100%);}

body.collection main + header a:first-child{visibility: visible;}
body.collection main + header a:last-child{visibility: hidden;}
body.collection main.loaded + header a:first-child{visibility: hidden;}
body.collection main.loaded + header a:last-child{visibility: visible;}
body.collection main.fullscreen + header{display: none;}

body.collection.safari header{top: 20px;}
body.collection.safari footer{bottom: 100px;}

.carousel .button_container{position: absolute; left:0; top: 0; display: block; width: 100%; height: 20px; text-align: right; z-index: 3;}
.carousel .button_fullscreen{position: absolute; right: 10px; top: 10px; display: block; width: 20px; height: 20px;}
.carousel .button_fullscreen .icon{display: block; width: 100%; height: 100%; margin: 0 !important;}
.carousel .button_fullscreen .icon_fullscreen_on{display: block;}
.carousel .button_fullscreen .icon_fullscreen_off{display: none;}

main.fullscreen .carousel_container .icon_fullscreen_on{display: none;}
main.fullscreen .carousel_container .icon_fullscreen_off{display: block;}

/*EOF Collection Page*/
@media (min-height: 800px) {
	.collectors_container{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;  width: 100vw; height: 100vh; transition: all 1s; z-index: -1; opacity: 0; background: #000;}
	.collectors_container .content_wrapper{width: 100%; padding: 400px 0 0;}
}
@media (orientation: portrait) {
	body[data-active_scene="explore"] section .content_wrapper{width: 100%; min-width: 100%; padding: 50px 50px 100px;}
	body[data-active_scene="explore"] section .content_wrapper h2{font-size: 2.6rem; line-height: 2.8rem;}
	main:after{content:""; position: fixed; left: 0; bottom: 0; width: 100%; height: 75%; background: rgba(0,0,0,.5); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}
	
	main section{align-items: center; flex-direction: column; justify-content: flex-end;}
	
	body.safari[data-active_scene="explore"] section .content_wrapper{padding-bottom: 150px;}
	
	body[data-active_scene="explore"] section.dark {justify-content: flex-start;}
	body[data-active_scene="explore"] section.dark img{position: absolute; bottom: 0; left: 0; width: 100%; max-width: 100%; height: auto;}
	body[data-active_scene="explore"] section.dark .content_wrapper{padding-bottom: 50px !important;}
	
	
	body.collection main,
	body.collection main:before{background-size: auto 100% ;}
	body.collection main:after{display: none;}
	.carousel_container{ width: 25vh; padding-top: 15vh; left: 50%; top: 15.4vh; border-radius: 4px; transform: translateX(-50%);}
	
	body.collection main.loaded{transform: scale(1.5) translateY(10%);}
	
	main:not(.fullscreen) .carousel .carousel_item .carousel_item_content .title_container strong{font-size: .4em;}
	main:not(.fullscreen) .carousel .carousel_item .carousel_item_content .title_container span{font-size: .3rem;}
	main:not(.fullscreen) .carousel .carousel_item .carousel_item_content .action_container .icon {width: 15px; height: 15px;}
	main:not(.fullscreen) .carousel .button_fullscreen {width: 15px; height: 15px;}
	main:not(.fullscreen) .carousel .glide__controls button{width: 15px; height: 15px;}
	
	main.fullscreen .carousel .carousel_item .carousel_item_content .title_container{padding:10px;}
	
	body.safari main.fullscreen .carousel_container{height: calc(100vh - 150px);}
	
	
}

@media (max-width: 1100px) {
	html,body{font-size: 16px;}
}
@media (max-width: 1024px) {
	.collectors_container .list_item{width: 75px; height: 75px; margin: 50px 5px 10px}
	.collectors_container .list{height: 75px;}
	.collectors_container .content_wrapper {padding: 0 0 100px !important;}
	body.safari .collectors_container .content_wrapper {padding: 0 0 200px !important;}
	.collectors_container .content_wrapper p a{font-size: .8rem;}
	.collectors_container .content_wrapper p a + a:before{height: 22px;}
	
	.form_container input{font-size: 1rem; width: 70%;}
	
}