@font-face {
  font-family: "versus";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Comfortaa/Comfortaa-Regular.ttf") format("truetype"); }
@font-face {
  font-family: "versus";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Comfortaa/Comfortaa-Bold.ttf") format("truetype"); }

/*------------------------------------*\
    $RESET
\*------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong,
sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure,
footer, header, main, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: fs(small);
  vertical-align: baseline;
  background: transparent;
  font-family: "versus", sans-serif;
  color: #000; }

h1, h2, h3, h4, h5, h6 {
  color: #000000; }


article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block; }

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

img {
  max-width: 100%;
  border-width: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }

p {
  padding-bottom: 1em;
  font-size: 1rem; }

a {
  text-decoration: underline;
  cursor: pointer;
  color: #FA870C; }

a:hover {
  text-decoration: underline;
  color: #8C4800; }

a:active, a:active * {
  outline: none !important;
  -moz-outline-style: none !important; }

ul {
  list-style: none; }

body {
  overflow: hidden; }


/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 2.4rem;
}

h3 {  
  font-weight:400;
  font-size: 1.5em;
  letter-spacing: 1px;
  line-height: 2rem;
  padding-bottom: 4rem;
}
h3.end {  
  padding-bottom: 0rem;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
  border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
  overflow: hidden;
}







footer .content {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 100px; }
  @media screen and (max-width: 1024px) {
    footer .content {
      padding-left: 25px; } }



.grid_s {
  max-width: 1440px;
  margin: 0px auto;
}




.logo {
  position: absolute;
  top: 150px;
  left:80px;}


.menu_mobile {display: none;}  

header {
  position: absolute;
  top: 80px;
  right: 80px;
  z-index: 3;
  padding: 24px 16px;
  border-radius: 100px;
  width: auto; 
  background-color: rgb(255 255 255 / 50%);
  backdrop-filter: blur(8px);
}
header nav {
  display: flex;
  justify-content: space-between;}
header ul.menu {
  display: flex;
  flex: 1;
  justify-content: flex-end; 
}
header ul.menu li {
  align-self: flex-end;
  padding: 0px 4px;
  font-size: 14px;
  font-weight: bold;
}
header ul.menu li a {
    color: #000; 
    background: none;
    padding: 12px;
    border-radius: 32px;
    text-decoration: none;
}
header ul.menu li a:hover{
    color: #fff;
    background: #FA870C;
    text-decoration: none;
}
header ul.menu li.active a {
  color: #fff; 
  background: #333;
}
header.animate {
  position: fixed;
  top: 20px;
}






/*GALLERY HOME*/

.gallery {
  background: #f2f2f2;
  padding: 80px 0;
}

.gallery img {
  display: block;
  height: auto;
  width: 100%;
}

.gallery .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0px 80px 2vw;
}

.gallery .container__item {
  height: auto;
  margin-top: 2vw;
  width: 97vw;
}

.gallery .container__item:nth-child(-n+2) {
  flex: none;
  margin: 0;
  width: 49%;
}
.gallery .container__item:first-child {
  margin-right: 2%;
}
.gallery .container__item:nth-child(n+3) {
  flex: 1;
  margin-right: 2%;
}
.gallery .container__item:last-child {
  margin-right: 0;
}






/*COVER*/

.cover {
  background-image: url(../img/header/home.png);
  background-size : cover;
  background-position: center;
  height : 75vh;
}

.cover.home {
  background-image: url(../img/header/home.png);
}

.cover.proyecto {
  background-image: url(../img/header/proyecto.png);
  background-position: bottom;
  height : 50vh;
}

.cover.harmonii {
  background-image: url(../img/header/harmonii.png);
  background-position: bottom;
  height : 50vh;
}

.cover.colabora {
  background-image: url(../img/header/colabora.png);
  background-position: bottom;
  height : 50vh;
}
.cover.documental {
  background-image: url(../img/header/documental.png);
  background-position: bottom;
  height : 65vh;
}

.cover.socios {
  background-image: url(../img/header/socios.png);
  background-position: bottom;
  height : 50vh;
}




/*MARQUEE*/

.marquee {
  padding: 120px 80px;
}
.marquee.surface {
  background: #f2f2f2;
}
.marquee .content {
  display: flex;
  gap: 120px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0px 0px;
  flex-flow: row;
}
.marquee .title {
  flex: 1;
}
.marquee .description {
  flex: 2;
}







/*POST*/

.post {
  margin-top:120px;
  padding: 120px 80px;
  background: #f2f2f2;
}
.post .content {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0px 0px;
}
.post .title {
  width: 50vw;
}
.post .description {
  width: 50vw;
}
.post h3 {  
  font-size: 2em;
  letter-spacing:0;
  line-height: 2rem;
  padding: 40px 0px;
  font-weight: bold;
}


#Superbody{
  width: 100%;
  height: 150vw;
  background-color: blue;
}

