
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

body{ margin:0; }

.sample-bg img{ max-width:100%; }

#aboutESS{ display:none; }


#promo-btn a *{ 
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
text-decoration:none;
}


.lightbox-target{
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
-o-transition:opacity .5s ease;
transition:opacity .5s ease;
}

.lightbox-target .img-popup{
-webkit-transition:transform .5s ease;
-moz-transition:transform .5s ease;
-o-transition:transform .5s ease;
transition:transform .5s ease;
}




.mdl-Box{ margin-bottom:15px; font-size:13px; }
.mdl-Box .pad{ padding:15px; border:1px solid #ddd; }
.mdl-Box p{color:#555555;}

.main-title{ }


.mdl-Box ol, .mdl-Box ul{ margin:5px 0; padding-left:15px; }
.mdl-Box ol li{ display:block; list-style:decimal; }
.mdl-Box ul li{ list-style-type:disc; }
.mdl-Box ul li li{ list-style-type:circle; }


.dec .block-title{ background-color:#2e559d; display:inline-block; margin:0; padding:6px 15px; font-size:15px; }
.dec .pad{ background-color:#eee; padding:15px; }

#promo-btn{ font-size:0; width:260px; float:left; }
#promo-btn a{ display:block; background:#ddd; color:#333; font-size:13px; height:34px; line-height:34px; text-decoration:none; margin-bottom:8px; text-transform:uppercase; text-align:left; }
#promo-btn a#ask{ }
#promo-btn a#ask i{ background:url(../images/icon-promo-btn1.png) center center no-repeat; }
#promo-btn a#watch i{ background:url(../images/icon-promo-btn2.png) center center no-repeat; }
#promo-btn a#tellafriend i{ background:url(../images/icon-promo-btn3.png) center center no-repeat; }
#promo-btn a i{ background-color:#eee!important; float:left; text-indent:-9999px; height:100%; width:34px; }
#promo-btn a span{ overflow:auto; display:inline-block; padding:0 10px; }
#promo-btn a:hover{ background:#2e559d; color:#fff; }
#promo-btn a:hover i{ background-color:#6C9CF4!important; }



/* Right Menu */
#rMenuContainer{  padding:0; border:0; width:130px; margin:0 0 10px; float:right;}
.outerBoxRMenuC{ margin:0; padding:0; border:0; }
.scroll h3{ margin:0; text-transform:uppercase; font-size:14px;  padding:6px 0; font-weight:bold; background:#38396E; color:#fff; text-align:center; }
.outerBoxRMenuC .cPad{ margin:0; padding:0; border-width:0 1px 1px; border-style:solid; border-color:#e4e4e4; background-color:#fff; text-align:center;}
.outerBoxRMenu1, .outerBoxRMenu2, .outerBoxRMenu3, .outerBoxRMenu4{ margin:0 0 13px 0;}
.outerBoxRMenu2 img{ margin-bottom:13px; }
/* Right Menu */

.col-mdl > div{ margin-bottom:15px; }


.Prod-discription{padding:0 15px 15px;float:right; width:49%;}
.Prod-discription h4{margin-top:0;}
.itemTitle{ margin: 0; margin-bottom:20px; border-bottom: 1px solid #e6e6e6; padding-bottom: 15px; }
.mdl-Box .itemTitle *{ margin:0; padding:0; color:#fff; font-weight:normal; font-size:16px; }
 
.itemTitle { color: #37474f; font-size: 20px; font-weight: normal; margin: 0; }
.itemTitle * { margin: 0; padding: 0; color: #37474f; font-weight: normal; font-size: 20px; line-height: normal; }
 

/* liteTabs */
.essTabs{ font-size:0; margin-bottom:10px; position:relative; height:275px; overflow:hidden; }
.essTabs .tabBox{  }
.essTabs label{ float:left; cursor:pointer; height:34px; line-height:34px; white-space:nowrap; display: block; text-decoration: none; outline: 0; padding:0px 13px; margin-right: 1px; color: #fff; text-transform:uppercase; background-color:#231f20; text-align:center; font-size:13px;   }
.essTabs label:hover,
.essTabs input:checked + label{ color:#fff; background-color:#ed1a3b; }
.ckBox{ display:none; }

/*   [type=radio]:checked ~ label {     background: white;     border-bottom: 1px solid white;     z-index: 2;   }*/
	
.essTabs .ckBox:checked ~ label ~ .panel { display:block; }
.panel{ font-size:13px; color:#fff; border:1px solid #e4e4e4;  line-height:20px; display:none; position:absolute; left:0; top:34px; background-color:#fff; padding:2%; width:99.5555%; }
.panel .pad{ }
.scrollBox{ height:200px; overflow:auto; }
.tabBox:first-child .panel{ }
.panel p{  margin:0 0 10px 0; padding:0; color:#555!important; line-height:normal;}
.panel a{ color:#792B5F; text-decoration:none;}
.panel a:hover{ color:#000; }
.panel ol, .panel ul{  margin:0; padding:0; }
.panel ol li{ margin:0 0 10px 0; padding:0; display:block; list-style:decimal; }
.panel ul li{ margin:0 0 10px 0; padding:0; display:block; list-style:decimal;}
.panel h3{ margin:0 0 10px 0; font-size:15px; color:#800000; font-weight:lighter; }
.panel i, .panel em{ font-style:normal; }
.panel .readmore{ margin:6px 0; display:inline-block;  }
.panel .readmore:hover{ opacity:.7; color:#fff; }


table.sizeGuide{ width:560px; color:#000; }
table.sizeGuide th{ text-align:right; font-weight:normal; font-size:12px; }
table.sizeGuide th, table.sizeGuide td{ padding:3px 5px; font-size:12px; }
.sizeGuide td{ text-align:center; }

 

.clearfix:after{ clear: both; content: ""; display: table; }

.material-icons,
#topcatz .sf-menu li.home a::before,
.main-menu #topcatz .sf-menu label::before,
.essTabs label::before,
.joinLinks a,
#LeftPanel .v4midBox ul li::before,
.slider .controls label::before,
.img-popup::after{
  direction: ltr;
  display: inline-block;
  font-family: "Material Icons"!important;
  font-feature-settings: "liga";
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  overflow-wrap: normal;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}

.essWrap input[type="checkbox"], .essWrap input[type="radio"], .slider input[type="checkbox"], .slider input[type="radio"] {
    display: none;
}
.col-md-1{ width:8.3333%;}
.col-md-2{ width:16.6667%; }
.col-md-3{ width:25%; }
.col-md-4{ width:33.3333%; }
.col-md-5{ width:41.6667%; }
.col-md-6{ /*width:50%; */}
.col-md-7{ width:58.3333%; }
.col-md-8{ width:66.6667%; }
.col-md-9{ width:75%;}
.col-md-10{ width:83.3333%; }
.col-md-11{ width:91.6667%; }
.col-md-12{ width:100%; }

 .enlarge { padding: 10px 0; text-align: center; border-top: 1px solid #e6e6e6; }
.enlarge span { display: inline-block; vertical-align: middle; font-size: 11px; text-transform: uppercase; color: #555; }
.enlarge i { display: inline-block; vertical-align: middle; font-size: 18px; }
 .ess-gallery{ float:left; width:50%}
 .ess-gallery .img-box { border: 1px solid #e6e6e6; background-color: #fff; }
.img-holder { display: none; }
.img-holder .imgBox { cursor: zoom-in; text-align: center; padding-bottom: 62.5%; overflow: hidden; background: #fff; display: block; position: relative; }
.img-popup { background-color: #fff; bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100%; }
.col-md-6 .img-holder .imgBox { padding-bottom: 100%;!important }
.col-md-6 > .thumb:first-child { margin-top: -15px; }
.thumb { font-size: 0; margin-left: -7.5px; margin-right: -7.5px; text-align: center; }
.thumb label { width: 33.3333%; padding: 0 7.5px; display: inline-block; margin-top: 15px; }

.col-1 .thumb,
.col-2 .thumb{ text-align: left; }


.col-1 .thumb label,
.col-2 .thumb label { width:25%; }
.col-md-6 .img-box ~ .thumb label,
.col-2 .col-md-6 .thumb label { width: 25%; }
.col-1 .col-md-6 .img-box ~ .thumb label { width: 16.6666%; }
.thumb label .box { cursor: pointer; cursor: cell; border: 1px solid #e6e6e6; background-color: #fff; overflow: hidden; text-align: center; position: relative; padding-bottom: 100%; }
.thumb label img { display: inline-block; border: 0; }
#imgView1:checked ~ .img-box #content1,
#imgView2:checked ~ .img-box #content2,
#imgView3:checked ~ .img-box #content3,
#imgView4:checked ~ .img-box #content4,
#imgView5:checked ~ .img-box #content5,
#imgView6:checked ~ .img-box #content6,
#imgView7:checked ~ .img-box #content7,
#imgView8:checked ~ .img-box #content8,
#imgView9:checked ~ .img-box #content9,
#imgView10:checked ~ .img-box #content10,
#imgView11:checked ~ .img-box #content11,
#imgView12:checked ~ .img-box #content12,
#imgView13:checked ~ .img-box #content13,
#imgView14:checked ~ .img-box #content14,
#imgView15:checked ~ .img-box #content15,
#imgView16:checked ~ .img-box #content16,
#imgView17:checked ~ .img-box #content17,
#imgView18:checked ~ .img-box #content18,
#imgView19:checked ~ .img-box #content19,
#imgView20:checked ~ .img-box #content20 { display: block; }
.checkbox{display:none;}

/*
-----------------------------------------------------------------------------------
POPUP GALLERY
-----------------------------------------------------------------------------------*/
@-webkit-keyframes zoom {
  from { -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  to { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@keyframes zoom {
  from { -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  to { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
.img-holder .lightbox:before { content: ""; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; overflow: hidden; z-index: 999; }
.img-holder input:checked ~ .lightbox:before { position: fixed; opacity: 1; visibility: visible; top: 0; }
.img-holder input:checked ~ .lightbox { position: static; cursor: zoom-out; }
.img-popup { -webkit-animation: zoomOut 0.5s ease-out; animation: zoomOut 0.5s ease-out; }
.img-holder input:checked ~ .lightbox .img-popup { border: 10px solid #333; margin: 0 auto; z-index: 9999; max-width: 800px; max-height: 600px; -webkit-animation: zoom 0.5s ease-out; animation: zoom 0.5s ease-out; }
.img-holder input:checked ~ .lightbox .img-popup::after { content: "close"; cursor: pointer; display: block; position: absolute; top: 5px; right: 5px; font-size: 30px; }
.essBody [id^="popup"]:checked ~ .popup-bg { background-color: red; height: 10px; }
.imgBox img { bottom: 0; height: auto; left: 0; margin: auto; max-height:90%; max-width:90%; position: absolute; right: 0; top: 0; width: auto; text-align: center; }
 
 
 .mdl-Box .itemTitle{ margin-bottom:15px}