/* Overlay styles */

/**
 * Overlay nav
 */
.overlayNav {
    transform: translate3d(0,-100%,0);
    opacity: 0;
    transition: transform 1.0s ease, opacity 0s ease 1.0s;
    left: 0!important; /* Override */
}

.overlayNav section {
    overflow-y: auto;
}

[data-active-layer="overlay-nav"] .overlayNav {
    transform: none;
    opacity: 1;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity .5s cubic-bezier(0.19, 1, 0.22, 1);
}

.overlayNav .global ul,
.overlayNav .global .sns-wrap,
.overlayNav .global .welcome-wrap {
    overflow: hidden;
}

.overlayNav .global ul li,
.overlayNav .global .sns-wrap .sns,
.overlayNav .global .welcome-wrap .welcome {
    transform: translate3d(-100%, 0, 0);
    opacity: .5;
    transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.overlayNav .global ul li.visible,
.overlayNav .global .sns-wrap .sns.visible,
.overlayNav .global .welcome-wrap .welcome.visible {
    transform: none;
    opacity: 1;
    transition-duration: 1s, 1.5s;
}

.overlayNav .global .welcome-wrap.shown {
    overflow: visible;
}

header .arrow {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease, visibility 1s ease;
}

[data-arrow-hide='1'] header .arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 1s;
}

[data-bg-bottom='white'] header .arrow hr,
[data-bg-bottom='white'] header .arrow::before {
    background-color: var(--gray);
}

header .humbNav i hr {
    transition-property: left, background-color;
    transition-duration: .5s, .3s;
    transition-timing-function: ease;
}

header .humbNav b {
    transition: color .3s ease;
}

header .humbNav h1 svg * {
    transition: fill .3s ease;
}

[data-bg-top='white'] header .humbNav i hr {
    background-color: var(--gray);
}

[data-bg-top='white'] header .humbNav b {
    color: var(--gray);
}

[data-bg-top='white'] header .humbNav h1 svg * {
    fill: var(--gray);
}

/**
 * Overlay wear
 */
.overlayView.verWear {
    opacity: 0;
    transform: translate3d(0,-100%,0);
    transition-property: opacity, transform;
    transition-duration: 1.0s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

[data-active-layer="overlay-wear"] .overlayView.verWear {
    opacity: 1;
    transform: none;
}

.overlayView.verWear .box picture {
    opacity: 0;
    transform: translateX(-5%);
    transition-property: opacity, transform, visibility;
    transition-duration: 0s;
    transition-delay: 1.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.overlayView.verWear[data-slick-open="1"] .box.slick-active picture {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-duration: .75s, .75s, 0s;
    transition-delay: .5s, .5s, 0s;
}

.overlayView.verWear h2 > * {
    overflow: hidden;
}

.overlayView.verWear h2 > * > span {
    display: inline-block;
    transform: translate3d(0,100%,0);
    transition-property: transform;
    transition-duration: 0s;
    transition-delay: 1.5s;
}

.overlayView.verWear[data-slick-open="1"] .box.slick-active h2 > * > span {
    transform: none;
    transition-duration: .25s;
    transition-delay: .875s;
}

/**
 * Overlay curriculum
 */
.overlayView.verCurriculum {
    opacity: 0;
    transform: translate3d(0,-100%,0);
    transition-property: opacity, transform;
    transition-duration: 1.0s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

[data-active-layer="overlay-curriculum"] .overlayView.verCurriculum {
    opacity: 1;
    transform: none;
}

.overlayView.verCurriculum .box .text {
    overflow: hidden;
}

.overlayView.verCurriculum .box picture {
    opacity: 0;
    transform: translateX(-5%);
    transition-property: opacity, transform, visibility;
    transition-duration: 0s;
    transition-delay: 1.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.overlayView.verCurriculum[data-slick-open="1"] .box.slick-active picture {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-duration: .5s, .5s, 0s;
    transition-delay: .5s, .5s, 0s;
}

.overlayView.verCurriculum .box .text > h2 > sub,
.overlayView.verCurriculum .box .text > h2 > i {
    transform: translate3d(-100%, 0, 0);
    transition-property: transform, visibility;
    transition-duration: 0s;
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.overlayView.verCurriculum[data-slick-open="1"] .box.slick-active .text > h2 > sub,
.overlayView.verCurriculum[data-slick-open="1"] .box.slick-active .text > h2 > i {
    transform: none;
    visibility: visible;
    transition-duration: .5s, 0s;
    transition-delay: .75s, 0s;
}

.overlayView.verCurriculum[data-slick-open="1"] .box.slick-active .text > h2 > i {
    transition-delay: 1s, 0s;
}

.overlayView.verCurriculum .box .notes {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0s;
    transition-delay: 1.5s;
    transition-timing-function: cubic-bezier(0.9, 0.02, 0.68, 0.97);
}

.overlayView.verCurriculum[data-slick-open="1"] .box.slick-active .notes {
    opacity: 1;
    transition-duration: .375s;
    transition-delay: 1.25s;
}

/**
 * Overlay calendar
 */
.overlayView.verCalender {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    transition-property: opacity, transform;
    transition-duration: 1.0s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

[data-active-layer="overlay-calender"] .overlayView.verCalender {
    opacity: 1;
    transform: none;
    transition-duration: .25s;
}

.overlayView.verCalender .box > h2,
.overlayView.verCalender .box > .hrWrap,
.overlayView.verCalender .box > ul,
.overlayView.verCalender .box > h3,
.overlayView.verCalender .box > .notes {
    overflow: hidden;
}

.overlayView.verCalender .box > h2 > *,
.overlayView.verCalender .box > .hrWrap > *,
.overlayView.verCalender .box > ul > *,
.overlayView.verCalender .box > h3 > *,
.overlayView.verCalender .box > .notes > * {
    transform: translate3d(-100%,0,0);
    visibility: hidden;
    transition-property: transform, visibility;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 1.5s;
    transition-duration: 0s;
}

.overlayView.verCalender[data-slick-open="1"] .box.slick-active > h2 > *,
.overlayView.verCalender[data-slick-open="1"] .box.slick-active > .hrWrap > *,
.overlayView.verCalender[data-slick-open="1"] .box.slick-active > ul > *,
.overlayView.verCalender[data-slick-open="1"] .box.slick-active > h3 > *,
.overlayView.verCalender[data-slick-open="1"] .box.slick-active > .notes > * {
    transform: none;
    visibility: visible;
}

.overlayView.verCalender[data-slick-open="1"] .box > h2 > * {
    transition-duration: .5s, 0s;
    transition-delay: .5s, 0s;
}

.overlayView.verCalender[data-slick-open="1"] .box > .hrWrap:nth-of-type(1) > hr,
.overlayView.verCalender[data-slick-open="1"] .box > ul > *,
.overlayView.verCalender[data-slick-open="1"] .box > .hrWrap:nth-of-type(2) > hr,
.overlayView.verCalender[data-slick-open="1"] .box > h3 > *,
.overlayView.verCalender[data-slick-open="1"] .box > .notes > * {
    transition-duration: .75s, 0s;
    transition-delay: .875s, 0s;
}

/**
 * Placeholder hiding
 */
:focus:placeholder-shown { color: transparent; }
:focus::-webkit-input-placeholder { color: transparent; }