<style>
      @font-face {
      font-family: "Bozon"; /* Nombre que le darás a la fuente */
      src: url("../fonts/bozon_regular.otf") format("opentype"); /* Ruta al archivo */
      font-weight: normal;
      font-style: normal;
      }
      body {
        font-family: "Bozon";
      }
      .navbar-toggler-icon {
      background-image: url('../img/toggler.svg'); /* O cambia stroke */
      }
      .slogan, .slogan_cultura, .slogan_obras {
        position: absolute;
        top: 42%;
        text-align: center;
        color: white;
        padding-left: 10px;
        padding-right: 10px;"
      }
      section {
        margin-top: 60px;
      }
      #autor {
        padding:10%;
        font-size: 2em;
        color:#63657b;
      }
      #orgullo h1, #cultura h1, #indicadores h1, #alcance h1, #iconico h1, #contacto h1 {
        font-size: 1.7em;
        color: #041032;
        padding-bottom: 8%;
      }
      #orgullo h3, #cultura h3, #indicadores h3, #alcance h3, #iconico h3, #contacto h3 {
        font-size: 1em;
        color: #0069c6;
        padding-top: 10%;
      }
      #indicadores h1, #indicadores h3 {
        color: white!important;
      }
      #orgullo p, #cultura p, #alcance p, #iconico p, #contacto p {
        max-width: 80%;
      }
      #iconico {
        background-color: #0068c7;
      }
      #iconico h1, #iconico h3, #iconico p, #contacto h1, #contacto h3, #contacto p {
        color: white!important;
      }
      .iconico_mobile {
        padding: 0!important;
      }
      .iconico_dektop {
        display: none;
        padding: 0!important;
      }
      .iconico_contenido {
        padding-bottom: 40px;
      }
      .iconico_contenido_desktop {
        position: relative;
      }
      .iconico_contenido_texto {
        position: absolute;
        top: 0%;
        left: 6%;
        max-width: 50%;
      }
      #contacto {
        margin-top: 0;
        background-color: #253982;
      }
      .contacto_mobile {
        padding: 0!important;
      }
      .contacto_dektop {
        display: none;
        padding: 0!important;
      }
      .bajada {
        font-size: 0.8em;
      }
      .flecha {
        max-width: 1.5em;
        padding-top: 5%;
      }
      .padizquierda {
        padding-left: 6%;
      }
      .segunda {
        order: 0;
      }
      #indicadores {
        background-color: #041032;
        color: white;
        padding-bottom: 60px;
      }
      #indicadores h1 {
        padding:0;
      }
      #indicadores h3 {
        padding-top: 6%!important;
      }
      .indicador, .indicador_obras {
        padding-top: 2%;
      }
      .datos-indicadores {
        padding-left: 10%;
      }
      .banner_obras {
        margin: 0 6%;
        position: relative;
        padding-bottom: 6%;
      }
      .titulo_obras {
        color: white;
        position: absolute;
        left: 6%;
        top: 14%;
      }
      #obras h2 {
        text-align: center;
        padding-bottom: 5%;
        color: #666569;
      }
      .ver_proyectos {
        position: relative;
      }
      .texto_proyectos {
        position: absolute;
        right: 0;
        left: 0;
        top: 50%;
        bottom: 0;
        margin: auto;
      }
      .texto_proyectos h2 {
        font-size: 2em;
        color: white!important;
      }
      #alcance {
        margin-bottom: 90px;
      }
      footer {
        background-color: #041032;
        padding-top: 10%;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 30px;
        color: white;
        font-size: 0.8em;
      }
      footer a {
        text-decoration: none!important;
        color: #82bfda;
      }
      footer a:hover,
      footer a:focus {
        text-decoration: underline!important;
        opacity: 60%;
      }
      .denuncias a, .orgullo_iconico_contenido_link a {
        color: white;
        text-decoration: underline!important;
      }
      .logo_arriba {
        position: absolute;
        top: 5%;
        left: 5%;
        z-index: 900;
      }
      .menu {
        position: absolute;
        top: 4%;
        right: 3%;
        z-index: 1000;"
      }
      .slogan h2 {
        text-align: center;
      }
      .equis {
        position: absolute;
        bottom: 3%;
        text-align: center;
        width: 100%;
      }

      /* ORGULLO */

      #historia, #socios, #cultura {
        padding: 0 10% 0 10%;
      }
      #historia h1, #socios h1, .contenido_principios h1, #cultura h1, #resultados h1 {
        color: #072b70;
        margin-top: 20px;
        margin-bottom: 40px;
      }
      #historia p, .socio p, .contenido_principios p, #suenos p, .circulo p, #resultados p {
        font-size: 0.8em;
      }
      #socios, #cultura {
        background-color: #f2f2f2;
        padding-top: 40px;
        text-align: center;
        padding-bottom: 20px;
      }
      .socio h4, .circulo h4 {
        padding-top: 20px;
        padding-bottom: 10px;
        font-size: 1em;
        color: #0068c7;
      }
      .socio p, #cultura p {
        margin:0;
      }
      .socio img, .circulo img {
        max-width: 250px;
      }
      .ultimo {
        margin-bottom: 20px!important;
      }
      #principios {
        margin-top: 0;
        margin-bottom: 300px;
      }
      .img_principios {
        position: relative;
        padding: 0!important;
      }
      .contenido_principios {
        background-color: #f2f2f2;
        position: absolute;
        padding:20px;
        top: 50%;
        left: 3%;
        max-width: 90%;
      }
      .contenido_principios h1, #resultados h1 {
        font-size: 2em;
      }
      .contenido_principios h3, #resultados h3 {
        padding-bottom: 10px;
        font-size: 1em;
        color: #0068c7;
      }
      .paginacion_principios {
        padding-top: 15px;
        /*float: right;*/
        position: fixed;
        bottom: 5%;
        right: 1%;
      }
      .paginacion_cultura {
        padding-top: 15px;
        float: right;
        /*position: fixed;
        bottom: 5%;
        right: 1%;*/
      }
      #proposito h1, #suenos h1 {
        font-size: 1.7em;
        color: #041032;
        padding-top: 8%;
        padding-bottom: 8%;
      }
      #suenos {
        background-color: #f2f2f2;
        padding-bottom: 8%;
      }
      .contenido_suenos {
        max-width: 70%;
        margin: auto;
        padding-top: 8%;
      }
      .contenido_suenos span {
        font-size: 0.8em;
        color: #0068c7;
      }
      .orgullo_iconico_contenido_texto {
        position: absolute;
        top: -2%;
        left: 10%;
        max-width: 50%;
      }
        .orgullo_iconico_contenido_link {
        position: absolute;
        top: 46%;
        right: 12%;
      }
      .orgullo_iconico_contenido_link a:hover,
      .orgullo_iconico_contenido_link a:focus {
        text-decoration: underline!important;
        opacity: 60%;
      }

      /* CULTURA */

      #cultura p {
        max-width: 100%;
      }

      .circulo {
        text-align: left;
      }
      .circulo img {
        float:left;
        margin:0 2% 60% 0;
        max-width: 4em;
      }
      #resultados {
        padding: 0 0 0 0;
      }
      #resultados h1 {
        margin-top: 18%!important;
        padding: 0 10% 0 10%;;
      }
      #resultados p {
        padding: 0 10% 0 10%;;
      }
      #dimensiones {
        padding:0 10% 0 10%;
      }
      #dimensiones {
        color: #072b70;
        margin-bottom: 40px;
      }
      #dimensiones h1 {
        margin-bottom: 10%;
      }
      .caluga_dimensiones {
        position: relative;
        margin-bottom: 10%;
      }
      .caluga_dimensiones h3 {
        font-size: 1.2em;
        position: absolute;
        top: 6%;
        left: 10%;
      }
      .caluga_dimensiones p {
        font-size: 0.8em;
        position: absolute;
        top: 20%;
        left: 10%;
      }
      .caluga_dimensiones h3, .caluga_dimensiones p {
        color: white!important;
        max-width: 80%;
      }
      #transformacion {
        background-color: #f2f2f2;
        padding:6% 10% 8% 10%;
        color: #072b70;
      }
      #transformacion h4 {
        font-size: 1em;
        color: #0068C7;
      }
      #transformacion p {
        font-size: 0.8em;
        color: black;
      }
      .contenido_transformacion {
        margin-top: 10%;
      }
      .contenido_transformacion h2 {
        color: #636569!important;
      }
      .contenido_transformacion p {
        margin-top: 10px;
      }
      #transformacion h2 {
        font-size: 1.5em;
      }
      .iframe-cultura {
        width:100%; 
        height:1002px;"
      }

      /* ALCANCE */

      #obras_clientes {
        text-align: center;
        margin-bottom: 10%;
      }
      #obras_clientes h1 {
        color: #072b70;
      }
      #obras_clientes h5 {
        font-size: 1.1em;
        margin-top: 15%;
      }
      #obras_clientes img {
        max-width: 8em;
      }

      /* OBRAS */

      #obras {
        color: #636569;
        margin-bottom: 5%;
        text-align: center;
      }
      #obras {
        font-size: 0.65em;
      }
      .menu_obras_desktop {
        display: none;
      }
      .menu_obras_activo {
        color: #253982;
        font-weight: bold;
      }
      #obras a {
        color: #636569;
        text-decoration: none;
      }
      #obras a:hover,
      #obras a:focus {
        text-decoration: underline;
        opacity: 60%;
      }
      .obras_fotos {
        text-align: left;
        padding: 0 5% 0 5%;
      }
      .obras_fotos h5 {
        font-size: 1.5em;
        position: absolute;
        top: 5%;
        left: 8%;
      }
      .obras_fotos h4 {
        font-size: 2em;
        position: absolute;
        top: 11%;
        left: 8%;
        width: 76%;
      }
      .obras_fotos p {
        font-size: 1.4em;
        position: absolute;
        top: 30%;
        left: 8%;
      }
      .obras-linea-alta {
        top: 32%!important;
      }
      .baja {
        top: 20%!important;
      }
      .obras-linea-doble {
        top: 52%!important;
      }
      .obras_maritimas {
        position: relative;
        color: white;
        margin-bottom: 10px;
      }
      .alta {
        top:42%!important;
      }
      #imagenes {
        margin-bottom: 5%;
      }

      /*DESAFIANOS*/

      #contactos {
        margin-bottom: 10%;
        padding-left: 5%;
        padding-right: 5%;
      }
      #contactos h4 {
        color: #0c68c8;
        font-size: 1em;
      }
      #contactos h2 {
        color: #25398f;
        font-size: 1.4em;
      }
      #contactos p {
        font-size: 0.8em;
      }
      #contactos a {
        text-decoration: none;
        color: black;
      }
      #contactos a:hover,
      #contactos a:focus {
        text-decoration: underline;
        opacity: 60%;
      }

      /*INTERIOR OBRAS*/
      #descripcion {
        padding: 5% 10% 0 10%;
      }
      #descripcion p {
        font-size: 0.8em;
        margin-bottom: 30px;
      }
      .descripcion_tabla {
        background-color: #f2f2f2;
      }
      .descripcion_tabla p {
        margin-top: 10px!important;
        margin-bottom: 10px!important;
      }
      #imagenes {
        padding-left: 0;
        padding-right: 0;
      }
      #imagenes img {
        margin-bottom: 10px;
      }
      #proximo {
        background-color: #f2f2f2;
        padding-top: 10%;
      }
      #proximo p {
        font-size: 0.7em;
        margin-bottom: 0!important;
      }
      #proximo h2 {
        margin-top: 50px;
        color:#25398e;
      }
      .contenedor_btns {
        padding: 15px 3% 30px 3%;
      }
      .proximo_btn {
        text-align: center;
        background-color: white!important;
        padding: 3%;
        max-width: 48%;
        margin: 4px;
      }



      /* RESPONSIVIDAD */

      @media (max-width: 576px) {
        .padizquierda {
          padding-left: 3%;
        }
        .segunda {
          order: 2;
        }
      }
      @media (min-width: 768px) {
        .logo_arriba {
          top: 10%;
        }
        .menu {
          top: 8%;
        } 
        .slogan, .slogan_cultura, .slogan_obras {
          position: absolute;
          left: 5%!important;
          top: 40%;
        }  
        .slogan h2, .slogan_obras h2 {
          font-size: 2em;
          text-align: left;
          max-width: 80%;
        }
        .slogan_obras h5 {
          text-align: left;
        }
        .equis {
          bottom: 8%;
        }
        #orgullo h3, #cultura h3 {
          padding-top: 1%;
        }
        #orgullo h1, #cultura h1 {
          padding-bottom: 1%;
        }
        .flecha {
          padding-top: 1%;
        }
        .iconico_mobile {
          display: none;
        }
        .iconico_dektop {
          display: block;
        }
        .contacto_mobile {
          display: none;
        }
        .contacto_dektop {
          display: block;
        }
        #historia {
          padding: 0 20% 0 20%;
        }
        .contenido_principios {
          max-width: 70%;
        }
        .contenido_suenos {
          max-width: 40%;
        }
        #suenos h1 {
          padding-top: 5%;
        }
        .slogan_cultura h2 {
          font-size: 2em;
          text-align: left;
        }
        #cultura h1, #cultura h3 {
          text-align: left;
        }
        .circulo img {
        margin-bottom: 211%;
        }
        #resultados h1 {
          margin-top: 0!important;
        }
        #resultados p {
          max-width: 75%;
        }
        #obras_clientes img {
        max-width: 5em;
        }
        .menu_obras_mobile {
        display: none;
        }
        .menu_obras_desktop {
        display: block;
        }
        #descripcion {
          margin-top: 20px;
        }
        .descripcion_texto p {
          max-width: 90%;
          margin-top: 20px;
        }
        .indicador_obras {
          text-align: left!important;
        }
        .obras_fotos p {
          top: 30%;
        }
        .obras-linea-alta {
          top: 30%!important;
        }
        .baja {
          top: 20%!important;
        }
        .alta {
          top: 40%!important;
        }
        .obras-linea-doble {
          top: 40%!important;
        }
        .iframe-cultura {
          height:705px;"
      }
      }
      @media (min-width: 992px) {
        .logo_arriba {
          top: 12%;
        }
        .menu {
          top: 10%;
        } 
        .slogan {
          position: absolute;
          left: 4%;
          top: 45%;
        }  
        .slogan h2 {
          font-size: 2em;
          text-align: left;
          max-width: 60%;
        }
        .equis {
          bottom: 3%;
        }
        #orgullo h3, #cultura h3 {
          padding-top: 8%;
        }
        #orgullo h1, #cultura h1 {
          padding-bottom: 6%;
        }
        .flecha {
          padding-top: 2%;
        }
        .socio img {
          max-width: 300px;
        }
        #principios, {
          margin-bottom: 280px;
        }
        .contenido_principios {
          max-width: 50%;
        }
        .contenido_suenos {
          max-width: 36%;
        }
        #suenos h1 {
          padding-top: 3%;
        }
        .circulo img {
        margin-bottom: 80%;
        }
        #obras_clientes {
          padding-left: 10%;
          padding-right: 10%;
        }
        .obras_fotos p {
          top: 26%;
        }
        .obras-linea-alta {
          top: 20%!important;
        }
        .obras-linea-doble {
          top: 34%!important;
        }
        .alta {
          top: 26%!important;
        }
        /*#obras {
          padding-left: 5%;
          padding-right: 5%;
        }*/
        #proximo {
          padding-left: 5%;
          padding-right: 5%;
        }
        .iframe-cultura {
          height:690px;"
      }
      }
      @media (min-width: 1200px) {
        #historia {
        padding: 0 28% 0 28%;
        }
        .contenido_principios {
          max-width: 40%;
        }
        .orgullo_iconico_contenido_texto {
        position: absolute;
        top: 10%;
        left: 10%;
        max-width: 50%;
        }
        .circulo img {
        margin-bottom: 56%;
        }
        #resultados img {
          padding: 0 10% 0 10%;
        }
        #transformacion {
          padding: 6% 15% 4% 15%;
        }
        /*#obras {
          padding-left: 10%;
          padding-right: 10%;
        }*/
        .img_sup {
          padding-left: 10%!important;
          padding-right: 10%!important;
        }
        .img_inf {
          padding-left: 10%;
          padding-right: 10%;
        }
        #proximo {
          padding-left: 10%;
          padding-right: 10%;
        }
        #dimensiones h1 {
          margin-bottom: 5%;
        }
        .iframe-cultura {
          height:716px;"
      }
      }
      @media (min-width: 1400px) {
        .socio img {
          max-width: 360px;
        }
        .contenido_principios {
          max-width: 30%;
        }
        .orgullo_iconico_contenido_texto {
        position: absolute;
        top: 20%;
        left: 10%;
        max-width: 50%;
        }
        .circulo img {
        margin-bottom: 30%;
        }
        #transformacion {
          padding: 6% 23% 4% 23%;
        }
        /*#obras {
          padding-left: 15%;
          padding-right: 15%;
        }*/
        .img_sup {
          padding-right: 14%!important;
        }
        #proximo {
          padding-left: 18%;
          padding-right: 18%;
        }
        .obras-linea-doble {
          top: 26%!important;
        }
        .obras_fotos p {
          top: 20%!important;
        }

      }
    </style>