@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.wrapper {
    margin: 0 auto;
    text-align: center;
}

h1 {
    text-transform: uppercase;
}

.left, .right {
    display: block;
    padding: 100px;
    border: 3px solid #2c3e50;
    background: #95a5a6;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 600px) {
    .left, .right {
        display: inline-block;
    }
}

.fmb-ribbon-wrapper {
    opacity: 0;
    -webkit-animation: fadeIn .7s ease-in forwards;
    animation: fadeIn .7s ease-in forwards;
    font-size: 15px;
}

.medium {
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-animation: fadeIn .7s ease-in forwards;
    animation: fadeIn .7s ease-in forwards;
    font-size: 16px;
}

.medium span {
        width: 100px;
        position: relative;
        display: block;
        background: #FFAB00;
        color: white;
        margin: 0 auto;
        text-align: center;
        -webkit-box-sizing: border-box;
        font-size: 13px;
        height: 20px;
        -webkit-transform-style: preserve-3d;
    }

.medium span:before, .medium span:after {
            content: "";
            position: absolute;
            display: block;
            bottom: -5px;
            border: 10px solid #e67e22;
            z-index: -1;
            -webkit-transform: translateZ(-1px);
        }

.medium span:before {
            left: -15px;
            border-left-color: transparent;
        }

.medium span:after {
            right: -15px;
            border-right-color: transparent;
        }

.medium span span:before, .medium span span:after {
            content: "";
            position: absolute;
            display: block;
            border-style: solid;
            bottom: -5px;
            border-color: #e67e22 transparent transparent transparent;
        }

.medium span span:before {
            left: 0;
            border-width: 5px 0 0 5px;
        }

