/*MLC COMMON*/
.num_img {
    width: 9px;
}
.yubitoma_eys_title_box {
    padding: 58px 4px 0;
}
.para_text_special {
    font-size: 12px;
    font-weight: 300;
    font-family: "Hiragino Sans", serif;
    display: flex;
    margin: -21px 0 0 27px;
    line-height: 1.5;
}

.yubitoma_eys_sub_title.large {
    font-size: 24px;
    letter-spacing: 0;
    font-weight: bold;
    line-height: 1.3;
    font-family: "Hiragino Sans", serif;
    margin: 15px auto;
    text-align: center;
}

.yubitoma_eys_h1_title {
    text-align: center;
    font-family: Termina;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.3em;
    color: #222222;
}
.footer_paragraph_container {
    width: 87%;
    margin: -22px 0vw 0 30px;
}

.footer_paragraph_container_end {
    width: 83%;
    margin: -360px 0vw 270px 30px;
    text-align: center;
}

.footer_para_text_1 {
    font-size: 14px;
    font-family: "Hiragino Sans", serif;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.1em;
}

.footer_para_text_2 {
    font-size: 14px;
    font-family: "Hiragino Sans", serif;
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: 0.1em;
    margin-top: 30px;
}

.footer_para_text_3 {
    font-size: 14px;
    font-family: "Hiragino Kaku Gothic ProN";
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.1em;
}

.footer_image_container {
    width: 133%;
}

#footer_image_1 {
    width: 100%;
    margin: 0 0 0 -87px;
}

#footer_image_2 {
    width: 90%;
    margin: 20px 0 0 -49px;
}

#footer_image_3 {
    width: 80%;
    margin: -74px 0 0 -56px;
}

.cont_1 {
    width: 95%;
    margin: -32px 0 0 27px;
}

.cont_2 {
    width: 95%;
    margin: -15px 0 0 -36px;
}

#cont_image {
    width: 100%;
}

.row {
    margin-top: 0px;
}

* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    height: 32px; /* Should be removed. Only for demonstration */
}

.left {
    letter-spacing: 0px;
    width: 80%;
    font-size: 13px;
    font-family: "Hiragino sans-serif";
    font-weight: 300;
}

.right {
    width: 20%;
    margin-top: 3px;
    font-size: 15px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.foot_text {
    font-size: 13px;
    font-family: Hiragino Kaku Gothic ProN;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.76;
    margin-left: 84px;
}

.table {
    width: 90%;
    margin: 24px 59px;
    border-spacing: 10px;
}

.table td {
    font-size: 13px;
    font-family: "Hiragino Sans", serif;
    letter-spacing: 0px;
    font-weight: 300;
    padding: 4px;
}

.para_1 {
    margin: 18px 77px;
}

.para_1_text {
    font-size: 13px;
    font-weight: 600;
    font-family: "Hiragino Sans", serif;
    color: #88ccdd;
}

.para {
    margin: 0px 77px;
}

.para_number {
    color: #eeaaaa;
    font-size: 23px;
    line-height: 1.34;
    margin: 0px 15px 0px 0;
}

.para_text {
    font-size: 12px;
    font-weight: 300;
    font-family: "Hiragino sans", serif;
}

hr.new1 {
    border-top: 1px solid #dddddd;
    width: 20px;
}
#mlc_yubitoma_b .ticket_price {
    margin: 10px 10px 40px 10px;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.15));
    transform: translateZ(0);
}

.vl {
    border-left: 4px solid #eeaa77;
    height: 10px;
    margin: -16px 0 0 195px;
}

#mlc_yubitoma_b .plan_weekday {
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 214px;
}
#mlc_yubitoma_b .plan_weekday.lazyloaded {
    background-image: url(/sp/images/yubitoma_b/yubitoma_13.png);
}

#mlc_yubitoma_b .plan_weekday_1 {
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 214px;
}
#mlc_yubitoma_b .plan_weekday_1.lazyloaded {
    background-image: url(/sp/images/yubitoma_b/yubitoma_17.png);
}

#mlc_yubitoma_b .plan_weekday_2 {
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 214px;
}
#mlc_yubitoma_b .plan_weekday_2.lazyloaded {
    background-image: url(/sp/images/yubitoma_b/yubitoma_18.png);
}

