@keyframes hoverBtnMoreBad {
    0% { transform: perspective(1px) rotateY(0);
        background: transparent;
        padding: 12px 0px 12px 30px;
        color: white;
    }
    50% {transform: perspective(1px) rotateY(-0.2deg);
        background: white;
        padding: 12px 0px 12px 30px;
        color: #009ac2;
    }
    100% {transform: perspective(1px) rotateY(0);
        background: white;
        padding: 12px 20px 12px 20px;
        color: #009ac2;
    }
}

.hoverBtnMoreBad {
    animation: hoverBtnMoreBad 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}


.hoverBtnMoreNewsletter {
    animation: hoverBtnMoreNewsletter 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}

@keyframes hoverBtnMoreNews {
    0% { transform: perspective(1px) rotateY(0);
        background: transparent;
        padding: 12px 0px 12px 30px;
        color: #0073a2;
    }
    50% {transform: perspective(1px) rotateY(-0.2deg);
        background: #0073a2;
        padding: 12px 0px 12px 30px;
        color: white;
    }
    100% {transform: perspective(1px) rotateY(0);
        background: #0073a2;
        padding: 12px 30px 12px 30px;
        color: white;
    }
}

.hoverBtnMoreNews {
    animation: hoverBtnMoreNews 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}


@keyframes hoverBtnMoreBook {
    0% {

        padding: 12px 0px 12px 30px;
    }
    100% {
        padding: 12px 30px 12px 30px;
    }
}

.hoverBtnMoreBook {
    animation: hoverBtnMoreBook 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}


@keyframes unhoverBtnMoreBook {
    0% {

        padding: 12px 30px 12px 30px;
    }
    100% {
        padding: 12px 0px 12px 30px;
    }
}

