@charset "utf-8";

/*
------------------------------------------------------------
Project Name : Coming Soon;
------------------------------------------------------------
*/

/* Reset 
--------------------------------------------------------------------------------------------------------*/

/* 
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* General 
--------------------------------------------------------------------------------------------------------*/
.window-resizing *, body:not(.page-loaded) *{transition: none!important; }
html, body { min-width: 360px; min-height: 100%;}
body:not(.page-loaded) { opacity: 0; overflow: hidden;}
body { font-size: 16px; line-height: 22px; font-family: 'Roboto', sans-serif; -ms-overflow-style: scrollbar; -webkit-font-smoothing: subpixel-antialiased; background: #000000; overflow: hidden; cursor: none;}

.cursor{width: 50px; height: 50px;  border-radius: 50%; position: absolute; background: url(../images/cursor.svg) center center no-repeat; pointer-events: none; opacity: 0; visibility: hidden; z-index: 9;}
.cursor.hovered{background-image: url(../images/cursor-hover.svg);}

@keyframes cursorAnim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.7);
    }
}


#blackhole {height: 100%; width: 100%; position: absolute; display: flex; z-index: 1; transition: all 0.5s;}
#blackhole.video-started{opacity: 0; visibility: hidden;}
.center-hover { width: 150px; height: 150px; background-color: transparent; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -75px; margin-left: -75px; z-index: 2; line-height: 150px; text-align: center; transition: all 500ms;}
.center-hover.open {opacity: 0;pointer-events: none;}
.center-hover:hover span {color: #DDD;}
.center-hover:hover span:before {background-color: #DDD;}
.center-hover:hover span:after {background-color: #DDD;}
.center-hover span {color: #666; font-family: serif; font-size: 18px; position: relative; transition: all 500ms;}
.center-hover span:before { content: ""; display: inline-block; height: 1px; width: 16px; margin-right: 12px; margin-bottom: 4px; background-color: #666; transition: all 500ms;}
.center-hover span:after { content: ""; display: inline-block; height: 1px; width: 16px; margin-left: 12px; margin-bottom: 4px; background-color: #666; transition: all 500ms;}
#blackhole  canvas {position: relative; z-index: 1; width: 100%; height: 100%; margin: auto;}

.main-video{position: fixed; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: all 0.5s;}
.main-video.started{opacity: 1;}
.desktop-videos{display: none;}

.social-icons{position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 9; cursor: none; transition: all 1s; visibility: hidden; opacity: 0;}
.social-icons.show{visibility: visible; opacity: 1;}
.social-icons.instagram{margin-left: -80px;}
.social-icons.twitter{margin-left: 80px;}
.social-icons img{width: 70px;}
.social-icons::before, .social-icons::after{content: ""; height: 110px; width: 0; opacity: 0; background-size: 110px; background-repeat: no-repeat; z-index: 2; position: absolute; top: -20px; transition: all 0.3s;}
.social-icons:hover:before, .social-icons:hover:after{width: 55px; opacity: 1;}
.social-icons::before{ background-position: left center;  left: -20px;}
.social-icons::after{ background-position: right center;  right: -20px;}
.social-icons.instagram:before, .social-icons.instagram:after{background-image: url(../images/ic-instagram-hover.svg);}
.social-icons.twitter:before, .social-icons.twitter:after{background-image: url(../images/ic-twitter-hover.svg);}
.social-icons:hover ~ .cursor{background-image: url(../images/cursor-hover.svg); z-index: 9;}


@media (min-width:768px) {
    .cursor{opacity: 1; visibility: visible;}   
    .touch-device .cursor{opacity: 0; visibility: hidden;}   
	.mobile-videos{display: none;}
	.desktop-videos{display: block;}	
    .social-icons{bottom: 100px;}
    .social-icons.instagram{margin-left: -260px;}
    .social-icons.twitter{margin-left: 260px;}
    .social-icons img{width: 142px;}
    .social-icons::before, .social-icons::after{height: 212px; background-size:212px; top: -35px;}
    .social-icons::before{left: -35px;}
    .social-icons::after{right: -35px;}
    .social-icons:hover:before, .social-icons:hover:after{width: 106px;}   
}