@charset "utf-8";
/* CSS Document */

.papel {
	display: 			block;
	position: 			relative;
	color: 				var(--deg1);
	text-align: 		left;
	text-align:			justify;  
	text-justify:		auto;
	line-height: 		1.6;
	padding: 0% 20%;
	background-color:   var(--deg3);
	overflow: 			scroll;
}

#texto {
	min-height: 		74vh;
}

.titulo{
	position: 				relative;
	text-align:				center;
	font-size:				larger;	
	font-weight:			bold;
	/*padding:				1%;	*/
}
.subtitulo{
	text-align:				center;
}
.toc1{
	position: 				relative;
	margin:					1% 16%;
	padding:				1%;
	user-select: 			none;
	-webkit-user-select: 	none;
	-moz-user-select: 		-moz-none;
	text-align: 			left;
	cursor: 				pointer; 
	border-bottom: 			1px dotted var(--deg1);
}

.toc2{
	position: 				relative;
	margin:					1% 20%;
	text-align: 			left;
}

.botonera{
	display: 				flex;
	position: 				sticky;
	z-index: 				5;
	top: 					0;
	left: 					0%;
	right:        			0%;
	flex-wrap: 				wrap;
	flex-flow: 				row;
	justify-content: 		center;
	padding: 				0.5%;
	user-select: 			none;
	-webkit-user-select: 	none;
	-moz-user-select: 		-moz-none;
	box-shadow: 			0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color:  		var(--deg);
}

.botonGroup {
	display: 				flex;
	/*border: 				1px solid grey;*/
	flex-wrap: 				wrap;
	flex-flow: 				row;
	justify-content: 		space-evenly;
	margin: 				.5%;
	width: 					100%;
}

.botonGroup > div {
	display:			inline-block;
	background-repeat:	no-repeat;
	background-position:center;
	background-size:	21px;
	padding: 			1%;
	width: 				20px;
	cursor: 			pointer;
	box-shadow: 			0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 		50%;
}

.botonGroup > div::before {
	content:      		"\200B";
}

#botonFloat {
	display: 				flex;
	position: 				fixed;
	bottom:  				70px;
	/*border: 				1px solid grey;*/
	flex-wrap: 				wrap;
	flex-flow: 				column;
	justify-content: 		space-evenly;
	margin: 				.5% auto auto -15px;
	width: 					50px;
	font-size: 				larger;
	transition: 			all ease 1s;
	height: 				0;
	overflow: 				hidden;
	z-index: 				-1;
}

#botonFloat > i {
	border-radius: 			50%;
	padding: 				10px;
	margin: 			    5px;
	background-origin: 		content-box;
	width: 					20px;
	height: 				20px;
/*	box-shadow: 			0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	background-color:  		lightsteelblue;
}

.boton {
	text-align: 			center;
	padding:				.5%;
	margin:					.5%;
	width:					25px;
	line-height: 			1.6;
	cursor: 				pointer;
}

.botonBorderL {
	display: 				flex;
	flex-wrap: 				wrap;
	flex-flow: 				row;
	justify-content: 		space-evenly;
	border-left: 			1px solid grey;
	margin: 				.5%;
	width: 					100%;
}

.botonBorderL > i {
	padding: 				10px;
	background-origin: 		content-box;
	background-color: 		lightgray;
	border-radius: 			50%;
	background-size:		contain;
	width: 					20px;
	height: 				20px;
}

.close {
	display:			inline-block;
	background-image: 	url(../imgs/borrar.png);
	background-repeat:	no-repeat;
	background-position:left;
	background-size:	21px;
	background-size:	contain;
	width: 				30px;
	cursor: 			pointer;
	position: 			absolute; 
	top: 				13px;
	right:				0;
	filter: 			invert();
}
.close::before{
	content:      		"\200B";
}

.fb {
	background-image: 	url(../imgs/fb-line.png);
}

.tw {
	background-image: 	url(../imgs/tw.png);
}

.wp {
	background-image: 	url(../imgs/wp-line.png);
}

.email {
	background-image: 	url(../imgs/email.png);
}

.fs {
	background-image: 	url(../imgs/fs.png);
}

.nofs {
	background-image: 	url(../imgs/nofs.png);
}

.pdf {
	display:			inline-block;
	background-image: 	url("../imgs/pdf.png");
	background-repeat:	no-repeat;
	background-position:left;
	background-size:	21px;
	background-size:	contain;
	width: 				30px;
	cursor: 			pointer;
}
.pdf::before{
	content:      		"\200B";
}

#share {
	display:			inline-block;
	background-image: 	url("../imgs/share.png");
	background-repeat:	no-repeat;
	background-position:left;
	background-size:	21px;
	background-size:	contain;
	cursor: 			pointer;
}
#share::before{
	content:      		"\200B";
}

.fontUp {
	display:			inline-block;
	background-image: 	url("../imgs/font-Up.png");
	background-repeat:	no-repeat;
	background-position:left;
	background-size:	21px;
	background-size:	contain;
	width: 				30px;
	cursor: 			pointer;
}
.fontUp::before{
	content:      		"\200B";
}

.fontDown {
	display:			inline-block;
	background-image: 	url("../imgs/font-Down.png");
	background-repeat:	no-repeat;
	background-position:left;
	background-size:	21px;
	background-size:	contain;
	width: 				30px;
	cursor: 			pointer;
}
.fontDown::before{
	content:      		"\200B";
}

.indice {
	display:			inline-block;
	background-image: 	url("../imgs/indice-line.png");
	background-repeat:	no-repeat;
	background-position:left;
/*	background-size:	21px;
	background-size:	contain;
	width: 				30px;*/
	cursor: 			pointer;
}
.indice::before{
	content:      		"\200B";
}

