/* Global Styles */

html, body {
    height: 100%;
}
body {
    /*padding-top: 106px;*//* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    font-family: "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.5px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 27px;
    color: inherit;
}
a {
    color: #333;
}
a:hover, a:focus, a:active {
    text-decoration: none;
    color: #666;
}


body.page .navbar-default {
    background-color: #c0ab74;
}

.navbar-default .navbar-toggle {
    margin-top: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #a5873a;
}
body.page .navbar-default .navbar-toggle .icon-bar {
    /*background-color: #a5873a;*/
    background-color: white;
}

.navbar-brand{
    max-width: 158px;
    height: auto;
    padding: 0;
    margin: 15px!important;
}
.navbar-fixed-bottom .navbar-collapse, 
.navbar-fixed-top .navbar-collapse {
    max-height: 480px;
}
.nav {
    margin-top: 56px;
}
.bot_navbar_row {
    position: relative;
    float: right;
}
.bot-block {
    position: absolute;
    right: -850px;
    top: 15px;
}
.navbar-form {
    padding: 0;
    display: inline-block;
}
.navbar-form .input-group .search-form {
    height: 32px;
    color: white;
    border: 0;
    border-radius: 30px;
    background-color: rgb(201, 183, 137);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
body.page .navbar-form .input-group .search-form { 
    background-color: rgba(0, 0, 0, 0.2);
}
.search-form::placeholder {
    color: white;
}
input.search-form[type="text"]::-ms-input-placeholder { 
    color: white; 
}

.num-block {
    width: 24px;
    height: 24px;
    background-color: #D4504F;
    border: 1px solid white;
    position: absolute;
    right: -8px;
    top: -8px;
    z-index: 99;
    border-radius: 50%;
}
.num {
    font-family: Arial;
    font-size: 0.75em;
    color: white;
    line-height: 25px;
    margin: 0;
}

.navbar-form .input-group .input-group-btn:last-child>.btn {
    margin-left: 0;
}
.navbar-form .input-group .input-group-btn .search-btn {
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    background-color: rgb(201, 183, 137);
    color: white;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
body.page .navbar-form .input-group .input-group-btn .search-btn { 
    background-color: rgba(0, 0, 0, 0.2);
}
.navbar-default .navbar-nav>li>a {
    font-weight: 600;
    color: #a5873a;
    padding: 15px 4.5rem;
}
body.page .navbar-default .navbar-nav>li>a { 
    color: white;
}
.navbar-default .navbar-nav>li>a:focus, 
.navbar-default .navbar-nav>li>a:hover {
    color: #675528;
}
body.page .navbar-default .navbar-nav>li>a:focus, 
body.page .navbar-default .navbar-nav>li>a:hover { 
    color: #f2f3f3;
}
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
    color: #af2523;
    background-color: transparent;
    font-weight: bold;
}
body.page .navbar-default .navbar-nav>.active>a, 
body.page .navbar-default .navbar-nav>.active>a:focus, 
body.page .navbar-default .navbar-nav>.active>a:hover {
    color: #af2523;
    background-color: transparent;
    font-weight: bold;
}
.nav>li.prod_li.dropdown.open {
    position: static;
}
.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.open>a:hover {
    color: #af2523;
    background-color: transparent;
}
.nav>li.prod_li.dropdown.open .dropdown-menu {
    background-color: #f5f0e3;
    display: table;
    border: 0;
    border-radius: 0px;
    width: 100%;
    margin: 0;
    padding: 1rem 12% 2rem;
    text-align: center;
    left: 0;
    right: 0;
}
.nav>li.prod_li.dropdown.open .dropdown-menu li {
    display: inline-block;
    width: 20%;
    padding: 1.25rem 2.5rem;
    float: left;
}
.nav>li.prod_li.dropdown.open a.dropdown-item {
    position: relative;
    color: #675528;
    border-bottom: 1px solid #a5873a;
    font-size: 16px;
}


.nav>li.user_li.dropdown.open .dropdown-menu {
    background-color: #f5f0e3;
    display: inline-block;
    border: 0;
    border-radius: 0px;
    width: 100%;
    margin: 0;
    padding: 1rem 2rem 3rem;
    text-align: center;
    left: -40px;
    right: 0;
    min-width: 210px;
}
.nav>li.user_li.dropdown.open .dropdown-menu li {
    display: inline-block;
    width: 100%;
    padding: 1.25rem 0;
    float: left;
}
.nav>li.user_li.dropdown.open a.dropdown-item {
    position: relative;
    padding: 0.75rem 1.5rem;
    color: #675528;
    border-bottom: 1px solid #a5873a;
    font-size: 16px;
}
.nav>li.dropdown.open a.dropdown-item:hover {
    background-color: transparent;
}
.nav>li.dropdown.open a.dropdown-item:hover:after {
    content: "";
    display: block;
    border: 8px solid transparent;
    border-bottom-color: #af3601;
    position: absolute;
    left: 45%;
    bottom: 0;
    width: 8px;
}

.nav-link {
    background-color: #c9b789;
    display:inline-block;
    border-radius: 50%;
    margin-left: 10px;
    padding: 5px;
    width: 38px;
    height: 38px;
    color: white;
    text-align: center;
}
body.page .nav-link { 
    background-color: rgba(0, 0, 0, 0.2);
}
.nav-link:hover {
    color: white;
}
.bot_navbar_icon {
    display: inline-block;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Carousel */

/* header.carousel {
    height: 50%;
} */

header.carousel .fill a img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}


/*.carousel-img .carousel-control {
    width: 4%;
    background-image: none;
    width: 48px;
    height: 48px;
    background-color: black;
    border-radius: 100px;
    top: 50%;
 }
*/
 .carousel-control {
	position: absolute;
	width: 48px;
	height: 48px;
	top: 50%;
	margin-top: -35px;
	line-height: 70px;
	border-radius: 50%;
	color: inherit;
	background: #1b1b1b;
	border: 0;
	opacity: 0.5;
	text-shadow: none;
	z-index: 5;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s; 
}

.carousel-indicators {
    bottom: 0;
}

.carousel-img .carousel-control.left {
    margin-left: 0;
}
 
.carousel-img .carousel-control.right {
    margin-right: 0;
}
 
.carousel-control i.glyphicon-chevron-left {
    margin-left: -15px;
    margin-top: -15px;
}
 
.carousel-control i.glyphicon-chevron-right {
    margin-right: -15px;
    margin-top: -15px;
}
.carousel-img .item {
    background-color: white;
}
.carousel-img .cloneditem-1,
.carousel-img .cloneditem-2 {
    display: none;
}
.page-header {
    border: none;
}


/* Production Section*/
.comic_sec .comic_row,
.contact_sec .comic_row {
    position: relative;
    display: flex;
}
.comic_sec .comic_row .img-comic,
.contact_sec .comic_row .img-comic {
    position: absolute;
    right: 0;
    top: -178px;
}

.comic_sec .thumbnail {
    background-color: transparent;
    padding: 20px;
    border: 0;
    margin-bottom: 0;
}
.comic_sec .thumbnail img {
    width:100%;
}
.master-img{
    float: right;
}
.master-info {
    font-size: 0.875em;
    line-height: 30px;
}





/**/
.act_row {
    position: relative;
}
.act_row .btn-more {
    background-color: #d4c295;
    font-size: 12px;
    color: white;
    padding: .375rem 1.25rem;
    position: absolute;
    right: 0;
    top: -5px;
}

.act_row .btn-more:hover {
    background-color: #af9f76;
}
.date_message {
    font-size: 1.25em;
}
.date_message span {
    font-size: 0.6em;
}
.monyear_message {
    font-size: 0.875em;
}


/**/
.thumbnail {
    background-color: transparent;
}
.thumb-img {
    padding: 1.5rem!important;
}
.map-container {
    overflow: hidden;
    position: relative;
}
.map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}
.btn-refresh {
    border: 0;
    background-color: transparent;
}
.btn-send, .btn-reset {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.25px;
    padding: 15px 30px;
    color: white;
    margin-bottom: 15px;
}
.btn-send:hover {
    background-color: #af9f76;
    color: white;
}
.btn-reset {
    background-color: #a2a3a5;
    color: white;
}
.btn-reset:hover {
    background-color: #898989;
    color: white;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* act styles */
body.page .carousel-info {
    padding: 10px 15px;
}

body.page .carousel-info h4 {
    font-size: 1.429em;
    color: black;
}

body.page .carousel-info p {
    color: #595757;
    font-size: 0.875em;
}
/* body.page .carousel-img a.left span{
    left: 50%;
    margin-left: -20px;
} 
body.page .carousel-img a.right span{
    right: 50%;
    margin-left: -10px;
} */

/* Store Styles */
body.page .store_row h3{
    color: #af2523;
    margin-top: 3rem;
}
body.page .store_row p {
    margin: 0;
}

/* Act Styles */
body.page .act_left, 
body.page .act_right {
    top: 35%;
}

.pagination_row .dropdown-toggle {
    min-width: auto;
}
.pagination_row .dropdown-menu {
    min-width: auto; 
}
.dropdown-menu.favor, 
.dropdown-menu.package {
    min-width: auto;
}

/* Product Styles */
.col-md-33 {
    width: 33.33%;
 }
 
.img-thumb {
    padding: 15px;
    height: 600px;
    position: relative;
}
.img-block {
    position: relative;
    background-color: #f8f8f8;
    border: 1px solid #f2f3f3;
}
.img-full.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    height: 100%;
}
.sale_tags {
    background-color: #dc4300;
    padding: 12px 20px;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
}
.inside_tags {
    background-color: #dc4300;
    padding: 12px 20px;
    color: white;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}
