/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 23-feb-2018, 17:19:00
    Author     : VICENT
*/
/**FUNETES DE LA PÁGINA**/
@font-face {font-family: TheBlacksmith; src: url(fonts/TheBlacksmith.ttf);}
@font-face {font-family: MovingSkate; src: url(fonts/MovingSkate.ttf);}
@font-face {font-family: NinjaNote; src: url(fonts/NinjaNote.ttf);}
@font-face {font-family: Bebas; src: url(fonts/BEBAS.otf);}

/**ELEMENTO RELACIONADOS CON EL CABECERA**/
.cabecera{
	align-content: center;
	text-align: center;
	position:relative;
}

.texto-cabecera{
	position: absolute;
	width: 50%;
	height: 15px;
	-webkit-transform: translate(-40%, -100%);
	-moz-transform: translate(-150%, 25%);
	font-size: 10vw;
	font-family: TheBlacksmith;
	text-decoration: blink;
	color: #ff0000;
}

.imagen-cabecera{
	position: relative;
    z-index: -1;
    top: 0;
    left: 0%;
    width: 100%;
    opacity: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/**Cambiar el texto según el tamaño de la pantalla**/
@media only screen and (max-width: 1080px) {
	.texto-cabecera{ 
		-webkit-transform: translate(-50%, -145%);
		-moz-transform: translate(-150%, 40%);
		font-family: NinjaNote;
		color: #ffffff;
	}
}

/**ELEMENTO RELACIONADOS CON EL MENU**/
.menu-lista{
	width: 200%;
	background-color: #333333;
	display: inline-block;
	text-align: center;
}
.menu-lista ul{
	display: inline-block;
	-webkit-margin-before: 0.9em ;
    -webkit-margin-after: 0.8em ;
    -webkit-margin-start: 0px ;
    -webkit-margin-end: 0px ;
    -webkit-padding-start: 0px ;
}
.menu-lista li {
	display: inline-block;
	list-style-type:none;
	float:left;
	position:relative;
        left: 200px;
	border-right: solid;
}

.menu-lista li:last-child {
	border-right: none;
}

.menu-lista li a{
	padding: 10px 15px 10px 15px;
	font-family: Bebas;
	font-size: 35px;
    color: white;
	float: left;
    text-decoration: none;
}

.menu-barra{
	width:200%;
	height: 100px;
	display: none;
	background-color: #333333;
}

/**Cambiar el menú según el tamaño de la pantalla**/
@media only screen and (max-width : 1080px) {
	.menu-lista{
		text-align: left;
		display: none;
	}
	
	.menu-lista li{
		float: left;
		width: 100%;
		border-bottom: solid;
		border-right: none;
		border-right: none;
		display: list-item;
	}
	
	.menu-lista li:last-child{
		border-bottom: none;
	}
	
	.menu-barra{
		display: inline-block;
	}
	
	#icono-open{
		height:20px;
		padding: 10px;
		float: left;
		display:inline-block;
	}

	#icono-close{
		height:20px;
		padding: 10px;
		float: left;
		display:none;
	}
}


body{
    background-color: #cccccc;
}

.Titulo{
    width: 1400px;
    text-align: center;
    background-color:#0C3
}

ul{
    list-style:none;
    position: relative;
    top: 0px;
    left: 50px;
}

.lista > li {
    width: 400px;
    float:left;
}

.lista li a {
    background-color: blue;
    border: 5px solid white;
    color:#fff;
    text-align: center;
    text-decoration:none;
    font-size: 20px;
    font-style: italic;
    font-family: "Comic Sans MS";
    padding:10px 6px;
    display:block;
}
			
.lista li a:hover {
	background-color:#434343;
}


.Lista_videos{
    position: relative;
    left: 100px;
    font-size: 20px;
    font-style: italic;
    font-family: "Comic Sans MS", cursive;
}

.Lista_audios{
    position: relative;
    left: 300px;
    font-size: 20px;
    font-style: italic;
    font-family: "Comic Sans MS", cursive;
}

input{
	display: none;
}

input{
	display: inline-block;
	width:19px;
	height: 19px;
	margin: -1px 4px 0 0;
}

.resultados > input{
    width:35px;
}


.texto{
	text-align:center;
	border: 5px solid black;
        border-radius: 45px;
	padding: 10px;
        background-color: #fff;
        height: 240px;
   
}

.texto1{
        position: relative;
        left: 50px;
	text-align:center;
	border: 5px solid black;
        border-radius: 45px;
	padding: 5px;
        background-color: #fff;
        height: 600px;
        width:1425px;
   
}

.texto2{
	text-align:center;
	border: 5px solid black;
        border-radius: 45px;
	padding: 10px;
        background-color: #fff;
        height: 280px;
   
}

.texto3{
	text-align:center;
	border: 5px solid black;
        border-radius: 45px;
	padding: 10px;
        background-color: #fff;
        height: 300px;
   
}

.texto4{
	text-align:center;
	border: 5px solid black;
        border-radius: 45px;
	padding: 10px;
        background-color: #fff;
        height: 140px;
   
}

.text{
    text-align: center;
    -webkit-columns-count: 1;
    -webkit-column-gap: 25px;
    font-size: 20px;
    font-style: italic;
    font-family: "Comic Sans MS", cursive;
    border: 5px;
    padding: 25px;
}

.imagen{
	float: left;
}

.video{
    position: relative;
    left: 280px;
    top: 20px;
}

video{
    width: 450px;
    height: 350px;
    border: 5px solid;
}

.audio{
    position: relative;
    left: 700px;
}


.pie{
    text-align: center;
    width: 1400px;
    background-color: #999999;
    border: 3px solid black;
    border-radius: 45px;
    position: absolute;
    padding: 20px;
    text-align: center;
}

 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 60%;
        width: 100%
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }