body {
    font-family: 'Ubuntu', sans-serif;
}

input:-webkit-autofill {
    -webkit-box-shadow: none !important;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

select:-webkit-autofill {
    -webkit-box-shadow: none !important;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p, button, input, select, textarea a {
    font-family: 'Ubuntu', sans-serif;
}

.vertical-offset-1 {
    margin-top: 70px;
}

a:hover {
    text-decoration: none;
}

/*.no-gutter {
    padding: 8px;
}*/
.logIn_show_btn {
    margin-left: 140px;
    width: 40% !important;
}
.shipping_header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.join_us a {
    font-weight: 300;
    color: #155f12;
    width: 100%;
    float: left;
    text-align: center;
    background: #f8d146;
    padding: 7px;
    font-size: 25px;
}

    .join_us a:hover, .join_us a:focus {
        font-weight: 300;
        color: #fff;
        width: 100%;
        float: left;
        text-align: center;
        background: #155f12;
        padding: 7px;
        font-size: 25px;
        text-decoration: none;
    }

.join_us {
    font-weight: 300;
    margin-top: 8px;
}

.main_sec {
    width: 100%;
    float: left;
    padding: 30px 0;
}

.free_res a {
    width: 48%;
    float: left;
    background: #fff;
    color: #fff;
    text-align: center;
    font-size: 21px;
    line-height: 26px;
    margin-right: 0;
    margin-bottom: 10px;
}

.logo_part_bef {
    margin-top: 35px;
}

    .logo_part_bef a {
        width: 50%;
        float: left;
    }

.master {
    text-align: center;
}

.pric_table {
    width: 100%;
    padding-bottom: 30px;
}

.price1 {
    width: 100%;
    float: left;
    text-align: left;
    background: url(../images/f1.jpg);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    min-height: 427px;
    margin-bottom: 20px;
}

    .price1 ul {
        width: 100%;
        float: left;
        text-align: left;
        padding-left: 19px;
    }

    .price1 h3 {
        width: 100%;
        float: left;
        text-align: left;
        color: #fff;
        margin: 0;
    }

    .price1 ul li {
        width: 100%;
        float: left;
        text-align: left;
        padding-bottom: 5px;
        font-size: 15px;
        color: #fff;
    }

    .price1 span {
        position: absolute;
        bottom: 6px;
        right: 5px;
    }

.price2 {
    width: 100%;
    float: left;
    text-align: left;
    background: url(../images/f2.jpg);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    min-height: 427px;
    margin-bottom: 20px;
}

    .price2 ul {
        width: 100%;
        float: left;
        text-align: left;
        padding-left: 19px;
    }

    .price2 h3 {
        width: 100%;
        float: left;
        text-align: left;
        color: #fff;
        margin: 0;
    }

    .price2 ul li {
        width: 100%;
        float: left;
        text-align: left;
        padding-bottom: 5px;
        font-size: 15px;
        color: #fff;
    }

    .price2 span {
        position: absolute;
        bottom: 6px;
        right: 5px;
    }

.price3 {
    width: 100%;
    float: left;
    text-align: left;
    background: url(../images/f3.jpg);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    min-height: 427px;
    margin-bottom: 20px;
}

    .price3 ul {
        width: 100%;
        float: left;
        text-align: left;
        padding-left: 19px;
    }

    .price3 h3 {
        width: 100%;
        float: left;
        text-align: left;
        color: #fff;
        margin: 0;
    }

    .price3 ul li {
        width: 100%;
        float: left;
        text-align: left;
        padding-bottom: 5px;
        font-size: 15px;
        color: #fff;
    }

    .price3 span {
        position: absolute;
        bottom: 6px;
        right: 5px;
    }

.price4 {
    width: 100%;
    float: left;
    text-align: left;
    background: url(../images/f4.jpg);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    min-height: 427px;
    margin-bottom: 20px;
}

    .price4 ul {
        width: 100%;
        float: left;
        text-align: left;
        padding-left: 19px;
    }

    .price4 h3 {
        width: 100%;
        float: left;
        text-align: left;
        color: #fff;
        margin: 0;
    }

    .price4 ul li {
        width: 100%;
        float: left;
        text-align: left;
        padding-bottom: 5px;
        font-size: 15px;
        color: #fff;
    }

    .price4 span {
        position: absolute;
        bottom: 6px;
        right: 5px;
    }

.text-container {
    background: #e8eded;
    padding: 24px 30px;
}

    .text-container h2 {
        text-align: center;
        margin-bottom: 27px;
    }

    .text-container p {
        font-size: 12pt;
        letter-spacing: 1px;
        line-height: 28px;
        /*margin-bottom: 30px;*/
    }

    .text-container .listing {
        margin: 30px 10px;
        font-size: 12pt;
    }

        .text-container .listing p {
            margin-bottom: 20px;
        }
#mySidenav1 {
    position: fixed;
    top: 30%;
    right: -4%;
    transition: 0.3s;
    padding: 14px 20px;
    width: auto;
    transform: rotate(-90deg);
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    color: white;
    border-radius: 12px 12px 0px 0px;
    vertical-align: top;
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    background-color: red !important;
    z-index: 111;
}
#fh5co-hero {
    /* background: #fff; */
    background: url(../images/hero-image.jpg) no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    width: 100%;
    height: 300px;
    display: table;
    position: relative;
    z-index: 20;
}

    #fh5co-hero .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: #57cecd;
        opacity: .97;
    }

.visit {
    width: 168px;
    display: inline-block;
    margin-left: -3px;
    padding-top: 170px;
}

.load-popup .modal-dialog {
    width: 1000px;
}

.load-popup .modal-body {
    width: 100%;
}

.red_img {
    margin-right: 25px;
}
.red-img {
    position: absolute;
    top: 20px;
    right: 40%;
}
.social_media_links {
    display: inline-block;
    margin-left: -55px;
}
@media screen and (max-width: 767.5px) {
    .course_filter ul li a {
        padding: 6px 10px !important;
    }
    .shopping_content {
        /*min-height: 100px;*/
        padding: 30px 0 !important;
    }
    #fh5co-hero {
        background: url(../images/hero-image.jpg) no-repeat;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center left;
        width: 100%;
        /*height: 280px !important;*/
        display: flex !important;
        flex-direction: column !important;
        position: relative;
        z-index: 20;
        margin-top: 90px !important;
    }
    /*#fh5co-hero {
        background-size: cover !important;
    }*/
    header {
        display: none;
    }
    .social_media_links ul {
        gap: 10px !important;
    }
    .social_media_links {
        display: inline-block;
        margin-left: 0;
    }
    
    /*.red-img {
        top: -30px !important;
        right: 0 !important;
      */  left: 190px !important;
    }
      
        .red_img {
            margin-right: 0;
        }


    .text-container {
        padding: 10px;
    }

        .text-container h2 {
            margin-top: 40px;
        }

    .load-popup .modal-dialog {
        width: 100%;
    }

    .load-popup .modal-content {
        margin-right: 20px;
    }
}

