@font-face {
    font-family: 'roboto';
    src: url('../css/roboto-regular.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'Roboto-Regular';
    font-style: normal;
    font-weight: 100;
    src: url('Roboto-Regular.ttf') format('truetype');
    
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  }

@font-face {
    font-family: 'RobotoRegular';
    src: url('fonts/RobotoRegular.eot');
    src: url('fonts/RobotoRegular.eot') format('embedded-opentype'),
         url('fonts/RobotoRegular.woff2') format('woff2'),
         url('fonts/RobotoRegular.woff') format('woff'),
         url('fonts/RobotoRegular.ttf') format('truetype'),
         url('fonts/RobotoRegular.svg#RobotoRegular') format('svg');
}

@font-face {
    font-family: 'repsol';
    src: url('../css/RepsolRegular.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

* {
    font-family: 'repsol', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 100 !important;
    outline: 0 !important;
    transform: translateZ(0);
}

h1{
    font-family: 'repsol', sans-serif;
}

p{
    font-family: 'RobotoRegular', sans-serif;
    font-weight: 100;
  
}

/*body {
    position: relative;
    width: 100%;
   margin:auto;
}*/
body{
    position: relative;
    width: 100%;
    margin: auto;
}

section {
    /*position: relative;*/
    width: 100%;
    /*position: absolute;*/
    left: 0;
    overflow: hidden;
    /*height: 550px;*/
	height:auto;
    background-image: url("../img/nudo1.png");
    position:relative;
    margin: auto;
}


#cont{
    transform-origin: 0 0;
}
#cont{
    margin: auto;
    position: relative;
    /*height: 550px !important;*/
	height:auto;
    width: 1248px;
}
#animaciones {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
#responsive{
    display: none;
}


/* Slideshow container */
#slide-container {
 width: 1248px;
 height: 550px;
 top: 0;
 left: 0;
}
 

/* Style images */
.slide-image {
 position: absolute;
 height: 550px;
 margin-left: 175px;
}



.capa {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    opacity: 0;
    width: 100%;
    height: 550px;
    position: absolute;
    top: 0;
    left: 0;
    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: 1248px;
    height: 550px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../img/blanco.png");
    pointer-events: none;
    background-size: 100%;
}


#sobre{
    position: absolute;
    left: 0;
    top: 0;
}


button {
    position: absolute;
    top: 0;
    z-index: 11;
    background-color: transparent;
}

.cerrar {
    pointer-events: all;
    position: absolute;
    float: right;
    top: 87px;
    right: 236px;;
    padding-right: 35px;
    height: 32px;
    overflow: hidden;
    background-image: url("../img/cerrar.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 32px;
    border: none;
    background-color: transparent;
    width: 90px;
    font-size: 16px;
    color: #fff;
}

.cerrar:hover {
    background-position: right bottom;
    cursor: pointer;
}

.ampliador {
    width: 290px;
    position: absolute;
    padding-right: 55px;
    font-size: 18px;
    color: #6e6259;
    border: none;
    background-color: transparent;
    text-align: right;
    padding-top: 6px;
    line-height: 20px;
    padding-bottom: 2px;
    font-family: 'roboto';
    font-weight: 100;
}


.dosli{
    line-height: 19px;
    padding-top: 1px;
    width: 220px;
}


.plus {
    width: 36px;
    height: 36px;
    background-image: url("../img/mas.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 36px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 5px;
    background-color: #C0EBF2;
}


.plus:hover{
    background-color: #92d9e2;
}

.der {
    padding-right:20px;
    padding-left: 10px;
    background-position: left top;
    background-color: #ffffffd1;
    border-radius:5px;
    height:35px;
    padding-top: 0px;
    width: auto;
}
.izq{
    padding-left:20px;
    padding-right: 10px;
    background-position: left top;
    background-color: #ffffffd1;
    border-radius:5px;
    height:35px;
    padding-top: 0px;
    width: auto;
}

.der:hover {
    background-position: left bottom;
    transform: translateY(-3px);
    transform: translateX(8px);
    transition: transform 250ms linear;
    transition-timing-function: linear;
    background-color: #ffffffd1;
    color: #757575;
    width: auto;
    padding-right: 20px;
    height: 35px;
    border-radius: 5px;
    padding-top:0px;
}

.izq:hover {
    background-position: right bottom;
    transform: translateX(-6px);
    transition: transform 250ms linear;
    transition-timing-function: linear;
    background-color: #ffffffd1;
    color: #757575;
    padding-left: 20px;
    height: 35px;
    border-radius: 5px;
    padding-top:0px;
}


.ampliador:hover {
    cursor: pointer;

}

.ampliador:hover .plus {
    background-position: right bottom;
    cursor: pointer;
    
}


#puntos {
    display: none;
}

#contenido {
    position: absolute;
    width: 18%;
    left: 248px;
    top: 140px;
}



