*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

/*================================imágenes disponibles============================
maguey: https://live.staticflickr.com/65535/55116171375_612bb122e2_h.jpg
bosque: https://live.staticflickr.com/65535/55100350968_15d2236cc5_o.jpg
islote: https://live.staticflickr.com/65535/55100323938_fed106ed87_b.jpg
==================================================================================*/

/*================ reset/cleanup of browser css =============*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
// h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym {border:0;}
// body{font-size:12px;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
// pre, code {font:115% monospace;*font-size:100%;}

/*================ estilos basicos ================*/

body{
	background:#1a1a1a;
	margin:0;
	padding:0;
	font-family: courier new;
}
@supports (-webkit-touch-callout: none) {body{min-width:820px;}}

#anaquel{
	max-width: 100%;
	margin:0px;
	overflow:auto;
	padding:0px;
}
#libro{
	margin:auto;
	padding:0;
	max-width:760px;
}
.panel{
	background:#999; /* color claro */
	// background:#0c0c0c; /* color oscuro */
	margin:40px 0 40px 0;
	padding:40px 0px 120px 100px;
	//width:760px;
}
h1{
	margin:0px;
	padding:0px;
	color:#222;
	font-weight: normal;
}
h2{
	margin:0px;
	padding:0px;
	color:#333;
	font-weight: normal;
}
h4{
	color:#222;
	margin:0px;
	padding:0px;
	font-weight: normal;
}
p{
	color:#222;
	font-size: 0.9em;
	margin:0 90px 0 0;
	padding:20px 0px 20px 0px;
	font-family: courier new;
}
pre{
	font-size: 1em;
	tab-size:6;
	color:#444;
	margin:0;
	padding:0px;
	font-family: courier new;
}
/*
@media only screen and (width: 390px) and (height: 844px) and (-webkit-device-pixel-ratio: 3){
		p{font-size: 0.7em;}
		pre{font-size: 0.8em;}
}
@media only screen and (-webkit-device-pixel-ratio: 3){
		p{font-size: 0.7em;}
		pre{font-size: 0.8em;}
}
@media (hover:none){
		p{font-size: 0.7em;}
		pre{font-size: 0.8em;}
}
@media (hover:none) and (device-width: 768px) {
		p{font-size: 0.9em;}
		pre{font-size: 1.0em;}
}
*/

/*================ los estiki menu ================*/

::-webkit-scrollbar{
	display:none;
}
.tapa{
	position:relative;
	width:100%;
	/*max-width:715px;*/
	// min-height:500px;
	margin:auto;
	padding-top:0%; /* used to be 6%, and found a better place to take care of this*/
	text-align:left;
	color:#111;
	font-weight:normal;
	// font-size:2vw;
	font-size:calc(1em + 2vw);
	// line-height:1.2em;
	background:url('https://live.staticflickr.com/65535/55100350968_15d2236cc5_o.jpg') no-repeat center fixed;
	background-size:cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
}

#cubierta{
	text-align:left;
	color:white;
	margin:auto;
	padding-top:calc(4vh + 2vw) ; /* 4vw, 8vh */
	padding-bottom:calc(4vh + 2vw) ; /* 4vw, 8vh */
	background:none;
	width:80%; /* used to be 70% */
	height:100%;
	text-align:left;
	scrollbar-width: none; /* goddamit firefox */
	overflow:scroll; /* this for now solves the problem of hidden text within here when presented with certain very wide window sizes */

}

@supports (-webkit-touch-callout: none) {.tapa{background-attachment:scroll;}}

.tapa-inner{
	position:relative;
}
.submenu-hole{
	height:60px;
	margin-top:0px;
	position:relative;
	opacity:1;
}

/*================ la navegación ================*/

