* {
	margin:0;
	padding:0;
	font-size:1em;
	
}


body{
	background-color: #f3f3c2;
	font-family: 'Comfortaa', cursive;

}

p{
	font-family: 'Comfortaa', cursive;
}

 .navbar{
    background-color: #5a2899;
    text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);
  }

/* Inicio bloque de los precios */

/*.titulo{
	font-family: Roboto,sans-serif!important;
	font-size: 20px;
}*/


	.sombra {
		box-shadow: 10px 10px 20px 0 #dfdfdf;

	}
	.tarjeta-sup {
		font-family: 'Comfortaa', cursive;
		font-weight: 100;
		font-size:1.1em;
		display:flex;
		height: 50px;
		background-color: #c12422;
		color:white;
		border-top-left-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		justify-content: center;
		align-items: center;

	}
	.tarjeta-inf {
		display:flex;
		height: 150px;
		font-family: 'Comfortaa', cursive;
		font-weight: 100;
		font-size:1.3em;
		background-color: white;
		color:#c12422;
		border-bottom-left-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		justify-content: center; /* centra en el centro lo que hay dentro de la clase con display:flex */
		align-items: center; /* centra lo que hay dentro de la clase con display:flex */;
		text-align: center;
		flex-direction: column; /* los elementos que hay dentro de flex los convierte en columnas (en este caso 3 elementods de parrafo, que en condiciones normales harían un salto de linea, con flex se comportan como un float:left, por lo que hay que indicarle la direccion. Para que hagan el salto de linea hay que indicarlo con flex-directio:column; */

	}

	.tarjeta-inf p{
		line-height: 10px;
		font-family: 'Comfortaa', cursive;
		font-weight: 100;
	}

	.tarjeta-inf p:nth-child(3){
		font-size: 1.5em;
		line-height: 30px;
	}
	.comprarMinutos button  {
		width: 100%;
	}


/* fin bloque precios */





/* pie fijo */

.pie{
	 display:table;
	 margin:auto;
	 background-color: #42469a;
	 /*background-color: #d2aa30;*/
	 position: fixed;
	 bottom: 0;
	 width: 100%;
	 height: 50px;
	 color: white;
	 text-align: center;

}





.letras3{
	font-family: 'Kavivanar', cursive;
	font-size: 1.5em;
	}


.celdas{
	display: table-cell;
	border: solid 1px white;
	text-align: center;
	vertical-align: middle;
}


.enlaceTelefono{
	text-decoration: none;
	color:white;
}


/* fin pie fijo */




/* aqui empiezan los media querys */


@media screen and (max-width: 5000px) {
.bruja{

	max-width: 100%;
	background: url("../img-movil/fotoCabeza.png") no-repeat top center;
	background-size: cover;
	height: 164px;

}

.cabeza {
	margin:auto;
	margin-top:50px;
	max-width: 1000px;
	
}

.fotoLetras{
	width: 45%;
	padding-top: 10px;
}


.telefono {
	font-size:2.8em;
	font-weight: 900;
	color:white;
	
	text-align: right;
	margin-top: -100px;
	margin-right:50px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);
}

.leyenda{
	font-size:1em;
	line-height: 1em;
	margin-top:-9px;
	margin-right:50px;
	color:white;
	
	text-align: right;
	margin-top:-8px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);

}

}

@media screen and (max-width: 700px) {
.cabeza {
	margin-top:56px;
}
.bruja{

	max-width: 100%;
	background: url("../img-movil/fotoCabezaMovil.jpg") no-repeat top center;
	background-size: cover;
	height: 200px;
}

.fotoLetras{
	width: 55%;
	padding-top: 10px;
}


.telefono {
	font-size:2.8em;
	font-weight: 900;
	color:white;
	margin:auto;
	text-align: center;
	margin-top: 15px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);
	visibility: hidden;
}

.leyenda{
	font-size:1em;
	line-height: 1em;
	margin-top:-9px;
	color:white;
	margin:auto;
	text-align: center;
	margin-top:-8px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);
	visibility: hidden;

}

.navbar-light .navbar-brand{
	color:white;
}
.nav-link:hover{
	background-color: gray;
}

}

@media screen and (max-width: 650px) {



.telefono {
	font-size:2em;
	font-weight: 900;
	color:white;
	margin:auto;
	text-align: center;
	margin-top: 10px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);
	visibility: visible;

}

.leyenda{
	font-size:1em;
	line-height: 1em;
	margin-top:-9px;
	color:white;
	margin:auto;
	text-align: center;
	margin-top:-8px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);
	visibility: visible;

}




	}



@media screen and (max-width: 450px) {
.cabeza {
	margin-top:56px;
}
.bruja{

	max-width: 100%;
	background: url("../img-movil/fotoCabezaMovil.jpg") no-repeat top center;
	background-size: cover;
	height: 200px;
}

.fotoLetras{
	width: 55%;
	padding-top: 10px;
}


.telefono {
	font-size:2.8em;
	font-weight: 900;
	color:white;
	margin:auto;
	text-align: center;
	margin-top: 15px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);
}

.leyenda{
	font-size:1em;
	line-height: 1em;
	margin-top:-9px;
	color:white;
	margin:auto;
	text-align: center;
	margin-top:-8px;
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.99);

}

.navbar-light .navbar-brand{
	color:white;
}
.nav-link:hover{
	background-color: gray;
}

}


@media screen and (max-width: 380px) {

.tarjeta-sup{
	font-size:1em;
}
.tarjeta-inf{
	font-size:1em;
}

}