.num-spinner {
    width: 148px;
}
.input-spinner {
    text-align: center;
    height: 48px;
    box-shadow: inset 1px 2px 3px rgba(20%,20%,40%,0.5);
    margin: 0;
    padding: 0;
}
.btn-quantity {
    background-color: white;
    padding: 12px;
}
.quantity-add,
.quantity-remove {
    background-color: white;
    cursor: pointer;
}
.quantity-add.glyphicon, .quantity-remove.glyphicon {
    display: block;
    cursor: pointer;
}


/* Login Styles */
.misc-login {
    display: inline-block;
    width: 100%;
    height: 48px;
    text-align: center;
    margin: 0 auto;
    color: #898989;
    font-size: 0.875em;
}
.other-login-text {
    position: relative;
    background-color: white;
    padding: 6px 12px;
    top: -36px;
}
.btn-facebook {
    position: relative;
    color: #fff;
    background-color: #3b5998;
    border-color: rgba(0,0,0,0.2);
}
.btn-facebook:hover {
    color: #fff;
    background-color: #2d4373;
    border-color: rgba(0,0,0,0.2);
}
.fb-small-icon {
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: 0;
    padding: 6px 15px;
}

/* Shopping Cart Styles*/
table.cart-items > thead > tr > th,
table.cart-items > tbody > tr > td {
    vertical-align: middle;
    text-align: center;
    width: 12.5%;
    border: 0;
    color: #666666;
    margin: 5px;
}
table.cart-items.total > thead > tr > th,
table.cart-items.total > tbody > tr > td {
    width: 16%;
}
table.cart-items.total > thead > tr > th:first-child,
table.cart-items.total > thead > tr > th:last-child,
table.cart-items.total > tbody > tr > td:first-child,
table.cart-items.total > tbody > tr > td:last-child {
    width: 10%;
}
table.cart-items > thead > tr > th {
    background-color: #f2f2f3;
    height: 64px;
}
table.cart-items > tbody > tr > td {
    padding: 1.5rem 10px;
}
.quantity div {
    margin: 0 auto;
}
.item-img {
    max-width: 72px;
    max-height: 100px;
}
.remove-item {
    font-size: 1.5em;
}
.dot-line {
    border-bottom: 1px dashed #c0ab74;
}
.sum-row h4 {
    font-weight: normal;
}