.medium span span:after {
            right: 0;
            border-width: 5px 5px 0 0;
        }

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    .medium {
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-animation: fadeIn .7s ease-in forwards;
        animation: fadeIn .7s ease-in forwards;
        font-size: 14px;
    }

    .medium span {
        width: 100px;
        position: relative;
        display: block;
        background: #FFAB00;
        color: white;
        -webkit-box-sizing: border-box;
        min-width: 250px;
        height: 30px;
        line-height: 30px;
        -webkit-transform-style: preserve-3d;
    }

    .medium span:before, .medium span:after {
        content: "";
        position: absolute;
        display: block;
        bottom: -7.5px;
        border: 15px solid #e67e22;
        z-index: -1;
        -webkit-transform: translateZ(-1px);
    }

    .medium span:before {
        left: -22.5px;
        border-left-color: transparent;
    }

    .medium span:after {
        right: -22.5px;
        border-right-color: transparent;
    }

    .medium span span:before, .medium span span:after {
        content: "";
        position: absolute;
        display: block;
        border-style: solid;
        bottom: -7.5px;
        border-color: #e67e22 transparent transparent transparent;
    }

    .medium span span:before {
        left: 0;
        border-width: 7.5px 0 0 7.5px;
    }

    .medium span span:after {
        right: 0;
        border-width: 7.5px 7.5px 0 0;
    }
}

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
    .medium {
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-animation: fadeIn .7s ease-in forwards;
        animation: fadeIn .7s ease-in forwards;
        font-size: 14px;
    }

    .medium span {
        width: 100px;
        position: relative;
        display: block;
        background: #FFAB00;
        color: white;
        text-align: center;
        -webkit-box-sizing: border-box;
        min-width: 300px;
        height: 30px;
        line-height: 30px;
        -webkit-transform-style: preserve-3d;
    }

    .medium span:before, .medium span:after {
        content: "";
        position: absolute;
        display: block;
        bottom: -7.5px;
        border: 15px solid #e67e22;
        z-index: -1;
        -webkit-transform: translateZ(-1px);
    }

    .medium span:before {
        left: -22.5px;
        border-left-color: transparent;
    }

    .medium span:after {
        right: -22.5px;
        border-right-color: transparent;
    }

    .medium span span:before, .medium span span:after {
        content: "";
        position: absolute;
        display: block;
        border-style: solid;
        bottom: -7.5px;
        border-color: #e67e22 transparent transparent transparent;
    }

    .medium span span:before {
        left: 0;
        border-width: 7.5px 0 0 7.5px;
    }

    .medium span span:after {
        right: 0;
        border-width: 7.5px 7.5px 0 0;
    }
}

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
    .medium {
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-animation: fadeIn .7s ease-in forwards;
        animation: fadeIn .7s ease-in forwards;
        font-size: 18px;
    }

    .medium span {
        width: 100px;
        position: relative;
        display: block;
        background: #FFAB00;
        color: white;
        text-align: center;
        -webkit-box-sizing: border-box;
        min-width: 300px;
        height: 30px;
        line-height: 30px;
        -webkit-transform-style: preserve-3d;
    }

    .medium span:before, .medium span:after {
        content: "";
        position: absolute;
        display: block;
        bottom: -7.5px;
        border: 15px solid #e67e22;
        z-index: -1;
        -webkit-transform: translateZ(-1px);
    }

    .medium span:before {
        left: -22.5px;
        border-left-color: transparent;
    }

    .medium span:after {
        right: -22.5px;
        border-right-color: transparent;
    }

    .medium span span:before, .medium span span:after {
        content: "";
        position: absolute;
        display: block;
        border-style: solid;
        bottom: -7.5px;
        border-color: #e67e22 transparent transparent transparent;
    }

    .medium span span:before {
        left: 0;
        border-width: 7.5px 0 0 7.5px;
    }

    .medium span span:after {
        right: 0;
        border-width: 7.5px 7.5px 0 0;
    }
}

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) {
    .medium {
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-animation: fadeIn .7s ease-in forwards;
        animation: fadeIn .7s ease-in forwards;
        font-size: 18px;
    }

    .medium span {
        width: 100px;
        position: relative;
        display: block;
        background: #FFAB00;
        color: white;
        text-align: center;
        -webkit-box-sizing: border-box;
        min-width: 280px;
        height: 30px;
        line-height: 30px;
        -webkit-transform-style: preserve-3d;
    }

    .medium span:before, .medium span:after {
        content: "";
        position: absolute;
        display: block;
        bottom: -7.5px;
        border: 15px solid #e67e22;
        z-index: -1;
        -webkit-transform: translateZ(-1px);
    }

    .medium span:before {
        left: -22.5px;
        border-left-color: transparent;
    }

    .medium span:after {
        right: -22.5px;
        border-right-color: transparent;
    }

    .medium span span:before, .medium span span:after {
        content: "";
        position: absolute;
        display: block;
        border-style: solid;
        bottom: -7.5px;
        border-color: #e67e22 transparent transparent transparent;
    }

    .medium span span:before {
        left: 0;
        border-width: 7.5px 0 0 7.5px;
    }

    .medium span span:after {
        right: 0;
        border-width: 7.5px 7.5px 0 0;
    }
}

@media screen and (min-width: 900px) {
    .medium {
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-animation: fadeIn .7s ease-in forwards;
        animation: fadeIn .7s ease-in forwards;
        font-size: 15px;
    }

        .medium span {
            width: 100%;
            position: relative;
            display: block;
            background: #FFAB00;
            color: white;
            text-align: center;
            -webkit-box-sizing: border-box;
            height: 40px;
            line-height: 40px;
            -webkit-transform-style: preserve-3d;
        }

            .medium span:before, .medium span:after {
                content: "";
                position: absolute;
                display: block;
                bottom: -10px;
                border: 20px solid #e67e22;
                z-index: -1;
                -webkit-transform: translateZ(-1px);
            }

            .medium span:before {
                left: -30px;
                border-left-color: transparent;
            }

            .medium span:after {
                right: -30px;
                border-right-color: transparent;
            }

            .medium span span:before, .medium span span:after {
                content: "";
                position: absolute;
                display: block;
                border-style: solid;
                bottom: -10px;
                border-color: #e67e22 transparent transparent transparent;
            }

            .medium span span:before {
                left: 0;
                border-width: 10px 0 0 10px;
            }

            .medium span span:after {
                right: 0;
                border-width: 10px 10px 0 0;
            }
}