/*
 * Estilo CSS personalizado para website www.jesusortizarmada.com
 *
 * por Rubén Martínez Cabello <runar.orested@gmail.com>
 *
 * (C) 2016-04-02 TyK Informática Santander
 *
 */



/* Imports */

/*@import url(/css/hor_menu.css);*/
@import url(/css/menu_simple.css);

@import url(/fonts/monotype-corsiva/font.css);
@import url(/fonts/matura-mt-script-capitals/font.css);
@import url(/fonts/viner-hand-itc/font.css); 

 

/* 1. Estilos genericos */

.custom-img .lightbox img {width: 15% !important;}

* {	box-sizing: border-box; }

.language-icon { vertical-align: middle; height:1.8em; }

.alignLeft { text-align:left; }

.alignRight { text-align:right; }

.alignJustify { text-align:justify; }

.alignCenter, .center { text-align:center; }

ul { padding-left:0.8em; list-style-type: none; }
ul.none { list-style-type: none;}
ul.circle { list-style-type: circle;}
ul.square { list-style-type: square;}

ul li { padding-bottom:0.6em; padding-left:1em; text-indent:-1em;}

@media all and (orientation:landscape) { .optionalHoriz {display:none; } }

@media all and (orientation:portrait) { .optionalVert {display:none; } }









/* 2. Fuentes */
/* 
	>16/9
	<16/9 >4/3
	<4/3  >1/1
	<1/1  >3/4
	<3/4  >9/16
	<9/16
	
*/


/* 2.1 Escalado de fuentes */
/*@media screen and (orientation:landscape) and (min-height: 440px) { 
	#pergamino { font-size:2.30vh; } 
}
@media screen and (orientation:portrait)  and (min-height: 440px) { 
	#pergamino { font-size:2.30vw; } 
}
@media screen and (orientation:landscape) and (max-height: 440px) { 
	#pergamino { font-size:2.10vh; } 
}
@media screen and (orientation:portrait)  and (max-height: 440px) { 
	#pergamino { font-size:2.10vw;  } 
}
*/

@media all and (orientation:landscape) and (min-aspect-ratio: 16/9) { 
	#pergamino {
		font-size:2vh;
		-color:red;
	}
}
@media all and (orientation:landscape) and (max-aspect-ratio: 16/9) and (min-aspect-ratio: 4/3) { 
	#pergamino {
		font-size:2vh;
		-color:pink;
	}
}
@media all and (orientation:landscape) and (max-aspect-ratio: 4/3) { 
	#pergamino {
		font-size:1.5vw;
		-color:lime;
	}
}
@media all and (orientation:portrait) and (min-aspect-ratio: 3/4) { 
	#pergamino {
		font-size:1.65vw;
		-color:blue;
	}
}
@media all and (orientation:portrait) and (max-aspect-ratio: 3/4) and (min-aspect-ratio: 9/16)  { 
	#pergamino {
		font-size:1.65vw;
		-color:cyan;
	}
}
@media all and (orientation:portrait) and (max-aspect-ratio: 9/16) { 
	#pergamino {
		font-size:1.65vw;
		-color:purple;
	}
}

/* 2.2 Activación según legibilidad  */
@media screen and (orientation:landscape) and (max-height: 440px) { 
	#pergamino { font-family: 'Verdana', sans-serif; font-size:1.5vh; line-height: 180%;} 
}
@media screen and (orientation:landscape) and (min-height: 440px) { 
	#pergamino { font-family: 'Monotype Corsiva', serif; line-height:130%; } 
}
@media screen and (orientation:portrait) and (max-width: 440px) { 
	#pergamino { font-family: 'Verdana', sans-serif; font-size:1.5vw; line-height: 180%;} 
}
@media screen and (orientation:portrait) and (min-width: 440px) { 
	#pergamino { font-family: 'Monotype Corsiva', serif; line-height:150%; } 
}
@media screen {
	#pergamino h1, #pergamino h2, #pergamino h3, #pergamino h4 { font-family: 'Matura MT Script Capitals';}
}









