@font-face {
    font-family: 'titilliumregular';
    src: url('titillium-regular-webfont.woff2') format('woff2'),
         url('titillium-regular-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'repsolregular';
    src: url('repsol-regular-webfont-webfont.woff2') format('woff2'),
         url('repsol-regular-webfont-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
*{
	margin: 0;
	padding: 0;
	max-width: 960px;
	box-sizing: border-box;
	list-style: none;
	font-family: 'titilliumregular';

	text-decoration: none;
}
button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
body{
	position: relative;
    width: 100%;
    float: left;
    height: 0;
    margin: 0;
    max-width: 960px;
}
ul{
	position: relative;
	float: left;
	width: 100%;
}
.invi{
	opacity: 0;
}
.invi2{
	opacity: 0;
}
.margsup{
	margin-top: 10px;
}
h1{
	font-size: 26px;
	color: #6e6259;
	font-family: 'repsolregular';
	font-weight: 100;
}
#dib h1, #dib h2{
	width: 100%;
	text-align: left;
}
.titulo h2{
	width: 100%;
	float: left;
}
.titulo h1{
	width: auto;
	float: left;
}
h2{
	font-size: 17px;
	color: #6e6259;
	width: 100%;
	font-weight: 100;
}
p{
	font-size: 15px;
	color: #6e6259;
}
.minidato{
	color: #aaaaaa;
	font-style: oblique;
	font-size: 12px;
}
sub{
	font-size: 10px;
}
#dib li{
	-webkit-transition: all 0.3s;
    transition: all 0.3s;
	position: relative;
	float: left;
	width: 25%;
}
#dib li div{
	background-size: 100%;
	padding-bottom: 90%;
}
#img1{background-image: url("../img/img1.gif");}
#img2{background-image: url("../img/img2.gif");}
#img3{background-image: url("../img/img3.gif");}
#img4{background-image: url("../img/img4.png");}
#seta{
	position: absolute;
	width: 100%;
	background-image: url("../img/seta.png");
}
#coche{
	position: absolute;
	width: 11%;
	background-image: url("../img/coche.png");
	padding-bottom: 6.7% !important;
	left: 44%;
	top: 75%;
	animation-name: coche;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
@keyframes coche {
    0% {transform: translate(0%, 0%);}
    50% {transform: translate(120%, -110%);}
    100% {transform: translate(0%, 0%);}
}
#heli{
	position: absolute;
	width: 20%;
	background-image: url("../img/heli.png");
	padding-bottom: 13.5% !important;
	left: 16%;
	top: 61%;
	animation-name: heli;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
@keyframes heli {
    0% {transform: translate(0%, 0%);}
    50% {transform: translate(0%, -180%);}
    100% {transform: translate(0%, 0%);}
}
.titulo{
	position: relative;
	float: left;
	width: 100%;
}
.mas{
	-webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
	position: relative;
	float: right;
	width: 26px;
	height: 26px;
	margin-left: 10px;
	background-color: #ff8200;
	border-radius: 5px;
	color: #fff;
	font-size: 16px;
	line-height: 26px;
	text-align: center;
	border: 1px solid #ff8200;
	border-color: #ff8200;
}
.mas:hover{
	-webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
	background-color: #fff;
	color: #ff8200;
}
.ventana{
	z-index: 10;
	display: none;
	position: absolute;
	left: 20%;
	top: 0%;
	width: 60%;
	padding: 30px;
	background-color: #fff;
	border-radius: 5px;
	-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
	text-align: center;
}
.ventana p{
	width: 100%;
	float: left;
}
.ventana h1{
	width: 100%;
}
.ventana h2{
	margin-bottom: 10px;
}
.cerrar{
	background-color: #e4002b;
	border: 1px solid #e4002b;
	color: #ffff;
	width: auto;
	position: absolute;
	right: 20px;
	top: 20px;
	padding: 2px 10px;
	border-radius: 5px;
}
.cerrar:hover{
	-webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
	background-color: #fff;
	color: #e4002b;
}

