/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

.mainbanner::before {display: block; content: ""; background: rgba(0,0,0,0.5); position: absolute; left: 0;	top: 0; right: 0; bottom: 0; z-index: 1;}
.mainbanner .flickity-viewport {z-index: 9;}
.font-weight-bold {font-weight: 700 !important;}
.font-weight-bolder {font-weight: bolder !important;}
.font-weight-semi-bold {font-weight: 600 !important;}
.font-weight-normal {font-weight: 400 !important;}
.font-weight-light {font-weight: 300 !important;}

@media (min-width: 768px){
.product-detail .prodict-layer-col {width: 28%;}
.product-detail .prodict-info-col {width: 72%;}
}
footer#footer .heading-text h4::before {bottom: -25px;}
.footer_text {line-height: 1.5;}
.text-dark-light {color: #4f4f4f !important;}
.line-hight{line-height: normal;}

@media screen and (max-width: 767px) {
.container {padding: 0 15px !important;}
}

@media screen and (max-width: 480px) {
body .grid li {padding: 24px;}
}

.text-capital{ text-transform: uppercase;}







