* {
  -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: 'ArialNarrow';
    src: url('fonts/ArialNarrow.woff2') format('woff2'),
        url('fonts/ArialNarrow.woff') format('woff'),
        url('fonts/ArialNarrow.svg#ArialNarrow') format('svg');
    font-weight: normal;
    font-style: normal;
}


html, body {
  height:auto;
  width:100%;
    overflow: hidden;
    height: 100%;
}

body {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  border: none;
  background: url(../img/loading.gif) #000000;
  background-size: 32px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-family: 'Arial Narrow', ArialNarrow, sans-serif;
  z-index: 0;
}

#loading {
    background-size: 34px;  
    background: #000 url('../img/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;	
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
}


.adgh {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 170px;
    height: 170px;
    mix-blend-mode: overlay;
    z-index: 111;
}

.adgh:hover {
    mix-blend-mode: difference;
}

.site {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 170px;
    height: 170px;
    mix-blend-mode: overlay;
    z-index: 111;
}

.site:hover {
    mix-blend-mode: difference;
}

.gif {
    display: none;
}

html.safari .gif {
    display: block;
    width: 90%;
    max-width: 350px;
    display: block;
    margin: 0px auto 10vh auto;
}


iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;    
z-index: 0; 
-webkit-filter: blur(60px);
filter: blur(60px);    
}

#home, #videocontainer {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

#home {
z-index: 1;
}

#videocontainer {
  z-index: 10;
}

#mobileplayer {
    display: none;
}

.container {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    z-index: 100;      
}

.content {
  transition: 0.3s;
  width: 100%;
  height: 100%;
  position: absolute;
    opacity: 0;
}

.logo {
    width: 300px;
    margin: 0px;
    height: auto;
    display: block;
}

.content:hover, .content:hover #playpause, .content:hover #mute, .content:hover .mailinglistiframe {
    opacity: 1;
}

.hide {
    opacity: 0;
}

.show {
    opacity: 1;
}

#lightbox {
  z-index: 50;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: 34px;  
  background: rgba(0,0,0,0.9) url('../img/loading.gif');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: none;
}

#login #lightbox {
    display: block;
}


.close {
    position: fixed;
    top: 0px;
    right: 0px;
    padding: 13px 20px;
    color: #fff;
    background: #000;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    z-index: 10003;
    display: block;
    font-size: 28px;
    cursor: pointer;
}

#lightbox.privacy, #lightbox.signup {
    overflow-y: scroll;
    position: fixed;
    top: 0;
    z-index: 1000;
    display: none;
    left: 0;
    text-transform: none;
    letter-spacing: 0px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
}

.maximologo {
    display: block;
    margin: 0px auto 10vh auto;
    width: 500px;
    height: auto;
}

.spotify-embed {
    display: block;
    margin: 0 auto;
    width: 500px;
    height: 500px;
    outline: none;
    border: 0px;
}

.spotify-button {
    position: absolute;
    bottom: 15px;
    right: 20px;
    padding: 10px;
    width: 25px;
    height: 25px;
}

h1 {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
    margin: 0px auto 10vh auto;
    font-size: 45px;
    line-height: 45px;
    letter-spacing: 0px;
    text-transform: uppercase;
        -webkit-transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2);
        -o-transform: scale(1, 1.2);
        transform: scale(1, 1.2);   
    max-width: 800px;
}

h4 {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
    margin: 0px auto 10vh auto;
    font-size: 25px;
    letter-spacing: 0px;
    text-transform: uppercase;
        -webkit-transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2);
        -o-transform: scale(1, 1.2);
        transform: scale(1, 1.2);     
}

#signupwrap {
  z-index: 1000;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  background: transparent; 
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


#signupform {
	color: #fff;
	margin: 0px auto;
	font-weight: normal;
	font-size: 13px;
	line-height: 13px;
	text-align: center;
	letter-spacing: 4px;
	z-index: 4;
    display: inline-block;
    width: 100%;
}

#signupform input {
	display: inline-block;
	outline: none;
    -webkit-appearance: none;
}

