/*
0-600px : Phone
600px-900px : Tablet portrait
900px-1200px : Tablet landscape
1200-1800 : Normal style
1800px + : Big desktop

$breakpoint argument choices ::after
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typo > general layout + grid > page layout > components

1em = 16px
*/
@keyframes appears {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes appears-grows {
  0% {
    opacity: 0;
    transform: scaleX(1) translateY(-70vh); }
  33% {
    transform: scaleX(0.8) translateY(-70vh); }
  66% {
    transform: scaleX(1.2) translateY(-70vh); }
  100% {
    transform: scaleX(1) translateY(-70vh); } }

@keyframes take-of-stage-1 {
  0% {
    transform: rotateX(-90deg) translateY(-5rem) scale(0.5); }
  50% {
    transform: rotateX(-90deg) translateY(-3rem) translateZ(10rem) scale(0.6); }
  100% {
    transform: rotateX(-90deg) translateY(0rem) translateZ(10rem) scale(1);
    box-shadow: 0 0 1rem 0.3rem rgba(51, 51, 51, 0.8), 0 0 2rem 0.3rem rgba(51, 51, 51, 0.5); } }

@keyframes move {
  O, 100% {
    transform: translate(-50%, -50%) rotate(4deg); }
  50% {
    transform: translate(-50%, -50%) rotate(-4deg); } }

@keyframes enlarge {
  O, 100% {
    top: -100%;
    height: 400%; }
  50% {
    top: -90%;
    height: 450%; } }

@keyframes blink {
  to {
    filter: blur(6em) opacity(0.8); } }

*,
*::after,
*::before {
  padding: 0px;
  box-sizing: inherit;
  margin: 0; }

html {
  font-size: 10px; }
  @media (min-width: 112.5em) {
    html {
      font-size: 12px; } }
  @media (max-width: 75em) {
    html {
      font-size: 8px; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 6px; } }

body {
  box-sizing: border-box; }

body {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  padding: 3rem; }
  @media (max-width: 37.5em) {
    body {
      padding: 0rem; } }

.heading-primary {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 3rem;
  background-image: linear-gradient(to right, #313888, #8f9aff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
  letter-spacing: .5rem;
  backface-visibility: hidden; }
  .heading-primary--1 {
    transform: translateY(100%); }
  .heading-primary--2 {
    transform: translateY(200%);
    margin-bottom: 10rem; }

.heading-primary-light {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 3rem;
  color: #eee;
  display: inline-block;
  letter-spacing: .5rem; }

.heading-secondary-light {
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: .2rem;
  color: #eee;
  display: inline-block;
  margin-top: 8rem; }

.heading-secondary {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: .4rem; }

.heading-tertiary {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: .4rem;
  color: #eee;
  text-shadow: .1rem .1rem .1rem black; }

.paragraph {
  font-size: 1.6rem;
  letter-spacing: .1rem;
  text-align: justify; }
  .paragraph:not(:last-child) {
    margin-bottom: 3rem; }
  @media (max-width: 37.5em) {
    .paragraph {
      width: 60vw;
      justify-content: center; } }

.paragraph-right {
  font-size: 1.6rem;
  letter-spacing: .1rem;
  text-align: justify; }
  .paragraph-right:not(:last-child) {
    margin-bottom: 3rem; }
  @media (max-width: 37.5em) {
    .paragraph-right {
      width: 80vw;
      justify-content: center; } }

.legal {
  font-size: 1.5rem;
  letter-spacing: .2rem;
  color: #eee;
  text-decoration: none;
  transition: .3s ease-in-out; }
  .legal:hover {
    transform: skew(-10deg) scale(1.05); }

.legal__title {
  font-size: 2rem;
  color: #eee;
  letter-spacing: .2rem;
  margin-top: 4rem;
  margin-bottom: 1rem; }

.legal__text {
  font-size: 2rem;
  color: #eee;
  letter-spacing: .2rem;
  margin-bottom: 1rem; }
  .legal__text:nth-of-type(1) {
    margin-top: 2rem; }

.u-center-text {
  text-align: center; }

.u-margin-bottom-big {
  margin-bottom: 8rem; }

.u-margin-bottom-medium {
  margin-bottom: 4rem; }

.u-margin-bottom-small {
  margin-bottom: 1rem; }

.section-about {
  background-color: #eee;
  padding: 25rem 1rem;
  margin-top: -20vh; }
  @media (max-width: 75em) {
    .section-about {
      padding: 50rem 3rem; } }
  @media (max-width: 37.5em) {
    .section-about {
      padding: 25rem 3rem; } }

.section-horses {
  padding: 23rem 8rem;
  background-color: #444c97;
  clip-path: polygon(0 20vh, 100% 0, 100% 100%, 0% 100%);
  margin-top: -20vh; }
  @media (max-width: 37.5em) {
    .section-horses {
      padding: 23rem 3rem;
      clip-path: polygon(0 7vh, 100% 0, 100% 100%, 0% 100%);
      margin-top: -7vh; } }

.section-library {
  padding: 23rem 8rem 15rem 8rem;
  background-color: #313888;
  clip-path: polygon(0 20vh, 100% 0, 100% 100%, 0% 100%);
  margin-top: -20vh;
  border-bottom: 10px solid #313888; }
  @media (max-width: 37.5em) {
    .section-library {
      padding: 18rem 0 6rem 0rem;
      clip-path: polygon(0 7vh, 100% 0, 100% 100%, 0% 100%);
      margin-top: -7vh; } }

.section-links {
  padding: 23rem 8rem;
  background-color: #313888;
  background-image: linear-gradient(to bottom, #313888, rgba(49, 56, 136, 0.5), rgba(68, 76, 151, 0.5), #444c97), url(/img/photo-group.jpeg);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  clip-path: polygon(0 20vh, 100% 0, 100% 100%, 0% 100%);
  margin-top: -20vh; }
  @media (max-width: 56.25em) {
    .section-links {
      padding: 18rem 4rem;
      clip-path: polygon(0 7vh, 100% 0, 100% 100%, 0% 100%);
      margin-top: -7vh; } }

.section-contact {
  padding: 23rem 8rem;
  background-color: #444c97;
  clip-path: polygon(0 20vh, 100% 0, 100% 100%, 0% 100%);
  margin-top: -20vh; }
  @media (max-width: 56.25em) {
    .section-contact {
      padding: 18rem 4rem;
      clip-path: polygon(0 7vh, 100% 0, 100% 100%, 0% 100%);
      margin-top: -7vh; } }

.section-legal {
  padding: 10rem 8rem;
  background-color: #313888;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; }
  @media (max-width: 37.5em) {
    .section-legal {
      padding: 8rem; } }

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-image: url("/img/wood.jpg");
  padding: 3rem;
  margin-top: -3px;
  flex-wrap: wrap; }
  @media (max-width: 37.5em) {
    .footer {
      flex-direction: column; } }
  .footer__img {
    background-image: url("/img/logo-elroc-small.png");
    background-size: cover;
    height: 10rem;
    width: 10rem; }
  .footer__a {
    color: #eee;
    font-size: 2rem;
    text-decoration: none;
    margin: 2rem;
    transition: .3s ease-in-out; }
    .footer__a:hover {
      transform: skew(-10deg) scale(1.05); }
  .footer__plxwebdesign {
    width: 100%;
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 1rem; }
    @media (max-width: 37.5em) {
      .footer__plxwebdesign {
        justify-content: center; } }
    .footer__plxwebdesign__link {
      color: #eee;
      font-size: 2rem; }
      .footer__plxwebdesign__link a {
        color: #eee;
        font-size: 2rem; }
    .footer__plxwebdesign__logo {
      border-radius: 50%; }

.btn-text:link, .btn-text:visited {
  background-color: #313888;
  color: #eee;
  display: inline-block;
  padding: .5rem 1.5rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 1.5rem 0 rgba(49, 56, 136, 0.5);
  transition: all .2s; }

.btn-text:hover {
  transform: scale(1.02);
  padding: .5rem 1.5rem; }

.btn-text:active {
  transform: scale(0.95);
  box-shadow: 0 0.3rem 1rem 0 rgba(49, 56, 136, 0.9); }

.btn-results:link, .btn-results:visited {
  background-color: #313888;
  color: #eee;
  display: inline-block;
  padding: .5rem 1.5rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 1.5rem 0 rgba(49, 56, 136, 0.5);
  transition: all .2s; }

.btn-results:hover {
  transform: scale(1.02);
  padding: .5rem 1.5rem; }

.btn-results:active {
  transform: scale(0.95);
  box-shadow: 0 0.3rem 1rem 0 rgba(49, 56, 136, 0.9); }

.composition {
  position: relative; }
  .composition__photo {
    width: 55%;
    box-shadow: 0 1.5rem 4rem rgba(49, 56, 136, 0.4);
    border-radius: 2px;
    position: absolute;
    z-index: 10;
    transition: all .2s;
    outline-offset: 1.2rem; }
    .composition__photo--p1 {
      left: 0;
      top: -2rem; }
    .composition__photo--p2 {
      right: 0;
      top: 2rem; }
    .composition__photo--p3 {
      left: 20%;
      top: 10rem; }
    .composition__photo:hover {
      outline: 1.2rem solid #444c97;
      transform: scale(1.05) translateY(-0.5rem);
      box-shadow: 0 2.5rem 4rem rgba(49, 56, 136, 0.5);
      z-index: 20; }
    @media (max-width: 37.5em) {
      .composition__photo {
        width: 55%;
        box-shadow: 0 1.5rem 4rem rgba(49, 56, 136, 0.4);
        border-radius: 2px;
        position: absolute;
        z-index: 10;
        transition: all .2s;
        outline-offset: 1.2rem;
        margin-top: 5rem; }
        .composition__photo--p1 {
          left: auto;
          right: 0;
          top: 1rem; }
        .composition__photo--p2 {
          right: 0;
          top: 10rem; }
        .composition__photo--p3 {
          left: auto;
          right: 0;
          top: 20rem; } }
  .composition:hover .composition__photo:not(:hover) {
    transform: scale(0.95);
    -webkit-transform: scale(0.95); }

.caroussel {
  perspective: 100rem;
  margin-top: -10rem; }
  @media (max-width: 56.25em) {
    .caroussel {
      transform: scale(0.7);
      -webkit-transform: scale(0.7); } }
  @media (max-width: 37.5em) {
    .caroussel {
      transform: scale(0.4);
      -webkit-transform: scale(0.4);
      margin-top: -7rem;
      margin-left: 60vw; } }

@keyframes rotate-caroussel {
  100% {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg); } }
  .caroussel__container {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    perspective: 100000rem;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: 60s rotate-caroussel linear infinite; }
  .caroussel__photo {
    --width-photo: 25rem;
    --distance: 21.65rem;
    --circle-radius: calc(tan(60deg)*(var(--width-photo)/2));
    width: var(--width-photo);
    aspect-ratio: 4/3;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform-style: preserve-3d;
    transform-origin: center;
    -webkit-transform-style: preserve-3d;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    box-shadow: 0 0.3rem 1rem 0 #333; }
    .caroussel__photo--1 {
      transform: translate(-50%, -50%) translateZ(var(--distance));
      z-index: 1000; }
    .caroussel__photo--2 {
      transform: translate(-50%, -50%) rotateY(60deg) translateZ(var(--distance));
      z-index: 1000; }
    .caroussel__photo--3 {
      transform: translate(-50%, -50%) rotateY(120deg) translateZ(var(--distance));
      z-index: 1000; }
    .caroussel__photo--4 {
      transform: translate(-50%, -50%) rotateY(180deg) translateZ(var(--distance));
      z-index: 1000; }
    .caroussel__photo--5 {
      transform: translate(-50%, -50%) rotateY(-120deg) translateZ(var(--distance));
      z-index: 1000; }
    .caroussel__photo--6 {
      transform: translate(-50%, -50%) rotateY(-60deg) translateZ(var(--distance));
      z-index: 1000; }

.wrapper {
  display: inline-flex; }

.icon {
  text-align: center;
  margin: 8rem;
  position: relative;
  transition: all .3s ease-in-out; }
  @media (max-width: 75em) {
    .icon {
      margin: 4rem; } }
  @media (max-width: 56.25em) {
    .icon {
      margin: 2rem;
      transform: scale(0.8); } }
  @media (max-width: 37.5em) {
    .icon {
      margin: 0 0 12rem 0;
      transform: scale(0.5); } }
  .icon:hover {
    transform: translateY(0.7rem); }
  .icon__text {
    font-size: 1.6rem;
    font-weight: 500;
    color: #eee;
    transition: transform .3s ease-in-out;
    padding: .4rem .8rem;
    transform: translateY(2rem);
    border-radius: 8rem;
    box-shadow: 0 0.3rem 0.4rem 0 rgba(51, 51, 51, 0.9); }
    .icon__text--facebook {
      background-color: #3b5998; }
    .icon__text--instagram {
      background-image: radial-gradient(circle at 25% -20%, #405DE6 0%, #5851DB 20%, #833AB4 30%, #C13584 40%, transparent 25%), radial-gradient(circle at 30% 90%, #FFDC80 0%, #FCAF45 10%, #F77737 20%, #F56040 30%, #FD1D1D 37%, #e1306c 40%, #C13584 50%);
      background-position: center;
      background-size: cover; }
    .icon__text--youtube {
      background-color: #bb0000; }
  .icon__img-circle {
    height: 10rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #eee;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate3d(-50%, -50%, 0);
    z-index: 100;
    box-shadow: 0 0.8rem 0.5rem 0 rgba(51, 51, 51, 0.8);
    transition: box-shadow .3s ease-in-out; }
  .icon__img {
    height: 10rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: transparent;
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate3d(-50%, -50%, 0);
    z-index: 101;
    text-align: center; }
    .icon__img:hover {
      filter: invert(1); }
    .icon__img--facebook {
      background-image: url(../img/facebook-f.svg); }
    .icon__img--instagram {
      background-image: url(../img/instagram.svg); }
    .icon__img--youtube {
      background-image: url(../img/youtube.svg); }
  .icon__img:hover ~ .icon__img-circle {
    box-shadow: 0 0.4rem 0.5rem 0 rgba(51, 51, 51, 0.9); }
  .icon__img:hover ~ .icon__img-circle--facebook {
    background-color: #3b5998; }
  .icon__img:hover ~ .icon__img-circle--instagram {
    background-image: radial-gradient(circle at 25% -20%, #405DE6 0%, #5851DB 20%, #833AB4 30%, #C13584 40%, transparent 25%), radial-gradient(circle at 30% 90%, #FFDC80 0%, #FCAF45 10%, #F77737 20%, #F56040 30%, #FD1D1D 37%, #e1306c 40%, #C13584 50%);
    background-position: center;
    background-size: cover; }
  .icon__img:hover ~ .icon__img-circle--youtube {
    background-color: #bb0000; }
  .icon__img:hover ~ .icon__text {
    transform: translateY(-7rem); }
  .icon__link:link, .icon__link:visited {
    padding: 4rem 4.6rem;
    line-height: 9.5rem;
    border-radius: 50%; }

.contact {
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (max-width: 75em) {
    .contact {
      flex-direction: column; } }
  .contact__group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem 7rem;
    max-width: 30rem; }
    @media (max-width: 75em) {
      .contact__group {
        flex-direction: row;
        gap: 3rem;
        max-width: 100%;
        margin: 0rem 1rem; } }
    @media (max-width: 37.5em) {
      .contact__group {
        gap: 1rem; } }
  .contact__icon {
    position: relative;
    height: 8rem;
    aspect-ratio: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 3rem;
    transition: all .3s ease-in-out;
    filter: invert(1); }
    @media (max-width: 75em) {
      .contact__icon {
        margin: 0;
        height: 4rem; } }
    @media (max-width: 37.5em) {
      .contact__icon {
        height: 2rem; } }
    .contact__icon:hover {
      filter: invert(1);
      transform: rotate(5deg); }
    .contact__icon--location {
      background-image: url(../img/location-dot-solid.svg); }
    .contact__icon--phone {
      background-image: url(../img/phone-solid.svg); }
    .contact__icon--mail {
      background-image: url(../img/envelope-solid.svg); }
  .contact__text {
    position: relative;
    font-size: 2rem;
    letter-spacing: .2rem;
    text-align: center;
    margin: 3rem 0;
    transition: all .3s ease-in-out;
    height: 6.8rem;
    display: grid;
    place-items: center;
    color: #eee; }
    @media (max-width: 37.5em) {
      .contact__text {
        height: 2rem;
        font-size: 1.5rem;
        letter-spacing: .1rem;
        margin: 2rem 0;
        hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto; } }
  .contact__icon:hover + .contact__text {
    transform: scale(1.3); }
  .contact__form {
    width: 100%;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5rem; }
    @media (max-width: 37.5em) {
      .contact__form {
        padding: 5rem 0rem; } }
    .contact__form__item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      justify-content: center;
      gap: .5rem; }
      .contact__form__item__text {
        font-size: 2rem;
        letter-spacing: .2rem;
        color: #eee; }
      .contact__form__item__name, .contact__form__item__email, .contact__form__item__message {
        font-size: 2rem;
        letter-spacing: .1rem;
        border-radius: 1rem; }
      .contact__form__item__name, .contact__form__item__email {
        width: 35rem;
        padding: .5rem;
        text-align: center; }
      .contact__form__item__message {
        padding: 2rem;
        width: 70%;
        height: 30rem;
        text-align: justify; }
      .contact__form__item__send {
        padding: .8rem 1rem;
        border-radius: 1rem;
        transition: .2s ease-in-out;
        cursor: pointer;
        font-size: 2rem; }
        .contact__form__item__send:hover {
          transform: scale(1.05); }

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(49, 56, 136, 0.9);
  z-index: 2500;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0; }
  .popup__content {
    max-width: 70%;
    max-height: 80vh;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    padding: 3rem 8rem;
    box-shadow: 0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.6);
    transition: .5s ease-in-out; }
    @media (min-width: 112.5em) {
      .popup__content {
        max-width: 75%;
        padding: 10rem;
        font-size: 1.5rem; } }
    @media (max-width: 37.5em) {
      .popup__content {
        max-width: 90%;
        max-height: 90vh;
        overflow-y: scroll;
        padding: 2.5rem;
        font-size: 1.5rem; } }
  .popup__content:hover .popup__bg {
    filter: contrast(1) brightness(0.5) blur(0.8rem);
    transform: scale(1.1); }
  .popup__bg {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    object-fit: cover;
    object-position: bottom left;
    z-index: -1;
    transition: .5s ease-in-out;
    filter: contrast(1.2) brightness(0.6) blur(0);
    transform: scale(1); }
    @media (max-width: 37.5em) {
      .popup__bg {
        object-position: 30% 40%;
        filter: contrast(1.2) brightness(0.6) blur(0); } }
  .popup__text {
    padding: 4rem 2rem;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .2rem;
    text-align: justify;
    color: white;
    text-shadow: .1rem .1rem .1rem black; }
  @media (max-width: 37.5em) {
    .popup__text {
      padding: 1rem; } }
  .popup:target {
    visibility: visible;
    opacity: 1; }
  .popup:target .popup__content {
    opacity: 1;
    transform: rotateX(0deg); }
  .popup__close:link, .popup__close:visited {
    text-decoration: none;
    font-size: 4rem;
    position: absolute;
    display: inline-block;
    top: 2rem;
    right: 2rem;
    line-height: .6;
    color: #eee;
    transition: transform .2s ease-out; }
    @media (max-width: 37.5em) {
      .popup__close:link, .popup__close:visited {
        top: .8rem;
        right: .8rem; } }
  .popup__close:hover {
    transform: scale(1.2); }

.library {
  padding: 10rem;
  display: flex;
  justify-content: center;
  align-items: center; }
  .library__background {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80rem;
    height: 100rem;
    background-image: url(/img/wood-middle.jpg);
    background-size: cover;
    perspective: 50rem;
    gap: 10rem; }
    @media (max-width: 37.5em) {
      .library__background {
        width: 45rem; } }
  .library__stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10rem;
    background-image: url(/img/wood.jpg);
    background-size: cover;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform: rotateX(89.9deg) translateY(5rem); }
    .library__stage::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      background-image: url(/img/wood-dark.jpg);
      background-size: cover;
      transform: translate(-50%, -50%) translateZ(-1rem); }
    .library__stage::after {
      content: '';
      width: 100%;
      height: 1rem;
      position: absolute;
      top: 50%;
      left: 50%;
      background-image: url(/img/wood.jpg);
      background-size: cover;
      transform: translate(-50%, -50%) rotateX(-90deg) translateY(0.5rem) translateZ(5rem); }
    .library__stage__photo {
      object-fit: cover;
      height: 100%;
      aspect-ratio: 4/3;
      transform: rotateX(-90deg) translateY(-5rem) scale(0.95);
      border: 1rem solid #eee;
      box-shadow: 0 0 0.3rem 0.3rem rgba(51, 51, 51, 0.8), 0 0 0.8rem 0.3rem rgba(51, 51, 51, 0.5);
      transition: .3s ease-in-out;
      margin: 0 2rem;
      cursor: pointer; }
      .library__stage__photo:hover, .library__stage__photo:active {
        transform: rotateX(-90deg) translateY(-5rem) scale(1); }
      .library__stage__photo__absolute {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate3d(-50%, -50%, 0);
        object-fit: cover;
        height: 100%;
        aspect-ratio: 4/3;
        transform: translate(-50%, -50%) rotateX(-90deg) translateY(-5rem) scale(0.95);
        border: 1rem solid #eee;
        box-shadow: 0 0 0.3rem 0.3rem rgba(51, 51, 51, 0.8), 0 0 0.8rem 0.3rem rgba(51, 51, 51, 0.5);
        transition: .3s ease-in-out;
        margin: 0 2rem;
        cursor: pointer;
        z-index: 200; }
      .library__stage__photo__text, .library__stage__photo__text--bottom {
        position: relative;
        height: 100%;
        aspect-ratio: 4/3;
        margin: 0 2rem;
        text-align: center;
        font-size: 1.7rem;
        letter-spacing: .2rem;
        line-height: 1.7rem;
        color: #eee;
        pointer-events: none; }
      .library__stage__photo__text {
        transform: rotateX(-90deg) translateY(11rem) scale(0.95); }
      .library__stage__photo__text--bottom {
        transform: rotateX(-90deg) translateY(-29rem) scale(0.95); }
    .library__stage__flot {
      position: absolute;
      top: 50%;
      right: 20%;
      height: 7rem;
      width: 7rem;
      border-radius: 50%;
      transform: translate(0%, 0%) rotateX(-90deg) translateY(5rem) translateZ(5rem);
      background-color: #313888;
      background-image: url(/img/logo-horse.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      border: 1rem solid #444c97;
      box-shadow: 0 0 0 0.2rem #313888; }
      .library__stage__flot::before, .library__stage__flot::after {
        content: '';
        height: 200%;
        width: 30%;
        position: absolute;
        top: 97%;
        left: 50%; }
      .library__stage__flot::before {
        transform: translate(-50%) translate(30%) rotate(-5deg);
        background-color: #444c97;
        border: 0.2rem solid #313888; }
      .library__stage__flot::after {
        transform: translate(-50%) translate(-30%) rotate(5deg);
        background-color: #313888; }
    .library__stage__horse-foot-print {
      position: absolute;
      top: 50%;
      left: 15%;
      transform: translate(0, -50%) rotateX(-90deg) translateY(4.4rem) translateZ(5.1rem);
      height: 10rem;
      width: 7.5rem;
      border-radius: 50%;
      border-right: 1.3rem solid #564F4D;
      border-top: 1.3rem solid #564F4D;
      border-left: 1.3rem solid #564F4D;
      border-bottom: 1.3rem solid transparent;
      background-color: transparent; }
      .library__stage__horse-foot-print::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -30%);
        height: 7%;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: black; }
    .library__stage__candle {
      position: absolute;
      bottom: 0%;
      left: 25%;
      transform: translate(-50%, 0%) rotateX(-90deg) translateY(-50%);
      height: 100%;
      aspect-ratio: 1/2;
      font-size: 7px;
      background: linear-gradient(orange, darkorange, sienna, saddlebrown);
      box-shadow: inset 2em -3em 5em rgba(51, 51, 51, 0.4), inset 2em 0 5em rgba(51, 51, 51, 0.4);
      border-radius: 10em / 4em;
      display: flex;
      justify-content: center; }
      .library__stage__candle::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20%;
        border: .2em solid darkorange;
        box-sizing: border-box;
        border-radius: 50%;
        background: linear-gradient(#444, orange, saddlebrown, sienna, darkorange);
        filter: opacity(0.2); }
      .library__stage__candle__glow {
        position: absolute;
        width: 100%;
        aspect-ratio: 1;
        left: 50%;
        top: -50%;
        transform: translate(-50%, -20%);
        background-color: darkorange;
        border-radius: 50%;
        filter: blur(5em);
        animation: blink 100ms infinite; }
      .library__stage__candle__flames {
        position: absolute;
        width: 5%;
        height: 10%;
        left: 50%;
        top: 0%;
        transform: translate(-50%, -20%); }
        .library__stage__candle__flames::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate3d(-50%, -50%, 0);
          width: 300%;
          height: 150%;
          background-color: royalblue;
          border-radius: 50% 35%;
          border: .2em solid dodgerblue;
          box-sizing: border-box;
          filter: opacity(0.7); }
        .library__stage__candle__flames::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate3d(-50%, -50%, 0);
          top: -100%;
          width: 400%;
          height: 400%;
          background: linear-gradient(white 80%, transparent);
          border-radius: 50% 30%;
          box-sizing: border-box;
          box-shadow: 0 -.3em .4em darkorange;
          filter: opacity(0.7);
          animation: enlarge 5s linear infinite, move 6s linear infinite; }
      .library__stage__candle__thread {
        position: absolute;
        width: 5%;
        height: 10%;
        left: 50%;
        top: 0%;
        transform: translate(-50%, 0);
        background: linear-gradient(#111, black, orange 90%);
        border-radius: 40% 0; }
    .library__stage__book {
      position: absolute;
      top: 50%;
      right: 40%;
      height: 130%;
      aspect-ratio: 1;
      perspective: 1000rem;
      transform-style: preserve-3d; }
      @media (max-width: 37.5em) {
        .library__stage__book {
          right: 55%; } }
      .library__stage__book--1 {
        transform: translate(-50%, -50%) rotateX(-90deg) translateY(-6.4rem) translate(200%); }
      .library__stage__book--2 {
        transform: translate(-50%, -50%) rotateX(-90deg) translateY(-6.4rem) translate(227%); }
      .library__stage__book--3 {
        transform: translate(-50%, -50%) rotateX(-90deg) translateY(-6.4rem) translate(254%); }
      .library__stage__book__back {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: 25%;
        background-color: #84603c;
        box-shadow: inset 0 0 0 0 #6c4e2f, inset 0 2rem 0 0 #84603c, inset 0 2.1rem 0 0 #6c4e2f, inset 0 4rem 0 0 #84603c, inset 0 4.1rem 0 0 #6c4e2f, inset 0 9rem 0 0 #84603c, inset 0 9.1rem 0 0 #6c4e2f, inset 0 11rem 0 0 #84603c, inset 0 11.1rem 0 0 #6c4e2f, 0.2rem 0 0.2rem 0 rgba(51, 51, 51, 0.3);
        transform: translate(-50%, -50%) rotateY(90deg) translateX(-150%) rotateY(-90deg);
        padding: .1rem;
        display: grid;
        place-items: center; }
        .library__stage__book__back--2 {
          background-color: #8f541d;
          box-shadow: inset 0 0 0 0 #512903, inset 0 2rem 0 0 #8f541d, inset 0 2.1rem 0 0 #512903, inset 0 4rem 0 0 #8f541d, inset 0 4.1rem 0 0 #512903, inset 0 9rem 0 0 #8f541d, inset 0 9.1rem 0 0 #512903, inset 0 11rem 0 0 #8f541d, inset 0 11.1rem 0 0 #512903, 0.2rem 0 0.2rem 0 rgba(51, 51, 51, 0.3); }
        .library__stage__book__back--3 {
          background-color: #63573f;
          box-shadow: inset 0 0 0 0 #342d27, inset 0 2rem 0 0 #63573f, inset 0 2.1rem 0 0 #342d27, inset 0 4rem 0 0 #63573f, inset 0 4.1rem 0 0 #342d27, inset 0 9rem 0 0 #63573f, inset 0 9.1rem 0 0 #342d27, inset 0 11rem 0 0 #63573f, inset 0 11.1rem 0 0 #342d27; }
        .library__stage__book__back__text {
          text-transform: uppercase;
          font-size: .4rem;
          text-align: center; }
      .library__stage__book__top {
        position: absolute;
        top: 0%;
        left: 50%;
        height: 75%;
        width: 25%;
        background-color: #D5B59C;
        box-shadow: inset 5px 0 0 0 #D5B59C, inset 10px 0 0 0 #F1E2E3, inset 15px 0 0 0 #D5B59C, inset 20px 0 0 0 #F1E2E3, inset 25px 0 0 0 #D5B59C, inset 30px 0 0 0 #F1E2E3, inset 35px 0 0 0 #D5B59C, inset 40px 0 0 0 #F1E2E3;
        transform: translate(-50%, -50%) rotateX(90deg); }
      .library__stage__book__right {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: 75%;
        background-color: #946D46;
        transform: translate(-50%, -50%) translateX(16%) rotateY(89.9deg); }
      .library__stage__book__left {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: 75%;
        background-color: #946D46;
        transform: translate(-50%, -50%) translateX(-16%) rotateY(89.9deg);
        padding: 1rem;
        overflow: hidden; }
        .library__stage__book__left--2 {
          background-color: #9b6430; }
        .library__stage__book__left--3 {
          background-color: #675e4c; }
        .library__stage__book__left__text {
          font-size: .3rem;
          transform: rotateY(180deg);
          margin: 0 auto;
          text-align: justify;
          justify-self: left; }
    .library__stage__flower-3d {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate3d(-50%, -50%, 0);
      height: 60%;
      aspect-ratio: 1;
      perspective: 100rem;
      transform-style: preserve-3d; }
      .library__stage__flower-3d--1 {
        transform: translate(-50%, -50%) rotateX(90deg) translateY(180%) translateX(22%) rotateX(-90deg) translateX(35%) rotateY(30deg) translateY(15%);
        z-index: 101; }
      .library__stage__flower-3d--2 {
        transform: translate(-50%, -50%) rotateX(90deg) translateY(200%) rotateX(-90deg) rotateX(0deg) translateY(25%);
        z-index: 102; }
      .library__stage__flower-3d--3 {
        transform: translate(-50%, -50%) rotateX(90deg) translateY(170%) translateX(-5%) rotateX(-90deg) translateX(-50%) translateY(-25%) rotateY(-25deg) translateY(-25%) translateX(10%);
        z-index: 100; }
      .library__stage__flower-3d__vase {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate(-50%, -50%) rotateX(90deg) translateY(-75%);
        height: 200%;
        aspect-ratio: 1/2;
        background-color: rgba(208, 225, 231, 0.5);
        box-shadow: inset -0.2rem 0 0 0 rgba(255, 255, 255, 0.4), inset 0.2rem 0 0 0 rgba(255, 255, 255, 0.4), inset 0 -0.1rem 0 0 rgba(255, 255, 255, 0.1), inset 0 9rem 0 0 rgba(84, 190, 187, 0.3); }
      .library__stage__flower-3d__stem {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate(-50%, -50%) rotateX(90deg) translateY(-40%);
        height: 250%;
        aspect-ratio: 1/42;
        background-color: #9F9D7C; }
      .library__stage__flower-3d__petal {
        position: absolute;
        width: 50%;
        border-radius: 70% 30% 99% 1% / 99% 30% 70% 1%;
        aspect-ratio: 1;
        transform-origin: top right;
        left: 50%;
        top: 50%;
        transition: 5s linear; }
        .library__stage__flower-3d__petal--1 {
          background-image: radial-gradient(ellipse at 70% 30%, white, pink); }
        .library__stage__flower-3d__petal--2 {
          background-image: radial-gradient(ellipse at 70% 30%, white, #FFE436); }
        .library__stage__flower-3d__petal--3 {
          background-image: radial-gradient(ellipse at 70% 30%, white, red); }
        .library__stage__flower-3d__petal:nth-child(1) {
          transform: translate(-100%, 0%) rotateX(60deg) rotateY(60deg); }
        .library__stage__flower-3d__petal:nth-child(2) {
          transform: translate(-100%, 0%) rotate(180deg) rotateX(60deg) rotateY(60deg); }
        .library__stage__flower-3d__petal:nth-child(3) {
          transform: translate(-100%, 0%) rotate(-90deg) rotateX(60deg) rotateY(60deg); }
        .library__stage__flower-3d__petal:nth-child(4) {
          transform: translate(-100%, 0%) rotate(90deg) rotateX(60deg) rotateY(60deg); }
        .library__stage__flower-3d__petal:nth-child(5) {
          transform: translate(-100%, 0%) rotate(135deg) rotateX(60deg) rotateY(60deg); }
        .library__stage__flower-3d__petal:nth-child(6) {
          transform: translate(-100%, 0%) rotate(-45deg) rotateX(60deg) rotateY(60deg); }
        .library__stage__flower-3d__petal:nth-child(7) {
          transform: translate(-100%, 0%) rotate(45deg) rotateX(60deg) rotateY(60deg); }
        .library__stage__flower-3d__petal:nth-child(8) {
          transform: translate(-100%, 0%) rotate(-135deg) rotateX(60deg) rotateY(60deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(1) {
  transform: translate(-100%, 0%) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(2) {
  transform: translate(-100%, 0%) rotate(180deg) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(3) {
  transform: translate(-100%, 0%) rotate(-90deg) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(4) {
  transform: translate(-100%, 0%) rotate(90deg) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(5) {
  transform: translate(-100%, 0%) rotate(135deg) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(6) {
  transform: translate(-100%, 0%) rotate(-45deg) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(7) {
  transform: translate(-100%, 0%) rotate(45deg) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.library:hover > .library__background > .library__stage--flower > .library__stage__flower-3d > .library__stage__flower-3d__petal:nth-child(8) {
  transform: translate(-100%, 0%) rotate(-135deg) rotateX(40deg) rotateY(40deg) rotateZ(20deg); }

.gallery {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(49, 56, 136, 0.9);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: .4s ease-in-out; }
  .gallery__exit {
    position: absolute;
    text-align: center;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 3rem;
    cursor: pointer;
    background-color: #eee;
    color: #313888;
    border-radius: 50%;
    width: 5rem;
    aspect-ratio: 1; }
  .gallery__img-container {
    width: 100%;
    height: 100%;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    overflow-y: scroll; }
    @media (max-width: 37.5em) {
      .gallery__img-container {
        padding: 1rem; } }
  .gallery__img {
    position: relative;
    transition: .2s ease-out;
    width: 30%;
    box-shadow: 0.5rem 0.7rem 0.5rem rgba(51, 51, 51, 0.9); }
    @media (max-width: 75em) {
      .gallery__img {
        width: 40%; } }
    @media (max-width: 56.25em) {
      .gallery__img {
        width: 80%; } }
    @media (max-width: 37.5em) {
      .gallery__img {
        width: 90%; } }
    .gallery__img:hover {
      filter: saturate(1.1) contrast(1.1) brightness(1.1); }
    .gallery__img__photo {
      width: 100%; }
    .gallery__img__legend {
      width: 100%;
      text-align: center;
      color: #eee;
      font-size: 1,5rem;
      letter-spacing: .1rem;
      background-color: #313888; }

.header {
  height: 95vh;
  background-color: #444c97;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); }
  @media (max-width: 37.5em) {
    .header {
      height: 50vh;
      clip-path: polygon(0 0, 100% 0, 100% 45vh, 0 100%);
      margin-bottom: 15vh; } }
  .header-img-size {
    height: 70vh; }
    @media (max-width: 56.25em) {
      .header-img-size {
        height: 50vh; } }
    @media (max-width: 37.5em) {
      .header-img-size {
        height: 20vh; } }
  .header__bg {
    transform: translateY(70vh);
    animation: appears 0.5s ease-in-out; }
    @media (max-width: 56.25em) {
      .header__bg {
        transform: translateY(50vh); } }
    @media (max-width: 37.5em) {
      .header__bg {
        transform: translateY(20vh); } }
  .header__diamon {
    transform: translateY(0);
    animation: appears 0.5s ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: backwards; }
  .header__horse {
    transform: translateY(-70vh);
    animation: appears-grows 0.5s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: backwards; }
    @media (max-width: 56.25em) {
      .header__horse {
        transform: translateY(-50vh); } }
    @media (max-width: 37.5em) {
      .header__horse {
        transform: translateY(-20vh); } }

.row {
  max-width: 114rem;
  margin: 0 auto; }
  .row:not(:last-child) {
    margin-bottom: 8rem; }
  .row::after {
    content: "";
    display: table;
    clear: both; }
  .row [class^="col-"] {
    float: left; }
    .row [class^="col-"]:not(:last-child) {
      margin-right: 6rem; }
  .row .col-1-of-2 {
    width: calc((100% - 6rem) / 2); }
  .row .col-1-of-3 {
    width: calc((100% - 2 * 6rem) / 3); }
  .row .col-2-of-3 {
    width: calc(((100% -  2 * 6rem) / 3) * 2 + 6rem); }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 6rem) / 4); }
  .row .col-2-of-4 {
    width: calc(((100% - 3 * 6rem) / 4) * 2 + 6rem); }
  .row .col-3-of-4 {
    width: calc(((100% - 3 * 6rem) / 4) * 3 + 6rem*2); }

.navigation__button {
  height: 7rem;
  aspect-ratio: 1;
  background-color: white;
  z-index: 2500;
  position: fixed;
  top: 0;
  right: 0;
  margin: 8rem;
  border-radius: 50%;
  cursor: pointer; }
  @media (max-width: 37.5em) {
    .navigation__button {
      margin: 2rem; } }

.navigation__background {
  height: 6rem;
  aspect-ratio: 1;
  background-image: radial-gradient(#313888, #eee);
  opacity: 0.9;
  z-index: 2000;
  position: fixed;
  top: 0;
  right: 0;
  margin: 8.5rem;
  border-radius: 50%;
  transition: transform 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25); }
  @media (max-width: 37.5em) {
    .navigation__background {
      margin: 2.125rem; } }

.navigation__icon {
  position: relative;
  margin-top: 3.3rem;
  margin-left: 2rem;
  width: 3rem; }
  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    background-color: #313888;
    display: inline-block;
    height: .3rem;
    border-radius: 8rem;
    transform: scaleX(1);
    transition: all .2s ease-in-out; }
  .navigation__icon::before, .navigation__icon::after {
    content: "";
    position: absolute;
    left: -.5rem;
    width: 4rem; }
  .navigation__icon::before {
    top: -1rem; }
  .navigation__icon::after {
    top: 1rem; }

.navigation__nav {
  display: grid;
  place-items: center;
  position: fixed;
  top: 8rem;
  right: 8rem;
  z-index: 2501;
  opacity: 0;
  width: 0;
  text-decoration: none;
  transition: transform 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25), opacity 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25); }

.navigation__link:link, .navigation__link:visited {
  position: absolute;
  top: 1.5rem;
  left: 0;
  background-color: #eee;
  color: #313888;
  width: 20rem;
  border-radius: 8rem;
  box-shadow: 0 0.8rem 0.5rem 0 rgba(49, 56, 136, 0.8);
  transition: transform 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25), background-color 0.2s ease-out, color 0.2s ease-out;
  transform: translate(-15rem, 0rem) scale(0.05);
  font-size: 1.5rem;
  text-decoration: none;
  display: inline-block;
  font-weight: 300;
  padding: 1rem 2rem;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center; }

.navigation__link:hover, .navigation__link:active {
  background-color: #444c97;
  color: white; }

.navigation__button:hover .navigation__icon::before {
  top: -1.2rem; }

.navigation__button:hover .navigation__icon::after {
  top: 1.2rem; }

.navigation__checkbox {
  display: none; }

.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(20); }

@media (max-width: 37.5em) {
  .navigation__checkbox:checked ~ .navigation__background {
    transform: scale(30); } }

.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  transform: rotate(-135deg);
  top: 0; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  transform: rotate(135deg);
  top: 0; }

.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: auto; }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(1) {
  transform: translate(calc(cos((1 - 1) * -15deg) * -50rem), calc(sin((1 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(2) {
  transform: translate(calc(cos((2 - 1) * -15deg) * -50rem), calc(sin((2 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(3) {
  transform: translate(calc(cos((3 - 1) * -15deg) * -50rem), calc(sin((3 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(4) {
  transform: translate(calc(cos((4 - 1) * -15deg) * -50rem), calc(sin((4 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(5) {
  transform: translate(calc(cos((5 - 1) * -15deg) * -50rem), calc(sin((5 - 1) * -15deg) * -50rem)) scale(1); }

@media (max-width: 37.5em) {
  .navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(1) {
    transform: translate(-100%, calc((0) * 10rem)) scale(1); }
  .navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(2) {
    transform: translate(-100%, calc((1) * 10rem)) scale(1); }
  .navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(3) {
    transform: translate(-100%, calc((2) * 10rem)) scale(1); }
  .navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(4) {
    transform: translate(-100%, calc((3) * 10rem)) scale(1); }
  .navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(5) {
    transform: translate(-100%, calc((4) * 10rem)) scale(1); } }

.cookies {
  background-color: #eee;
  padding: 5rem;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  z-index: 100;
  border-top: 0.2rem solid #313888; }
  .cookies__text {
    color: #313888;
    font-size: 2rem; }
  .cookies__button {
    cursor: pointer;
    background-color: #313888;
    color: #eee;
    width: 5rem;
    font-size: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    padding: 1rem;
    margin: 0 auto; }