#mlc_yubitoma_b .plan_weekday_3 {
    background-image: no-repeat;
    background-size: contain;
    padding-top: 214px;
}
#mlc_yubitoma_b .plan_weekday_3.lazyloaded {
    background-image: url(/sp/images/yubitoma_b/yubitoma_20.png);
}

#mlc_yubitoma_b .plan_weekday_4 {
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 214px;
}
#mlc_yubitoma_b .plan_weekday_4.lazyloaded {
    background-image: url(/sp/images/yubitoma_b/yubitoma_21.png);
}

#mlc_yubitoma_b .plan_weekday_5 {
    width: 95%;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 214px;
    margin: -63px 0 0 -46px;
}
#mlc_yubitoma_b .plan_weekday_5.lazyloaded {
    background-image: url(/sp/images/yubitoma_b/yubitoma_22.png);
}

#phone_image {
    width: 287px;
    margin: 34px 106px;
    height: 553px;
}

.parenthesis .text_point_4 {
    font-family: "Hiragino Sans", serif;
    line-height: 1.35;
    font-size: 12px;
}
#image_section_2 {
    width: 95%;
    margin-left: -10px;
}

#image_section_3 {
    width: 95%;
    margin-left: 20px;
}
#image_section_4 {
    width: 95%;
    margin-left: -10px;
}

#first_section_image_1 {
    width: 609px;
    height: 366px;
    margin: 0px 0px 0px -50px;
}

#first_section_image_2 {
    width: 577px;
    height: 292px;
    margin: -90px 0px 0px -50px;
}

#first_section_image_3 {
    width: 600px;
    height: 366px;
    margin: -79px 0px 0px -50px;
}

#first_section_image_4 {
    width: 581px;
    height: 311px;
    margin: -62px 0px 0px -50px;
}

#mlc_yubitoma_b *,
#mlc_yubitoma_b *:before,
#mlc_yubitoma_b *:after {
    box-sizing: border-box;
}
#mlc_yubitoma_b .eys_h3_title {
    margin: 0;
}
#mlc_yubitoma_b .mlc_w_90 {
    width: 90%;
    margin: 0 auto;
}
#mlc_yubitoma_b .mlc_text_center {
    text-align: center;
}
#mlc_yubitoma_b .mlc_bold {
    font-weight: bold;
}
#mlc_yubitoma_b .mlc_common_25_c {
    font-size: 16px;
    letter-spacing: 1px;
    color: #88ccdd;
    font-family: "Hiragino sans", serif;
    font-weight: 600;
}
#mlc_yubitoma_b .mlc_common_20 {
    font-family: "Hiragino sans", serif;
    font-size: 26.5px;
    letter-spacing: 0.1em;
}
#mlc_yubitoma_b .mlc_common_14 {
    font-size: 18.5px;
    line-height: 1.7;
    color: #222222;
    letter-spacing: 0.1em;
    font-family: Hiragino Kaku Gothic ProN;
}
#mlc_yubitoma_b .mlc_mt40px {
    margin-top: 40px;
}
#mlc_yubitoma_b .mlc_mt30px {
    margin-top: 40px;
}
#mlc_yubitoma_b .mlc_mt20px {
    margin-top: 41.5px;
}
#mlc_yubitoma_b .mlc_mt10px {
    margin-top: 14px;
    margin-bottom: 50px;
}
#mlc_yubitoma_b .mlc_mt5px {
    margin-top: 25px;
    margin-bottom: 19px;
}
#mlc_yubitoma_b .mlc_pb20px {
    padding-bottom: 20px;
}
#mlc_yubitoma_b .mlc_mr30px {
    margin-top: 45px;
}
#mlc_yubitoma_b .mlc_ml30px {
    margin-top: 42px;
}
#mlc_yubitoma_b .mlc_b_yellow {
    color: #eeaa77;
}
#mlc_yubitoma_b .mlc_img_box {
    position: relative;
}
#mlc_yubitoma_b .mlc_dark_gray_bg_box {
    background-color: #eeeeef;
    padding-top: 20px;
}
#mlc_yubitoma_b .mlc_white_bg {
    background-color: #ffffff;
    padding: 14px;
}

/*MLC PICK UP SECTION*/
#mlc_yubitoma_b .mlc_pickup_section {
    margin-top: 6px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
    background-position-y: 35px;
}
#mlc_yubitoma_b .mlc_pickup_section.lazyloaded {
    background-image: url(/sp/images/yubitoma_b/background_traingle.svg);
}

