i{vertical-align: middle;}
#nav{min-height: 322px;background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("/img/banner.jpg");background-size: cover;}
button:focus, button:active{border: none;outline: none !important;}
#top-nav .left .tag{background-color: #2196F3;}
#top-nav a{line-height: 56px;}
#fields .field i{color: #333;background-color: #fff;line-height: 32px;border-radius: 5px 0 0 5px;float: left;padding:  0 5px;font-size: 22px;}
#fields{position: relative;margin-top: 60px;text-align: center;}
#fields .field{display: inline-block;vertical-align: -webkit-baseline-middle;}
#fields .field input[type="text"]{line-height: 30px;border-radius: 0 5px 5px 0;float: left;}
button{border: none;vertical-align: -webkit-baseline-middle;}
input[name='brand']{width: 400px;}
#fields .tag{background-color: #CB202D;}
#fields .field{vertical-align: -webkit-baseline-middle;vertical-align: -moz-middle-with-baseline;}
#login{background-color: #099E44;}
.card img{width: 100%;}
.page-topic{margin-top: 50px;color: #eee;text-align: center;font-size: 34px;text-shadow: -2px 2px 3px rgba(0,0,0,0.3);}
.section-title{font-size: 22px;padding: 7px 3px;}
#section-1{background-color: #fff;margin-top: 20px;margin-bottom: 20px;padding:  12px 16px;border: 1px solid #eee;}
.post-review-title{font-size: 23px;text-align: center;margin: 8px 0;}
#section-1 .about-mall{color: #777;}
#section-2{background-color: #fff;margin-top: 20px;margin-bottom: 20px;padding:  12px 16px;border: 1px solid #eee;}
#section-2 .rating i{display: inline;}
#section-2 .content{padding: 4px;}
#section-2 .content .mall-name{font-size: 15px;font-weight: 600;}
#section-2 .content .mall-address{font-size: 11px;font-weight: 0;color:  #777;text-align: justify;}
#section-2 .img{padding: 22px  42px 19px 42px;}
#section-3{background-color: #fff;margin-top: 20px;margin-bottom: 20px;padding:  12px 16px;border: 1px solid #eee;}
#section-3 .rating i{display: inline;}
#section-3 .content{padding: 4px;}
#section-3 .content .mall-name{font-size: 15px;font-weight: 600;}
#section-3 .content .mall-address{font-size: 11px;font-weight: 0;color:  #777;text-align: justify;}
#section-3 .offer{font-size: 11px;color: #666;}
#section-parking{background-color: #fff;margin-top: 20px;margin-bottom: 20px;padding:  12px 16px;border: 1px solid #eee;}
.breadcrumb{margin-bottom: 0px;margin-top: 20px;background-color: #fff;border: 1px solid #eee;}
.jq-ry-container{margin: 0 auto 5px auto;}
#section-4{background-color: #fff;margin-top: 20px;margin-bottom: 20px;padding:  12px 16px;border: 1px solid #eee;}
#section-4 .img{width: 40%;}
#section-4 .content{width: 60%;padding: 4px;}
#section-4 .shop-name{font-size: 15px;font-weight: 600;}
#section-4 .mall-name, #section-2 .mall-floor{font-size: 12px;color: #666;max-height: 19px;overflow-y: hidden;}
#section-4:nth-child(2n){margin-bottom: 5px;}
#section-4 .card:nth-child(2n+1){margin-bottom: 10px;}
#section-4 .card:nth-child(2n+2){margin-bottom: 10px;}
#section-4 .card:nth-child(2n+3){margin-bottom: 0;}
#section-4 .card:nth-child(2n+4){margin-bottom: 0;}
#section-4 .mall-floor{font-size: 12px;color: #f6f6f6;}
div.fill{margin: 8px 0;}
#section-parking .rate-name{width: 86px;}
#section-parking .rate-name{font-size: 12px;line-height: 20px;text-align: center;color: #555;}
#section-parking .rate-value{font-size: 14px;line-height: 56px;}
#section-parking .rate{padding: 4px 0;}
.modal-body img{width: 72px;}
#section-5{background-color: #fff;margin-top: 20px;margin-bottom: 20px;padding:  12px 16px;border: 1px solid #eee;}
#section-5 .rating i{display: inline;}
#section-5 .content{padding: 4px;padding: 0 17px;text-align: center;width:  calc(100% - 30px);}
#section-5 .content .mall-name{font-size: 15px;font-weight: 600;}
#section-5 .content .mall-address{font-size: 11px;font-weight: 0;color:  #777;text-align: justify;}
#section-5 .img{padding: 12px;}
#section-5 .event-time{text-align: right;font-size: 11px;color: #666;}


#section-6{background-color: #fff;margin-top: 20px;margin-bottom: 20px;padding:  12px 16px;border: 1px solid #eee;}
#section-6 .row .img{padding: 15px;padding-bottom: 7px;}
#section-6 .row img{width: 100%;}
.cat{border: 1px solid transparent;transition: 300ms;border-radius: 5px;cursor: pointer;}
.cat:hover{border: 1px solid #999;}
#section-6 .category-name{font-size: 12px;text-align: center;font-weight: 600;padding-bottom: 8px;}


#section-review{background-color: #fff;margin-top: 20px;border: 1px solid #eee;padding: 12px 16px 0px 16px;}

#b-rate p{display: inline;font-size: 18px;}
 #b-rate i{display: inline;font-size: 23px;vertical-align: top;}
#b-rate{text-align: center;padding: 0 21px;width: 88px;margin: 0 auto;}
#rate-num{text-align: -webkit-center;}



.rate-value, .rate-graph, .rate-number{float: left;}
∑.rate-value{margin-right: 8px;}
.rate-number{margin-left: 8px;}
.rate-value p, .rate-value i{display: -webkit-inline-box;color: #333;}
.rate-value i, .rate-number{line-height: 21px;}
.rate-value i{width: 16px;color: #333;font-size: 16px;vertical-align: bottom;}
.rate-graph{line-height: 4px;margin: 8px 0;transition: 1000ms 500ms ease;}
.rate-graph:nth-child(1n){width: 140px;}
.rate-graph:nth-child(2n){width: 0px;}
#rate-num{padding: 28.2px 0;}
#graph_5{background-color: green;}
#graph_4{background-color: green;}
#graph_3{background-color: green;}
#graph_2{background-color: green;}
#graph_1{background-color: green;}
#blank_5{background-color: #ccc;}
#blank_4{background-color: #ccc;}
#blank_3{background-color: #ccc;}
#blank_2{background-color: #ccc;}
#blank_1{background-color: #ccc;}
.ratings-graph{padding: 9px 0;}
#rate, #review{font-size: 12px;color: #666;}

.modal-body input[type="radio"]{display: none;}
.modal-body input#parking-yes[type="radio"]:checked + label{background-color: #91dc5a;color:#fefefe;}
.modal-body input#parking-no[type="radio"]:checked + label{background-color: #d80027;color:#fefefe;}
.modal-body input#parking-not-sure[type="radio"]:checked + label{background-color: #ffda44;color:#fefefe;}
.modal-body label{padding: 5px;margin: 14px 5px;border-radius: 5px;cursor: pointer;}
.section-comments{padding: 20px 5px;border-bottom: 1px solid #eee;}
.section-comments:last-child{padding: 20px 5px;border-bottom: 1px solid transparent;}
#section-review .row{border-bottom: 1px solid #eee;padding-bottom: 12px;}
#section-review .modal-body .row{border-bottom: 0px solid #eee;padding-bottom: 12px;}
.section-comments .img{width: 25px;float: left;}
.section-comments .comment-name{float: left;padding-left: 10px;}
.section-comments .comment-name p{line-height: 25px;font-weight: 600;}

.section-comments img{width: 100%;}
.comment-content{padding: 12px;padding: 9px;}
.comment-content p{font-size: 12px;color: #666;}
.comment-time{text-align: right;color: #777;font-size: 12px;}

#section-related{background-color: #fff;margin-top: 20px;border: 1px solid #eee;padding: 12px 16px;}
#section-related .rating i{display: inline;}
#section-related .content{padding: 4px;}
#section-related .content .mall-name{font-size: 15px;font-weight: 600;}
#section-related .content .mall-address{font-size: 11px;font-weight: 0;color:  #777;text-align: justify;}
#section-parking #fill_2{background-color: #d80027;}
#section-parking #fill_1{background-color: #ffda44;}
#section-parking .fill, #section-parking .blank{line-height: 40px;}

#post-review{text-align: center;}
.modal-body #post-review{padding: 10px 20px;}
#post-review button{background-color: #2196F3;padding: 6px 8px;margin: 5px 0;color: #fff;}

#more-nav #fields{float: left;}
@media only screen and (min-width: 1200px){
    #more-nav #fields{width: calc(100% - 262px);}
}

@media only screen and (min-width: 992px){
    #search-parts{display: none;}
}

@media only screen and (max-width: 600px){
    #fields{margin-top: 40px;}
    .field button{margin-top: 20px;}
    body{width: 100vw;overflow-x: hidden;}
    #fields .field input[type="text"]{width: calc(100% - 32px);}
    #fields .field{display: block;margin-top: 20px;}
    #fields .field{margin-top: 0;}
    #fields .field button{width: 100%;margin-bottom: 12px;}
    #fields{padding: 0 22px;}
    #section-4 .card:nth-child(2n+3){margin-bottom: 10px;}
}

@media only screen and (max-width: 320px){
    #section-6 .row .img{padding: 7px;}
}
/* For bar graph */
#rate{width: 100%;margin: 14px auto;}
.rate{width: 100%;}
.rate i, .rate p, .rate .fill, .rate .blank{float: left;}
.rate p{font-size: 13px;margin-right: 2px;}
.rate i{font-size: 14px;margin-right: 4px;}
#rate .field .fill, .field .blank{margin: 8px 0;}
#rate .field{width: calc(100% - 66px);float: left;}
.rate-value{margin-left: 6px;}
.fill, .blank{line-height: 4px;}
.fill{background-color: #91dc5a;width: 0;transition: 400ms;}
.blank{background-color: #ccc;width: 100%;transition: 400ms;}
#fill_1{width: 0%;transition: 500ms;}
.event-time-cont{background-color: rgba(0,0,0,0.5);}


.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -25.00%; }
.onebyone-carosel .active.right { left: 25.00%; }
.onebyone-carosel .next { left: 25.00%; }
.onebyone-carosel .prev { left: -25.00%; }
#section-5 .event-time-cont{position: absolute;bottom: 20px;width: calc(100% - 54px);margin: 0 12px;padding: 4px 17px;bottom: 32px;}
#section-5 .content p{color: #f6f6f6;}
#section-5 .img{padding: 0;background-color: rgba(156, 39, 176, 1);}
#section-5 .img img{opacity: 0.8;transition: 250ms;}
#section-5 .event-title{width: 100%;transition: 250ms;z-index: 2;}
#section-5 .event-title .mall-name{text-shadow: 0px 0px 4px 0 rgba(0,0,0,0.8);font-size: 16px;transition: 250ms;color: #333;line-height: 20px;text-align: center;}
#section-5 .img{margin: 12px;background-color: rgba(156, 39, 176, 1);}
#section-5 .card:hover .img img{opacity: 0.3;}
#section-5 .card:hover .event-title{}
#section-5 .card{transform: scale(1);transition: 250ms;}
#section-5 .card:hover{transform: scale(1.05);} 
#section-5 .event-cont{opacity: 0;transition: 250ms;font-size: 14px;width: calc(100% - 30px);position: absolute;top: 20px;color: #fff;}
#section-5 .card:hover .event-cont{opacity: 1;}
#section-3 .fluid-container .row{height: 222px;overflow: hidden;}
#next-events, #prev-events, #next-deals, #prev-deals{background-color: transparent;transition: 200ms;}
#next-events:hover, #prev-events:hover{padding: 4px 8px;background-color: #841f27;border-radius: 5px;color: #f6f6f6;}
#next-deals:hover, #prev-deals:hover{padding: 4px 8px;background-color: #841f27;border-radius: 5px;color: #f6f6f6;}