#signupform .email, .loginbutton {
	background: transparent;
    border: none;
    border: 2px solid #fff;
	width: 370px;
	padding: 20px 0px 17px 0px;
	font-size: 15px;
	line-height: 17px;
    text-align: center;
	vertical-align: bottom;
	margin: 0px;
    font-weight: normal;
    font-family: 'Arial Narrow', ArialNarrow, sans-serif, sans-serif;
    text-transform: uppercase;
            -webkit-transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2);
        -o-transform: scale(1, 1.2);
        transform: scale(1, 1.2);    
    letter-spacing: 0px;
    
}

.loginbutton {
    color: #6a6d73;
    display: block;
    transition: 0.3s;
    margin: 0 auto;
}

.signupcontainer {
    -webkit-display: flex;
    display: flex;
    max-width: 800px;
    margin: 0 auto;
}

.cell  {
    -webkit-flex: 1;
    flex: 1;
}

.spotifyform {
    margin-top: 0px;
    padding-top: 0px;
}

#signupform .signupbutton {
    color: #fff;
    border: 0px;
    font-size: 15px;
    line-height: 15px;
    vertical-align: bottom;
    transition: 0.3s;
    text-transform: uppercase;
    padding: 7px;
    display: table;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 10px auto 0px auto;
    cursor: pointer;
    background: transparent;
    font-family: 'Arial Narrow', ArialNarrow, sans-serif, sans-serif;
    transition: 0.6s;
}

.emailsignupbutton {
    visibility: hidden;
}

#signupform .signupbutton.hiddenbutton {
    visibility: hidden;
    cursor: default;
}

#mobilenotice .signupbutton {
    background: #fff;
    color: #eb0f14;
    padding: 15px 30px;
    margin-top: 30px;
    font-size: 20px;
    letter-spacing: 0px;
}

#signupform .signupbutton:hover {
    color: #6a6d73;
}

form {
    margin: 0px;
    padding: 0px;
}

#signupform .email:focus, #signupform .email:hover, #signupform .email:active {
    background: black;
    color: white;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #6a6d73;
  text-transform: uppercase;
  font-family: 'Arial Narrow', ArialNarrow, sans-serif, sans-serif;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #6a6d73;
  text-transform: uppercase;
  font-family: 'Arial Narrow', ArialNarrow, sans-serif, sans-serif;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #6a6d73;
  text-transform: uppercase;
  font-family: 'Arial Narrow', ArialNarrow, sans-serif, sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
  color: #6a6d73;
  text-transform: uppercase;
  font-family: 'Arial Narrow', ArialNarrow, sans-serif, sans-serif;
}

.fineprint {
    font-size: 11px;
    text-align: center;
    display: block;
    margin: 20px auto 0px auto;
    opacity: 0.6 !important;
    color: #fff;
    max-width: 400px;
    letter-spacing: 0px;
    z-index: 1111;
}

.fineprint a {
    color: #fff;
}


.movedown {
    -webkit-animation: movedown 2s ease forwards;
    animation: movedown 2s ease forwards;
}

@-webkit-keyframes movedown {
    0% {
        -webkit-transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0);
    }    
}

@keyframes moveup {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }    
}

.moveup {
    -webkit-animation: moveup 2s ease forwards;
    animation: moveup 2s ease forwards;
}

@-webkit-keyframes moveup {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px);
    }    
}

@keyframes moveup {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100px);
    }    
}


.zoomin {
    -webkit-animation: zoomin 1.5s forwards ease;
    animation: zoomin 1.5s forwards ease;
}

@-webkit-keyframes zoomin {
    0% {-webkit-transform: scale(0)}
    100% {transform: scale(1)}
}

@keyframes zoomin {
    0% {transform: scale(0)}
    100% {transform: scale(1)}
}


.zoomout {
    -webkit-animation: zoomout 1.5s forwards ease;
    animation: zoomout 1.5s forwards ease;
}

@-webkit-keyframes zoomout {
    0% {transform: scale(1)}
    100% {transform: scale(0)}
}