.unhoverBtnMoreBook {
    animation: unhoverBtnMoreBook 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes unhoverBtnMoreNews {
    0% { transform: perspective(1px) rotateY(0);
        background: #0073a2;
        padding: 12px 30px 12px 30px;
        color: white;
    }
    50% {transform: perspective(1px) rotateY(0.2deg);
        background: #0073a2;
        padding: 12px 0px 12px 30px;
        color: white;
    }
    100% {transform: perspective(1px) rotateY(0);
        background: transparent;
        padding: 12px 0px 12px 30px;
        color: #0073a2;
    }
}

.unhoverBtnMoreNews {
    animation: unhoverBtnMoreNews 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}

@keyframes hoverBtnRoute {
    0% { transform: perspective(1px) rotateY(0);
        background: transparent;
        padding: 7px 0px 7px 30px;
        color: #0073a2;
    }
    50% {transform: perspective(1px) rotateY(-0.2deg);
        background: 0073a2;
        padding: 7px 0px 7px 30px;
        color: white;
    }
    100% {transform: perspective(1px) rotateY(0);
        background: #0073a2;
        padding: 7px 15px 7px 15px;
        color: white;
    }
}
.hoverBtnRoute {
    animation: hoverBtnRoute 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}

@keyframes unhoverBtnRoute {
    0% { transform: perspective(1px) rotateY(0);
		background: #0073a2;
        padding: 7px 15px 7px 15px;
        color: white;
    }
    50% {transform: perspective(1px) rotateY(0.2deg);
        background: 0073a2;
        padding: 7px 0px 7px 30px;
        color: white;
    }
    100% {transform: perspective(1px) rotateY(0);
       	background: transparent;
        padding: 7px 0px 7px 30px;
        color: #0073a2;
    }
}
.unhoverBtnRoute {
    animation: unhoverBtnRoute 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}


@keyframes hoverBtnRouteArrow {
    0% { opacity: 0; margin-left: 15px;}
    50% {opacity: 0; margin-left: 15px;}
    100% {opacity: 1; margin-left: 15px; }
}

.hoverBtnRouteArrow {
    animation: hoverBtnRouteArrow 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    opacity: 0;
}

@keyframes hoverBtnMoreNewsletter {
    0% { transform: perspective(1px) rotateY(0);
        background: transparent;
        padding: 8px 0px 8px 30px;
        color: #ffd100;
    }
    50% {transform: perspective(1px) rotateY(-0.2deg);
        background: #ffd100;
        padding: 8px 0px 8px 30px;
        color: white;
    }
    100% {transform: perspective(1px) rotateY(0);
        background: #ffd100;
        padding: 8px 30px 8px 30px;
        color: white;
    }
}

@keyframes hoverBtnMoreArrow {
    0% { opacity: 0; margin-left: 20px;}
    50% {opacity: 0; margin-left: 20px;}
    100% {opacity: 1; margin-left: 20px; }
}

.hoverBtnMoreArrow {
    animation: hoverBtnMoreArrow 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    opacity: 0;
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fadeIn {
    animation: fadeIn 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    opacity: 0;
}


@keyframes menuisopen1 {
    0% { top: 0; left: 0; transform: rotate(0); }
    50% { top: 50%; left: 0; transform: rotate(0); }
    100% { top: 50%; left: 0; transform: rotate(-45deg); }
}

.menuisopen1 {
    animation: menuisopen1 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}


@keyframes menuisclosed1 {
    0% { top: 50%; left: 0; transform: rotate(-45deg); }
    50% { top: 50%; left: 0; transform: rotate(0); }
    100% { top: 0; left: 0; transform: rotate(0); }
}

.menuisclosed1 {
    animation: menuisclosed1 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes menuisopen2 {
    0% { top: 50%; opacity: 1; }
    50% { top: 50%; opacity: 1; }
    51% { top: 50%; opacity: 0; }
    100% { top: 50%; opacity: 0; }
}

.menuisopen2 {
    animation: menuisopen2 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes menuisclosed2 {
    0% { top: 50%; opacity: 0; }
    50% { top: 50%; opacity: 0; }
    51% { top: calc(50% - 2px); opacity: 1; }
    100% { top: calc(50% - 2px); opacity: 1; }
}

.menuisclosed2 {
    animation: menuisclosed2 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes menuisopen3 {
    0% { top: 100%; left: 0; transform: rotate(0); }
    50% { top: 50%; left: 0; transform: rotate(0); }
    100% { top: 50%; left: 0; transform: rotate(45deg); }
}

.menuisopen3 {
    animation: menuisopen3 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes menuisclosed3 {
    0% { top: 50%; left: 0; transform: rotate(45deg); }
    50% { top: 50%; left: 0; transform: rotate(0); }
    100% { top: calc(100% - 3px); left: 0; transform: rotate(0); }
}

.menuisclosed3 {
    animation: menuisclosed3 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes blendInTeamInfo {
    from {margin-top: -20px; opacity: 0;}
    to {margin-top: 0; opacity: 1;}
}

.blendInTeamInfo {
    animation: blendInTeamInfo 0.5s;
    animation-timing-function: swing;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    margin-top: -20px;
    opacity: 0;
}


@keyframes showTagHoverOverBtnCourses {
    0% { transform: perspective(1px) rotateY(0);
        opacity: 0;
    }
    50% {transform: perspective(1px) rotateY(-0.2deg);
        opacity: 1;
    }
    100% {transform: perspective(1px) rotateY(0);
    opacity: 1;
    }
}

.showTagHoverOverBtnCourses {
    animation: showTagHoverOverBtnCourses 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
    opacity: 0;
}

@keyframes hideTagHoverOverBtnCourses {
    0% { transform: perspective(1px) rotateY(0);
        opacity: 1;
    }
    50% {transform: perspective(1px) rotateY(0.2deg);
        opacity: 0.5;
    }
    100% {transform: perspective(1px) rotateY(0);
    opacity: 0;
    }
}

.hideTagHoverOverBtnCourses {
    animation: hideTagHoverOverBtnCourses 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
    opacity: 1;
}

@keyframes hoverBtnMoreCourseInfo {
    0% { transform: perspective(1px) rotateY(0);
        background: transparent;
        color: #004d6c;
    }
    50% {transform: perspective(1px) rotateY(-0.2deg);
        background: #004d6c;
        color: #0073a2;
    }
    100% {
        transform: perspective(1px) rotateY(0);
        background: #004d6c;
        color: #0073a2;
    }
}


.hoverBtnMoreCourseInfo {
    animation: hoverBtnMoreCourseInfo 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}

@keyframes unhoverBtnMoreCourseInfo {
    0% {
        transform: perspective(1px) rotateY(0);
        background: #004d6c;
        color: #0073a2;
    }
    50% {transform: perspective(1px) rotateY(0.2deg);
        background: transparent;
        color: #004d6c;
    }
    100% {
        transform: perspective(1px) rotateY(0);
        background: transparent;
        color: #004d6c;
    }
}


.unhoverBtnMoreCourseInfo {
    animation: unhoverBtnMoreCourseInfo 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}


@keyframes hoverBtnMoreNews {
    0% { transform: perspective(1px) rotateY(0);
        background: transparent;
        padding: 12px 0px 12px 30px;
        color: #0073a2;
    }
    50% {transform: perspective(1px) rotateY(-0.2deg);
        background: #0073a2;
        padding: 12px 0px 12px 30px;
        color: white;
    }
    100% {transform: perspective(1px) rotateY(0);
        background: #0073a2;
        padding: 12px 30px 12px 30px;
        color: white;
    }
}


.hoverBtnMoreNews {
    animation: hoverBtnMoreNews 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: perspective(0) rotateY(0);
}


@keyframes blendInBadTag {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 5%;
        opacity: 1;
    }
}


.blendInBadTag {
    animation: blendInBadTag 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    bottom: 0;
}



@keyframes dropdownMenu_show {
    from {
        left: 100%;
        opacity: 0;
    }
    to {
        left: 120%;
        opacity: 1;
    }
}

.dropdownMenu_show {
    animation: dropdownMenu_show 0.4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    left: 100%;
    opacity: 0;
}

@keyframes dropdownMenu_hide {
    from {
        left: 120%;
        opacity: 1;
    }
    to {
        left: 100%;
        opacity: 0;
    }
}

.dropdownMenu_hide {
    animation: dropdownMenu_hide 0.4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    left: 120%;
    opacity: 1;
}


@keyframes fadeInCookie {
    from {
        display: none;
		opacity: 0;
    }
    to {
        display: flex;
        opacity: 1;
    }
}

.fadeInCookie {
    animation: fadeInCookie 0.5s;
	animation-delay: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    opacity: 0;
	display: none;
}




.delay_1 { animation-delay: 0.1s; }
.delay_2 { animation-delay: 0.2s; }
.delay_3 { animation-delay: 0.3s; }
.delay_4 { animation-delay: 0.4s; }
.delay_5 { animation-delay: 0.5s; }
.delay_6 { animation-delay: 0.6s; }
.delay_7 { animation-delay: 0.7s; }
.delay_8 { animation-delay: 0.8s; }
.delay_9 { animation-delay: 0.9s; }
.delay_10 { animation-delay: 1.0s; }
.delay_11 { animation-delay: 1.1s; }
.delay_12 { animation-delay: 1.2s; }
.delay_13 { animation-delay: 1.3s; }
.delay_14 { animation-delay: 1.4s; }
.delay_15 { animation-delay: 1.5s; }
.delay_16 { animation-delay: 1.6s; }
.delay_17 { animation-delay: 1.7s; }
.delay_18 { animation-delay: 1.8s; }
.delay_19 { animation-delay: 1.9s; }
.delay_20 { animation-delay: 2.0s; }
.delay_21 { animation-delay: 2.1s; }
.delay_21 { animation-delay: 2.1s; }