.animate .logo.logo--hero>line:nth-child(1), .animate .logo.logo--hero>path:nth-child(1) {
    animation-name: animation-logo-draw-g-line;
    animation-duration: 375ms;
    animation-delay: 2075ms;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.animate .logo.logo--hero>line:nth-child(2), .animate .logo.logo--hero>path:nth-child(2) {
    animation-name: animation-logo-draw-g-curve;
    animation-duration: 1125ms;
    animation-delay: 950ms;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.logo.logo--hero>line:nth-child(1), .logo.logo--hero>path:nth-child(1) {
    stroke-dasharray: 26;
}
.logo.logo--hero>line, .logo.logo--hero>path {
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: both;
}
.logo.logo--hero>line:nth-child(2), .logo.logo--hero>path:nth-child(2) {
    stroke-dasharray: 146;
}

.animate .logo.logo--hero>line:nth-child(3), .animate .logo.logo--hero>path:nth-child(3) {
    animation-name: animation-logo-draw-p;
    animation-delay: 575ms;
    animation-duration: 1500ms;
}
.logo.logo--hero>line:nth-child(3), .logo.logo--hero>path:nth-child(3) {
    stroke-dasharray: 111;
}

.animate .logo.logo--hero>line:nth-child(4), .animate .logo.logo--hero>path:nth-child(4) {
    animation-name: animation-logo-draw-s;
    animation-delay: 200ms;
    animation-duration: 1500ms;
}
.logo.logo--hero>line:nth-child(4), .logo.logo--hero>path:nth-child(4) {
    stroke-dasharray: 103;
}
.logo.logo--hero>line, .logo.logo--hero>path {
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: both;
    stroke: #fff;
}


/*** logo temp ***/
@keyframes animation-logo-draw-s {
    from {
        stroke-dashoffset: 103
    }

    to {
        stroke-dashoffset: 206
    }
}

@keyframes animation-logo-undraw-s {
    from {
        stroke-dashoffset: 206
    }

    to {
        stroke-dashoffset: 103
    }
}

@keyframes animation-logo-draw-p {
    from {
        stroke-dashoffset: 111
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes animation-logo-undraw-p {
    from {
        stroke-dashoffset: 222
    }

    to {
        stroke-dashoffset: 111
    }
}

@keyframes animation-logo-draw-g-line {
    from {
        stroke-dashoffset: 26
    }

    to {
        stroke-dashoffset: 52
    }
}

@keyframes animation-logo-undraw-g-line {
    from {
        stroke-dashoffset: 52
    }

    to {
        stroke-dashoffset: 26
    }
}

@keyframes animation-logo-draw-g-curve {
    from {
        stroke-dashoffset: 146
    }

    to {
        stroke-dashoffset: 292
    }
}

@keyframes animation-logo-undraw-g-curve {
    from {
        stroke-dashoffset: 292
    }

    to {
        stroke-dashoffset: 146
    }
}

.logo.logo--menu>line,.logo.logo--menu>path {
    stroke: #22334B;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.Menu--open .logo.logo--menu>line,.Menu--open .logo.logo--menu>path {
    stroke: #fff
}

.logo.logo--hero>line,.logo.logo--hero>path {
    stroke: #fff
}

.logo.logo--hero>line,.logo.logo--hero>path {
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: both;
}

.logo.logo--hero>line:nth-child(1),.logo.logo--hero>path:nth-child(1) {
    stroke-dasharray: 26;
}

.logo.logo--hero>line:nth-child(2),.logo.logo--hero>path:nth-child(2) {
    stroke-dasharray: 146;
}

.logo.logo--hero>line:nth-child(3),.logo.logo--hero>path:nth-child(3) {
    stroke-dasharray: 111
}

.logo.logo--hero>line:nth-child(4),.logo.logo--hero>path:nth-child(4) {
    stroke-dasharray: 103
}

.animate .logo.logo--hero>line:nth-child(1),.animate .logo.logo--hero>path:nth-child(1) {
    animation-name: animation-logo-draw-g-line;
    animation-duration: 375ms;
    animation-delay: 2075ms;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.animate .logo.logo--hero>line:nth-child(2),.animate .logo.logo--hero>path:nth-child(2) {
    /* animation-name:animation-logo-draw-g-curve; */
    animation-duration: 1125ms;
    animation-delay: 950ms;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.animate .logo.logo--hero>line:nth-child(3),.animate .logo.logo--hero>path:nth-child(3) {
    /* animation-name:animation-logo-draw-p; */
    animation-delay: 575ms;
    animation-duration: 1500ms;
}

.animate .logo.logo--hero>line:nth-child(4),.animate .logo.logo--hero>path:nth-child(4) {
    /* animation-name:animation-logo-draw-s; */
    animation-delay: 200ms;
    animation-duration: 1500ms;
}

.animate-reversed .logo.logo--hero>line:nth-child(1),.animate-reversed .logo.logo--hero>path:nth-child(1) {
    animation-name: animation-logo-undraw-g-line;
    animation-duration: 250ms;
    animation-delay: 500ms;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.animate-reversed .logo.logo--hero>line:nth-child(2),.animate-reversed .logo.logo--hero>path:nth-child(2) {
    animation-name: animation-logo-undraw-g-curve;
    animation-duration: 750ms;
    animation-delay: 750ms;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.animate-reversed .logo.logo--hero>line:nth-child(3),.animate-reversed .logo.logo--hero>path:nth-child(3) {
    animation-name: animation-logo-undraw-p;
    animation-delay: 250ms;
    animation-duration: 1000ms
}

.animate-reversed .logo.logo--hero>line:nth-child(4),.animate-reversed .logo.logo--hero>path:nth-child(4) {
    animation-name: animation-logo-undraw-s;
    animation-delay: 0;
    animation-duration: 1000ms
}

.logo.logo--loader>line,.logo.logo--loader>path {
    stroke: #fff
}

.logo.logo--loader>line,.logo.logo--loader>path {
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: both
}

.logo.logo--loader>line:nth-child(1),.logo.logo--loader>path:nth-child(1) {
    stroke-dasharray: 26
}

.logo.logo--loader>line:nth-child(2),.logo.logo--loader>path:nth-child(2) {
    stroke-dasharray: 146
}

.logo.logo--loader>line:nth-child(3),.logo.logo--loader>path:nth-child(3) {
    stroke-dasharray: 111
}

.logo.logo--loader>line:nth-child(4),.logo.logo--loader>path:nth-child(4) {
    stroke-dasharray: 103
}

.animate .logo.logo--loader>line:nth-child(1),.animate .logo.logo--loader>path:nth-child(1) {
    animation-name: animation-logo-draw-g-line;
    animation-duration: 375ms;
    animation-delay: 2075ms;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.animate .logo.logo--loader>line:nth-child(2),.animate .logo.logo--loader>path:nth-child(2) {
    animation-name: animation-logo-draw-g-curve;
    animation-duration: 1125ms;
    animation-delay: 950ms;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.animate .logo.logo--loader>line:nth-child(3),.animate .logo.logo--loader>path:nth-child(3) {
    animation-name: animation-logo-draw-p;
    animation-delay: 575ms;
    animation-duration: 1500ms
}

.animate .logo.logo--loader>line:nth-child(4),.animate .logo.logo--loader>path:nth-child(4) {
    animation-name: animation-logo-draw-s;
    animation-delay: 200ms;
    animation-duration: 1500ms
}

.animate-reversed .logo.logo--loader>line:nth-child(1),.animate-reversed .logo.logo--loader>path:nth-child(1) {
    animation-name: animation-logo-undraw-g-line;
    animation-duration: 250ms;
    animation-delay: 500ms;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.animate-reversed .logo.logo--loader>line:nth-child(2),.animate-reversed .logo.logo--loader>path:nth-child(2) {
    animation-name: animation-logo-undraw-g-curve;
    animation-duration: 750ms;
    animation-delay: 750ms;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.animate-reversed .logo.logo--loader>line:nth-child(3),.animate-reversed .logo.logo--loader>path:nth-child(3) {
    animation-name: animation-logo-undraw-p;
    animation-delay: 250ms;
    animation-duration: 1000ms
}

.animate-reversed .logo.logo--loader>line:nth-child(4), .animate-reversed .logo.logo--loader>path:nth-child(4) {
    animation-name: animation-logo-undraw-s;
    animation-delay: 0;
    animation-duration: 1000ms
}


/* 
@media (orientation: landscape) {
  .Hero__logo {
    height: 95%;
  }
}
@media only screen and (min-width: 1240px) {
  .Hero__logo .logo {
    width: 55%;
  }
} */