@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap&subset=latin-ext');

body {
	color: #666666;
	font-size: 16px;
	padding: 0;
	margin: 0;
	font-family: 'Rubik', sans-serif;
    font-weight: 300;
	line-height: 160%; 
}

strong, b {
    font-weight: 500;
}

/* one-way css class  */
.fl{float:left;}
.fr{float:right;}
.center{text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.upper {text-transform: uppercase;}
.strong {font-weight: 500; }
.italic {  font-style: italic; }
.upper_off {text-transform: none;}
.fullwidth { width: 100%; }
.bgwh { background-color: white; }
.wh { color: white; }
.small {font-size: 14px; }
.big {font-size: 18px; }
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mb0 { margin-bottom: 0 !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.ml5 { margin-left: 5px !important; }
.text-shadow { text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); }
.inline-block { display: inline-block; }

.hide_me {
	/* dont show antispam form field */
	display: none;
}

/* common elements */

a {color: #343434; text-decoration:underline; }
a:hover {
	color: #8B8B8B; /* theme */
	text-decoration:none;
}

.link_2, .footer a {text-decoration: none;}
.link_2:hover, .footer a:hover {text-decoration: underline;}

/* font awesome */
a.ficon {text-decoration: none; }
a.ficon:hover {text-decoration: none !important;}
.ficon { margin: 0 0.3em 0 0; }
.ficon.ml { margin: 0 0 0 0.3em; }

.hidden{
	display: none;
}
.cleaner{
	clear: both;
	font-size: 0;
	visibility: hidden;
	border: none;
	margin: 0; padding: 0;
}

.clearfix {
  position: relative;
}
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
  clear: both;
}

.bold { font-weight: bold; }
.upper { text-transform: uppercase; }

.shadow, img.shadow, .images-shadow img {
	margin: 15px 10px;
    max-width: calc(100% - 20px) !important;
    -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.3);
}

table.striped tr:nth-child(odd) td {
 background-color: #EEEEEE;
}

table.list {
	width: 100%;
	margin-bottom: 5px;
	border: 0;
	border-bottom: 1px solid #D3D3D3;
}
table.list td {
	padding: 5px 4px 5px 4px;
}
/* bubble pop up fix: */
table.list table td {
	padding: 0;
}
table.list tr.header td {
	background: #EDEDED;
	color: #555555;
	border-top: 1px solid #D3D3D3;
	border-bottom: 1px solid #D3D3D3;
}
table.list tr.header td {
	padding: 6px;
}

/* forms */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
  background-color: #fff;
  border: 1px solid #D6D6D8;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: #414141;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  line-height: 170%;
  max-width: 100%;
  padding: 10px 15px;
}

.forms input[type="text"],
.forms input[type="password"],
.forms input[type="email"],
.forms input[type="search"],
.forms textarea,
.forms select {
	width: 400px;
}

button, input[type=button], .button, .links-to-buttons a
{
	border: none;
	padding: 11px 14px;
	display: inline-block;
	text-decoration:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	transition:all 0.3s ease 0s;
	font-family: 'Rubik', sans-serif;
	font-size: 17px;
	font-weight: 400; 
	background-color: #8B8B8B; /* theme */
	color: #fff;
	border: 1px solid transparent;
	cursor: pointer;
}

div.button_height_holder {
    height: 44px;
}

input:required, textarea:required {
    border: 1px solid red;
}

/*
button.small, input[type=button].small, .button.small {
	padding: 5px 15px;
	font-size: 16px;
}

button.tiny, input[type=button].tiny, .button.tiny {
	padding: 5px 12px;
	font-size: 13px;
    text-transform: uppercase;
}
*/

button:hover, input[type=button]:hover, .button:hover, .links-to-buttons a:hover {
	color: #fff;
	background: #333333;
	text-decoration:none;
}

button.t2, input[type=button].t2, .button.t2, .links-to-buttons.t2 a  {
	background-color: #96969F;
}

button.t2:hover, input[type=button].t2:hover, .button.t2:hover, .links-to-buttons.t2:hover a  {
	background-color: #8B8B8B; /* theme */
	color: #fff;
}

