.euler__header {
  display: none;
}
@media (min-width: 700px) {
  .euler__header {
    position: sticky;
    z-index: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: transparent;
  }
  .euler__header-content {
    position: relative;
    z-index: 0;
    width: 90%;
    height: 95%;
    margin: 0 auto;
    border-radius: 1.5vw;
    padding: 3vw 1vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3vh;
    color: #FFFFFF;
    background-color: #E6670D;
  }
  .euler__header-content > .custom-logo-link {
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .euler__header-content > .custom-logo-link > img {
    display: inline-block;
    width: 80%;
    min-width: 100px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .euler__header-content-custom-logo {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    outline: none;
  }
  .euler__header-content-custom-logo:hover, .euler__header-content-custom-logo:focus {
    outline: none;
  }
  .euler__header-content-custom-logo > img {
    width: 45%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .euler__header-content-custom-logo--escuela {
    border-radius: 50%;
  }
  .euler__header-content-nav {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 1.5vw;
  }
  .euler__header-content-nav-items {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.6vw;
    list-style: none;
  }
  .euler__header-content-nav-items-item, .euler__header-content-nav-items-subitem {
    position: relative;
    width: 100%;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  .euler__header-content-nav-items-item::before, .euler__header-content-nav-items-subitem::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -8%;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 0 0.5vw 0.5vw 0;
    background-color: #FFEAC4;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .euler__header-content-nav-items-item:hover::before, .euler__header-content-nav-items-subitem:hover::before {
    width: 0.6vw;
  }
  .euler__header-content-nav-items-item-a, .euler__header-content-nav-items-item-button, .euler__header-content-nav-items-subitem-a, .euler__header-content-nav-items-subitem-button {
    position: relative;
    width: 100%;
    margin-left: 0;
    border-radius: 0.7vw;
    padding: 0.8vw 1vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 1.2vw;
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  .euler__header-content-nav-items-item-a > svg, .euler__header-content-nav-items-item-button > svg, .euler__header-content-nav-items-subitem-a > svg, .euler__header-content-nav-items-subitem-button > svg {
    width: 1.25vw;
    height: auto;
    margin-right: 1.2vw;
    -o-object-fit: contain;
       object-fit: contain;
    display: inline-block;
    fill: #f4e8df;
    pointer-events: none;
  }
  .euler__header-content-nav-items-item-a > img, .euler__header-content-nav-items-item-button > img, .euler__header-content-nav-items-subitem-a > img, .euler__header-content-nav-items-subitem-button > img {
    width: 1.25vw;
    height: auto;
    margin-right: 1.2vw;
    -o-object-fit: contain;
       object-fit: contain;
    display: inline-block;
    pointer-events: none;
    fill: #f4e8df;
  }
  .euler__header-content-nav-items-item-a:hover, .euler__header-content-nav-items-item-button:hover, .euler__header-content-nav-items-subitem-a:hover, .euler__header-content-nav-items-subitem-button:hover {
    margin-left: 1vw;
  }
  .euler__header-content-nav-items-item-a--active, .euler__header-content-nav-items-item-button--active, .euler__header-content-nav-items-subitem-a--active, .euler__header-content-nav-items-subitem-button--active {
    color: #E6670D;
    background-color: #f4e8df;
  }
  .euler__header-content-nav-items-item-a--active > svg, .euler__header-content-nav-items-item-button--active > svg, .euler__header-content-nav-items-subitem-a--active > svg, .euler__header-content-nav-items-subitem-button--active > svg {
    fill: #E6670D;
  }
  .euler__header-content-nav-items-item-button, .euler__header-content-nav-items-subitem-button {
    border: none;
    outline: none;
    background-color: transparent;
  }
  .euler__header-content-nav-items-item-button:hover, .euler__header-content-nav-items-subitem-button:hover {
    border: none;
    outline: none;
    cursor: pointer;
  }
  .euler__header-content-nav-items-item-button:focus, .euler__header-content-nav-items-subitem-button:focus {
    border: none;
    outline: none;
  }
  .euler__header-content-nav-items-item--active, .euler__header-content-nav-items-subitem--active {
    color: #E6670D;
    background-color: #FFEAC4;
  }
  .euler__header-content-nav-items-subitem {
    width: 90%;
    margin: 0 auto;
  }
  .euler__header-content-nav-items-subitem::before {
    left: -15%;
  }
  .euler__header-content-nav-items-subitem-a {
    font-size: 1.1vw;
  }
  .euler__header-content-nav-items-subitem-a--active {
    color: #FFEAC4;
    background-color: transparent;
  }
  .euler__header-content-nav-items-subitem-a--active svg {
    fill: #FFEAC4;
  }
  .euler__header-content-nav-items-subitem-a--active::before {
    content: "";
    margin-right: 1.25vw;
    border-radius: 50%;
    padding: 0.28vw;
    background-color: #FFEAC4;
  }
  .euler__header-content-nav-items-subitem-a > svg {
    width: 1.1vw;
    height: auto;
    margin-right: 1.1vw;
  }
  .euler__header-content--logout {
    height: 100%;
    background-color: #f6fcf8;
    -webkit-animation-name: logoutHeader;
            animation-name: logoutHeader;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.71, 0, 0.37, 1);
            animation-timing-function: cubic-bezier(0.71, 0, 0.37, 1);
  }
  @-webkit-keyframes logoutHeader {
    0% {
      background-color: #f6fcf8;
    }
    50% {
      background-color: #e6f0e9;
    }
    100% {
      background-color: #f6fcf8;
    }
  }
  @keyframes logoutHeader {
    0% {
      background-color: #f6fcf8;
    }
    50% {
      background-color: #e6f0e9;
    }
    100% {
      background-color: #f6fcf8;
    }
  }
}