:root {
    --boxQB-left: 20px;
    --boxQB-top: 150px;
    --boxQB-left-faded: 30px;
    --boxQB-top-faded: 125px;
    --boxQB-left-animation: 300px;
    --boxQB-top-animation: 10px;

    --boxSettings-left: 222px;
    --boxSettings-top: 170px;
    --boxSettings-left-faded: 210px;
    --boxSettings-top-faded: 210px;
    --boxSettings-left-animation: 380px;
    --boxSettings-top-animation: 135px;

    --boxAssignLinks-left: 430px;
    --boxAssignLinks-top: 104px;
    --boxAssignLinks-left-faded: 430px;
    --boxAssignLinks-top-faded: 110px;
    --boxAssignLinks-left-animation: 380px;
    --boxAssignLinks-top-animation: 135px;

    --boxAssignGroups-left: 430px;
    --boxAssignGroups-top: 270px;
    --boxAssignGroups-left-faded: 430px;
    --boxAssignGroups-top-faded: 300px;
    --boxAssignGroups-left-animation: 380px;
    --boxAssignGroups-top-animation: 135px;

    --boxTest-left: 600px;
    --boxTest-top: 180px;
    --boxTest-left-faded: 620px;
    --boxTest-top-faded: 153px;
    --boxTest-left-animation: 380px;
    --boxTest-top-animation: 135px;

    --boxCertificates-left: 814px;
    --boxCertificates-top: 126px;
    --boxCertificates-left-faded: 765px;
    --boxCertificates-top-faded: 90px;
    --boxCertificates-left-animation: 380px;
    --boxCertificates-top-animation: 135px;

    --boxResults-left: 775px;
    --boxResults-top: 255px;
    --boxResults-left-faded: 765px;
    --boxResults-top-faded: 270px;
    --boxResults-left-animation: 380px;
    --boxResults-top-animation: 135px;

    --box-arrows-straigt-top: 220px;
    --box-arrows-angle-top: 180px;

    --zooming-duration: .7s;
    --fading: .7s;
    --fade-opacity: .1;
    --fade-opacity-speed-arrows: .5s;
    --text-slide-down-speed: 4s;

}
.at-a-glance-container {
    position: relative;
    width: 100%;
    height: 420px;
    padding: 0;
}

.at-a-glance-container a img{
    display:inline;
    margin-right: 5px;
}

.at-a-glance-container a {
    font-size: 12px;
    color: #FF462A;
}

.at-a-glance-animation-container {

}
.at-a-glance-animation-container ul li{
    color: #585C60;
    margin-bottom: 10px;
    font-size: 0.875rem;
    list-style-type: disc;
    line-height: 22px;
    margin-left: 20px;
}




.at-a-glance-animation-container .main-element {
    padding: 10px 10px;
}

