/*Generico*/

.right{
	text-align: right;
}

.nuevo:after{
	content: "NUEVO";
	padding: 1px 3px;
	border-radius: 2px;
	font-size: 8px;
	background: red;
	color: white;
	vertical-align: top;
}

/*Interfaz principal*/


body{
	background-size: cover;
	color: #4D4D4D!important;
}

#yelmo{
    position: relative;
    width: 100%;
    text-align: center;
    padding-top: 13px;
}

	#yelmo img{
	    width: 115px;
    	display: inline-block;
	}

	#yelmo div{
	    position: absolute;
	    top: 23px;
	    width: 80%;
	    margin-left: 10%;
	    height: auto;
	    display: flex;
	    justify-content: center;
	    font-size: 25px;
	    font-weight: bold;
	    line-height: 27px;
	    color: white;
	    text-shadow: 0 1px 10px rgba(0,0,0,.6);
	}

#corazon{
    background: url(../img/corazon.svg) no-repeat center center;
    width: 210px;
    height: 181px;
    /*background-size: contain;*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -84px;
    margin-left: -105px;
    text-align: center;
    line-height: 0px;
    z-index: 2;
    color: white;
}

	#corazon.roto{
		background: url(../img/corazon-roto.svg) no-repeat center center;
	}
	#corazon.sanando0{
		background: url(../img/corazon-sanando0.svg) no-repeat center center;
	}
	#corazon.sanando1{
		background: url(../img/corazon-sanando1.svg) no-repeat center center;
	}
	#corazon.sanando2{
		background: url(../img/corazon-sanando2.svg) no-repeat center center;
	}
	#corazon.sanando3{
		background: url(../img/corazon-sanando3.svg) no-repeat center center;
	}

	#corazon h1{
	}

	#corazon label{
	}

	#corazon ul{
		padding: 0;
		margin: 0;
		height: 181px;
		display: flex;
		justify-content: center;
		align-items: center;
		list-style: none;
		margin-top: -3px;
	}

		#corazon ul li{
			height: auto;
		}

	#corazon h1{
	    font-size: 105px;
	    font-weight: normal;
	    margin: 0;
	    line-height: 77px;
	    padding-top: 5px;
	    padding-bottom: 7px;
	}

	#corazon label{
		font-size: 20px;
		margin: 0;
		display: block;
		line-height: 17px;
	}


#espada{
    position: absolute;
    bottom: 30px;
    left: 12px;
    width: calc(100% - 24px);
    height: 190px;
    line-height: 19px;
    background: rgba(255,255,255,0.8);
    padding: 0;
    border-radius: 7px;
    color: black;
}

	#espada .holder{
		position: relative;
		height: 100%;
	}

		#espada img{
		    position: absolute;
		    top: -23px;
		    border: 9px solid white;
		    border-bottom: none;
		    border-top: none;
		    width: 80%;
		    margin-left: 10%;
    		background: white;
		}

		#espada .citaBiblica{
			padding: 5px 10px 5px;
			text-align: center;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			font-size: 16px;
			position: relative;
			/* border: 1px solid #e80032; */
			border-radius: 4px;
		}

			#espada .citaBiblica p{
				margin: 0!important;
			}

			#espada .citaBiblica strong{
				color: #e80032;
			}

.zona-click{
	width: 100%;
	height: calc(100% - 45px);
	position: absolute;
	top: 45px;
	left: 0;
	z-index: 3;
	display: none;
}


/* Menu */

#menu{width: 50px;height: 50px;background: #e80032;color: white;border-radius: 50%;font-size: 30px;position: fixed;bottom: 10px;right: 10px;text-align: center;line-height: 50px;z-index: 1;box-shadow: 2px 2px 10px rgba(0,0,0,0.2);}

#menu-display{position: absolute;background: white;list-style: none;margin: 0;padding: 6px 16px 5px 9px;min-width: 170px;bottom: 67px;right: 11px;z-index: 2;border-radius: 7px;box-shadow: 2px 2px 10px rgba(0,0,0,0.2);display: none;}

