﻿
.hdMZ {padding:20px 0; font-family:'utmavo'; }
.hdMZ .mztitle {font-size: 24px; font-weight: 500; color: #c23030; text-align: center; padding: 20px 0 20px; text-transform: uppercase;} 
.hdMZ .mzCats {text-align:center}
.hdMZ_ {padding:20px 0; font-family:'utmavo'; }
.hdMZ_ .mztitle {float:left; font-size: 24px; font-weight: 500; color: #c23030; text-align: center; padding:0px; text-transform: uppercase;} 
.hdMZ_ .mzCats {text-align:center; float:right; padding: 12px 0 0;}

.mzCats a{padding: 0 10px 0px; margin:0 0 10px; border-bottom:1px solid transparent; display:inline-block; text-align: center; font-size: 18px; font-weight: 400; text-transform: uppercase;  color: #000;}
.mzCats a:hover, .mzCats a.focus{border-bottom:1px solid #ccc}
@media screen and (max-width: 600px) {
    .hdMZ_ .mztitle, .hdMZ_ .mzCats{width:100%; padding:0 0 20px}
}
.mzwrap {padding:20px 0}


.boxCol { border: 1px solid #ddd;  border-radius: 3px;    overflow: hidden;    height: 100%;}
.cartcap {  padding: 8px 10px;    background: #f8f8f8;    border-bottom: 1px solid #ddd;    font-size: 16px;    font-weight: 500;}
.cartcap .ico{      color: #c23030;    font-size: 20px;    padding: 0 5px 0 0;}


.divCart {}
.divOrder, .divOrder:hover{background: #c23030; cursor:pointer; text-transform:uppercase}
.divOrder span{text-transform:uppercase}

.divtotal {text-align:right}
.divtotal span{color:#c23030}

.divCart .item{overflow:hidden; padding:15px 0; border-bottom:1px solid #eaeaea; display:block}
.divCart .item .cImg{width:15%; float:left; max-width:100px; padding: 0 5px;}
.divCart .item .cImg img{width:100%;}
.divCart .item .name{ line-height:150%}
.divCart .item .cInfo{float:left; padding: 5px 10px;width:30%;text-align:left}
.divCart .item .size{}
.divCart .item .color{}
.divCart .item .cQuantity {float:left;padding: 5px 10px;text-align:center;width:20%; min-width:36px}
.divCart .item .cQuantity .fa{padding:2px 5px; cursor:pointer}
.divCart .item .cTotal {float:left;padding: 5px 10px;text-align:center;width:20%;}
.divCart .item .cPrice {float:left;padding: 5px 10px;text-align:center;width:15%;}
.divCart .item .cQuantity div, .divCart .item .cPrice div, .divCart .item .cTotal div{padding: 0 0 10px; font-weight:bold}

@media screen and (max-width: 600px) {
    .divCart .item .cImg, .divCart .item .cPrice{display:none;}
    .divCart .item .cInfo {width:40%;}
    .divCart .item .cQuantity {width:30%;}
    .divCart .item .cTotal {width:30%;}
}

.CartSticky{display:none !important}
.divCart .item .cQuantity .remove{padding:10px 0 5px}

.divMember {text-align:left; padding:15px}
.divMember .form-group{overflow:hidden}
.divMember div input{min-width :200px}
.divMember div input#address, .divMember div input#note{}

.divMember .form-group label { text-align:right; padding:0 10px 0 0;   display: inline-block;    margin: .5rem 0 0;    float: left;    width: 25%;    font-weight: 500;}
.divMember .form-group .form-control{width:75% !important; float:left}
.divMember .form-group div.form-control{height:auto !important;    border: none;}

.boxABC{display: -ms-flexbox;    display: flex;    -ms-flex-wrap: wrap;    flex-wrap: wrap; padding:0 20px; background:#f1f1f1}
.boxABC .divOrderNum{-ms-flex: 0 0 20%;  flex: 0 0 20%;    max-width: 20%; text-align:center; padding:30px 10px 0 }
.Company {display: -ms-flexbox;    display: flex;    -ms-flex-wrap: wrap;    flex-wrap: wrap; text-align:left; padding:20px; -ms-flex: 0 0 80%;  flex: 0 0 80%;    max-width: 80%;} 
.Company .img{-ms-flex: 0 0 30%;  flex: 0 0 30%;    max-width: 210px; padding:0 20px 10px 0}
.Company .img img{width:100%}
.Company .info{-ms-flex: 0 0 70%;  flex: 0 0 70%;    max-width: 70%;}
.Company .info .name{font-size:20px; font-weight:bold; color:#000; text-transform:uppercase; }
.Company .info .Email{}
.Company .info .Mobile{}
.Company .Address {width:100%; padding:10px 0 5px; line-height:150%}
.Company .Address div{padding:0 0 2px}

@media screen and (max-width: 576px) {
   .Company, .boxABC .divOrderNum{-ms-flex: 0 0 100%;  flex: 0 0 100%;    max-width: 100%; text-align:left;}
   .boxABC .divOrderNum{    padding: 0px 10px 20px;}
}

/* ------checkbox----------*/
.divCheckbox {font-size:14px;  display: block; text-align:left;  position: relative;  padding-left: 35px;  margin-bottom: 3px;  cursor: pointer;  font-weight:normal;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;text-align:left;  user-select: none;}
.divCheckbox input {  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0;}
.checkmark {  position: absolute;  top: 0;  left: 0;  height: 18px;  width: 18px;  background-color: #ccc;border: 1px solid #bbb;}
.divCheckbox:hover input ~ .checkmark {  background-color: #ccc;}
.container input:checked ~ .checkmark {  background-color: #4a8ecc;}
.checkmark:after {  content: "";  position: absolute;  display: none;}
.divCheckbox input:checked ~ .checkmark:after {  display: block;}
.divCheckbox .checkmark:after { left: 6px;   top: 4px;    width: 5px;    height: 9px; border: solid white;  border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg);}