#fh5co-hero .fh5co-arrow {
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -30px;
    display: table;
    color: #ffffff;
    font-size: 24px;
    z-index: 99;
    text-decoration: none;
    width: 50px;
    height: 50px;
    background: #f86942;
    border-bottom: none !important;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
    -moz-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
    -ms-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
    -o-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
    box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
}

    #fh5co-hero .fh5co-arrow i {
        display: table-cell;
        vertical-align: middle;
    }

    #fh5co-hero .fh5co-arrow:active, #fh5co-hero .fh5co-arrow:focus, #fh5co-hero .fh5co-arrow:hover {
        outline: none;
    }

#fh5co-hero .form-bg {
    box-shadow: 0 0 10px #0000005e;
    margin-top: 20px;
}

     .form-bg h2 {
        color: #fff;
        text-align: center;
        font-size: 19pt;
        font-weight: lighter;
        letter-spacing: 1px;
        background: #051C4D;
        padding: 15px;
        margin-bottom: 0;
    }

/*#fh5co-hero .fh5co-hero-wrap {
    padding-top: 1.2em;
    display: table;
    height: 550px;
    width: 100%;
}*/

    #fh5co-hero .fh5co-hero-wrap h1 {
        color: #353534;
        font-size: 23pt;
        letter-spacing: 1px;
    }

    #fh5co-hero .fh5co-hero-wrap p {
        color: #000;
        font-size: 11pt;
        line-height: 28px;
        letter-spacing: 1px;
        font-weight: normal;
        margin-top: 20px;
    }

footer {
    background: #051C4D;
    padding: 20px;
}

    footer ul {
        margin-bottom: 0;
        padding: 0;
    }

    footer li {
        display: inline-block;
        margin: 0 15px;
    }

        footer li a {
            color: #fff;
        }

            footer li a:hover {
                color: #fff;
            }

/*.address {
    padding: 12px;
}*/
a {
    text-decoration: none;
}

.address p {
    font-size: 13pt;
    letter-spacing: 1px;
}

.address .cont {
    font-size: 16pt;
    font-weight: bold;
    color: #fed000;
    margin: 0;
}

.address i {
    color: #fed000;
}

.form-control, .form-control:focus {
    display: block;
    width: 100%;
    height: 44px;
    padding: 10px 0;
    margin-top: 15px;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    border-right: none;
    border-left: none;
    border-top: none;
    line-height: 1.42857143;
    color: #fff;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
    box-shadow: inset 0 0 0 rgba(0,0,0,0);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

    .form-control option {
        color: #1a1a1a;
    }

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: transparent;
    width: 100%;
    padding: 10px;
}

.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.input__field {
    position: relative;
    display: block;
    float: right;
    padding: 0.8em;
    width: 60%;
    border: none;
    border-radius: 0;
    background: #fff;
    color: #aaa;
    font-weight: bold;
    -webkit-appearance: none; /* for box shadows to show on iOS */
}

    .input__field:focus {
        outline: none;
    }

.input__label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #fff;
    font-size: 70.25%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.input__label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
    font-size: 14px;
    line-height: 0;
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
}

.icon {
    color: #ddd;
    font-size: 150%;
}

@media (max-width: 768px) {
    .vertical-offset-1 {
        margin-top: 0;
        /* background: rgba(255,255,255,0.5); */
        padding: 20px 20px 105px;
    }

    .visit {
        margin-left: 0px;
        padding-top: 0px;
    }

    

    footer li {
        display: block;
        margin: 0 15px;
        line-height: 40px;
        border-bottom: 1px solid #fff;
    }
}
/* Individual styles */

/* Haruki */
.content {
    font-size: 110%;
    padding: 0px 20px 0px;
    background: rgb(238 28 37);
}

    .content h2 {
        margin: 0 0 2em;
        opacity: 0.1;
    }

    .content p {
        margin: 1em 0;
        padding: 5em 0 0 0;
        font-size: 0.65em;
    }

.input--haruki {
    margin: 4em 1em 1em;
}

.input__field--haruki {
    padding: 0.4em 0.25em;
    width: 100%;
    background: transparent;
    color: #AFB5BB;
    font-size: 1.55em;
}

.input__label--haruki {
    position: absolute;
    width: 100%;
    text-align: left;
    pointer-events: none;
}

.input__label-content--haruki {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label--haruki::before,
.input__label--haruki::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 4px;
    background: #6a7989;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label--haruki::before {
    top: 0;
}

.input__label--haruki::after {
    bottom: 0;
}

.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
    -webkit-transform: translate3d(0, -90%, 0);
    transform: translate3d(0, -90%, 0);
}

.input__field--haruki:focus + .input__label--haruki::before,
.input--filled .input__label--haruki::before {
    -webkit-transform: translate3d(0, -0.5em, 0);
    transform: translate3d(0, -0.5em, 0);
}

.input__field--haruki:focus + .input__label--haruki::after,
.input--filled .input__label--haruki::after {
    -webkit-transform: translate3d(0, 0.5em, 0);
    transform: translate3d(0, 0.5em, 0);
}

/* Hoshi */
.input--hoshi {
    overflow: hidden;
}

.input__field--hoshi {
    margin-top: 10px;
    padding: 0.85em 0.15em;
    width: 100%;
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 27px;
    font-weight: normal;
}

.input__label--hoshi {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0.25em;
    width: 100%;
    height: calc(100% - 1em);
    text-align: left;
    pointer-events: none;
}

.input__label-content--hoshi {
    position: absolute;
}

.input__label--hoshi::before,
.input__label--hoshi::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 10px);
    border-bottom: 1px solid #fff;
}

.input__label--hoshi::after {
    margin-top: 2px;
    border-bottom: 4px solid red;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label--hoshi-color-1::after {
    border-color: #fff;
}

.input__label--hoshi-color-2::after {
    border-color: hsl(160, 100%, 50%);
}

.input__label--hoshi-color-3::after {
    border-color: hsl(20, 100%, 50%);
}

.input__field--hoshi:focus + .input__label--hoshi::after,
.input--filled .input__label--hoshi::after {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,
.input--filled .input__label-content--hoshi {
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

@-webkit-keyframes anim-1 {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(1em, 0, 0);
        transform: translate3d(1em, 0, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(-1em, -40%, 0);
        transform: translate3d(-1em, -40%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, -40%, 0);
        transform: translate3d(0, -40%, 0);
    }
}

@keyframes anim-1 {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(1em, 0, 0);
        transform: translate3d(1em, 0, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(-1em, -40%, 0);
        transform: translate3d(-1em, -40%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, -40%, 0);
        transform: translate3d(0, -40%, 0);
    }
}

/* Kuro */
.input--kuro {
    max-width: 320px;
    margin-bottom: 3em;
}

.input__field--kuro {
    width: 100%;
    background: transparent;
    color: #9196A1;
    opacity: 0;
    text-align: center;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.input__label--kuro {
    position: absolute;
    left: 0;
    width: 100%;
    color: #df6589;
    pointer-events: none;
}

    .input__label--kuro::before,
    .input__label--kuro::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        border: 4px solid #747981;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

    .input__label--kuro::before {
        border-right: none;
    }

    .input__label--kuro::after {
        left: 50%;
        border-left: none;
    }

.input__field--kuro:focus,
.input--filled .input__field--kuro {
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

    .input__field--kuro:focus + .input__label--kuro::before,
    .input--filled .input__label--kuro::before {
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }

    .input__field--kuro:focus + .input__label--kuro::after,
    .input--filled .input__label--kuro::after {
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }

    .input__field--kuro:focus + .input__label--kuro .input__label-content--kuro,
    .input--filled .input__label-content--kuro {
        -webkit-animation: anim-2 0.3s forwards;
        animation: anim-2 0.3s forwards;
    }

@-webkit-keyframes anim-2 {
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 1);
        transform: scale3d(0.3, 0.3, 1);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1);
        transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 3.7em, 0);
        transform: translate3d(0, 3.7em, 0);
    }
}

@keyframes anim-2 {
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 1);
        transform: scale3d(0.3, 0.3, 1);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1);
        transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 3.7em, 0);
        transform: translate3d(0, 3.7em, 0);
    }
}