.graficas{
	width: calc(100% - 40px);
	margin-left: 20px;
	position: relative;
}
.gra{
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	height: 117px;
}
.gra li{
	position: absolute;
	left: 0;
	width: 25%;
	border-right: 1px dotted #d2d0c0;
	padding: 0 8px;
}
#b2{left: 25%;}
#b3{left: 50%;}
#b4{left: 75%;}

.gra li:last-child{
	border: none;
}
.gra li .graficas .graf:first-child{
	border-radius: 5px 0 0 5px;
}
.gra li .graficas .graf:last-child{
	border-radius: 0 5px 5px 0;
}
.gra h1{
	padding-top: 10px;
	color: #ff8200;
	font-size: 20px;
	font-size: 20px;
}
.gra #larga{
	width: 100%;
}
.graf{
	position: relative;
	float: left;
	height: 25px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.iz{
	text-align: left;
}
.rojo{background-color: #e4002b!important;}
.naranja{background-color: #ff8200!important;}
.azul{background-color: #041E42}
.amarillo{background-color: #ffb81c!important;}


.nom{
	width: 100%;
	text-align: center;
	position: absolute;
	margin-top: -25px;
	font-size: 13px;
}
.dato{
	float: left;
	width: 100%;
	margin-top: 30px;
	text-align: center;
	position: absolute;
	font-size: 13px;
}
.derecha{
	left: -50px;
	text-align: right;
	width: 50px;
}
.izquierda{
	left: 4px;
	text-align: left;
	width: 10px;
}
#botones2{
	display: none;
}

.flota{
	position: relative!important;
	float: left;
	height: 40px;
}
.varios{
	height: 40px;
}
.transparente{
	-webkit-transition: all 0.3s;
    transition: all 0.3s;
	opacity: 0.3;
}
.cincu{
	width: 50%;
	float: left;
}
.cu{
	text-align: right;
}
.cincu h1{
	padding-top: 0;
}
#larga .graf{
	margin-top: 10px;
}

@media only screen and (max-width: 700px) {
	section{
		position: relative;
		max-width: 240px;
		margin: 0 auto;
	}
	#dib h1, #dib h2{
		text-align: right;
	}
	.flota{
		float: left;
		width: 25% !important;
	}
	.flota h1{
		width: 100%!important;
		border:none!important;
	}
    #dib li {
        width: 100%;
        margin: 0 auto;
        float: initial;

    }
    .titulo{
    	max-width: 240px;
		margin: 0 auto;
		float: initial;
    }
    .gra li{
    	width: 100%;
		border: none;
		float: initial;
		margin: 0 auto;
		 left: 0!important;
    }
    .gra h1{
    	font-size: 16px;
    }
    .varios li{
		float: initial;
		margin: 0px auto;
		position: relative;
		float: left;
    }
    .varios li h1{
    	width: 25%;
		float: left;
		border-right: 1px dotted #d2d0c0;
		text-align: center;
		padding: 10px 0;
		font-size: 16px;
    }
    #botones2{
		display: inherit;
		position: absolute;
		float: initial;
		margin: 0px auto;
		top: 5px;
		z-index: 11;
    }
    #botones2 .mas{
		float: left;
		width: 35px;
		height: 35px;
		margin: 0;
    }
    .flecha{
    	font-size: 24px;
		font-weight: 800;
		line-height: 35px;
		font-family: 'repsolregular';
    }
    #le{
    	border-radius: 5px 0 0 5px;
    }
    #ri{
    	border-radius: 0 5px 5px 0;
    }
    #separata{
    	float: left;
    	width: 1px;
    	height: 35px;
    }
    .ventana{
		width: 100%;
		left: 0;
		top: 250px;
		text-align: left;
    }
    .invi{
    	opacity: 1;
    }
}





@media only screen and (min-width: 700px) {
	#b1:hover, #b2:hover, #b3:hover, #b4:hover{
		-webkit-transition: all 0.3s;
    	transition: all 0.3s;
		display: list-item;
		z-index: 9;
		background-color: #fff;
		left: 0;
		width: 100%;
		border: none;
		border-radius: 5px;
		-webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
	}
	#b1, #b2, #b3, #b4{
		-webkit-transition: all 0.3s;
    	transition: all 0.3s;
	}
}