.der .plus {
    left: -40px;
}
.izq .plus {
    right: -40px;
}



h1 {
    font-size: 32px;
    color: #ffffff;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    line-height: 32px;
}


p {
    font-size: 16px;
    /*line-height: 19px;*/
    color: #ffffff;
}
.cadena p{
    font-size: 14px;
}

.margen {
    margin-bottom: 10px;
}


.nudoscolores{
    height: 76px;
}
.nudoscolores1{
    display: none;
}

.colorbotes{
    position: relative;
    margin-left: 325px;
    margin-top: -100%;
}

.colorbotes img{
    height: 245px;
    position: absolute;
    /*margin-left: 115px;
    margin-top: 83px;*/
	margin-left: 122px;
    margin-top: 65px;
}

.canula img{
    position: absolute;
    -ms-transform: translate(153%, -38%) scale(0.4);
    transform: translate(153%, -38%) scale(0.4);
}


/*BOTONES*/

#ref{
    left: 720px;
    top: 87px;
}
#qui{
    left: 800px;
    top: 150px;
}
#glp{
    left: 720px;
    top: 240px;
}
#gen{
    left: 800px;
    top: 410px;
}
#sum{
    left: 285px;
    top: 430px;
}
#lub{
    left: 297px;
    top: 310px;
}
#tra{
    left: 318px;
    top: 140px;
}
#pro{
    left: 345px;
    top: 38px;
}
#des{
    left: -52px;
    top: 330px;
}
#exp{
    left: 278px;
    top: 180px;
}
#sum2{
    left: 298px;
    top: 90px;
}
#mov{
    left: 468px;
    top: 340px;
}


#botns {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
	z-index:1;
}

.cadena {
    border-radius: 4px;
    border: 1px solid #757575;
    padding: 10px 15px;
}

/*PUNTOS UBICACION*/

.punto1 {
    -ms-transform: translate(11%, 0%) scale(0.6);
    transform: translate(11%, 0%) scale(0.6);
    -webkit-filter: blur(0px);
}

.punto2 {
    -ms-transform: translate(7.5%, 41%) scale(1.8);
    transform: translate(7.5%, 41%) scale(1.8);
    -webkit-filter: blur(0px);
}

.punto3 {
    -ms-transform: translate(-5%, 5%) scale(2.8);
    transform: translate(-5%, 5%) scale(2.8);
    -webkit-filter: blur(0px);
}

.punto4 {
    -ms-transform: translate(4.5%, 5%) scale(0.4);
    transform: translate(4.5%, 5%) scale(0.4);
    -webkit-filter: blur(0px);
}

.punto5 {
    -ms-transform: translate(15%, -81%) scale(2.5);
    transform: translate(15%, -81%) scale(2.5);
    -webkit-filter: blur(0px);
}

.punto6 {
    -ms-transform: translate(7.2%, -43%) scale(2.85);
    transform: translate(7.2%, -43%) scale(2.85);
    -webkit-filter: blur(0px);
}

.punto7 {
    -ms-transform: translate(11.5%, -1%) scale(0.71);
    transform: translate(11%, -1%) scale(0.71);
    -webkit-filter: blur(0px);
}

