@media screen {
  a.button.light,
  .button.light,
  button.button.light {
    -webkit-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease; }
    a.button.light:hover,
    .button.light:hover,
    button.button.light:hover {
      background: rgba(255, 255, 255, 0.1); }
  .bg-video {
    display: block !important; }
  #menu-wrapper .menu .social-menu li a .icon svg * {
    -webkit-transition: fill .4s ease-out;
    -o-transition: fill .4s ease-out;
    transition: fill .4s ease-out; }
  #menu-wrapper .menu .social-menu li a:hover .icon svg * {
    fill: rgba(255, 255, 255, 0.6); }
  .list-menu li:not(.active) a:hover {
    color: rgba(255, 255, 255, 0.6); }
    .list-menu li:not(.active) a:hover p.intro {
      color: rgba(255, 255, 255, 0.6); }
  .list-menu#top-menu-wrapper li.active a:hover {
    color: #ffffff; }
  .anchor-menu ul li a:hover {
    color: #0d75a4; }
  header .logo svg * {
    -webkit-transition: fill .4s ease-out;
    -o-transition: fill .4s ease-out;
    transition: fill .4s ease-out; }
  header .logo:hover svg * {
    fill: rgba(255, 255, 255, 0.6); }
  
  header #search-toggle {
    right: 65px; }
  #page.menu-active header .logo:hover svg * {
    fill: rgba(255, 255, 255, 0.6); }
  #page.menu-active header #search-toggle:hover .icon svg * {
    fill: rgba(255, 255, 255, 0.6); }
  body.article:not(.module):not(.search):not(.reservation):not(.payment) #page:not(.menu-active) header .logo:hover svg *, body.projects #page:not(.menu-active) header .logo:hover svg *, body.landingpage.contact #page:not(.menu-active) header .logo:hover svg * {
    fill: #0d75a4; }
  body.article #page:not(.menu-active) header #main-menu-toggle:hover, body.landingpage.contact #page:not(.menu-active) header #main-menu-toggle:hover {
    background: rgba(0, 0, 0,.3);
    }
  body.scrolled #page:not(.menu-active) header .logo:hover svg * {
    fill: #0d75a4; }
  body.scrolled #page:not(.menu-active) header #main-menu-toggle:hover {
    background: rgba(217, 195, 118,.3);
    }
  body.scrolled #page:not(.menu-active) header #top-menu-wrapper li a:hover {
    color: #e1c571;
    }
  body.scrolled #page:not(.menu-active) header #top-menu-wrapper li.active a:hover {
    color: #ffffff; }
  .module-block.search form a.button .icon svg * {
    -webkit-transition: fill .4s ease-out;
    -o-transition: fill .4s ease-out;
    transition: fill .4s ease-out; }
  .module-block.search form a.button:hover .icon svg * {
    fill: rgba(255, 255, 255, 0.6); }
  .search-form form .search-icon .icon svg * {
    -webkit-transition: fill .4s ease;
    -o-transition: fill .4s ease;
    transition: fill .4s ease; }
  .search-form form .search-icon:hover .icon svg * {
    fill: rgba(255, 255, 255, 0.6); }
  .search-results ul li a h4 {
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease; }
  .search-results ul li a:hover h4 {
    color: #f5e19a; }
  .search-autocomplete-list li a:hover {
    color: rgba(255, 255, 255, 0.6); }
  #landing-page .sidebar ul li a:hover {
    color: #f5e19a; }
    #landing-page .sidebar ul li a:hover:before, #landing-page .sidebar ul li a:hover:after {
      background-color: #f5e19a; }
  #landing-page.has-grid .grid ul li.has-img .content,
  #landing-page.has-grid .grid ul li.has-img .overlay {
    -webkit-transition: height 0.6s cubic-bezier(0.58, 0, 0.39, 1);
    -o-transition: height 0.6s cubic-bezier(0.58, 0, 0.39, 1);
    transition: height 0.6s cubic-bezier(0.58, 0, 0.39, 1); }
  #landing-page.has-grid .grid ul li.has-img:hover .content,
  #landing-page.has-grid .grid ul li.has-img:hover .overlay {
    height: 150px;
    -webkit-transition: height 0.6s cubic-bezier(0.58, 0, 0.39, 1) 0.1s;
    -o-transition: height 0.6s cubic-bezier(0.58, 0, 0.39, 1) 0.1s;
    transition: height 0.6s cubic-bezier(0.58, 0, 0.39, 1) 0.1s; } }