.at-a-glance-animation-container .main-element:hover {
    background: linear-gradient(180deg, #F7F7F7 0%, rgba(246, 246, 246, 0.25) 61.36%);
    /*background: linear-gradient(#faf5f5, #eeefff);*/
    cursor: pointer;
}

.at-a-glance-animation-container .main-element h5{
    text-align: center;
    line-height:17px;
}

.at-a-glance-animation-container div.close-animation-container {
    height: 50px;
}
.at-a-glance-animation-container  img.close-animation {
    height:20px;
    float:right;
}

.at-a-glance-animation-container  img {
    margin: auto;
}


.boxQB-container {
    position: absolute;
    z-index: 2;
    left: var(--boxQB-left);
    top: var(--boxQB-top);

    border-radius: 8px;
}
.boxQB-container-bounce {
    /*animation: dropAndBounce 6s ease-in-out 0s infinite alternate;*/
    animation: dropAndBounce 1.6s ease-in 0s 1 forwards;
}

.boxQB-animation-container {
    position: absolute;
    z-index: 3;
    width: 550px;
    height: auto;
    padding: 0 0 10px 0;
    left: var(--boxQB-left);
    top: var(--boxQB-top);
    background-color: white;
    display:none;
}
.boxQB-img-container{
     width:240px;
     float:left;
 }
.boxQB-text-slider {
    overflow-y: hidden;
    max-height:0;
    padding: 40px 0 0 20px;
}
.boxQB-text-slider-animation {

    animation: boxQB-text-slide-down var( --text-slide-down-speed) forwards;

}
@keyframes boxQB-text-slide-down {
    0%   {display:block;}
    100% {max-height:290px;}
}


.boxQB-arrows {
    position: absolute;
    z-index: 2;
    left: 170px;
    top: var(--box-arrows-straigt-top);
}

.boxQB-arrows-bounce {
    animation: dropAndBounce2 1.4s ease-in 0s 1 forwards;
}







.boxSettings-container {
    position: absolute;
    z-index: 2;
    left: var(--boxSettings-left);
    top: var(--boxSettings-top);
    border-radius: 8px;
}
.boxSettings-container-bounce {
    /*animation: dropAndBounce 6s ease-in-out 0s infinite alternate;*/
    animation: dropAndBounce2 1.3s ease-in 0s 1 forwards;
}

.boxSettings-animation-container {
    position: absolute;
    z-index: 3;
    width: 550px;
    height: auto;
    padding: 0 0 10px 0;
    left: var(--boxSettings-left);
    top: var(--boxSettings-top);
    background-color: white;
    display:none;
}
.boxSettings-img-container{
    width:140px;
    float:left;
}
.boxSettings-text-slider {
    overflow-y: hidden;
    max-height:0;
    padding: 40px 0 0 20px;
}
.boxSettings-text-slider ul li {
    line-height: 16px;
}
.boxSettings-text-slider-animation {

    animation: boxSettings-text-slide-down var( --text-slide-down-speed) forwards;

}
@keyframes boxSettings-text-slide-down {
    0%   {display:block;}
    100% {max-height:290px;}
}







.boxSettings-arrows {
    position: absolute;
    z-index: 2;
    left: 362px;
    top: var(--box-arrows-angle-top);
}
.boxSettings-arrows-bounce {
    animation: dropAndBounce 1.8s ease-in 0s 1 forwards;
}





.boxAssignLinks-container {
    position: absolute;
    z-index: 2;
    left: var(--boxAssignLinks-left);
    top: var(--boxAssignLinks-top);
    border-radius: 8px;
}
.boxAssignLinks-container-bounce {
    /*animation: dropAndBounce 6s ease-in-out 0s infinite alternate;*/
    animation: dropAndBounce 1.5s ease-in 0s 1 forwards;
}
.boxAssignLinks-animation-container {
    position: absolute;
    z-index: 3;
    width: 450px;
    height: auto;
    padding: 0 0 10px 0;
    left: var(--boxAssignLinks-left);
    top: var(--boxAssignLinks-top);
    background-color: white;
    display:none;
}
.boxAssignLinks-img-container{
    width:140px;
    float:left;
}
.boxAssignLinks-text-slider {
    overflow-y: hidden;
    max-height:0;
    padding: 40px 0 0 20px;
}
.boxAssignLinks-text-slider-animation {

    animation: boxAssignLinks-text-slide-down var( --text-slide-down-speed) forwards;

}
@keyframes boxAssignLinks-text-slide-down {
    0%   {display:block;}
    100% {max-height:200px;}
}









.boxAssignGroups-container {
    position: absolute;
    z-index: 2;
    left: var(--boxAssignGroups-left);
    top: var(--boxAssignGroups-top);
    border-radius: 8px;
}
.boxAssignGroups-container-bounce {
    /*animation: dropAndBounce 6s ease-in-out 0s infinite alternate;*/
    animation: dropAndBounce2 1.5s ease-in 0s 1 forwards;
}
.boxAssignGroups-animation-container {
    position: absolute;
    z-index: 3;
    width: 450px;
    height: auto;
    padding: 0 0 10px 0;
    left: var(--boxAssignGroups-left);
    top: var(--boxAssignGroups-top);
    background-color: white;
    display:none;
}
.boxAssignGroups-img-container{
    width:140px;
    float:left;
}
.boxAssignGroups-text-slider {
    overflow-y: hidden;
    max-height:0;
    padding: 40px 0 0 20px;
}
.boxAssignGroups-text-slider-animation {

    animation: boxAssignGroups-text-slide-down var( --text-slide-down-speed) forwards;

}
@keyframes boxAssignGroups-text-slide-down {
    0%   {display:block;}
    100% {max-height:200px;}
}







.boxAssign-arrows {
    position: absolute;
    z-index: 2;
    left: 550px;
    top: var(--box-arrows-straigt-top);
}
.boxAssign-arrows-bounce {
    animation: dropAndBounce2 1.6s ease-in 0s 1 forwards;
}





.boxTest-container {
    position: absolute;
    z-index: 2;
    left: var(--boxTest-left);
    top: var(--boxTest-top);
    border-radius: 8px;
}
.boxTest-container-bounce {
    /*animation: dropAndBounce 6s ease-in-out 0s infinite alternate;*/
    animation: dropAndBounce 1.4s ease-in 0s 1 forwards;
}
.boxTest-animation-container {
    position: absolute;
    z-index: 3;
    width: 550px;
    height: auto;
    padding: 0 0 10px 0;
    left: var(--boxTest-left);
    top: var(--boxTest-top);
    background-color: white;
    display:none;
}
.boxTest-img-container{
    width:140px;
    float:left;
}
.boxTest-text-slider {
    overflow-y: hidden;
    max-height:0;
    padding: 40px 0 0 20px;
}
.boxTest-text-slider-animation {

    animation: boxTest-text-slide-down var( --text-slide-down-speed) forwards;

}
@keyframes boxTest-text-slide-down {
    0%   {display:block;}
    100% {max-height:200px;}
}









.boxTest-arrows {
    position: absolute;
    z-index: 2;
    left: 714px;
    top: var(--box-arrows-angle-top);
}
.boxTest-arrows-bounce {
    animation: dropAndBounce2 1.3s ease-in 0s 1 forwards;
}




.boxCertificates-container {
    position: absolute;
    z-index: 2;
    left: var(--boxCertificates-left);
    top: var(--boxCertificates-top);
    border-radius: 8px;
}
.boxCertificates-container-bounce {
    /*animation: dropAndBounce 6s ease-in-out 0s infinite alternate;*/
    animation: dropAndBounce2 1.5s ease-in 0s 1 forwards;
}
.boxCertificates-animation-container {
    position: absolute;
    z-index: 3;
    width: 550px;
    height: auto;
    padding: 0 0 10px 0;
    left: var(--boxCertificates-left);
    top: var(--boxCertificates-top);
    background-color: white;
    display:none;
}
.boxCertificates-img-container{
    width:140px;
    float:left;
}
.boxCertificates-text-slider {
    overflow-y: hidden;
    max-height:0;
    padding: 40px 0 0 20px;
}
.boxCertificates-text-slider-animation {

    animation: boxCertificates-text-slide-down var( --text-slide-down-speed) forwards;

}
@keyframes boxCertificates-text-slide-down {
    0%   {display:block;}
    100% {max-height:290px;}
}






.boxResults-container {
    position: absolute;
    z-index: 2;
    left: var(--boxResults-left);
    top: var(--boxResults-top);
    border-radius: 8px;
}
.boxResults-container-bounce {
    /*animation: dropAndBounce 6s ease-in-out 0s infinite alternate;*/
    animation: dropAndBounce 1.5s ease-in 0s 1 forwards;
}

.boxResults-animation-container {
    position: absolute;
    z-index: 3;
    width: 550px;
    height: auto;
    padding: 0 0 10px 0;
    left: var(--boxResults-left);
    top: var(--boxResults-top);
    background-color: white;
    display:none;
}
.boxResults-img-container{
    width:280px;
    float:left;
}
.boxResults-text-slider {
    overflow-y: hidden;
    max-height:0;
    padding: 40px 0 0 30px;
}
.boxResults-text-slider-animation {

    animation: boxResults-text-slide-down var( --text-slide-down-speed) forwards;

}
@keyframes boxResults-text-slide-down {
    0%   {display:block;}
    100% {max-height:290px;}
}








.boxAssignLinks-animation {
    position: absolute;
    z-index: 3;
    left: var(--boxAssignLinks-left);
    top: var(--boxAssignLinks-top);
    display:none;
}

.boxAssignGroups-animation {
    position: absolute;
    z-index: 3;
    left: var(--boxAssignGroups-left);
    top: var(--boxAssignGroups-top);
    display:none;
}

.boxTest-animation {
    position: absolute;
    z-index: 3;
    left: var(--boxTest-left);
    top: var(--boxTest-left);
    display:none;
}

.boxCertificates-animation {
    position: absolute;

    z-index: 3;
    left: var(--boxCertificates-left);
    top: var(--boxCertificates-top);
    display:none;
}

.boxResults-animation {
    position: absolute;
    z-index: 3;
    left: var(--boxResults-left);
    top: var(--boxResults-top);
    display:none;
}

/* Video page */
@media only screen and (min-width: 1130px) {
    .vid-bounce-1 {
        animation: jumpAndBounce 1.5s ease-in 0s 1 forwards;
        opacity: 0;
    }

    .vid-bounce-2 {
        animation: jumpAndBounce 1.7s ease-in 0s 1 forwards;
        opacity: 0;
    }

    .vid-bounce-3 {
        animation: jumpAndBounce 1.6s ease-in 0s 1 forwards;
        opacity: 0;
    }
}


/* Animations */
.animateboxQBImg {
    animation: animateboxQBImg var(--zooming-duration) forwards;
}
@keyframes animateboxQBImg {
    0%   {width:20px;}
    100% {width:240px;}
}
.moveboxQBContainer {
    animation: moveboxQBContainer var(--zooming-duration) forwards;
}
@keyframes moveboxQBContainer {
    0%   {left:var(--boxQB-left);top: var(--boxQB-top);}
    100% {left:var(--boxQB-left-animation);top: var(--boxQB-top-animation);}
}



.animateboxSettingsImg {
    animation: animateboxSettingsImg var(--zooming-duration) forwards;
}
@keyframes animateboxSettingsImg {
    0%   {width:10px;}
    100% {width:110px;}
}
.moveboxSettingsContainer {
    animation: moveboxSettingsContainer var(--zooming-duration) forwards;
}
@keyframes moveboxSettingsContainer {
    0%   {left:var(--boxSettings-left);top: var(--boxSettings-top);}
    100% {left:var(--boxSettings-left-animation);top: var(--boxSettings-top-animation);}
}





.animateboxAssignLinksImg {
    animation: animateboxAssignLinksImg var(--zooming-duration) forwards;
}
@keyframes animateboxAssignLinksImg {
    0%   {width:10px;}
    100% {width:84px;}
}
.moveboxAssignLinksContainer {
    animation: moveboxAssignLinksContainer var(--zooming-duration) forwards;
}
@keyframes moveboxAssignLinksContainer {
    0%   {left:var(--boxAssignLinks-left);top: var(--boxAssignLinks-top);}
    100% {left:var(--boxAssignLinks-left-animation);top: var(--boxAssignLinks-top-animation);}
}







.animateboxAssignGroupsImg {
    animation: animateboxAssignGroupsImg var(--zooming-duration) forwards;
}
@keyframes animateboxAssignGroupsImg {
    0%   {width:10px;}
    100% {width:84px;}
}
.moveboxAssignGroupsContainer {
    animation: moveboxAssignGroupsContainer var(--zooming-duration) forwards;
}
@keyframes moveboxAssignGroupsContainer {
    0%   {left:var(--boxAssignGroups-left);top: var(--boxAssignGroups-top);}
    100% {left:var(--boxAssignGroups-left-animation);top: var(--boxAssignGroups-top-animation);}
}








.animateboxTestImg {
    animation: animateboxTestImg var(--zooming-duration) forwards;
}
@keyframes animateboxTestImg {
    0%   {width:10px;}
    100% {width:115px;}
}
.moveboxTestContainer {
    animation: moveboxTestContainer var(--zooming-duration) forwards;
}
@keyframes moveboxTestContainer {
    0%   {left:var(--boxTest-left);top: var(--boxTest-top);}
    100% {left:var(--boxTest-left-animation);top: var(--boxTest-top-animation);}
}






.animateboxCertificatesImg {
    animation: animateboxCertificatesImg var(--zooming-duration) forwards;
}
@keyframes animateboxCertificatesImg {
    0%   {width:10px;}
    100% {width:105px;}
}
.moveboxCertificatesContainer {
    animation: moveboxCertificatesContainer var(--zooming-duration) forwards;
}
@keyframes moveboxCertificatesContainer {
    0%   {left:var(--boxCertificates-left);top: var(--boxCertificates-top);}
    100% {left:var(--boxCertificates-left-animation);top: var(--boxCertificates-top-animation);}
}




.animateboxResultsImg {
    animation: animateboxResultsImg var(--zooming-duration) forwards;
}
@keyframes animateboxResultsImg {
    0%   {width:13px;}
    100% {width:280px;}
}
.moveboxResultsContainer {
    animation: moveboxResultsContainer var(--zooming-duration) forwards;
}
@keyframes moveboxResultsContainer {
    0%   {left:var(--boxResults-left);top: var(--boxResults-top);}
    100% {left:var(--boxResults-left-animation);top: var(--boxResults-top-animation);}
}









/* Fades */
.fadeMainElementHeaders {
    animation: fadeMainElementHeaders var(--fading) forwards;
}
@keyframes fadeMainElementHeaders {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOriginalboxQB {
    animation: fadeOriginalboxQB var(--fading) forwards;
}
@keyframes fadeOriginalboxQB {
    0%   {opacity: 1;}
    100% {opacity: var(--fade-opacity);left:var(--boxQB-left-faded);top: var(--boxQB-top-faded);}
}
.fadeOriginalboxSettings {
    animation: fadeOriginalboxSettings var(--fading) forwards;
}
@keyframes fadeOriginalboxSettings {
    0%   {opacity: 1;}
    100% {opacity: var(--fade-opacity);left:var(--boxSettings-left-faded);top: var(--boxSettings-top-faded);}
}
.fadeOriginalboxAssignLinks {
    animation: fadeOriginalboxAssignLinks var(--fading) forwards;
}
@keyframes fadeOriginalboxAssignLinks {
    0%   {opacity: 1;}
    100% {opacity: var(--fade-opacity);left:var(--boxAssignLinks-left-faded);top: var(--boxAssignLinks-top-faded);}
}
.fadeOriginalboxAssignGroups {
    animation: fadeOriginalboxAssignGroups var(--fading) forwards;
}
@keyframes fadeOriginalboxAssignGroups {
    0%   {opacity: 1;}
    100% {opacity: var(--fade-opacity);left:var(--boxAssignGroups-left-faded);top: var(--boxAssignGroups-top-faded);}
}
.fadeOriginalboxTest {
    animation: fadeOriginalboxTest var(--fading) forwards;
}
@keyframes fadeOriginalboxTest {
    0%   {opacity: 1;}
    100% {opacity: var(--fade-opacity);left:var(--boxTest-left-faded);top: var(--boxTest-top-faded);}
}
.fadeOriginalboxCertificates {
    animation: fadeOriginalboxCertificates var(--fading) forwards;
}
@keyframes fadeOriginalboxCertificates {
    0%   {opacity: 1;}
    100% {opacity: var(--fade-opacity);left:var(--boxCertificates-left-faded);top: var(--boxCertificates-top-faded);}
}
.fadeOriginalboxResults {
    animation: fadeOriginalboxResults var(--fading) forwards;
}
@keyframes fadeOriginalboxResults {
    0%   {opacity: 1;}
    100% {opacity: var(--fade-opacity);left:var(--boxResults-left-faded);top: var(--boxResults-top-faded);}
}

.fadeOriginalboxQBarrows {
    animation: fadeOriginalboxQBarrows var(--fade-opacity-speed-arrows) forwards;
}
@keyframes fadeOriginalboxQBarrows {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOriginalboxSettingsarrows {
    animation: fadeOriginalboxSettingsarrows var(--fade-opacity-speed-arrows) forwards;
}
@keyframes fadeOriginalboxSettingsarrows {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOriginalboxAssignarrows {
    animation: fadeOriginalboxAssignarrows var(--fade-opacity-speed-arrows) forwards;
}
@keyframes fadeOriginalboxAssignarrows {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOriginalboxTestarrows {
    animation: fadeOriginalboxTestarrows var(--fade-opacity-speed-arrows) forwards;
}
@keyframes fadeOriginalboxTestarrows {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}




@keyframes dropAndBounce {
    0% {
        transform: translatey(-300px);
    }
    20% {
        transform: translatey(0px);
    }
    30% {
        transform: translatey(-40px);
    }
    40% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-20px);
    }
    60% {
        transform: translatey(0px);
    }
    70% {
        transform: translatey(-10px);
    }
    80% {
        transform: translatey(0px);
    }

    100% {
        transform: translatey(0px);
    }
}
@keyframes dropAndBounce2 {
    0% {
        transform: translatey(-300px);
    }
    35% {
        transform: translatey(0px);
    }
    45% {
        transform: translatey(-40px);
    }
    55% {
        transform: translatey(0px);
    }
    65% {
        transform: translatey(-20px);
    }
    75% {
        transform: translatey(0px);
    }
    85% {
        transform: translatey(-10px);
    }
    95% {
        transform: translatey(0px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes jumpAndBounce {
    0% {
        transform: translatey(-100px);
        opacity:1;
    }
    10% {
        transform: translatey(0px);
    }
    20% {
        transform: translatey(-40px);
    }
    30% {
        transform: translatey(0px);
    }
    40% {
        transform: translatey(-20px);
    }
    50% {
        transform: translatey(0px);
    }
    60% {
        transform: translatey(-10px);
    }
    70% {
        transform: translatey(0px);
    }

    100% {
        transform: translatey(0px);
        opacity:1;
    }
}