/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 100% Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 100%
================================================== */
    body					{ background-color:#bbbbbb; margin:0; padding:0; width: 100%; height: 100%; }
    .container                                  { position:absolute; width: 100%; height: 100%; min-width:1000px; min-height:1024px; margin: 0; padding: 0; text-align:justify;}
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 0px; margin-right: 0px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 10%;  }
    .container .two.columns                     { width: 20%; }
    .container .three.columns                   { width: 30%; }
    .container .four.columns                    { width: 40%; }
    .container .five.columns                    { width: 50%; }
    .container .six.columns                     { width: 60%; }
    .container .seven.columns                   { width: 70%; }
    .container .eight.columns                   { width: 80%; }
    .container .nine.columns                    { width: 90%; }
    .container .ten.columns                     { width: 100%; }
    
    .container .one-third.column                { width: 33%; }
    .container .two-thirds.column               { width: 66%; }


    .cabecera					{ position:relative; background: transparent url('../images/fondo-portada1.png') top left repeat-x; height:105px; z-index:3;}
    .cabecera h1				{ margin-top:14px; margin-bottom:4px; font-size:2.6em; font-weight:bold; color:#ffffff; margin-bottom:0px !important; }
    .cabecera h2				{ font-size:0.9em;  color:#ffffff; margin-top:-10px !important; }
    .cabecera img				{ float:left; margin:0px 24px 0px 12px; }
    .cabecera .titulo				{ float:left; }
    .cabecera .social				{ float:right; margin-top:40px; width:300px; background-color:transparent; }
    .cabecera .social img			{ width:30px; height:30px; border:0; float:right; margin:4px; }
    
    .portada-izda				{ position:relative; height:80%; padding:0px; margin: -15px 0 0 0px !important; background: transparent url('../images/fondo-portada-izda.jpg') no-repeat center center; z-index:1; }
    .portada-dcha				{ position:relative; height:80%; padding:0px; margin: -15px 0 0 0px !important; background: transparent url('../images/fondo-portada-dcha.jpg') no-repeat center center; z-index:1; float:right !important; }
    .portada-centro				{ position:relative; height:80%; padding:0px; margin: -15px 0 0 0px !important; background: transparent url('../images/fondo-portada-centro.jpg') no-repeat center center; z-index:1; }
    .portada-izda,
    .portada-centro,
    .portada-dcha				{ overflow:hidden; max-height:740px; -webkit-background-size:cover;  -moz-background-size:cover;  -o-background-size:cover; background-size:cover;}
    
    
    .portada-faldon				{ font-size:0.8em; position:relative; background: transparent url('../images/fondo-portada3.png') top left no-repeat; height:45px; margin-top:-15px; z-index:2; color:#c0c0c0; padding:15px 0 0 0; text-align:center; }
    .portada-faldon a				{ color:#fff; text-decoration:none; }
    .portada-centro-sup				{ background: transparent url('../images/fondo-menu-centro.png') no-repeat bottom center; font-weight:bold; text-align:center; padding:20px 0 0 0; height:45px; }
    .portada-centro-sup a			{ color:#ffffff; border:0px; text-decoration:none;}
    .portada-centro-sup a:hover			{ color:#ffffff}
    
    .contenido					{ background-color: #ffffff; margin:-40px auto 0 auto !important; padding:60px 24px 24px 24px; }
    
    p.cita, p.autor				{font-family: 'Gloria Hallelujah', cursive; margin:0px; padding:90px 60px 10px 100px; text-align:right; font-weight:bold; font-size:1.5em; color: #000; text-shadow: -2px 0 12px #fff, 2px 0 12px #fff, 0 2px 12px #fff, 0 -2px 12px #fff;}
    p.autor					{text-align:right; padding-top:0px; margin:0px;}
    
    div.video_portada				{}
    p.video-titulo				{font-size:1.0em; color:#ffffff;  margin:12px auto 12px auto; padding-bottom:12px; width:400px;}
    p.video-titulo span, div.video-titulo	{background-color:rgba(0,0,0,0.5); padding:2px 10px; color:#ffffff;}
    p.video-comentario				{font-size:0.7em; color:#000000; background-color:rgba(255, 255, 255, 0.5); text-align:justify; width:380px; padding:4px 10px; margin:-26px auto 0 auto; }
    p.libro-titulo				{font-size:0.9em; color:#ffffff;  margin:12px auto 12px auto; padding-bottom:12px; width:90%; }
    p.libro-titulo span, div.libro-titulo	{background-color:rgba(0,0,0,0.5); padding:2px 10px; color:#ffffff;}
        
/* 1280 x 800
===========================*/

    @media only screen and (min-width: 800px) and (max-width: 1300px) {
        
    	p.cita, p.autor				{  padding:40px 20px 10px 40px; font-size:1.1em !important; }
    	p.autor					{ margin-top:-40px; }
    	.portada-centro-sup a			{  font-size:0.9em  }
    }
    
/* 1024 x 760
===========================*/
    @media only screen and (min-width: 290px) and (max-width: 1240px) {
        
    	p.cita, p.autor				{ font-size:1.0em !important; }
    	.portada-centro-sup a			{  font-size:0.8em; }
    .container .one-third.column                { width: 40%; }
    .container .two-thirds.column               { width: 55%; }
         
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
    
/*Menus 
================================================== */

ul.vert-one{position:absolute; margin:0;padding:0;list-style-type:none;display:block;
font:bold 16px 'Noto Sans', sans-serif;line-height:400%; 
width:100%; bottom:0px; }
ul.vert-one li{margin:0;border-top:1px solid #6f8eba;
font-size:1.2em; }
ul.vert-one li a{display:block;text-decoration:none;color:#ffffff;
background-color:rgba(0, 0, 0, 0.6);padding:0 0 0 20px;width:100%;height:100%; }



ul.vert-one li a:hover{
background:transparent url("../images/fondo_menu.jpg"); color:#fff;text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;}

ul.vert-one li a.current,ul.vert-one li a.current:hover{
background:transparent url("../images/fondo_menu.jpg"); color:#fff;}

ul.vert-one li a img{
  float:left;
  margin:11px 10px 0 0;
  border:1px solid #a1a1a1;
}



/* #Typography
================================================== */
	body {font-family: 'Noto Sans', 'Titillium Web', sans-serif;}
	h1, h2, h3, h4, h5, h6 {
		
		font-weight: normal;
		color:#202020;}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 32px; line-height: 50px; margin-bottom: 12px; margin-top:0px;}
	h2 { font-size: 22px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 19px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 17px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 14px; line-height: 24px; }
	h6 { font-size: 12px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0;}
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }
	
	
	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
	
	.amano {font-family: 'Kaushan Script', cursive;}

    div.ndepor 		{ float:left; border:1px solid #202020; width:200px; height: 385px; text-align:center; padding:5px; margin-right:20px; }
    .ndepor-nombre	{ margin-bottom:10px; font-size:1.1em; font-weight:bold; color:#000;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
    .ndepor-leyenda	{ margin:0; paddin:0; color:#8a8a8a; font-size:0.9em; }

    a.nd		{ float:left; border:1px solid #202020; width:200px; height: 385px; text-align:center; padding:5px; margin-right:20px; margin-bottom:20px; text-decoration:none; }		
    a.nd:hover 		{ background-color:#202020; }

    .dpdo-datos		{ font-weight:bold; text-align:left; }
    .dpdo-datos img	{ float:left; width:150px; margin-right:12px; border: 1px solid #202020; padding:1px }
    .dpdo-historia img	{ border: 1px solid #202020; padding:1px }
    .galeria		{ float:left; max-width:240px; height:150px; margin:0 12px 12px 0; text-align:center; font-size:0.8em; }
    .galeria img	{ height:150px; border: 1px solid #202020; padding:1px }
    
.video_dpdo {
    position:relative;
    width:477px;
    height:269px;
    margin:0 auto 0 auto;
}

.video_dpdo iframe {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}    
.item{
  float:left; 
  margin-left:24px; 
  height:390px;
}
/* #fila de hormigas
================================================== */

div.ants{
  	font-size:0.8em;
  	color:#8d8d8d;
  	margin-top:-20px;
}
div.ants a{
  	text-decoration:none;
  	color:#8d8d8d;
  	font-weight:bold;
}
/* #Imagenes
================================================== */

	#promo_libro, #promo_documental 	{ float:left; width:287px; height:315px; border:0px; margin-top:30px; margin-left:50px;}
	#promo_libro {
 	 background: url(../images/promo_libro.png) no-repeat left;
	 }
	 
	#promo_libro:hover {
	  background-position: right;
	}
	#promo_documental {
 	 background: url(../images/promo_documental.png) no-repeat left;
	 }
	 
	#promo_documental:hover {
	  background-position: right;
	}
	.foto 					{ border:1px solid #202020; padding:2px; margin-bottom:4px;}
	.izquierda 				{ float:left; margin-right:24px;}
	.centro 				{ margin:0 auto 0 auto; }
	.derecha 				{ float:right; margin-left:24px;}
	.cuatrocientos				{ width:400px; }
	.trescientos				{ width:300px; }
	.doscientos				{ width:200px; }
	.cien					{ width:100px; }
	.borde					{ padding:1px; border:1px solid #202020; }
	
/* #Menus
=============================*/
.menu1{
  width:400px;
  list-style:none;
}

.menu1 li a{
  display: block;
  border: 0;
  text-decoration:none;
  color: #333;
  background: transparent;
  border-bottom: 1px dotted #c0c0c0;
  padding: 5px 2px 0 2px;
}
a{
  border:0px;
  text-decoration:underline;
  color: #333;
}
a:hover{
  color:#679fc7;
}

@-webkit-keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.wobble-horizontal {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active {
  -webkit-animation-name: wobble-horizontal;
  animation-name: wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