@media screen and (min-width: 1000px) {
  #landing-page.has-grid .grid ul li.has-img p {
    -webkit-transition: margin 0.6s cubic-bezier(0.58, 0, 0.39, 1), max-height 0.6s cubic-bezier(0.58, 0, 0.39, 1);
    -o-transition: margin 0.6s cubic-bezier(0.58, 0, 0.39, 1), max-height 0.6s cubic-bezier(0.58, 0, 0.39, 1);
    transition: margin 0.6s cubic-bezier(0.58, 0, 0.39, 1), max-height 0.6s cubic-bezier(0.58, 0, 0.39, 1); }
  #landing-page.has-grid .grid ul li.has-img .date {
    -webkit-transition: margin 0.6s cubic-bezier(0.58, 0, 0.39, 1);
    -o-transition: margin 0.6s cubic-bezier(0.58, 0, 0.39, 1);
    transition: margin 0.6s cubic-bezier(0.58, 0, 0.39, 1); }
  #landing-page.has-grid .grid ul li.has-img:hover p {
    max-height: 80px;
    margin-top: 25px;
    -webkit-transition: margin 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, max-height 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s;
    -o-transition: margin 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, max-height 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s;
    transition: margin 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, max-height 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s; }
  #landing-page.has-grid .grid ul li.has-img:hover .date {
    margin-top: 25px;
    -webkit-transition: margin 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s;
    -o-transition: margin 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s;
    transition: margin 0.5s cubic-bezier(0.58, 0, 0.39, 1) 0.15s; }
  #landing-page.has-grid .grid ul li.has-img:hover .content,
  #landing-page.has-grid .grid ul li.has-img:hover .overlay {
    height: 55%; } }

