/*Fade in*/
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/*Fade to black*/

@keyframes black-fade {
    0% { color: #ffcb19; border: 1px dashed #ffcb19 }

    100% { color: #afafaf; border: 1px dashed transparent }
}

@-webkit-keyframes black-fade {
    0% { color: #ffcb19; border: 1px dashed #ffcb19 }

    100% { color: #afafaf; border: 1px dashed transparent }
}
/*Slide down*/

@keyframes slide-down {
    from { margin-top: -100%; height: 300%; }

    to { margin-top: 0%; height: 100%; }
}

@-webkit-keyframes slide-down {
    from { margin-top: -100%; height: 300%; }

    to { margin-top: 0%; height: 100%; }
}
/*Spin something*/

@keyframes spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/*Slide in from Left*/
@keyframes slideInFromLeft {
    from { transform: translateX(100%); }
}

/*Slide left*/

@keyframes slide-left {
    from { margin-left: 100%; width: 300%; }

    to { margin-left: 0%; width: 100%; }
}

@-webkit-keyframes slide-left {
    from { margin-left: 100%; width: 300%; }

    to { margin-left: 0%; width: 100%; }
}
/*Slide in*/

@keyframes slideIn {
    0% { -webkit-transform: translateX(-900px); transform: translateX(-900px); }

    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}

@-webkit-keyframes slideIn {
    0% { -webkit-transform: translateX(-900px); transform: translateX(-900px); }

    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
/*Slide up*/

@keyframes slideUp {
    0% { -webkit-transform: translateY(900px); transform: translateY(900px); }

    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes slideUp {
    0% { -webkit-transform: translateY(900px); transform: translateY(900px); }

    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
/*Pulse*/

@keyframes pulse {
    0% { -webkit-box-shadow: 0 0 0 0 rgba(47, 60, 77, 0.4); }

    70% { -webkit-box-shadow: 0 0 0 10px rgba(47, 60, 77, 0); }

    100% { -webkit-box-shadow: 0 0 0 0 rgba(47, 60, 77, 0); }
}

@-webkit-keyframes pulse {
    0% { -webkit-box-shadow: 0 0 0 0 rgba(47, 60, 77, 0.4); }

    70% { -webkit-box-shadow: 0 0 0 10px rgba(47, 60, 77, 0); }

    100% { -webkit-box-shadow: 0 0 0 0 rgba(47, 60, 77, 0); }
}
/*Pulse pink*/

@keyframes pulse-pink {
    0% { -webkit-box-shadow: 0 0 0 0 rgba(228, 35, 80, 0.4); }

    70% { -webkit-box-shadow: 0 0 0 5px rgba(47, 60, 77, 0); }

    100% { -webkit-box-shadow: 0 0 0 0 rgba(47, 60, 77, 0); }
}

@-webkit-keyframes pulse-pink {
    0% { -webkit-box-shadow: 0 0 0 0 rgba(228, 35, 80, 0.4); }

    70% { -webkit-box-shadow: 0 0 0 5px rgba(47, 60, 77, 0); }

    100% { -webkit-box-shadow: 0 0 0 0 rgba(47, 60, 77, 0); }
}
/*Pulse black*/

@keyframes pulse-black {
    0% { -webkit-transform: scale(0.8); transform: scale(0.8); }

    60% { -webkit-transform: scale(1.1); transform: scale(1.1); }

    100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}

@-webkit-keyframes pulse-black {
    0% { -webkit-transform: scale(0.8); transform: scale(0.8); }

    60% { -webkit-transform: scale(1.1); transform: scale(1.1); }

    100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}
/*Pulse black large*/

@keyframes pulse-black-large {
    0% { -webkit-transform: scale(0.5); transform: scale(0.5); }

    60% { -webkit-transform: scale(1.3); transform: scale(1.3); }

    100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}

@-webkit-keyframes pulse-black-large {
    0% { -webkit-transform: scale(0.5); transform: scale(0.5); }

    60% { -webkit-transform: scale(1.3); transform: scale(1.3); }

    100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}
/*Bounce*/

@keyframes bounce {
    0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }

    50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
}

@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }

    50% { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
}
/*Achievement stars pulse*/

@keyframes star-pulse {
    0%, 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    50% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
}

@-webkit-keyframes star-pulse {
    0%, 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    50% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
}
/*Opacity and pulse number*/

@keyframes opacity-pulse-number {
    0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

    80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    90% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}

@-webkit-keyframes opacity-pulse-number {
    0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

    80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    90% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}
/*Zoom Out*/

@keyframes zoomOut {
    0% { -webkit-transform: scale(5); transform: scale(5); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

    80% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}

@-webkit-keyframes zoomOut {
    0% { -webkit-transform: scale(5); transform: scale(5); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

    80% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}
/*Zoom In*/

@keyframes zoomIn {
    0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

    80% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}

@-webkit-keyframes zoomIn {
    0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

    80% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
}


/*Own classes*/
.app_animation_opacity_pulse { -webkit-animation: opacity-pulse-number 3s; animation: opacity-pulse-number 3s; }

.highlightYellow > div:last-of-type { -webkit-animation: black-fade 4s ease-in 1; animation: black-fade 4s ease-in 1; }

.slideLeft { -webkit-animation: slide-left 2s; animation: slide-left 2s; }

.slideIconLeftToDown { -webkit-transition: all 0.1s linear; transition: all 0.1s linear; }

.animated { -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count: 5; -webkit-animation-iteration-count: 5; }

.bounce { -webkit-animation-name: bounce; animation-name: bounce; }

    .bounce.delay3 { -webkit-animation-delay: 3s; animation-delay: 3s; }

.turnTopRight { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=-0.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); display: inline-block; }

.flip-container { -ms-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; }

    .flip-container.flip-container-hover .flip-container-flipper { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.flip-container, .flip-container-front, .flip-container-back { width: 100%; height: 115px; }

.flip-container-flipper { -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; }

.flip-container-front, .flip-container-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; }

.flip-container-front { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }

.flip-container-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

/*Rotate icons*/
.rotate-center:hover span.fas { -webkit-animation: rotate-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: rotate-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }
@-webkit-keyframes rotate-center {
    0% { -webkit-transform: rotate(0); transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes rotate-center {
    0% { -webkit-transform: rotate(0); transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/*Move to middle and fade out*/
@-webkit-keyframes move-to-middle-and-fade-out {
    0% { transform-origin: 0 0; -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    80% { transform-origin: 2rem -2rem; -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }

    100% { transform-origin: 2.5rem -2.5rem; -webkit-transform: scale(2); transform: scale(2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
}

@keyframes move-to-middle-and-fade-out {
    0% { transform-origin: 0 0; -webkit-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

    80% { transform-origin: 2rem -2rem; -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }

    100% { transform-origin: 2.5rem -2.5rem; -webkit-transform: scale(2); transform: scale(2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
}