@charset "utf-8";
/* CSS Document */

/* ------- FONTS ------- */

@font-face{font-family:'plaak';src:url('fonts/Plaak-46-ExpandedBold.eot');src:local('☺'), url('fonts/Plaak-46-ExpandedBold.woff') format('woff'), url('fonts/Plaak-46-ExpandedBold.ttf') format('truetype'), url('fonts/Plaak-46-ExpandedBold.svg') format('svg');font-weight:500;font-style:normal}

@font-face{font-family:'messapia';src:url('fonts/Messapia-Bold.eot');src:local('☺'), url('fonts/Messapia-Bold.woff') format('woff'), url('fonts/Messapia-Bold.ttf') format('truetype'), url('fonts/Messapia-Bold.svg') format('svg');font-weight:500;font-style:normal}

/* ------- ANIMATIONS ------- */

@keyframes bus{0%{transform:translateX(0)}100%{transform:translateX(calc(-100% + 100vw))}}
@-webkit-keyframes bus{0%{-webkit-transform:translateX(0)}100%{-webkit-transform:translateX(calc(-100% + 100vw))}}
@-moz-keyframes bus{0%{-moz-transform:translateX(0)}100%{-moz-transform:translateX(calc(-100% + 100vw))}}
@-ms-keyframes bus{0%{-ms-transform:translateX(0)}100%{-ms-transform:translateX(calc(-100% + 100vw))}}

/* ------- STYLES ------- */

/* GENERAL */

