/*Global********************************/
body {	font-size:14px;}
@media (max-width: 767px) {
.winpadding { padding:0;}
}
.nopadding { padding:0;}
.container {max-width:100%;}


/* Global - Header********************************/
#header_frame {height:101px;}
#header {
	position:fixed; 
	z-index:10;
	width:100%;
	height:94px;
	box-shadow:0 2px 2px rgba(0,0,0,.2);
	color:#CCC;
}
.header-row-1, .header-row-2 {
	width:100%;
	padding-left:3%;
	padding-right:3%;
}
.header-row-1 {
	height:51px;
	padding-top:6px;
	background-color:#08454a;
}
.header-row-2 {
	height:52px;
	padding-top:6px;
	background-color:#0d5257;
	border:1px solid #116b72;
	/*background-color:#212529;
	
	/*background: #ffa84c; /* Old browsers */
	/*/*background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%); /* FF3.6-15 */
	/*background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* Chrome10-25,Safari5.1-6 */
	/*background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
}
.form-area { border-radius:6px; font-size:14px; color:white; padding:4px 4px 4px 22px; background-color:#116b72; border:none; margin-top:5px; user-select: none; border-bottom:1px solid #268c94; border-right:1px solid #268c94; -webkit-appearance: none; cursor:pointer;}
.form-area > option { background-color:#116b72; cursor:pointer;}



.btn-white-black {	color:#EFEFEF; transition: color .3s;}
.btn-white-black > i { font-size:22px; transition: color .3s; line-height:1; position:relative; top:-2px;}
.btn-white-black:hover, .btn-white-black:hover > i{	color:#333; }
.btn-white-black:focus { box-shadow:none;}
.dropdown-menu-sm { font-size:14px; }


a { color:#F60; transition: color 0.3s;}
a:hover { color:orange; text-decoration:none;}
textarea::placeholder { font-size:14px;}


.no-select {user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;}



.form-control-ocs{ color: #000;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}



.icon-menu {  height:40px; width:40px; font-size:32px; line-height:1.2; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); text-align:center; top:-3px; position:relative; border-radius:4px; transition:background .3s; cursor:pointer; }
.icon-menu:hover {background:rgba(0,0,0,.6);}
@media (min-width: 768px) {/*576px*/
	.icon-menu, .icon-sm { display:none;}
	.icon-sm { font-size:16px;}
}
@media (max-width: 767px) {/*576px*/
	.icon-md { display:none;}
}
@media (max-width: 380px) {/*576px*/
	.hide-xxs { display:none;}
}

.rm { font-size:80%;}




