body {
	margin: 0px;
}
/**********************************************************************************************************************
* Bloques 
**********************************************************************************************************************/
.bloque {
	width: 100%;
}
/* BLOQUE cabecera */
.bloque#cabecera .columna_bloque.izquierda {
	width: 0%;
}
.bloque#cabecera .columna_bloque.centro {
	width: 100%;
}
.bloque#cabecera .columna_bloque.derecha {
	width: 0%;
}
/* BLOQUE 7verdades */
.bloque#bloque_7verdades .columna_bloque.izquierda {
	width: 20%;
}
.bloque#bloque_7verdades .columna_bloque.centro {
	width: 60%;
}
.bloque#bloque_7verdades .columna_bloque.derecha {
	width: 20%;
}
.css_cinta_superior {
	text-align: left;
	width: 72%;
	position: absolute;
	top: 3em;
	left: 2em;
}
.css_opcion_cinta {
	display: inline-block;
    padding-left: 0.5em;
    padding-right: 0.5em;
    opacity: 75%;
    background-color: white;
    font-size: 1.2em;
    border-radius: 0.5em;
    line-height: 200%;
	cursor: pointer;
	color: rgb(171, 44, 107);
}
.css_opcion_cinta:hover {
	opacity: 100%;
}
.css_opcion_cinta.primera {
	margin-right: 1em;
}
.css_opcion_cinta.intermedia {
	margin-right: 1em;
}
.css_opcion_cinta.ultima {
}
.css_contenedor_texto_principal {
	position: absolute;
	top: 29em;
	width: 100%;
}
.css_texto_a_mano {
	font-family: 'Patrick Hand', cursive;
	color: #333333;
	font-size: 1.2em;
}
.css_texto_clases_piano {
	font-size: 1.5em;
	font-weight: bold;
}
.css_texto_principal {
	color: rgb(171, 44, 107);
	background-color: white;
	border-radius: 1em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	width:30%;
	text-align: center;
	margin: auto;
}
.css_texto_ayudo {
	background-color: rgb(255,255,255, 0.9);
	border-radius: 1em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	width:80%;
	text-align: center;
	margin: auto;
}
.css_contenedor_logo {
	
}
.css_contenedor_logo_miguel_garcia {
	position: absolute;
    top: 3em;
    height: 3em;
    left: 75%;
}
.css_logo_miguel_garcia {
	width: auto;
	height: 100%;
}
/**********************************************************************************************************************
* MENU FLOTANTE
**********************************************************************************************************************/
.css_menu_flotante {
	position: absolute;
    display: inline-block;
    color: rgb(171, 44, 107);
}
.css_borde_menu_flotante {
	margin-top: 0.5em;
	padding: 0.5em;
	border-left: 0.5em solid rgb(171,44,107);
}
.css_opcion_menu_flotante {
	cursor: pointer;
    line-height: 200%;
    padding-left: 0.5em;
    padding-right: 0.5em;
	border-radius: 0.5em;
	opacity: 85%;
	background-color: white;
}
.css_opcion_menu_flotante:hover {
	opacity: 100%;
}
.css_opcion_menu_flotante.intermedia {
	margin-top: 0.5em;
}
.css_opcion_menu_flotante.ultima {
	margin-top: 0.5em;
}

