.main-content {
    padding: 10px 0 30px;
    counter-reset: section;
}

.main-content > section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 0;
    width: 28em;
    height: 220px;
    background: #fff;
    border: 1px dashed grey;
    margin: 10px auto;
}

.main-content > section:after {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    top: -1px;
    left: -1px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    background: rgba(0,0,0,0.35);
    border-bottom-right-radius: 50%;
    counter-increment: section;
    content: ""counter(section)"";
}

/* Ribbon 1 */
.main-content > section:first-child {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.rib1,.rib1_1 {
    position: relative;
    width: 70%;
    color: #fff;
    font: 1.5em/2 Georgia;
    text-align: center;
    text-transform: capitalize;
    text-shadow: 0 1px 1px #333;
    background: -webkit-linear-gradient(top,#c40000 5%,lightgrey 5%,lightgrey 7%,#c40000 0,#c40000 92%,lightgrey 92%,lightgrey 94%,#c40000 0);
    background: linear-gradient(to bottom,#c40000 5%,lightgrey 5%,lightgrey 7%,#c40000 0,#c40000 92%,lightgrey 92%,lightgrey 94%,#c40000 0);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 2px 1px -1px #333;
}

.rib1:before,.rib1_1:before {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 3em;
    height: 100%;
    top: 25%;
    left: -2em;
    color: #eb0000;
    background: -webkit-linear-gradient(225deg,currentColor 50%,transparent 0),-webkit-linear-gradient(315deg,transparent 50%,currentColor 0),-webkit-linear-gradient(top right,rgba(0,0,0,0.4) 50%,transparent 0),-webkit-linear-gradient(left,transparent 1em,currentColor 0);
    background: linear-gradient(225deg,currentColor 50%,transparent 0),linear-gradient(135deg,transparent 50%,currentColor 0),linear-gradient(to bottom left,rgba(0,0,0,0.4) 50%,transparent 0),linear-gradient(to right,transparent 1em,currentColor 0);
    background-position: 0 0,0 100%,100% 100%,0 0;
    background-size: 1em 1em,1em 1em,1em 0.5em,100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 5px 4px -4px #333;
}

.rib1:after,.rib1_1:after {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    height: 100%;
    width: 3em;
    top: 25%;
    right: -2em;
    color: #eb0000;
    background: -webkit-linear-gradient(315deg,currentColor 50%,transparent 0),-webkit-linear-gradient(225deg,transparent 50%,currentColor 0),-webkit-linear-gradient(bottom right,transparent 50%,rgba(0,0,0,0.4) 0),-webkit-linear-gradient(left,currentColor 2em,transparent 0);
    background: linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(225deg,transparent 50%,currentColor 0),linear-gradient(to top left,transparent 50%,rgba(0,0,0,0.4) 0),linear-gradient(to right,currentColor 2em,transparent 0);
    background-position: 100% 0,100% 100%,0 100%,0 0;
    background-size: 1em 1em,1em 1em,1em 0.5em,100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 5px 4px -4px #333;
}

.rib1_1 {
    background: -webkit-linear-gradient(top,#71bbd4 5%,lightgrey 5%,lightgrey 7%,#71bbd4 0,#71bbd4 92%,lightgrey 92%,lightgrey 94%,#71bbd4 0);
    background: linear-gradient(to bottom,#71bbd4 5%,lightgrey 5%,lightgrey 7%,#71bbd4 0,#71bbd4 92%,lightgrey 92%,lightgrey 94%,#71bbd4 0);
    box-shadow: 0 -2px 1px -1px #333;
}

.rib1_1:before,.rib1_1:after {
    top: -25%;
    box-shadow: 0 -2px 1px -1px #333;
}

.rib1_1:before {
    color: #add8e6;
    background: -webkit-linear-gradient(225deg,currentColor 50%,transparent 0),-webkit-linear-gradient(315deg,transparent 50%,currentColor 0),-webkit-linear-gradient(bottom right,rgba(0,0,0,0.4) 50%,transparent 0),-webkit-linear-gradient(left,transparent 1em,currentColor 0);
    background: linear-gradient(225deg,currentColor 50%,transparent 0),linear-gradient(135deg,transparent 50%,currentColor 0),linear-gradient(to top left,rgba(0,0,0,0.4) 50%,transparent 0),linear-gradient(to right,transparent 1em,currentColor 0);
    background-position: 0 0,0 100%,100% 0,0 0;
    background-size: 1em 1em,1em 1em,1em 0.5em,100% 100%;
    background-repeat: no-repeat;
}

.rib1_1:after {
    color: #add8e6;
    background: -webkit-linear-gradient(315deg,currentColor 50%,transparent 0),-webkit-linear-gradient(225deg,transparent 50%,currentColor 0),-webkit-linear-gradient(top right,transparent 50%,rgba(0,0,0,0.4) 0),-webkit-linear-gradient(left,currentColor 2em,transparent 0);
    background: linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(225deg,transparent 50%,currentColor 0),linear-gradient(to bottom left,transparent 50%,rgba(0,0,0,0.4) 0),linear-gradient(to right,currentColor 2em,transparent 0);
    background-position: 100% 0,100% 100%,0 0,0 0;
    background-size: 1em 1em,1em 1em,1em 0.5em,100% 100%;
    background-repeat: no-repeat;
}

/* Ribbon 2 */
.main-content > section:nth-child(2) {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

.rib2 {
    display: block;
    position: relative;
    width: 5em;
    font: 1.5em/5 Georgia;
    text-shadow: 0 1px 1px #fff;
    text-decoration: none;
    text-align: center;
    text-transform: capitalize;
    color: #222;
    background-color: #fff;
    background-image: -webkit-linear-gradient(left,rgba(200,0,0,0.3) 50%,transparent 50%),-webkit-linear-gradient(rgba(200,0,0,0.2) 50%,transparent 50%);
    background-image: linear-gradient(90deg,rgba(200,0,0,0.3) 50%,transparent 50%),linear-gradient(rgba(200,0,0,0.2) 50%,transparent 50%);
    background-size: 20px 20px;
    background-clip: content-box;
    padding: .2em;
    border: 2px dashed #E68E8E;
    border-radius: 50%;
    box-shadow: 0 0 2px 2px #d3d3d3 inset;
    margin-top: 15px;
}

.rib2:before,.rib2:after {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 1.5em;
    height: 3em;
    top: 85%;
    left: 0;
    background: -webkit-repeating-linear-gradient(left,transparent 1px,#fff 1px,#fff 2px,transparent 4px),-webkit-linear-gradient(315deg,#E68E8E 50%,transparent 0),-webkit-linear-gradient(45deg,transparent 50%,#E68E8E 0),-webkit-linear-gradient(top,#E68E8E calc(100% - 0.75em),transparent 0);
    background: repeating-linear-gradient(90deg,transparent 1px,#fff 1px,#fff 2px,transparent 4px),linear-gradient(135deg,#E68E8E 50%,transparent 0),linear-gradient(45deg,transparent 50%,#E68E8E 0),linear-gradient(180deg,#E68E8E calc(100% - 0.75em),transparent 0);
    background-position: 0 0,0 100%,100% 100%,0 0;
    background-size: 4px 2.25em,.75em 0.75em,.75em 0.75em,100% 100%;
    background-repeat: repeat-x,no-repeat,no-repeat,no-repeat;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.rib2:after {
    left: 70%;
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}

/* Ribbon 3 */
.main-content > section:nth-child(3) > div {
    position: relative;
    text-align: justify;
    width: 300px;
    height: 180px;
    background: #ccc;
    padding: 85px 15px 10px;
    box-shadow: 0 4px 3px -2px #333;
}

.rib3 {
    position: absolute;
    width: calc(100% + 1em);
    top: 10px;
    left: -.5em;
    font: 1.5em/2 Georgia;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    text-shadow: 1px 0 0 #333,0 1px 0 #333;
    background: #1bb21b;
    border-top-right-radius: 100% 20px;
    border-top-left-radius: 100% 20px;
    box-shadow: 0 -2px 2px -2px #888;
}

.rib3:before {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 0;
    height: 0;
    left: -1.5em;
    top: 20px;
    border: 1em solid #1ec31e;
    border-left-color: transparent;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

.rib3:after {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 0;
    height: 0;
    left: calc(100% - 0.5em);
    top: 20px;
    border: 1em solid #1ec31e;
    border-right-color: transparent;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}

.rib3 span:first-child {
    display: block;
    padding-bottom: 5px;
}

.rib3 span:first-child:before {
    display: block;
    position: absolute;
    content: "";
    width: .5em;
    height: 10px;
    left: 0;
    bottom: -10px;
    background: -webkit-linear-gradient(45deg,transparent 50%,rgba(0,0,0,0.4) 0);
    background: linear-gradient(45deg,transparent 50%,rgba(0,0,0,0.4) 0);
}

.rib3 span:first-child:after {
    display: block;
    position: absolute;
    content: "";
    width: .5em;
    height: 10px;
    left: calc(100% - 0.5em);
    bottom: -10px;
    background: -webkit-linear-gradient(135deg,transparent 50%,rgba(0,0,0,0.4) 0);
    background: linear-gradient(-45deg,transparent 50%,rgba(0,0,0,0.4) 0);
}

.rib3 span:nth-child(2) {
    display: block;
    position: absolute;
    content: "";
    width: calc(100% - 1em);
    height: 10px;
    left: .5em;
    bottom: 0;
    background: #ccc;
    border-top-right-radius: 100% 20px;
    border-top-left-radius: 100% 20px;
    box-shadow: 0 -2px 2px -1px #888;
}

/* Ribbon 4 */
.main-content > section:nth-child(4) > div {
    position: relative;
    width: 300px;
    height: 180px;
    text-align: justify;
    background: #ccc;
    padding: 85px 15px 10px;
    box-shadow: 2px 2px 3px -2px #333;
}

.rib4 {
    position: absolute;
    width: 90%;
    top: 10px;
    left: 0;
    font: 1.4em/2 Georgia;
    color: #fff;
    text-align: left;
    text-transform: capitalize;
    text-shadow: 1px 0 0 #333,0 1px 0 #333;
    background: #c06;
/*background: linear-gradient(to bottom right, #cc0066 50%, transparent 0),
	linear-gradient(to top right, #cc0066 50%, transparent 0),
	linear-gradient(to right,#cc0066 calc(100% - 1em), transparent 0);
	background-position: 100% 0,100% 100%, 0 0;
	background-size: 1em 3em,  1em 3em, 100% 100%;
	background-repeat: no-repeat;*/
    border-top-right-radius: .2em;
    border-bottom-right-radius: .1em;
    box-shadow: 0 -3px 2px -2px #888,0 4px 2px -2px #888;
}

.rib4:before {
    display: block;
    position: absolute;
    content: "";
    width: .6em;
    height: calc(100% + 0.8em);
    left: -.6em;
    background: #c06;
    border-top-left-radius: .4em;
    border-bottom-left-radius: .4em;
    box-shadow: -3px 0 2px -2px #888;
}

.rib4:after {
    display: block;
    position: absolute;
    content: "";
    width: .3em;
    height: .4em;
    top: 100%;
    left: -.3em;
    background: rgba(0,0,0,0.4);
    border-top-left-radius: .2em;
    border-bottom-left-radius: .2em;
}

/* Ribbon 5 */
.main-content > section:nth-child(5) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.rib5 {
    position: relative;
    width: 80%;
    background: -webkit-linear-gradient(top,#000 calc(100% - 0.5em),transparent 0);
    background: linear-gradient(to bottom,#000 calc(100% - 0.5em),transparent 0);
}

.rib5:before {
    display: block;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    left: -2em;
    border: 1em solid #000;
    border-left-color: transparent;
}

.rib5:after {
    display: block;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    left: 100%;
    border: 1em solid #000;
    border-right-color: transparent;
}

.rib5 a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    position: relative;
    font: 700 1em/2 Georgia;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #000;
    padding: 0 4px;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 100ms linear,background 200ms linear;
    transition: all 100ms linear,background 200ms linear;
}

.rib5 a:before {
    display: block;
    position: absolute;
    z-index: 1;
    content: "";
    width: .5em;
    height: .5em;
    top: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

.rib5 a:after {
    display: block;
    position: absolute;
    content: "";
    width: .5em;
    height: .5em;
    top: 100%;
    left: calc(100% - 0.5em);
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

.rib5 a:hover {
    background: #C40000;
    box-shadow: 0 -3px 2px -2px #888,0 3px 2px -2px #888;
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
}

.rib5 a:hover:before {
    background: -webkit-linear-gradient(45deg,#000 50%,#EB0000 0);
    background: linear-gradient(45deg,#000 50%,#EB0000 0);
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.rib5 a:hover:after {
    background: -webkit-linear-gradient(135deg,#000 50%,#EB0000 0);
    background: linear-gradient(-45deg,#000 50%,#EB0000 0);
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

/* Ribbon 5_1 */
.rib51 {
    position: relative;
    width: 80%;
    background: -webkit-linear-gradient(top,transparent 0.5em,#C40000 0);
    background: linear-gradient(to bottom,transparent 0.5em,#C40000 0);
}

.rib51:before {
    display: block;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    left: -2em;
    border: 1em solid #C40000;
    border-left-color: transparent;
}

.rib51:after {
    display: block;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    left: 100%;
    border: 1em solid #C40000;
    border-right-color: transparent;
}

.rib51 a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    position: relative;
    font: 700 1em/2 Georgia;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #C40000;
    padding: 0 4px;
    -webkit-transition: all 0s linear,background 200ms linear;
    transition: all 0s linear,background 200ms linear;
}

.rib51 a:before {
    display: block;
    position: absolute;
    content: "";
    width: .5em;
    height: .5em;
    top: -.5em;
    left: 0;
    background: -webkit-linear-gradient(315deg,#C40000 50%,#444 0);
    background: linear-gradient(135deg,#C40000 50%,#444 0);
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -webkit-transition: all 0 linear;
    transition: all 0 linear;
}

.rib51 a:after {
    display: block;
    position: absolute;
    content: "";
    width: .5em;
    height: .5em;
    top: -.5em;
    left: calc(100% - 0.5em);
    background: -webkit-linear-gradient(225deg,#C40000 50%,#444 0);
    background: linear-gradient(225deg,#C40000 50%,#444 0);
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -webkit-transition: all 0 linear;
    transition: all 0 linear;
}

.rib51 a:hover {
    background: #000;
    box-shadow: 0 -3px 2px -2px #888,0 3px 2px -2px #888;
    -webkit-transform: translateY(0.5em);
    transform: translateY(0.5em);
}

.rib51 a:hover:before,.rib51 a:hover:after {
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

/* Ribbon 6 */
.main-content > section:nth-child(6) > div {
    position: relative;
    width: 300px;
    height: 180px;
    text-align: justify;
    padding: 0 15px 10px;
    background: #eee;
    box-shadow: 0 0 4px 1px #999;
}

.main-content > section:nth-child(6) > div h1 {
    font: 400 1.2em/1 Helvetica;
    padding: 30px;
}

.rib6 span {
    display: block;
    position: relative;
    z-index: 1;
    font: 700 1em/2 Helvetica,sans-serif;
    color: #fff;
    letter-spacing: 1px;
    overflow: hidden;
}

.rib6 span:before {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: -webkit-linear-gradient(top,transparent 10%,rgba(255,255,255,.8) 10%,rgba(255,255,255,.8) 13%,transparent 0,transparent 85%,rgba(255,255,255,.8) 85%,rgba(255,255,255,.8) 89%,transparent 0);
    background: linear-gradient(to bottom,transparent 10%,rgba(255,255,255,.8) 10%,rgba(255,255,255,.8) 13%,transparent 0,transparent 85%,rgba(255,255,255,.8) 85%,rgba(255,255,255,.8) 89%,transparent 0);
}

.rib6 span:after {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(left,rgba(229,172,142,0.1),rgba(255,255,255,0.5) 50%,rgba(229,172,142,0.1));
    background: linear-gradient(to right,rgba(229,172,142,0.1),rgba(255,255,255,0.5) 50%,rgba(229,172,142,0.1));
    -webkit-transform: translateX(-8em);
    transform: translateX(-8em);
    -webkit-animation: shinny 2.5s forwards infinite;
    animation: shinny 2.5s forwards infinite;
}

@-webkit-keyframes shinny {
    0%,75% {
        -webkit-transform: translateX(-8em);
        transform: translateX(-8em);
    }

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

@keyframes shinny {
    0%,75% {
        -webkit-transform: translateX(-8em);
        transform: translateX(-8em);
    }

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

.rib6 {
    position: absolute;
    height: 2em;
    width: 8em;
    top: -1em;
    right: -4em;
    text-align: center;
    color: #f30;
    background: -webkit-linear-gradient(315deg,transparent 50%,currentColor 0),-webkit-linear-gradient(left,transparent 2em,currentColor 0,currentColor calc(100% - 2em),transparent 0),-webkit-linear-gradient(225deg,transparent 50%,currentColor 0);
    background: linear-gradient(135deg,transparent 50%,currentColor 0),linear-gradient(to right,transparent 2em,currentColor 0,currentColor calc(100% - 2em),transparent 0),linear-gradient(225deg,transparent 50%,currentColor 0);
    background-size: 2em 2em,100% 100%,2em 2em;
    background-position: 0 0,0 0,100% 0;
    background-repeat: no-repeat;
    -webkit-transform: rotate(45deg) translateY(2.2em);
    transform: rotate(45deg) translateY(2.2em);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    box-shadow: 0 3px 2px -2px #8e8e8e;
}

.rib6:before {
    display: block;
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    top: 2em;
    left: 0;
    color: inherit;
    background: -webkit-linear-gradient(315deg,currentColor 50%,transparent 0);
    background: linear-gradient(135deg,currentColor 50%,transparent 0);
    border-bottom-left-radius: 90%;
}

.rib6:after {
    display: block;
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    top: 2em;
    right: 0;
    color: inherit;
    background: -webkit-linear-gradient(225deg,currentColor 50%,transparent 0);
    background: linear-gradient(225deg,currentColor 50%,transparent 0);
    border-bottom-right-radius: 90%;
}

/* Ribbon 7 */
.rib7 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 330px;
    height: 200px;
    font: 700 1.2em/2 Georgia;
    text-align: center;
    color: #fff;
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-filter: drop-shadow(0 0 4px #888);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="4" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(136,136,136,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    filter: drop-shadow(0 0 4px #888);
}

.rib7 > * {
    width: 10.5em;
    background: #B42ED3;
}

.rib7 div:first-child {
    position: relative;
    margin: 0 0 1em -5em;
}

.rib7 div:first-child:before {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 0;
    height: 0;
    top: -1em;
    left: -2em;
    border: 1em solid #9928B3;
    border-left-color: transparent;
    border-right-width: 2em;
}

.rib7 div:first-child:after {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 1em;
    height: 1em;
    top: -1em;
    left: 0;
    background: -webkit-linear-gradient(315deg,transparent 50%,rgba(0,0,0,0.3) 0);
    background: linear-gradient(135deg,transparent 50%,rgba(0,0,0,0.3) 0);
}

.rib7 div:last-child {
    margin: 1em 0 0 5em;
    position: relative;
}

.rib7 div:last-child:before {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 0;
    height: 0;
    left: calc(100% + -1em);
    bottom: -1em;
    border: 1em solid #9928B3;
    border-right-color: transparent;
    border-left-width: 2em;
}

.rib7 div:last-child:after {
    display: block;
    position: absolute;
    z-index: -1;
    content: "";
    width: 1em;
    height: 1em;
    right: 0;
    bottom: -1em;
    background: -webkit-linear-gradient(135deg,transparent 50%,rgba(0,0,0,0.3) 0);
    background: linear-gradient(-45deg,transparent 50%,rgba(0,0,0,0.3) 0);
}

.rib7 div:nth-child(2) {
    position: relative;
}

.rib7 div:nth-child(2):before {
    display: block;
    position: absolute;
    content: "";
    width: calc(100% - 2.5em);
    height: 1em;
    top: -1em;
    left: 0;
    background: -webkit-linear-gradient(left,transparent 1em,#731E86 0,#731E86 calc(100% - 1em),transparent 0),-webkit-linear-gradient(315deg,transparent 50%,#731E86 0),-webkit-linear-gradient(135deg,transparent 50%,#731E86 0);
    background: linear-gradient(to right,transparent 1em,#731E86 0,#731E86 calc(100% - 1em),transparent 0),linear-gradient(135deg,transparent 50%,#731E86 0),linear-gradient(-45deg,transparent 50%,#731E86 0);
    background-position: 0 0,0 0,100% 100%;
    background-size: 100%,1em 1em,1em 1em;
    background-repeat: no-repeat;
}

.rib7 div:nth-child(2):after {
    display: block;
    position: absolute;
    content: "";
    width: calc(100% - 2.5em);
    height: 1em;
    top: 100%;
    left: 2.5em;
    background: -webkit-linear-gradient(left,transparent 1em,#731E86 0,#731E86 calc(100% - 1em),transparent 0),-webkit-linear-gradient(315deg,transparent 50%,#731E86 0),-webkit-linear-gradient(135deg,transparent 50%,#731E86 0);
    background: linear-gradient(to right,transparent 1em,#731E86 0,#731E86 calc(100% - 1em),transparent 0),linear-gradient(135deg,transparent 50%,#731E86 0),linear-gradient(-45deg,transparent 50%,#731E86 0);
    background-position: 0 0,0 0,100% 100%;
    background-size: 100%,1em 1em,1em 1em;
    background-repeat: no-repeat;
}

/* Ribbon 8 */
section:nth-child(8) > div {
    position: relative;
    width: 300px;
    height: 160px;
    font: 700 1em/2 Helvetica;
    background: #ccc;
    box-shadow: 4px 4px 2px -2px #888;
}

.rib8 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 100%;
    height: 100%;
}

.top_rib i {
    color: #ccc;
}

.top_rib:hover i {
    color: #000;
}

.top_rib {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    width: 2em;
    height: 3em;
    top: -1em;
    right: 1em;
    background: #C40000;
    box-shadow: -4px 0 2px -2px #888;
    cursor: pointer;
}

.top_rib:before {
    display: block;
    position: absolute;
    content: "";
    width: 1em;
    height: 1em;
    top: 0;
    left: -1em;
    background: -webkit-linear-gradient(top left,transparent 50%,#8D0000 0);
    background: linear-gradient(to bottom right,transparent 50%,#8D0000 0);
    box-shadow: 0 6px 3px -3px #888;
}

.top_rib:after {
    display: block;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    bottom: -1em;
    left: 0;
    border: 1em solid #C40000;
    border-bottom-color: transparent;
    box-shadow: -4px 0 2px -2px #888;
}

.rib8 li a {
    display: block;
    position: relative;
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
    background: #282C2D;
    padding-left: 1.3em;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.rib8 li:before {
    display: block;
    position: absolute;
    content: "";
    width: 1em;
    height: 100%;
    left: -1em;
    top: 0;
    background: #282C2D;
}

.rib8 li:after {
    display: block;
    position: absolute;
    content: "";
    width: 1em;
    height: .5em;
    left: -1em;
    top: 100%;
    background: -webkit-linear-gradient(top right,#000 50%,transparent 0);
    background: linear-gradient(to bottom left,#000 50%,transparent 0);
}

.rib8 li {
    position: relative;
    width: 65%;
    box-shadow: 0 6px 4px -4px #777;
}

.rib8 li a:after {
    display: block;
    position: absolute;
    content: "\f015";
    width: 2em;
    height: 100%;
    top: 0;
    right: 0;
    font-family: FontAwesome;
    color: #FF6347;
    text-align: center;
    border-left-color: #fff;
    box-shadow: -2px 0 1px -1px #fff;
}

.rib8 li:nth-child(2) a:after {
    content: "\f007";
}

.rib8 li:last-child a:after {
    content: "\f003";
}

.rib8 li:hover a {
    color: #d3d3d3;
    padding-left: 1.5em;
}

.rib8 li:hover a:after {
    color: #fff;
}