.payment-title {
    text-align: right;
}

table.order-items > thead > tr > th,
table.order-items > tbody > tr > td {
    vertical-align: middle;
    text-align: center;
    width: 12.5%;
    border: 0;
    color: #666666;
    margin: 5px;
}
table.order-items > thead > tr > th {
    background-color: #f2f2f3;
    height: 64px;
}
table.order-items > tbody > tr {
    border-bottom: 1px dashed #c0ab74;
}
table.order-items > tbody > tr > td {
    padding: 3rem 10px;
}

/* Footer Styles */

footer.bg-footer {
    background-color: #c0ab74;
    padding: 2rem 0;
}
footer a {
    color: white;
}



/* Global Styles */
.form-horizontal label.control-label {
    font-weight: 400;
}


.p0 {
    padding: 0!important;
}
.p1 {
    padding: 0.25rem!important;
}
.p2 {
    padding: 0.5rem!important;
}
.p3 {
    padding: 1rem!important;
}
.p4 {
    padding: 1.5rem!important;
}
.m0 {
    margin: 0!important;
}
.pt-0, .py-0 {
    padding-top: 0!important;
}
.pb-0, .py-0 {
    padding-bottom: 0!important;
}
.pt-1, .py-1 {
    padding-top: .25rem!important;
}
.pb-1, .py-1 {
    padding-bottom: .25rem!important;
}
.pt-2, .py-2 {
    padding-top: 0.5rem!important;
}
.pb-2, .py-2 {
    padding-bottom: 0.5rem!important;
}
.pt-3, .py-3 {
    padding-top: 1rem!important;
}
.pb-3, .py-3 {
    padding-bottom: 1rem!important;
}
.pt-4, .py-4 {
    padding-top: 1.5rem!important;
}
.pb-4, .py-4 {
    padding-bottom: 1.5rem!important;
}
.pt-5, .py-5 {
    padding-top: 3rem!important;
}
.pb-5, .py-5 {
    padding-bottom: 3rem!important;
}