/**********************************************************************************************************************
* MENU FLOTANTE MOBILE
**********************************************************************************************************************/
.css_menu_flotante_mobile {
	position: absolute;
    display: inline-block;
    color: rgb(171, 44, 107);
}
.css_menu_flotante_mobile#menu_principal {
	top: 13.5em;
	left: 1em;
}
.css_menu_flotante_mobile#menu_formacion {
	top: 13.5em;
	left: 1em;
}
.css_menu_formacion_mobile {
	margin-left: 2em;
}
.css_opcion_menu_flotante_mobile {
	width: 10em;
	font-size: 1.5em;
	cursor: pointer;
    line-height: 200%;
    padding-left: 0.5em;
    padding-right: 0.5em;
	border-radius: 0.5em;
	opacity: 85%;
	background-color: white;
}
.css_opcion_menu_flotante_mobile:hover {
	opacity: 100%;
}
.css_opcion_menu_flotante_mobile.intermedia {
	margin-top: 0.5em;
}
.css_opcion_menu_flotante_mobile.primera {
	margin-top: 0.5em;
}
.css_opcion_menu_flotante._mobileultima {
	margin-top: 0.5em;
}
/* BLOQUE opciones */
.opciones {
	text-align: left;
}
.opcion {
	display: inline-block;
	background-color: #f6e9f0;
	padding: 1%;
	text-align: center;
	width: 30%;
	margin-bottom: 1em;
	height: 8em;
	border-radius: 0.5em;
	box-shadow: 0.2em 0.2em rgba(85, 22, 53, 0.5);
	vertical-align: middle;
	font-size: 1.5em;
	color: rgb(171, 44, 107);
	cursor: pointer;
	text-decoration: none;
	margin-top: 0em;
}
.opcion#sobre_mi {
	background-image: url("../../imgs/miguel-garcia-piano-cola.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#el_aula {
	background-image: url("../../imgs/chico_joven.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#inscripcion {
	background-image: url("../../imgs/estudiante_piano.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#ubicacion {
	background-image: url("../../imgs/ubicacion.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#metodo {
	background-image: url("../../imgs/chico.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#herramientas {
	background-image: url("../../imgs/herramientas-clases-de-piano.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#opiniones {
	background-image: url("../../imgs/opiniones.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#preguntas_frecuentes {
	background-image: url("../../imgs/preguntas_frecuentes.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#precios {
	background-image: url("../../imgs/precios.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#contacto {
	background-image: url("../../imgs/contacto.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#operativa {
	background-image: url("../../imgs/operativa.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#blog {
	background-image: url("../../imgs/blog-profesor-clases-piano.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion#promociones {
	background-image: url("../../imgs/promociones.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.opcion:hover {
	background-color: #eed4e1;
}
.opcion.izquierda {
	margin-right: 1.5%;
}
.opcion.derecha {
	margin-left: 1.5%;
	margin-right: 1%;
}
.css_contenedor_otras_aulas {
	text-align: center;
}
.css_otras_aulas {
	color: white;
	text-align: center;
	font-size: 1em;
	font-weight: normal;
	cursor: pointer;
	border: 0.05em solid white;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border-radius: 0.5em;
}
.css_lugar_aula {
	text-align: center;
	color:white;
	font-weight:normal;
	font-size: 2em;
}
.css_lugar_aula a {
	color:white;
	text-decoration: none;
}
.css_mas_aulas {
	text-align: center;
    color: white;
    margin: auto;
	padding-bottom: 1em;
}
.css_otro_aula {
    padding-left: 0.5em;
    padding-right: 0.5em;
    /*background-color: blue;*/
	cursor:pointer;
	color: white;
	text-decoration: none;
}
.css_otro_aula:hover{
	background-color: #a36684;
}
.css_titulo_movil {
	display: none;
}
.css_color_logo {
	color: rgb(171, 44, 107);
}
.css_background_color_logo {
	background-color: rgb(171, 44, 107);
}
.css_titulo_sobre_foto {
	display: inline;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background-color: rgba(245, 245, 245, 0.8);
    border-radius: 0.2em;
    font-size: 1em;
    margin: 0px;
    font-weight: normal;
}
.css_titulo {
	text-align: center;
	font-size: 1em;
	margin-top: 1em;
}
.css_titulo .css_linea_arriba {
	font-size: 2.5em;
    color: rgb(171, 44, 107);
    margin-top: 0em;
    margin-bottom: 0em;
    font-weight: normal;
}
.css_titulo .css_linea_abajo {
	margin-top: 0.5em;
	font-size: 1.5em;
    margin-bottom: 0em;
    font-weight: normal;
}
.css_contenedor_menu_mobile {
	display: none;
}
.css_contenedor_texto_principal {
	position: absolute;
	top: 29em;
	width: 100%;
}
.css_botones#pie {
	text-align:center;
	background-color: rgb(245, 215, 230);
	
}
.css_boton#seguir_leyendo {
	text-decoration: none;
}
/**********************************************************************************************************************
*
* Desktop
*
**********************************************************************************************************************/
@media screen and (min-width: 640px) {
	.css_contenedor_texto_ayudo {
		position: absolute;
		top: 29em;
		width: 100%;
	}
	.css_botones#pie {
	text-align:center;
	background-color: rgb(245, 215, 230);
	
}
	.css_boton#seguir_leyendo {
		text-decoration: none;
	}
}
/**********************************************************************************************************************
*
* Tablets
*
**********************************************************************************************************************/
@media screen and (max-width: 800px) {

}
/***********************************************************************************************************************
*
* Dispositivos móviles 
*
**********************************************************************************************************************/
@media screen and (max-width: 640px) {
	.css_botones#pie {
		text-align:center;
		background-color: rgb(245, 215, 230);
		margin-top: 1em;
		padding-top: 2em;
		padding-bottom: 2em;
		font-size: 4.5vw;
	
	}
	.css_boton#seguir_leyendo {
		text-decoration: none;
	}
	.css_contenedor_texto_ayudo {
		width: 100%;
	}
	.bloque#bloque_7verdades .columna_bloque.izquierda {
		width: 1%;
	}
	.bloque#bloque_7verdades .columna_bloque.centro {
		width: 98%;
	}
	.bloque#bloque_7verdades .columna_bloque.derecha {
		width: 1%;
	}
	.css_cinta_superior {
		display: none;
	}
	.css_contenedor_logo_miguel_garcia {
		position: absolute;
		top: 1em;
		left: 0%;
		width: 100%;
	}
	.css_logo_miguel_garcia {
		margin-left: 10%;
		width: 80%;
		height: auto;
	}
	.css_contenedor_menu_mobile {
		display: block;
		position: absolute;
		top: 9em;
		left: 1em;
		width: 4em;
	}
	.css_logo_menu_mobile {
		margin-left: 0%;
		width: 100%;
		height: auto;
	}
	.css_contenedor_logo {
		width: 180%;
		margin-top: 8em;
	}
	.css_contenedor_texto_principal {
		top: 34em;
	}
	.css_texto_principal {
		width: 60%;
	}
	/**********************************************************************************************************************
	* VARIOS MOVIL
	**********************************************************************************************************************/
	.css_otras_aulas {
		font-size: 1.5em;
		width: 50%;
	}
	.css_otro_aula {
		font-size: 1.5em;
		display: block;
	}
	.css_titulo {
		display: none;
	}
	.css_titulo_movil {
		display: block;
		text-align: center;
		font-size: 3vw;
		margin-top: 1em;
		color: white;
		margin-bottom: 2em;
		padding-left: 4%;
		padding-right: 4%;
	}
	.css_titulo_movil .css_linea_abajo {
		margin-top: 0.5em;
		font-size: 1.8em;
		font-weight: normal;
	}
	.css_titulo_movil .css_linea_arriba {
		font-size: 2.5em;
		font-weight: normal;
	}
	.opciones {
		text-align: center;
	}
	.opcion {
		width: 90%;
		height: 9em;
		padding-top: 5.5em;
		margin-top: 0em;
	}
	.opcion.izquierda {
		margin-right: 0%;
	}
	.opcion.derecha {
		margin-left: 0%;
		margin-right: 0%;
	}
	.css_titulo_sobre_foto {
		font-size: 2em;
	}
	.css_texto_a_mano {
		font-size: 2em;
	}
	.css_texto_clases_piano {
		font-size: 1.5em;
	}
}