#menu-display li{
	font-size: 18px;
	display: block;
	padding: 6px 0;
}

#menu-display li i{
	font-size: 22px;
	width: 28px;
	text-align: center;
	position: relative;
	top: 1px;
}

	#menu-display li i span{
		display: block;
    position: absolute;
    min-width: 18px;
    height: 18px;
    background: red;
    color: white;
    font-family: arial;
    font-size: 14px;
    border-radius: 50%;
    top: -10px;
    right: -9px;
    text-align: center;
    line-height: 17px;
    padding: 1px 5px;
	}

.desplegado .close{
	position: absolute;
	top: -9px;
	right: -9px;
	width: 30px;
	height: 30px;
	background: #e80032;
	z-index: 2;
	opacity: 1;
	border-radius: 50%;
	text-align: center;
	line-height: 28px;
	font-size: 17px;
}

.desplegado .close i{text-shadow: none;color: white;line-height: 30px;}

/* Pop up style */

.desplegado.popup-style{
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: transparent;
}

.desplegado .shade{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.3);
}

.popup{
	background: white;
	display: inline-block;
	padding: 10px;
	border-radius: 9px;
	position: relative;
	min-width: 320px;
	width: calc(100% - 20px);
}

.popup li{
	margin-bottom: 8px;
	font-size: 18px;
	line-height: 20px;
}

.popup li:last-child{
	margin-bottom: 0;
}

.boton.superior{
    position: absolute;
    top: 0px;
    right: 0;
    font-size: 22px;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 1px;
    border-radius: 50%;
    z-index: 1;
    line-height: 36px;
    color: white;
    text-shadow: 0 1px 10px rgba(0,0,0,.6);
}


/*Playlist*/
.listaRecursos{
    list-style: none;
    padding: 8px 14px 14px;
    margin: 0;
    line-height: 32px;
    font-size: 16px;
    overflow: auto;
    max-height: calc(100vh - 90px);
}
.listaRecursos li a{
	color: #333;
	text-decoration: none;
	font-size: 16px;
	width: 100%;
	display: block;
}
.listaRecursos .current a{
    color: #d00202;
}

.opciones{
    margin-bottom: -12px;
    text-align: right;
    padding-right: 12px;
    margin-top: 1px;
    font-size: 12px;
}

.opciones .boton{
	display: inline-block;
	padding: 5px;
}

	.opciones .boton.activo{
		color: #d00202;
	}

.desplegado{
	position: absolute;
	width: calc(100% - 20px);
	margin-left: 10px;
	padding: 0;
	background: white;
	z-index: 5;
	border: 1px solid #DDDDDD;
	top: 17px;
	box-shadow: 0 4px 30px rgba(0,0,0,.3);
	margin-bottom: 11px;
	border-radius: 9px;
}
.desplegado:before {
	content: "";
	width: 10px;
	height: 10px;
	background: white;
	border: 1px solid #DDDDDD;
	border-right: none;
	border-bottom: none;
	position: absolute;
	margin-left: -7.5px;
	top: -5px;
	transform: rotate(45deg);
	display: none;
}
#desplegadoVideos.desplegado:before {
	right: 38px;
}
#desplegadoBiblia.desplegado:before {
	right: 247px;
}
#desplegadoFotos.desplegado:before {
	right: 4px;
}
#desplegadoJuegos.desplegado:before {
	right: 72px;
}
#desplegadoEstatus.desplegado:before {
	right: 280px;
}
#desplegadoEstadisticas.desplegado:before {
	right: 247px;
}
#desplegadoFechas.desplegado:before {
	right: 211px;
}
#desplegadoBoda.desplegado:before {
	right: 141px;
}
#desplegadoAfirmaciones.desplegado:before {
	right: 106px;
}
#desplegadoServer.desplegado:before {
	right: 176px;
}

.desplegado .proximamente{
    margin: 60px 30px;
    text-align: center;
    color: red;
}

/*Desplegado Biblia*/

