@font-face 
{
    font-family: fuente;
    src: url(../fonts/fuente_italic.ttf);
}

body
{
	width: 100%;
	height: 100%;
  font-family: fuente;
  margin: 0;
  overflow: hidden;
}

#fondo
{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/portada.jpg") center center no-repeat;
	background-size: cover;
	z-index: -1;
}

/*ANIMACIÓN TITULO*/
/*@keyframes entraTitulo
{
	0%{
	transform: translateX(-110%);
	-webkit-transform: translateX(-110%);

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

@keyframes entraTitulo
{
	0%{
	opacity: 0;
  filter: alpha(opacity=0); 

	}
	100%{
	opacity: 1;
  filter: alpha(opacity=100); 	
	}
}

#titulo
{
	color: black;
	font-weight: bold;
	text-align: center;

	width: 35%;
	height: 10%;

	position: absolute;
	/*width: auto;*/
	/*height: auto;*/
	top:5%;
	padding-top: 1%;
	padding-bottom: 1%;
	/*padding-left: 3%;*/
	padding-right: 3%;
	margin-left: 30.5%;

	background: url("../img/titulo_portada.png") 50% 50% no-repeat;
  background-size: contain;
	/*background-color: #ffffff;*/
	/*opacity: 0.6;*/
  /*filter: alpha(opacity=60); */
  /* Para IE8 o anterior */
  z-index: 10;

  animation-name:entraTitulo;
	animation-fill-mode: backwards;
  animation-duration: 2.5s;
  animation-delay: 1s;
}


#linea1
{
	font-size: 2.5em;
}

#linea2
{
	font-size: 1em;
}

#barraCentral
{
	position: absolute;
	width: 100%;
	height:16%;
	top: 45%;
	transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  z-index: 10;
/*  background-color: orange;
	opacity: 0.8;
  filter: alpha(opacity=80); */
  /* Para IE8 o anterior */
}

#menu
{
	position: absolute;
	display: inline-flex;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	width: 50%;
	height:100%;
	left: 50%;
	transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  opacity: 1;
  filter: alpha(opacity=100);  	
}

@keyframes cargarBotones 
{
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);

  }
}

#entrar
{
	width: 45%;
	margin-right: 2.5%;
	background: url("../img/linkEntrar.png") 50% 50% no-repeat;
	background-size: contain;
	cursor: pointer;
  /*opacity: 1;*/
  /*filter: alpha(opacity=100); */

  animation-fill-mode: backwards;
  animation-duration: 2s;
  animation-name: cargarBotones;
  animation-delay: 3s;
}

#pdf
{
	width: 45%;
	margin-left: 2.5%;	
	background: url("../img/linkPdf.png") 50% 50% no-repeat;
	background-size: contain;
	cursor: pointer;

	animation-fill-mode: backwards;
  animation-duration: 2s;
  animation-name: cargarBotones;
  animation-delay: 3.3s;
}


