/*****-------Base SASS Veriable-------*****/
/*--font variable--*/
/*--color variable--*/
/*****-------Header SASS Veriable-------*****/
/*****-------Header Nav SASS Veriable-------*****/
/*****-------Footer SASS Veriable-------*****/
/*--mixin--*/
/*   
Theme Name: Base CSS For Znode MVC Demo.
Theme URI: -
Description: Base CSS for Znode MVC Demo project. 
Author: Base CSS.
Author URI: www.mrrsoft.com
Version: 1.0.0.1

/***************** GENERAL CLASS & WIDGETS ******************
Button ,Grid ,Pagination ,Dropdown ,Scroll Bar ,Table.
*/
/****************************************************************************************/
html, body { height: 100%; font-family: Arial; font-size: 14px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

.nopadding { padding: 0; margin: 0; }

.required:after { content: ' * '; color: #cc0000; }

a { outline: medium none; text-decoration: none; color: #cc0000; }

a:hover, a:active, a:focus { outline: medium none; text-decoration: none; color: #429cff; }

h1, h2, h3, h4, h5 { color: #343434; font-family: Arial; }

h1, h2 { margin: 8px 0; font-size: 30px; }

h3, h4 { margin: 6px 0; font-size: 27px; }

h5 { margin: 4px 0; font-size: 14px; }

.padding-top { padding-top: 15px; }

.padding-top-bottom { padding: 15px 0; }

.margin-top { margin-top: 15px; }

.margin-top-bottom { margin: 15px 0; }

.margin-bottom { margin-bottom: 15px; }

.field-validation-error, .error-msg { color: #cc0000; }

.success-msg { color: #5cb85c; }

/*----Button----*/
.btn-text { display: inline-block; min-width: 70px; text-align: center; font-family: Arial; border: 0; color: #fff; text-transform: capitalize; border-radius: 4px; font-size: 14px; font-weight: 700; padding: 0 10px; margin-left: 5px; height: 34px; line-height: 34px; }

.btn-text:hover, .btn-text:active, .btn-text:focus { color: #fff; }

.btn-text-icon { display: inline-block; min-width: 70px; text-align: center; font-family: Arial; border: 0; color: #fff; text-transform: capitalize; border-radius: 4px; font-size: 14px; font-weight: 700; padding: 0 15px 1px 10px; height: 45px; line-height: 45px; margin-left: 5px; }

.btn-text-icon:hover, .btn-text-icon:active, .btn-text-icon:focus { color: #fff; }

.btn-text-icon i { padding-right: 5px; font-size: 16px; line-height: 45px; float: left; }

.btn-text-full { display: inline-block; min-width: 70px; text-align: center; font-family: Arial; border: 0; color: #fff; text-transform: capitalize; border-radius: 4px; font-size: 16px; font-weight: 700; width: 100%; padding: 0 15px 1px 10px; height: 45px; line-height: 45px; }

.btn-text-full:hover, .btn-text-full:active, .btn-text-full:focus { color: #fff; }

.btn-text-full i { padding-right: 10px; font-size: 28px; line-height: 45px; float: left; border-right: 1px solid #c3c3c3; }

.btn-card { display: inline-block; min-width: 70px; text-align: center; font-family: Arial; border: 0; color: #fff; text-transform: capitalize; border-radius: 4px; font-size: 13px; padding: 0 15px 0 10px; line-height: 34px; }

.btn-card:hover, .btn-card:active, .btn-card:focus { color: #fff; }

.btn-card i { padding-right: 5px; font-size: 16px; line-height: 30px; float: left; }

.btn-wishlist { display: inline-block; min-width: 70px; text-align: center; font-family: Arial; border: 0; color: #fff; text-transform: capitalize; border-radius: 4px; background-color: #fff; color: #787878; font-size: 13px; border: 1px solid #c3c3c3; padding: 0 10px 1px 5px; }

.btn-wishlist:hover, .btn-wishlist:active, .btn-wishlist:focus { color: #343434; }

.btn-wishlist i { padding-right: 5px; font-size: 13px; line-height: 26px; float: left; }

.red { background: #cc0000; }

.grey { background: #717171; }

/*----Input Fields----*/
input[type="text"], input[type="password"], input[type="email"] { color: #343434; padding: 0 5px; font-family: Arial; font-size: 14px; width: 100%; border: 1px solid #c3c3c3; box-shadow: none; height: 34px; border-radius: 4px; }

textarea { color: #343434; padding: 0 5px; font-family: Arial; font-size: 14px; width: 100%; border: 1px solid #c3c3c3; box-shadow: none; resize: none; overflow-y: auto; }

/*---Select---*/
select { color: #292a2a; font-size: 12px; width: 100%; height: 34px; padding: 2px 20px 2px 5px; border: 1px solid #c3c3c3; box-shadow: none; outline: medium none; -moz-appearance: none; -ms-appearance: none; background: #fff url("/Images/drop-arrow.png") no-repeat 98% center; text-indent: 0.01px; text-overflow: ""; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; }

select option:hover { border: 0; box-shadow: none; outline: medium none; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; }

select::-ms-expand { display: none; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; }
select:focus { outline: none !important; border:1px solid #75b0ed; box-shadow: 0 0 5px #75b0ed; }
.ie select { display: none; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; }

/*----Input Fields Inner Icons----*/
.left-inner-icon { position: relative; }

.left-inner-icon input, .left-inner-icon select { padding-left: 36px; }

.header-main .header-logo img {
  max-width: 210px;
  max-height: 95px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }
.left-inner-icon i { position: absolute; padding: 8px 5px; height: 34px; pointer-events: none; top: 0; color: #343434; line-height: 4px; }

.left-inner-icon .unit{background-color:#737373; color:#fff;width:32px;height:34px; text-align:center;line-height:18px;}

.right-inner-icon { position: relative; }

.right-inner-icon input { padding-right: 36px; }

.right-inner-icon i { position: absolute; right: 0; top: 0; padding: 9px 10px; height: 34px; pointer-events: none; color: #343434; line-height: 4px; }

.right-inner-icon .unit{background-color:#737373; color:#fff;width:32px;height:34px; text-align:center;line-height: 18px;}

.right-inner-icon .unit-text{background-color:#737373; color:#fff;width:35px;height:34px;text-align:center;padding:7px 5px;font-size:10px;line-height: 14px;}

/*----Chackbox & Redio Button----*/
.styled-input input[type=radio] { display: none; }

.styled-input input[type=radio]:checked + label:before { font-family: 'znode-icon-f'; content: "\f192"; color: #cc0000; font-size: 18px; }

.styled-input input[type=radio] + label { display: block; position: relative; padding-left: 2em; cursor: pointer; margin-bottom: 10px; font-weight:normal;}

.styled-input input[type=radio] + label:before { font-family: 'znode-icon-f'; content: "\f10c"; margin-right: 10px; position: absolute; top: 0; left: 5px; color: #666; line-height: 20px; font-size: 18px; }

.styled-input input[type=checkbox] { display: none; }

.styled-input input[type=checkbox]:checked + label:before { font-family: 'znode-icon-f'; content: "\f046"; color: #cc0000; font-size: 18px; }

.styled-input input[type=checkbox] + label { display: block; position: relative; padding-left: 2em; cursor: pointer; margin-bottom: 10px;font-weight:normal; }

.styled-input input[type=checkbox] + label:before { font-family: 'znode-icon-f'; content: "\f096"; margin-right: 10px; position: absolute; top: 2px; left: 5px; color: #666; line-height: 20px; font-size: 18px; }

/*****-------Header SASS CSS-------*****/
.header { width: 100%; position: relative; top: 0; left: 0; border: 1px solid #c3c3c3; height: 146px; transition: height 500ms, background 500ms; z-index: 999; background-color: #fff; }

.header-logo { float: left; width: 100%; min-height: 45px;padding-right:5px; }

.header-main .header-logo img { width: 210px; max-height: 95px; display: block; vertical-align: middle; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

.shrink { height: 88px; position: fixed; background-color: rgba(255, 255, 255, 0.9); }

.shrink .header-logo { min-height: 30px; }

.shrink .header-logo img { width: 140px; max-height: 58px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

.hide-show { display: none; }

.header-link-contain { margin-top: 28px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

.shrink .header-link-contain { margin-top: 14px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

.header-link ul li { display: inline; list-style: none; border-right: 1px solid #c3c3c3; padding: 0 5px; line-height: 34px; position: relative; }

.header-link ul li:hover { color: #cc0000; }

.header-link ul li:last-child { border: none; }

.header-link ul li a { padding-left: 5px; }

.header-link ul li .header-toolbar-cart { color: #cc0000; font-size: 24px; }

.header-link ul li .cartcount { top: -14px; background-color: #343434; height: 16px; width: 16px; border-radius: 50px; color: #fff; line-height: 16px; text-align: center; }

.header-link ul li form { display: inline; }

.header-link ul li a.user-icon, .header-link ul li a.user-icon:hover { padding-left: 0; color: #cc0000;}

.header-nav-container { background-color: #343434; height: 50px; }

.navbar-collapse { background-color: #343434; }

/*****-------Header Nav SASS CSS-------*****/
.nav-home { padding: 8px 4px 8px 0; }

.nav-home a { background-color: #cc0000; border-radius: 50px; padding: 6px 8px !important; }

.nav-home i { font-size: 18px; }

.navbar-nav > li > a { padding: 15px; font-size: 14px; color: #fff; text-transform: uppercase; }

.navbar-nav > li > a:hover, .navbar-nav > li > a:active, .navbar-nav > li > a:focus, .navbar-nav > li:hover { background-color: #cc0000; }

.navbar-nav li .dropdown-menu { border-top: 5px solid #cc0000; }

.dropdown:hover .dropdown-menu { display: block; }

.dropdown-menu ul { padding: 0 0 10px 15px; }

.dropdown-menu li { line-height: 40px; min-height: 24px; }

.yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown { position: static; }

.yamm .container { position: relative; }

.yamm .dropdown-menu { left: auto; }

.yamm .nav.navbar-right .dropdown-menu { left: auto; right: 0; }

.yamm .yamm-content { padding: 20px; }

.yamm .dropdown.yamm-fw .dropdown-menu { left: 15px; right: 15px; min-height: 250px; }

.yamm .dropdown ul li { width: 19%; background-color: transparent; display: inline-block; vertical-align: top; line-height: 24px; }

.yamm .dropdown ul li a { font-weight: bold; background-color: transparent; color: #333; }

.yamm .dropdown ul li a:hover, .yamm .dropdown ul li .sub-menu-child li a:hover { color: #cc0000; }

.yamm .dropdown ul li .sub-menu-child { padding-left: 20px; }

.yamm .dropdown ul li .sub-menu-child li { width: 100%; list-style: none; }

.yamm .dropdown ul li i { padding-right: 10px; color: #cc0000; }

.yamm .dropdown ul li .sub-menu-child li a { color: #999; background-color: transparent; }

.yamm .dropdown ul li .sub-menu-child li ul li a { font-weight: normal; }

/*****-------Footer SASS CSS-------*****/
footer { position: relative; clear: both; }

.footer-container { background: #252525; }

.footer-container .footer-information { padding: 15px 0; font-size: 13px; color: #626262; }

.footer-container .footer-information .nav-home { display: none; }

.footer-container .header-footer { border-bottom: 1px solid #626262; margin-bottom: 10px; }

.footer-container .header-footer h3 { margin: 10px 0; text-transform: uppercase; color: #fff; font-family: 'PTSans', sans-serif; font-size: 15px; padding-left: 5px; }

.footer-container .footer-information a { color: #626262; text-decoration: none; line-height: 26px; }

.footer-container .footer-information a:hover { color: #fff; }

.footer-container .footer-information li i { color: #959595; padding: 5px; }

.footer-container .footer-contact p, .footer-container .footer-contact a { padding-left: 5px; }

.footer-container .footer-shop ul li .sub-menu { display: none; }

.footer-container .footer-shop ul li { width: 100%; display: inline-block; list-style: none; background-color: transparent; }

.footer-container .footer-shop ul li a { padding: 0; float: left; text-transform: capitalize; }

.footer-container .footer-shop ul li a:hover { background-color: transparent; }

.footer-container .footer-shop ul li i { float: left; }

.footer-container .footer-copyright { background-color: #252525; border-top: 1px solid #626262; }

.footer-container .footer-copyright p { color: #626262; margin-bottom: 28px; text-align: center; }

.footer-container .footer-copyright ul { text-align: center; padding-left: 0; margin-bottom: 0; margin-top: 10px; }

.footer-container .footer-copyright ul li { list-style: none; display: inline-block; padding: 0 4px; }

.footer-container .footer-copyright ul li i { font-size: 26px; color: #828282; }

.footer-container .footer-copyright ul li i:hover { color: #fff; }

.footer-container .news-letter { background-color: #2e2e2e; padding: 20px 0; border-bottom: 1px solid #cc0000; }

.footer-container .news-letter label { float: left; color: #fff; padding-right: 10px; line-height: 34px; margin-bottom: 0; }

.footer-container .news-letter input[type="text"], .footer-container .news-letter button { background-color: transparent; color: #fff; }

.footer-container .news-letter ul { float: right; padding-left: 0; margin-bottom: 0; }

.footer-container .news-letter ul li { list-style: none; display: inline-block; }

.footer-container .news-letter ul li i { font-size: 34px; color: #828282; }

.footer-container .news-letter ul li i:hover { color: #fff; }

.footer-container .footer-shop ul li .dropdown-menu { display: none; }

/*Media Query CSS*/
@media (min-width: 320px) { .footer-container .footer-shop .navbar-nav { margin: 0; }
  .footer-container .footer-copyright img { margin: 0 auto; }
  .footer-container .news-letter .input-field { padding-left: 0; padding-right: 0; }
  nav .nav-home { display: none; }
  .account-dashboard .right-container .btn-text, .account-dashboard .address-book button { background-color: transparent; color: #cc0000; font-weight: normal; padding: 0 3px; }
  .account-dashboard .edit-address button { background-color: #cc0000; color: #fff; font-weight: 700; padding: 0 10px; } 
  .header-link ul li #loginLink{display:none;}
}

@media (min-width: 768px) { h1, h2 { margin: 8px 0; font-size: 30px; }
  h3, h4 { margin: 6px 0; font-size: 27px; }
  .header-logo {min-height: 95px;padding-right:0;}
  .footer-container .footer-copyright p { margin-top: 20px; text-align: left; }
  .footer-container .footer-copyright ul li i { font-size: 34px; }
  .footer-container .footer-copyright ul { text-align: right; }
  .footer-container .news-letter .input-field { padding-left: 15px; padding-right: 15px; }
  nav .nav-home { display: block; }
  .account-dashboard .right-container .btn-text, .account-dashboard .address-book button { background-color: #cc0000; color: #fff; font-weight: 700; padding: 0 10px; }
  .header-link ul li #loginLink{display:inline-block;}
  .header-link ul li a.user-icon{padding:0;}
}

@media (min-width: 992px) { .footer-container .footer-copyright p { margin-top: 28px; }
  .footer-container .footer-copyright ul { margin-top: 20px; } 
  .footer-container .header-footer h3{font-size:18px;}
}