/* Button ****************/
.btn-green, .btn-orange, .btn-blue, .btn-gray, .btn-red {
	box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);
	color:white;
	padding:4px 18px 6px 18px;
	font-size:14px;
	box-shadow:2px 2px 2px 0 rgba(0,0,0,.2);
}
.btn-orange {
	border:1px solid #ffa84c;
	background: #ffa84c; /* Old browsers */
	background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
}
.btn-green {
	border:1px solid #299a0b;
	background: #299a0b; /* Old browsers */
	background: -moz-linear-gradient(top, #299a0b 0%, #299a0b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #299a0b 0%,#299a0b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #299a0b 0%,#299a0b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}
.btn-blue {
	border:1px solid #4f85bb;
	background: #4f85bb; /* Old browsers */
	background: -moz-linear-gradient(top, #4f85bb 0%, #4f85bb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #4f85bb 0%,#4f85bb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #4f85bb 0%,#4f85bb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f85bb', endColorstr='#4f85bb',GradientType=0 ); /* IE6-9 */
}

.btn-gray {
	border:1px solid #606c88;
	background: #606c88; /* Old browsers */
	background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}
.btn-red { background-color: #dc3545;border-color: #dc3545;}




.ocs-nav a { font-size:14px; color:#CCC; padding:4px 9px; text-decoration:none; transition: color 0.3s;}
.ocs-nav a:hover { color:lightyellow; color:white;}
.ocs-nav a:last-of-type { padding-right:0;}

.ocs-search-text {
	width:100%; display:inline-block; 
	/*border-radius:4px 0 0 4px; padding:3px 3px 3px 32px;*/  
	padding-right:32px;	box-shadow:inset 1px 1px 2px rgba(0,0,0,.3); border:1px solid #999;
}
.ocs-search-text::placeholder {color:#999; font-size:15px;}
.ocs-search-text:focus {box-shadow:inset 1px 1px 2px rgba(0,0,0,.3); border:1px solid #666}


/*.ocs-search-submit {width:20%; display:inline-block; border-radius:0 4px 4px 0; color:#333;  border-left:0; background:#FFF; cursor:pointer; transition: background 0.3s, border 0.3s; padding:3px 8px 3px 8px; border:1px solid #FFF;}
.ocs-search-submit:hover { background:#000; border:1px solid #333; }
*/

/*Home + Catalog > Section********************************/
.section { display:inline-block; height: calc(100vh - 101px); overflow-y:scroll; overflow-x:hidden;}
.section::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.section::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.section::-webkit-scrollbar { width:10px;}
.section-filter, .section-product, .section-order { }
.section-filter { width:30%; background-color:#555; /*border-right:1px solid #555; box-shadow:none; box-shadow:0 2px 2px 2px rgba(0,0,0,.6)*/}
.section-product { width:70%; /*width:35%;*/  /*border-right:1px solid #CCC;*/}
.section-order { width:70%; /*width:35%;*/ background-color:#EFEFEF; border-left:1px solid #CCC; }
.section-home {width:70%; padding-bottom:50px;}
.section-content { padding:20px 10px 20px 10px; overflow-y:scroll; overflow:hidden;}
@media (max-width: 767px) {/*576px*/
	.section-filter, .section-product, .section-order, .section-home { width:100%;}
}
@media (max-width: 576px) {/*576px*/
	.section-content { padding:20px 4px 20px 4px; }
}


/*Filter Section********************************/
.filter-opt { color:#EEEEEE; width:100%; padding:4px 10px; cursor:pointer; transition: background-color .5s;}
.filter-opt:hover { background-color:#666;}
.filter-icon { font-size:13px; color:#888; }
.filter-cat { padding:20px 0; border-right:1px solid rgba(0,0,0,.3);}
.filter-brand {	padding:20px 0; border-left:1px solid rgba(255,255,255,.3);}
.filter-sc-f { cursor:pointer; background-color:#444; padding:4px; box-shadow: inset 0px 3px 2px -3px rgba(0,0,0,.8), inset 0px -3px 2px -3px rgba(0,0,0,.8); }
.filter-subcat { padding:3px 2px 3px 8px; color:#EEEEEE;}
.filter-subcat:hover { background-color:#555; transition: background-color .5s;}
.filter-subcat-active { background-color:#333;}
.filter-brand-active { background-color:#333;}

#filter_section_frame {
	position:relative; top:10px; z-index:1; width:0; height:0; overflow:visible;
}
#filter_section_btn {
	
	/*position:absolute; left:30%; top:130px; z-index:1;*/
	position:relative;
	left:-1px;
	border-radius:0 50% 50% 0;
	width:36px; height:40px;
	padding:5px 6px 5px 3px;
	background:#157d84;
	border:3px solid #116b72;
	color:#e3f4f0;
	line-height:1;
	border-left:none;
	box-shadow:1px 1px 2px rgba(0,0,0,.4);
	cursor:pointer;
	transition: border-top .1s, border-right .3s, border-bottom .6s, color .3s, background .3s;
	
}
#filter_section_btn:hover {
	border:3px solid #209aa3;
	border-left:none;
	color:#e3f4f0;/*116b72*/
	background:#2cc1cc;
}


/*Home ********************************/
.banner-bg, .featured-bg, .thum-responsive {  background-size:cover; background-position:center center; background-color:white; border:1px solid lightgray;}
.banner-bg { height:450px;}
/*.featured-bg { height:120px; border:1px solid #999; }*/
.thum-responsive {position:absolute; top:0; left:0; right:0; bottom:0; }









/*Product Section *******************************/


#sorting_select { width:280px;/*max-width:400px; min-width:280px;*/ line-height:1; cursor:default; display:table-cell; padding:8px 6px 10px 6px; border-radius:4px; border:1px solid #CCC; color:gray; text-align:left;}
@media (max-width: 650px) {	#sorting_select { width:180px;}}
@media (max-width: 320px) {	#sorting_select { width:130px;}}
/*#sorting_select:after { content:'v';  float:right; font-size:70%; position:relative; top:2px; right:4px;}*/
#sorting_select {
	background-image:url(../images/icons8-sort-down-24.png); 
	background-position:right; background-repeat:no-repeat;
}
#sorting_option { position:absolute; width:0; height:0; overflow:visible;}

.soption { position:relative; width:280px; height:200px; z-index:10; background:white; box-shadow:2px 2px 2px rgba(0,0,0,.2); border:1px solid #ccc;}

.soption > .srt { padding:6px 12px 8px 12px; text-align:left; cursor:default; background:#FFF; transition:background-color .3s;}
.soption > .srt:hover { background-color:#b7e5e5;}
.soption > .srt-active { background-color:#cbefef;}



.pardition, .pframe {display:inline-block;line-height:1;}
.pframe { width:30px; height:30px; margin:0 4px; text-align:center; vertical-align:middle; }
.bib > div { display:inline-block;width:10px; height:10px; margin:0 2px ; }
.lil > div {width:24px; height:6px; margin:3px 0; position:relative;}
.pframe > div {background:#CCC;transition:background .3s;}
.pframe-active > div {background:#177e84;}
.pframe:hover > div {background:#094549;}


/* Product item listing ***************************/
.p-item { padding:5px; /*padding-bottom:15px;*/}
.p-item:hover { background:#e3f4f0; }



/* Cart Section ***************************/
.qty-box {width:52px; margin:0 auto;}
.qty-input { width:50px;  border-radius:10px 10px 0 0; padding-left:2px; padding-right:2px; text-align:center; font-size:14px;}
.qty-input:focus { box-shadow:none;}
.btn-qty { 
	display:inline-block; position:relative; top:-1px; width:25px; height:30px; overflow:hidden;
	border:1px solid #BBB; background:#CCC; transition: background .5s;
	color:white; font-size:20px; text-align:center; vertical-align:middle; padding-top:3px;
	border-radius: 0 0 0 8px; cursor:pointer; 
}
.btn-qty:hover { background:#ffbb2b; border:1px solid #ffb20f;  }

.btn-qty-r { border-left:none; border-radius: 0 0 8px 0; }
.no-select {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */      
}

.wishlist { width:100%; height:0; overflow:visible; top:-30px; position:relative; }
.wl-icon { position:relative; width:30px; height:30px; float:right; background:#116b72; border-radius:50%; text-align:center; padding-top:2px; opacity:.6; cursor:pointer;}
.wl-icon:hover { opacity:.8;}
.wl-chosen {opacity:1;}
.wl-icon > .filter-icon { position:relative; font-size:18px; color:white; }
