#block {
    margin-top: 30px;
}

.wrapper {
    width: 378px;
    height: 320px;
    background: #e6e7e9;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 90;
}

.top {
    background-color: #03aeef;
    height: 30%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGNpcmNsZSBmaWxsPSIjRTZFN0U5IiBjeD0iMjUuMDgiIGN5PSIxMy40MTUiIHI9IjExLjQzIi8+CjxlbGxpcHNlIGZpbGw9IiNFNkU3RTkiIGN4PSIyNS4yNDQiIGN5PSI0NC4xODEiIHJ4PSIxOS4zMDEiIHJ5PSIyMS4wOTgiLz4KPC9zdmc+);
    background-repeat: no-repeat;
    background-size: 32%;
    background-position: 50% -30%;
}

.ribbon-wrapper-green {
    width: 120px;
    height: 120px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    left: -3px;
}

.ribbon-green {
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    right: 33px;
    top: 22px;
    width: 140px;
    background-color: #e88e23;
    color: #fff;
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}