/* ================================================================ 
Copyright (c) 2011 Stu Nicholls - stunicholls.com. All rights reserved.
This stylsheet and the associated html may be modified in any 
way to fit your requirements.
=================================================================== */


ul.iStu12 {
	list-style:none;
	margin:auto; /*centra todo el contenido en la pagina*/
	position:relative;
	padding:0 42px 31px 42px;
	width:0;
}

ul.iStu12 li.bottomBar {border-top:3px solid #678; margin:0 42px; position:absolute; bottom:0;}
ul.iStu12 li.prev {position:absolute; width:42px; height:123px; background:url(left.png); left:0; top:50%; margin-top:-74px; z-index:100; cursor:pointer;}
* html ul.iStu12 li.prev {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='stu12/left.png', sizingMethod='scale');} /* for IE6 */

ul.iStu12 li.next {position:absolute; width:42px; height:123px; background:url(right.png); right:0; top:50%; margin-top:-74px; z-index:100; cursor:pointer;}
* html ul.iStu12 li.next {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='stu12/right.png', sizingMethod='scale');} /* for IE6 */

/* cuadro de contenido*/
ul.iStu12 li.images {
	position:absolute; 
	left:42px;   /*alineación a la derecha*/
	top:40px;  /*alto del cuadro*/
	overflow:hidden;  /* oculta el contenido que no esta dentro del cuadro*/
	background-color: rgba(18,74,103,0.7); /*color de fondo con transparencia */
	z-index:100; /*posicion ante otros elementos*/
	border:3px solid #09c; /* borde superior e inferior del cuadro  borde lateral ocultos por border-width:3px 0;*/
	border-width:3px 0; /* borde lateral oculto*/

}
ul.iStu12 li.images div.slide { /* centra el contenido dentro de la caja*/
	position:absolute; 
	left:0;
	top:0;
}

/* botonera caption*/
ul.iStu12 li.caption {
	position:absolute;
	bottom:auto; /*posicion de a botonera*/
	width:100%;  /*margen de contenido para botones caption´s */
	text-align:center; /*alineacionde la botonera caption dentro de su whidth 100%*/
	left:0;
}

* html ul.iStu12 li.caption {margin:0 42px;} /* for IE6 */