.punto8 {
    -ms-transform: translate(15%, 77%) scale(2.3);
    transform: translate(15%, 77%) scale(2.3);
    -webkit-filter: blur(0px);
}


#mapares {
    display: none;
}

.centra {
    display: none;
}
#responsive_movil{
        display: none;
    }


/* MEDIA QUERIES */
@media only screen and (max-width: 1500px) {
    #cont {
        zoom: 1.0;
        /*-moz-transform: scale(0.80);*/
        -moz-transform: scale(1);
    }
    #responsive_movil{
        display: none;
    }

}
@media only screen and (max-width: 1500px) {
    #cont {
        /*zoom: 0.90;
        -moz-transform: scale(0.80);*/
    }
    .colorbotes{
        /*margin-top: -90%;*/
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1440px) {
    #cont {
        /*zoom: 0.90;
        -moz-transform: scale(0.80);*/
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1410px) {
    #cont {
        /*zoom: 0.90;
        -moz-transform: scale(0.80);*/
    }
}

@media only screen and (max-width: 1380px) {
    #cont {
        /*zoom: 0.90;
        -moz-transform: scale(0.80);*/
    }
    .blanco{
        background-image: url("../img/blanco.png");
    }
    .cerrar{
        top: 87px;
        right: 234px;
    }
    #contenido{
        top: 120px;
    }
    h1{
        /*font-size:26.4px;*/
    }
    p{
        /*font-size:17.6px;*/
    }
    .cadena p{
        font-size:15.4px;
    }
    h2{
        font-size:19.8px;
    }
    .colorbotes{
        /*margin-top: -80%;*/
		margin-top: -91.3%;
    }
    #responsive_movil{
        display: none;
    }

}

@media only screen and (max-width: 1350px) {
    #cont {
        /*zoom: 0.90;
        -moz-transform: scale(0.78);*/
    }
    .colorbotes{
        /*margin-top: -80%;*/
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1320px) {
    #cont {
        /*zoom: 0.89;
        -moz-transform: scale(0.78);*/
    }
    .colorbotes{
        /*margin-top: -80%;*/
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1290px) {
    #cont {
       /*zoom: 0.88;
      -moz-transform: scale(0.76);*/
    }
    .colorbotes{
        /*margin-top: -80%;*/
    }
}

@media only screen and (max-width: 1260px) {
    #cont {
        /*zoom: 0.86;
        -moz-transform: scale(0.76);*/
		zoom: 0.98;
        -moz-transform: scale(0.98);
    }
    .blanco{
        background-image: url("../img/blanco.png");
    }
    .cerrar{
        top: 87px;
        right: 236px;
    }
    #contenido{
        top:120px;
    }
    .colorbotes{
        /*margin-top: -80%;*/
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1230px) {
    #cont {
        /*zoom: 0.86;
        -moz-transform: scale(0.74);*/
		zoom: 0.95;
        -moz-transform: scale(0.95);
    }
    h1{
        /*font-size:28.8px;*/
    }
    p{
        font-size:18px;
    }
    .cadena p{
        font-size:16.8px;
    }
    h2{
        font-size:21.6px;
    }
    .colorbotes{
        margin-top: -99.2%;
    }
    #responsive_movil{
        display: none;
    }
    
}

