* {
  	font-family:  Avenir-Light, Futura, Helvetica, Arial;
	font-size: 18px;
   	margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background: #090909; /*2018: Este es el realmente importante, el fondo de la pagina. Al scrollear se mueve el body y los divs, este no*/
}

body{
	/*background: url(http://starmangame.com/images/stars.jpg)repeat-x center top;*/
	background-color: #090909;
    background-attachment: fixed; /*Prevent moving while scrolling*/
 	/*animation: displaceBg 200s linear infinite;
  	-webkit-animation: displaceBg 200s linear infinite;*/

}

/* Font starman */
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');


/* BACKGROUND ANIMATION*/
@-webkit-keyframes displaceBg {
  from {
    background-position: 0 top;
  }
  to {
    background-position: 1024px top; /*1024px es el tamaño del fondo*/
  }
}
@keyframes displaceBg {
  from {
    background-position: 0 top;
  }
  to {
    background-position: 1024px top; /*1024px es el tamaño del fondo*/
  }
}


/* Show App Store button, mobile only */
#mobile_download_buttons{
		display: none;
		position: relative;
		width: 100%;
		text-align: center;
}
.mobile_only_content{
		display: none;
}

/* CONTENEDOR*/
#general_container{ /*Este es el que queria que fuera absolute para usar scrolls de pagina, pero no lo uso aun */
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	width:100%;
	height: 100vh; /*Como minimo, la altura tiene que ser el 100% vertical, para que no se vea el blog (en caso de haberlo)*/
	/*max-width: 960px; */
	min-height: 100vh; /*Como minimo, la altura tiene que ser el 100% vertical, para que no se vea el blog (en caso de haberlo)*/
	max-height: 100vh; /*Como minimo, la altura tiene que ser el 100% vertical, para que no se vea el blog (en caso de haberlo)*/

}

#top_container{
	position:relative;
	width: 100%;
	height: 100vh;
	top: 50%;		
  	transform: translateY(-50%); /*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/

	text-align: center;
			
	/*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}


#top_container .maintitle{
   /* overflow: hidden;  just clearing floats */
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 560px;
    height: 80px;
 	top: 50%;
  	transform: translateY(-50%); /*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/
  	
  	/*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}


#top_container .maintitle .letter /*Cubo principal home, 3 por linea, 400px de altura*/
{
    overflow: hidden; /* just clearing floats */
    width: 80px;
    float: left;/*Esto hace que se apilen en linea o sobre el anterior, segun el ancho de la pagina*/
    text-align: left;
    opacity: 0;
    
    /*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.parallax {
	/* Inside top_container, the parallax divs*/
    /*display: none;*/
    position: fixed;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /*min-width: 720px;*/
    pointer-events: none;
    background-position: center 0;
    background-repeat: no-repeat;
}



#paral_main{
    width: 100%;
    min-width: 200px; /*Antes era 768, pero entonces el background en mobile quedaba descentrado y muy grande*/
    top: 0vh;
    height: 110vh;
	background-image: url("../images/bg_clean_min.jpg");
    background-position: center 0;
    background-repeat: no-repeat;
	background-size: cover; /* En caso de que no tenga JS activado, esto mantiene el BG escalado*/
	align-items: flex-end;
	display: flex;
}




#paral_front{
	background-image: url("../images/parallax-front.svg");
    background-position: center 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100%;
    min-width: 700px;
    height: 1000px;
    top: 100vh;
}
#paral_starman{
	/*background-image: url("../images/Icon.png");
    background-size: 200px 200px;*/
	opacity: 0;
    height: 200px;
    top: 28vh;
	z-index: 10;
	font-family: 'Old Standard TT', serif;
	font-size: 16;
	color: #b5b5b5;
	display:block;
}


/* FLOATING ELEMENTS OF PARAL_MAIN*/
#splashwaterfall{
	position: absolute;
	display:none; /* Is activated from JS*/
	float: left;
	opacity: 0.04;
	background-size: 100% 100%;
	background-image: url("../images/Splash_waterfall.png");
}

#pc1{
	position: absolute;
	display:none; /* Is activated from JS*/
	float: left;
}
#pc1 .body
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-image: url("../images/PC1_Body.png");
}
#pc1 .screen
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-image: url("../images/PC1_Screen.png");
	opacity: 1.0;
}
#pc1 .overlay
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-image: url("../images/PC1_Overlay.png");
}
#pc2{
	position: absolute;
	display:none; /* Is activated from JS*/
	float: left;
}
#pc2 .body
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-image: url("../images/PC2_Body.png");
}
#pc2 .screen
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-image: url("../images/PC2_Screen.png");
	opacity: 1.0;
}
#pc2 .overlay
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-image: url("../images/PC2_Overlay.png");
}