.bg_dark button, 
.bg_dark input[type=button], 
.bg_dark .button {
	background: #003C69;
    color: #fff;
}

.bg_dark button:hover, 
.bg_dark input[type=button]:hover, 
.bg_dark .button:hover {
    background: #FFFFFF;
    color: #003C69;
}

/*
button.t1, input[type=button].t1, .button.t1, .links-to-buttons.t1 a {
	background-color: #00AFD2;
	color: #fff;
}

,
button.t1:hover, input[type=button].t1:hover, .button.t1:hover, .links-to-buttons.t1 a:hover {
	color: #fff;
	background: #333333;
}
*/


#warning_demo_only {
	font-size: 14px;
    font-weight: 300;
	line-height: 18px;
	color: #fff;
	background: #242424; 
}

#warning_demo_only #wdo_pad {
	padding: 7px 0;
	text-align: center;
}

#warning_demo_only a {
	color: #fff;
}

/* template */


.page {
	width: 100%;
	background-color: #fff;
	display: table;
}

.pagecol {
	/* fluid columns with equal height
	https://css-tricks.com/fluid-width-equal-height-columns/
	overflow: hidden; must be set in parent container
	*/
	display: table-cell;
	vertical-align: top;
}

.panel_side {
	width:23.5%;
    padding-right: 1.5%;
}

.panel_main {
	width:75%;
	background:#FFFFFF;
}

.pm-pad {
    margin-bottom: 20px;
}

/* Envelope (responsive) */