@media only screen and (max-width: 1200px) {
    #cont {
        /*zoom: 0.84;
        -moz-transform: scale(0.73);*/
		zoom: 0.93;
        -moz-transform: scale(0.93);
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1170px) {
    #cont {
        /*zoom: 0.72;
        -moz-transform: scale(0.72);*/	
		zoom: 0.90;	
        -moz-transform: scale(0.90);
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1140px) {
    #cont {
        /*zoom: 0.72;
        -moz-transform: scale(0.72);*/
		zoom: 0.88;
        -moz-transform: scale(0.88);
    }
    .colorbotes{
        margin-top: -98%;
    }
    #responsive_movil{
        display: none;
    }
}
@media only screen and (max-width: 1110px) {
    #cont {
        /*zoom: 0.70;*/
		zoom: 0.86;
        -moz-transform: scale(0.86);
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 1100px) {
    #cont {
        /*zoom: 0.70;*/
		zoom: 0.85;
        -moz-transform: scale(0.85);
    }
    .colorbotes{
        margin-top: -99%;
    }
    #responsive_movil{
        display: none;
    }
}
@media only screen and (max-width: 1080px) {
    #cont {
        /*zoom: 0.70;
        -moz-transform: scale(0.70);*/
		zoom: 0.83;
        -moz-transform: scale(0.83);
    }
    h1{
        /*font-size:31.2px;*/
		font-size:34px;
    }
    p{
        /*font-size:20.8px;*/
        font-size:20px;
    }
    .cadena p{
        font-size:18.2px;
    }
    h2{
        font-size:23.4px;
    }
    .colorbotes{
        margin-top: -118%;
    }
    #responsive_movil{
        display: none;
    }
}
@media only screen and (max-width: 1050px) {
    #cont {
        /*zoom: 0.70;
        -moz-transform: scale(0.70);*/
		zoom: 0.81;
        -moz-transform: scale(0.81);
    }
    .colorbotes{
        margin-top: -115%;
    }
    #responsive_movil{
        display: none;
    }
}
@media only screen and (max-width: 1020px) {
    #cont {
        /*zoom: 0.70;
        -moz-transform: scale(0.70);*/
		zoom: 0.79;
        -moz-transform: scale(0.79);
    }
    .colorbotes{
        margin-top: -114%;
    }
    #responsive_movil{
        display: none;
    }
}
@media only screen and (max-width: 990px) {
    #cont {
        /*zoom: 0.70;
        -moz-transform: scale(0.70);*/
		zoom: 0.76;
        -moz-transform: scale(0.76);
    }
    .colorbotes{
        margin-top: -113%;
    }
    #responsive_movil{
        display: none;
    }
}
@media only screen and (max-width: 960px) {
    #cont {
        /*zoom: 0.70;
        -moz-transform: scale(0.70);*/
		zoom: 0.72;
        -moz-transform: scale(0.72);
    }
    #responsive_movil{
        display: none;
    }
}

@media only screen and (max-width: 910px) {
    body{
        position: relative;
        width: 100%;
        margin:auto;
    }
    section{
        width: 100% !important;
        background-image: none !important;
        position: relative;
    }
    #cont {
        zoom: 1;
        -moz-transform: scale(1);
        /*width: 910px !important;*/
        height: 100%;
        width: 100%;
    }

    h1{
        /*font-size:24px;*/
		font-size:28px;
        color: #fff;
        padding: 20px;
        margin-bottom: 0px;
    }
    p{
        /*font-size:16px;*/
		font-size:18px;
		line-height:unset;
        color: #fff;
        padding: 20px;
    }
    .cadena p{
        font-size:14px;
    }
    #animaciones {
        -webkit-transition: all 0s;
        transition: all 0s;
        transform: translate(0%, 0%) scale(1)!important;
    }
	#slide-container {
	 	height: auto;
	}
	
	#mapa {
	 	
	}
    #map {
        display: none;
    }
     
    .der{
        text-align: left;
    }

    .der:hover, .izq:hover{
       
       width: calc(100% - 40px);
       padding-left: 40px;
       padding-top: 9px;
       transform: translateY(0px);
       transform: translateX(0px); 
       background-color: #f0f0f0; 
    }
    

    .plus{
        width: 32px;
        height: 32px;
        background-size: 32px;

    }
    .dosli{
        line-height: inherit;
    }
    .ampliador {
        position: relative;
        left: 20px!important;
        padding-left: 40px;
        width: calc(100% - 40px);
       /* max-width: 100%;
        width:calc(100% - 65.2%);*/
        top: inherit!important;
        margin-bottom: 2px;
        z-index: 30;
        background-color: #f8f8f8;
        border-radius: 4px;
        padding-bottom: 10px;
        padding-top: 9px;
        font-size: 14px;
        line-height: inherit;
        display: initial!important;
    }
    #responsive{/*
		display: inherit;
		width: 103%;
		top: -46px;
		left: 0;
		position: absolute;*/
		display: inherit;
		width: 100%;
		text-align:center;
    }
    #responsive img{
		width:100%;
	}
    #responsive_movil{
        display: none;
    }
    #botns {
        /*position: absolute;
        left: 0;
        top: 200px;*/
		position: relative;
        left: 0;
        top: 0;
        margin-bottom: 40px;
    }
    .izq {
        text-align: left;
        background-position: left top;    
    }

    .plus {
        left: 2px!important;
        top: 2px;

    }
    .blanco {
        display: none!important;
    }
    .capa {
        width: 100%;
        background-image: none; 
    }
    .centra {
        display: inherit;
        text-align: center;
        width: 100%;
        background-color: #fff;
    }
    .centra img {
        /*position: relative;*/
        height: 100%;
        width: 100%;
        margin-bottom: -4px;
    }
    .franjanaranja{
        background-image: url('../img/naranja.jpg');
        background-repeat: repeat;
        height: 55px;
    }

    #contenido {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        background-color: #ff8100;
        color: #fff; 
    }

    .margen{
        /*margin-bottom: 550px;*/
    }
    
    .cerrar{
        z-index: 70;
        zoom: 1!important;
        right: 10px!important;
        top: 10px!important;
    }
    .colorbotes{
        display: none;
    }

    .canula img{
        display: none;
    }
    .nudoscolores{
       display: none;
    }
    .nudoscolores1{
        position: absolute;
        left: 0;
        width: 100%;
        top: 16%;
        border-bottom: solid 18px #ff6000;
        display: block;
	}
    #responsive_movil{
        display: none;
    }
}