@keyframes zoomout {
    0% {transform: scale(1)}
    100% {transform: scale(0)}
}


.continue {
    position: absolute;
    z-index: 9999;
    top: 20px;
    right: 30px;
    width: 25px;
    height: 25px;
    font-size: 27px;
    display: block;
    opacity: 0;
    transition: 0.3s;
}

a {
  color: #9d9daf;
  text-decoration: none;
  opacity: 1;
}

a:hover {
    opacity: 1;
    color: #fff;
}

.topmenu a:hover {
    text-decoration: underline;
}

img {
    border: 0;
    outline: 0;
}


#mobilevideo {
    display: none
}

.loader, #initiallogo {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
    z-index: 0;
}

#initiallogo {
    display: block;
    width: 100%;
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    font-style: normal;
    text-align: center;
    font-weight: bold;
    -webkit-animation: expand 30s ease-out forwards;
    -moz-animation: expand 30s ease-out forwards;
    -ms-animation: expand 30s ease-out forwards;    
    -o-animation: expand 30s ease-out forwards;
    animation: expand 30s ease-out forwards;        
}

.bold {
    font-family: dpgothic, 'Arial Black', sans-serif;
}




.fadein {
    -webkit-animation: fadein 2000ms linear forwards;
    -moz-animation: fadein 2000ms linear forwards;
    -o-animation: fadein 2000ms linear forwards;
    animation: fadein 2000ms linear forwards;  
}   

.fadein2 {
    -webkit-animation: fadein2 2000ms linear forwards;
    -moz-animation: fadein2 2000ms linear forwards;
    -o-animation: fadein2 2000ms linear forwards;
    animation: fadein2 2000ms linear forwards;  
}   


.fadeinfaster {
    -webkit-animation: fadein 1000ms linear forwards;
    -moz-animation: fadein 1000ms linear forwards; 
    -o-animation: fadein 1000ms linear forwards;
    animation: fadein 1000ms linear forwards;  
}   

.fadeinslower {
    -webkit-animation: fadeinslower 3000ms linear forwards;
    -moz-animation: fadeinslower 3000ms linear forwards;  
    -o-animation: fadeinslower 3000ms linear forwards;
    animation: fadeinslower 3000ms linear forwards;  
}   
   
.fadeout {
    -webkit-animation: fadeout 1000ms linear forwards;
    -moz-animation: fadeout 1000ms linear forwards;  
    -o-animation: fadeout 1000ms linear forwards;
    animation: fadeout 1000ms linear forwards;  
}   

.fadeoutslower {
    -webkit-animation: fadeout 1500ms linear forwards;
    -moz-animation: fadeout 1500ms linear forwards;  
    -o-animation: fadeout 1500ms linear forwards;
    animation: fadeout 1500ms linear forwards;  
}   

.fadeoutsuperslow {
    -webkit-animation: fadeoutsuperslow 2500ms linear forwards;
    -moz-animation: fadeoutsuperslow 2500ms linear forwards;  
    -o-animation: fadeoutsuperslow 2500ms linear forwards;
    animation: fadeoutsuperslow 2500ms linear forwards;  
}   


@-webkit-keyframes fadeout {  
0% { opacity: 1;}  
40% { opacity: 1;}      
100% { opacity: 0;}    
}

@-moz-keyframes fadeout {  
0% { opacity: 1;}  
40% { opacity: 1;}      
100% { opacity: 0;}     
}

@-o-keyframes fadeout {  
0% { opacity: 1;}  
40% { opacity: 1;}      
100% { opacity: 0;}     
}

@-ms-keyframes fadeout {  
0% { opacity: 1;}  
40% { opacity: 1;}      
100% { opacity: 0;}    
}

@keyframes fadeout {  
0% { opacity: 1;}  
40% { opacity: 1;}      
100% { opacity: 0;}     
}


@-webkit-keyframes fadein {  
0% { opacity: 0;}  
60% { opacity: 0;}      
100% { opacity: 1;}    
}

@-moz-keyframes fadein {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}

@-o-keyframes fadein {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}

