* {
  	font-family: Futura-Medium,sans-serif;
	font-size: 18px;
	color: #000000;
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

/* Contenedores generales*/

#general_centrado{ /*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%;
	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)*/

	padding-top: 22vh; /*La distancia del borde superior, antes estaba en cabecera, pero mejor la pongo siempre aquí.*/
}


#cabecera{
position:relative; width: 100%; height: 80px; text-align: left; margin-bottom: 100px;
}

#container{
position:relative; width: 100%; /*height:100%;*/ /* En height antes estaba 100%, pero como esta todo movido 22vh desdeel top, se salia por abajo y no me dejaba hacer el scroll bien de secciones*/
}

/* Contenedores general - en el caso del blog*/

#blog{ /*Es un contenedor que va justo bajo el general centrado en la pagina principal home, mostrando shots o entradas*/
position: relative;
background: #303A45;
background: white;
width: 100%;
min-height: 100vh; /*Como minimo, la altura tiene que ser el 100% vertical, para que al hacer scroll puedas estar SOLO en el blog, sin ver otras partes
/*top:100vh;*/ /*Esto no vale porque en el movil solapa el contenido general, y no puede ser. tiene que ser en funcion del ultimo div, que es general_centrado*/
padding-top: 10vh;
}

#blog .cabecera{
position:relative;
color: #ffffff;
margin:0 auto 0 auto;
width: 960px;
height: 80px; 
text-align: left; 
padding-bottom: 100px;
}

#blog .cabecera .sublogo{
color: #ffffff;
}

#blog .container{
position:relative; 
color: #ffffff;
margin:0 auto 0 auto;
width: 960px;

}



/* Atributos individuales / Etiquetas de estilo*/
.logo
{
cursor: pointer;
font-family: Futura-Medium;
font-size: 30px;
}

.sublogo
{
font-family: Futura-Medium;
font-size: 18px;

}

.logo_seccion_on{
color: #1cd8bc;
cursor: pointer;
}

.title
{
/*display:none;*/
font-family: Futura-Medium;
font-size: 22px;
margin-bottom: 15px;

}

.detail
{
/*display:none;*/
width: 220px;
font-family: Futura-Medium;
font-size: 16px;
color: #4A4A4A;
}

/* Listas auto escalables */

.listaCubos
{
    overflow: hidden; /* just clearing floats */
}

.cubo /*Cubo principal home, 3 por linea, 400px de altura*/
{
    overflow: hidden; /* just clearing floats */
	cursor: pointer;
    width: 33.3%; /* 3 items per row */
    height: 400px;
    float: left;/*Esto hace que se apilen en linea o sobre el anterior, segun el ancho de la pagina*/
    text-align: left;
}

.cubo_dinamico /*Cubo como el principal home, pero que se anima y va cambiando de columnas. Ademas intenta ser cuadrado, 320x320 etc. No tengo muy claro si es igual que el cubo y punto, pero casi */
{

    overflow: hidden; /* just clearing floats */
	/*cursor: pointer; Lo quito porque no quiero que entre imagen e imagen se pueda pulsar*/
    width: 33.3%; /* 3 items per row */
    height: 320px; /*960 de anchura entre 3, es lo mismo que el 33% del width*/
    float: left;/*Esto hace que se apilen en linea o sobre el anterior, segun el ancho de la pagina*/
    text-align: left;
}
.cubo_fullw /*Cubo de siempre 100% de anchura. Para mostrar detalles de un proyecto, o la lista de apps*/
{
    overflow: hidden; /* just clearing floats */
    width: 90%; /* 1 items per row */
    min-height: 500px; /*Sin limite de height*/
    float: left;/*Esto hace que se apilen en linea o sobre el anterior, segun el ancho de la pagina*/
    text-align: left;
}

.subcubo /*SubCubo dentro de Cubo, usado en Home, para centrar los cuadros en los cubos, que son mas grandes de lo necesario*/
{
	width: 210px; 	/*Solo especifico el ancho del cubo que es menor que el de Parent cubo, y luego en cada div en html le doy un style para posicionarlo (centro, dcha, etc)*/
	
}

.subcubowork /*Este es el subcubo cuando muestro work/apps/arquit, no en el home. Pequeña diferencia, que el width no es 100% cuando se reduce el ancho del navegador,y antes, si, para llenar*/
{
	cursor: pointer;
	width: 90%; /*Si pongo esto al 100%, se llena el ancho y se forman lineas horizontales*/
	height: 100%;
}


@media screen and ( max-width: 65em ) /*60em es mas o menos 950px?*/
{

	#cabecera{
	text-align: center;
	}
	
	#blog .cabecera{
	width: 100%;
	text-align: center;
	}
	
	#container
	{
	margin-top:6vh; /*No necesito tanta distancia del top, porque estoy en movil*/
	}
	#blog .container
	{
	width: 100%;
	}
	
	.title
	{
	display: block;
	}
	.detail
	{
	display: block;
	width: 100%;
	}
	
    .cubo
    {
        width: 100%;  /* 1 items per row */
        text-align: center;
    }
    
    .cubo_dinamico
    {
        width: 100%;  /* 1 items per row */
        text-align: center;
    }

    .cubo_fullw
    {
    
    		margin:0 auto 0 auto;
    		height: 320px;
    		float:none; /*Quito el float, porque no lo necesita y me lo pega a la izquierda, cosa q no quiero.*/
    }
    
    .subcubo
	{
	width: 100%;/*para que llene todo el cubo parent; al estar apilados verticales, lo quiero centrado */
	}
	
	.subcubowork /*para que no llene todo, se quede al 90%, y ademas se centre en su parent, y no crezca indefinidamente, lockeo width y height */
	{
		width: 90%;
		max-width: 320px; /*320 es 960/3, que es el maximo ancho que tiene cada cubo cuando la pantalla esta a fullscreen*/
		max-height: 320px;
		margin:0 auto 0 auto;
	}
    
}