/*MLC PRICE SECTION*/
#mlc_yubitoma_b .mlc_price_section {
    margin-top: -20px;
}
#mlc_yubitoma_b .mlc_price_section .mlc_price {
    font-family: "Hirakaku", sans-serif;
    font-weight: bold;
}
@media only screen and (max-width: 500px) {
    /*MLC COMMON*/
    #mlc_yubitoma_b .mlc_mt40px {
        margin-top: 8vw;
    }
    #mlc_yubitoma_b .mlc_mt30px {
        margin-top: 8vw;
    }
    #mlc_yubitoma_b .mlc_mt20px {
        margin-top: 11vw;
    }
    #mlc_yubitoma_b .mlc_mt10px {
        margin-top: 2.8vw;
        margin-bottom: 10vw;
    }
    #mlc_yubitoma_b .mlc_mt5px {
        margin-top: 6.6vw;
        margin-bottom: 5vw;
    }
    #mlc_yubitoma_b .mlc_mr30px {
        margin-top: 11.2vw;
    }
    #mlc_yubitoma_b .mlc_ml30px {
        margin-right: 11vw;
    }
    #mlc_yubitoma_b .mlc_common_25_c {
        font-size: 4.3vw;
        color: #88ccdd;
        font-family: "Hiragino sans", serif;
        font-weight: 600;
        letter-spacing: 0.1em;
    }
    #mlc_yubitoma_b .mlc_common_20 {
        font-family: "Hiragino sans", serif;
        font-size: 5.3vw;
    }
    #mlc_yubitoma_b .mlc_common_14 {
        font-size: 3.73vw;
        line-height: 1.5;
        color: #222222;
        letter-spacing: 1px;
        /* font-weight: 300; */
        font-family: Hiragino Kaku Gothic ProN;
        font-weight: 300;
    }
    #mlc_yubitoma_b .mlc_white_bg {
        padding: 2.8vw;
    }

    #mlc_yubitoma_b .plan_weekday {
        background-image: no-repeat;
        background-size: contain;
        padding-top: 42vw;
    }
    #mlc_yubitoma_b .plan_weekday.lazyloaded {
        background-image: url(/sp/images/yubitoma_b/yubitoma_13.png);
    }

    #mlc_yubitoma_b .plan_weekday_1 {
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 42vw;
    }
    #mlc_yubitoma_b .plan_weekday_1.lazyloaded {
        background-image: url(/sp/images/yubitoma_b/yubitoma_17.png);
    }

    #mlc_yubitoma_b .plan_weekday_2 {
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 42vw;
    }
    #mlc_yubitoma_b .plan_weekday_2.lazyloaded {
        background-image: url(/sp/images/yubitoma_b/yubitoma_18.png);
    }

    #mlc_yubitoma_b .plan_weekday_3 {
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 42vw;
    }
    #mlc_yubitoma_b .plan_weekday_3.lazyloaded {
        background-image: url(/sp/images/yubitoma_b/yubitoma_20.png);
    }

    #mlc_yubitoma_b .plan_weekday_4 {
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 42vw;
    }
    #mlc_yubitoma_b .plan_weekday_4.lazyloaded {
        background-image: url(/sp/images/yubitoma_b/yubitoma_21.png);
    }

    #mlc_yubitoma_b .plan_weekday_5 {
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 42vw;
        margin: -10.4vw 0 0 -7.4vw;
    }
    #mlc_yubitoma_b .plan_weekday_5.lazyloaded {
        background-image: url(/sp/images/yubitoma_b/yubitoma_22.png);
    }
    #first_section_image_1 {
        width: 125vw;
        height: 78vw;
        margin: 0px 0px 0px -13.5vw;
    }

    #first_section_image_2 {
        width: 124vw;
        height: 62vw;
        margin: -19vw 0px 0px -18.5vw;
    }

    #first_section_image_3 {
        width: 116vw;
        height: 77vw;
        margin: -16vw 0px 0px -15.5vw;
    }
    #first_section_image_4 {
        width: 110vw;
        height: 59vw;
        margin: -13vw 0px 0px -7.5vw;
    }

    #mlc_yubitoma_b .mlc_pickup_section {
        margin-top: 1.6vw;
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 13.3vw;
        background-position-y: 6.5vw;
    }
    #mlc_yubitoma_b .mlc_pickup_section.lazyloaded {
        background-image: url(/sp/images/yubitoma_b/background_traingle.svg);
    }

    #image_section_2 {
        width: 96.8vw;
        height: 55vw;
        margin-left: -2vw;
    }

    #image_section_3 {
        width: 96.8vw;
        height: 55vw;
        margin-left: 6.4vw;
    }
    #image_section_4 {
        width: 96.8vw;
        height: 55vw;
        margin-left: -2vw;
    }

    .parenthesis .text_point_4 {
        font-family: "Hiragino sans-serif";
        line-height: 1.35;
        font-size: 3.2vw;
    }

    .parenthesis {
        line-height: 1.7;
        font-family: Hiragino Kaku Gothic ProN;
    }

    #phone_image {
        margin: 6vw 15vw;
        width: 70vw;
        height: auto;
    }

    .vl {
        margin: -3vw 0px 0 39vw;
        border-left: 4px solid #eeaa77;
        height: 2.66vw;
    }

    #mlc_yubitoma_b .ticket_price {
        margin: 2.66vw 2.66vw 10.66vw 2.66vw;
        filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.15));
        transform: translateZ(0);
    }

    hr.new1 {
        border-top: 1px solid #dddddd;
        width: 5.33vw;
    }

    .para {
        margin: 0vw 6vw;
    }

    .para_number {
        color: #eeaaaa;
        font-size: 6.1vw;
        line-height: 1.34;
        margin: 0px 3vw 0px 0;
        width: 4vw;
    }
    .num_img {
        width: 2.3vw;
    }

    .para_text {
        font-size: 3.2vw;
        font-weight: 300;
        font-family: "Hiragino sans", serif;
    }

    .para_1 {
        margin: 4vw 3vw;
    }

    .para_1_text {
        font-size: 3.4vw;
        font-weight: 600;
        font-family: "Hiragino sans", serif;
        color: #88ccdd;
    }

    .table {
        width: 87%;
        margin: 4.5vw 7.2vw;
        border-spacing: 1vw;
    }

    .table td {
        font-size: 13px;
        font-family: "Hiragino Sans", serif;
        letter-spacing: 0px;
        font-weight: 300;
        padding: 1vw;
    }
    .foot_text {
        font-size: 3.46vw;
        font-family: Hiragino Kaku Gothic ProN;
        text-align: center;
        font-weight: 300;
        letter-spacing: 0;
        line-height: 1.76;
        margin-left: 12vw;
    }

    .row {
        margin-top: 0vw;
    }

    .cont_1 {
        width: 95%;
        margin: -8.53vw 0 0 7.2vw;
    }

    .cont_2 {
        width: 95%;
        margin: -4vw 0 0 -2.4vw;
    }

    .footer_image_container {
        width: 145%;
    }

    #footer_image_1 {
        width: 100%;
        margin: 0 0 0 -24vw;
    }

    #footer_image_2 {
        width: 91%;
        margin: 7vw 0 0 -14vw;
    }

    #footer_image_3 {
        width: 76%;
        margin: -19vw 0 0 -11vw;
    }

    .footer_paragraph_container {
        width: 75%;
        margin: -5vw 0vw 0 11vw;
    }

    .footer_paragraph_container_end {
        width: 75%;
        margin: -82vw 0vw 50vw 11vw;
        text-align: center;
    }

    .footer_para_text_1 {
        font-size: 3.73vw;
        font-family: "Hiragino Sans", serif;
        font-weight: 300;
        line-height: 1.7;
        letter-spacing: 0.1em;
    }

    .footer_para_text_2 {
        font-size: 3.73vw;
        font-family: "Hiragino Sans", serif;
        font-weight: 300;
        line-height: 1.35;
        letter-spacing: 0.1em;
        margin-top: 7vw;
    }

    .footer_para_text_3 {
        font-size: 3.73vw;
        font-family: "Hiragino Kaku Gothic ProN";
        font-weight: 300;
        line-height: 1.7;
        letter-spacing: 0.1em;
    }

    .yubitoma_eys_h1_title {
        text-align: center;
        font-family: Termina;
        font-weight: 400;
        font-size: 4.8vw;
        letter-spacing: 0.3em;
        color: #222222;
    }

    .yubitoma_eys_sub_title.large {
        font-size: 6.4vw;
        letter-spacing: 0;
        font-weight: bold;
        line-height: 1.3;
        font-family: "Hiragino Sans", serif;
        margin: 3vw auto;
        text-align: center;
    }

    .para_text_special {
        font-size: 3.2vw;
        font-weight: 300;
        font-family: "Hiragino Sans", serif;
        margin: -5vw 0px 0 6.5vw;
        display: flex;
        line-height: 1.5;
    }
    .yubitoma_eys_title_box {
        padding: 10.9vw 4.6vw 0;
    }
    .eys_top {
        padding-top: calc(11vw + 12px);
        max-width: 100%;
        overflow: hidden;
    }
    .right {
        width: 20%;
        margin-top: 1.24vw;
        font-size: 3.5vw;
    }
}