/* 3. Fondo */

/* Set body to viewport size */
body {
	height:100vh;
	width:100vw;
	overflow:hidden;
	margin: 0;
	border: 0;
	padding: auto;
}

/* Set background image (wood, 512px * 336px) */

body {
	color: #000;
	background-color: rgb(183, 101, 51);
	background-repeat: repeat;
	background-position: top left;
	background-attachment: fixed;
}

@media screen and (orientation:landscape) {
	body {
		background-image: url("background-wood-horiz.jpg");
		background-size: 100% 336px;  
	}
}

@media screen and (orientation:portrait) {
	body {
		background-image: url("background-wood-vert.jpg");
		background-size: 336px 100%;
	}
}




/* 4. Pergamino */

#pergamino {
	margin: auto;
	border: 0;
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: top left;
	background-origin: margin-box;
	overflow: hidden;
	vertical-align: middle;
}

@media screen and (orientation:landscape) and (min-aspect-ratio: 4/3) {
	#pergamino { 
		height:100vh;
		width:133vh;
		background-image: url('pergamino-clean-horiz.png');
		background-size: 100% 100%;
		-color:red;
	}
	.video-player-box {
		display:inline-block;
		height:50vh;
		width:66vh;
	}
}

@media screen and (orientation:landscape) and (max-aspect-ratio: 4/3) {
	#pergamino { 
		width:100vw;
		height:75vw;
		background-image: url('pergamino-clean-horiz.png');
		background-size: 100% 100%;
		-color:green;
	}
	.video-player-box {
		display:inline-block;
		width:50vw;
		height:37.5vw;
	}
}

@media screen and (orientation:portrait) and (min-aspect-ratio: 3/4) {
	#pergamino { 
		height:100vh;
		width:75vh;
		background-image: url('pergamino-clean-vert.png');
		background-size: 100% 100%;
		-color:blue;
	}
	.video-player-box {
		display:inline-block;
		width:60vh;
		height:45vh;
	}
}

@media screen and (orientation:portrait) and (max-aspect-ratio: 3/4) {
	#pergamino { 
		width:100vw;
		height:133vw;
		background-image: url('pergamino-clean-vert.png');
		background-size: 100% 100%;
		-color:lime;
	}
	.video-player-box {
		display:inline-block;
		width:80vw;
		height:60vw;
	}
}



/* 5 Contenedor: margenes de pergamino */
#container {
	overflow: hidden;
b-order: 2px solid lime;
}

@media screen and (orientation:landscape) {
	#container {
		width:83%;
		height:78%;
		margin: 7.5% 8% 14.5% 9%;
		-background-color: rgba(120,120,255,0.8);
	}
}

@media screen and (orientation:portrait) {
	#container {
		width: 78%;
		height: 83%;
		margin: 11% 12% 6% 10%;
		-background-color: rgba(120,120,255,0.8);
	}
}




















/*

.verticalScroll {

	overflow-x: hidden;

	overflow-y: auto;

	height:78%;

}



.verticalScroll > div {

	height:auto;

}




/* 6.1 Sección de cabecera */

.web-header {

	min-height:15%;

	max-height:25%;

}





/* 6.1.2 Menú principal */

.Medals {

	font-size:66%;

}

#mainMenu { 

	text-align:center; 

b-order:2px solid yellow;

	margin:0;

	padding:0;

}

@media all and (orientation:landscape) { br.optional {display:none; } }

/* .break { white-space:pre; } .break:before { content: '\000A'; }*/

/*.break:before { content: ' '; clear: right; display: block; }*/

.medal,

.Medals a {

	/*font-family: 'Monotype Corsiva', serif;*/

	font-family: 'Viner Hand ITC', serif;

	text-transform: uppercase;

}



.medal, .medal a, .Medals a {

	text-decoration:inherit;

}

.medal a:hover, .Medals a:hover{ 

	text-decoration: underline;

}