@media (min-width: 810px) and (max-width: 910px) {
    .centra img{
        max-width: 80%;
        
    }
    .centra{
        text-align: center !important;
    }
    .sum, .lub, .pro{
        text-align: right !important;
    }
    .nudoscolores1{
        top: 4%;
    }
    #responsive_movil{
        display: none;
    }
}


@media (min-width: 751px) and (max-width: 885px){
   #botns {
    /*top:185px;*/
}
}

@media (min-width: 701px) and (max-width: 750px){
   #botns {
    /*top:150px;*/
}
}

@media screen and (max-width: 700px) {
#responsive{
   /* display: inherit;
    width: 110%;
    top: -3px;
    left: 0;
    position: absolute;*/
    }
.dosli{
    /*height: 50px;*/
}
.dosli:hover{
    /*height: 50px;*/
}
#botns {
    /*top:180px;*/
}



@media (min-width: 641px) and (max-width: 651px){
    .dosli{
      width: calc(50% - 17px);  
    }
    .dosli:hover{
        width: calc(50% - 17px); 
        height: auto; 
    }
    #responsive_movil{
        display: none;
    }
}
@media (min-width: 581px) and (max-width: 640px){
#responsive{
    /*width: 80%;
    left: 12%;*/
}
}
@media (min-width: 500px) and (max-width: 580px){
#responsive{
   /* width: 90%;
    left: 12%;*/
}
}

@media (min-width: 481px) and (max-width: 499px){
#responsive{
    /*width: 98%;
    left: 5%;*/
}
}


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

    .dosli:hover, .der:hover, .izq:hover{
        width: calc(100% - 40px);
        height: auto;
    }

    #botns{
        /*top: 120px;*/
    }
    #responsive_movil{
        display: none;
    }

}
@media only screen and (max-width: 400px) {
	.dosli:hover, .der:hover, .izq:hover {
		width: calc(100% - 20px);
	}
    .ampliador {
		width: calc(100% - 20px);
		left:10px !important;
   		font-size: 12px;
	}
    #responsive_movil{
        display: none;
    }
}


@media only screen and (max-width: 375px) {
#responsive img{
    display: none;
}
#responsive_movil {
    display: inherit;
    height: 250px;
}
#responsive_movil img{
    height: 285px;
    margin-top: -15px;
}

}