*{outline:none;margin:0;padding:0;font-weight:normal;list-style:none;font-family:'messapia';box-sizing:border-box}
body{background-color:#000;-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;overflow-x:hidden;font-size:16px;line-height:20px;color:#FFF;font-weight:500;cursor:url('../imgs/cursor_hover.svg') 0 0, auto}
body.scroll-disabled{overflow:hidden!important;overflow-x:hidden;-webkit-overflow-scrolling:touch}

h1,h2,h3,h4,h5{font-weight:inherit;font-size:inherit}
p{font-size:inherit}
span{font-weight:inherit}

a{color:inherit;text-decoration:none;display:block;cursor:url('../imgs/cursor_hover.svg') 0 0, auto}
a:hover{cursor:url('../imgs/cursor_hover.svg') 0 0, auto}
a.underline{text-decoration:underline}
a.hover-opacity{transition:opacity .1s ease;opacity:1}
a.hover-opacity:hover{opacity:.7}
a.icon{display:inline}

.ff-plaak{font-family:"plaak"}
.fs-s{font-size:12px;line-height:16px}
.fs-m{font-size:21px;line-height:24px}
.fs-l{font-size:38px;line-height:42px}
.fw-medium{font-weight:600}
.fw-bold{font-weight:700}
.left{float:left}
.right{float:right}
.inline{display:inline-block}

.c-grey{color:#929292}

/* swipe */
.swipe{position:fixed;top:0;right:-33vw;width:33vw;height:100vh;background-color:#ffff91;padding:45px;z-index:9;transition:right .6s cubic-bezier(.7, 0, .3, 1);overflow:auto;color:#000}
.swipe .content{margin-top:90px;margin-left:20px;transition:margin-left .3s ease .3s}
.swipe a:hover{color:#6d6e70}
.swipe li{margin-bottom:40px}
.swipe a.selected{text-decoration:underline}
.swipe ul.social{display:table}
.swipe ul.social li{float:left;margin-right:20px}
.swipe img{position:absolute;left:65px;bottom:45px;transition:left .3s ease .3s}
.swipe-opened .swipe{right:0}
.swipe-opened .swipe .content{margin-left:0}
.swipe-opened .swipe img{left:45px}

/* modal */
body[modal-opened="video-modal"] .modal.video-modal{top:0}
body[modal-opened="video-modal"] .modal.video-modal .content{opacity:1}

.modal{background-color:#000;width:100vw;height:100vh;overflow:hidden;position:fixed;left:0;padding:40px;z-index:11;top:100vh;transition:top .6s cubic-bezier(.7, 0, .3, 1)}
.modal .btn-modal.close{position:absolute;right:40px;top:30px;z-index:99}
.modal .loader{position:absolute;left:0;top:50%;width:100%;z-index:11;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);display:none}
.modal.paused .loader{display:block}
.modal .loader p{white-space:nowrap;display:inline-block;transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0)}
.modal-opened .modal .loader p{animation:bus 90s infinite alternate linear;-webkit-animation:bus 90s infinite alternate linear;-moz-animation:bus 90s infinite alternate linear;-ms-animation:bus 90s infinite alternate linear}
.modal .content{width:100%;height:100%;position:relative;opacity:0;transition:opacity .6s cubic-bezier(.7, 0, .3, 1);transition-delay:.6s}
.modal .content .overlay-button{position:absolute;width:100%;height:calc(100% - 45px);z-index:1}
.modal .content .video-wrapper{opacity:1;transition:opacity .6s cubic-bezier(.7, 0, .3, 1)}
.modal .video-wrapper{width:100%;height:100%}

/* .wrapper */
.wrapper{position:relative;background-color:#000}

/* header.master */
header.master{z-index:10;width:100%;position:absolute;top:50px;left:0;padding:30px 40px 20px;opacity:0}
.header-transition header.master{transition:top .3s ease, opacity .3s ease}
.header-visible header.master{top:0;opacity:1}
.header-fixed header.master{position:fixed}
header.master a.logo{width:120px;float:left}
header.master ul.nav li{float:left;margin-right:40px}
header.master ul.nav li:last-child{margin-right:0}
header.master ul.nav li a{transition:padding-top .05s ease}
header.master ul.nav li.selected a{padding-top:40px}
header.master ul.nav li a:hover{padding-top:40px}

/* main */
main{display:block;position:relative;width:100%;overflow:hidden}
main.h-full{min-height:100vh}

main h2{padding:40px;text-align:center;position:absolute;max-width:500px;left:50%;top:50%;transform:translate(-50%,-50%)}

main nav.main{width:100%;padding:30px 40px}
main nav.main ul{width:100%;display:table}
main nav.main ul li{float:left;width:33.3333%}
main nav.main ul li a{font-size:4.6vw;line-height:4.6vw;transition:padding-top .05s ease}
main nav.main ul li a:hover{padding-top:4.6vw}
main nav.main ul li:last-child a{text-align:right}

main .logo-img{display:none;width:calc(100% - 80px);margin:30px auto 1px}
main .logo{width:calc(100% - 80px);position:absolute;left:40px;bottom:55px}
main .logo > a{position:absolute;bottom:0}
	main .logo .letter-p{width:13.8%;left:0;z-index:1}
	main .logo .letter-r1{width:13.8%;left:15.4%;z-index:2}
	main .logo .letter-a1{width:11.78%;left:25.7%;z-index:3}
	main .logo .letter-d{width:13.8%;left:39%;z-index:4}
	main .logo .letter-e{width:26.03%;left:51.1%;z-index:4}
	main .logo .letter-r2{width:13.8%;left:77.8%;z-index:2}
	main .logo .letter-a2{width:11.78%;left:88.1%;z-index:1}
main .logo .svg-letter{fill:#FFF}
main .logo a .video-wrapper{position:absolute;top:0;left:50%;transform:translateY(-40%);-webkit-transform:translateY(-40%);-moz-transform:translateY(-40%);-ms-transform:translateY(-40%);display:none}
main .logo a:nth-child(5) .video-wrapper{left:10%}
main .logo a:nth-child(6) .video-wrapper{left:-100%}
main .logo a:nth-child(7) .video-wrapper{left:-100%}
main .logo a:hover .video-wrapper{display:block}
main .logo a .video-wrapper .video{width:20vw;margin-top:10px;position:relative}
main .logo a .video-wrapper .video video{width:100%;height:100%;position:absolute;left:0;top:0;object-fit:cover;-webkit-object-fit:cover;-moz-object-fit:cover;-ms-object-fit:cover}

main .draggable-images{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}
main .draggable-images .img{width:25vw;position:absolute;background-position:center;background-size:cover;background-repeat:no-repeat;cursor:url('../imgs/cursor_hand.svg') 20 0, auto}

main .bus-images{display:none}

/* videos-list */
section.videos-list{width:100%;background:#000;display:table;position:relative;padding:40px 40px 0;margin-bottom:55px}
section.videos-list > ul.videos{opacity:1;transition:opacity .3s ease;margin-top:280px;display:table;width:100%}
section.videos-list > ul.videos.loading{opacity:0}
section.videos-list > ul li{float:left;width:calc(33.33% - 14px);margin-right:20px;margin-bottom:20px;display:none;visibility:hidden;opacity:0;position:relative;z-index:1}
section.videos-list > ul li:hover{z-index:0}
section.videos-list > ul li:nth-child(3n){margin-right:0}
section.videos-list > ul li.available{display:block}
section.videos-list > ul li.visible{visibility:visible;opacity:1}
section.videos-list > ul li .info{position:absolute;width:100vw;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);visibility:hidden;opacity:0;pointer-events:none;overflow:hidden}

section.videos-list > ul li .info .content{white-space:nowrap;display:inline-block;transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0)}
section.videos-list > ul li:hover .info .content{animation:bus 60s infinite alternate linear;-webkit-animation:bus 60s infinite alternate linear;-moz-animation:bus 60s infinite alternate linear;-ms-animation:bus 60s infinite alternate linear}

section.videos-list > ul li.hovered .info{visibility:visible;opacity:1}
	section.videos-list > ul li:nth-child(3n + 1) .info{left:-40px}
	section.videos-list > ul li:nth-child(3n + 2) .info{left:calc(-100% - 60px)}
	section.videos-list > ul li:nth-child(3n + 3) .info{left:calc(-200% - 80px)}
section.videos-list > ul li a{width:100%;padding-top:60%;z-index:1;background-position:center;background-repeat:no-repeat;background-size:cover}

/* footer.master */
footer.master{width:100%;display:table;padding:10px 40px 20px;position:fixed;bottom:0;left:0;z-index:1}

/* PAGES */

/* ----------------- RESPONSIVE ------------------------------------------------------------- */

/* GENERAL */
@supports (-webkit-overflow-scrolling: touch) {
	.modal .content .controls{bottom:60px}
}
	
@media (max-width: 1024px){
	.fs-l{font-size:21px;line-height:24px}
	
	.page-index main.h-full{min-height:0}
	.page-index main nav.main{display:none}
	.page-index main .logo{display:none}
	.page-index main .logo-img{display:block}
	
	.page-index header.master .logo{display:none}
	.page-index header.master ul.nav{width:100%;float:none;display:table}
	.page-index header.master ul.nav li{width:33.33%;margin-right:0}
	.page-index header.master ul.nav li:last-child{text-align:right}
	
	header.master a.logo{width:80px}
	header.master ul.nav{margin-top:4px}
	
	section.videos-list{margin-bottom:0}
	
	footer.master{position:static}
}

@media (max-width: 680px){
	.modal{padding:50px 20px}
	.modal .btn-modal.close{top:16px;right:20px}
	
	main.h-full{min-height:0}
	main h2{position:static;transform:none;margin:0 auto 20px}
	main .draggable-images{display:none}
	
	main .bus-images{display:block;width:calc(100% - 40px);overflow:hidden;margin:40px 20px 0}
	main .bus-images ul{display:inline-flex;animation:bus 30s infinite alternate linear;-webkit-animation:bus 30s infinite alternate linear;-moz-animation:bus 30s infinite alternate linear;-ms-animation:bus 30s infinite alternate linear}
	main .bus-images ul li{float:left;margin-right:20px}
	main .bus-images ul li .img{width:200px;background-position:center;background-size:cover;background-repeat:no-repeat}
	
	.page-index main{display:none}
	.page-index main .logo-img{display:none}
	
	.page-index header.master a.logo{display:block;float:none;width:100%;margin-bottom:20px}
	header.master{position:static;padding:20px}
	header.master a.logo{display:block;float:none;width:100%;margin-bottom:20px}
	header.master ul.nav{width:100%;float:none;display:table}
	header.master ul.nav li{width:33.33%;margin-right:0}
	header.master ul.nav li:last-child{text-align:right}
	
	section.videos-list{padding:0}
	section.videos-list > ul.videos{margin-top:80px;padding:0 20px}
	section.videos-list > ul.videos li{width:100%;margin-right:0!important}
	section.videos-list > ul.videos li .info{opacity:1;visibility:visible;left:-20px!important}
	section.videos-list > ul.videos li .info .content.animate{animation:bus 60s infinite alternate linear;-webkit-animation:bus 60s infinite alternate linear;-moz-animation:bus 60s infinite alternate linear;-ms-animation:bus 60s infinite alternate linear}
	
	footer.master{padding:20px}
}

@media (max-width: 500px){
	body{font-size:14px;line-height:18px}
	.fs-m{font-size:12px;line-height:16px}
	.fs-l{font-size:14px;line-height:18px}
	
	.modal .btn-modal.close{font-size:21px;line-height:24px}
	.modal .content .overlay-button{display:none}
	
	footer.master p{float:none!important}
	footer.master .fs-s{font-size:9px;line-height:12px}
}





























/* SLICK PLUG IN */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; height: 100%;}
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #FFF url("./ajax-loader.gif") center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; height: 100%;}
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; background-position: center center;background-size: cover;}
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; }

/* Icons */
@font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
/* Arrows */
.slick-prev,.slick-next{position:absolute;display:block;line-height:30px;cursor:pointer;background:transparent;color:transparent;padding:0;border:none;outline:none;z-index:1;font-family:'Work Sans';font-size:50px;font-weight:500;overflow:hidden;width:50%;height:70%;top:0}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before {font-size: 40px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev{cursor:url('../imgs/nav_prev_white.svg') 30 22, auto;left:0}
[dir="rtl"] .slick-prev { left: auto; right: 0; }

.slick-next{cursor:url('../imgs/nav_next_white.svg') 30 22, auto;right:0}
[dir="rtl"] .slick-next { left: 0; right: auto; }

/* Dots */
.slick-dots{position:absolute;right:45px;list-style:none;display:block;text-align:center;padding:0;top:50%;z-index:1;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);}
.slick-dots li { position: relative; height: 20px; width: 20px; margin: 0 10px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; font-size:21px;}
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "◇"; width: 20px; height: 20px;font-size: 21px; line-height: 20px; text-align: center; color: white; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: white; opacity: 1; content: "◆";}