@charset "UTF-8";
/* Responsive mixins */


html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

*::-moz-selection, ::selection {
  background: #0f0e0e;
  color: #fff; }

body {
  font-family: "alternate-gothic-no-3-d", Helvetica Neue, Arial, sans-serif;
  font-size: 23px;
  background: #051282;
  color: #fff;
  font-weight: 400;
  margin: 0;
  opacity:1;
  position: relative;
	transition: opacity 0.25s ease-in-out;
}
body.loading {
position:fixed;
opacity:0;
}
a, a:visited {
	text-decoration: none;
	color: #fff;
	transition: all 0.15s ease;
	cursor: pointer;
}
a span { border-bottom: 1px solid #fff;
		transition: all 0.15s ease 0s; }
a:hover {
	color: #da4450; cursor: pointer;
}
a:hover span { border-bottom: 1px solid #1610FF; color: #1610FF; }
svg {
    fill: currentColor;
}
h1 {

	margin-bottom: 0;
	transition: opacity 1s ease-in-out;
  display: flex;
  color: white;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center
  margin-top: 3rem;
  opacity:0;
}
h1 svg {
  height: 6vw;
  margin: .2rem 2rem;
}
h1.loaded {  opacity:1;  }
h2 { font-weight: normal;
	letter-spacing: 1.2vw;
	text-align: center;
	margin-top: 0;
}
h3 { letter-spacing: 0.6vw; font-weight: normal; text-align: center; font-size: 0.8em; margin: 2em auto; }

.browser { position: relative; width: 100vw; height: 100vh; overflow:hidden; background: #101132; }
.browser--top-section {
  background: linear-gradient(180deg, rgba(218,68,80,1) 38%, rgba(4,18,130,1) 100%);

}

.browser p {
  text-align: center;
  max-width: 750px;
  padding: 0 40px;
  margin-left: auto;
  margin-right: auto;
}
.image { position: absolute; top:0; left:0; object-fit: cover; width:100vw; height: 100vh;
/* -webkit-filter: blur(11px);
	-moz-filter: blur(11px);
	-o-filter: blur(11px);
	-ms-filter: blur(11px);
	filter: blur(11px); */ z-index:0; transition: opacity 0.3s ease-in-out; opacity: 0;
}
.image.loaded { opacity:1; }
.title { height: 100%; width: 100%; border-left: 20px solid #fff; border-right: 20px solid #fff; border-top: 20px solid #fff; }
.bottom-bar { position: fixed; width: 100vw; height: 20px; background: #fff; z-index:1002; bottom:0;}
.top-bar { position: absolute; width: 100vw; height: 20px; background: #fff; z-index:1003; top:0;}

.socials {
	position: fixed; text-align: right;  font-size: 35px; width: 35px; z-index:1001;
}

.socials div {  font-size: 20px;  font-family: 'fira-sans'; font-weight: 300; }

.stream { padding: 0 50px; text-align:center;  font-size: 35px; width: calc(100% - 40px); position: absolute; bottom: 4rem; transition: bottom 1s ease-in-out; opacity:0; }
.stream.loaded {  bottom: 6rem; opacity:1; }
.stream a { margin: 0 1rem; }

.stagger { border-left: 20px solid #fff; border-right: 20px solid #fff; position:relative; overflow: hidden; }

.cover__image { width:100%;}
.square__image { width: 100%; }

.mask { position: absolute; left:0; top:100vh; mix-blend-mode: color; background: #6b2576; width: 100%; height: 100%;z-index:999; }
.mask-dark { position: absolute; bottom: 0; left:0; width:calc(100% - 40px); height:0; z-index:99; background: #282327; margin: 0 20px; }

.video-position { width: 100%; max-width: 650px; margin: auto; }
.video-wrapper { height:0; padding-bottom: 56.25%; width: 100%; position: relative;  /* border-bottom: 5px solid #e2c59a; */  }

.video-wrapper iframe { position:absolute; left:0; top:0; width:100% !important; height:100% !important; }

@media screen and (min-width: 1100px) {
	h1{


	}
	.socials { right: 50px; top: calc(50% - 80px); }
	.socials div {   -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg); -moz-transform: rotate(90deg);
		transform: rotate(90deg); margin-top: 1.8em; }
	.socials a + a { margin-top: 0.8em; display:block; }
	.stream span { margin-right: 2em;  }
}

@media screen and (max-width: 1100px) {
	.socials { bottom: 50px; width: 100%; text-align: center; }
	.socials a + a { margin-left: 0.8em;  }
	.stream span { display:block; margin-bottom: 0.2em;   }
	h1 span {  }
    .stream.loaded { bottom: 10rem; }
}

@media screen and (max-width: 600px) {
	h1 { }
	.stream, .socials { font-size:1em; }
	.stream { padding: 0 10vw;  }

}