@-ms-keyframes fadein {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}

@keyframes fadein {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}




@-webkit-keyframes fadein2 {  
0% { opacity: 0;}  
60% { opacity: 0;}      
100% { opacity: 0.7;}       
}

@-moz-keyframes fadein2 {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 0.7;}        
}

@-o-keyframes fadein2 {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 0.7;}       
}

@-ms-keyframes fadein2 {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 0.7;}       
}

@keyframes fadein2 {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 0.7;}    
}


@-webkit-keyframes fadeinslower {  
0% { opacity: 0;}  
60% { opacity: 0;}      
100% { opacity: 1;}    
}

@-moz-keyframes fadeinslower {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}

@-o-keyframes fadeinslower {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}

@-ms-keyframes fadeinslower {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}

@keyframes fadeinslower {  
0% { opacity: 0;}  
60% { opacity: 0;}          
100% { opacity: 1;}    
}
 

@-webkit-keyframes fadeoutsuperslow {  
0% { opacity: 0.5;}  
40% { opacity: 0.5;}      
100% { opacity: 0;}    
}

@-moz-keyframes fadeoutsuperslow {  
0% { opacity: 0.5;}  
40% { opacity: 0.5;}      
100% { opacity: 0;}
}

@-o-keyframes fadeoutsuperslow {  
0% { opacity: 0.5;}  
40% { opacity: 0.5;}      
100% { opacity: 0;}  
}

@-ms-keyframes fadeoutsuperslow {  
0% { opacity: 0.5;}  
40% { opacity: 0.5;}      
100% { opacity: 0;}
}

@keyframes fadeoutsuperslow {  
0% { opacity: 0.5;}  
40% { opacity: 0.5;}      
100% { opacity: 0;}
}

      
@-webkit-keyframes expand {  
0% { letter-spacing: 60px; opacity: 0;}
10% {opacity: 1;}    
100% { letter-spacing: 80px; opacity: 1;}    
}

@-moz-keyframes expand {  
0% { letter-spacing: 60px; opacity: 0;}
10% {opacity: 1;}    
100% { letter-spacing: 80px; opacity: 1;}       
}

@-o-keyframes expand {  
0% { letter-spacing: 60px; opacity: 0;}
10% {opacity: 1;}    
100% { letter-spacing: 80px; opacity: 1;}         
}

@-ms-keyframes expand {  
0% { letter-spacing: 60px; opacity: 0;}
10% {opacity: 1;}    
100% { letter-spacing: 80px; opacity: 1;}           
}

@keyframes expand {  
0% { letter-spacing: 60px; opacity: 0;}
10% {opacity: 1;}    
100% { letter-spacing: 80px; opacity: 1;}         
}




@-webkit-keyframes opacity {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes opacity {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

#loading {
  text-align: center; 
  margin: 0;
}

#loading span {
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  
  -moz-animation-name: opacity;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
}

#loading span:nth-child(2) {
  -webkit-animation-delay: 200ms;
  -moz-animation-delay: 200ms;
}

#loading span:nth-child(3) {
  -webkit-animation-delay: 400ms;
  -moz-animation-delay: 400ms;
}

#loading span:nth-child(4) {
  -webkit-animation-delay: 600ms;
  -moz-animation-delay: 600ms;
}

#loading span:nth-child(5) {
  -webkit-animation-delay: 800ms;
  -moz-animation-delay: 800ms;
}

#loading span:nth-child(6) {
  -webkit-animation-delay: 1000ms;
  -moz-animation-delay: 1000ms;
}

#loading span:nth-child(7) {
  -webkit-animation-delay: 1200ms;
  -moz-animation-delay: 1200ms;
}

#loading span:nth-child(8) {
  -webkit-animation-delay: 1400ms;
  -moz-animation-delay: 1400ms;
}

#loading span:nth-child(9) {
  -webkit-animation-delay: 1600ms;
  -moz-animation-delay: 1600ms;
}

#loading span:nth-child(10) {
  -webkit-animation-delay: 1800ms;
  -moz-animation-delay: 1800ms;
}