#Textprinted{
  position: fixed;
  left: 38.5%;
  width: 80%;
  padding: 1%;
  color: white;
}




div.logos, div.co-logos  {
  display: flex;
  gap: 100px;
  align-items:center;
  justify-content:center;
}

div.co-logos  {
  flex-wrap: wrap;
}

div.co-logos img {
  width: auto;
}




footer {
  padding:50px 0 10px;
  background: #000;
}
footer .info-footer label {
  font-size: 12px;
  color: #666;}
footer .info-footer {
  padding: 40px 0px 20px;
}




.menu_mobile {
  background: #000;
  padding: 20px 40px;

}


.button_container {
  position: absolute;
  top: 32px;
  right: 40px;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
  z-index: 10;
  display: none; }
.button_container:hover {
  opacity: .7; }
.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #ffffff; }
.button_container.active .middle {
  opacity: 0;
  background: #ffffff; }
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #ffffff; }
.button_container span {
  background: #ccc;
  border: none;
  border-radius: 6px;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer; }
  .button_container span:nth-of-type(2) {
    top: 11px; }
  .button_container span:nth-of-type(3) {
    top: 22px; }

.overlay {
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index: 4; }
  .overlay.open {
    opacity: 1;
    visibility: visible;
    height: 100%; }
    .overlay.open li {
      animation: fadeInRight .5s ease forwards;
      animation-delay: .35s; }
      .overlay.open li:nth-of-type(2) {
        animation-delay: .4s; }
      .overlay.open li:nth-of-type(3) {
        animation-delay: .45s; }
      .overlay.open li:nth-of-type(4) {
        animation-delay: .50s; }
  .overlay nav {
    position: relative;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(24px + 16 * ( (100vw - 480px) / 1060));
    font-weight: 400;
    text-align: center; }
   
  .overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%; }
    .overlay ul li {
      display: block;
      height: calc(100% / 4);
      min-height: 50px;
      position: relative;
    text-align: left;
    padding-left: 40px;}
      .overlay ul li a {
        display: block;
        position: relative;
        color: #ffffff;
        text-decoration: none;
        overflow: hidden; }
        .overlay ul li a:hover {
        color: #FA870C; }


.cookies {
  position: fixed;
  width: calc(100% - 20px);
  bottom: 10px;
  left: 10px;
  background-color: #000;
  font-size: 14px;
  font-style: normal;
  display: flex;
  flex-direction:row;
  z-index: 10;
  color: #fff;
  padding: 20px;
  border: 1px solid #333; 
}
.cookies div {
  color: #fff; 
  flex: 1;
}
.cookies a {
  border-radius: 4px;
  border: 0px none;
  cursor: pointer;
  font-size: 14px;
  background: #333333;
  color: #ffffff;
  padding: 20px;
  display: inline-flex;
  align-self: flex-end; 
}
.cookies a:hover {
  background: #4d4d4d; 
}
.cookies.visited {
  display: none; 
}






/*             768px
   ========================================================================== */
@media (max-width: 768px) {

  .marquee, .post {
    margin: 20px 0px;
    padding: 20px 40px;
  }

  .gallery {
    padding: 32px 0px;
  }
  .gallery .container {
    padding: 0px 32px 32px;
  }
  .gallery .container__item {
    margin-top: 32px;
}
  .gallery .container__item:first-child {
    margin-right: 0px;
    margin-top: 0px!important;
  }
  .gallery .container__item:last-child {
    margin-right: 0;
  }
  .gallery .container__item:nth-child(-n+2) {
    flex: none;
    width: 100%;
    margin-top: 32px;
  }
  .gallery .container__item:nth-child(n+3) {
    flex: none;
    width: 100%;
     margin-right:0px;
  }





/*             992px
   ========================================================================== */
@media (max-width: 992px) {


  h1, h2, .post h3 {
    font-size: 1.8rem;
  }

  h3 {  
    font-size: 1.2em;
    letter-spacing:0px;
    line-height: auto;
  }
  header {
    display: none;
  }
  .logo {display: none;}
  .menu_mobile {display: block;}  
  .button_container {
    display: block;
  } 
  .cover {
    height : 50vw;
  }

  .marquee .content {
    flex-flow: column;
    padding: 0px;
  }
  


  .post .content {
    margin: 0 auto;
    padding: 0px 0px;
    width: 100%;
  }





}


/*             1200px
   ========================================================================== */
@media (max-width: 1200px) {

  .marquee .content {
    gap: 60px;
  }
  div.logos {
    gap: 60px;
    flex-direction: column;
  }

  div.co-logos {
    gap: 60px;
    flex-direction: column;
  }

}