.container { width: 100%;  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}
.hr-row { display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  margin-right: -15px;  margin-left: -15px;}
.hr-col-auto,.hr-col-1,.hr-col-2,.hr-col-3,.hr-col-4,.hr-col-5,.hr-col-6,.hr-col-7,.hr-col-8,.hr-col-9,.hr-col-10,.hr-col-11,.hr-col-12{ position: relative; width: 100%;  padding-right: 15px; padding-left: 15px;}
.hr-col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1;  max-width: 100%;}
/*utilities class*/
.pt-0{padding-top:0 !important;}
.pt-10{padding-top:10px !important;}
.pt-20{padding-top:20px !important;}
.pt-30{padding-top:30px !important;}
.pt-40{padding-top:40px !important;}
.pb-65{padding-bottom: 65px !important;}
.pb-40{padding-bottom: 40px !important;}
.pb-30{padding-bottom: 30px !important;}
.pb-20{padding-bottom: 20px !important;}
.pb-10{padding-bottom: 10px !important;}
/* end utilites classes*/

@media (min-width: 768px) {
  .container { max-width: 100%; }
  .hr-col-auto {flex: 0 0 auto; width: auto;  max-width: 100%;}
  .hr-col-1 { flex: 0 0 8.333333%;  max-width: 8.333333%;}
  .hr-col-2 {flex: 0 0 16.666667%; max-width: 16.666667%;}
  .hr-col-3 { flex: 0 0 25%;  max-width: 25%;}
  .hr-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%;}
  .hr-col-5 { flex: 0 0 41.666667%;  max-width: 41.666667%;}
  .hr-col-6 { flex: 0 0 50%; max-width: 50%;}
  .hr-col-7 { flex: 0 0 58.333333%;  max-width: 58.333333%;}
  .hr-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%;}
  .hr-col-9 { flex: 0 0 75%; max-width: 75%;}
  .hr-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%;}
  .hr-col-11 { flex: 0 0 91.666667%;  max-width: 91.666667%;}
  .hr-col-12 { flex: 0 0 100%;  max-width: 100%;}
}

@media (min-width: 992px) {
  .container { max-width: 92%;}
}

@media (min-width: 1200px) {
  .container { max-width:92%;}
}


@media only screen and (min-width: 1501px)
{
 .container { max-width:1354px;}
}

@media only screen and (max-width: 991px)
{
  .container{padding: 0 30px;}
}

@media only screen and (max-width:500px)
{
  .container{padding: 0 15px;}
}

