body {
	font-family: 'Helvetica', sans-serif;
	font-weight: 200;
	background-color:#111;
	color: #fff;
	text-align: center;
	height:100%;
	width:100%;
	overflow:hidden;
	background-color: #181818;
	background-position: center;
	background-size: cover;
	margin:0;
	padding:0;
}
h2{
	font-weight: 200;
	color:#fffbfb;
	text-transform: uppercase;
	margin-bottom: 0px;
	padding-bottom: 0;
	font-size: 2em;
	color:#2fb8db;
}
img{
	 width:100%;
	margin:0;
}
a{
	display: inline-block;
	font-size: 13px;
	color:#fff;
	text-decoration: none;
}
a:hover{
	color:#e390ad;
	text-decoration: underline;
}

*{
	position: relative;
}
#cinema, #cinema video{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index:1;
 
  transition: all .3s ease-in-out;
}
#cinema.pointer {
	cursor:default;
}
#cinema .g-background-default,.sc-background-white{
	background-color: red !important;
}


#logo{
	margin:3vh auto 5vh;
	position:absolute;
	top:6vh;
	opacity:.5;
	cursor:pointer;
	transition: opacity .4s ease-in-out;
}
#logo:hover{
	opacity:.7;
}
#logo img{
	max-width:25px;
	
	margin:0 auto;
}
#connect{
	display:none;
	transition: all 0.7s ease-in-out;
}
#connect.visible{
	z-index:2;
	margin:0;
	padding: 0;
	display:flex;
	flex-direction: column;
	align-content: space-between;
	height:50vh;
	max-width:28vw;
	margin:0 auto;
	align-items: center;
}
#player{
	position: absolute;
	bottom:0;
	margin-top:0vh;
	opacity: .5;
	width:100%;
}

#ui-fix{
	position:absolute;
	width:100%;
	height:100vh;
	background-color: red;
	z-index: 4;
}
#neon-ops{
	margin-top:25vh;
}
.social.hidden{
	display:none;
}
.social{
	margin-top:3em;
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: space-around;
	align-items: center;
	position:relative;
	width:28vw;
}
.social a{
	margin: 0 1em;
	width:24px;
	height:24px;
	min-width:24px;
	max-width: 20px;
	opacity:.5;
	transition:all .3s ease-in-out;
}
.social a:hover{
	opacity: 1;
}
.canvas{
	position:absolute;
	width:100%;
	height:50vh;
	background-color: rgba(0, 0, 0,0);
}

.logo-slave{
	display:none;
}

.icon{
	width:28px;
	min-width:20px;
	max-width: 20px;
}
#bio.hidden{
	display:none;
}
#bio{
	display:flex;
	position:absolute;
	align-items: center;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color: rgba(0,0,0,.7);
	z-index:6;
}
#bio .content{
	width:90%;
	max-width:700px;
	background-color:#ededed;
	color:#282828;
	box-sizing: border-box;
	margin:0 auto;
	padding:3em;
}
.close-bio{
	color:#555;
}
@media only screen and (max-width:1024px){
	#pagina{
		margin:20px 30px;
	}
	li{
		margin-bottom: 2px;
		padding-bottom: 0;
	}
}
@media only screen and (max-width:720px){
	ul{
		display:flex;
		flex-direction: column;
	}
	li{
		width:100%;
	}
	#logo{
	
	
	}
	#connect.visible{
		max-width: 50vw;
	}
	#cinema {
	  top:0;
	  bottom: auto;
	  min-width: 100%;
	  min-height: 100%;
	}