#loading span:nth-child(11) {
  -webkit-animation-delay: 2000ms;
  -moz-animation-delay: 2000ms;
}



/* FOOTER */

.credits-wrap {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
}

.credits-container {
    width: 100%;
    height: auto;
    padding: 100px 0px;
    z-index: 10;
}

.packshot {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    background: #000;
}

.packshot img {
    width: 100%;
    height: auto;
    margin: 0;
}

.column-left{ float: left; width: 20%;}
.column-right{ float: right; width: 20%;}
.column-center{ display: inline-block; width: 60%; }

.column-center img { width: 100%; height: auto;max-width: 100%;padding: 0;border: 0;outline: 0;}
.column-center img#title {width: 800px;height: auto;}

.separator {
    display: block;
    height: 80px;
    clear: both;
}

.clear {
    clear: all;
}


/* VIDEO */

.mbYTP_wrapper {
  min-height: 100% !important;
  min-height: 100% !important;
}

#video {
  height: 100%;
  width: 100%;
    z-index: 99;
    position: absolute;
    top: 0px;
    left: 0px;
}

#videowrapper{
    width: 100%;
}

#controls {
    position: absolute;
    bottom: 10px;
    left: 20px;
    z-index: 10;
    line-height: 23px;
    vertical-align: middle;
    padding: 8px 10px;
    mix-blend-mode: normal;    
    opacity: 1;
}

.label {
    position: absolute;
    bottom: 15px;
    left: 70px;
    height: 30px;
    font-size: 17px;
    width: 200px;
    display: block;
    color: #ffffff;
    text-align: left;
}

.purple {
    color: #ffffff !important; 
    display: inline-block;
}

#controls i {
    font-size: 23px;
    padding: 0px 5px 0px 5px;
}

#controls a {
    color: #ffffff;
    transition: 0.4s;
    line-height: 23px;
    vertical-align: middle;
}

#controls a:hover {
    color: #fff;
}

#controls:hover, a:hover {
  cursor: pointer;
}

#controls .playpausebutton {
    opacity: 1;
}

.mobileLogo {
  display:none;
}

.mobilevideo {
display: none;    
}

.close:hover {
    opacity: 1 !important;
}


#playpause, #mute {
    position: absolute;
    bottom: 10px;
    left: 20px;
    z-index: 999;
    padding: 8px 10px;
    opacity: 0;
    mix-blend-mode: normal;    
}

#mute {
    left: 60px;
}

#playpause, .playpausebutton, #mute, .mutebutton {
  height: 35px;
  width: auto;  
}

.mutebutton.unmuted, .playpausebutton.paused {
    display: none;
}

.playpausebutton, .mutebutton {
  opacity: 0.8;
}

#playpause:hover, a:hover, #mute:hover {
  cursor: pointer;
}

#playpause .playpausebutton, #playpause .mutebutton  {
    opacity: 1;
}

.mobileLogo {
  display:none;
}

.mobilevideo {
display: none;    
}


/* MENU */



.topmenu {
  position: absolute;
  top: 30px;
  left: 30px;
  right: auto;
  bottom: auto;
  text-align: left;
    z-index: 14;
    font-size: 17px;
    line-height: 21px;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    mix-blend-mode: difference;
}

.vidsplash {
    position: absolute;
    height: 43px;
    text-align: center;
    border-radius: 0;
    bottom: 0px;
    right: 340px;
    background-size: cover;
    mix-blend-mode: normal;
}
.main {
  font-size: 20px;
  line-height: 20px;
}

.line {
    display: block;
}

span.half, span.full {
  display: inline-block;
}

span.halfopacity {
  display: block;
}

span.date {
    opacity: 1;
    display: block;
}

span.full {
  opacity: 1 !important;
}

span.half a, span.halfopacity {
  opacity: 1;
    color: #9d9daf;
}

span.half a:hover {
  opacity: 1;
  text-decoration underline;
  color: #fff;
}

.socials {top: 30px;right: 30px; left: auto; bottom: auto}