@keyframes entraLogoGS
{
	0%{
	transform: translateX(100%);
	-webkit-transform: translateX(100%);

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

#cajaCopyright
{
	position: absolute;
	width: 15%;
	height: 3%;
	overflow: hidden;
	bottom: 0.5%;
	right: 0%;
}
#copyright
{
	position: absolute;
	width: 100%;
	height: 100%;

	background-color: black;
	/*border-top-left-radius: 5%;*/
	/*border-bottom-left-radius: 5%;*/

	color: white;
	font-weight: bold;
	font-size: 1em;
	
	opacity: 0.8;
  filter: alpha(opacity=80); /* Para IE8 o anterior */
	overflow: hidden;

  animation-name:entraLogoGS;
	animation-fill-mode: backwards;
  animation-duration: 0.5s;
  animation-delay: 4s;
}

#logoGS
{
	position: absolute;
	width: 90%;
	height: 98%;
	background: url("../img/logo.png") 50% 50% no-repeat;
	background-size: contain;
	margin-left: 5%;
	margin-top: 1%;
	margin-bottom: 1%;
}

/*ANIMACION DE LAS BARRAS QUE SUBEN*/
@keyframes barraSube
{
	0%{
	transform: translateY(100%);
	-webkit-transform: translateY(100%);

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

#cajaBarras
{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.barra
{
	position: absolute;
	height: 100%;
	width: 20%;
  animation-name:barraSube;
	animation-fill-mode: backwards;
  animation-duration: 1.5s;
	overflow: hidden;
}

/*SE USA EL PSEUDOELEMENTO BEFORE PARA PONER OPACIDAD A LA CLASE */
/*BARRA PERO NO A SUS HIJOS (LOS ICONOS)*/
.barra::before
{
	width: 100%;
	height: 100%;
	z-index: -1;
  content: '';
  position: absolute;
	opacity: 0.6;
  filter: alpha(opacity=60);
}

#barra1
{
	left:0;
	
  animation-delay: 0.7s;
}

#barra1::before
{
  content: '';
  position: absolute;
	/*background-color: #e3a60d;*/
}

#barra2
{
	left:20%;

}

#barra2::before
{
  content: '';
  position: absolute;
	/*background-color: #a1c900;*/
}

#barra3
{
	left:40%;

  animation-delay: 0.6s;
}

#barra3::before
{
  content: '';
  position: absolute;
	/*background-color: #3c3d38;*/
}

#barra4
{
	right:20%;

  animation-delay: 0.3s;
}

#barra4::before
{
  content: '';
  position: absolute;
	/*background-color: #61e8e1;*/
}

#barra5
{
	right:0;

  animation-delay: 0.5s;
}

#barra5::before
{
  content: '';
  position: absolute;
	/*background-color: #8f3b89;*/
}

/*ANIMACIÓN CAEN LOS ICONOS */
@keyframes bajaIcono
{
	0%{
	/*transform: translateY(-475%);*/
	/*-webkit-transform: translateY(-475%);	*/
	transform: translateY(-650%);
	-webkit-transform: translateY(-650%);

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

.cajaImgBarra
{
	position: absolute;
	bottom: 5%;
	width: 100%;
	height: 15%;
	/*height:  20%;*/

	animation-name:bajaIcono;
	animation-fill-mode: backwards;
  animation-duration: 1.2s;
	overflow: hidden;

	z-index: 10;
	/*animation-delay: 3s;*/
}



#cajaImgBarra1
{
	/*background: url("../img/tipo1.png") 50% 50%  no-repeat;*/
	background: url("../img/tipo1_activo.png") 50% 50%  no-repeat;
	background-size: contain;
  animation-delay: 2.7s;

	/*opacity: 0;*/
  /*filter: alpha(opacity=0); */
}

#cajaImgBarra2
{
	/*background: url("../img/tipo2.png") 50% 50%  no-repeat;*/
	background: url("../img/tipo2_activo.png") 50% 50%  no-repeat;
	background-size: contain;
  animation-delay: 3.1s;

	/*opacity: 0;*/
  /*filter: alpha(opacity=0); */
}

#cajaImgBarra3
{
	/*background: url("../img/tipo3.png") 50% 50%  no-repeat;*/
	background: url("../img/tipo3_activo.png") 50% 50%  no-repeat;
	background-size: contain;
  animation-delay: 2.9s;

	/*opacity: 0;*/
  /*filter: alpha(opacity=0); */
}

#cajaImgBarra4
{
	/*background: url("../img/tipo4.png") 50% 50%  no-repeat;*/
	background: url("../img/tipo4_activo.png") 50% 50%  no-repeat;
	background-size: contain;
  animation-delay: 3.3s;

	/*opacity: 0;*/
  /*filter: alpha(opacity=0); */
}

#cajaImgBarra5
{
	/*background: url("../img/tipo5.png") 50% 50%  no-repeat;*/
	background: url("../img/tipo5_activo.png") 50% 50%  no-repeat;
	background-size: contain;
  animation-delay: 2.5s;

	/*opacity: 0;*/
  /*filter: alpha(opacity=0); */
}

/***********************************************************************/
/***********************************************************************/
/************************** CSS MOVIL **********************************/
/***********************************************************************/
/***********************************************************************/

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

#menu
{

	width: 80%;
	height:100%;
	
}

}