/*
  FONTS
*/

@font-face {
  font-family: 'Aleo';
  src: url('../fonts/aleo-light-webfont.woff2') format('woff2'),
       url('../fonts/aleo-light-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aleo';
  src: url('../fonts/aleo-regular-webfont.woff2') format('woff2'),
       url('../fonts/aleo-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aleo';
  src: url('../fonts/aleo-bold-webfont.woff2') format('woff2'),
       url('../fonts/aleo-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Druk';
  src: url('../fonts/Druk-Medium-Web.woff2') format('woff2'),
       url('../fonts/Druk-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Druk Condensed';
  src: url('../fonts/DrukCond-Super-Web.woff2') format('woff2'),
       url('../fonts/DrukCond-Super-Web.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/*
	NORMALIZE
*/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

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

audio, canvas, video {
  display: inline-block;
}

:root {
  font-size: 62.5%;
  --blue: #2A6AB2;
  --yellow: #FBBA00;
  --green: #85844E;
  --red: #AA1917;
  --grey: #ECECEC;
  --greyT: #7F7F7F;
  --layout: 93.5rem;
}

body {
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
  font-family: 'Aleo', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

a:hover, a:focus, a:active {
  text-decoration: none;
  outline: none;
}

b, strong {
  font-weight: bold;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

small {
  font-size: 80%;
}

img {
  border: 0;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  margin: 0;
}

ul, li {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0;
}

ol li {
  list-style-type: decimal;
}

p {
  line-height: 1em;
  margin-bottom: 0;
  margin-top: 0;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  margin-top: 0;
  margin-bottom: 0;
}

blockquote {
  margin: 0;
  padding: 0;
}


/*
  COMPONENTS
*/

.logo {
  display: block;
  width: 13.4rem;
  height: 5.4rem;
  background-image: url('../img/fundacion-rafa-nadal.svg');
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -6666rem;
  overflow: hidden;
}

html[lang=en] .logo {
  background-image: url('../img/foundation-rafa-nadal.svg');
}

[class*=ico-] {
  display: inline-block;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -6666rem;
  overflow: hidden;
  width: 2.7rem;
  height: 2.7rem;
}

.ico-facebook {
  background-image: url('../img/ico-facebook.svg');
}

.ico-twitter {
  background-image: url('../img/ico-twitter.svg');
}

.ico-linkedin {
  background-image: url('../img/ico-linkedin.svg');
}

.ico-instagram {
  background-image: url('../img/ico-instagram.svg');
}

.ico-youtube {
  background-image: url('../img/ico-youtube.svg');
}

.ico-facebook,
.ico-twitter,
.ico-linkedin,
.ico-instagram,
.ico-youtube {
  background-color: black;
  background-size: auto 1.3rem;
  border-radius: 100%;
}

.ico-youtube {
  background-size: auto 1rem;
}

.button {
  font-family: 'Druk';
  font-weight: 500;
  color: black;
  font-size: 2em;
  line-height: 1.067em;
  letter-spacing: 0.012em;
  text-align: center;
  background: white;
  display: inline-block;
  padding: 1.3rem 1.2rem;
  position: relative;
  z-index: 1;
}

.button strong {
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.container {
  max-width: var(--layout);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

section h2 {
  font-family: 'Druk Condensed';
  font-weight: 900;
  color: black;
  text-align: left;
  text-transform: uppercase;
  font-size: 5.5em;
  line-height: 0.867em;
  letter-spacing: 0.007em;
  position: relative;
}

section h2 strong {
  font-weight: 900;
  display: block;
}

section p {
  font-size: 1.6em;
  line-height: 1.334em;
  letter-spacing: 0.006em;
  text-align: left;
  font-weight: 300;
}

section p strong {
  font-weight: bold;
}

.tabs_menu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.tabs_menu a {
  color: black;
  font-family: 'Druk';
  font-weight: 500;
  font-size: 2.1em;
  line-height: 1em;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid black;
  padding: 0.9rem;
  transition: background 0.25s;
}

html[lang=en] .tabs_menu a {
  padding: 0.9rem 0.2rem;
}

.tabs_menu a.active {
  border-color: var(--yellow);
  background: var(--yellow);
  color: white;
}

.tabs_content {
  display: none;
}

.tabs_content.active {
  display: block;
}

.article {
  padding-left: 2rem;
  padding-right: 2rem;
}

.article figure {
  margin-bottom: 2rem;
}

.article figure img {
  display: block;
}

.article h3 {
  font-family: 'Druk';
  font-weight: 500;
  font-style: normal;
  font-size: 3.4em;
  line-height: 1.042em;
  letter-spacing: 0.002em;
  text-align: left;
  margin-bottom: 1.5rem;
}

.quote p {
  font-family: 'Druk';
  font-weight: 500;
  font-style: normal;
  font-size: 3.4em;
  line-height: 1.042em;
  letter-spacing: 0.002em;
  text-align: left;
  margin-bottom: 1.5rem;
  position: relative;
  padding-top: 5rem;
}

.quote p:before {
  content: '“';
  display: block;
  font-family: 'Druk';
  font-weight: 500;
  font-style: normal;
  font-size: 5.5em;
  line-height: 1em;
  position: absolute;
  top: -2.85rem;
  left: -0.3rem;
}

.quote cite {
  margin-top: auto;
  font-weight: bold;
  font-style: normal;
  font-size: 1.8em;
  line-height: 1.3em;
  letter-spacing: 0.005em;
  text-align: left;
  width: 100%;
  display: block;
}


/*
  SWIPER
*/

.swiper {
  position: relative;
  overflow: hidden;
  list-style: none;
  z-index: 1;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px,0,0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  padding-top: 0.5rem;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-css-mode>.swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.swiper-button-next,
.swiper-button-prev {
  width: 4.2rem;
  height: 4.2rem;
  z-index: 10;
  cursor: pointer;
  display: block;
  align-items: center;
  justify-content: center;
  text-indent: -6666rem;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem auto;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next {
  background-image: url('../img/ico-next.svg');
}

.swiper-button-prev {
  background-image: url('../img/ico-prev.svg');  
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0,0,0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination.swiper-pagination-bullets {
  bottom: 1.5rem;
  left: 50%;
  width: calc(100% - 10rem);
  transform: translateX(-50%);
}

.swiper-pagination-bullet {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  margin: 0 1rem;
  display: inline-block;
  border-radius: 50%;
  background: white;
  border: 1px solid black;
}

.swiper-pagination-bullet-active {
  background: black;
}


/*
  HEADER
*/

.header {
  position: relative;
  z-index: 10;
}

.header:after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  animation: width 1s forwards;
}

.header_container {
  padding: 2.5rem 2rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header_languages {
  font-size: 1.6rem;
  margin-left: auto;
  margin-right: 1rem;
}

.header_languages a {
  color: black;
}

.header_nav_button {
  margin: auto;
  width: 5rem;
  height: 5rem;
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 1;
}

.header_nav_button span,
.header_nav_button:after,
.header_nav_button:before {
  width: 50%;
  height: 0.2rem;
  background: black;
  left: 50%;
  transform: translateX(-50%);
}

.header_nav_button span {
  position: relative;
  top: 50%;
  transform: translateX(-50%) translateY(calc(-50% - 0.1rem));
  transition: all 0ms 250ms;
  display: block;
  text-indent: -6666rem;
  overflow: hidden;
}

.header_nav_button:before {
  content: '';
  position: absolute;
  bottom: 32%;
  transition: bottom 250ms 250ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.header_nav_button:after {
  content: '';
  position: absolute;
  top: 30%;
  transition: top 250ms 250ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.active .header_nav_button:after {
  top: 67%;
  transform: rotate(45deg) translateX(-60%);
  transition: top 250ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.active .header_nav_button:before {
  bottom: auto;
  top: 25%;
  transform: rotate(-45deg) translateX(-60%);
  transition: bottom 250ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.active .header_nav_button span {
  opacity: 0;
}

.header_nav_items {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 1s;  
}

.active .header_nav_items {
  opacity: 1;
  visibility: visible;
}

.header_nav_items li {
  font-family: 'Druk';
  font-weight: 500;
  font-size: 2.2em;
  line-height: 0.91em;
  letter-spacing: 0.007em;
  text-align: left;
  max-width: 9.4rem;
  margin-bottom: 2rem;
}

.header_nav_items li a {
  color: black;
}

body.section-intro .header_nav_items li:nth-of-type(1) a {
  color: var(--greyT);
}

body.section-values .header_nav_items li:nth-of-type(2) a {
  color: var(--blue);
}

body.section-about .header_nav_items li:nth-of-type(3) a,
body.section-quotes .header_nav_items li:nth-of-type(3) a {
  color: var(--yellow);
}

body.section-ods .header_nav_items li:nth-of-type(4) a {
  color: var(--green);
}

body.section-video .header_nav_items li:nth-of-type(5) a,
body.section-closure .header_nav_items li:nth-of-type(5) a {
  color: var(--red);
}


/*
  INTRO
*/

.intro {
  margin-bottom: 7.5rem;
}

.intro .container:after {
  content: '';
  display: block;
  width: 23rem;
  height: 18rem;
  background-image: url('../img/abrazos.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -6666rem;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: -2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 1.5s 1s;
}

.intro.active .container:after {
  bottom: 0.1rem;
  opacity: 1;
  visibility: visible;
}

.intro h2 {
  height: 26rem;
  display: flex;
  align-items: flex-end;
  padding: 3rem 40% 3rem 2rem;
  margin: 0 2rem;
}

.intro h2:after {
  content: '';
  display: block;
  width: 1px;
  height: 0;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  animation: height 1s forwards 0.25s;
}

.intro h2:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: width 1s forwards 1.15s;
  z-index: 1;
}

.intro h2 strong {
  opacity: 0;
  visibility: hidden;
  line-height: 0.667em;
  animation: opacity 0.75s forwards 1.5s, lh 1.5s forwards 1.5s;
  max-width: 20rem;
  padding-top: 0.5rem;
}

.intro h2 .x {
  position: absolute;
  right: 0;
  bottom: -0.1rem;
  width: 9.2rem;
  height: 10rem;
}

.intro h2 .x path {
  stroke: #000000;
  fill: #FFFFFF;
  stroke-width: 0.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s forwards 1.65s, fill 1s forwards 2s;
}

.intro_text {
  padding: 4.5rem 2rem 18rem;
  position: relative;
  margin: 0 2rem;
}

.intro_text p {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-5rem);
}

.active .intro_text p {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: all 1.5s;
}

.intro_text:after {
  content: '';
  display: block;
  width: 1px;
  height: 0;
  background: black;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 1s;
}

.active .intro_text:after {
  height: 100%;
}

.intro_text:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 1s 1s;
}

.active .intro_text:before {
  width: 100%;
}

.active .intro_text:before {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}

.intro_text .button {
  position: absolute;
  bottom: -2.45rem;
  left: 0;
}

.button span span {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 2.5s;
}

.button:before,
.button:after,
.button > span:before,
.button > span:after {
  content: '';
  display: block;
  background: black;
  position: absolute;
  width: 1px;
  height: 1px;
}

.button:before {
  height: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s 1.6s;
}

.active .button:before {
  height: 100%;
}

.button:after {
  width: 0;
  right: 0;
  top: 0;
  transition: all 0.5s 1.9s;
}

.active .button:after {
  width: 100%;
}

.button > span:before {
  height: 0;
  left: 0;
  top: 0;
  transition: all 0.5s 2.2s;
}

.active .button > span:before {
  height: 100%;
}

.button > span:after {
  width: 0;
  left: 0;
  bottom: 0;
  transition: all 0.5s 2.5s;
}

.active .button > span:after {
  width: 100%;
}

.active .button span span {
  opacity: 1;
  visibility: visible;
}


/*
  VALUES
*/


.values {
  overflow: hidden;
  position: relative;
}

.values_bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(1.09);
}

.values .container {
  padding-top: 4rem;
  padding-bottom: 9rem;
}

.values h2 {
  color: var(--blue);
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.values h2 .x {
  display: inline-block;
  vertical-align: middle;
  width: 3.6rem;
  height: 4.77rem;
}

.values h2:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: white;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(calc(-50% + 3rem));
  transition: all 0.5s;
}

.values.active h2:before {
  width: calc(100% - 19rem);
}

.values h2 strong {
  transform: translateX(-3rem);
}

.values h2 span {
  transform: translateX(3rem);
}

.values h2 strong,
.values h2 span {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.values.active h2 strong,
.values.active h2 span {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.values ul {
  padding-left: 2rem;
  padding-right: 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3rem);
  transition: all 0.5s;
}

.values.active ul {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.values li {
  text-align: left;
  font-family: 'Druk';
  font-weight: 500;
  color: white;
  font-size: 2.8em;
  line-height: 1.042em;
  letter-spacing: -0.002em;
}


/*
  ABOUT
*/

.about {
  overflow: hidden;
}

.about .container {
  padding-bottom: 6rem;
}

.about h2 {
  padding: 3rem 23% 12rem 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
  height: 29.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.about h2 strong {
  max-width: 20rem;
  opacity: 0;
  visibility: hidden;
  line-height: 0.667em;
  transition: all 1.5s;
  transition-delay: 1s;
  margin-top: auto;
}

.about.active h2 strong {
  opacity: 1;
  visibility: visible;
  line-height: 0.867em;
}

.about h2:after {
  content: '';
  display: block;
  width: 1px;
  height: 0;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s;
}

.about.active h2:after {
  height: 100%;
}

.about h2:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.5s;
  transition-delay: 0.5s;
}

.about.active h2:before {
  width: 100%;
}

.about .container > p {
  padding: 3rem 2rem;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-3rem);
  transition: all 1s;
  transition-delay: 1.5s;
}

.about.active .container > p {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.about .container > p strong {
  color: var(--yellow);
}

.about .container > p:before {
  content: '';
  display: block;
  width: 23rem;
  height: 18rem;
  background-image: url('../img/amigos.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -6666rem;
  overflow: hidden;
  position: absolute;
  right: -3rem;
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transition-delay: 1.5s;
}

.about.active .container > p:before {
  right: 0;
  opacity: 1;
  visibility: visible;
}

.about_article {
  width: 100%;
}

.about_article h3 {
  color: var(--yellow);
}

.about_quote {
  width: calc(100% - 4rem);
  margin: 5rem 2rem 0;
  border-top: 1px solid black;
  padding-top: 6rem;
  color: var(--yellow);
}

.about_tabs {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3rem);
  transition: all 1s;
  transition-delay: 1.75s;
}

.about.active .about_tabs {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/*
  QUOTES
*/

.quotes {
  position: relative;
}

.quotes:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  transition: all 1s;
}

.quotes.active:before {
  width: 100%;
}

.quotes .container {
  margin: 0 2rem;
  padding: 5rem 0;
}

.quotes .container:before {
  content: '';
  display: block;
  width: 1px;
  height: 0;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
  transition-delay: 0.2s;
}

.quotes.active .container:before {
  height: calc(100% - 12.25rem);
}

.quotes .quote {
  padding-left: 2rem;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  min-height: 55rem;
}

.quotes .quote p {
  font-size: 3.6em;
  padding-top: 12rem;
}

.quotes .quote p:before {
  font-size: 10em;
}

.quotes .quote cite {
  font-weight: 300;
  margin-top: auto;
}

.quotes .quote cite strong {
  font-weight: bold;
  display: block;
}

.quotes .swiper-quotes {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3rem);
  transition: all 1s;
  transition-delay: 0.5s;
}

.quotes.active .swiper-quotes {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.quotes .swiper-controls {
  margin-top: 2.5rem;
}


/*
  ODS
*/

.ods {
  overflow: hidden;
  position: relative;
}

.ods:before {
  content: '';
  display: block;
  width: 0%;
  height: 1px;
  background: black;
  transition: all 1s;
}

.ods.active:before {
  width: 100%;
}

.ods h2 {
  padding: 4rem 0 1.5rem;
  margin: 0 2rem 7rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 19.6rem;
}

.ods h2 strong {
  opacity: 0;
  visibility: hidden;
  line-height: 0.667em;
  transition: all 1.5s;
  transition-delay: 1s;
  margin-top: auto;
}

.ods.active h2 strong {
  opacity: 1;
  visibility: visible;
  line-height: 0.867em;
}

.ods h2:before {
  content: '';
  display: block;
  width: 1px;
  height: 0;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s;
  transition-delay: 0.1s;
}

.ods.active h2:before {
  height: 100%;
}

.ods h2:after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.5s;
  transition-delay: 0.5s;
}

.ods.active h2:after {
  width: 100%;
}

.ods h2 .x {
  position: absolute;
  left: 1.7rem;
  bottom: -5.2rem;
  width: 9.2rem;
  height: 10rem;
  z-index: 1;
}

.ods h2 .x-b {
  z-index: 0;
}

.ods h2 .x:not(.x-b) {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transition-delay: 2s;
}

.ods.active h2 .x:not(.x-b) {
  left: 1rem;
  bottom: -5.5rem;
  opacity: 1;
  visibility: visible;
}

.ods h2 .x-b path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: all 2s;
  transition-delay: 1s;
}

.ods.active h2 .x-b path {
  stroke-dashoffset: 0;
}

.ods h2 strong {
  max-width: 20rem;
}

.ods p {
  padding: 0 2rem;
  margin-bottom: 4rem;
}

.ods p strong {
  color: var(--green);
}

.ods .container > p {
  opacity: 0;
  visibility: hidden;
  transform: translateX(3rem);
  transition: all 1s;
  transition-delay: 2s;
}

.ods.active .container > p {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.ods_article {
  max-width: 36rem;
  min-height: 99rem;
  display: flex;
  flex-direction: column;
}

.ods_article h3 {
  color: var(--green);
}

.ods_article p {
  padding: 0;
  margin-bottom: 3rem;
  letter-spacing: -0.017em;
}

.ods_article ul {
  margin-bottom: 6rem;
}

.ods_article li {
  font-weight: 300;
  font-size: 1.6em;
  line-height: 1.375em;
  letter-spacing: -0.006em;
  text-align: left;
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: 0.5rem;
}

.ods_article li:before {
  content: '•';
  display: block;
  position: absolute;
  left: 1rem;
  top: 0rem;
}

.ods_article > img {
  max-width: 8rem;
  display: block;
  margin-top: auto;
}

.ods .swiper-ods {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3rem);
  transition: all 1s;
  transition-delay: 2.5s;
}

.ods.active .swiper-ods {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ods .swiper-controls {
  width: calc(100% - 10rem);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
}

.ods .swiper-pagination-bullet-active {
  background: var(--green);
}


/*
  VIDEO
*/

.video {
  margin-top: 5rem;
  position: relative;
}

.video:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  transition: all 1s;
}

.video.active:before {
  width: 100%;
}

.video .container {
  padding: 6rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transition-delay: 0.5s;
}

.video.active .container {
  opacity: 1;
  visibility: visible;
}

.player {
  width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.player iframe {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/*
  CLOSURE
*/

.closure {
  margin-bottom: 6rem;
  position: relative;
}

.closure:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  transition: all 1s;
}

.closure.active:before {
  width: 100%;
}

.closure .container {
  text-align: left;
}

.closure p {
  font-size: 2em;
  line-height: 1.250em;
  letter-spacing: -0.011em;
  text-align: left;
  font-weight: 300;
  padding: 5rem 2rem 8rem;
  margin: 0 2rem;
  position: relative;
}

.closure p span:not(.x) {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-3rem);
  transition: all 1s;
  transition-delay: 2s;
}

.closure.active p span:not(.x) {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.closure p:after {
  content: '';
  display: block;
  width: 1px;
  height: 0;
  background: black;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.5s;
  transition-delay: 0.5s;
}

.closure.active p:after {
  height: 100%;
}

.closure p:before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  transition: all 0.5s;
  transition-delay: 1s;
}

.closure.active p:before {
  width: 100%;
}

.closure p .x {
  position: absolute;
  right: 2rem;
  bottom: -0.1rem;
  width: 8rem;
  height: 8.7rem;
}

.closure p .x path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s, fill 1s;
  transition-delay: 1s, 2s;
}

.closure.active p .x path {
  stroke-dashoffset: 0;
  fill: #000000;
}

.closure p strong {
  font-weight: bold;
}

.closure .button {
  margin-left: 2rem;
}


/*
  FOOTER
*/

.footer {
  background: var(--grey);
}

.footer_container {
  padding: 3rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.footer_social {
  margin-left: auto;
}

.footer_social ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.footer_social li {
  margin-left: 0.9rem;
}

.footer_legal {
  background: black;
  padding: 2rem;
}

.footer_legal li {
  color: white;
  font-size: 1.6em;
  line-height: 1.5em;
  letter-spacing: -0.017em;
}

.footer_legal li:first-child {
  margin-bottom: 2rem;
}

.footer_legal li a {
  color: white;
}


/*
  SMALL MOBILE
*/

@media (max-width: 359px){
  
  .about h2 {
    padding-bottom: 17rem;
  }
  
  .tabs_menu a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
}


/*
  TABLET
*/

@media (min-width: 768px){
  
  
  /*
    COMPONENTS
  */
  
  .tabs_menu {
    max-width: 52rem;
  }
  
  .tabs_menu a {
    font-size: 2.4em;
    width: 11rem;
  }
  
  .tabs_content {
    justify-content: space-between;
  }
  
  .tabs_content.active {
    display: flex;
  }
  
   
  /*
    HEADER
  */
  
  body {
    padding-top: 10.4rem;
  }
  
  .header {
    background: white;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
  
  .header_container {
    padding-top: 4rem;
  }
  
  .header_languages {
    margin-right: 3rem;
    margin-left: 1rem;
    margin-top: auto;
    position: absolute;
    top: 0;
    right: -2rem;
    width: auto;
    border: 1px solid black;
    border-top: none;
    padding: 0.5rem;
    font-size: 1.4rem;
  }
  
  .header_nav {
    width: 54rem;
  }
  
  .header_nav_button {
    display: none;
  }
  
  .header_nav_items,
  .active .header_nav_items {
    opacity: 1;
    visibility: visible;
    position: relative;
    background: transparent;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .header_nav_items li {
    margin-bottom: 0;
  }
  
  .header_nav_items li:nth-of-type(2) {
    max-width: 6.5rem;
  }
  
  .header_nav_items li:nth-of-type(3) {
    max-width: 7.6rem;
  }
  
  html[lang=en] .header_nav_items li:nth-of-type(3) {
    max-width: 5.4rem;
  }
  
  .header_nav_items li:nth-of-type(4) {
    max-width: 7.8rem;
  }
  
  html[lang=en] .header_nav_items li:nth-of-type(4) {
    max-width: 5.8rem;
  }
  
  .header_nav_items li:nth-of-type(5) {
    max-width: 5.7rem;
  }
  
  html[lang=en] .header_nav_items li:nth-of-type(5) {
    max-width: 9.8rem;
  }
  
  .header_nav_items li a {
    transition: color 0.25s;
  }
  
  
  /*
    INTRO
  */
  
  html[lang=en] .intro h2 strong {
    max-width: 22rem;
  }
  
  
  /*
    ABOUT
  */
  
  .about h2 {
    padding-bottom: 3rem;
  }
  
  .about_article {
    max-width: 48rem;
  }
  
  .about_quote {
    max-width: 39.6rem;
    margin: 0 2rem 0 0;
    border: none;
    padding-left: 2rem;
    border-left: 1px solid black;
    display: flex;
    flex-direction: column;
  }
  
  
  /*
    QUOTES
  */
  
  .quotes .quote {
    max-width: 60rem;
    min-height: 35rem;
  }
  
  
  /*
    ODS
  */
  
  .ods_article {
    max-width: 100%;
    min-height: 49rem;
    padding-left: 38rem;
    position: relative;
  }
  
  .ods_article figure {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 35.5rem;
  }
  
  .ods_article ul {
    margin-bottom: 3rem;
  }
  
  .ods .swiper-controls {
    width: calc(100% - 46rem);
  }
  
  .ods .swiper-pagination-bullet {
    margin: 0 0.4rem;
  }
  
}


/*
  DESKTOP
*/

@media (min-width: 1024px){
  
  /*
    COMPONENTS
  */
  
  .button {
    overflow: hidden;
    font-size: 3em;
  }
  
  .button span span:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: black;
    transform: translate(-50%,-50%);
    transition: all 0.35s;
    z-index: -1;
    border-radius: 100%;
  }
  
  .button strong {
    transition: color 0.25s 0.1s;
  }
  
  .button:hover strong {
    color: white;
  }
  
  .button:hover span span:before {
    width: 25rem;
    height: 25rem;
  }
  
  section h2 {
    font-size: 15em;
  }
  
  section p {
    font-size: 1.8em;
    line-height: 1.334em;
    letter-spacing: 0.006em;
  }
  
  .tabs_menu {
    max-width: 48rem;
    padding-left: 0;
    padding-right: 0;
  }
  
  .tabs_menu a {
    position: relative;
    overflow: hidden;
  }
  
  .tabs_menu a:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--yellow);
    transform: translate(-50%,-50%);
    transition: all 0.5s;
    z-index: -1;
    opacity: 0.1;
    border-radius: 100%;
  }

  .tabs_menu a:hover:before {
    width: 25rem;
    height: 25rem;
  }
  
  .article:not(.ods_article) {
    padding-left: 0;
    padding-right: 0;
  }
  
  .article h3 {
    font-size: 4.8em;
  }
  
  .quote p {
    font-size: 4.8em;
    padding-top: 8rem;
  }
  
  .quote cite {
    font-size: 2em;
  }
  
  
  /*
    SWIPER
  */
  
  .swiper-pagination-bullet {
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    width: 2.2rem;
  }
  
  
  /*
    HEADER
  */
  
  .header_container {
    padding-left: 0;
    padding-right: 0;
  }
  
  .header_languages {
    margin-right: auto;
    margin-left: 3rem;
  }
  
  
  /*
    INTRO
  */
  
  .intro {
    margin-bottom: 12.3rem;
  }
  
  .intro .container:after {
    width: 49.5rem;
    height: 39rem;
    right: -4.5rem;
  }
  
  .intro h2 {
    height: 63rem;
    padding: 5.8rem 40% 2.2rem 3rem;
    margin: 0;
  }
  
  html[lang=en] .intro h2 {
    padding-right: 32%;
  }
  
  html[lang=en] .intro h2 strong {
    max-width: 100%;
  }
  
  .intro h2 .x {
    width: 32.1rem;
    height: 34.6rem;
  }
  
  .intro h2 strong {
    max-width: 100%;
    padding-top: 0;
  }
  
  .intro_text {
    padding: 9.1rem 51.4% 12.2rem 0;
    margin: 0;
  }
  
  .intro_text .button {
    bottom: -2.9rem;
  }
  
  
  /*
    VALUES
  */
  
  .values .container {
    padding-top: 6.8rem;
    padding-bottom: 18rem;
  }

  .values h2 {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1.6rem;
  }

  .values h2 .x {
    width: 10.7rem;
    height: 11.6rem;
    margin-top: -3rem;
  }

  .values h2:before {
    top: 4.7rem;
    transform: translateX(calc(-50% + 7rem));
  }

  .values.active h2:before {
    width: calc(100% - 40rem);
  }

  .values ul {
    padding-left: 0;
    padding-right: 0;
  }
  
  .values li {
    font-size: 4.8em;
  }
  
  
  /*
    ABOUT
  */
  
  .about .container {
    padding-bottom: 12rem;
  }
  
  .about h2 {
    margin-left: 0;
    margin-right: 0;
    padding: 9.8rem 43% 1.6rem 3rem;
    height: 50.4rem;
  }
  
  .about h2 strong {
    max-width: 50rem;
  }
  
  .about .container > p {
    padding: 6rem 50% 8.6rem 0;
  }
  
  .about .container > p:before {
    width: 45.5rem;
    height: 41.5rem;
    right: -5rem;
  }
  
  .about_article {
    margin: 0;
    padding: 0;
  }
  
  .about_quote {
    margin: 0;
    padding: 0;
    padding-left: 2rem;
    margin-top: -7.5rem;
  }
  
  
  /*
    QUOTE
  */
  
  .quotes .container {
    margin: 0 auto;
    padding: 8.4rem 0 7rem;
  }
  
  .quotes.active .container:before {
    height: calc(100% - 14.25rem);
  }
  
  .quotes .quote {
    max-width: 90rem;
    padding-left: 5.5rem;
    padding-right: 5.5rem;
    min-height: 58rem;
  }
  
  .quotes .quote p {
    font-size: 6em;
    line-height: 1.034em;
    padding-top: 15.2rem;
  }
  
  .quotes .quote p:before {
    font-size: 10em;
    top: -6.6rem;
    left: -0.8rem;
  }
  
  .quote cite {
    font-size: 1.8em;
  }
  
  
  /*
    ODS
  */
  
  .ods h2 {
    padding-top: 10rem;
    margin-bottom: 3rem;
    height: 50.5rem;
  }
  
  .ods h2 strong {
    max-width: 49.5rem;
  }
  
  html[lang=en] .ods h2 strong {
    max-width: 35rem;
  }
  
  .ods h2 .x {
    width: 32.1rem;
    height: 34.8rem;
    left: 3.4rem;
    bottom: -18.2rem;
  }
  
  .ods h2 .x:not(.x-b) {
    transition-delay: 3s;
  }

  .ods.active h2 .x:not(.x-b) {
    left: 1.4rem;
    bottom: -19rem;
  }

  .ods h2 .x-b path {
    transition-duration: 4s;
  }

  .ods .container > p {
    max-width: 45rem;
    margin-left: 45%;
    margin-bottom: 11rem;
    padding: 0;
  }
  
  .ods_article {
    min-height: 59.5rem;
    padding-right: 0;
  }
  
  .ods_article {
    padding-left: 48rem;
    margin-bottom: 2.7rem;
  }
  
  .ods_article figure {
    max-width: 45.5rem;
  }
  
  .ods_article h3 {
    margin-top: -0.6rem;
    max-width: 25rem;
    margin-bottom: 3.1rem;
  }
  
  .ods .swiper-slide:nth-of-type(4) h3 {
    max-width: 29rem;
  }
  
  .ods .swiper-controls {
    width: 31rem;
    bottom: 2rem;
  }
  
  .ods_article ul {
    margin-bottom: 5rem;
  }
  
  .ods_article li {
    margin-bottom: 0.8rem;
  }
  
  .ods_article > img {
    max-width: 10rem;
  }
  
  
  /*
    VIDEO
  */

  .video {
    margin-top: 9rem;
  }
  
  .video .container {
    padding: 12rem 0;
  }
  
  
  /*
    CLOSURE
  */

  .closure {
    padding-bottom: 6.3rem;
  }

  .closure p {
    font-size: 2.4em;
    padding: 6.2rem 42% 9rem 0;
    margin: 0;
  }
  
  .closure .button {
    margin-top: -3rem;
    margin-left: 0;
  }
  
  .closure p .x {
    width: 21.5rem;
    height: 23.3rem;
    right: 8rem;
  }
  
  .closure p .x path {
    transition: stroke-dashoffset 6s, fill 1s;
    transition-delay: 1s, 3s;
  }
  
  
  /*
    FOOTER
  */
  
  .footer_container,
  .footer_legal {
    padding-left: 0;
    padding-right: 0;
  }
  
  .footer_social li {
    margin-left: 1.6rem;
  }
  
  .footer_legal ul {
    max-width: var(--layout);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer_legal li:nth-of-type(3):before,
  .footer_legal li:nth-of-type(4):before {
    content: ' · ';
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.4rem;
  }
  
  .footer_legal li:first-child {
    margin-bottom: 0;
  }

  .footer_legal li:first-child {
    margin-right: auto;
  }
  
  .footer a {
    transition: opacity 0.5s;
  }
  
  .footer a:not(.logo):hover {
    opacity: 0.7;
  }
  
}


/*
  LARGE DESKTOP
*/

@media (min-width: 1800px){
  
  .values .container {
    padding-top: 12rem;
    padding-bottom: 24rem;
  }
  
}


/*
  KEYFRAMES
*/

@keyframes opacity {
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes width {
  100% {
    width: 100%;
  }
}

@keyframes height {
  100% {
    height: 100%;
  }
}

@keyframes lh {
  100% {
    line-height: 0.867em;
  }
}

@keyframes dash {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fill {
  100% {
    fill: #000000;
  }
}