#desplegadoBiblia ul{
	height: 40px;
	overflow: auto;
	white-space: nowrap;
}

	#desplegadoBiblia li{
	    float: none;
	    display: inline-block;
	    border-right: 1px solid lightgray;
	    padding: 0;
	    width: 34px;
	    height: 39px;
	    text-align: center;
	}


		#desplegadoBiblia li a{
			padding: 0;
			color: #4D4D4D;
			margin: 0 0 0 -3px;
			border-radius: 0;
			height: 37px;
			line-height: 38px;
			border: none;
		}
		#desplegadoBiblia li.active a{
			border: none;
			color: #e80032;
		}


	#desplegadoBiblia .tab-pane{
	    padding: 5px 15px 5px;
	}


/*Desplegado Afirmaciones*/

#desplegadoAfirmaciones form{
	padding: 8px 14px 12px;
	border-bottom: 1px solid lightgray;
}

#desplegadoAfirmaciones textarea{
    padding: 5px 10px;
}

#desplegadoAfirmaciones .listaRecursos h5{
	margin-bottom: 0;
}

#desplegadoAfirmaciones .listaRecursos h5.el{
	color: #064c9a;
}
#desplegadoAfirmaciones .listaRecursos h5.ella{
	color: #f50570;
}

#desplegadoAfirmaciones .listaRecursos p{
	line-height: 15px;
    padding-top: 4px;
}

#desplegadoAfirmaciones .caracteres{
	margin-bottom: 0;
}

	#desplegadoAfirmaciones .contador{
		margin-top: 2px;
	}


/*Desplegado Boda*/

#desplegadoBoda.desplegado img,
#desplegadoFechas.desplegado img,
#desplegadoBebeleche.desplegado img{
	width: 100%;
	position: relative;
	z-index: 1;
	border-radius: 9px 9px 0 0;
}

#desplegadoBoda.desplegado .contenedor,
#desplegadoBebeleche.desplegado .contenedor{
	padding: 0px 30px 30px;
	text-align: center;
}

#desplegadoBoda.desplegado .contenedor > div,
#desplegadoBebeleche.desplegado .contenedor > div{
	font-size: 20px;
}

#desplegadoBoda.desplegado .contenedor i,
#desplegadoBebeleche.desplegado .contenedor i{
    padding-top: 18px;
    display: block;
}

/*Desplegado Estadisticas*/
#desplegadoEstadisticas{
	padding: 15px;
}

#desplegadoEstadisticas .estadisticas{
	text-align: center;
}

	#desplegadoEstadisticas .estadisticas .etiqueta{
		font-weight: bold;
	}

	#desplegadoEstadisticas .estadisticas .col{
		padding: 0 10px;
		text-align: center;
		display: inline-block;
		width: calc(50% - 3px);
	}

		#desplegadoEstadisticas .estadisticas .col .totalDias{
			font-size: 40px;
			height: 42px;
			line-height: 44px;
		}
		#desplegadoEstadisticas .estadisticas .col.pecado .totalDias{
			color: red;
		}

		#desplegadoEstadisticas .estadisticas .col .porcentaje{
			padding: 5px 0 14px;
			line-height: 14px;
			color: gray;
		}



/*desplegado Fechas*/

#desplegadoFechas li{
	line-height: 15px;
	margin-bottom: 15px;
	font-size: 14px;
}

	#desplegadoFechas li span{
		font-size: 16px;
		color: #de0f03;
		padding-top: 4px;
		display: inline-block;
	}


/*Desplegado Estatus*/

#desplegadoEstatus.desplegado{
	padding: 40px 0;
	text-align: center;
}

	#desplegadoEstatus.desplegado img{
		margin: 0 10px;
		width: 100px;
	}

.desplegado audio{
	width: 100%;
}


.quitar-desplegado{
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: 4;
	top: 0;
    left: 0;
    /*background-color: blue;
    opacity: .5;*/
}