.submenu{
	background:#111;
	width:100%;
	min-height:66px;
	font-size:1em;
}
.submenu a, .submenu{
	color:#aaa;
}
.submenu-content{
	max-width:1240px;
	margin:auto;
	position:relative;
	padding-top:5px;
}
.submenu .logo, .submenu .uparrow{
	position:absolute;
	display:block;
}
.submenu .uparrow{
	transform:scale(0.9);-webkit-transform:scale(0.9);
	opacity:0;
	transition:all .5s;-webkit-transition:all .5s;
}
.submenu.stuck .logo{
	transform:scale(1);-webkit-transform:scale(1);
	opacity:1;
	transition:all .5s;-webkit-transition:all .5s;
}

.submenu .logo{
	transform:scale(0.4);-webkit-transform:scale(0.4);
	opacity:0;
	transition:all .5s;-webkit-transition:all .5s;
}
.submenu.stuck .uparrow{
	transform:scale(1);-webkit-transform:scale(1);
	opacity:1;
	transition:all .5s;-webkit-transition:all .5s;
}
.submenu .logo{
	left:10px;
	top:17px;
	background:url("") no-repeat;
	background:yellow;
	width:60px;
	height:64px;
}
.submenu .uparrow{
	display:inline-block;
	right:0px;
	top:20px;
	background:url("") no-repeat;
	background:#ccc;
	color:black;
	text-align:center;
	vertical-align: middle;
	width:96px;
	height:26px;
	padding-top:4px;
}
.submenu-items{
	text-align:center;
	padding-top:17px;
}
.submenu-items a{
	display:inline-block;
	margin:0 25px;
}
.stuck{
	position:fixed;
	top:0;
	left:0;
	z-index:10;
}
.submenu h1{display:none;}
.submenu-button{
	width:39px;
	height:38px;
	display:none;
	cursor:pointer;
	position:absolute;
	right:5px;
	top:9px;
	background:url("") no-repeat center center;
	background:dodgerblue;
	background-size:19px 19px;
}
#arena{
	box-sizing:border-box;
	width:100%;
	text-align:center;
	color:#aaa;
	font-size:2.4em;
	margin:0;
	padding:1300px 0 80px 0; /* originally 1380 */
	background:#111;
	background:url('https://live.staticflickr.com/65535/55100323938_fed106ed87_b.jpg') no-repeat top fixed;
	background-size: cover;
	moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
}

#intermedio{
	box-sizing:border-box;
	width:100%;
	text-align:center;
	color:#aaa;
	font-size:2.4em;
	margin:0;
	padding:320px 0px 320px 0px;
	background:#111;
	background:url('https://live.staticflickr.com/65535/55116171375_612bb122e2_h.jpg') no-repeat top fixed;
	background-size: cover;
	moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
}

@supports (-webkit-touch-callout: none) {#arena{background-attachment:scroll;} #intermedio{background-attachment:scroll;}}

/*================ los popups ================*/

#bg-popup{
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
	width:100%;
	height:100%;
	z-index:1000;
}
#story-wrapper{
	display:none;
	width:100%;
	position:fixed;
	/*top:60px;*/ /* originally 90px, and 60px was good */
	/*left:0px;*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:1001;
}
#story-header{
	position:relative;
	width:960px;
	width:80%;
	max-width:960px;
	height:60px;
	margin:auto;
	z-index:2;
}
#story-panel{
	position:relative;
	margin:auto;
	width:960px;
	width:80%;
	max-width:960px;
	overflow:auto;
	box-shadow: 0 5px 30px 0 rgba(0,0,0,0.9);
	background:#999;
	color:#444;
}
#story-footer{
	position:relative;
	width:960px;
	width:80%;
	height:50px;
	max-width:960px;
	margin:auto;
	z-index:2;
}
#story-header #close-button{
	box-sizing: border-box;
	text-align:center;
	cursor:pointer;
	width:40px;
	height:40px;
	border-radius:20px;
	background:#222;
	border:2px solid #ddd;
	position:absolute;
	right:-20px; top:40px; /* top right corner */
	/* left: 50%; top:40px;*/ /* top center */
	box-shadow: -5px 5px 20px 0 rgba(0,0,0,0.4);
}
#story-header #close-button img{
	width:20px;
	height:20px;
	margin-top:23%;
}
#story-footer #footer-button{
	box-sizing: border-box;
	text-align:center;
	cursor:pointer;
	width:40px;
	height:40px;
	border-radius:20px;
	background:#222;
	border:2px solid #ddd;
	position:absolute;
	/* right:-20px; top:40px; */ /* top right corner */
	left: calc(50% - 20px); top:-20px; /* top center */
	box-shadow: -5px 5px 20px 0 rgba(0,0,0,0.4);
}
#story-footer #footer-button img{
	width:20px;
	height:20px;
	margin-top:23%;
}