.vidsplash.desktop i {
    font-size: 18px;
    vertical-align: top;
}

.vidsplash.desktop a {
    display: inline-block;
    padding: 0px 8px 8px 8px;
    font-size: 20px;
}

.vidsplash.desktop a.logolink {
    vertical-align: middle;
}

.vidsplash img {
    width: 35px;
    height: 35px;
    padding: 7.5px 15px 20px 7.5px;
    text-align: left;
    display: inline;    
}

.vidsplash a.link, .vidsplash span {
    padding: 0px 5px;
    position: relative;
    top: 20px;  
    vertical-align: top;
    color: #fff;
    font-size: 10px;
    font-style: normal;    
}

.vidsplash a.link {
    top: 21px;
}

.vidsplash span.slash {
    padding: 0px 0px;
}





.continue .tooltip {
  pointer-events: none;
  position: absolute;
  z-index: 9999;
  left: 50%;
  bottom: -45px;
  opacity: 0;
  -moz-transition: ease-out 300ms opacity 0ms;
  -o-transition: ease-out 300ms opacity 0ms;
  -webkit-transition: ease-out 300ms opacity;
  -webkit-transition-delay: 0ms;
  transition: ease-out 300ms opacity 0ms;
}

.continue .tooltip span {
  display: block;
  white-space: nowrap;
  position: relative;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 3px 8px;
  left: -50%;
  font-size: 14px;
  color: #fff;
}

.continue:hover span {
  opacity: 1;
}

   
.mailinglistiframe {
    right: 30px;
    bottom: 10px;
    position: absolute;
    opacity: 0;
    height: 100px;
}

.mailinglist {
        width: 100%;
        position: absolute;
        top: 0px;
        right: 0px;
        opacity: 0.4;
        font-family: 'dpgothic', 'Arial Black', Arial, sans-serif;    
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;    
        -ms-transition: 0.2s;    
        transition: 0.2s;    
        mix-blend-mode: normal;        
}






/**** ANIMATIONS ****/


    
.fadeoutfaster {
    -webkit-animation: fadeout 500ms linear forwards;
    -moz-animation: fadeout 500ms linear forwards;  
    -o-animation: fadeout 500ms linear forwards;
    animation: fadeout 500ms linear forwards;  
}   
    


    
@-webkit-keyframes flicker {
  from {
    opacity: 0.5;
  }
  4% {
    opacity: 0.5;
  }
  6% {
    opacity: 0.45;
  }
  8% {
    opacity: 0.55;
  }
  10% {
    opacity: 0.45;
  }
  11% {
    opacity: 0.5;
  }
  12% {
    opacity: 0.65;
  }
  14% {
    opacity: 0.55;
  }
  16% {
    opacity: 0.70;
  }
  17% {
    opacity: 0.55;
  }
  19% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.5;
  }
  24% {
    opacity: 0.5;
  }
  26% {
    opacity: 0.69;
  }
  28% {
    opacity: 0.5;
  }
  38% {
    opacity: 0.45;
  }
  40% {
    opacity: 0.5;
  }
  42% {
    opacity: 0.6;
  }
  44% {
    opacity: 0.5;
  }
  46% {
    opacity: 0.5;
  }
  56% {
    opacity: 0.5;
  }
  58% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.5;
  }
  68% {
    opacity: 0.5;
  }
  70% {
    opacity: .6; /*peak*/
  }
  72% {
    opacity: 0.5;
  }
  93% {
    opacity: 0.5;
  }
  95% {
    opacity: .6; /*peak*/
  }
  97% {
    opacity: 0.5;
  }
  to {
    opacity: 0.5;
  }
}
    
  
@keyframes flicker {
  from {
    opacity: 0.5;
  }
  4% {
    opacity: 0.5;
  }
  6% {
    opacity: 0.45;
  }
  8% {
    opacity: 0.55;
  }
  10% {
    opacity: 0.45;
  }
  11% {
    opacity: 0.5;
  }
  12% {
    opacity: 0.65;
  }
  14% {
    opacity: 0.55;
  }
  16% {
    opacity: 0.70;
  }
  17% {
    opacity: 0.55;
  }
  19% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.5;
  }
  24% {
    opacity: 0.5;
  }
  26% {
    opacity: 0.69;
  }
  28% {
    opacity: 0.5;
  }
  38% {
    opacity: 0.45;
  }
  40% {
    opacity: 0.5;
  }
  42% {
    opacity: 0.6;
  }
  44% {
    opacity: 0.5;
  }
  46% {
    opacity: 0.5;
  }
  56% {
    opacity: 0.5;
  }
  58% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.5;
  }
  68% {
    opacity: 0.5;
  }
  70% {
    opacity: .6; /*peak*/
  }
  72% {
    opacity: 0.5;
  }
  93% {
    opacity: 0.5;
  }
  95% {
    opacity: .6; /*peak*/
  }
  97% {
    opacity: 0.5;
  }
  to {
    opacity: 0.5;
  }
}        