/* 6.2 Contenido */



#content {

b-order:2px solid red;

	overflow: scroll;

	overflow-x: hidden;

	overflow-y: auto;

	height:85%;

	margin-top:-3%;

}



/* 6.3 Sección de pié */

.web-footer {

	position:absolute;

	height:auto;

	bottom:0px;

	margin:0;

	border:0;

	padding:0;

}

.web-footer h2 {

	position:relative;

	z-index:30;

}

@media all and (orientation:landscape) and (min-aspect-ratio: 4/3) {

	.web-footer {

		width:133vh;

		left:50%;

		margin-left:-66vh;

	}

}

@media all and (orientation:landscape) and (max-aspect-ratio: 4/3) {

	.web-footer {

		width:100vw;

		left:0;

		right:0;

	}

}

@media all and (orientation:portrait) { 

	.web-footer {

		width:110vw;

		left:-5vw;

		right:-5vw;

	}

}


@media all {
	#float-pallete,
	#float-brushes {
		display:none;
	}
}
@media all and (orientation:landscape) {
	#float-pallete,
	#float-brushes {
		display:block;
		position: absolute; 
		z-index:1;
		margin:0;
		border:0;
		bottom:0; 
	}
	#float-pallete {
		height:20vh;
		left:0;
	}
	#float-brushes {
		height:33vh;
		right:-20%;
	}
}


#copyrights {
	background:rgb(208,208,208); 
	opacity:0.6; 
	color:black; 
	width:60%; 
	text-align:center; 
	margin:0 20%; 
	border-radius:1em; 
	position:relative;
	z-index:32;
	font-family:sans-serif;
}















/* 9. Elementos comunes a varias páginas */

.2Columns {	width: 100%; }

.equal2Columns .column      { width:49%; }

.equal2Columns .thickColumn { width:100%; }

.equal2Columns .leftColumn  { float:left;  margin: 0 1% 0 0;}

.equal2Columns .rightColumn { float:right;  margin: 0 0 0 1%;}

.equal2Columns .clearColumns { clear:both; width: 100%; height: 1px; margin:0; border:0; padding:0; background:transparent;}



.3Columns {	width: 100%; }
.col-4 {width: 33%;}

.equal3Columns hr.clearColumns,

.asymmetric3Columns hr.clearColumns { clear:both; width:100%; height:0px; margin:auto 0; border:0; }



@media all and (orientation:landscape) { 

.equal3Columns .thin3Column,

.equal3Columns .thick3Column { width: 32%; }

.equal3Columns .leftColumn  { float:left;   margin: auto 0; }

.equal3Columns .rightColumn { float:right;   margin: auto 0; }

.equal3Columns .centerColumn {            margin: auto 34%;}

.asymmetric3Columns .thin3Column { width:25%; }
.asymmetric3Columns .thick3Column { width:48%; }
.asymmetric3Columns .leftColumn  { float:left;   margin: auto 0; }
.asymmetric3Columns .rightColumn { float:right;   margin: auto 0; }
.asymmetric3Columns .centerColumn {  margin: auto 25.5%;}

}

@media all and (orientation:portrait) { 

.equal3Columns .thin3Column { width: 49%; }

.equal3Columns .thick3Column { width: 100%; }

.equal3Columns .leftColumn  { float:left;  margin: auto 0; }

.equal3Columns .rightColumn { float:right; margin: auto 0; }

.equal3Columns .centerColumn {  margin: auto 0%;}

.asymmetric3Columns .thin3Column { width:49%; }

.asymmetric3Columns .thick3Column { width:70%; }

.asymmetric3Columns .leftColumn  { float:left;  margin: auto 0; }

.asymmetric3Columns .rightColumn { float:right; margin: auto 0; }

.asymmetric3Columns .centerColumn { clear:both; margin: auto 15%;}

}



.column img, 

.thickColumn img {

	/*width: 100%;

	margin-top:2vh;*/

}

.modal { max-width: 50% !important; }