ul.iStu12 li.caption b {
	display:inline-block;
	padding:0 5px;  /*ancho y alto de las cajas caption*/
	margin-right:2px; /*separación entre cada caja caption*/
	font:normal 11px/25px arial,
	sans-serif;
	color:#fff; 
	cursor:pointer;
 /*sombra botonera */
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

/* esquinas redondeadas cuadros caption*/
-o-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

/* tamaño de imagen  */
img.pequeña{
  width: 100px; height: 100px;
}

img.mediana{
  width: 200px; height: 200px;
}
img.grande{
  width: 300px; height: 300px;
}
img.auto{
  width: auto; height: auto;
}

img.escala{
  width: 453px; height: 350px;
}


img.centro{
  width: 100%; height: 100%;
}
/* efecto de sombra en cuadro contenedor de imagenes */
.caja-auto
{
    width: auto;
    height: auto;
    background-color: #0A4E70;
    margin-left: 100;

}
.caja
{
    width: 200px;
    height: 200px;
    background-color: #0A4E70;
    margin-left: 100;

}

.caja-sombra-center
{
    position: relative;
    right: -28%; 
    padding: 1em;
    margin: 10px 10px  0;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra-center:before, .caja-sombra-center:after
{
    content: "";
    position: absolute;
    z-index: -2;
}
.caja-sombra-center:before
{
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.caja-sombra-center:after
{
    bottom: 15px;
    width: 50%;
    height: 20%;
    right: 10px;
    left: auto;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}









.caja-sombra-left
{
    position: relative;

    float: left; 
    padding: 1em;
    margin: 10px 10px  0;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra-left:before, .caja-sombra-left:after
{
    content: "";
    position: absolute;
    z-index: -2;
}
.caja-sombra-left:before
{
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.caja-sombra-left:after
{
    bottom: 15px;
    width: 50%;
    height: 20%;
    right: 10px;
    left: auto;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}

.caja-sombra-right
{
    position: relative;

    float: right; 
    padding: 1em;
    margin: 10px 10px  0;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra-right:before, .caja-sombra-right:after
{
    content: "";
    position: absolute;
    z-index: -2;
}
.caja-sombra-right:before
{
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.caja-sombra-right:after
{
    bottom: 15px;
    width: 50%;
    height: 20%;
    right: 10px;
    left: auto;
    -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}


ul.iStu12 li.images div.slide div.slidePanel {display:block; float:left;}

ul.iStu12 li.images div.slide div.innerPanel {
	padding:10px; /* espacio de margen dentro de la caja*/
}
ul.iStu12 li.images div.slide div.innerPanel image {
	display:block;
}

/*ancho de cad panel de contenido*/
ul.iStu12 li.images div.slide div.panel1 {width:480px;}
ul.iStu12 li.images div.slide div.panel2 {width:400px;}
ul.iStu12 li.images div.slide div.panel3 {width:690px;} /*auto dependiendo del ancho y alto de la imagen*/
ul.iStu12 li.images div.slide div.panel4 {width:480px;}
ul.iStu12 li.images div.slide div.panel5 {width:auto;}/*auto dependiendo del ancho y alto de la imagen*/
ul.iStu12 li.images div.slide div.panel6 {width:auto;}
ul.iStu12 li.images div.slide div.panel7 {width:1000px;}
ul.iStu12 p {
	padding:5px 0;
	margin:0;
	font: normal 15px/24px georgia, serif;
	color:#fff;
	border-top: 0px solid #fff;
	border-bottom: 0px solid #fff;
	text-align: justify;
	}

ul.iStu12 blockquote {padding:0 0 2px 0; margin:0; font:italic normal 18px/25px georgia, serif; color:#fff; text-align: justify;}
ul.iStu12 td {padding:0 0 2px 0; margin:0; font:italic normal 18px/25px georgia, serif; color:#fff; text-align: center;}
ul.iStu12 
table td:first-child {
    width: 250px;
}
 
table td:nth-child(2) {
    width: 250px;
}
table td:nth-child(3) {
    width: 250px;
}


ul.iStu12 li.images div.slide div.panel1 img {float:left; padding-right:20px;}
ul.iStu12 li.images div.slide div.panel1 h1 {padding:0; margin:0; font: bold 30px/30px georgia, serif; color:#09c; border-bottom: 2px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1);}
ul.iStu12 li.images div.slide div.panel1 h2 {padding:0; margin:0; font: bold 25px/25px georgia, serif; color:#09c; border-bottom: 1px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1); text-align: center;}
ul.iStu12 li.images div.slide div.panel2 h1 {padding:0; margin:0; font: bold 30px/30px georgia, serif; color:#09c; border-bottom: 2px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1);}
ul.iStu12 li.images div.slide div.panel2 h2 {padding:0; margin:0; font: bold 25px/25px georgia, serif; color:#09c; border-bottom: 1px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1); text-align: center;}
ul.iStu12 li.images div.slide div.panel3 h1 {padding:0; margin:0; font: bold 30px/30px georgia, serif; color:#09c; border-bottom: 2px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1);}
ul.iStu12 li.images div.slide div.panel3 h2 {padding:0; margin:0; font: bold 25px/25px georgia, serif; color:#09c; border-bottom: 1px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1); text-align: center;}
ul.iStu12 li.images div.slide div.panel6 h1 {padding:0; margin:0; font: bold 30px/30px georgia, serif; color:#09c; border-bottom: 2px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1);}
ul.iStu12 li.images div.slide div.panel7 h1 {padding:0; margin:0; font: bold 30px/30px georgia, serif; color:#09c; border-bottom: 2px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1);}
ul.iStu12 li.images div.slide div.panel7 h2 {padding:0; margin:0; font: bold 25px/25px georgia, serif; color:#09c; border-bottom: 1px solid #fff; text-shadow: 4px 4px 5px rgba(2, 2, 2, 1); text-align: center;}

/*ul.iStu12 li.images div.slide div.panel3 p {color:#888;}*/
ul.iStu12 li.images div.slide div.panel5 p {color:#888; text-align:right;}
ul.iStu12 li.images div.slide div.panel6 img {float:center; padding-right:20px;}




@media screen and (max-width: 800px) {    /*menu responsive*/
	body {
		padding-top:80px;
	}

	/*ancho de cad panel de contenido*/
ul.iStu12 li.images div.slide div.panel1 {width:280px;}
ul.iStu12 li.images div.slide div.panel2 {width:280px;}
ul.iStu12 li.images div.slide div.panel3 {width:280px;} /*auto dependiendo del ancho y alto de la imagen*/
ul.iStu12 li.images div.slide div.panel4 {width:280px;}
ul.iStu12 li.images div.slide div.panel5 {width:auto;}/*auto dependiendo del ancho y alto de la imagen*/
ul.iStu12 li.images div.slide div.panel6 {width:250px;}

ul.iStu12 li.images div.slide div.panel7 {width:280px;} 

.iframe1 {
	height: 1700px;
}
ul.iStu12 
table td:first-child {
    width: 230px;
}
table td:nth-child(2) {
    width: 230px;
}
table td:nth-child(3) {
    width: 230px;
}
ul.iStu12 td {padding:0 0 2px 0; margin:0; font:italic normal 10px/20px georgia, serif; color:#fff; text-align: center;}


.iframe-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-16-9  iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-16-16 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 250px;
    overflow: hidden;
}
.iframe-16-16  iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 360px;
    height: 100%;
}

.object-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.object-16-9  object {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
img.escala{
  width: 253px; height: 150px;
}