/*<div class="version-ribbon"> <div class="ribbon-wrapper"> <div class="ribbon"></div> <div class="ribbon-2"> <div class="text-wrapper"> <div>&nbsp;

v</div >
<div > e</div >
<div > r</div >
<div > s</div >
<div > i</div >
<div > o</div >
<div > n</div >
</div >
</div >
<div class="ribbon-3" > </div >
<div class="ribbon-4" >
<div class="text-wrapper" >
<div > &nbsp;</div >
<div > &nbsp;</div >
<div > &nbsp;</div >
<div > &nbsp;</div >
<div > 2</div >
<div > .</div >
<div > 0</div >
<div > &nbsp;</div >
</div >
</div >
<div class="ribbon-5" > </div >
</div >

<div class="left" >
<div class="line angle1" > </div >
<div class="line" > </div >
<div class="line angle2" > </div >
</div >
<div class="right" >
<div class="line angle2" > </div >
<div class="line" > </div >
<div class="line angle1" > </div >
</div >
</div >*/

/*@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700);

.version-ribbon {
    margin: 4% auto;
    width: 350px;
    position: relative;
    transform: scaleX(0.28) scaleY(0.28);
}

.ribbon {
    width: 300px;
    height: 83px;
    background: #945252;
    position: absolute;
    clip: rect(0px, 301px, 104px, 301px);
    transform: rotate(-15deg);
    -webkit-animation-name: ribbon;
    animation-name: ribbon;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

    .ribbon::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        margin-left: 250px;
        border-top: 41px solid transparent;
        border-right: 51px solid #fff;
        border-bottom: 41px solid transparent;
    }

.ribbon-2 {
    width: 350px;
    height: 83px;
    margin-top: 62px;
    position: absolute;
    background: #e76b6b;
    overflow: hidden;
    clip: rect(0px, 0px, 84px, 0px);
    transform: skew(7deg, 7deg);
    z-index: 3;
    -webkit-animation-name: ribbon-2;
    animation-name: ribbon-2;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.ribbon-3 {
    width: 320px;
    height: 83px;
    background: #945252;
    position: absolute;
    margin-top: 126px;
    margin-left: 29px;
    clip: rect(0px, 322px, 94px, 321px);
    transform: rotate(-15deg);
    z-index: 2;
    -webkit-animation-name: ribbon-3;
    animation-name: ribbon-3;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.ribbon-4 {
    width: 260px;
    height: 83px;
    margin-top: 184px;
    margin-left: 29px;
    position: absolute;
    background: #e76b6b;
    clip: rect(0px, 0px, 94px, -1px);
    transform: skew(7deg, 7deg);
    z-index: 3;
    -webkit-animation-name: ribbon-4;
    animation-name: ribbon-4;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.ribbon-5 {
    width: 200px;
    height: 83px;
    background: #945252;
    position: absolute;
    margin-top: 256px;
    margin-left: 86px;
    clip: rect(0px, 201px, 94px, 201px);
    transform: rotate(-30deg);
    -webkit-animation-name: ribbon-5;
    animation-name: ribbon-5;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

    .ribbon-5::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        margin-left: -1px;
        border-top: 41px solid transparent;
        border-left: 51px solid #fff;
        border-bottom: 41px solid transparent;
    }

.text-wrapper {
    color: white;
    text-transform: uppercase;
    font-family: "Comfortaa", cursive;
    font-size: 2.5em;
    font-weight: 700;
    margin-left: 40px;
    position: relative;
    height: 83px;
    transform: skew(-7deg, -7deg);
}

    .text-wrapper div {
        position: relative;
        float: left;
        opacity: 0;
        margin: 0 3px;
    }

        .text-wrapper div:nth-child(1) {
            transform: translateY(-60px);
            -webkit-animation-name: spanAnimate;
            animation-name: spanAnimate;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .text-wrapper div:nth-child(2) {
            transform: translateY(-90px);
            -webkit-animation-name: spanAnimate-2;
            animation-name: spanAnimate-2;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .text-wrapper div:nth-child(3) {
            transform: translateY(-90px);
            -webkit-animation-name: spanAnimate-3;
            animation-name: spanAnimate-3;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .text-wrapper div:nth-child(4) {
            transform: translateY(-90px);
            -webkit-animation-name: spanAnimate-4;
            animation-name: spanAnimate-4;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .text-wrapper div:nth-child(5) {
            transform: translateY(-90px);
            -webkit-animation-name: spanAnimate-5;
            animation-name: spanAnimate-5;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .text-wrapper div:nth-child(6) {
            transform: translateY(-90px);
            -webkit-animation-name: spanAnimate-6;
            animation-name: spanAnimate-6;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .text-wrapper div:nth-child(7) {
            transform: translateY(-90px);
            -webkit-animation-name: spanAnimate-7;
            animation-name: spanAnimate-7;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .text-wrapper div:nth-child(8) {
            transform: translateY(-90px);
            -webkit-animation-name: spanAnimate-8;
            animation-name: spanAnimate-8;
            -webkit-animation-duration: 7s;
            animation-duration: 7s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

.right {
    position: absolute;
    margin-left: 470px;
    margin-top: -50px;
    clip: rect(82px, 0px, 350px, 0px);
    -webkit-animation-name: rightShine;
    animation-name: rightShine;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

    .right .angle1 {
        margin-left: 20px;
    }

    .right .angle2 {
        margin-left: 20px;
    }

.left {
    position: absolute;
    margin-left: -180px;
    margin-top: -50px;
    clip: rect(80px, 77px, 346px, 71px);
    -webkit-animation-name: LeftShine;
    animation-name: LeftShine;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

    .left .angle1 {
        margin-left: -20px;
    }

    .left .angle2 {
        margin-left: -20px;
    }

.line {
    width: 70px;
    height: 10px;
    margin: 100px 0;
    border-radius: 20px;
    background: #e76b6b;
}

.angle1 {
    transform: rotate(30deg);
}

.angle2 {
    transform: rotate(-30deg);
}

@-webkit-keyframes ribbon {
    0% {
        clip: rect(0px, 301px, 104px, 301px);
    }

    10% {
        clip: rect(0px, 301px, 104px, 301px);
    }

    12% {
        clip: rect(0px, 301px, 104px, -33px);
    }

    90% {
        clip: rect(0px, 301px, 104px, -33px);
    }

    92% {
        clip: rect(0px, 301px, 104px, 301px);
    }

    100% {
        clip: rect(0px, 301px, 104px, 301px);
    }
}

@keyframes ribbon {
    0% {
        clip: rect(0px, 301px, 104px, 301px);
    }

    10% {
        clip: rect(0px, 301px, 104px, 301px);
    }

    12% {
        clip: rect(0px, 301px, 104px, -33px);
    }

    90% {
        clip: rect(0px, 301px, 104px, -33px);
    }

    92% {
        clip: rect(0px, 301px, 104px, 301px);
    }

    100% {
        clip: rect(0px, 301px, 104px, 301px);
    }
}

@-webkit-keyframes ribbon-2 {
    0% {
        clip: rect(0px, 0px, 84px, 0px);
    }

    12% {
        clip: rect(0px, 0px, 84px, 0px);
    }

    14% {
        clip: rect(0px, 351px, 84px, 0px);
    }

    88% {
        clip: rect(0px, 351px, 84px, 0px);
    }

    90% {
        clip: rect(0px, 0px, 84px, 0px);
    }

    100% {
        clip: rect(0px, 0px, 84px, 0px);
    }
}

@keyframes ribbon-2 {
    0% {
        clip: rect(0px, 0px, 84px, 0px);
    }

    12% {
        clip: rect(0px, 0px, 84px, 0px);
    }

    14% {
        clip: rect(0px, 351px, 84px, 0px);
    }

    88% {
        clip: rect(0px, 351px, 84px, 0px);
    }

    90% {
        clip: rect(0px, 0px, 84px, 0px);
    }

    100% {
        clip: rect(0px, 0px, 84px, 0px);
    }
}

@-webkit-keyframes ribbon-3 {
    0% {
        clip: rect(0px, 322px, 94px, 321px);
    }

    14% {
        clip: rect(0px, 322px, 94px, 321px);
    }

    16% {
        clip: rect(0px, 322px, 94px, 0px);
    }

    86% {
        clip: rect(0px, 322px, 94px, 0px);
    }

    88% {
        clip: rect(0px, 322px, 94px, 321px);
    }

    100% {
        clip: rect(0px, 322px, 94px, 321px);
    }
}

@keyframes ribbon-3 {
    0% {
        clip: rect(0px, 322px, 94px, 321px);
    }

    14% {
        clip: rect(0px, 322px, 94px, 321px);
    }

    16% {
        clip: rect(0px, 322px, 94px, 0px);
    }

    86% {
        clip: rect(0px, 322px, 94px, 0px);
    }

    88% {
        clip: rect(0px, 322px, 94px, 321px);
    }

    100% {
        clip: rect(0px, 322px, 94px, 321px);
    }
}

@-webkit-keyframes ribbon-4 {
    0% {
        clip: rect(0px, 0px, 94px, -1px);
    }

    16% {
        clip: rect(0px, 0px, 94px, -1px);
    }

    18% {
        clip: rect(0px, 262px, 94px, -1px);
    }

    84% {
        clip: rect(0px, 262px, 94px, -1px);
    }

    86% {
        clip: rect(0px, 0px, 94px, -1px);
    }

    100% {
        clip: rect(0px, 0px, 94px, -1px);
    }
}

@keyframes ribbon-4 {
    0% {
        clip: rect(0px, 0px, 94px, -1px);
    }

    16% {
        clip: rect(0px, 0px, 94px, -1px);
    }

    18% {
        clip: rect(0px, 262px, 94px, -1px);
    }

    84% {
        clip: rect(0px, 262px, 94px, -1px);
    }

    86% {
        clip: rect(0px, 0px, 94px, -1px);
    }

    100% {
        clip: rect(0px, 0px, 94px, -1px);
    }
}

@-webkit-keyframes ribbon-5 {
    0% {
        clip: rect(0px, 201px, 94px, 201px);
    }

    18% {
        clip: rect(0px, 201px, 94px, 201px);
    }

    20% {
        clip: rect(0px, 201px, 94px, -1px);
    }

    82% {
        clip: rect(0px, 201px, 94px, -1px);
    }

    84% {
        clip: rect(0px, 201px, 94px, 201px);
    }

    100% {
        clip: rect(0px, 201px, 94px, 201px);
    }
}

@keyframes ribbon-5 {
    0% {
        clip: rect(0px, 201px, 94px, 201px);
    }

    18% {
        clip: rect(0px, 201px, 94px, 201px);
    }

    20% {
        clip: rect(0px, 201px, 94px, -1px);
    }

    82% {
        clip: rect(0px, 201px, 94px, -1px);
    }

    84% {
        clip: rect(0px, 201px, 94px, 201px);
    }

    100% {
        clip: rect(0px, 201px, 94px, 201px);
    }
}

@-webkit-keyframes spanAnimate {
    10% {
        transform: translateY(-50px);
        opacity: 0;
    }

    16% {
        transform: translateY(4px);
        opacity: 1;
    }

    19% {
        transform: translateY(-4px);
        opacity: 1;
    }

    22% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(0);
        opacity: 1;
    }

    73% {
        transform: translateY(5px);
        opacity: 1;
    }

    80% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate {
    10% {
        transform: translateY(-50px);
        opacity: 0;
    }

    16% {
        transform: translateY(4px);
        opacity: 1;
    }

    19% {
        transform: translateY(-4px);
        opacity: 1;
    }

    22% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(0);
        opacity: 1;
    }

    73% {
        transform: translateY(5px);
        opacity: 1;
    }

    80% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes spanAnimate-2 {
    12% {
        transform: translateY(-50px);
        opacity: 0;
    }

    18% {
        transform: translateY(9px);
        opacity: 1;
    }

    21% {
        transform: translateY(1px);
        opacity: 1;
    }

    24% {
        transform: translateY(5px);
        opacity: 1;
    }

    67% {
        transform: translateY(5px);
        opacity: 1;
    }

    70% {
        transform: translateY(10px);
        opacity: 1;
    }

    77% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate-2 {
    12% {
        transform: translateY(-50px);
        opacity: 0;
    }

    18% {
        transform: translateY(9px);
        opacity: 1;
    }

    21% {
        transform: translateY(1px);
        opacity: 1;
    }

    24% {
        transform: translateY(5px);
        opacity: 1;
    }

    67% {
        transform: translateY(5px);
        opacity: 1;
    }

    70% {
        transform: translateY(10px);
        opacity: 1;
    }

    77% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes spanAnimate-3 {
    14% {
        transform: translateY(-50px);
        opacity: 0;
    }

    20% {
        transform: translateY(14px);
        opacity: 1;
    }

    23% {
        transform: translateY(4px);
        opacity: 1;
    }

    26% {
        transform: translateY(9px);
        opacity: 1;
    }

    64% {
        transform: translateY(9px);
        opacity: 1;
    }

    67% {
        transform: translateY(14px);
        opacity: 1;
    }

    74% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate-3 {
    14% {
        transform: translateY(-50px);
        opacity: 0;
    }

    20% {
        transform: translateY(14px);
        opacity: 1;
    }

    23% {
        transform: translateY(4px);
        opacity: 1;
    }

    26% {
        transform: translateY(9px);
        opacity: 1;
    }

    64% {
        transform: translateY(9px);
        opacity: 1;
    }

    67% {
        transform: translateY(14px);
        opacity: 1;
    }

    74% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes spanAnimate-4 {
    16% {
        transform: translateY(-50px);
        opacity: 0;
    }

    22% {
        transform: translateY(19px);
        opacity: 1;
    }

    25% {
        transform: translateY(9px);
        opacity: 1;
    }

    28% {
        transform: translateY(14px);
        opacity: 1;
    }

    61% {
        transform: translateY(14px);
        opacity: 1;
    }

    64% {
        transform: translateY(19px);
        opacity: 1;
    }

    71% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate-4 {
    16% {
        transform: translateY(-50px);
        opacity: 0;
    }

    22% {
        transform: translateY(19px);
        opacity: 1;
    }

    25% {
        transform: translateY(9px);
        opacity: 1;
    }

    28% {
        transform: translateY(14px);
        opacity: 1;
    }

    61% {
        transform: translateY(14px);
        opacity: 1;
    }

    64% {
        transform: translateY(19px);
        opacity: 1;
    }

    71% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes spanAnimate-5 {
    18% {
        transform: translateY(-50px);
        opacity: 0;
    }

    24% {
        transform: translateY(24px);
        opacity: 1;
    }

    27% {
        transform: translateY(14px);
        opacity: 1;
    }

    30% {
        transform: translateY(19px);
        opacity: 1;
    }

    58% {
        transform: translateY(19px);
        opacity: 1;
    }

    62% {
        transform: translateY(24px);
        opacity: 1;
    }

    68% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate-5 {
    18% {
        transform: translateY(-50px);
        opacity: 0;
    }

    24% {
        transform: translateY(24px);
        opacity: 1;
    }

    27% {
        transform: translateY(14px);
        opacity: 1;
    }

    30% {
        transform: translateY(19px);
        opacity: 1;
    }

    58% {
        transform: translateY(19px);
        opacity: 1;
    }

    62% {
        transform: translateY(24px);
        opacity: 1;
    }

    68% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes spanAnimate-6 {
    20% {
        transform: translateY(-50px);
        opacity: 0;
    }

    26% {
        transform: translateY(29px);
        opacity: 1;
    }

    29% {
        transform: translateY(19px);
        opacity: 1;
    }

    32% {
        transform: translateY(24px);
        opacity: 1;
    }

    55% {
        transform: translateY(24px);
        opacity: 1;
    }

    59% {
        transform: translateY(29px);
        opacity: 1;
    }

    66% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate-6 {
    20% {
        transform: translateY(-50px);
        opacity: 0;
    }

    26% {
        transform: translateY(29px);
        opacity: 1;
    }

    29% {
        transform: translateY(19px);
        opacity: 1;
    }

    32% {
        transform: translateY(24px);
        opacity: 1;
    }

    55% {
        transform: translateY(24px);
        opacity: 1;
    }

    59% {
        transform: translateY(29px);
        opacity: 1;
    }

    66% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes spanAnimate-7 {
    22% {
        transform: translateY(-50px);
        opacity: 0;
    }

    28% {
        transform: translateY(34px);
        opacity: 1;
    }

    31% {
        transform: translateY(24px);
        opacity: 1;
    }

    34% {
        transform: translateY(29px);
        opacity: 1;
    }

    52% {
        transform: translateY(29px);
        opacity: 1;
    }

    56% {
        transform: translateY(34px);
        opacity: 1;
    }

    63% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate-7 {
    22% {
        transform: translateY(-50px);
        opacity: 0;
    }

    28% {
        transform: translateY(34px);
        opacity: 1;
    }

    31% {
        transform: translateY(24px);
        opacity: 1;
    }

    34% {
        transform: translateY(29px);
        opacity: 1;
    }

    52% {
        transform: translateY(29px);
        opacity: 1;
    }

    56% {
        transform: translateY(34px);
        opacity: 1;
    }

    63% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes spanAnimate-8 {
    24% {
        transform: translateY(-50px);
        opacity: 0;
    }

    30% {
        transform: translateY(39px);
        opacity: 1;
    }

    33% {
        transform: translateY(28px);
        opacity: 1;
    }

    36% {
        transform: translateY(34px);
        opacity: 1;
    }

    48% {
        transform: translateY(34px);
        opacity: 1;
    }

    52% {
        transform: translateY(39px);
        opacity: 1;
    }

    59% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes spanAnimate-8 {
    24% {
        transform: translateY(-50px);
        opacity: 0;
    }

    30% {
        transform: translateY(39px);
        opacity: 1;
    }

    33% {
        transform: translateY(28px);
        opacity: 1;
    }

    36% {
        transform: translateY(34px);
        opacity: 1;
    }

    48% {
        transform: translateY(34px);
        opacity: 1;
    }

    52% {
        transform: translateY(39px);
        opacity: 1;
    }

    59% {
        transform: translateY(-60px);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@-webkit-keyframes rightShine {
    21% {
        clip: rect(82px, 0px, 350px, 0px);
    }

    23% {
        clip: rect(82px, 86px, 350px, 0px);
    }

    80% {
        clip: rect(82px, 86px, 350px, 0px);
    }

    86% {
        clip: rect(82px, 86px, 350px, 350px);
    }

    100% {
        clip: rect(82px, 86px, 350px, 350px);
    }
}

@keyframes rightShine {
    21% {
        clip: rect(82px, 0px, 350px, 0px);
    }

    23% {
        clip: rect(82px, 86px, 350px, 0px);
    }

    80% {
        clip: rect(82px, 86px, 350px, 0px);
    }

    86% {
        clip: rect(82px, 86px, 350px, 350px);
    }

    100% {
        clip: rect(82px, 86px, 350px, 350px);
    }
}

@-webkit-keyframes LeftShine {
    21% {
        clip: rect(80px, 77px, 346px, 71px);
    }

    23% {
        clip: rect(82px, 86px, 350px, -27px);
    }

    80% {
        clip: rect(82px, 86px, 350px, -27px);
    }

    86% {
        clip: rect(82px, -86px, 350px, -27px);
    }

    100% {
        clip: rect(82px, -86px, 350px, -27px);
    }
}

@keyframes LeftShine {
    21% {
        clip: rect(80px, 77px, 346px, 71px);
    }

    23% {
        clip: rect(82px, 86px, 350px, -27px);
    }

    80% {
        clip: rect(82px, 86px, 350px, -27px);
    }

    86% {
        clip: rect(82px, -86px, 350px, -27px);
    }

    100% {
        clip: rect(82px, -86px, 350px, -27px);
    }
}
*/
/* The ribbon */
.ribbon {
    width: 49.5px;
    height: 150px;
    background-color: #DC3545;
    position: absolute;
    right: 20px;
    top: -350px;
    -webkit-animation: drop forwards 0.8s 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    animation: drop forwards 0.8s 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ribbon-text {
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: 13px;
    writing-mode: tb-rl;
    padding-bottom:50%;
    transform: rotate(-180deg);
}

.ribbon:before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: -25px;
    border-top: 1px solid #DC3545;
    border-left: 25px solid #DC3545;
    border-right: 25px solid #DC3545;
    border-bottom: 25px solid transparent;
}

.ribbon:after {
    content: "";
    width: 200px;
    height: 270px;
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: -120px;
    /*background-color: #507abd;*/
    transform: skewY(35deg) skewX(0);
}

@-webkit-keyframes drop {
    0% {
        top: -350px;
    }

    100% {
        top: 0;
    }
}

@keyframes drop {
    0% {
        top: -350px;
    }

    100% {
        top: 0;
    }
}