@font-face {
    font-family: 'titillium_bdbold';
    src: url('titillium-bold-webfont.woff2') format('woff2'),
         url('titillium-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'titilliumregular';
    src: url('titillium-regular-webfont.woff2') format('woff2'),
         url('titillium-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
	font-family: 'titilliumregular';
	margin: 0;
	padding: 0;
	max-width: 960px;
	box-sizing: border-box;
	font-weight: 100;
	outline:0 !important;
	transform: translateZ(0);
}
body{
	position: relative;
    width: 100%;
    float: left;
}
section{
	position: relative;
	width: 100%;
	max-width: 960px;
	min-height: 500px;
    position: absolute;
    left: 0;
    overflow: hidden;
}
#animaciones{
	-webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.capa{
	-webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    opacity: 0;
	width: 960px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../img/capa.png");
	background-size: contain;
	z-index: -10;
}
.display{
	z-index: 30;
}
.capave{
	-webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
	opacity: 1!important;
	z-index: 10;
}
.blanco{
	-webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    opacity: 0;
	width: 960px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: contain;
}
#blanco1{background-image: url("../img/blanco1.png");}
#blanco2{background-image: url("../img/blanco2.png");}
#blanco3{background-image: url("../img/blanco3.png");}
#blanco4{background-image: url("../img/blanco4.png");}
#blanco5{background-image: url("../img/blanco5.png");}
#blanco6{background-image: url("../img/blanco6.png");}
#blanco7{background-image: url("../img/blanco7.png");}
#blanco8{background-image: url("../img/blanco8.png");}
#blanco9{background-image: url("../img/blanco9.png");}
#blanco10{background-image: url("../img/blanco10.png");}
#blanco11{background-image: url("../img/blanco11.png");}
button{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 11;
}
.cerrar{
	pointer-events: all;
	position: relative;
	float: right;
	top: 20px;
	padding-right: 35px;
	height: 30px;
	overflow: hidden;
	background-image: url("../img/cerrar.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 30px;
	border: none;
	background-color: transparent;
	width: 90px;
	font-size: 16px;
	color: #9e0b0f;
	margin-right: 20px;
}
.cerrar:hover{
	background-position: right bottom;
	cursor: pointer;
}
.ampliador{
	width: 220px;
	position: absolute;
	padding-right: 35px;
	font-size: 18px;
	color: #6e6259;
	border: none;
	background-color: transparent;
	text-align: right;
	padding-top: 4px;
	line-height: 20px;
}
.plus{
	width: 30px;
	height: 30px;
	background-image: url("../img/mas.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 30px;
	position: absolute;
	top: 0;
	right: 0;
}
.ampliador:hover{
	cursor: pointer;
}
.ampliador:hover .plus{
	background-position: right bottom;
	cursor: pointer;
}
#puntos{display: none;}
#contenido{
	position: absolute;
	width: 45%;
	right: 20px;
	top: 100px;
}
.sig, .ant{
	pointer-events: all;
	position: relative;
	float: left;
	height: 30px;
	color: #fff;
	font-size: 16px;
	background-color: #fe8200;
	border-radius: 4px;
	border: none;
	margin-right: 4px;
	border: 1px solid #fe8200!important;
}
.ant{
	padding: 0 10px 0 30px;
	background-image: url("../img/flecha1.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 30px;
}
.ant:hover{
	background-color: #fff!important;
	border: 1px solid #fe8200!important;
	color: #fe8200!important;
	background-position: left bottom;
	cursor: pointer;
}
.sig{
	padding: 0 30px 0 10px;
	background-image: url("../img/flecha2.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 30px;
}
.sig:hover{
	background-color: #fff!important;
	border: 1px solid #fe8200!important;
	color: #fe8200!important;
	background-position: right bottom;
	cursor: pointer;
}
.der{
	text-align: left;
	padding-right: 0px;
	padding-left: 35px;
	background-position: left top;
}
.der:hover{
	background-position: left bottom;
}
.der .plus{
	left: 0;
}
h1{
	font-size: 24px;
	color: #fe8200;
	float: left;
	width: 100%;
}
h2{
	font-size: 18px;
	color: #fe8200;
	float: left;
	width: 100%;
}
p{
	font-size: 16px;
	color: #6e6259;
}
.margen{
	margin-bottom: 10px;
}


/*BOTONES*/
#exp{left: 235px;top: 20px;}
#des{left: 282px;top: 54px;}
#pro{left: -50px;top: 207px;}
#tra{left: 92px;top: 284px;}
#ref{left: 192px;top: 360px;}
#gnl{left: 565px;top: 109px;}
#qui{left: 432px;top: 247px;}
#gas{left: 708px;top: 140px;}
#glp{left: 713px;top: 284px;}
#lub{left: 712px;top: 444px;}
#mar{left: 762px;top:384px;}




/*ANIMACIONES*/

#ani1{
	position: absolute;
	width: 130px;
	left: 15px;
	top: 70px;
	-webkit-animation: ani1 5s infinite; /* Safari 4+ */
  	-moz-animation:    ani1 5s infinite; /* Fx 5+ */
 	 -o-animation:     ani1 5s infinite; /* Opera 12+ */
 	animation:         ani1 5s infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani1 {
    0% {transform: translate(0px, 0px) rotate(0.001deg);}
    50% {transform: translate(5px, 5px) rotate(0.001deg);}
    100% {transform: translate(0px, 0px) rotate(0.001deg);}
}

#ani2{
	position: absolute;
	width: 71px;
	left: 25px;
	top: 5px;
	-webkit-animation: ani2 15s infinite; /* Safari 4+ */
  	-moz-animation:    ani2 15s infinite; /* Fx 5+ */
 	 -o-animation:     ani2 15s infinite; /* Opera 12+ */
 	animation:         ani2 15s infinite; /* IE 10+, Fx 29+ */
}
#ani2 img{width: 71px;}
@keyframes ani2 {
    0% {transform: translate(0px, 0px) rotate(0.001deg);}
    50% {transform: translate(-25px, 15px) rotate(0.001deg);}
    100% {transform: translate(0px, 0px) rotate(0.001deg);}
}
#onda{
	position: absolute;
	width: 71px;
	left: 4px;
	top: 15px;
	-webkit-animation: onda 3s infinite; /* Safari 4+ */
  	-moz-animation:    onda 3s infinite; /* Fx 5+ */
 	 -o-animation:     onda 3s infinite; /* Opera 12+ */
 	animation:         onda 3s infinite; /* IE 10+, Fx 29+ */
}
@keyframes onda {
    0% {transform: translate(0px, 0px) rotate(0.001deg) scale(0.1);opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {transform: translate(0px, 35px) rotate(0.001deg); opacity: 0;}
}
#ani3{
	position: absolute;
	width: 28px;
	left: 195px;
	top: 5px;
	-webkit-animation: ani3 15s infinite; /* Safari 4+ */
  	-moz-animation:    ani3 15s infinite; /* Fx 5+ */
 	 -o-animation:     ani3 15s infinite; /* Opera 12+ */
 	animation:         ani3 15s infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani3 {
    0% {transform: translate(0px, 0px) rotate(0.001deg);}
    50% {transform: translate(15px, 10px) rotate(0.001deg);}
    100% {transform: translate(0px, 0px) rotate(0.001deg);}
}
#ani4{
	position: absolute;
	width: 4px;
	left: 258px;
	top: 50px;
	overflow: hidden;
	-webkit-animation: ani4 8s infinite; /* Safari 4+ */
  	-moz-animation:    ani4 8s infinite; /* Fx 5+ */
 	 -o-animation:     ani4 8s infinite; /* Opera 12+ */
 	animation:         ani4 8s infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani4 {
    0% {height: 0;}
    50% {height: 25px;}
    100% {height: 0;}
}
#ani5{
	position: absolute;
	width: 74px;
	left: 268px;
	top: 218px;
	-webkit-animation: ani5 15s infinite; /* Safari 4+ */
  	-moz-animation:    ani5 15s infinite; /* Fx 5+ */
 	 -o-animation:     ani5 15s infinite; /* Opera 12+ */
 	animation:         ani5 15s infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani5 {
    0% {transform: translate(0px, 0px) rotate(0.001deg);}
    50% {transform: translate(-10px, -4px) rotate(0.001deg);}
    100% {transform: translate(0px, 0px) rotate(0.001deg);}
}
#ani6{
	position: absolute;
	width: 74px;
	left: 327px;
	top: 177px;
	-webkit-animation: ani6 15s infinite; /* Safari 4+ */
  	-moz-animation:    ani6 15s infinite; /* Fx 5+ */
 	 -o-animation:     ani6 15s infinite; /* Opera 12+ */
 	animation:         ani6 15s infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani6 {
    0% {transform: translate(-10px, -4px) rotate(0.001deg);}
    50% {transform: translate(0px, 0px) rotate(0.001deg);}
    100% {transform: translate(-10px, -4px) rotate(0.001deg);}
}
#ani7{
	position: absolute;
	width: 97px;
	left: 438px;
	top: 68px;
	-webkit-animation: ani5 15s infinite; /* Safari 4+ */
  	-moz-animation:    ani5 15s infinite; /* Fx 5+ */
 	 -o-animation:     ani5 15s infinite; /* Opera 12+ */
 	animation:         ani5 15s infinite; /* IE 10+, Fx 29+ */
}
#ani8{
	position: absolute;
	width: 24px;
	left: 717px;
	top: 301px;
	-webkit-animation: ani8 15s linear infinite; /* Safari 4+ */
  	-moz-animation:    ani8 15s linear infinite; /* Fx 5+ */
 	 -o-animation:     ani8 15s linear infinite; /* Opera 12+ */
 	animation:         ani8 15s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani8 {
    0% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {transform: translate(90px, 52px) rotate(0.001deg);opacity: 0;}
}
#ani9{
	position: absolute;
	width: 25px;
	left: 541px;
	top: 370px;
	-webkit-animation: ani9 10s linear infinite; /* Safari 4+ */
  	-moz-animation:    ani9 10s linear infinite; /* Fx 5+ */
 	 -o-animation:     ani9 10s linear infinite; /* Opera 12+ */
 	animation:         ani9 10s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani9 {
    0% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {transform: translate(60px, -36px) rotate(0.001deg);opacity: 0;}
}
#ani10{
	position: absolute;
	width: 10px;
	left: 791px;
	top: 333px;
	-webkit-animation: ani10 12s linear infinite; /* Safari 4+ */
  	-moz-animation:    ani10 12s linear infinite; /* Fx 5+ */
 	 -o-animation:     ani10 12s linear infinite; /* Opera 12+ */
 	animation:         ani10 12s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani10 {
    0% {transform: translate(60px, -36px) rotate(0.001deg);opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
}
#ani11{
	position: absolute;
	width: 52px;
	left: 0px;
	top: 70px;
	-webkit-animation: ani11 30s linear infinite; /* Safari 4+ */
  	-moz-animation:    ani11 30s linear infinite; /* Fx 5+ */
 	 -o-animation:     ani11 30s linear infinite; /* Opera 12+ */
 	animation:         ani11 30s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani11 {
    0% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
    5% {opacity: 1;}
    45% {opacity: 1;}
    50% {transform: translate(900px, 200px) rotate(0.001deg);opacity: 0;}
    100% {transform: translate(900px, 200px) rotate(0.001deg);opacity: 0;}
}
#ani12{
	position: absolute;
	width: 960px;
	left: 0px;
	top: 0px;
	-webkit-animation: ani12 6s linear infinite; /* Safari 4+ */
  	-moz-animation:    ani12 6s linear infinite; /* Fx 5+ */
 	 -o-animation:     ani12 6s linear infinite; /* Opera 12+ */
 	animation:         ani12 6s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani12 {
    0% {opacity: 0;}
    2% {opacity: 1;}
    50% {opacity: 1;}
    52% {opacity: 0;}
    100% {opacity: 0;}
}
#ani13{
	position: absolute;
	width: 960px;
	left: 0px;
	top: 0px;
	-webkit-animation: ani13 6s linear infinite; /* Safari 4+ */
  	-moz-animation:    ani13 6s linear infinite; /* Fx 5+ */
 	 -o-animation:     ani13 6s linear infinite; /* Opera 12+ */
 	animation:         ani13 6s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes ani13 {
    0% {opacity: 1;}
    2% {opacity: 0;}
    50% {opacity: 0;}
    52% {opacity: 1;}
    100% {opacity: 1;}
}
#flecha1{
	position: absolute;
	width: 37px;
	left: 380px;
	top: 111px;
	-webkit-animation: flecha1 6s linear infinite; /* Safari 4+ */
  	-moz-animation:    flecha1 6s linear infinite; /* Fx 5+ */
 	 -o-animation:     flecha1 6s linear infinite; /* Opera 12+ */
 	animation:         flecha1 6s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes flecha1 {
	0% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
    5% {opacity: 1;}
    45% {opacity: 1;}
    50% {transform: translate(90px, 50px) rotate(0.001deg);opacity: 0;}
    100% {transform: translate(90px, 50px) rotate(0.001deg);opacity: 0;}
}
#flecha2{
	position: absolute;
	width: 37px;
	left: 529px;
	top: 153px;
	-webkit-animation: flecha2 3s linear infinite; /* Safari 4+ */
  	-moz-animation:    flecha2 3s linear infinite; /* Fx 5+ */
 	 -o-animation:     flecha2 3s linear infinite; /* Opera 12+ */
 	animation:         flecha2 3s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes flecha2 {
	0% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
    5% {opacity: 1;}
    45% {opacity: 1;}
    50% {transform: translate(40px, 23px) rotate(0.001deg);opacity: 0;}
    100% {transform: translate(40px, 23px) rotate(0.001deg);opacity: 0;}
}
#flecha3{
	position: absolute;
	width: 37px;
	left: 451px;
	top: 363px;
	-webkit-animation: flecha3 3s linear infinite; /* Safari 4+ */
  	-moz-animation:    flecha3 3s linear infinite; /* Fx 5+ */
 	 -o-animation:     flecha3 3s linear infinite; /* Opera 12+ */
 	animation:         flecha3 3s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes flecha3 {
	0% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
    5% {opacity: 1;}
    45% {opacity: 1;}
    50% {transform: translate(28px, -15px) rotate(0.001deg);opacity: 0;}
    100% {transform: translate(28px, -15px) rotate(0.001deg);opacity: 0;}
}
#flecha4{
	position: absolute;
	width: 37px;
	left: 363px;
	top: 222px;
	-webkit-animation: flecha4 3s linear infinite; /* Safari 4+ */
  	-moz-animation:    flecha4 3s linear infinite; /* Fx 5+ */
 	 -o-animation:     flecha4 3s linear infinite; /* Opera 12+ */
 	animation:         flecha4 3s linear infinite; /* IE 10+, Fx 29+ */
}
#flecha5{
	position: absolute;
	width: 37px;
	left: 293px;
	top: 258px;
	-webkit-animation: flecha4 3s linear infinite; /* Safari 4+ */
  	-moz-animation:    flecha4 3s linear infinite; /* Fx 5+ */
 	 -o-animation:     flecha4 3s linear infinite; /* Opera 12+ */
 	animation:         flecha4 3s linear infinite; /* IE 10+, Fx 29+ */
}
@keyframes flecha4 {
	0% {transform: translate(0px, 0px) rotate(0.001deg);opacity: 0;}
    5% {opacity: 1;}
    45% {opacity: 1;}
    50% {transform: translate(40px, 23px) rotate(0.001deg);opacity: 0;}
    100% {transform: translate(40px, 23px) rotate(0.001deg);opacity: 0;}
}














#botns{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}






.cadena{
	background-color: #f0f0f0;
	border-radius: 4px;
	padding: 10px 15px;
}
.punto1{
	-ms-transform: translate(30%, 46%) scale(1.4);
	transform: translate(30%, 46%) scale(1.4);
}
.punto2{
	-ms-transform: translate(22%, 38%) scale(1.4);
	transform: translate(22%, 38%) scale(1.4);
}
.punto3{
	-ms-transform: translate(8%, 22%) scale(1.3);
	transform: translate(8%, 22%) scale(1.3);
}
.punto4{
	-ms-transform: translate(-2%, -7%) scale(1.4);
	transform: translate(-2%, -7%) scale(1.4);
}
.punto5{
	-ms-transform: translate(-20%, -16%) scale(1.4);
	transform: translate(-20%, -16%) scale(1.4);
}
.punto6{
	-ms-transform: translate(-19%, 47%) scale(1.6);
	transform: translate(-19%, 47%) scale(1.6);
}

.punto7{
	-ms-transform: translate(-32.5%, -28%) scale(1.3);
	transform: translate(-32.5%, -28%) scale(1.3);
}
.punto8{
	-ms-transform: translate(-50.5%, 27%) scale(1.7);
	transform: translate(-50.5%, 27%) scale(1.7);
}
.punto9{
	-ms-transform: translate(-53%, -5%) scale(1);
	transform: translate(-53%, -5%) scale(1);
}
.punto10{
	-ms-transform: translate(-61%, -72%) scale(2);
	transform: translate(-61%, -72%) scale(2);
}
.punto11{
	-ms-transform: translate(-57%, -12%) scale(1.1);
	transform: translate(-57%,-12%) scale(1.1);
}
#mapares{
	display: none;
}
.centra{
	display: none;
}





@media only screen and (max-width: 945px) {
    #cont{zoom: 0.96;}
}
@media only screen and (max-width: 920px) {
    #cont{zoom: 0.94;}
}
@media only screen and (max-width: 900px) {
    #cont{zoom: 0.92;}
}
@media only screen and (max-width: 880px) {
    #cont{zoom: 0.90;}
}
@media only screen and (max-width: 860px) {
    #cont{zoom: 0.88;}
}
@media only screen and (max-width: 840px) {
    #cont{zoom: 0.86;}
}
@media only screen and (max-width: 820px) {
    #cont{zoom: 0.84;}
}
@media only screen and (max-width: 800px) {
    #cont{zoom: 0.82;}
}





@media only screen and (max-width: 780px) {
	#animaciones{
		-webkit-transition: all 0s;
	    transition: all 0s;
	    transform: translate(0%, 0%) scale(1)!important;
	}
	#map{
		display: inherit!important;
		width: 100%;
		opacity: 0.2;
	}
	#cont{zoom: 1;}
    .ampliador {
        position: relative;
        left: 20px!important;
        padding-left: 40px;
        width: calc(50% - 22px);
        top:inherit!important;
        margin-bottom: 2px;
        z-index: 30;
        background-color: #f0f0f0;
		min-height: 34px;
		border-radius: 4px;
		padding-bottom: 6px;
		font-size: 14px;
    }
    #botns{
    	position: absolute;
    	left: 0;
    	top: 20px;
    }
    #concon p{
    	font-size: 13px;
    }
    #concon h1{
    	font-size: 18px;
    }
    #concon h2{
    	font-size: 16px;
    }
    .izq{
    	text-align: left;
    }
    .plus{
    	left: 2px!important;
    	top:2px;
    }
    .blanco{
    	display: none!important;
    }
    .capa{
    	width: 100%;
    	background-image: none;
    }
    .centra{
    	display: inherit;
    	width: 100%;
    	text-align: center;
    }
    .centra img{
    	max-width: 160px;
    }
    #contenido{
    	width: calc(100% - 40px);
    	left: 20px;
    	top: 40px;
    }
    #map{
    	display: none;
    }
    #ani1, #ani2, #ani3, #ani4, #ani5, #ani6, #ani7, #ani8, #ani9, #ani10, #ani11, #ani12, #ani13, #flecha1, #flecha2, #flecha3, #flecha4, #flecha5{
    	display: none;
    }
}

@media only screen and (max-width: 640px) {
    .ampliador {
        width: calc(100% - 40px);
    }
}