.header {
    padding: 0 0 50px;
}

.header .header-wrapper {
    position: relative;
    background-image: url('/public/image/header-background.jpg');
    min-height: 100vh;
    overflow: hidden;
}

.header .header-chevron-wrapper {
    height: 100px;
    padding-top: 20px;
}
.header .header-chevron-content {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: solid 2px var(--foreground-color);
    border-top: none;
    border-left: none;
    -webkit-animation: moveupdown 2s linear infinite;
    -moz-animation: moveupdown 2s linear infinite;
    -o-animation: moveupdown 2s linear infinite;
    -ms-animation: moveupdown 2s linear infinite;
    animation: moveupdown 2s linear infinite;
    animation-timing-function: ease-in-out;
}

.header .video-wrapper ~ .header-wrapper {
    background-image: unset;
}

.fixed-panel-top .header .header-wrapper,
.fixed-panel-bottom .header .header-wrapper {
    min-height: calc(100vh - var(--fixed-panel-height));
}


.header .header-content {
    padding: 20px 10% 10%;
}

.header .header-content .logo {
    background-image: url(/public/logo/logo1.svg);
    height: 5em;
    margin-bottom: 2em;
}
.header .header-content.align-left .logo {
    background-position: left;
}
.header .header-content.align-right .logo {
    background-position: right;
}

.fixed-panel-top .header .header-content,
.fixed-panel-bottom .header .header-content {
    min-height: calc(100vh - (var(--fixed-panel-height) * 2));
}
.fixed-panel-top .header .header-content {
    padding-bottom: var(--fixed-panel-height);
}


.header .video-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.fixed-panel-top .header .video-wrapper,
.fixed-panel-bottom .header .video-wrapper {
    height: calc(100vh - var(--fixed-panel-height));
}
.fixed-panel-top .header .video-wrapper {
    top: var(--fixed-panel-height);
}

.header video {
    opacity: 0.5;
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.header .header-wrapper .bottom-curve {
    content: '';
    display: block;
    height: 25vw;
    min-height: 5vh;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
}

.header .header-wrapper .bottom-curve.curve1 {
    background-image: radial-gradient(100% 100% at top, transparent calc(100% - 5px), var(--background-color));
    bottom: 0;
}
.header .header-wrapper .bottom-curve.curve2 {
    background-image: radial-gradient(100% 100% at bottom, var(--background-color) calc(100% - 5px), transparent);
    bottom: -20vw;
}




@keyframes moveupdown {
    0%, 100% {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    50% {
        -webkit-transform: rotate(45deg) translate(20px, 20px);
        -moz-transform: rotate(45deg) translate(20px, 20px);
        -o-transform: rotate(45deg) translate(20px, 20px);
        -ms-transform: rotate(45deg) translate(20px, 20px);
        transform: rotate(45deg) translate(20px, 20px);
    }
}