#story-panel #story-information h2{
	font-size:1.4em;
}

#story-panel #story-information{
	float:right;
	width:85%;
	margin:20px; 
	padding:30px 0 60px 0;
	font-size:0.95em; /* was 1.1em */
}

#story-panel #story-pic{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	float:left;
	width:160px;
	height:160px;
	background:#222;
	margin:40px  0 40px 40px;
	border-radius:110px;
	/* border:4px solid deeppink;  */
}
#mi-animalito{
}
.personaje{
	text-decoration: none;
	font-size: 3.6em;
	float: right;
	padding:40px;
	display:inline-block;
	cursor:pointer;
}
.personaje-dos {
	text-decoration: none;
	font-size: 1em;
	cursor:pointer;
	margin:0;
	padding:0;
}

/*================ top modal ================*/

#top-modal{
	display:block;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.85);
	width:100%;
	height:100%;
	z-index:1000;
}
#modal-wrapper{
	display:block;
	width:50%;
	max-width:550px;
	position:fixed;
	/*top:60px;*/ /* originally 90px, and 60px was good */
	/*left:0px;*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:1001;
	//background:green;
}
#modal-header{
	position:relative;
	height:60px;
	margin:auto;
	z-index:2;
	//background:red;
}
#modal-panel{
	position:relative;
	margin:auto;
	overflow:auto;
	box-shadow: 0 5px 30px 0 rgba(0,0,0,0.9);
	background:#999;
	color:#444;
}
#modal-footer{
	position:relative;
	height:50px;
	margin:auto;
	z-index:2;
	//background:blue;
}
#modal-header #modal-close-button{
	box-sizing: border-box;
	text-align:center;
	cursor:pointer;
	width:40px;
	height:40px;
	border-radius:20px;
	background:#222;
	border:2px solid #ddd;
	position:absolute;
	right:-20px; top:40px; /* top right corner */
	/* left: 50%; top:40px;*/ /* top center */
	box-shadow: -5px 5px 20px 0 rgba(0,0,0,0.4);
}
#modal-header #modal-close-button img{
	width:20px;
	height:20px;
	margin-top:23%;
}
#modal-footer #modal-footer-button{
	box-sizing: border-box;
	text-align:center;
	cursor:pointer;
	width:40px;
	height:40px;
	border-radius:20px;
	background:#222;
	border:2px solid #ddd;
	position:absolute;
	/* right:-20px; top:40px; */ /* top right corner */
	left: calc(50% - 20px); top:-20px; /* top center */
	box-shadow: -5px 5px 20px 0 rgba(0,0,0,0.4);
}
#modal-footer #modal-footer-button img{
	width:20px;
	height:20px;
	margin-top:23%;
}

#modal-panel #modal-information h2{
	font-size:1.4em;
}

#modal-panel #modal-information{
	margin:20px; 
	padding:30px 0 15px 0;
	font-size:1.95em; /* was 1.1em */
	text-align:center;
}

#modal-information .modal-info-button{
	text-decoration: none;
	line-height: 1.5em;
	font-size: 2.6em;
	padding:20px;
	cursor:pointer;
}


#modal-panel #modal-pic{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	float:left;
	width:160px;
	height:160px;
	background:#222;
	margin:40px  0 40px 40px;
	border-radius:110px;
	/* border:4px solid deeppink;  */
}

/*================ muchas gracias ================*/