/*Multi usable modal*/
.modal{opacity: 0;visibility: hidden; display: flex; pointer-events: none;  position: fixed; top: 0; left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  z-index: 1000; justify-content: center; flex-wrap: wrap; overflow-y: auto;
animation: fadeIn 0.35s ease;}
.Mdl_Cntr{display: flex; width: 100%; justify-content: center; align-items: center; overflow-y: auto;  flex-wrap: wrap;}
.modal.active{display: flex; opacity: 1; visibility: visible; pointer-events: all;}
.modal-content{background: #fff; padding: 60px 75px 40px; transition:all 0.35s; border-radius: 8px;width: 90%;max-width: 850px; transform: translateY(35px); text-align: center; position: relative; animation: fadeIn 0.35s ease; margin: 25px 0; align-self: center;}
.modal-close {position: absolute; top: 15px;  right: 15px;  font-size: 20px; font-weight: bold; cursor: pointer; line-height: 1; }
.modal_cls_img{width: 20px; height: 20px;}
body.modalopen{position: relative; overflow: hidden;}
.modal.active .modal-content{transform: translateY(0);}
  @keyframes fadeIn {
    from {opacity: 0;}
    to { opacity: 1;}
  }

  @media only screen and (max-width:991px)
  {
    .modal-content{padding: 30px 40px 30px;}
    .modal_cls_img{width: 15px; height: 15px;}
    .modal-close{top:15px; right: 15px;}
  }


/*Top strip*/
.headefixbox{width:100%; background:var(--themeColor); position:relative; z-index:1;float: left; display:none; clear: both;  height: 20px;}
.headefixbox.show{height: 40px;}
.fixtoptext{margin:0; width:100%; color:#fff; font-size:16px; text-align:center; line-height:20px; padding:10px 5px 10px; float: left;}
.fixtoptext p{margin: 0; font-size: 14px; font-weight: 500; color: var(--white);}
.fixtoptext a{color:#fff; text-decoration:none; border-bottom:#008000 1px solid;}
.fixtoptextcolor{ padding:0 25px; float:left; width:100%; line-height:none;}
.fixclosed{position:absolute; top:50%; transform: translateY(-50%); right:7px; width: 20px; height: 20px; cursor:pointer;}
.fixclosed::before{content: ''; display: block; position: relative; width: 20px; height: 1px; background-color: var(--white); transform: rotate(45deg);
top: 9px;}
.fixclosed::after{content: ''; display: block; position: relative; width: 20px; height: 1px; background-color: var(--white); transform: rotate(-45deg);
top: 8px;}
.headefixbox.show ~ .Hd_main.noticegap{margin-top: 39px;}

@media only screen and (max-width:991px)
{
  .fixtoptext{padding:5px 25px 5px 10px; margin: 0; display: flex; justify-content: center; align-items: center; height: 40px;}
  .fixtoptext p{font-size: 12px; line-height: 16px;}
  .headefixbox.show ~ .Hd_main.noticegap{margin-top: 50px;}
  .fixclosed{top:48%; width: 15px; height: 15px;}
  .fixclosed::before,.fixclosed::after{width: 15px;}
}
/*end top strip*/

.Prd_cmpare_modals{width: 100%; position: fixed; background-color: var(--white); z-index: 40; bottom: 0; left: 0; border-top: solid 1px var(--lightborder);}
.Prd_cmpare_modlmn{width: 100%; display: flex; justify-content: center; flex-wrap: wrap;}
.Prd_cmpare_modal_arrow{width: 100%; clear: both; justify-content: center; display: flex;}
.Prd_cmpare_mdlarrow{width: 50px; display: inline-flex; justify-content: center; cursor: pointer; margin: 10px 0 0; height: 15px;}
.cmpare_arrow_down{width: 15px; height: 15px; filter: brightness(0%); opacity: 0.8;}
.Prd_cmpare_modaltitle{font-size: 16px; font-weight:600; color: var(--basecolor); line-height: 1.33; width: 100%; text-align: center; display: none; padding: 0 0 5px;}
.Prd_cmpare_modalmain{display: block; transition:height 0.35s; overflow: hidden; position: relative;}
.Prd_cmpare_modaltop{width: 100%; display: flex; justify-content: space-between; grid-gap: 0 25px;}
.Prd_cmpare_modalhead{font-size: 16px; font-weight: 500; color: var(--basecolor); line-height: 1.33;}
.Prd_cmpare_modalremove {font-size: 14px; font-weight:400; color: var(--primaryColor);  display: inline-flex;   border-bottom: solid 1px var(--primaryColor);   line-height: 18px;    align-self: end;
    cursor: pointer;}
 .cmpare_item_limitmsg{width: 100%; text-align: center; padding: 0 0 20px;}   
 .cmpare_item_limitmn{display: inline-flex;   background: #E1EBE4;  padding: 10px 15px 10px;  border-radius: 0;  font-size: 14px;  width: 100%; max-width: 540px;font-weight: 500;
    justify-content: space-between; line-height: 21px; border-left:4px solid var(--primaryColor);}
 .cmpare_item_msgbtn{font-weight: 700; color: var(--primaryColor); line-height: 21px; border-bottom: solid 2px var(--primaryColor); cursor: pointer;}   
.Prd_cmpare_modalgrid{width: 100%; clear: both; margin: 10px 0 15px;}    
.Prd_cmpare_modalrow{width: 100%; clear: both; display: flex; flex-wrap: wrap; grid-gap: 0 16px; justify-content: center;}
.cmpare_modal_box{width: 80px; height: 80px; position: relative; display: inline-flex; border:solid 1px var(--lightborder); cursor: pointer; justify-content: center; align-items: center;}
.cmpare_modal_box.empty_box{border:dashed 1px var(--lightborder);}
.remove_cmprae_modalitem { position: absolute;  right: 5px;  top: 5px;  width: 18px;  height: 18px;  background: var(--primaryColor);  border-radius: 50%;   display: flex;
    align-items: center;  justify-content: center; flex-wrap: wrap;}
.remove_cmprae_modalitem::before{content: ''; align-self: center; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width: 9px; height: 2px; background-color: var(--white);}
.cmpare_modal_button {align-self: end;}
.cmpare_modal_btnlnk {display: inline-flex;  width: 156px;   height: 40px; justify-content: center;  align-items: center;  font-size: 14px;  letter-spacing: 0.5px; text-transform: uppercase;
color: var(--primaryColor); font-weight: 700;  border-radius: 8px;  border: solid 1px var(--primaryColor); transition: 0.35s;  background-color:transparent; position: relative;}
.cmpare_modal_btnlnk:hover{text-decoration: none; color: var(--themeColor); border-color: var(--themeColor);}

.cmpare_modal_pic { display: flex; width: 100%; max-height: 100%;}
.Prd_cmpare_modals.collapse .Prd_cmpare_modaltitle{display: block;}
.Prd_cmpare_modals.collapse .Prd_cmpare_modalmain{height: 0;}
.Prd_cmpare_modals.collapse .cmpare_arrow_down {transform: rotate(-180deg);}
.Prd_cmpare_modals.collapse .Prd_cmpare_modlmn{height:65px;}
.Prd_cmpare_mobilebtn{display: none;}
.nocompare-product{font-size: 16px; line-height: 24px; color: var(--basecolor); text-align: center;}
@media only screen and (max-width:767px)
{
  .Prd_cmpare_modalhead,.Prd_cmpare_modaltitle {font-size: 16px;}
  .cmpare_modal_button{display: none;}
  .Prd_cmpare_modalgrid{margin: 15px 0;}
  .Prd_cmpare_mobilebtn{display: flex;  width: 100%;   border-top: solid 1px var(--lightborder);    padding: 20px;   justify-content: center;}
  .cmpare_modal_btnlnk{width: 100%;}
  .Prd_cmpare_modals.collapse .Prd_cmpare_mobilebtn{display: none;}
}

@media only screen and (max-width:500px)
{
  .Prd_cmpare_modalrow{grid-gap: 8px;}
  .cmpare_modal_box{width: 75px; height: 75px;}
  .cmpare_item_limitmn{max-width: 330px;}
}

/*clear section*/
.clear60,.clear50,.clear40,.clear30,.clear20,.clear10{clear: both; content: ""; display: table; font-size: 0; }
.clear60{height: 60px;}
.clear50{height: 50px;}
.clear40{height: 40px;}
.clear30{height: 30px;}
.clear20{height: 20px;}
.clear10{height: 10px;}
@media only screen and (max-width:991px)
{
.mbclear60{height: 60px;}
.mbclear50{height: 50px;}
.mbclear40{height: 40px;}
.mbclear30{height: 30px;}
.mbclear20{height: 20px;}
.mbclear10{height: 10px;}
}


/* CSS start here */

/*Default page format setting*/
h1{font-weight: 700; font-size: 36px;  line-height: 46px;  margin: 0 0 15px;  color: var(--basecolor);}
h2{font-weight: 700;  font-size: 24px;  line-height: 32px; margin: 0 0 15px;  color: var(--basecolor);}
h3{font-weight: 600; font-size: 18px;  line-height: 28px; margin: 0 0 15px; color: var(--basecolor);}
h4,h5,h6{font-weight: 600; font-size: 18px;  line-height: 28px; margin: 0 0 15px; color: var(--basecolor);}
p{font-size: 16px; line-height: 24px; color: var(--basecolor);}
strong,b{font-weight: 700;}
ul{padding: 0 0 0 20px;}
ul li {font-size: 16px;  padding: 0 0 0;  line-height: 24px;}

.blog-container-wrapper{float: left; width: 100%; clear: both; padding: 40px 0 45px;}
.blog-container-wrapper .pagegirdcontent{margin-top: 35px;}
.pagegirdcontent.blogDetails {    margin-top: 80px;}
.blog-container-wrapper .ctaOuter{margin-bottom: 80px;}
.blog-container-wrapper img{max-width: 100%; height: auto !important; margin-bottom: 15px;}


@media only screen and (max-width:991px)
{
  h1{font-size: 24px; line-height: 38px;}
  h2{font-size: 18px; line-height: 28px;}
  h3,h4,h5{font-size: 18px; line-height: 28px;}
  p{font-size: 16px; line-height: 24px;}

}