/* Jiro */
.input--jiro {
    margin-top: 2em;
}

.input__field--jiro {
    padding: 0.85em 0.5em;
    width: 100%;
    background: transparent;
    color: #DDE2E2;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.input__label--jiro {
    position: absolute;
    left: 0;
    padding: 0 0.85em;
    width: 100%;
    height: 100%;
    text-align: left;
    pointer-events: none;
}

.input__label-content--jiro {
    -webkit-transition: -webkit-transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s;
}

.input__label--jiro::before,
.input__label--jiro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label--jiro::before {
    border-top: 2px solid #6a7989;
    -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
    transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.input__label--jiro::after {
    z-index: -1;
    background: #6a7989;
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.input__field--jiro:focus,
.input--filled .input__field--jiro {
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

    .input__field--jiro:focus + .input__label--jiro .input__label-content--jiro,
    .input--filled .input__label-content--jiro {
        -webkit-transform: translate3d(0, -80%, 0);
        transform: translate3d(0, -80%, 0);
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }

    .input__field--jiro:focus + .input__label--jiro::before,
    .input--filled .input__label--jiro::before {
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .input__field--jiro:focus + .input__label--jiro::before,
    .input--filled .input__label--jiro::before {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .input__field--jiro:focus + .input__label--jiro::after,
    .input--filled .input__label--jiro::after {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }

/* Minoru */
.input__field--minoru {
    width: 100%;
    background: #fff;
    box-shadow: 0px 0px 0px 2px transparent;
    color: #eca29b;
    -webkit-transition: box-shadow 0.3s;
    transition: box-shadow 0.3s;
}

.input__label--minoru {
    padding: 0;
    width: 100%;
    text-align: left;
}

    .input__label--minoru::after {
        content: '';
        position: absolute;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 4em;
        box-shadow: 0px 0px 0px 0px;
        color: rgba(199,152,157, 0.6);
    }

.input__field--minoru:focus {
    box-shadow: 0px 0px 0px 2px #eca29b;
}

    .input__field--minoru:focus + .input__label--minoru {
        pointer-events: none;
    }

        .input__field--minoru:focus + .input__label--minoru::after {
            -webkit-animation: anim-shadow 0.3s forwards;
            animation: anim-shadow 0.3s forwards;
        }

@-webkit-keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 100px 50px;
        opacity: 0;
    }
}

@keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 100px 50px;
        opacity: 0;
    }
}

.input__label-content--minoru {
    padding: 0.75em 0.15em;
}

/* Yoko */
.input__field--yoko {
    z-index: 10;
    width: 100%;
    background: transparent;
    color: #f5f5f5;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.input__label--yoko {
    position: relative;
    width: 100%;
    color: #b04b40;
    text-align: left;
}

    .input__label--yoko::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 4em;
        background: #c5564a;
        -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

    .input__label--yoko::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0.25em;
        background: #ad473c;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

.input__label-content--yoko {
    padding: 0.75em 0;
}

.input__field--yoko:focus,
.input--filled .input__field--yoko {
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

    .input__field--yoko:focus + .input__label--yoko::before,
    .input--filled .input__label--yoko::before {
        -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
        transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
    }

    .input__field--yoko:focus + .input__label--yoko,
    .input--filled .input__label--yoko {
        pointer-events: none;
    }

        .input__field--yoko:focus + .input__label--yoko::after,
        .input--filled .input__label--yoko::after {
            -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
            transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
        }

/* Kyo */
.input--kyo {
    z-index: auto;
}

.input__field--kyo {
    padding: 0.85em 1.5em;
    width: 100%;
    border-radius: 2em;
    background: #fff;
    color: #535d92;
}

.input__label--kyo {
    z-index: 0;
    padding: 0 0 0 2em;
    width: 100%;
    text-align: left;
}

    .input__label--kyo::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: rgba(11, 43, 205, 0.6);
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
        pointer-events: none;
    }

.input__label-content--kyo {
    padding: 0.5em 0;
}

.input__field--kyo:focus,
.input__field--kyo:focus + .input__label--kyo .input__label-content--kyo {
    z-index: 10000;
}

    .input__field--kyo:focus + .input__label--kyo {
        color: #fff;
    }

        .input__field--kyo:focus + .input__label--kyo::after {
            opacity: 1;
        }

/* Akira */
.input--akira {
    margin-top: 2em;
}

.input__field--akira {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    padding: 0 1em;
    width: 100%;
    height: 100%;
    background: transparent;
    text-align: center;
}

.input__label--akira {
    padding: 0;
    width: 100%;
    background: #696a6e;
    color: #cc6055;
    cursor: text;
}

    .input__label--akira::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #2f3238;
        -webkit-transform: scale3d(0.97, 0.85, 1);
        transform: scale3d(0.97, 0.85, 1);
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

.input__label-content--akira {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__field--akira:focus + .input__label--akira::before,
.input--filled .input__label--akira::before {
    -webkit-transform: scale3d(0.99, 0.95, 1);
    transform: scale3d(0.99, 0.95, 1);
}

.input__field--akira:focus + .input__label--akira,
.input--filled .input__label--akira {
    cursor: default;
    pointer-events: none;
}

    .input__field--akira:focus + .input__label--akira .input__label-content--akira,
    .input--filled .input__label-content--akira {
        -webkit-transform: translate3d(0, -3.5em, 0);
        transform: translate3d(0, -3.5em, 0);
    }

/* Ichiro */
.input--ichiro {
    margin-top: 2em;
}

.input__field--ichiro {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 100;
    display: block;
    padding: 0 0.55em;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background: #f0f0f0;
    color: #7F8994;
    opacity: 0;
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

.input__label--ichiro {
    width: 100%;
    text-align: left;
    cursor: text;
}

    .input__label--ichiro::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

.input__label-content--ichiro {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__field--ichiro:focus,
.input--filled .input__field--ichiro {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

    .input__field--ichiro:focus + .input__label--ichiro,
    .input--filled .input__label--ichiro {
        cursor: default;
        pointer-events: none;
    }

        .input__field--ichiro:focus + .input__label--ichiro::before,
        .input--filled .input__label--ichiro::before {
            -webkit-transform: scale3d(1, 1.5, 1);
            transform: scale3d(1, 1.5, 1);
        }

        .input__field--ichiro:focus + .input__label--ichiro .input__label-content--ichiro,
        .input--filled .input__label-content--ichiro {
            -webkit-transform: translate3d(0, -3.15em, 0) scale3d(0.8, 0.8, 1);
            transform: translate3d(0, -3.15em, 0) scale3d(0.8, 0.8, 1) translateZ(1px);
        }

/* Juro */
.input--juro {
    overflow: hidden;
}

.input__field--juro {
    position: absolute;
    z-index: 100;
    padding: 2.15em 0.75em 0;
    width: 100%;
    background: transparent;
    color: #1784cd;
    font-size: 0.85em;
}

.input__label--juro {
    padding: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: left;
}

.input__label-content--juro {
    padding: 2em 1em;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.3s, color 0.3s;
    transition: transform 0.3s, color 0.3s;
    text-rendering: geometricPrecision;
}

.input__label--juro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0px solid transparent;
    -webkit-transition: border-width 0.3s, border-color 0.3s;
    transition: border-width 0.3s, border-color 0.3s;
}

.input__field--juro:focus + .input__label--juro::before,
.input--filled .input__label--juro::before {
    border-width: 8px;
    border-color: #1784cd;
    border-top-width: 2em;
}

.input__field--juro:focus + .input__label--juro .input__label-content--juro,
.input--filled .input__label--juro .input__label-content--juro {
    color: #fff;
    -webkit-transform: translate3d(0, -1.5em, 0) scale3d(0.75, 0.75, 1);
    transform: translate3d(0, -1.5em, 0) scale3d(0.75, 0.75, 1) translateZ(1px);
}

/* Hideo */
.input--hideo {
    overflow: hidden;
    background: #fff;
}

.input__field--hideo {
    padding: 0.85em 0.85em 0.85em 3em;
    width: 100%;
    background: transparent;
    -webkit-transform: translate3d(1em, 0, 0);
    transform: translate3d(1em, 0, 0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label--hideo {
    position: absolute;
    padding: 1.25em 0 0;
    width: 4em;
    height: 100%;
}

    .input__label--hideo::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 4em;
        height: 100%;
        background: #899dda;
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

.icon--hideo {
    color: #fff;
    -webkit-transform: scale3d(1, 1, 1); /* Needed for Chrome bug */
    transform: scale3d(1, 1, 1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label-content--hideo {
    position: absolute;
    top: 100%;
}

.input__field--hideo:focus {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

    .input__field--hideo:focus + .input__label--hideo::before {
        -webkit-transform: scale3d(0.8, 1, 1);
        transform: scale3d(0.8, 1, 1);
    }

    .input__field--hideo:focus + .input__label--hideo .icon--hideo {
        -webkit-transform: scale3d(0.6, 0.6, 1);
        transform: scale3d(0.6, 0.6, 1);
    }

/* Madoka */
.input--madoka {
    margin: 1.1em;
}

.input__field--madoka {
    width: 100%;
    background: transparent;
    color: #7A7593;
}

.input__label--madoka {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #7A7593;
    text-align: left;
    cursor: text;
}

.input__label-content--madoka {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.graphic--madoka {
    -webkit-transform: scale3d(1, -1, 1);
    transform: scale3d(1, -1, 1);
    -webkit-transition: stroke-dashoffset 0.3s;
    transition: stroke-dashoffset 0.3s;
    pointer-events: none;
    stroke: #7A7593;
    stroke-width: 4px;
    stroke-dasharray: 962;
    stroke-dashoffset: 558;
}

.input__field--madoka:focus + .input__label--madoka,
.input--filled .input__label--madoka {
    cursor: default;
    pointer-events: none;
}

    .input__field--madoka:focus + .input__label--madoka .graphic--madoka,
    .input--filled .graphic--madoka {
        stroke-dashoffset: 0;
    }

    .input__field--madoka:focus + .input__label--madoka .input__label-content--madoka,
    .input--filled .input__label-content--madoka {
        -webkit-transform: scale3d(0.81, 0.81, 1) translate3d(0, 4em, 0);
        transform: scale3d(0.81, 0.81, 1) translate3d(0, 4em, 0);
    }

/* Kaede */
.input--kaede {
    display: block;
    overflow: hidden;
    margin: 1em auto 2em;
    background: #EFEEEE;
}

.input__field--kaede {
    position: absolute;
    top: 0;
    right: 100%;
    width: 60%;
    height: 100%;
    background: #fff;
    color: #9DABBA;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label--kaede {
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    cursor: text;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label-content--kaede {
    padding: 1.5em 0;
}

.input__field--kaede:focus,
.input--filled .input__field--kaede {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition-delay: 0.06s;
    transition-delay: 0.06s;
}

    .input__field--kaede:focus + .input__label--kaede,
    .input--filled .input__label--kaede {
        -webkit-transform: translate3d(60%, 0, 0);
        transform: translate3d(60%, 0, 0);
        pointer-events: none;
    }

@media screen and (max-width: 34em) {
    .input__field--kaede:focus + .input__label--kaede,
    .input--filled .input__label--kaede {
        -webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
        transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
        pointer-events: none;
    }
}

/* Isao */
.input__field--isao {
    z-index: 10;
    padding: 0.75em 0.1em 0.25em;
    width: 100%;
    background: transparent;
    color: #afb3b8;
}

.input__label--isao {
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 100%;
    color: #dadada;
    text-align: left;
}

    .input__label--isao::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 7px;
        background: #dadada;
        -webkit-transform: scale3d(1, 0.4, 1);
        transform: scale3d(1, 0.4, 1);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
        transition: transform 0.3s, background-color 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }

    .input__label--isao::after {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        padding: 0.75em 0.15em;
        color: #da7071;
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        pointer-events: none;
    }

.input__field--isao:focus + .input__label--isao::before {
    background-color: #da7071;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.input__field--isao:focus + .input__label--isao {
    pointer-events: none;
}

    .input__field--isao:focus + .input__label--isao::after {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

.input__label-content--isao {
    padding: 0.75em 0.15em;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__field--isao:focus + .input__label--isao .input__label-content--isao {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.hdr_fac {
    width: 100%;
    float: left;
    padding-left: 0;
    list-style: none;
    text-align: left;
    margin-bottom: 16px;
}

    .hdr_fac li {
        display: inline-block;
        padding-right: 10px;
        color: #000;
        font-weight: 700;
    }

        .hdr_fac li i {
            color: #fed000;
        }

.shopping_cart {
    width: 100%;
    float: left;
    text-align: right;
}

    .shopping_cart a {
        display: inline-block;
        padding: 9px 13px;
    }

        .shopping_cart a:hover {
            text-decoration: none;
        }

.sign_in {
    color: #fff;
}

    .sign_in:hover {
        color: #fff;
    }

    .sign_in:focus {
        color: #fff;
    }

.cart_btn {
    color: #000;
    background-color: #fed000;
}

    .cart_btn:hover {
        color: #000;
        background-color: #fed000;
    }

.search_box {
    width: 100%;
    float: left;
    margin-top: 20px;
}

    .search_box input[type=text] {
        width: 130px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url('../images/search.png');
        background-position: 9px 11px;
        background-repeat: no-repeat;
        padding: 8px 20px 8px 40px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
        float: right;
        color: #000;
    }

        .search_box input[type=text]:focus {
            width: 100%;
        }

.shopping_content {
    width: 100%;
    clear: both;
    padding: 107px 0;
    background-color: #ffffff;
/*    min-height: 437px;*/
}

.bread {
    width: 100%;
    float: left;
    padding-top: 16px;
}

    .bread ul.breadcrumb {
        padding: 10px 16px;
        list-style: none;
        background: none;
    }

        .bread ul.breadcrumb li {
            display: inline;
            font-size: 3;
        }

            .bread ul.breadcrumb li + li:before {
                padding: 8px;
                color: black;
                content: "/\00a0";
            }

            .bread ul.breadcrumb li a {
                color: #0275d8;
                text-decoration: none;
            }

                .bread ul.breadcrumb li a:hover {
                    color: #01447e;
                    text-decoration: underline;
                }

.right_content {
    width: 100%;
    float: left;
}

.ammount_text {
    color: #ff7201;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    font-size: 19px;
}

.add_cart_btn {
    padding: 10px 20px;
    color: #000;
    background-color: #fed000;
    display: inline-block;
}

    .add_cart_btn:hover {
        color: #000;
        background-color: #fed000;
        text-decoration: none;
    }

    .add_cart_btn:focus {
        color: #000;
        background-color: #fed000;
        text-decoration: none;
    }

.limited_stock {
    color: #000;
    width: 100%;
    display: inline-block;
    padding: 15px 0;
}

    .limited_stock i {
        color: #00e30b;
    }

.quentity_form {
    float: left;
    width: 50%;
}

    .quentity_form .qty {
        width: 60% !important;
        height: 35px;
        text-align: center;
    }
    .quentity_form #myform{
        margin-right:12px;
    }
    .quentity_form input.qtyplus {
        width: 35px;
        height: 35px;
    }

    .quentity_form input.qtyminus {
        width: 35px;
        height: 35px;
    }

.check_content {
    width: 100%;
    float: left;
    margin-bottom: 27px;
}

    .check_content input[type="submit"] {
        color: #000;
        background-color: #fed000;
        border: 2px solid #fed000;
    }


.nav-tabs {
    border-bottom: 2px solid #DDD;
}

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        border-width: 0;
    }

    .nav-tabs > li > a {
        border: none;
        color: #000;
    }

        .nav-tabs > li.active > a, .nav-tabs > li > a:hover {
            border: none;
            color: #fed000 !important;
            background: transparent;
        }

        .nav-tabs > li > a::after {
            content: "";
            background: #4285F4;
            height: 2px;
            position: absolute;
            width: 100%;
            left: 0px;
            bottom: -1px;
            transition: all 250ms ease 0s;
            transform: scale(0);
        }

    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
        transform: scale(1);
    }

.tab-nav > li > a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}

.tab-pane {
    padding: 15px 0;
}

.tab-content {
    padding: 20px
}

.course_filter {
    width: 100%;
    float: left;
}

    .course_filter ul {
        width: 100%;
        float: left;
        list-style: none;
        padding-left: 0px;
        border-bottom: 1px solid #ccc;
        height: 41px;
    }

        .course_filter ul li {
            display: inline-block;
        }
            /*.course_filter ul li:focus-visible{
                outline:none;
            }*/

            .course_filter ul li a {
                width: 100%;
                float: left;
                text-align: center;
                border: none;
                padding: 9px 28px;
                color: #000;
            }

                .course_filter ul li a:hover {
                    border-bottom-color: transparent;
                    background-color: #fff;
                    text-decoration: none;
                }

                .course_filter ul li a:focus {
                    text-decoration: none;
                }

    .course_filter > ul > li.active > a {
        color: #000;
        background-color: #fff;
        border: 1px solid #ddd;
        border-top: 3px #fed000 solid;
        border-bottom-color: transparent;
        cursor: default;
    }

.card {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
}

.bg_yellow {
    background-color: #fed000;
}

.continue_shp {
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    float: left;
    box-shadow: 0 0 10px #ccc;
    /*margin-right: 15px;*/
    /*margin-left: 22px;*/
}

    .continue_shp:hover {
        background-color: #fed000;
        color: #000;
        box-shadow: 0 0 10px #ccc;
        text-decoration: none;
    }

.width_100 {
    width: 100%;
}

.quantity .qty {
    width: 40px;
    height: 35px;
    text-align: center;
}

.quantity input.qtyplus {
    width: 35px;
    height: 35px;
}

.quantity input.qtyminus {
    width: 35px;
    height: 35px;
}

.image_pend img {
    height: 58px;
}

.right_content h3 {
    margin-top: 0px;
}

.left_shopping {
    width: 100%;
    float: left;
}

    .left_shopping h3 {
        width: 100%;
        float: left;
        border-bottom: 1px solid #ccc;
        padding: 0 15px 7px 15px;
        margin-top: 10px;
    }

.delete-btn a {
    font-weight: normal;
    color: #ff0000;
    margin-top: 15px;
    float: left;
}

.item_cart {
    width: 100%;
    float: left;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    /*margin-bottom: 15px;*/
    padding: 10px;
}

.description_right ul {
    width: 100%;
    float: left;
    list-style: none;
    /*  padding-left: 0px;
    padding: 14px 0;*/
}

    .description_right ul li {
        width: 50%;
        float: left;
    }

.color_orng {
    color: #ff7201;
}

.description_right {
    /*padding: 15px;*/
}

.total-price {
    /*border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;*/
    padding: 15px;
    margin-bottom: 16px;
}

    .total-price ul {
        list-style: none;
        padding-left: 0px;
    }

        .total-price ul li {
            width: 50%;
            float: left;
        }

.con_sp {
    color: #000;
    background-color: #fed000;
    padding: 10px;
    /* margin-left: 15px;
    margin-bottom: 17px;*/
    margin: 10px;
    float: right;
}

    .con_sp:hover {
        color: #000;
        background-color: #fed000;
        text-decoration: none;
    }

    .con_sp:focus {
        color: #000;
        background-color: #fed000;
        text-decoration: none;
    }

.proceed_to_chkout {
    color: #000;
    background-color: #40a41d;
    padding: 10px;
    margin-left: 15px;
    margin-bottom: 17px;
    float: left;
}

    .proceed_to_chkout:hover {
        color: #000;
        background-color: #40a41d;
        text-decoration: none;
    }

    .proceed_to_chkout:focus {
        color: #000;
        background-color: #40a41d;
        text-decoration: none;
    }

.personal_info {
    width: 100%;
    float: left;
}

    .personal_info h3 {
        width: 100%;
        float: left;
        margin-top: 0px;
        font-size: 20px;
        color: #ff7201;
    }

.per_tab {
    width: 100%;
    float: left;
}

    .per_tab .nav-tabs {
        border: none;
        background-color: #051C4D;
        padding: 10px;
    }

        .per_tab .nav-tabs > li > a::after {
            background: none;
        }

        .per_tab .nav-tabs > li > a {
            font-size: 18px;
            padding: 0px 10px;
        }

    .per_tab .form-control, .form-control:focus {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0px;
        margin-top: 0px;
    }

    .per_tab .nav-tabs > li > a {
        border: none;
        color: #fff;
    }

    .per_tab .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        background: none;
    }

.show_btn {
    color: #000;
    background-color: #fed000;
    padding: 7px;
    float: left;
    width: 100%;
    border: none;
}

.logo_part a {
    width: 50%;
    float: left;
}

.cours_list h4 {
    margin: 0px;
    font-size: 16px;
    min-height: 96px;
    line-height: 21px;
}

.cours_list ul {
    width: 100%;
    float: left;
    padding: 15px 15px 10px;
    list-style: none;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0;
}

.width_80 {
    width: 80%;
}

.width_16 {
    width: 16%;
    font-size: 16px;
}

.cart_list {
    padding: 10px ;
    color: #000;
    background-color: #fed000;
    margin: 10px;
    float: right;
}

    .cart_list:hover {
        color: #000;
        background-color: #fed000;
        text-decoration: none;
    }

.cours_list ul li {
    min-height: 40px;
    color: #000;
}

.cours_part h4 {
    background-color: #051C4D;
    padding: 15px;
    margin: 0px;
    font-size: 17px;
    color: #fff;
    min-height: 60px;
}

.cours_part ul {
    width: 100%;
    float: left;
    padding: 15px 15px 10px;
    list-style: none;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0;
}

    .cours_part ul li {
        min-height: 40px;
        color: #000;
    }

.cours_part {
    background: rgba(0, 0, 0, 0.0);
    box-shadow: 0 0 10px #000;
}

.padding_left_15 {
    padding-left: 15px;
}

.padding_top_15 {
    padding-top: 15px;
}

.width_30 {
    width: 200px;
    height: 200px;
    padding: 12px;
}

.cours_list {
    background: #fed000;
    color: #000;
}

    .cours_list:hover {
        opacity: 0.8;
    }

    .cours_list:nth-child(even) {
        background: #363435;
        color: #fff
    }

    .cours_list a {
        color: #000;
        background-color: #fff;
        padding: 5px 7px;
        margin: 5px 0;
        display: inline-block;
        font-size: 11px;
    }

        .cours_list a:hover {
            color: #fff;
            background-color: #000;
            text-decoration: none;
        }

.margin_btm_15 {
    margin-bottom: 10px;
}


.padding_right_0 {
    padding-right: 0;
}



#form1 input[type="text"], #form1 input[type="email"], #form1 input[type="tel"], #form1 input[type="Password"], #form1 textarea, #form1 button[type="submit"] {
    font: 400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#form1 input[type="text"], #form1 input[type="email"], #form1 input[type="tel"], #form1 input[type="Mobile"], #form1 input[type="Password"], #form1 textarea {
    width: 100%;
    box-shadow: inset 0 1px 2px #DDD, 0 1px 0 #FFF;
    -webkit-box-shadow: inset 0 1px 2px #DDD, 0 1px 0 #FFF;
    -moz-box-shadow: inset 0 1px 2px #DDD, 0 1px 0 #FFF;
    border: 1px solid #CCC;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
    border-radius: 5px;
}

#form1 label {
    display: block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

#form1 h3 {
    width: 100%;
    float: left;
    text-align: center;
    color: #000;
}

#form1 button[type="submit"] {
    cursor: pointer;
    width: 20% ;
    border: none;
    background: #fed000;
    color: #000;
    margin: 0 0 5px;
    padding: 10px;
    border-radius: 5px;
}
.billing_details_top_div h4{
    font-size: 22px ;
}
.fill_out {
    margin: 12px 0;
/*    color: #625c5c;*/
}
/*
.billing_details_form_div label span {
    font-size: 14px;
    color: #737272;
}*/
.style11 {
    border-top: 1px solid #9c9c9c;
}

.payment_type {
    width: 100%;
    float: left;
    padding: 15px 15px 0;
}

    .payment_type h3 {
        width: 100%;
        float: left;
        margin-top: 0px;
        color: #ff7201;
        text-align: center;
    }

    .payment_type .radio.radio-inline {
        margin-top: 0;
        padding-bottom: 20px;
    }

.bg_white {
    width: 100%;
    background-color: #fff;
    padding: 60px 0px;
}

.thank_you_text {
    width: 100%;
    float: left;
    clear: both;
    text-align: left;
}

.next_btn {
    float: right;
    text-align: center;
    color: #000;
    background-color: #fed000;
    text-decoration: none;
    border: none;
    padding: 9px 20px;
}

    .next_btn:hover {
        color: #000;
        background-color: #fed000;
        text-decoration: none;
    }

.sign_out_name {
    background: none;
    border: none;
}

.thank_you {
    width: 636px;
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #363435;
}

    .thank_you ul {
        padding-left: 0;
        list-style: none;
        text-align: center;
    }

        .thank_you ul li {
            display: inline-block;
            padding: 20px;
        }

            .thank_you ul li a {
                color: #363435;
                text-decoration: none;
                cursor: pointer;
            }

                .thank_you ul li a i {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 30px;
                }

.back_to_home {
    color: #000;
    padding: 12px 24px;
    background-color: #fed000;
    margin: 26px;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

    .back_to_home:hover {
        color: #fed000;
        background-color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.bg_blue {
    background-color: #0b1c98;
    color: #fff;
}

.bg_twi {
    background-color: #00b1e4;
    color: #fff;
}

.bg_google {
    background-color: #fa3535;
    color: #fff;
}

.image_pend_order img {
    height: 100px;
}

.description h4 {
    margin-top: 0px;
}

.forgot_pass {
    width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border: 1px solid #fed000;
}

    .forgot_pass button {
        color: #000;
        background-color: #fed000;
        display: inline-block;
        padding: 8px 13px;
        border: none;
        margin: 20px 0px;
    }

    .forgot_pass input {
        padding: 5px;
    }

    .forgot_pass a {
        padding: 5px;
        color: #000;
        cursor: pointer;
        text-decoration: none;
    }

.left_mar_57 {
    margin-left: 57px;
}

.left_mar_100 {
    margin-left: 174px !important;
}

.pament_part {
    width: 100%;
    float: left;
    padding: 15px;
}

    .pament_part h3 {
        width: 100%;
        float: left;
        margin-top: 0;
    }

    .pament_part ul {
        width: 100%;
        float: left;
        padding-left: 0;
        list-style: none;
    }

        .pament_part ul li {
            display: inline-block;
            width: 20%;
        }

            .pament_part ul li button {
                width: 100%;
                float: left;
                background: none;
                border: none;
            }

                .pament_part ul li button img {
                    width: 100%;
                    float: left;
                }

.ofline_pament_part {
    width: 100%;
    float: left;
    padding: 15px;
}

    .ofline_pament_part h3 {
        width: 100%;
        float: left;
        margin-top: 0;
    }

    .ofline_pament_part ul {
        width: 100%;
        float: left;
        padding-left: 0;
        list-style: none;
        background: #fed000;
        color: #000;
        padding: 10px;
    }

        .ofline_pament_part ul li {
            width: auto;
            display: inline-block;
            font-size: 18px;
            padding-right: 35px;
        }

    .ofline_pament_part .form-control, .form-control:focus {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0px;
        margin-top: 0px;
    }

.forgot_pass input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #b7b7b7;
}

.forgot_pass input::-moz-placeholder { /* Firefox 19+ */
    color: #b7b7b7;
}

.forgot_pass input:-ms-input-placeholder { /* IE 10+ */
    color: #b7b7b7;
}

.forgot_pass input:-moz-placeholder { /* Firefox 18- */
    color: #b7b7b7;
}

.forgot_pass span {
    color: #a4a4a4;
}

.file {
    position: relative;
}

    .file label {
        background: #363435;
        padding: 5px 20px;
        color: #fed000;
        font-weight: bold;
        font-size: 18px;
        transition: all .4s;
    }

    .file input {
        position: absolute;
        display: inline-block;
        left: 0;
        top: 0;
        opacity: 0.01;
        cursor: pointer;
    }

        .file input:hover + label,
        .file input:focus + label {
            background: #fed000;
            color: #000;
        }






#panel {
    position: fixed;
    background: transparent;
    right: 0;
    z-index: 99;
    top: 42%;
}

#panel-content {
    position: relative;
    width: 0px;
    float: right;
    top: 0px
}

#panel-tab {
    position: relative;
    width: 63px;
    background-color: transparent;
    float: left;
}

#myTab {
    position: relative;
    top: 0px;
    height: 230px;
    width: 90%;
    color: White;
}

    #myTab p {
        margin: 0;
    }

.height_300 {
    background-color: #fed000;
    padding: 20px;
    float: left;
    border-radius: 10px 0 0 10px;
}

.width_100 {
    width: 100%;
}

.height_300 h2 {
    margin-top: 0px;
    color: #f15723;
}

.whatsapp-subscription__tagline ul {
    font-size: 16px;
    width: 100%;
    float: left;
    padding-left: 20px;
    margin-top: 10px;
}

    .whatsapp-subscription__tagline ul li {
        font-size: 16px;
        width: 100%;
        float: left;
        list-style-type: square;
    }



.whatsapp-subscription__button {
    color: #fff;
    background: #2cb742;
    float: left;
    padding: 10px;
    border-radius: 5px;
}

.responsive_block {
    display: none;
}

.you_tube_channel {
    font-size: 13pt;
    font-weight: bold;
    color: #fed000;
    padding-top: 15px;
}

.channel_img {
    width: 28%;
    float: left;
    margin-right: 3px;
}

.channel_img2 {
    width: 28%;
    float: left;
}

.faculty_sec {
    width: 100%;
    float: left;
}

    .faculty_sec h3 {
        margin-top: 0;
        font-size: 21px;
        color: #fed000;
    }

    .faculty_sec p {
        text-align: justify;
    }

.border-right-1 {
    border-right: 1px solid #ccc;
}

.faculty_home {
    font-size: 20px;
    margin-top: 29px;
    display: inline-block;
    color: #fff;
    background: #ee1c25;
    padding: 6px 39px;
    border-radius: 7px;
}

    .faculty_home:hover, .faculty_home:focus {
        color: #fff;
        background: #ee1c25;
        text-decoration: none;
    }

#mySidenav a.Contact {
    position: fixed;
    top: 25%;
    right: -4%;
    transition: 0.3s;
    padding: 13px 20px;
    width: auto;
    transform: rotate(-90deg);
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    color: white;
    border-radius: 12px 12px 0px 0px;
    vertical-align: top;
    /* transform: rotate(7deg); */
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    /* -webkit-transform: rotate(270deg); */
    -o-transform: rotate(270deg);
    background-color: red !important;
    z-index: 111;
}