.envelope_bg {width: 100%; background-color:#fff; }
.envelope_bg.bg1, .bg1 { background-color:#fff;}
.envelope_bg.bg2, .bg2 { background-color: #F8F5F5; }
.envelope_bg.bg3, .bg3 {  background-color: #242424; color: #FFFFFF;  }
/*
.envelope_bg.bgc1, .bgc1 {  background-color: #ABABAB; color: #FFFFFF;  }
*/

h1, h2, h3, h4, h5, h6 {
	color: #333333;
}

.bg3 a, .bg3 h1, .bg3 h2, .bg3 h3, .bg3 h4, .bg3 h5, .bg3 h6 {color: #fff; }

.bg_dark { color: #fff; }
.bg_dark a, .bg_dark h1, .bg_dark h2, .bg_dark h3, .bg_dark h4, .bg_dark h5, .bg_dark h6 {color: #fff; }

.c0, .c0 a { color: #777777; } /* light gray */
.c1, .c1 a { color: #333339 !important; } /* dark gray */
.c2, .c2 a { color: #8B8B8B; } /* base theme color */

.envelope {
	width: 100%;  
	max-width: 1220px;
	margin: 0 auto 0 auto; 
}
.envelope-pad-top {
	padding:  70px 2% 0 2%;
}
.envelope-pad-bottom {
	padding:  0 2% 50px 2%;
}
.envelope-pad-top-bottom {
	padding:  70px 2% 50px 2%;
}
.envelope-pad-top-bottom-only {
	padding:  70px 0px 50px 0px;
}
.envelope-pad {
	padding:  0 2%;
}
.envelope-top-only {
	padding:  70px 0px 0 0px;
}

.envelope-pad-header {
	padding:  15px 1% 15px 1%;
}

.envelope-pad-pre-header {
	padding:  5px 1% 6px 1%;
}
.envelope-pad-pre-footer {
	padding:  50px 2% 30px 2%;
}

.envelope-pad-tiny {
	padding:  15px 3%;
}

.cont-maxwidth {
	max-width: 1220px;
	margin: 0 auto;
}

.maxwidth-none {
	max-width: none;
}

/* titles */

h1, .h1 {
  font: 400 29px 'Rubik', sans-serif;
  margin-bottom: 26px;
  margin-top: 26px;
}
h2, .h2 {
  font: 400 26px 'Rubik', sans-serif;
  margin-bottom: 26px;
  margin-top: 26px;
}
h3, .h3 {
  font: 400 24px 'Rubik', sans-serif;
  margin-bottom: 26px;
  margin-top: 26px;
}
h4, .h4 {
 	font: 400 24px 'Rubik', sans-serif;
  margin-bottom: 18px;
  margin-top: 18px;
}
h5, .h5 {
  font: 400 22px 'Rubik', sans-serif;
  margin-bottom: 18px;
  margin-top: 18px;
}
h6, .h6 {
  font: 400 20px 'Rubik', sans-serif;
  margin-bottom: 14px;
  margin-top: 14px;
}

hr {
	width: 100%;
	background-color: transparent;
  color: transparent;
	border: 0px;
  border-top: 1px solid #E9E9E9;
  height: 1px;
	padding: 0; margin: 7px 0 10px 0;
}

.hr {
    border-top: 1px solid #E9E9E9;
    height: 1px;
    padding: 0; margin: 0;
}

.hline {
    background: #C2C2C2;
	content: "";
	width: 87px;
	height: 2px;
	display: inline-block;
	margin: 0 0 10px 0;
}

.content > h1:first-of-type,
.content > h2:first-of-type,
.content > h3:first-of-type,
.content > h4:first-of-type,
.content > h5:first-of-type,
.content > h6:first-of-type 
{
	margin-top: 0;
}

.title-link a {
	color: #2D2D2D;
	text-decoration: none;
}
.title-link a:hover {
	color: #8B8B8B; /* theme */
	text-decoration: underline;
}

/* layout */

/* grids */
.grid-row {
	clear: both;
	font-size: 0;
	visibility: hidden;
	border: none;
	margin: 0; padding: 0;
}

/* grid 2 = 2 columns, 50% width for each */
.grid-2 {
	width: 100%;
}

.grid-2-1 {
	float: left;
	width: 46%;
	margin: 5px 2%;
}

.grid-2-1.nomargin {
	float: left;
	width: 50%;
	margin: 0 0;
}

.grid-2-1.nomargin .pad {
	padding: 5% 10% 5% 10%;
	text-align: left;
}

.grid-2 .grid-row {
	margin-bottom: 20px;
}

/* grid 2b = 2 columns, 1st smaller */
.grid-2b-1 {
	float: left;
	width: 32%;
}

.grid-2b-2 {
	float: right;
	width: 60%;
}

.grid-2b-1, .grid-2b-2 {
	margin: 5px 2%;
}

/* grid 3 = 3 columns */
.grid-3 {
	width: 100%;
}
.grid-3-1 {
	float: left;
	width: 31.2%;
	margin: 0 1% 20px 1%;
}

.grid-3-1.first {
	margin-left: 0;
}


.shop_catalog {
    width: 100%;
}

/* by default 3 products on 1 row in this template */
.shop_catalog .shop_catalog_item {
	float: left;
	width: 31.2%;
	margin: 0 1% 20px 1%;
}

/* grid 4 = 4 columns */
.grid-4 {
	width: 100%;
}

.grid-4-1 {
	float: left;
	width: 23%;
	margin: 5px 1%;
}

.grid-4-1 .pad {
}

.grid-4-1.last {
	margin-right: 0;
}

/* header */

/* header image */

#header_wrap {
	margin-bottom: 35px;
    overflow: hidden;
}

div.effect {
	width: 100%;
}

div.effect > a {
	width: 100%;
}

div.effect > a > img {
	width: 100%;
}


div.effect > a { display: none; }
div.effect > a.first { display: block; }
/*
div.effect img { display: none; }
div.effect img.first { display: block; }
*/

.effect .cycle-prev, .effect .cycle-next {
	width: 15px; height: 30px;
	position: absolute;
	cursor: pointer;
	top: 49%;
	z-index: 3000;
	background-repeat: no-repeat;
	opacity: 0.5;
	transition: all 0.5s ease 0s;
	/* background-color: theme; */
}

.effect .cycle-prev:hover, .effect .cycle-next:hover {
	opacity: 1.0;
}

.effect .cycle-prev {
	left: 3px;
	background-image: url('../img/template/cycle/prev.png');
}

.effect .cycle-next {
	right: 3px; 
	background-image: url('../img/template/cycle/next.png');
}

.pre-header .ico-home { 
    margin-top: 12px;
    color: #CECECE; 
}

.header {
    box-shadow:0px 5px 5px rgba(100, 100, 100, 0.1);
}

.header:after {
    content: '';
    margin-bottom: 40px;
}

.header .logo {
    max-height: 65px;
}

.pre-footer .logo {
    max-height: 65px;
}


#quick_search, #quick_search form {
    display: inline;
}

#quick_search input.input-text {
	border: 1px solid #F5F5F5;
	padding: 4px 10px;
    font-size: 15px;
    line-height: 19px;
	width: 250px;
	background-color: #F5F5F5;
	color: #3E3F40;
    transition:all 0.3s ease 0s;
}

#quick_search input.input-text:hover {
    border: 1px solid #8B8B8B; /* theme */
}

#quick_search_submit {
	border:0;
	margin:0; padding:0;
	width:42px;
	height:36px; /* 34px + 2*1px border */
    color: #333339;
    background-color: #fff;
	/* background-color: theme */
	cursor:pointer;
}

#quick_search_submit:hover {
    color: #8B8B8B; /* theme */
}

.shop_quick_cart {
    display: inline-block;
    padding-left: 10px;
}

.shop_quick_cart .label {
    font-weight: 500;
    text-transform: uppercase;
    margin-left: 5px;
}

.shop_quick_cart a {
    text-decoration: none;
}

.shop_quick_cart a:hover {
    text-decoration: none;
    color: #8B8B8B; /* theme */
}

.shop_quick_cart_qty {
    /* https://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle */
    display: inline-block;
    box-sizing: initial;
    border-radius: 50%;
    padding: 3px;
    background: #EDEDED;
    border: 0;
    color: #44444D;
    text-align: center;
    font: 15px 'Rubik', sans-serif;
    font-weight: 400;
    line-height: 22px;
    width: 22px;
    height: 22px;
    text-decoration: none;
}

a.shop_quick_cart_qty:hover {
    background-color: #8B8B8B; /* theme */
    color: #fff;
}

.shop_quick_cart_qty_space {
    display: inline-block;
    margin-right: 60px;
}

.shop_quick_user {
    font-weight: 300;
}

.shop_quick_user a {
    text-decoration: none;
}
.shop_quick_user a:hover {
    text-decoration: underline;
}


/* subcats-images */
.subcats-images  .item .image {
	width: 100%;
    height: 150px;
    overflow: hidden;
    text-align: center;
}

.subcats-images .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
   transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.subcats-images .item img:hover {
    transform: scale(1.05);
}

.subcats-images .item .content {
    height: 60px;
    text-align: center;
    overflow: hidden;
}

.subcats-images .item h3 {
    font-weight: 500;
	margin-top: 20px;
    margin-bottom: 0px;
    font-size: 20px;
    line-height: 22px;
}

.subcats-images .item h3 a {
	font-size: 20px;
    line-height: 22px;
	color: #8B8B8B; /* theme */
    text-decoration: none;
}
.subcats-images .item h3 a:hover {
	text-decoration: underline;
}

/* side panel */

.panel_title {
    border-bottom: 2px solid #C2C2C2;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.panel_title a, .panel_title span
{
	color: #333333;
	font-weight: 400;
	text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
}

.panel_title a:hover
{
	color: #333333;
	text-decoration: none;
}


ul.panel {
	width: 100%;
	margin:3px 0 20px 0;
	padding: 0;
	list-style-type: none;
}

ul.panel li {
	list-style-type: none;
	margin: 0; padding: 0; 
	border-bottom:1px solid #E9E9E9;
    font-weight: 300;
}

ul.panel a { 	
	color:#222;
	display: inline-block;
	padding: 11px 0 10px 20px;
	line-height: 17px;
	text-decoration: none;
}

ul.panel a:hover {
	text-decoration: underline;
}

/* footer */
.footer { 
    font-weight: 300; 
    font-size: 14px;
}

.pre-footer .logo-wrapper {
    margin-bottom: 20px;
}

.pre-footer .logo-wrapper img {
    max-width: 100%;
}

/* social icons */
.social-nets-wrapper .social {
	list-style-type:none;
	margin: 0 0 5px 0;
	padding: 0;
	display: block;
}

.social-nets-wrapper .social li {
	display:inline-block;
	margin-right: 7px;
    text-align: center;
}
.social-nets-wrapper .social li:first-child { margin-left:0; }
.social-nets-wrapper .social li a {
	width:40px;
	height:40px;
	display:inline-block;
	border: 1px solid #C3C3C3;
	border-radius:50%;
	
	color: #C3C3C3;
	transition:all 0.3s ease 0s;
}
.social-nets-wrapper .social li a span { 
	font-size: 20px;
	line-height: 30px;
	padding: 5px 0 5px 5px;
}
.social-nets-wrapper .social li a:hover {
	border-color: #8B8B8B; /* theme */
	color: #8B8B8B; /* theme */
    transform: scale(1.15);
}

/* menu_2 */

.menu_2 {
	margin-bottom: 20px;
}

.menu_2 .m2_col{
	float: left;
	width: 270px;
	margin-right: 20px;
}

.menu_2 .m2_col.last {
	margin-right: 0px;
}

.menu_2 .title {
	margin-bottom: 10px;
}
.menu_2 .title, .menu_2 .title a {
    font-size: 16px;
    color: #333;
    font-weight: 500;
	text-transform: uppercase;
    text-decoration: none;
}

.menu_2 .article {
	margin-bottom: 4px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 300;
}

.menu_2 .article a {
    color: #777;
	text-decoration: none;
}

.menu_2 .title a:hover, .menu_2 .article a:hover  {
	text-decoration: underline;
}

/* panel_products */

.panel_products .item {
	padding: 14px 0 12px;
	border-bottom: 1px solid #E0E0E0;
}

.panel_products .item.last {
	border-bottom: none;
}

.panel_products .item .image {
	float: left;
	width: 30%;
}

.panel_products .item .image img {
	max-width: 100%;
	max-height: 75px;
}

.panel_products .item .content {
	float:right;
	width: 65%;
}

.panel_products h5 {
	font-size: 14px;
    line-height: 22px;
	font-weight: 400;
}

.panel_products h5 a {
	text-decoration: none;
}

.panel_products .item .price {
    font-weight: 400;
}


/* reviews */
.panel_left {
	margin-bottom: 25px;
	font-size: 14px;
}

.panel_left a {
	color:#666;
	text-decoration: none;
}

.panel_left a:hover {
	text-decoration: underline;
}

.panel_left .title {
	font-weight: 500;
    line-height: 20px;
    margin-bottom: 5px;
}

.panel_left .text {
    font-size: 15px;
    font-weight: 300;
    line-height: 22px;
}

.panel_left .text a {
	color: #333;
}

.panel_left .more {
	text-align: right;
}

/* cards - white floating box with image, title, short text */
.news .item {
}

.news .item:hover {
}

.news .item .image {
	width: 100%;
	height: 180px;
	margin-bottom: 10px;
	overflow: hidden;
}

.news .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
   transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

/*
.news .item img:hover {
	opacity: 0.8;
}
*/

.news .item img:hover {
	transform: scale(1.05);
}

.news .item .text a {
	text-decoration: none;
}
.news .item .text a:hover {
	text-decoration: underline;
}

.news .item h3 {
	font-weight: normal;
	margin-top: 5px;
	margin-bottom: 8px;
	font-size: 17px;
	line-height: 22px;
	font-weight: 500;
    text-transform: none;
}

.news .item .text {
	color: #6A6D6F;
	font-size: 14px;
    font-weight: 300;
	line-height: 23px;
	margin-bottom: 20px;
}

.news .item .cont {
	text-align: left;
    height: 140px;
    overflow: hidden;
}