.eys_top {
    padding-top: 56px;
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,
        "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    line-height: 1;
}
.eys_top a {
    text-decoration: none;
}

.eys_top_menu {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 2px solid #e4e4e4;
}
.eys_top_menu a {
    width: 25%;
    border-bottom: 2px solid #e4e4e4;
    padding: 2px 0;
}

.eys_top_btn {
    padding: 7% 0;
}
.eys_top_btn a {
    display: block;
    margin-bottom: 5%;
}
.eys_top_btn a img {
    width: 100%;
    vertical-align: bottom;
}

.breadcrumb {
    padding: 12px 13.5px;
    background-color: white;
    border-top: 1px solid #e4e4e4;
}
.yubitoma_cnt_1 {
    margin-top: 0vw;
}
.yubitoma_cnt_2 {
    color: #707070;
}
.yubitoma_cnt_3 {
    margin: 0 0 -9px -3px;
}
.yubitoma_cnt_4 {
    color: #707070;
}
.yubitoma_cnt_5 {
    color: #bababa;
    margin: 16px 12px;
}
.yubitoma_cnt_6 {
    border-left: 4px solid #88ccdd;
}
.yubitoma_cnt_7 {
    color: #88ccdd;
}
.yubitoma_cnt_8 {
    color: #707070;
}
.yubitoma_cnt_9 {
    margin: 0 0 -9px -3px;
}
.yubitoma_cnt_10 {
    color: #707070;
}
.yubitoma_cnt_11 {
    color: #bababa;
    margin: 16px 12px;
}
.yubitoma_cnt_12 {
    border-left: 4px solid #eeaaaa;
}
.yubitoma_cnt_13 {
    color: #eeaaaa;
}
.yubitoma_cnt_14 {
    color: #707070;
}
.yubitoma_cnt_15 {
    margin: 0 0 -9px -3px;
}
.yubitoma_cnt_16 {
    color: #707070;
}
.yubitoma_cnt_17 {
    color: #bababa;
    margin: 16px 12px;
}
.yubitoma_cnt_18 {
    border-left: 4px solid #eeaa77;
}
.yubitoma_cnt_19 {
    color: #eeaa77;
}
.yubitoma_cnt_20 {
    color: #707070;
}
.yubitoma_cnt_21 {
    margin: 0 0 -9px -3px;
}
.yubitoma_cnt_22 {
    color: #707070;
}
.yubitoma_cnt_23 {
    color: #bababa;
    margin: 16px 12px;
}
.yubitoma_cnt_24 {
    border-left: 4px solid #88ddbb;
}
.yubitoma_cnt_25 {
    color: #88ddbb;
}
.yubitoma_cnt_26 {
    color: #707070;
}
.yubitoma_cnt_27 {
    margin: 0 0 -9px -3px;
}
.mlc_yubitoma_banner {
    margin: 0;
}
.yubi_image_1 {
    width: 100%;
}
.yubitoma_cnt_28 {
    color: #707070;
}
.yubitoma_cnt_29 {
    color: #bababa;
    margin: 16px 12px;
}
.yubitoma_cnt_30 {
    padding: 4.2vw 3.2vw;
}
.yubitoma_cnt_31 {
    width: 100%;
}
.yubitoma_cnt_32 {
    width: 85%;
    padding: 4.2vw 3.2vw;
}
.breadcrumb li {
    position: relative;
    display: inline-block;
    color: #222222;
}
.breadcrumb li a {
    color: #888888;
    text-decoration: none;
}
.breadcrumb li:not(:first-child):before {
    content: ">";
    position: absolute;
}
@media all and (min-width: 500px) {
    .breadcrumb li:not(:first-child):before {
        top: -1.25px;
        left: 3.5px;
    }
    .breadcrumb li:not(:first-child) {
        padding-left: 15px;
    }
    .breadcrumb {
        font-size: 13px;
    }
}
@media all and (max-width: 500px) {
    .breadcrumb li:not(:first-child):before {
        top: -0.25vw;
        left: 0.7vw;
    }
    .breadcrumb li:not(:first-child) {
        padding-left: 3vw;
    }
    .breadcrumb {
        font-size: 2.6vw;
    }
}
.phone_content {
    margin-bottom: 20px;
}
.mfp-content {
    max-width: 460px;
    width: 96%;
    height: 260px;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 );
    -moz-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 );
    box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 );
    border-right: 6px solid #39a1db;
    border-left: 6px solid #39a1db;
    border-bottom: 6px solid #39a1db;
    box-sizing: border-box;
}
.audio_title {
    text-align: center;
    margin: 0 auto 72px;
    font-size: 16px;
    background: #39a1db;
    color: #fff;
    padding: 12px;
}
button.mfp-close {
    width: 100px;
    background: #fff;
    border: 2px solid #777777;
    height: 36px;
    margin: 30px auto 0;
    display: block;
    color: #777777;
    font-weight: bold;
}