/* MID CONtAINER*/
#mid_container{ /*Es un contenedor que va justo bajo el general centrado en la pagina principal home, mostrando shots o entradas*/
	position: relative;
	width: 100%;
	height: 30vh;
	padding-top: 100px;
	min-height: 300px; /*Para que el contenido no se salga*/
	max-height: 350px; /*Tamaño maximo 25% de 1024, para que no se desaproveche espacio*/
	text-align: center;
	/*border-bottom: solid #2A2A2A 1px;*/
	background: #090909;
	/*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#mid_container .mailchimp{
	position: relative;
	top:0px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    height: 50%;
    min-height: 80px;
    max-height: 128px;
	opacity: 0;
	/*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

}
#mid_container .content{
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50%;
    padding-top: 20px;
	min-height: 80px;
    max-height: 128px;
  	/*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
}
#mid_container .content .links{
	position: relative;
    width: 100%;
    top:0px;
    height: 50%;

	
	font-family: Avenir-Light, Helvetica, Arial;
	font-size: 14px;
	letter-spacing: 1.05px;
	color: #626B75;
	/*text-transform: uppercase;*/
	
	 /*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

}

#mid_container .content .twitter{
		padding-top: 10px;
		width: 28px;
		height: 28px;
}

#bottom_container{ /*Es un contenedor que va justo bajo el general centrado en la pagina principal home, mostrando shots o entradas*/
	position: relative;
	width: 100%;
	height: 75%;
	min-height: 300px; /*Que si no se hace muy pequeño y se deforma el fondo*/
	text-align: center;
	/*background-color: #090909;*/

	/*Para que al subir el maintext, no se blurree*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#bottom_container .video{
	position: relative;
	height: 400px;
	top: 15%;
}
#bottom_container .videoMobile{
	display:none;
	position: relative;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	height: 300px;
	opacity: 0.7;
	background:url("../images/videoThumb.jpg") no-repeat center;
	/*background:url("../gif/gif400-1.gif") no-repeat center;*/
	background-size: 90%;
	top: 10%;
	cursor: pointer;
}

#bottom_container .authors{
	position: relative;
	top: 100px;
	font-family: Avenir-Light, Helvetica, Arial;
	font-size: 14px;
	letter-spacing: 1.05px;
	color: #626B75;
}

#bottom_container .press{
	position: relative;
	top: 100px;
	font-family: Avenir-Light, Helvetica, Arial;
	font-size: 12px;
	letter-spacing: 1.1px;
	color: #626B75;
}

#bottom_container a { color: inherit; font-size: inherit; text-decoration: inherit;} 
/* FOOTER */
#footmenu{
	position: fixed;
	width: 100%;
	bottom: 60px;
	left: 60px;
	z-index: 100; /*Para que no lo tape nada*/
}

#footmenu .sectionmenu
{

    overflow: hidden; /* just clearing floats */
	cursor: pointer;
    width: 80px; /* 1 items per row */
    height: 20px;
    float: left;/*Esto hace que se apilen en linea o sobre el anterior, segun el ancho de la pagina*/
    text-align: left;

	background-color: #090909;
	font-family: Avenir-Light, Helvetica, Arial;
	font-size: 12px;
	letter-spacing: 1.05px;
	color: #FFFFFF;
	text-transform: uppercase;
}

/* OTHER */

.circle
{
	position: absolute;
	top:-400px;
	width:600px;
	height:600px;
	left: 0;
    right: 0;

	
    margin-left: auto;
    margin-right: auto;
}


/* RESPONSIVE */


/*Aqui es cuando mailchimp se redimensiona*/
@media (max-width: 768px) {
	#mid_container .content{ /*Twitter download link etc*/
	}

	#pc1{
	
		top: 210px;

	}
	
	#top_container{
		display: none;
	}
	#mid_container{
		display: none;
	}
	#mobile_download_buttons{
		display: inherit;
	}
	.mobile_only_content{
		display: inherit;
	}
	#bottom_container .video{
		display: none;
	}
}
/*@media screen and ( max-width: 65em ) 60em es mas o menos 950px?*/
@media screen and ( max-width: 580px ) /*60em es mas o menos 950px?*/

{	

	#bottom_container .lightbox{

		width: 60px;
		height: 60px;
 
	}
	
	
	#mid_container .content .twitter{
		width: 28px;
		height: 28px;
	}
	
	.circle
	{
	top:-200px;
	width:300px;
	height:300px;
	left: 0;
    right: 0;

	}

	#top_container .maintitle{
   		height: 50px;
    	width: 350px;
    	transform: translateY(-100%); /*http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/*/

	}
	#paral_main{
		min-height: 400px;
	}
	#paral_starman{
		/*display:block;*/
	}
	

	
	#bottom_container{
	}
	
	#bottom_container .video{
		display:none;
	}
    
    #bottom_container .videoMobile{
		display:block;
	}
}