@import url(http://fonts.googleapis.com/css?family=Pavanam:300,400,700);

@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome.eot');
	src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('../fonts/fontawesome.svg#fontawesome') format('svg'),
		url('../fonts/fontawesome.woff') format('woff'),
		url('../fonts/fontawesome.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
h1 {
	color:#888;
	font-size:20px;
	line-height:1.6em;
	text-transform:uppercase;
}
h2 {
	color:#444;
	font-size:17px;
	line-height:1.6em;
	text-shadow:1px #888;
}
h3 {
	color:#888;
	font-size:20px;
	line-height:1.6em;
}
body, html { font-size: 100%;padding: 0;margin: 0;}
ul, ol, dl {
	padding: 0;
	margin: 0;
}
body {
    font-family: 'Pavanam', Calibri, Arial, sans-serif;
    color: #fff;
}
a img, li {
	border:none;
}
a, a:hover, a:active, a:focus {
	text-decoration:none;
	border:0px;
}
a {
	color:#444;
}
a:hover {color:#000}
.container {
	width: 100%;
	height: 100%;
	background-color:#fff;
	min-width:360px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -5;
}
.bandaIzquierda {
	position:fixed;
	overflow:scroll;
	overflow:auto;
	overflow-x:hidden;
	opacity:.8;
	background-color:#fff;
	width: 19%;
	min-width:200px;
	height:100%;
	margin-left: 2em;
	padding: 1.5em;
	text-align: left;
	box-shadow: 2px 2px 8px rgba(124,111,103,.5);
	-webkit-box-shadow: 2px 2px 4px rgba(124,111,103,.5);
	-moz-box-shadow: 2px 2px 4px rgba(124,111,103,.5);
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
}
.texto {
	padding:0 1.2em 0 1.2em;
	text-align:left;
	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto; 
}
.datos {
	padding:0 1.2em 0 1.2em;
}
.bandaIzquierda:hover{
	filter:alpha(opacity=60);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;	
}
.bandaDerecha {
	position:fixed;
	width:auto;
	max-width:36%;
	min-width:230px;
	height:100%;
	text-align:right;	
	vertical-align:bottom;
	opacity:0.4;
	top:0px;
	right:0px;
	overflow:scroll;
	overflow:auto;
	overflow-x:hidden;
	background-image:url('../Imagenes/fondoTexto3.png');
	background-size:contain;
	background-repeat:repeat-y;
	background-position:center center;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;	
}	
.logo {
	position:relative;
	width:100%;
	height:1px;
	padding-bottom:50%;
	margin:3em 0 1.5em 0;
	float:left;
	opacity:1;
	z-index:20;	
	background-image:url('../Imagenes/logoDsignio.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
}
.actividad {margin: 1em 0 1.5em 0; border-top:1px solid #888; border-bottom:1px solid #888; text-align:center}

.separador {margin: 1.5em 0 1.5em 0; border-top:1px solid #888}

.zonaTexto{
	z-index:5;
	overflow:scroll;
	overflow:auto;
	overflow-x:hidden;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;	
}

.clearfloat {
	clear:both;
	height:0;
}

@media screen and (max-width: 1200px){
	h1 {font-size:20px;}
	h2 {font-size:17px;}
	h3 {font-size:20px;}
	.bandaIzquierda { width:19%;margin-left: 2em;}
}
@media screen and (max-width: 1100px){
	h1 {font-size:20px;}
	h2 {font-size:17px;}
	h3 {font-size:20px;}
		.bandaIzquierda { width:19%;margin-left: 2em;}
}
@media screen and (max-width: 1000px){
	h1 {font-size:18px;}
	h2 {font-size:15px;}
	h3 {font-size:18px;}
	.bandaIzquierda { width:20%;margin-left: 1.5em;}
}
@media screen and (max-width: 900px){
	h1 {font-size:16px;}
	h2 {font-size:13px;}
	h3 {font-size:16px;}
	.bandaIzquierda { width:21%;margin-left: 1.5em;}
}
@media screen and (max-width: 820px){
	h1 {font-size:16px;}
	h2 {font-size:13px;}
	h3 {font-size:16px;}
	.bandaIzquierda { width:22%;}
}
@media screen and (max-width: 760px){
	h1 {font-size:16px;}
	h2 {font-size:13px;}
	h3 {font-size:16px;}
}