@media screen {
  #landing-page.has-grid .projects-wrapper .grid.column.wide ul li.has-img:hover .content,
  #landing-page.has-grid .projects-wrapper .grid.column.wide ul li.has-img:hover .overlay {
    height: 55%; }
  #landing-page .contact-wrapper .contact-blocks .block.faqs .column.right ul li a:hover {
    color: rgba(255, 255, 255, 0.6); }
  #landing-page .contact-wrapper .contact-blocks .block.ask-a-question .form-wrapper form .form-inputs .arrow {
    -webkit-transition: border-top-color .3s ease;
    -o-transition: border-top-color .3s ease;
    transition: border-top-color .3s ease; }
  #landing-page .contact-wrapper .contact-blocks .block.ask-a-question .form-wrapper form .form-inputs:hover .arrow {
    border-top-color: rgba(255, 255, 255, 0.6); }
  #landing-page .contact-wrapper .contact-blocks .block.footer a:hover {
    color: #f5e19a; }
    #landing-page .contact-wrapper .contact-blocks .block.footer a:hover:before, #landing-page .contact-wrapper .contact-blocks .block.footer a:hover:after {
      background-color: #f5e19a; }
  .faq-wrapper ul li a:hover {
    color: #f5e19a;
    border-color: transparent; }
  .faq-wrapper ul li .answer a:hover {
    color: #0d75a4; }
  article a.img-download .icon {
    -webkit-transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, opacity 0.3s ease-out 0.4s;
    -o-transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, opacity 0.3s ease-out 0.4s;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, opacity 0.3s ease-out 0.4s; }
  article a.img-download:hover .icon {
    top: 20px;
    opacity: .6; }
  article ul.share li a svg * {
    -webkit-transition: fill .4s ease-out;
    -o-transition: fill .4s ease-out;
    transition: fill .4s ease-out; }
  article ul.share li a:hover svg * {
    fill: #0d75a4; }
  article .sections section a:not(.button):not(.infographic-button):hover {
    color: #0d75a4; }
  article .sections section.text aside ul li a {
    -webkit-transition: color .4s ease;
    -o-transition: color .4s ease;
    transition: color .4s ease; }
    article .sections section.text aside ul li a:hover {
      color: #f5e19a; }
  article .sections section.text aside ul li.has-image .img img {
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: -webkit-transform .6s ease-out;
    -o-transition: transform .6s ease-out;
    transition: transform .6s ease-out;
    transition: transform .6s ease-out, -webkit-transform .6s ease-out; }
  article .sections section.text aside ul li.has-image:hover .img img {
    -webkit-transform: scale(1.08);
        -ms-transform: scale(1.08);
            transform: scale(1.08); }
  article .sections section.text.highlight aside ul li a:hover {
    color: #0b5170; }
  article .sections section.text.highlight .text a:hover {
    color: #0b5170; }
  article .sections section.faqs .question {
    -webkit-transition: color .4s ease;
    -o-transition: color .4s ease;
    transition: color .4s ease; }
    article .sections section.faqs .question:hover {
      color: #f5e19a;
      border-color: transparent; }
  article .footer .print .icon svg * {
    -webkit-transition: fill .4s ease-out;
    -o-transition: fill .4s ease-out;
    transition: fill .4s ease-out; }
  article .footer .print:hover .icon svg * {
    fill: #0d75a4; }
  article .related-articles-footer ul li a .img span {
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: -webkit-transform .6s ease-out;
    -o-transition: transform .6s ease-out;
    transition: transform .6s ease-out;
    transition: transform .6s ease-out, -webkit-transform .6s ease-out; }
  article .related-articles-footer ul li a:hover .img span {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05); }
  article .related-articles-footer ul li a:hover .label {
    color: #f5e19a; }
  .modulepage .close .icon:before, .modulepage .close .icon:after {
    -webkit-transition: background-color .4s ease;
    -o-transition: background-color .4s ease;
    transition: background-color .4s ease; }
  .modulepage .close:hover {
    color: #0b5170; }
    .modulepage .close:hover .icon:before, .modulepage .close:hover .icon:after {
      background-color: #0b5170; }
  .modulepage .items li a:hover {
    color: #0a8eca; }
  .modulepage .explanation-button span {
    -webkit-transition: background .2s ease-out, color .2s ease-out;
    -o-transition: background .2s ease-out, color .2s ease-out;
    transition: background .2s ease-out, color .2s ease-out; }
  .modulepage .explanation-button:hover span {
    background: #f5e19a;
    color: #ffffff; }
  .modulepage .banner .content {
    -webkit-transition: padding 0.6s cubic-bezier(0.895, 0, 0.155, 1);
    -o-transition: padding 0.6s cubic-bezier(0.895, 0, 0.155, 1);
    transition: padding 0.6s cubic-bezier(0.895, 0, 0.155, 1); }
  .modulepage .banner:hover .content {
    padding-bottom: 50px; }
  .modulepage .step-content a.text-link:hover {
    color: #f5e19a; }
  a.close .icon {
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: -webkit-transform .25s ease-out;
    transition: -webkit-transform .25s ease-out;
    -o-transition: transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
  a.close:hover {
    color: #0b5170; }
    a.close:hover .icon {
      -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
              transform: rotate(90deg); }
  .reservation-wrapper .form-wrapper form .form-inputs .arrow {
    -webkit-transition: border-top-color .3s ease;
    -o-transition: border-top-color .3s ease;
    transition: border-top-color .3s ease; }
  .reservation-wrapper .form-wrapper form .form-inputs:hover .arrow {
    border-top-color: #d5d6d6; }
  .reservation-wrapper .form-wrapper .success-message a:hover {
    color: #0d75a4; }
  .wave-button .hover-ripple:before, .wave-button .hover-ripple:after,
  .wave-button .hover-ripple .inner:before,
  .wave-button .hover-ripple .inner:after {
    -webkit-transition: background .3s ease-out;
    -o-transition: background .3s ease-out;
    transition: background .3s ease-out; }
  .wave-button .hover-ripple svg path,
  .wave-button .hover-ripple svg polygon,
  .wave-button .hover-ripple svg circle,
  .wave-button .hover-ripple svg rect {
    -webkit-transition: fill .3s ease-out;
    -o-transition: fill .3s ease-out;
    transition: fill .3s ease-out; }
  .wave-button.box:hover {
    z-index: 20; }
    .wave-button.box:hover .hover-ripple .inner:after {
      background: #0ba8e9; }
    .wave-button.box:hover .hover-ripple svg path,
    .wave-button.box:hover .hover-ripple svg polygon,
    .wave-button.box:hover .hover-ripple svg circle,
    .wave-button.box:hover .hover-ripple svg rect {
      fill: #0ba8e9 !important; }
  .wave-button.box.transparent:hover .hover-ripple .inner:after {
    background: #0ba8e9; }
  .wave-button.box.transparent:hover .hover-ripple svg path,
  .wave-button.box.transparent:hover .hover-ripple svg polygon,
  .wave-button.box.transparent:hover .hover-ripple svg circle,
  .wave-button.box.transparent:hover .hover-ripple svg rect {
    fill: #0ba8e9 !important; }
  .wave-button.box.light:hover .hover-ripple .inner:after {
    background: #f3f3f3; }
  .wave-button.box.light:hover .hover-ripple svg path,
  .wave-button.box.light:hover .hover-ripple svg polygon,
  .wave-button.box.light:hover .hover-ripple svg circle,
  .wave-button.box.light:hover .hover-ripple svg rect {
    fill: #f3f3f3 !important; }
  .wave-button.rounded:hover .hover-ripple:before, .wave-button.rounded:hover .hover-ripple:after,
  .wave-button.rounded:hover .hover-ripple .inner:before,
  .wave-button.rounded:hover .hover-ripple .inner:after {
    /* background: #0a8eca; */
    }
  .wave-button.rounded:hover .hover-ripple svg path,
  .wave-button.rounded:hover .hover-ripple svg polygon,
  .wave-button.rounded:hover .hover-ripple svg circle,
  .wave-button.rounded:hover .hover-ripple svg rect {
    /* fill: #0a8eca !important; */
    }
  .wave-button.rounded.action:hover .hover-ripple:before, .wave-button.rounded.action:hover .hover-ripple:after,
  .wave-button.rounded.action:hover .hover-ripple .inner:before,
  .wave-button.rounded.action:hover .hover-ripple .inner:after {
    background: #ed5a02; }
  .wave-button.rounded.action:hover .hover-ripple svg path,
  .wave-button.rounded.action:hover .hover-ripple svg polygon,
  .wave-button.rounded.action:hover .hover-ripple svg circle,
  .wave-button.rounded.action:hover .hover-ripple svg rect {
    fill: #ed5a02 !important; }
  .wave-button.rounded.tag:hover .hover-ripple:before, .wave-button.rounded.tag:hover .hover-ripple:after,
  .wave-button.rounded.tag:hover .hover-ripple .inner:before,
  .wave-button.rounded.tag:hover .hover-ripple .inner:after {
    background: #d3d3d3; }
  .wave-button.rounded.tag:hover .hover-ripple svg path,
  .wave-button.rounded.tag:hover .hover-ripple svg polygon,
  .wave-button.rounded.tag:hover .hover-ripple svg circle,
  .wave-button.rounded.tag:hover .hover-ripple svg rect {
    fill: #d3d3d3 !important; }
  .button.notfound {
    -webkit-transition: background .3s ease-out;
    -o-transition: background .3s ease-out;
    transition: background .3s ease-out; }
    .button.notfound:hover {
      background: #0a8eca; }
  article .sections section.infographic ul li a .bg span {
    -webkit-transition: background .3s ease, -webkit-transform .3s ease-out;
    transition: background .3s ease, -webkit-transform .3s ease-out;
    -o-transition: background .3s ease, transform .3s ease-out;
    transition: background .3s ease, transform .3s ease-out;
    transition: background .3s ease, transform .3s ease-out, -webkit-transform .3s ease-out; }
  article .sections section.infographic ul li a .label {
    opacity: 0;
    top: 28%;
    -webkit-transition: opacity 0.3s ease, top 0.5s cubic-bezier(0.21, 0.8, 0.36, 1.62);
    -o-transition: opacity 0.3s ease, top 0.5s cubic-bezier(0.21, 0.8, 0.36, 1.62);
    transition: opacity 0.3s ease, top 0.5s cubic-bezier(0.21, 0.8, 0.36, 1.62); }
  article .sections section.infographic ul li a:hover .bg span {
    background: #0a8eca;
    -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
            transform: scale(1.15); }
  article .sections section.infographic ul li a:hover .label {
    opacity: 1;
    top: 13%; }
  article .sections section.infographic#making-drinking-water svg .button {
    cursor: pointer;
    -webkit-transition: fill .3s ease;
    -o-transition: fill .3s ease;
    transition: fill .3s ease; }
    article .sections section.infographic#making-drinking-water svg .button:hover * {
      fill: #ff6c00; }
  article .sections section.infographic#service-area svg .button {
    display: block;
    cursor: pointer; }
    article .sections section.infographic#service-area svg .button * {
      -webkit-transition: fill .3s ease;
      -o-transition: fill .3s ease;
      transition: fill .3s ease; }
    article .sections section.infographic#service-area svg .button:not(.active):hover * {
      fill: #f5e19a !important; }
  article .sections section.infographic#service-area-stations svg .button {
    cursor: pointer; }
    article .sections section.infographic#service-area-stations svg .button:hover * {
      fill: #ff6c00; }
  article .sections section.infographic .close .icon {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out; }
  article .sections section.infographic .close:hover .icon {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
  .pagination li a:before, .pagination li a:after,
  .pagination li a span:before,
  .pagination li a span:after {
    -webkit-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease; }
  .pagination li a:not(.active):hover {
    color: #0b5170; }
    .pagination li a:not(.active):hover:before, .pagination li a:not(.active):hover:after {
      background: #0b5170; }
    .pagination li a:not(.active):hover span:before, .pagination li a:not(.active):hover span:after {
      background: #0b5170; }
  .pagination li a.active {
    cursor: default; } }

@media screen and (min-width: 700px) {
  a.back {
    -webkit-transition: border-color .3s ease-out;
    -o-transition: border-color .3s ease-out;
    transition: border-color .3s ease-out; }
    a.back .icon:before, a.back .icon:after {
      -webkit-transition: background .3s ease-out;
      -o-transition: background .3s ease-out;
      transition: background .3s ease-out; }
    a.back:hover {
      border-color: #0d75a4; }
      a.back:hover .icon:before, a.back:hover .icon:after {
        background: #0d75a4; }
    a.back.light:hover {
      border-color: rgba(255, 255, 255, 0.6); }
      a.back.light:hover .icon:before, a.back.light:hover .icon:after {
        background: rgba(255, 255, 255, 0.6); }
  .home-indicator li:not(.active) a .icon {
    -webkit-transition: background .3s ease-out;
    -o-transition: background .3s ease-out;
    transition: background .3s ease-out; }
  .home-indicator li:not(.active) a .label {
    -webkit-transition: right .3s ease-out, opacity .2s ease, width 0s ease .3s;
    -o-transition: right .3s ease-out, opacity .2s ease, width 0s ease .3s;
    transition: right .3s ease-out, opacity .2s ease, width 0s ease .3s; }
  .home-indicator li:not(.active) a:hover .icon {
    background: rgba(255, 255, 255, 0.7); }
  .home-indicator li:not(.active) a:hover .label {
    width: 600px;
    opacity: 1;
    right: 30px;
    -webkit-transition: right .3s ease-out, opacity .2s ease;
    -o-transition: right .3s ease-out, opacity .2s ease;
    transition: right .3s ease-out, opacity .2s ease; }
  header .list-menu li a:hover {
    color: rgba(255, 255, 255, 0.6); }
  body.article #page:not(.menu-active) header .list-menu li a:hover, body.landingpage.contact #page:not(.menu-active) header .list-menu li a:hover {
    color: #ffffff;
    background: rgba(0, 0, 0,.3);
    }
  body.scrolled.article.module #page:not(.menu-active) header .logo:hover svg *, body.scrolled.article.search #page:not(.menu-active) header .logo:hover svg *, body.scrolled.article.payment #page:not(.menu-active) header .logo:hover svg *, body.scrolled.article.faq #page:not(.menu-active) header .logo:hover svg * {
    fill: rgba(255, 255, 255, 0.6); }
  .content-frame.home .project-wrapper .project p {
    -webkit-transition: margin 0.8s cubic-bezier(0.58, 0, 0.39, 1), max-height 0.8s cubic-bezier(0.58, 0, 0.39, 1), padding 0.8s cubic-bezier(0.58, 0, 0.39, 1);
    -o-transition: margin 0.8s cubic-bezier(0.58, 0, 0.39, 1), max-height 0.8s cubic-bezier(0.58, 0, 0.39, 1), padding 0.8s cubic-bezier(0.58, 0, 0.39, 1);
    transition: margin 0.8s cubic-bezier(0.58, 0, 0.39, 1), max-height 0.8s cubic-bezier(0.58, 0, 0.39, 1), padding 0.8s cubic-bezier(0.58, 0, 0.39, 1); }
  .content-frame.home .project-wrapper:hover .project p {
    max-height: 80px;
    padding-bottom: 30px;
    margin-top: 30px;
    -webkit-transition: margin 0.7s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, max-height 0.7s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, padding 0.8s cubic-bezier(0.58, 0, 0.39, 1);
    -o-transition: margin 0.7s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, max-height 0.7s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, padding 0.8s cubic-bezier(0.58, 0, 0.39, 1);
    transition: margin 0.7s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, max-height 0.7s cubic-bezier(0.58, 0, 0.39, 1) 0.15s, padding 0.8s cubic-bezier(0.58, 0, 0.39, 1); } }

@media screen and (min-width: 1000px) {
  #landing-page.news .header .tweets .title .label {
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease; }
    #landing-page.news .header .tweets .title .label:hover {
      opacity: 1; }
  .content-frame.home .project-wrapper:hover .project p {
    max-height: 100px; } }