/* ======================================================================
 audioplayer
====================================================================== */

.audioplayer {
    width: 92%;
    height: 2.5em; /* 40 */
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 1px solid #222;
    position: relative;
    z-index: 1;
    background: #333;
    margin: 0 auto;
  }
  /* mini mode (fallback) */

  .audioplayer-mini {
    width: 2.5em; /* 40 */
    margin: 0 auto;
  }
  /* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

  .audioplayer > div {
    position: absolute;
  }
  /* play/pause button */

  .audioplayer-playpause {
    width: 2.5em; /* 40 */
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
  }
  .audioplayer:not(.audioplayer-mini) .audioplayer-playpause {
    border-right: 1px solid #555;
    border-right-color: rgba( 255, 255, 255, .1 );
  }
  .audioplayer-mini .audioplayer-playpause {
    width: 100%;
  }
  .audioplayer-playpause:hover,  .audioplayer-playpause:focus {
    background-color: #222;
  }
  .audioplayer-playpause a {
    display: block;
  }
  .audioplayer-stopped .audioplayer-playpause a {
    width: 0;
    height: 0;
    border: 0.5em solid transparent; /* 8 */
    border-right: none;
    border-left-color: #fff;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5em 0 0 -0.25em; /* 8 4 */
  }
  .audioplayer-playing .audioplayer-playpause a {
    width: 0.75em; /* 12 */
    height: 0.75em; /* 12 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.375em 0 0 -0.375em; /* 6 */
  }
  .audioplayer-playing .audioplayer-playpause a:before,  .audioplayer-playing .audioplayer-playpause a:after {
    width: 40%;
    height: 100%;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 0;
  }
  .audioplayer-playing .audioplayer-playpause a:before {
    left: 0;
  }
  .audioplayer-playing .audioplayer-playpause a:after {
    right: 0;
  }
  /* timers */

  .audioplayer-time {
    width: 4.375em; /* 70 */
    height: 100%;
    line-height: 2.375em; /* 38 */
    text-align: center;
    z-index: 2;
    top: 0;
  }
  .audioplayer-time-current {
    border-left: 1px solid #111;
    border-left-color: rgba( 0, 0, 0, .25 );
    left: 2.5em; /* 40 */
  }
  .audioplayer-time-duration {
    border-right: 1px solid #555;
    border-right-color: rgba( 255, 255, 255, .1 );
    right: 2.5em; /* 40 */
  }
  .audioplayer-novolume .audioplayer-time-duration {
    border-right: 0;
    right: 0;
  }
  /* progress bar of loaded/played */

  .audioplayer-bar {
    height: 0.875em; /* 14 */
    background-color: #222;
    cursor: pointer;
    z-index: 1;
    top: 50%;
    right: 6.875em; /* 110 */
    left: 6.875em; /* 110 */
    margin-top: -0.438em; /* 7 */
  }
  .audioplayer-novolume .audioplayer-bar {
    right: 4.375em; /* 70 */
  }
  .audioplayer-bar div {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .audioplayer-bar-loaded {
    background-color: #333;
    z-index: 1;
  }
  .audioplayer-bar-played {
    background: #007fd1;
    z-index: 2;
  }
  /* volume button */

  .audioplayer-volume {
    width: 2.5em; /* 40 */
    height: 100%;
    border-left: 1px solid #111;
    border-left-color: rgba( 0, 0, 0, .25 );
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .audioplayer-volume:hover,  .audioplayer-volume:focus {
    background-color: #222;
  }
  .audioplayer-volume-button {
    width: 100%;
    height: 100%;
  }
  .audioplayer-volume-button a {
    width: 0.313em; /* 5 */
    height: 0.375em; /* 6 */
    background-color: #fff;
    display: block;
    position: relative;
    z-index: 1;
    top: 40%;
    left: 35%;
  }
  .audioplayer-volume-button a:before,  .audioplayer-volume-button a:after {
    content: '';
    position: absolute;
  }
  .audioplayer-volume-button a:before {
    width: 0;
    height: 0;
    border: 0.5em solid transparent; /* 8 */
    border-left: none;
    border-right-color: #fff;
    z-index: 2;
    top: 50%;
    right: -0.25em;
    margin-top: -0.5em; /* 8 */
  }
  .audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after {
    /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
    width: 0.313em; /* 5 */
    height: 0.313em; /* 5 */
    border: 0.25em double #fff; /* 4 */
    border-width: 0.25em 0.25em 0 0; /* 4 */
    left: 0.563em; /* 9 */
    top: -0.063em; /* 1 */
    -webkit-border-radius: 0 0.938em 0 0; /* 15 */
    -moz-border-radius: 0 0.938em 0 0; /* 15 */
    border-radius: 0 0.938em 0 0; /* 15 */
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    -ms-transform: rotate( 45deg );
    -o-transform: rotate( 45deg );
    transform: rotate( 45deg );
  }
  /* volume dropdown */

  .audioplayer-volume-adjust {
    height: 6.25em; /* 100 */
    cursor: default;
    position: absolute;
    left: 0;
    right: -1px;
    top: -9999px;
    background: #333;
  }
  .audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
    opacity: 0;
  }
  .audioplayer-volume:hover .audioplayer-volume-adjust {
    top: auto;
    bottom: 100%;
  }
  .audioplayer-volume-adjust > div {
    width: 40%;
    height: 80%;
    background-color: #222;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin: 30% auto 0;
  }
  .audioplayer-volume-adjust div div {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #007fd1;
  }
  .audioplayer-novolume .audioplayer-volume {
    display: none;
  }
  /* CSS3 decorations */

  .audioplayer-volume-adjust {
    -webkit-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
    -moz-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
    box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
  }
  .audioplayer-bar,  .audioplayer-volume-adjust > div {
    -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
    -moz-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
    box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
  }
  .audioplayer-volume-adjust div div,  .audioplayer-bar-played {
    -webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
    -moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
    box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
  }
  .audioplayer-playpause,  .audioplayer-volume a {
    -webkit-filter: drop-shadow( 1px 1px 0 #000 );
    -moz-filter: drop-shadow( 1px 1px 0 #000 );
    -ms-filter: drop-shadow( 1px 1px 0 #000 );
    -o-filter: drop-shadow( 1px 1px 0 #000 );
    filter: drop-shadow( 1px 1px 0 #000 );
    transform: translateZ(0);
  }
  .audioplayer-bar-played {
    background: -webkit-gradient( linear, left top, right top, from( #007fd1 ), to( #c600ff ) );
    background: -webkit-linear-gradient( left, #007fd1, #c600ff );
    background: -moz-linear-gradient( left, #007fd1, #c600ff );
    background: -ms-radial-gradient( left, #007fd1, #c600ff );
    background: -o-linear-gradient( left, #007fd1, #c600ff );
    background: linear-gradient( to right, #007fd1, #c600ff );
  }
  .audioplayer-volume-adjust div div {
    background: -webkit-gradient( linear, left bottom, left top, from( #007fd1 ), to( #c600ff ) );
    background: -webkit-linear-gradient( bottom, #007fd1, #c600ff );
    background: -moz-linear-gradient( bottom, #007fd1, #c600ff );
    background: -ms-radial-gradient( bottom, #007fd1, #c600ff );
    background: -o-linear-gradient( bottom, #007fd1, #c600ff );
    background: linear-gradient( to top, #007fd1, #c600ff );
  }
  .audioplayer-bar,  .audioplayer-bar div,  .audioplayer-volume-adjust div {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  .audioplayer-volume-adjust {
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }
  .audioplayer *,  .audioplayer *:before,  .audioplayer *:after {
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease;
  }