#popup-a35ff43162a9df233a50bfc8f06ed8f9 {
    z-index: 999 !important;
}

@media (max-width:374.5px) {
    #fh5co-hero .form-bg {
        margin: 170px 0 40px;
    }
    #fh5co-hero {
        height: 280px !important;
    }
/*    footer {
        margin-top: 920px !important;
    }*/
    #mySidenav1 {       
        right: -20% !important;
    }
    }
@media (min-width:375px) and (max-width: 424.5px) {
    #mySidenav1 {
        right: -18% !important;
    }
    #fh5co-hero{
        height: 330px !important;
    }
    #fh5co-hero .form-bg {
        margin: 200px 0 40px;
    }
    /*.red-img {
        top: -20px !important;
        right: 0 !important;
        left: 225px !important;
    }*/
    .social_media_links ul{
        padding-bottom: 30px !important;
    }
    .social_media_links ul li a b{
        font-size:14px !important;
    }
    .social_media_links ul li a img{
        width: 27px !important;
        }
    footer {
        margin-top: 900px !important;
    }
}
@media (min-width:425px) and (max-width: 767.5px) {
    #mySidenav1 {
        right: -15% !important;
    }
    #fh5co-hero {
        height: 360px !important;
    }
    #fh5co-hero .form-bg {
        margin: 250px 0 40px;
    }
    footer {
        margin-top: 840px !important;
    }
    .red-img a img {
        width: 60% !important;
    }
   /* .red-img {
        top: -12px !important;
        right: 0 !important;
        left: 250px !important;
    }*/
}

