/* Animation Keyframes Section */


@-webkit-keyframes whiteboxAnimation {
    0%		{ height: 100vh; }
    100%	{ height: 33vh; }
}

@keyframes whiteboxAnimation {
    0%		{ height: 100vh; }
    100%	{ height: 33vh; }
}



@-webkit-keyframes logoMargin {
    0%		{ margin-top: 0; }
    100%	{ margin-top: 10vh; }
}

@keyframes logoMargin {
    0%		{ margin-top: 0; }
    100%	{ margin-top: 10vh; }
}



@-webkit-keyframes logoWidth {
    0%		{ width: 85px; }
    100%	{ width: 300px; }
}

@keyframes logoWidth {
    0%		{ width: 85px; }
    100%	{ width: 300px; }
}



@-webkit-keyframes logoUp {
    0%		{ margin-top: 10vh; }
    100%	{ margin-top: -50vh; display:none; }
}

@keyframes logoUp {
    0%		{ margin-top: 10vh; }
    100%	{ margin-top: -50vh; display:none;}
}



@-webkit-keyframes logoPuffIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(4, 4);
        -webkit-filter: blur(8px);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        -webkit-filter: blur(0.3px);
    }
}

@keyframes logoPuffIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(3, 3);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1, 1);
        filter: blur(0px);
    }
}



@-webkit-keyframes hamMenu {
    0%		{ opacity: 0; }
    100%	{ opacity: 0.5; }
}

@keyframes hamMenu {
    0%		{ opacity: 0; }
    100%	{ opacity: 0.5; }
}



@-webkit-keyframes logoMenu {
    0%	{
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: translateY(0);
    }
}

@keyframes logoMenu {
    0%	{
        opacity: 0;
        transform-origin: 50% 50%;
        transform: translateY(-60px);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: translateY(0);
    }
}



@-webkit-keyframes fadeIn {
    0%		{ opacity: 0; }
    100%	{ opacity: 1; }
}

@keyframes fadeIn {
    0%		{ opacity: 0; }
    100%	{ opacity: 1; }
}



@-webkit-keyframes fadeOut {
    0%		{ opacity: 1; }
    100%	{ opacity: 0; }
}

@keyframes fadeOut {
    0%		{ opacity: 1; }
    100%	{ opacity: 0; }
}



@-webkit-keyframes signetIn {
    0%		{ width: 0; }
    100%	{ width: 50px; margin-right: 10px; }
}

@keyframes signetIn {
    0%		{ width: 0; }
    100%	{ width: 50px; margin-right: 10px; }
}



@-webkit-keyframes signetOut {
    0%		{ width: 50px; margin-right: 10px; }
    100%	{ width: 0; margin-right: 0; }
}

@keyframes signetOut {
    0%		{ width: 50px; margin-right: 10px; }
    100%	{ width: 0; margin-right: 0; }
}



@-webkit-keyframes candButOut {
    0%		{ right: 0; opacity: 1; }
    100%	{ right: -7.5rem; opacity: 1; }
}

@keyframes candButOut {
    0%		{ right: 0; opacity: 1; }
    100%	{ right: -7.5rem; opacity: 1; }
}

@-webkit-keyframes candButIn {
    0%		{ right: -155px; }
    100%	{ right: 0 }
}

@keyframes candButIn {
    0%		{ right: -155px; opacity: 1; }
    100%	{ right: 0; opacity: 1; }
}


@media (orientation: landscape) {

    @-webkit-keyframes whiteboxAnimation {
        0%		{ width: 100%; height: 100vh}
        100%	{ width: 40%; height: 100vh}
    }

    @keyframes whiteboxAnimation {
        0%		{ width: 100%; height: 100vh}
        100%	{ width: 40%; height: 100vh}
    }

    @-webkit-keyframes logoUp {
        0%		{ margin-top: 0; }
        100%	{ margin-top: -100vh; display:none; }
    }

    @keyframes logoUp {
        0%		{ margin-top: 0; }
        100%	{ margin-top: -100vh; display:none;}
    }

    @-webkit-keyframes logoMargin {
        0%		{ margin-top: 0; }
        100%	{ margin-top: 0; }
    }

    @keyframes logoMargin {
        0%		{ margin-top: 0; }
        100%	{ margin-top: 0; }
    }


}


