/* NAVBAR */
#mobileNav {
    transition: transform 300ms;
    transform: translateX(-120%);
}

#mobileNav.visible {
    transform: translateX(0%);
}

#navButton {
    transition: row-gap 600ms, column-gap 600ms;
}

#navButton.visible {
    row-gap: 0.1em;
    column-gap: 0.1em;
}

#navButton div {
    transition: transform 500ms;
}

#navButton.visible div {
    transform: rotateY(180deg);
}

/* BODY */

.bodySVG {
    transition: transform 300ms, filter 200ms;
}

#body .background svg.bodySVG:hover, #body .background svg.bodySVG:focus {
    filter: drop-shadow(0px 0px 0px black);
}

#body .bodySVG.visible:nth-child(1) {
    transform: translate(0%, 0%);
}

#body .bodySVG.visible:nth-child(2) {
    transform: translate(0%, 0%);
}

#body .bodySVG.visible:nth-child(3) {
    transform: translate(0%, 0%);
}

#body .bodySVG.visible:nth-child(4) {
    transform: translate(0%, 0%);
}

/* --- */

#body .main {
    transition: left 300ms, transform 300ms;
}

#body.toLeft .main {
    left: 0px;
    transform: translateX(0%);
    background-color: white;
}

/* --- */

#body .main .qyu {
    transition: opacity 300ms;
}

#body.toLeft .main .qyu {
    opacity: 0;
}

/* --- */

#body .main .mar {
    transition: opacity 300ms;
}

#body.toLeft .main .mar {
    opacity: 0;
}

/* --- */

#body .main .questionSuperContainer {
    transition: left 300ms, width 300ms, height 300ms, transform 300ms;
}

#body.toLeft .main .questionSuperContainer {
    left: 0px;
    width: 27.4em;
    transform: translateX(0%);
}

#body.expand .main .questionSuperContainer {
    height: 33.055em;
}

/* --- */

#body .main .questionContainer {
    transition: left 300ms, transform 300ms;
}

#body.toLeft .main .questionContainer {
    left: 50%;
    transform: translateX(-50%);
}

/* --- */

#body .main .questionContainer h1 {
    transition: font-size 300ms;
}

#body.expand .main .questionContainer h1 {
    font-size: 2.95em;
}


/* MAINPRES ANIMATION */
#mainpres .corner div {
    transition: background-color 300ms;
}

#mainpres.red .corner div {
    background-color: #FFE4E4;
}

#mainpres.blue .corner div {
    background-color: #E7FFFB;
}

/* --- */

#mainpres .progressBar {
    transition: background-color 300ms;
}

#mainpres.red .progressBar {
    background-color: #FFE4E4;
}

#mainpres.blue .progressBar {
    background-color: #E7FFFB;
}

/* --- */

#mainpres .header.first {
    transition: opacity 300ms;
    opacity: 1;
}

#mainpres.red .header.first {
    opacity: 0.35;
}

#mainpres.blue .header.first {
    opacity: 0.35;
}

/* --- */

#mainpres .header.second {
    transition: opacity 300ms;
    opacity: 0.35;
}

#mainpres.red .header.second {
    opacity: 1;
}

#mainpres.blue .header.second {
    opacity: 0.35;
}

/* --- */

#mainpres .header.third {
    transition: opacity 300ms;
    opacity: 0.35;
}

#mainpres.red .header.third {
    opacity: 0.35;
}

#mainpres.blue .header.third {
    opacity: 1;
}

/* --- */

#mainpres .line.first {
    transition: opacity 300ms;
    opacity: 1;
}

#mainpres.red .line.first {
    opacity: 1;
}

#mainpres.blue .line.first {
    opacity: 0.35;
}

/* --- */

#mainpres .line.second {
    transition: opacity 300ms;
    opacity: 0.35;
}

#mainpres.red .line.second {
    opacity: 1;
}

#mainpres.blue .line.second {
    opacity: 1;
}

/* Entrance Animation */
#mainpres:not(.visible) .header {
    opacity: 1;
}

#mainpres:not(.visible) .line {
    opacity: 0;
}

/* --- */

#mainpres .timeline {
    transition: border-right-width 300ms;
}


#mainpres:not(.visible) .timeline {
    border-right-width: 0px;
}

/* --- */

#mainpres .main {
    transition: opacity 300ms 200ms;
}

#mainpres:not(.visible) .main {
    opacity: 0;
}

/* --- */

#mainpres .corner {
    transition: opacity 300ms;
}

#mainpres:not(.visible) .corner {
    opacity: 0;
}

/* --- */

#mainpres .corner .up {
    transition: top 300ms, right 300ms, background-color 300ms;
}

#mainpres:not(.visible) .corner .up {
    top: -10em;
    right: -10em;
}

/* --- */

#mainpres .corner .bot {
    transition: bottom 300ms, right 300ms, background-color 300ms;
}


#mainpres:not(.visible) .corner .bot {
    bottom: -10em;
    right: -10em;
}

/* --- */

#mainpres:not(.visible) .progressBar {
    opacity: 0;
}

/* --- */

#mainpres {
    opacity: 1;
    transition: opacity 300ms;
}

#mainpres.finalize {
    opacity: 0;
}


/* CONTACT ANIMATION */
#contact {
    opacity: 0;
    transition: opacity 300ms;
}

#contact.visible {
    opacity: 1;
}

#contact .txtContainer {
    transition: box-shadow 300ms 0ms;
}

#contact:not(.visible) .txtContainer, #contact .txtContainer:hover {
    box-shadow: 0px 0px 0px rgb(0, 0, 0);
}

#contact .icon {
    transition: filter 300ms;
}

#contact .icon:hover {
    filter: drop-shadow(-0.1em 0.14em 0px rgba(0, 0, 0, 0.5));
}

/* HOVER ANIMATION */
nav .sensitivity {
    transition: box-shadow 200ms;
}

nav .sensitivity:hover {
    box-shadow: 0px 0px 0px black;
}

nav .link {
    transition: opacity 300ms;
}

nav .link:hover {
    opacity: 1;
}

nav .title {
    transition: color 300ms;
}

nav .title:hover {
    color: #EEE;
}

#mainpres .timeline .container .header:hover {
    opacity: 1;
}

#contact .gtc {
    transition: padding-bottom 300ms, transform 300ms;
}

#contact .gtc:hover {
    transform: translateY(calc(1em * 0.5));
    padding-bottom: 1em;
}

#collection .content {
    transition: box-shadow 300ms;
}

#collection .content:hover {
    box-shadow: 0px 0px 0px black;
}

#collection .content .closer {
    transition: opacity 300ms;
}

#collection .content:hover .closer {
    opacity: 0.08;
}