/**** MAIN MEDIA QUERIES ****/ 


.landscape, .portrait {
    display: none;
}

@media (max-width: 800px) {
    
        form {
        margin: 20px 0px 0px 0px;
    }
    
    .adgh, .site {
        width: 110px;
        height: 110px;
    }    

html, body {
    overflow: hidden;
}    
    
    #video, #wrapper_video {
        display: none;
    }    
    
.maximologo {
    display: block;
    margin: 0px auto 10vh auto;
    width: 80%;
    height: auto;
}
    
#mobilevideo {
    display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;    
}
    
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    
    .videocontainer {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }    
 
    
    h4 {
        font-size: 20px;
    }

    .signupcontainer, .cell {
        display: block;
    }    
    

.spotify-embed {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: 400px;
    outline: none;
    border: 0px;
}    

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}    
    
#signupform .signupbutton.hiddenbutton {
    display: none;
    }
    
    #signupform {
        width: 290px;
        margin: 0 auto;
        z-index: 9;
        font-size: 10px;
        letter-spacing: 1px;
    }

    #signupform .email, .loginbutton {
        width: 85%;
        border-radius: 0px;
        line-height: 20px;
        vertical-align: middle;
        box-sizing: border-box;
        color: #fff;
        display: block;
        margin: 10px auto;
    }

    #signupform .signupbutton {
        opacity: 1;
        top: 1px;
        right: 15px;
    }
      
    .topmenu {
        display: none;
    }   
    
    
    
#loadingvid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 14;
    font-size: 9px;
    letter-spacing: 10px;
    color: #fff;
    text-transform: uppercase;
    font-style: normal;
    font-weight: bold;
    mix-blend-mode: screen;
    opacity: 0.5;
}
    
.logo {
    width: 200px;
    margin: 0px;
    height: auto;
    display: block;
}    
    
    
    
    .container, .content {
        opacity: 1 !important;
        height: auto;
        z-index: 100;bottom: 0px;
    }
 
    
    #mute, #playpause, #play {
        display: none !important;
    }    
    
    .spotify-button {
        opacity: 1 !important;
        display: block !important;
    }    
    
    #mobilevideo {
      display:block;
      width:100%;
      height:100%;
      position:absolute;
      top:0px;
      left:0%;
      z-index: 99;
      background: transparent;
    }

    
    
#controls {
    position: absolute;
    bottom: 72px;
    left: 0px;
    right: 0px;
    z-index: 10;
    line-height: 23px;
    vertical-align: middle;
    padding: 8px 10px;
    mix-blend-mode: normal;    
    opacity: 1;
}

    

input.text, input.button {       
    background: #fff;
}

.playcontainer {
    width: 100%;
    height: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9998;
}

a.play {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);    
  -ms-transform: translateY(-50%);        
  transform: translateY(-50%);
  margin: 0 auto;
  display: block; 
  width: 100%;
  color: rgba(255,255,255,1);
}

a.play:hover {
  color: rgba(255,255,255,1);
}
    
a.play .fa {
    font-size: 70px;
}        
    

}   




@media (max-width: 800px) {



a {
    color: #fff;
}
    
}