@font-face {
  font-family: 'repsol-regular';
  src: url('font/repsol/repsol-regular-webfont.txt');
  src: url('font/repsol/repsol-regular-webfont.eot.74.txt#iefix') format('embedded-opentype'), url('font/repsol/repsol-regular-webfont.txt') format('woff'), url('font/repsol/repsol-regular-webfont.txt') format('truetype'), url('http://areacomercial.repsol.com/catalogo-especialidades/infografias/7/css/font/repsol/repsol/repsol-regular-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'repsol-bold';
  src: url('font/repsol/repsol-bold-webfont.txt');
  src: url('font/repsol/repsol-bold-webfont.eot.79.txt#iefix') format('embedded-opentype'), url('font/repsol/repsol-bold-webfont.txt') format('woff'), url('font/repsol/repsol-bold-webfont.txt') format('truetype'), url('font/repsol/repsol-bold-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  overflow-x: hidden;
}
body {
  font-family: 'repsol-regular', 'Arial', 'sans-serif';
  font-size: 14px;
  line-height: 1.42857;
  color: #000553;
  margin: 0;
}
a:hover {
  text-decoration: none;
}
p {
  font: normal 1em/1.3em 'Arial', 'sans-serif';
  color: #666666;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#container {
  position: relative;
  background-color: #f7f7f6!important;
}
#container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#container *:before,
#container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container .content {
  background-color: #FFF;
  width: 1020px;
  margin: 0 auto;
  padding: 0 70px;
  overflow: hidden;
}
.main .content {
  background: #f7f7f6 url('http://areacomercial.repsol.com/catalogo-especialidades/infografias/7/img/fondo.jpg') no-repeat 0 205px;
  /*min-height: 2100px;*/
  position: relative;
}
#top-1{
  background:url(../img/fondo-arriba.png);
  background-repeat: no-repeat;
  background-size: contain;
}
section h1 {
  font: normal 2.857em/1.2em 'repsol-regular', 'Arial', 'sans-serif';
}


@media (max-width: 1020px) {
  #container .content {
    width: 925px;
  }
}
@media (max-width: 992px) {
  #container .content {
    width: 828px;
  }
}
@media (max-width: 868px) {
  br {
    display: none;
  }
  p {
    width: 90%;
    margin: 0 auto;
  }
  #container .content {
    width: 100%;
    padding: 0!important;
  }
  .main .content {
    background-image: none;
    background-color: #f7f7f6;
    padding-top: 20px;
    min-height: inherit;
  }
  section {
    width: 90%;
    margin: 0 auto;
  }
  section h1 {
    font-size: 2em;
  }
  section li {
    margin-bottom: 20px;
  }
  .texto-intro {
    width: 90%;
    margin: 0 auto 20px auto;
    padding: 20px 0 0 0;
    font-size: 1.1em;
    opacity: 1;
    left: 0;
  }
  .menuScroll,
  .nube,
  .ceda,
  .coche,
  #poligono_01 img {
    display: none !important;
  }
  #header .content {
    background: none;
    padding-bottom: 10px;
    padding: 0;
  }
  #header h1 {
    background: none;
    padding-top: 30px;
    padding-right: 0;
    width: 90%;
    margin: 0 auto;
  }
  
}





.centrado{
  text-align: center;
}
.centrado-xs{
    text-align: left;
}
.margenAbajo15{
  margin-bottom: 15px!important;
}
.margenAbajo30{
  margin-bottom: 30px!important;
}
.margenArriba15{
  margin-top: 15px!important;
}
.margenArriba30{
  margin-top: 30px!important;
}
.margenArriba60{
  margin-top: 60px!important;
}
.paddingArriba60{
  padding-top: 60px!important;
}
.margenArriba100{
  margin-top: 100px!important;
}
.paddingArriba100{
  padding-top: 100px!important;
}
.anchoUnoPuntoCinco{
  width: 12.5%!important;
}
.punteadoCentral{
  position: absolute;
  border-top: 3px dotted gray;

}
.colorAzul{
  color: #008598;
}
.colorRojo{
  color: #cc3300;
}
.padding-derecho-50{
  padding-right: 50px!important;
}
.padding-izquierdo-50{
  padding-left: 50px!important;
}
.altura-linea-165{
  line-height: 1.65;
}
.nopadding{
  padding: 0px!important;
}
.nopaddinglateral{
  padding-left: 0px!important;
  padding-right: 0px!important;
}

.content{
  
}