.mt-0, .my-0 {
    margin-top: 0!important;
}
.mb-0, .my-0 {
    margin-bottom: 0!important;
}
.mt-1, .my-1 {
    margin-top: 0.25rem!important;
}
.mb-1, .my-1 {
    margin-bottom: 0.25rem!important;
}
.mt-2, .my-2 {
    margin-top: 0.5rem!important;
}
.mb-2, .my-2 {
    margin-bottom: 0.5rem!important;
}
.mt-3, .my-3 {
    margin-top: 1rem!important;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}
.mt-4, .my-4 {
    margin-top: 1.5rem!important;
}
.mb-4, .my-4 {
    margin-bottom: 1.5rem!important;
}
.mt-5, .my-5 {
    margin-top: 3rem!important;
}
.mb-5, .my-5 {
    margin-bottom: 3rem!important;
}

.pl-0, .px-0 {
    padding-left: 0!important;
}
.pr-0, .px-0 {
    padding-right: 0!important;
}
.pl-1, .px-1 {
    padding-left: .25rem!important;
}
.pr-1, .px-1 {
    padding-right: .25rem!important;
}
.pl-2, .px-2 {
    padding-left: .5rem!important;
}
.pr-2, .px-2 {
    padding-right: .5rem!important;
}
.pl-3, .px-3 {
    padding-left: 1rem!important;
}
.pr-3, .px-3 {
    padding-right: 1rem!important;
}
.pl-4, .px-4 {
    padding-left: 1.5rem!important;
}
.pr-4, .px-4 {
    padding-right: 1.5rem!important;
}
.pl-5, .px-5 {
    padding-left: 3rem!important;
}
.pr-5, .px-5 {
    padding-right: 3rem!important;
}
.pl-9, .px-9 {
    padding-left: 4rem !important;
}
.pr-9, .px-9 {
    padding-right: 4rem !important;
}

.ml-1, .mx-1 {
    margin-left: .25rem!important;
}
.mr-1, .mx-1 {
    margin-right: .25rem!important;
}
.ml-2, .mx-2 {
    margin-left: .5rem!important;
}
.mr-2, .mx-2 {
    margin-right: .5rem!important;
}
.ml-3, .mx-3 {
    margin-left: 1rem!important;
}
.mr-3, .mx-3 {
    margin-right: 1rem!important;
}
.ml-4, .mx-4 {
    margin-left: 1.5rem!important;
}
.mr-4, .mx-4 {
    margin-right: 1.5rem!important;
}
.ml-5, .mx-5 {
    margin-left: 3rem!important;
}
.mr-5, .mx-5 {
    margin-right: 3rem!important;
}

.back-to-top {
    background-color: white;
    position: fixed;
    width: 66px;
    height: 66px;
    border: 1px solid #a5873a;
    border-radius: 50%;
    padding: 0;
    bottom: 25px;
    right: 20px;
    display: none;
}
.back-to-top:hover {
    color: #836929;
}
.back-to-top p {
    font-size: 0.875em;
    font-family: Verdana;
    font-weight: bold;
    line-height: initial;
    color: #a5873a;
    padding: 18px 0 0;
    margin: 0 0 -5px;
}
.back-to-top p:hover {
    color: #836929;
}
.back-to-top i {
    color: #a5873a;
}
.back-to-top i:hover {
    color: #836929;
}

