/* CSS - ESTRUCUTRA */
body {
	height: 100%;
	overflow:hidden;
    margin: 0;
    padding: 0;
    font-family: Georgia, "Times New Roman",
          Times, serif;
	    background-image: url("../img/bg.jpg");
	    background-size: 100px 100px;
}
a {text-decoration: none;}

/*-------------- BORDES-------------------- */
.borde1 {   
border-radius: 13px 13px 13px 13px;
-moz-border-radius: 13px 13px 13px 13px;
-webkit-border-radius: 13px 13px 13px 13px;
border: 4px solid #ffffff;
}

/*------------------MENU-----------------------*/

#container {
    min-height: 100%;
}
#header {
    background: #ff0 none repeat scroll 0 0;
    padding: 0px 0px 0px 0px ;
}
#contenido {
    padding: 0px 0px 0px 60px;
    position: relative;
}
#footer {
    /*background: #d8da3d none repeat scroll 0 0;*/
    bottom: 15px;
    height: 30px;
    width: 99.6%;
    position: absolute;
    /*border: 2px ridge green;*/
    z-index: 100;
	color: #fff;
	  font-size: 0.8em;
}
#header p, #header h1 {
    margin: 0;
    padding: 0px 0px 0px 0px;
}
/* -------------------DIV INTERACTIVO ------------------*/
.divgrafico {
  position :relative;
    z-index: 1;
    height: 50%;
}

.divfondo {
/*   position :relative;*/
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
 padding: 0px;
    border: 0px;
	 /*background: linear-gradient(to bottom, #ff0 0%,#ff0 100%);*/
	   	    /*background-image: url("../img/bg2.jpg");
	    background-size: 100px 100px;*/
	    /*margin: 25px 25px 25px 25px;*/
}
.divfondorell {
	background-image: url("../img/bg2.jpg");
	 background-size: 100px 100px;*/
}
.divfondo1 {
/*   position :relative;*/
    /*z-index: 1;*/
    /*width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
 padding: 0px;
    border: 0px;*/
}
.divfondo2 {
    /*position :relative;*/
    /*index: 1;*/
    /*transition: height 500ms;*/
  font-style: normal;
/*  font-weight: 400;
   height: 6em;
   padding-left:  10%;*/
   /*width: 0%;
   height: 0%;*/
   display:none;
/*    overflow: hidden;*/
}

.divmax {
	position: relative;
	display: inline-block;
  width: 100%;
   height: 30vh;
margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
	
}

/* ------------------ALINEADO DIV CENRTEADO---------------*/

/* -----------------MOSAICO MOVIL ---------------*/
section {
position: relative;
 border: 0px solid red;
margin: 0px 0px 0px 0px;
 padding: 0px;
width: 100%;
height: 100%;	
	
/*overflow: hidden;*/
}
section:hover article {
	/*	 NO SELECCIONADOS*/
width: 25%;
height: 10vh;	
  }
.lin {
  list-style-type: none;
  text-align: center;
}
li article{
	
  float: left;
  /* NORMAL
  width: 17vw;
  height: 20vh;*/
  width: 25%;
	height: 17vh;	
  transition: all 1s;
  
  /*border: 1px solid red;*/
  margin: 0px;
 padding: 10px 10px 10px 10px;
overflow: hidden;
}
li:hover article {
	/* FILA  SELECCIONADO - OTROS*/	
  width: 15%;
  height: 30vh;
}
li article:hover {
	/* SELECCIONADO - selecc*/
  width: 70%;
   height: 30vh;
}
li article:hover >.divfondo2{
	display:block;
}
li article:hover >.divfondo1{
	display:none;
	
}
li article:focus >.divfondo2{
	display:block;
}
li article:focus >.divfondo1{
	display:none;
	
}
li article div:hover {
	/* DIV SELECCIONADO - selecc*/
  width: 100%;
   height: 30vh;
}
li article:hover:nth-child(1) {
/*
   background: red;
  background-image: url("../img/bg2.jpg");
  background-size: 100px 100px;
  */
  }
li article:hover:nth-child(2) {
   /*
   background: blue;
  background-image: url("../img/bg2.jpg");
  background-size: 100px 100px;
  */
}
li article:hover:nth-child(3) {
/*
  background: green;  
  background-image: url("../img/bg2.jpg");
  background-size: 100px 100px;
  */
}

/* -------------Efectos imagenes ------------*/
.imgsombra{
	margin-top: 0px;
	-webkit-filter: drop-shadow(15px 15px 15px black);
	filter: drop-shadow(15px 15px 15px black);
}
.imgmax{
	height: 100%;
	width: 100%;
	max-width: 100%;
    max-height: 100%;
}
.img60{
	max-width: 100%;
	height: auto;
	
}
.imginv { 
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

/* -------------MOVIMIENTOS ------------*/
.Andesap {
		position:relative;
    height: 100%;
	max-height: 100%;
	min-height: 100%;
	left:auto;
		right: auto;
    animation-name: desap;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
 	-webkit-animation-iteration-count: infinite !important;
  	animation-iteration-count: infinite !important;
	-webkit-animation-fill-mode: both;
  	animation-fill-mode: both;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	
}
@keyframes ayd {
    0%   {opacity: 0;}
    10%  {opacity: 0;}
    20%  {opacity: 0;}
    30%  {opacity: 1;}
    40% {opacity: 1;}
	50%   {opacity: 1;}
    60%  {opacity: 1;}
    70%  {opacity: 1;}
    80%  {opacity: 0;}
	90%  {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes desap {
  from 	{   opacity: 0;  }
/*	40%  {opacity: 0;}*/
  to 	{   opacity: 1;  }	
}
@keyframes color {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
@keyframes mover {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:0px; top:200px;}
    100% {left:0px; top:0px;}
}
@keyframes moverxy {
    0%   {left:-150px; top:0px;}
    100% {left:100%; top:0px;}
}
@keyframes scala {
    0%   {transition: transform 2s;; transform: scale(2,2);}
    50%   {transition: transform 2s;; transform: scale(3,3);}
    100%   {transition: transform 2s;; transform: scale(0.5,0.5);}
}
@keyframes def {
    0%   {transition: transform 2s;; transform: skewX(20deg);}
    50%   {transition: transform 2s;; transform: skewY(45deg);}
    100%   {transition: transform 2s;; transform: skew(30deg,30deg);}
}
@keyframes mat {
    0%   {transition: transform 5s;; transform: matrix(1, -0.3, 0, 1, 0, 0);}
}
@keyframes trans {
    0%   {transition: width 2s, height 4s;width: 100px; height: 100px;;}
    50%  {transition: width 2s, height 4s;width: 200px; height: 200px;;}
    100% {transition: width 2s, height 4s;width: 30px; height: 30px;;}
}
@keyframes girar {
    0%  {transform: rotate(90deg);left:100px; top:100px;}
    50%  {transform: rotate(180deg);left:100px; top:100px;}
    100%  {transform: rotate(360deg);left:100px; top:100px;}
}
@keyframes rot {
    0%   {transform: rotateX(60deg);}
    50%   {transform: rotateY(130deg);}
    100%   {transform: rotateZ(145deg);}
}