#titular{
    font-family: "repsol-regular", sans-serif;
    color: #008598;
    text-align: right;
    border-top: 2px solid #008598;
    border-bottom: 2px solid #008598;
    margin-right: 50px;
    padding: 10px 0;
    margin-top: 36px;
}
#titular span{
  display: block;
}

.parrafo-azul{
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #008598;
}







.h1Repsol{
  font-family: "repsol-regular", sans-serif;
  font-size: 33px;
  color: #008598;
}
.h1Repsol62{
  font-family: "repsol-regular", sans-serif;
  font-size: 62px;
  color: #008598;
}
.h1Contenido{
  font-family: "repsol-regular", sans-serif;
  font-size: 30px;
  color: #cc3300;
}
.h2Contenido{
  font-family: "repsol-regular", sans-serif;
  font-size: 18px;
  color: #333333;
  margin-top: 0px;
}


.parrafoRepsol{
  font-family: "Arial", sans-serif;
  font-size: 16px;
}
.explicacion{
  font-family: "Arial", sans-serif;
  font-size: 14px;
}


#fila1{
  position: relative;
  min-height: 140px;
}
.img-s1{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}



#fila2{
  position: relative;
}
#fila2-centro{
  background: url(../img/tripode.gif);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  min-height: 380px;
}










#fila3-desktop .col-lg-12{
  position: relative;
  left: 1500;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}



#fila3{
  position: relative;
  background: url(../img/borde-centrado-vertical.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  min-height: 240px;
}
#fila3 h3, #fila4 h3, #fila5 h3, #fila6 h3{
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 16px;
  color: #008598;
  text-transform: uppercase;
}
#fila3 p, #fila4 p, #fila5 p{
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 16px;
  color: #979797;
}

#fila5 div{
  position: relative;
}





#bloqueIntro{
  opacity: 0;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#fila2, #fila3, #fila4, #fila5, #fila6{
  opacity: 0;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#fila2 .col-lg-5:first-child{
  position: relative;
  left: -500px;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#fila2 .col-lg-5:last-child{
  position: relative;
  left: 500px;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#fila3 .col-lg-6, #fila4 div, #fila5 .col-lg-3, #fila6 .col-lg-4{
  position: relative;
  top: 500px;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
  transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#fila5 .col-lg-3{
  opacity: 0;
}


section {
    width: 90%!important;
    margin-left: 5%!important;
}

#fila2-desktop{
  position: relative;
}
@media only screen and (max-width: 992px){
  #fila3 {
    min-height: 440px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 892px){
  #container .content{
    padding: 0px 30px;
  }
  #fila3 {
    min-height: 470px;
  }


}


@media only screen and (max-width: 769px){
  #bloqueIntro .col-lg-6{
    width: 100%;
  }
}


@media only screen and (max-width: 768px){
    #bloqueIntro{
        padding: 0px 15px;
    }
    .row{
        margin-left: 0px!important;
        margin-right: 0px!important;
    }
    #fila2, #fila3, #fila4, #fila5 {
        margin-left: 5%!important;
    }
    .centrado-xs{
        text-align: center;
    }
    #fila1 {
      min-height: 50px;

  }


    #fila3{
        top: 0px;
        min-height: 440px;
    }

    #botonInicio{
        display: block;
        opacity: 0;
        /*margin-top: 250px;*/
        padding: 50px 0px;
        -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    }
    h1.h1Repsol{
      margin-top: 70px!important;
    }
    #paso2{
      margin-top: 40px!important;
    }
    #parrafo-paso-2 {
      top: -15%;
      left: 0%;
      max-width: 1000px;
  }
  #fila4 .col-lg-3:first-child{
    padding-top: 0px!important;
  }
  #fila5 .img-responsive, #fila6 .img-responsive{
    float: none;
    margin:0 auto;
  }
  #imgf2A{
    float: right;
  }
  #fila3 h3, #fila3 p{
    text-align: center;
  }
  #fila3 .paddingArriba60{
    padding-top: 20px!important;
  }

}
@media only screen and (max-width: 600px){
  #fila3 {
    min-height: 480px;
  }
  #fila2-centro{
    min-height: 200px;
  }
  #fila2-centro .paddingArriba100 {
    padding-top: 30px !important;
  
}
@media only screen and (max-width: 400px){
  
  #titular {
    text-align: center;
  }
  #parrafo-paso-2 {
    top: -20%;
    font-size: 14px;
    line-height: 1;
  }
  #fila2 .parrafo-azul{
    line-height: 1.1;
    margin-bottom: 0px;
  }
  h1.h1Repsol {
    margin-top: 10px !important;
  }
  #parrafo-paso-3 {
    top: 50px;
  }
  #fila3 {
    min-height: 500px;
  }
}