.contenido .fase.conmenu {

}

.contenido .menu.menuFases {
    /*left: 50%;*/
    left: 30px;
    margin-left: -60px;
    width: 120px;
}

/***
 *  termina transiciones y estilo en el menu principal
 *
 */

.contenido .fase {
    /*background-color: #D3D3ff;*/
}

/**********************
 * portada
 ***********/

.contenido .portada {
    /*background-color: #D3D3D3;*/
}

/**********************
 * ejercicios
 ***********/

.contenido .ejercicios {
    /*background-color: #D3D3ff;*/
}

/**********************
 * conclusiones
 ***********/

.contenido .conclusiones {
    background-color: #ffD3ff;
}

/********
 * general
 */
.contenido .botones {
    width: 150px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.contenido .boton {
    display: block;
    outline: none;
    text-decoration: none;
    /*border-radius: 3px;
    border: solid 1px #000;
    background-color: #ffD3ff;*/
    text-align: center;
}

.contenido .dummydiv {
    border: 2px solid green;
    width: 300px;
    height: 700px;
    margin: auto;
}
.contenido .testDiv {
    border:1px solid #666;
    width: 80%;
    margin: auto;
}



/* 
 * ========================================
 * Estilos para el div.screenSizeReference 
 */
.displayWidthReference {
	font-size: 11px; /*pixel fallback*/
    font-size: 0.6875rem; /*11px / 16px*/
	position: absolute;
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	left: 0px;
	bottom: 20px;
	right: 0px;
	text-align: center;
}
.displayWidth {
    border: solid 1px black;
}
.gt1280 {
	background-color: yellow;
}
/* =================================== */



/* 
 * ==========================
 * === Responsive 
 * ==========================
 */

/* estilos aplican en width < 1280px  (Android 10" landscape) */
@media screen and (max-width: 1280px) {
	
	/* ====================================
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * Los que siguen son solo de ejemplo
	 * ====================================
	 */
	
	.displayWidth {
		background: none;
	}
	.w1280 {
		display: inline-block;
		background-color: yellow;
	}
	
	
}

/* estilos aplican en width < 1024px  (iPad landscape) */
@media screen and (max-width: 1024px) {

	/* ====================================
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * Los que siguen son solo de ejemplo
	 * ====================================
	 */
	
	.displayWidth {
		background: none;
	}
	.w1024 {
		display: inline-block;
		background-color:  yellow;
	}
	.textoPortada{
	    left: auto;
	    right: 500px;
	    width: 230px;
	}
	.ilustracionPortada{
	    left: auto;
	    right: 30px;
	}	
}

/* estilos palican width < 768px (iPad, Android portrait)*/
@media screen and (max-width: 768px) {
	/* ====================================
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * Los que siguen son solo de ejemplo
	 * ====================================
	 */
	
	.header .nombre_objeto {
		font-size: 20px; /* pixel fallback */
		font-size: 1.25rem;
	}
	
	.displayWidth {
		background: none;
	}
	.w768 {
		display: inline-block;
		background-color:  yellow;
	}
	
}