label.version{
    position: absolute;
    top: 0px;
    left: 2px;
    font-size: 12px;
    color: white;
    text-shadow: 0 1px 5px rgba(0,0,0,0.9);
    z-index: 1001;
}

/*Fotos*/

#desplegadoFotos .contenedor{
	text-align: center;
    width: 100%;
    padding-top: 10px;
    margin-bottom: 6px;
}

	#desplegadoFotos img{
		width: 100%;
	    max-width: 300px;
	}

	#listaFotos{
		max-height: 141px;
	    overflow: auto;
	    padding-top: 0;
	    padding-bottom: 0;
	    margin-bottom: 12px;
	}

/*Juegos*/

 .labelProximamente:after{
	content: "PROXIMAMENTE";
	padding: 1px 3px;
	border-radius: 2px;
	font-size: 8px;
	background: red;
	color: white;
	vertical-align: top;
}

.encuentraDiferencias{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1001;
	background: black;
}
	.encuentraDiferencias .holder{
		width: 320px;
	    height: 560px;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    margin-left: -160px;
	    margin-top: -280px;
	}

	.encuentraDiferencias img{
    	width: 100%;
 }

	.encuentraDiferencias .cerrar{
		position: absolute;
		top: 5px;
		right: 5px;
		color: white;
		padding: 0;
		z-index: 10;
		background: #e80032;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		font-size: 20px;
		text-align: center;
		line-height: 31px;
	}

	.encuentraDiferencias .target{
		/* background: rgba(255,0,0,0.5); */
		min-width: 10px;
		min-height: 10px;
		position: absolute;
		z-index: 4;
		border-radius: 4px;
	}
	.encuentraDiferencias .target.selected{
		border: 2px solid red;
	}


	.encuentraDiferencias .completado{
	    position: absolute;
	    z-index: 5;
	    top: 259px;
	    left: 5px;
	    color: #ff7a00;
	    font-size: 20px;
	    background: #ffffff;
	    border-radius: 6px;
	    padding: 4px 9px;
	    font-weight: bold;
	    box-shadow: 0 0 10px grey;
	    display: none;
	    width: calc(100% - 9px);
	    text-align: center;
	}

	/*Leon kroger*/
	#leon-kroger #target1{
		bottom: 130px;
    left: 113px;
    width: 37px;
    height: 20px;
	}
	#leon-kroger #target2{
		bottom: 216px;
    left: 130px;
    width: 65px;
    height: 33px;
	}
	#leon-kroger #target3{
		width: 24px;
		top: 374px;
		left: 270px;
		height: 49px;
	}
	#leon-kroger #target4{
	    top: 372px;
	    left: 22px;
	    height: 16px;
	    width: 19px;
	}
	#leon-kroger #target5{
		top: 299px;
		height: 25px;
		left: 248px;
		width: 30px;
	}

/*patos*/
#patos #target1{
	left: 84px;
	top: 377px;
	width: 72px;
	height: 37px;
}
#patos #target2{
	top: 342px;
	left: 165px;
	height: 26px;
	width: 32px;
}
#patos #target3{
	width: 34px;
	top;
	top: 356px;
	left: 247px;
	height: 40px;
}
#patos #target4{
    top: 450px;
    left: 170px;
    height: 20px;
    width: 34px;
}
#patos #target5{
	top: 485px;
    height: 74px;
    left: 177px;
    width: 128px;
}

/*zoo*/
#zoo #target1{
	left: 0px;
	top: 430px;
	width: 92px;
	height: 130px;
}
#zoo #target2{
	top: 282px;
	left: 84px;
	height: 63px;
	width: 78px;
}
#zoo #target3{
	width: 42px;
	top: 420px;
	left: 161px;
	height: 27px;
}
#zoo #target4{
    top: 455px;
    left: 124px;
    height: 106px;
    width: 30px;
    transform: rotate(-26deg);
}
#zoo #target5{
	top: 470px;
	height: 89px;
	left: 265px;
	width: 55px;
}