.bg-lightwhite {
    background-color: #fcf9f5;
}
.bg-graywhite {
    background-color: #f1ece6;
}
.btn-red {
    background-color: #c80d0d;
}
.btn-main-color {
    background-color: #c9b789;
}
.bg-lightgray {
    background-color: #f0f0f0;
}

.text-justify {
    text-align: justify
}
.text-white {
    color: white;
}
.text-black {
    color: black;
}
.text-gray {
    color: #595757;
}
.text-red {
    color: #c80d0d;
}
.main-color {
    color: #a5873a;
}
.art_tr-color {
    color: #dc4300;
}

.position-relative {
    position: relative;
}

hr {
    border-top: 1px solid #c3c3c3;
}

.border-light {
    border: 1px solid #dedfe0;
}
.no-border {
    border: 0;
}

.page_line {
    border-top: 1px solid #9b8a5f;
}
.btn-circle {
    width: 32px;
    height: 32px;
    text-align: center;
    margin: 6px 20px;
    padding: 6px 0;
    border-radius: 50%;
    background-color: #ededed;
}
.btn-circlerounded {
    border-radius: 100px;
}
.rounded-5 {
    border-radius: 5px
}

.p-t14 {
    font-size: 0.875em; 
}
.ts-18 {
    font-size: 1.125em;
}
.d-inline-block {
    display: none;
}


