body {
    margin: 0;
    padding: 0;
    background-color: #2b2260;
    color: white;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%;
    align-items: center;
}
.video-content {
    display: flex;
    align-self: center;
}

.wrapper {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 120vh;
}
.ratio-16-9 {
    padding-top: 56.25%;
}
.ratio-9-16 {
    padding-top: 177.78%;
}
.ratio-4-3 {
    padding-top: 75%;
}
.ratio-3-4 {
    padding-top: 133.33%;
}
.ratio-1-1 {
    max-width: 70vh;
    padding-top: 100%;
}

.embed > .flex {
    height: 100vh;
}
.embed .wrapper {
    width: 100vw;
    max-width: 100vw;
}
.video-player {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* background: #000; */
}
.btn-play,
.poster {
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    height: 100%;
    justify-content: center;
}
.poster {
    visibility: hidden;
    text-align: center;
    height: 100%;
    background: #2b2260;
}
.embed .poster {
    height: 101%;
}
.poster img {
    max-width: 100%;
    max-height: 100%;
    align-self: center;
}
.btn-play img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    align-self: center;
}
.mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.5);
}
#quizVideo {
    visibility: hidden;
}
#continue-action {
    display: none;
    position: absolute;
    bottom: 23%;
    width: 70px;
    height: 70px;
    cursor: pointer;
}
.actions {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.actions > div {
    cursor: pointer;
    /*border:1px solid red;*/
    position: absolute;
}

.actions > div a {
    display: block;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 960px) {
    .wrapper {
        /* width: 960px; */
    }
}

#loading {
    width: 96%;
    /*height: 30px;*/
    z-index: 9999;
    top: 49%;
    position: absolute;
    padding: 0 2%;
    display: none;
}
.nanobar {
    border-radius: 5px;
    height: 20px;
    line-height: 20px;
    background: rgb(241, 241, 241);
}
.bar {
    border-radius: 5px;
    width: 0;
    height: 100%;
    transition: height 0.3s;
    color: #fff;
    text-align: center;
    /*background:#fa7000;*/
    background-image: linear-gradient(to right, #fa7000, #5c3b9e, #2cb296);
}
#sound-icon {
    position: absolute;
    width: 2.5%;
    height: 2.5%;
    top: 2%;
    right: 1.5%;
    cursor: pointer;
    z-index: 99;
}
#sound-icon img:last-child {
    display: none;
}
#sound-icon.mute img:first-child {
    display: none;
}
#sound-icon.mute img:last-child {
    display: inline;
}
#sound-icon img {
    width: 100%;
}
.follow-link {
    display: none;
    position: absolute;
    width: 55.8%;
    height: 10%;
    left: 21.9%;
    top: 38%;
}

body.embed {
    padding: 0;
    margin: 0;
    min-height: min-content;
    background: none;
    overflow: hidden;
    background: #000;
}
.embed h1,
.embed .bottom {
    display: none;
}
.embed .flex {
    padding: 0;
    align-items: baseline;
}
.embed .description {
    display: none;
}

p{
margin:5px;padding:0;
}

.bottom {
    background-image: url(footer.png?v1);
    background-size: contain;
    background-position: center bottom; 
    background-repeat: repeat-x;
    height: 45px;
    width: 100%;
    position: fixed;
    bottom: 0;
}
.no-fixed-bottom .bottom {
    position: relative;
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.5s
        cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-8-3 12:10:29
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-out-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}
@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-8-3 12:12:1
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s linear;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.debug .actions > div {
    border: 1px solid red;
}