@media (min-width: 768px) and (max-width: 992px) {
    #mySidenav1 {
        top: 25% !important;
        right: -8% !important;
    }
        /*footer {
        margin-top: 1000px !important;
    }*/
        .container{
        width:840px !important;
    }
    .form-bg h2 {
        font-size: 14pt !important;
        padding: 10px !important;
    }
    .input__field--hoshi {
        margin-top: 0px !important;
        padding: 10px 0 24px !important;
        font-size: 15px;
        line-height: 20px !important;
    }
    btn-default{
        padding: 6px !important;
    }
    .social_media_links {
        margin-left: -10px !important;
        margin-top: 15px !important;
    }
    .social_media_links ul li a b {
        font-size: 16px !important;
    }

    .social_media_links ul li a img {
        width: 30px !important;
    }
    .social_media_links ul{
        gap:14px !important;
        padding-bottom:20px !important;
    }
    /*.red-img {
        right: 44% !important;
        text-align: center !important;
    }
    .red-img a img {
       width:80% !important;
    }*/
    #fh5co-hero .form-bg {
        margin-left: 20px !important;
    }
}
    @media (max-width:767px) {
        /*footer{
            margin-top:920px !important;
        }*/
        .red-img{
            position: relative !important;
            justify-content:center !important;
            text-align:center !important;
            top: -80px !important;
            right:0 !important;
        }
            .red-img a{
                width:23% !important;
            }
            .red-img a img {
                width: 100% ;
            }
        #panel {
            display: none;
        }

        .responsive_block {
            display: block !important;
        }

        #mySidenav a.Contact {
            font-size: 14px;
            padding: 0px 15px;
            right: -8%;
        }





        #mySidenav span {
            position: fixed;
            left: -255px;
            transition: 0.3s;
            padding: 6px;
            width: 304px;
            text-decoration: none;
            font-size: 20px;
            color: white;
            border-radius: 0 5px 5px 0;
            z-index: 999;
            top: inherit;
            line-height: 39px;
            bottom: 4px !important;
        }

            #mySidenav span img {
                float: right;
            }

            #mySidenav span:hover {
                left: 0;
            }

        #about {
            top: 20px;
            background-color: #ffd800;
        }

        .whatsapp_subscription_responsive {
            color: #fff;
            background: #2cb742;
            float: left;
            padding: 0 10px;
            border-radius: 5px;
        }


        .fixed {
            position: relative;
        }
    }








    @media (max-width: 767px) {
        .quentity_form {
            float: left;
            width: 50%;
        }

        .address {
            text-align: center;
        }

        .shopping_cart {
            text-align: left;
        }

        .search_box input[type=text] {
            float: left;
        }

        .xzoom {
            width: 100%;
        }

        .width_16 {
            width: 20%;
        }

        .width_30 {
            width: 100%;
            height: 250px;
            margin: 10px 0px;
        }

        .total-price {
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding: 15px;
            margin-bottom: 16px;
            float: left;
            width: 100%;
        }

        .text-left-xs {
            text-align: left;
        }

        .forgot_pass {
            width: 100%;
        }

        

        .left_mar_57 {
            margin-left: 0px;
        }

        .left_mar_100 {
            margin-left: 0px !important;
        }

        .forgot_pass button {
            width: 100%;
        }

        .thank_you {
            width: 100%;
        }

        .course_filter ul {
            height: auto;
        }

        .you_tube_channel {
            font-size: 13pt;
            font-weight: bold;
            color: #fed000;
            padding-top: 15px;
            width: 100%;
            float: left;
            text-align: center;
        }

        .faculty_home {
            font-size: 20px;
            margin-top: 0px;
            display: inline-block;
            color: #fff;
            background: #ee1c25;
            padding: 21px 39px;
            border-radius: 7px;
            vertical-align: top;
            margin-left: 6px;
        }

        .channel_img {
            width: 20%;
            float: none;
            margin-right: 3px;
            margin-bottom: 0px;
            display: inline-block;
        }

        .channel_img2 {
            width: 20%;
            float: none;
            display: inline-block;
            t;
        }

        .xs-text-cen {
            text-align: center;
        }

        .logo_part {
            text-align: center;
        }

            .logo_part a {
                width: 40%;
                text-align: center;
                display: inline-block;
                float: none;
            }

        .cnt223 {
            width: 100% !important;
            min-width: 100% !important;
            padding: 0 10px;
        }
    }

    .process_flow {
        width: 100%;
        float: left;
        padding: 20px;
    }

        .process_flow h3 {
            width: 100%;
            float: left;
            margin-top: 0px;
            color: #ff7201;
        }

        .process_flow ul {
            width: 100%;
            float: left;
        }

            .process_flow ul li {
                width: 100%;
                float: left;
                font-size: 18px;
                margin-bottom: 9px;
            }

    .social {
        margin: 0;
        padding: 0;
        width: 100%;
        display: inline-block;
    }

        .social ul {
            margin-top: 8px;
            padding: 0;
            list-style: none;
        }

            .social ul li {
                color: #FFF;
                display: inline-block;
                margin-left: 5px;
            }

                .social ul li a {
                    color: #FFF;
                    text-decoration: none;
                    font-family: "Open Sans";
                }

    @media (max-width: 786px) {
        #my-welcome-message {
            width: 90%;
            left: 5%;
            top: 13%;
        }

        .alert {
            width: 90%;
            margin: 0 auto;
            text-align: center;
            font-size: 15px !important;
        }
    }

    .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
        background-color: #ee1c25;
    }

    .razor_1 {
        margin: 3.46% 0%;
    }

    .razor_pay_1 {
        padding: 0px 15px;
        width: 45%;
        margin: 15px auto;
        border: 1px solid;
        border-radius: 15px;
    }


        .razor_pay_1 h2 {
            text-align: center;
            background-color: #fed008;
            color: #fff;
            padding: 10px 0px;
            border-radius: 10px;
            margin: 10px auto;
        }

        .razor_pay_1 .ra_1 h3 {
            font-size: 14px;
            font-weight: 600;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .razor_pay_1 .ra_2 h3 {
            font-size: 14px;
            font-weight: 600;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .razor_pay_1 .form-group label {
            padding: 5px 10px;
        }

        .razor_pay_1 .form-group .form-control {
            border: 1px solid #000;
            padding: 15px;
            height: 20px;
            margin-top: 0px;
        }
    /*.header_img_area {
	display: flex;
}*/
}

#myModal .modal-dialog {
    max-width: 600px;
}

.modal-header .modal-title {
    font-size: 18px !important;
    text-transform: capitalize;
}

.modal-header .close {
    border: none;
    background: none;
}




.title_course {
    width: 100%;
    float: left;
    margin-bottom: 17px;
    font-size: 24px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 9px;
    /* color: #012652; */
}
.refarence_online {
    width: 100%;
    float: left;
    padding-left: 0;
    list-style: none;
    background: #012652;
    color: #fff;
    padding: 7px;
    margin-bottom: 12px;
}
.card.pull-left.width_100.border_top {
    margin-top: 20px;
}
.padding_left_right_15 {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 20px;
}

@media (max-width: 767.5px) {
    .address .cont {
        font-size: 12pt;
    }

    .razor_pay_1 {
        width: 100%;
    }

    .delete-btn a i.fa.fa-remove {
        font-size: 15px;
    }

    .image_pend img {
        height: 42px;
    }

    .description {
        text-align: center;
    }

        .description span {
            font-size: 10px;
        }
}


@media (min-width: 768px) and (max-width: 1199px){
    .razor_pay_1 {
        width: 70%;
    }
}