/* Responsive Styles */
@media (min-width: 768px ) and (max-width: 1366px) {
    .navbar-default .navbar-nav>li>a {
        padding: 15px 3rem;
    }
    .bot-block {
        right: -500px;
    }
    .navbar-collapse .nav>li.dropdown.open .dropdown-menu {
        padding: 1rem 5% 2rem;
    } 
    .navbar-collapse .nav>li.dropdown.open .dropdown-menu li {
        display: inline-block;
        width: 20%;
        padding: 1.25rem .5rem;
        float: left;
    }
    .navbar-collapse .nav>li.user_li.dropdown.open .dropdown-menu li {
        display: inline-block;
        width: 100%;
        padding: 1.25rem .5rem;
        float: left;
    }
    .navbar-collapse .nav>li.dropdown.open .dropdown-menu>li>a {
        padding: 3px 0px;
    }
    
}
@media (min-width: 992px ) and (max-width: 1366px) {
    .navbar-default .navbar-nav>li>a {
        padding: 15px 3rem;
    }
    .bot-block {
        right: -700px;
    }
}
@media (min-width: 992px ) and (max-width: 1200px) {
    .img-thumb {
        height:530px;
    }
}
@media (min-width: 768px ) and (max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
    .navbar-default .navbar-nav>li>a {
        padding: 15px 1.3rem;
    }
    .bot-block {
        right: -500px;
    }
    .img-thumb {
        height:580px;
    }
    .payment-title,
    .form-horizontal label.control-label.payment-title {
        text-align: left;
    }
    footer.bg-footer {
        padding: 2rem 0.5rem;
    }
    footer .fb-icon {
        width: 60px;
        height: 60px;
    }
    .sm-px-0 {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}

@media (max-width: 767px) {
    .navbar-default .navbar-toggle {
        margin-top: 20px;
        margin-right: 30px;
        margin-bottom: 20px;
    }
    .navbar-brand{
        max-width: 120px;
        height: auto;
        padding: 0;
        margin: 10px 0 0 20px!important
    }
    header.carousel .carousel {
        height: 70%;
    }
    .carousel-control {
        position: absolute;
        width: 35px;
        height: 35px;
        top: 50%;
        margin-top: -17px;
        line-height: 35px;
        border-radius: 50%;
    }
    .nav {
        margin-top: 0;
    }
    .nav>li.prod_li.dropdown.open,
    .nav>li.user_li.dropdown.open {
        position: relative;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 1em;
    }
    .nav>li.prod_li.dropdown.open .dropdown-menu,
    .nav>li.user_li.dropdown.open .dropdown-menu {
        padding: 0;
    }
    .nav>li.prod_li.dropdown.open .dropdown-menu li,
    .nav>li.user_li.dropdown.open .dropdown-menu li {
        width: 100%;
    }
    .nav>li.dropdown.open .dropdown-menu {
        padding: 0;
    }
    .nav>li.dropdown.open .dropdown-menu li {
        width: 100%;
        padding: 0;
    }
    .nav>li.dropdown.open a.dropdown-item {
        margin: 15px 25px;
    }
    .nav>li.dropdown.open a.dropdown-item:hover:after {
        left: 49%;
    }
    body.page .carousel-img .carousel-control.left.act_left, 
    body.page .carousel-img .carousel-control.left.act_right {
        top: 35%;
    }
    .carousel-control i.glyphicon-chevron-left {
        margin-left: -10px;
        margin-top: -10px;
    }
    
    .carousel-control i.glyphicon-chevron-right {
        margin-right: -10px;
        margin-top: -10px;
    }
    .bot-block {
        position: initial;
        right: 0;
        top: 0;
    }
    .bot-block .navbar-form {
        padding: 10px 15px;
        display: inline-block;
    }
    .bot-block .input-group {
        margin-bottom: 15px;
    }
    .bot-block .input-group.d-inline-block {
        display: inline-block;
    }
    .img-thumb {
        height:480px;
    }
    .master-img{
        float: none;
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
    .master-title {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .comic_sec .comic_row .img-comic, 
    .contact_sec .comic_row .img-comic {
        top: -98px;
        height: 100px;
    }
    .date_message {
        font-size: 2em;
        margin: 15px 0 5px;
    }
    .monyear_message {
        font-size: 1.25em;
        display: inline-block;
        margin-bottom: 15px;
    }
    .title_message {
        font-size: 1.5em;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 15px!important;
    }

    /* act */
    .table-responsive {
        border: none;
        overflow: hidden;
    }

    table.cart-items > thead {
        display: none;
    }

    table.cart-items > thead > tr > th, 
    table.cart-items > tbody > tr > td,
    table.cart-items.total > thead > tr > th, 
    table.cart-items.total > tbody > tr > td  {
        vertical-align: middle;
        text-align: center;
        display: inline-block;
        width: 100%;
        border: 0;
        color: #666666;
        padding: 0.5rem 0;
        margin: 0;
        font-size: 1.313em;
    }

    table.cart-items > tbody > tr > td.quantity {
        padding: 20px;
        margin: 0;
    }

    table.cart-items.total > tbody > tr > td.quantity {
        padding: 5px;
        margin: 0;
    }

    table.cart-items .cart-item {
        border: 1px solid #ddd;
        border-radius: 15px;
        display: inline-block;
        margin-bottom: 30px;
    }

    table.cart-items .item-img {
        max-width: initial;
        max-height: initial;
    }
    table.cart-items tr td:first-child,
    table.cart-items tr td:last-child {
        display: none;
    }
    table.cart-items tbody tr.cart-item {
        position: relative;
    }
    table.cart-items tr td.remove {
        position: absolute;
        right: 0;
        z-index: 999;
        background-color: rgba(0,0,0,0.35);
        padding: 0;
        top: 0;
        margin: 0;
        color: white;
        border-radius: 15px;
        width: 60px;
        height: 60px;
    }
    table.cart-items tr td.remove .remove-item:hover {
        color: red;
    }

    .w-80 {
        width: 80px;
        display: inline-block;
    }

    footer.bg-footer {
        background-color: #c0ab74;
        padding: 2rem 0.5rem;
    }
    footer .credit_txt {
        font-size: 0.75em; 
        text-align: center;
    }
    .fb-icon {
        width: 60px;
        height: 60px;
    }
    .m-oneline {
		display: inline-block;
		width: 100%;
        line-height: 27px;
        text-align: center;
	}
	.m-none, 
	.navbar-brand .d-show {
		display: none;
    }

    .carousel a.left span{
        left: 50%;
        margin-left: -10px;
    } 
    .carousel a.right span{
        right: 50%;
        left: 0;
        margin-left: -20px;
    }

    .num-spinner {
        width: 100%;
    }
    .payment-title {
        text-align: left;
    }

    .d-inline {
        display: inline-block;
        width: 100%;
        margin-left: 10px;
    }
    .d-inline-block {
        display: inline-block;
        margin-left: 10px;
    }
    .d-text-left {
        text-align: left!important;
    }
    .d-text-center {
        text-align: center!important;
    }
    .d-text-right {
        text-align: right!important;
    }
    .d-p-t14 {
        font-size: 0.875em;
    }
    .d-px-15 {
        padding-left: 15px!important;
        padding-right:  15px!important;
    }
    .d-p0 {
        padding: 0!important;
    }
    .d-p1 {
        padding: 0.25rem!important;
    }
    .d-p2 {
        padding: 0.5rem!important;
    }
    .d-p3 {
        padding: 1rem!important;
    }
    .d-p4 {
        padding: 1.5rem!important;
    }
    .d-m0 {
        margin: 0!important;
    }
    .d-m1 {
        margin: 0.25rem!important;
    }
    .d-m2 {
        margin: 0.5rem!important;
    }
    .d-m3 {
        margin: 1rem!important;
    }
    .d-m4 {
        margin: 1.5rem!important;
    }
    .d-pt-0, .d-py-0 {
        padding-top: 0!important;
    }
    .d-pb-0, .d-py-0 {
        padding-bottom: 0!important;
    }
    .d-pt-1, .d-py-1 {
        padding-top: .25rem!important;
    }
    .d-pb-1, .d-py-1 {
        padding-bottom: .25rem!important;
    }
    .d-pt-2, .d-py-2 {
        padding-top: 0.5rem!important;
    }
    .pb-2, .d-py-2 {
        padding-bottom: 0.5rem!important;
    }
    .d-pt-3, .d-py-3 {
        padding-top: 1rem!important;
    }
    .d-pb-3, .d-py-3 {
        padding-bottom: 1rem!important;
    }
    .d-pt-4, .d-py-4 {
        padding-top: 1.5rem!important;
    }
    .d-pb-4, .d-py-4 {
        padding-bottom: 1.5rem!important;
    }
    .d-pt-5, .d-py-5 {
        padding-top: 3rem!important;
    }
    .d-pb-5, .d-py-5 {
        padding-bottom: 3rem!important;
    }

    .d-mt-0, .d-my-0 {
        margin-top: 0!important;
    }
    .d-mb-0, .d-my-0 {
        margin-bottom: 0!important;
    }
    .d-mt-1, .d-my-1 {
        margin-top: 0.25rem!important;
    }
    .d-mb-1, .d-my-1 {
        margin-bottom: 0.25rem!important;
    }
    .d-mt-2, .d-my-2 {
        margin-top: 0.5rem!important;
    }
    .d-mb-2, .d-my-2 {
        margin-bottom: 0.5rem!important;
    }
    .d-mt-3, .d-my-3 {
        margin-top: 1rem!important;
    }
    .d-mb-3, .d-my-3 {
        margin-bottom: 1rem!important;
    }
    .d-mt-4, .d-my-4 {
        margin-top: 1.5rem!important;
    }
    .d-mb-4, .d-my-4 {
        margin-bottom: 1.5rem!important;
    }
    .d-mt-5, .d-my-5 {
        margin-top: 3rem!important;
    }
    .d-mb-5, .d-my-5 {
        margin-bottom: 3rem!important;
    }
    

    .d-pl-0, .d-px-0 {
        padding-left: 0!important;
    }
    .d-pr-0, .d-px-0 {
        padding-right: 0!important;
    }
    .d-pl-1, .d-px-1 {
        padding-left: .25rem!important;
    }
    .d-pr-1, .d-px-1 {
        padding-right: .25rem!important;
    }
    .d-pl-2, .d-px-2 {
        padding-left: .5rem!important;
    }
    .d-pr-2, .d-px-2 {
        padding-right: .5rem!important;
    }
    .d-pl-3, .d-px-3 {
        padding-left: 1rem!important;
    }
    .d-pr-3, .d-px-3 {
        padding-right: 1rem!important;
    }
    .d-pl-4, .d-px-4 {
        padding-left: 1.5rem!important;
    }
    .d-pr-4, .d-px-4 {
        padding-right: 1.5rem!important;
    }
    .d-pl-5, .d-px-5 {
        padding-left: 3rem!important;
    }
    .d-pr-5, .d-px-5 {
        padding-right: 3rem!important;
    }
    .d-pl-9, .d-px-9 {
        padding-left: 4rem !important;
    }
    .d-pr-9, .d-px-9 {
        padding-right: 4rem !important;
    }
    
    .d-ml-0, .d-mx-0 {
        margin-left: 0!important;
    }
    .d-mr-0, .d-mx-0 {
        margin-right: 0!important;
    }
    .d-ml-1, .d-mx-1 {
        margin-left: .25rem!important;
    }
    .d-mr-1, .d-mx-1 {
        margin-right: .25rem!important;
    }
    .d-ml-2, .d-mx-2 {
        margin-left: .5rem!important;
    }
    .d-mr-2, .d-mx-2 {
        margin-right: .5rem!important;
    }
    .d-ml-3, .d-mx-3 {
        margin-left: 1rem!important;
    }
    .d-mr-3, .d-mx-3 {
        margin-right: 1rem!important;
    }
    .d-ml-4, .d-mx-4 {
        margin-left: 1.5rem!important;
    }
    .d-mr-4, .d-mx-4 {
        margin-right: 1.5rem!important;
    }
    .d-ml-5, .d-mx-5 {
        margin-left: 3rem!important;
    }
    .d-mr-5, .d-mx-5 {
        margin-right: 3rem!important;
    }

    .d-btn-block {
        display: inline-block;
        width: 100%;
    }

}

@media only screen and (max-width: 992px) {
    .carousel .item .col-xs-12:nth-last-child(-n+1) {
       display: none;
    }
 }
 
 @media all and (min-width: 768px) {
    .carousel-img .carousel-inner > .active.left,
    .carousel-img .carousel-inner > .prev {
       left: -50%;
    }
    .carousel-img .carousel-inner > .active.right,
    .carousel-img .carousel-inner > .next {
       left: 50%;
    }
    .carousel-img .carousel-inner > .left,
    .carousel-img .carousel-inner > .prev.right,
    .carousel-img .carousel-inner > .active {
       left: 0;
    }
    .carousel-img .carousel-inner .cloneditem-1 {
       display: block;
    }
 }
 
 @media all and (min-width: 768px) and (transform-3d),
 all and (min-width: 768px) and (-webkit-transform-3d) {
    .carousel-img .carousel-inner > .item.active.right,
    .carousel-img .carousel-inner > .item.next {
       -webkit-transform: translate3d(50%, 0, 0);
       transform: translate3d(50%, 0, 0);
       left: 0;
    }
    .carousel-img .carousel-inner > .item.active.left,
    .carousel-img .carousel-inner > .item.prev {
       -webkit-transform: translate3d(-50%, 0, 0);
       transform: translate3d(-50%, 0, 0);
       left: 0;
    }
    .carousel-img .carousel-inner > .item.left,
    .carousel-img .carousel-inner > .item.prev.right,
    .carousel-img .carousel-inner > .item.active {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       left: 0;
    }
 }
 
 @media all and (min-width: 992px) {
    .carousel-img .carousel-inner > .active.left,
    .carousel-img .carousel-inner > .prev {
       left: -33.33%;
    }
    .carousel-img .carousel-inner > .active.right,
    .carousel-img .carousel-inner > .next {
       left: 33.33%;
    }
    .carousel-img .carousel-inner > .left,
    .carousel-img .carousel-inner > .prev.right,
    .carousel-img .carousel-inner > .active {
       left: 0;
    }
    .carousel-img .carousel-inner .cloneditem-2 {
       display: block;
    }
 }
 
 @media all and (min-width: 992px) and (transform-3d),
 all and (min-width: 992px) and (-webkit-transform-3d) {
    .carousel-img .carousel-inner > .item.active.right,
    .carousel-img .carousel-inner > .item.next {
       -webkit-transform: translate3d(33.33%, 0, 0);
       transform: translate3d(33.33%, 0, 0);
       left: 0;
    }
    .carousel-img .carousel-inner > .item.active.left,
    .carousel-img .carousel-inner > .item.prev {
       -webkit-transform: translate3d(-33.33%, 0, 0);
       transform: translate3d(-33.33%, 0, 0);
       left: 0;
    }
    .carousel-img .carousel-inner > .item.left,
    .carousel-img .carousel-inner > .item.prev.right,
    .carousel-img .carousel-inner > .item.active {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       left: 0;
    }
 }