/* Burger Menu */
.change .menu-bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    -ms-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
    margin-top: 2px;
}

.change .menu-bar2 {
    opacity: 0;
}

.change .menu-bar3 {
    -webkit-transform: rotate(45deg) translate(-9px, -9px);
    -ms-transform: rotate(45deg) translate(-9px, -9px);
    transform: rotate(45deg) translate(-9px, -9px);
    width: 35px;
}



/* Menu */
.hamburger-menu {
    -webkit-animation-name: hamMenu;
    animation-name: hamMenu;
    -webkit-animation-duration: var(--dur2);
    animation-duration: var(--dur2);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: var(--dlayLogoUp);
    animation-delay: var(--dlayLogoUp);
}

.menu-logo {
    -webkit-animation-name: logoMenu;
    animation-name:logoMenu;
    -webkit-animation-duration: var(--dur2);
    animation-duration: var(--dur2);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: var(--dlayLogoUp);
    animation-delay: var(--dlayLogoUp);
}


/* Logo */
.logoAnim #htLogo {
    -webkit-animation-name: logoMargin, logoWidth, logoUp;
    animation-name: logoMargin, logoWidth, logoUp;
    -webkit-animation-duration: var(--dur1), var(--dur1), var(--dur1);
    animation-duration: var(--dur1), var(--dur1), var(--dur1);
    -webkit-animation-delay: var(--dlaySmallLogoBox), var(--dlayFullLogo), var(--dlayLogoUp);
    animation-delay: var(--dlaySmallLogoBox), var(--dlayFullLogo), var(--dlayLogoUp);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.logoAnim .logoPuffIn {
    -webkit-animation-name: logoPuffIn;
    animation-name: logoPuffIn;
    -webkit-animation-duration: var(--dur1);
    animation-duration: var(--dur1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: var(--dlayLogoIn);
    animation-delay: var(--dlayLogoIn);
    opacity: 0;
    z-index: 2;
}


/* FadeIn/Out */
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: var(--dur0);
    animation-duration: var(--dur0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: var(--dur0);
    animation-duration: var(--dur0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

#jobs {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: var(--dur2);
    animation-duration: var(--dur2);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: var(--dlayLogoUp);
    animation-delay: var(--dlayLogoUp);
}



.signet.signetIn {
    -webkit-animation-name: signetIn;
    animation-name: signetIn;
    -webkit-animation-duration: var(--dur0);
    animation-duration: var(--dur0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.signet.signetOut {
    -webkit-animation-name: signetOut;
    animation-name: signetOut;
    -webkit-animation-duration: var(--dur0);
    animation-duration: var(--dur0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.white-box {
    -webkit-animation-name: whiteboxAnimation;
    animation-name: whiteboxAnimation;
    -webkit-animation-duration: var(--dur1);
    animation-duration: var(--dur1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: var(--dlaySmallLogoBox);
    animation-delay: var(--dlaySmallLogoBox);
}

.boxTeaserText {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: var(--dlayTeaserTest1);
    animation-delay: var(--dlayTeaserTest1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

/*	#FindPersButt {
	    -webkit-animation-name: fadeIn;
	    animation-name: fadeIn;
	    -webkit-animation-duration: 1s;
	    animation-duration: 1s;
	    -webkit-animation-delay: 4s;
	    animation-delay: 4s;
	    -webkit-animation-fill-mode: forwards;
	    animation-fill-mode: forwards;
	    -webkit-animation-timing-function: ease-in-out;
	    animation-timing-function: ease-in-out;
	    opacity: 0;
	}*/

.candidateButton {
    -webkit-animation-name: fadeIn, candButOut;
    animation-name: fadeIn, candButOut;
    -webkit-animation-duration: 1s, 0.5s;
    animation-duration: 1s, 0.5s;
    -webkit-animation-delay: 4s, 5s;
    animation-delay: 4s, 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out, ease-out;
    animation-timing-function: ease-in-out, ease-out;
    opacity: 0;

}