/*metro*/
#metro #target1{
	left: 0px;
	top: 418px;
	width: 121px;
	height: 141px;
}
#metro #target2{
	top: 450px;
	left: 123px;
	height: 81px;
	width: 111px;
}
#metro #target3{
	width: 24px;
	top: 356px;
	left: 255px;
	height: 54px;
}
#metro #target4{
    top: 294px;
    left: 111px;
    height: 26px;
    width: 147px;
    transform: rotate(-188deg);
}
#metro #target5{
	top: 539px;
	height: 20px;
	left: 125px;
	width: 33px;
}

/*el amor*/
#elamor #target1{
	left: 35px;
	top: 152px;
	width: 27px;
	height: 228px;
}
#elamor #target2{
	top: 388px;
	left: -25px;
	height: 28px;
	width: 274px;
	transform: rotate(-225deg);
}
#elamor #target3{
	width: 171px;
	top: 451px;
	left: 137px;
	height: 28px;
	transform: rotate(-135deg);
}
#elamor #target4{
    top: 217px;
    left: 49px;
    height: 27px;
    width: 272px;
    transform: rotate(-135deg);
}
#elamor #target5{
	top: 105px;
	height: 28px;
	left: 109px;
	width: 176px;
}





/*Password*/

#password{
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: #e80032;
	z-index: 1000;
}

	#password ul{
		padding: 0;
		margin: 0;
		width: 300px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -150px;
	}

		#password li{
			width: 70px;
			height: 50px;
			font-size: 35px;
			background: white;
			color: #e90132;
			display: inline-block;
			margin: 0 2px 10px;
			line-height: 48px;
		}

	#password img{
		width: 130px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -65px;
		margin-top: -200px;
	}


/* letter */

#letters li small{
	font-size: 12px;
	color: #a3a3a3;
	display: block;
	line-height: 13px;
	margin-bottom: 3px;
}

#letterReader{
	width: 100%;
	top: 0;
	margin: 0;
	border-radius: 0;
	padding: 29px;
	min-height: 100vh;
	font-family: 'Bad Script', cursive;
	font-size: 24px;
	line-height: 34px;
}

#letterReader h4{font-size: 24px;margin-top: 8px;line-height: 29px;}

#letterReader .date{
	margin-top: -10px;
	margin-bottom: 17px;
	font-size: 18px;
}

#letterReader .close{
	top: 10px;
	right: 10px;
	line-height: 32px;
	position: fixed;
}

.handmade-letter{
  width: calc(100% + 60px);
  margin-left: -30px;
  margin-top: -117px;
}

#letterEditor .title{
	border-radius: 0;
  border: 0;
  border-bottom: 1px solid lightgray;
}

#letterEditor .message{
	width: 100%;
  top: 0px;
  margin: 0px;
  height: calc(100% - 97px);
  margin-bottom: 9px;
  display: block;
  resize: none;
  border: none;
  border-radius: 0;
}

#letterEditor button{
	margin-right: 10px;
}

/* Muro amor */

#muroAmor{
	padding: 20px;
	top: 0;
	margin-left: 0;
	width: 100%;
	padding-top: 50px;
	margin-bottom: 0;
	border-radius: 0;
}

#muroAmor .close{
	top: 10px;
    right: 10px;
    line-height: 32px;
    position: fixed;
}

#muroAmor ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#muroAmor ul li{
	text-align: center;
}

#muroAmor ul li img{
	border: 6px solid white;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
}

#muroAmor ul li img.horizontal{
	width: 320px;
}

#muroAmor ul li img.vertical{height: 320px;width: auto;}

#muroAmor ul li label{
	width: 100%;
	margin-top: 7px;
	margin-bottom: 20px;
}


/* Drawings */

#drawing .holder{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

#drawing .holder img{
	width: 100%;
}

.desplegado.full-screen{
	background: white;
	width: 100%;
	top: 0px;
	margin: 0px;
	height: 100vh;
	display: block;
	border-radius: 0;
}

.desplegado.full-screen .close {
    top: 10px;
    right: 10px;
    line-height: 32px;
    position: fixed;
}