.home {
	display:			inline-block;
	background-image: 	url("../imgs/inicio.png");
	background-repeat:	no-repeat;
	background-position:left;
/*	background-size:	21px;
	background-size:	contain;
	width: 				30px;*/
	cursor: 			pointer;
}
.home::before{
	content:      		"\200B";
}

.facebook {
	font-weight: 			normal;
	font-family: 			verdana;
}

.twitter {
	font-weight: 			normal;
	font-family: 			verdana;
}

.tapa {
	width: 	70%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pietxt {
	display: 			flex;
	flex-flow: 			row wrap;
	justify-content: 	flex-end;
	border-top: 		1px dotted var(--deg1);	
	padding-top: 		1%;
	width: 				100%;
	margin: 			auto 0 100px 0;
	user-select: 		none;
	text-align: 		center;
}

.modal {
	display: 				block;
	position: 				absolute;
	z-index: 				20;
	bottom: 				30%;
	left: 					-250px;
	width: 					230px;
	height: 				420px;
	padding: 				0.5%;
	user-select: 			none;
	-webkit-user-select: 	none;
	-moz-user-select: 		-moz-none;
	box-shadow: 			0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: 		rgba(255,255,255,.9);
	border-radius: 			4px;
	touch-action: 			none;
	transition: 			transform 1s ease .5s;
}

.helpTxt {
	display: 				flex;
	flex-flow: 				column nowrap;
	align-items: 			stretch;
	justify-content: 		flex-start;
	color: 					var(--deg1);
	font-family:  			"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 				13px;
}

.helpTxt > div{
	width: 					68%;
	text-align: 			left; 
	padding: 				2% 0% 2% 20%;
	margin: 				3% 2% 3% 30px;
	border-bottom:  		1px dotted var(--deg1);
	background-size:		contain;
}


.tool {
	display: 			block;
	position: 			absolute;
	top: 				3vh;
	left: 				22%;
	z-index: 			1;
	width: 				20px;
	height: 			20px;
	padding: 			10px;
	cursor: 			pointer;
	background-image: 	url("../imgs/conf.png");
	background-size: 	contain;
	background-repeat: 	no-repeat;
	background-origin: 	content-box;
	border-radius: 		50%;
	background-color: 	lightgray;
}

.night {
	display: 				none;
}

#next {
	display: 				block;
	position: 				fixed;
	top: 					50%;
	right: 					22%;
	width: 					20px;
	cursor: 				pointer;
	/*vertical-align: 		middle;*/
}

#prev {
	display: 				block;
	position: 				fixed;
	top: 					50%;
	left: 					22%;
	width: 					20px;
	cursor: 				pointer;
	/*vertical-align: 		middle;/*/
	transform: 				rotate(180deg);
}

.textBlock {
	display: 				block;
}

.textNone {
	display: 				none;
}

@media all and (orientation: portrait) {
	#texto {
		min-height: 		70vh;
	}
	.papel {
		margin: 			0;
		padding: 			5%;
	}
	.toc1 {
		margin:				1% 4%;
	}
	.toc2{
		margin:				1% 8%;
	}
	.botonera{
		left: 				0%;
		right:        		0%;
	}
	.botonGroup{
		width:  			100%;
	}
	.tapa {
		width: 				90%;
	}
	.modal {
		height: 			380px;
		bottom: 			20%;
	}
	.close {
		top: 				6px;
	}
	
	.night {
		display: 			block;
		position: 			absolute;
		top: 				4vh;
		right: 				2vw;
		z-index: 			1;
		width: 				50px;
		height: 			50px;
		background-image: 	url("../imgs/night-on.png");
		background-size: 	contain;
		background-repeat: 	no-repeat;
	}
	
	.tool {
		left: 				4vw;
	}

	#botonFloat {
		bottom:  			55px;
	}
	
}