@import url("nx.css_margin.css");
@import url("nx.css_padding.css");
@import url("nx.css_spacer.css");
@import url("nx.css_font-color.css");
@import url("nx.css_bg-color.css");
@import url("nx.css_button_style.css");
@import url("nx.css_font-styled-size.css");
@import url("nx.css_font-family.css");
@import url("nx.css_bg-gradient.css");
@import url("nx.css_border_radius.css");
@import url("nx.css_box-shadow.css");
@import url("nx.css_grid.css");
/* REM to PIXEL scale
 ===================*/
/*
0.0625rem = 1px = pd-1
0.125rem = 2px = pd-2
0.1875rem = 3px = pd-3
0.250rem = 4px = pd-4
0.3125rem = 5px = pd-5
0.375rem = 6px = pd-6
0.4375rem = 7px = pd-7
0.500rem = 8px = pd-8
0.5625rem = 9px = pd-9
0.625rem = 10px = pd-10
0.750rem = 12px = pd-12
0.875rem = 14px = pd-14
1rem = 16px = pd-16
1.250rem = 20px = pd-20
1.875rem = 30px = pd-30
2.5rem = 40px = pd-40
*/

/*** NX - Grid Wrappper=============  */
.grid-autofit {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    justify-content:center;
    align-items:center;
    height:100%;
  }
  /***** Grid Col Item **/
  .grid-col-item{
    display:flex;
    flex-direction: column;
    align-content: center;
    gap: 20px;
    border-radius: 12px;
    padding: 0;
    width:auto;
    min-height:316px;
    height:auto;
    background-color: #fff;
    margin-bottom:6px;
    border:1px solid #ffffff;
    overflow: hidden;
    flex-wrap: wrap;
  }
  .grid-item-header{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    width:100%;
    min-height: 50px;
  }
  .grid-item-header svg{
    margin-right:20px;
  }
  .grid-item-content{
    padding:14px;
    text-align:left;
  }
  /******* Grid Cols MinMax ************/
  @media (min-width: 1024px){
    .grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  }
  @media (min-width:640px) and (max-width: 1120px){
    .grid-cols-3 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  }
  @media (max-width: 639px){
  .grid-cols-1 {
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
  }
/******* Grid Cols MinMax ************/
.grid-wrapper{
	display:grid;
	/*gap: 0.500rem;*/
	/*column-gap: 20px;*/
	grid-template-areas:"nx-section nx-sidebar nx-sidebar-child";
	/*grid-template-columns:minmax(0,1.2fr) minmax(0,0.6fr) minmax(0,0.2fr);*/
	grid-template-columns:repeat(auto-fit, minmax(0,1.0fr) minmax(0,0.8fr) minmax(0,0.4fr));
	padding-left: 0.250rem;
	padding-right: 0.250rem;
	}
@media only screen and (max-width: 1365px){
	.grid-wrapper{
		display: flex;
		gap: .500rem;
		padding-left: 0.250rem;
		padding-right: 0.250rem;
		flex-direction: column;
		}
		}

/***  Grid Wrapper Category Product List *****/
.grid-wrapper-catproduct-list{
	display:grid;
	grid-template-areas:"nx-section nx-sidebar";
	grid-template-columns:repeat(auto-fit, minmax(0,1.6fr) minmax(0,0.4fr));
	padding-left: 0.250rem;
	padding-right: 0.250rem;
		}
@media only screen and (max-width: 1365px){
	.grid-wrapper-catproduct-list{
		display: flex;
		gap: .500rem;
		padding-left: 0.250rem;
		padding-right: 0.250rem;
		flex-direction: column;
			}
			}
		/***  Grid Wrapper Category Product List *****/
		/*** Grid Wrapper Store ***/
		.grid-wrapper-store-default{
			display:grid;
			grid-template-areas:"nx-section nx-sidebar-child nx-sidebar ";
			grid-template-columns:repeat(auto-fit, minmax(0,0.5fr) minmax(0,0.09fr) minmax(0,0.5fr));
			padding-left: 0.250rem;
			padding-right: 0.250rem;
			}
			@media only screen and (max-width: 1365px){
				.grid-wrapper-store-default{
					display: flex;
					flex-direction: row;
					justify-content: center;
    				align-content: center;
					gap: .500rem;
					padding-left: 0.250rem;
					padding-right: 0.250rem;
					flex-direction: column;
			}
			}
		.grid-wrapper-store-default .nx-sidebar {
			grid-area: nx-sidebar;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
		  }

/*** 
===== Grid Wrapper Store ***/
.grid-wrapper-gap-10{
    column-gap: 10px;
}
.grid-wrapper-gap-20{
    column-gap: 20px;
}
.grid-wrapper-gap-30{
    column-gap: 30px;
}
.large-wrapper-sl{
		display: grid;
		gap: 0.500rem;
		grid-template-areas:"nx-section nx-sidebar";
		grid-template-columns:repeat(auto-fit, minmax(0,1.6fr) minmax(0,0.5fr));
		padding-left: 0.750rem;
		padding-right: 0.750rem;
		}
		@media only screen and (max-width:1120px){
			.large-wrapper-sl{
				display: flex;
  			gap: 1rem;
  			padding-left: 0.750rem;
  			padding-right: 0.750rem;
  			flex-direction: column;
		}
		}
/***** NX - Grid Wrappper ****/
/***** NX Sections *******/
/***** Authorized Sections ****/
nx-section{min-height:auto;}
nx-sidebar{min-height:auto;}
nx-sidebar-child{min-height:auto;}
.nx-main-content{
grid-area: nx-section;
padding-bottom:.5rem;
padding-top:.5rem;
flex-direction:column;
width: 100%;
display:flex;
align-content: center;
}
.nx-section{
	grid-area: nx-section;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
.nx-sidebar{
	grid-area:nx-sidebar;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
.nx-sidebar-child{
	grid-area:nx-sidebar-child;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
/****** Authorized Sections ********/
/************* NX Sections *********/
/**** Width content % adaptive ******/
.large{
	width:100%;
}
.middle{
	width:50%;	
}
.quarter{
	width:25%;
}
/**** Width content % adaptive *****/
/****** Section Screen Size  Height ****/
.section-height-80-view{
height:100%;
min-height: 650px;
}
@media only screen and (min-width:1440px){
    .section-height-80-view{
        height:80vh !important;
        min-height: 650px;
        }
}
.section-height-90-view{
    height:90vh !important;
    }
.section-height-full-view{
        height:100vh !important;
        }
/****** Section Screen Size  Height ****/

/* Section Large Size
======================*/
.section-fluid{
	max-width:100%;
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
.section-l12{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
      
.section-l11{
    display: flex;
    justify-content: center;
    align-content: center;
    width:91.66666667%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l10{
    display: flex;
    justify-content: center;
    align-content: center;
    width:83.33333333%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l9{
    display: flex;
    justify-content: center;
    align-content: center;
    width:75%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l8{
    display: flex;
    justify-content: center;
    align-content: center;
    width:66.66666667%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l7{
    display: flex;
    justify-content: center;
    align-content: center;
    width:58.33333333%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l6{
    display: flex;
    justify-content: center;
    align-content: center;
    width:50%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l5{
    display: flex;
    justify-content: center;
    align-content: center;
    width:41.66666667%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l4{
    display: flex;
    justify-content: center;
    align-content: center;
    width:33.33333333%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l3{
    display: flex;
    justify-content: center;
    align-content: center;
    width:25%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l2{
    display: flex;
    justify-content: center;
    align-content: center;
    width:16.66666667%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.section-l1{
    display: flex;
    justify-content: center;
    align-content: center;
    width:8.33333333%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}

.section-row-col-fluid{
display:flex;
flex-direction: row;
align-content: center;
justify-content: center;
max-width:100%;
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
}
@media only screen and (max-width:1080px){
    .section-row-col-fluid{
        display:flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        max-width:100%;
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        }
}
/* Section Large Size
======================*/
/******** Col Flex *************/
.col-flex{
    display:flex;
    flex-direction: row;
    align-content: center;
    align-items: inherit;
    justify-content: center;
    margin-left:auto;
    margin-right:auto;
}
@media only screen and (max-width: 1120px){
    .col-flex{
        display:flex;
        flex-direction: column;
        align-content: center;
        align-items: inherit;
        justify-content: center;
        margin-left:auto;
        margin-right:auto;
        text-align: center; 
    }
    }
/******** Col Flex *************/
/**** HERO section ***/
.hero-row {
    display: flex;
    flex-direction: row;
    flex: 0 0 100%;
    min-height: 450px;
    height:auto;
    justify-content: space-between;
}
@media only screen and (max-width: 1120px){
    .hero-row {
        display: flex;
        flex-direction: column;
        flex: 0 0 100%;
        min-height: 450px;
        height:auto;
        justify-content: space-between;
    }
}
/***** HERO section ***/
/*	Flex Direction
======================*/
.flex-direction-col{
	flex-direction: column !important;
}
.flex-direction-row{
	flex-direction: row !important;
}
/*	Flex Direction
======================*/
/* Flex Align
=======================*/
.flex-align-baseline{
    align-items: baseline !important;
}
.flex-align-center{
    align-items: center !important;
}
.flex-align-start{
    align-items: flex-start !important;
}
.flex-align-end{
    align-items: flex-end !important;
}
/* Justify for Row */
.flex-justify-left{
    justify-content: left !important;
}
.flex-justify-right{
    justify-content: right !important;
}
.flex-justify-center{
    justify-content: center !important; /* Middle Center */
}
/* Justify for Column */
.flex-justify-start{
justify-content: flex-start !important; /* On Top */
}
.flex-justify-end{
justify-content: flex-end !important; /* On Bottom */
}
/* Flex Align
=======================*/
/* Position Absolute Relative
=======================*/
.absolute {
    position: absolute !important;
  }
  .relative{
    position: relative !important;
  }
/* Containers - Fluid, Small, Default, Large, Expanded
=====================================================*/
.container-col-fluid{
    display: flex;
    flex-direction: column !important;
    flex-wrap: wrap;
    align-content: center;
    max-width:100%;
    width:100%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    }
.container-small{
    display: flex;
    flex-direction: column;
    max-width:950px;
    width:100%;
    height: 100%;
    margin: auto;
    margin: 0px;
    border: 1px solid #D0D0D0;
    }
.container-default{
    display: flex;
    flex-direction: column;
    max-width:1200px;
    width:100%;
    height: 100%;
    margin: auto;
    margin: 0px;
    }
.container-large{
    display: flex;
    flex-direction: column;
    max-width:1400px;
    width:100%;
    height: 100%;
    margin: auto;
    margin: 0px;
    }
    .container-tinylarge{
        display: flex;
        flex-direction: column;
        max-width:1600px;
        width:100%;
        height: auto;
        margin: auto;
        margin: 0px;
        }
    .container-expanded{
    display: flex;
    flex-direction: column;
    max-width:2500px;
    width:100%;
    height: 100%;
    margin: auto;
    margin: 0px;
    }

    /******** Inner Column Container
    ===============================*/
    @media (min-width: 1400px){
        .inner-col-container-large {
            width: 100%;
            max-width: 1400px;}
      }
    .inner-col-container-large{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-right: 2rem;
        padding-left: 2rem;
    }
    @media only  screen and (max-width:800px){
        .inner-col-container-large{
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            padding-right: .5rem;
            padding-left: .5rem;
        }
    }
/*	Content - small, default, large, expanded
================================================*/
.content-small{
	display: flex;
	align-content: center;
   	align-items: center;
   	max-width: 950px;
	width:100%;
	height: auto;
	margin: auto;
	padding:0;
		}
.content-default{
	display: flex;
	align-content: center;
   	align-items: center;
   	max-width: 1200px;
	width:100%;
	height: auto;
	margin: auto;
	padding:0;
		}
.content-large{
	display: flex;
	align-content: center;
   	align-items: center;
   	max-width: 1400px;
	width:100%;
	height: auto;
	margin: auto;
	padding:0;
	}
.content-xlarge{
    display: flex;
    align-content: center;
    align-items: baseline;
    max-width: 1650px;
    width:100%;
    height: auto;
    margin: auto;
    padding:0;
    }
.content-expanded{
	display: flex;
	align-content: center;
   	align-items: center;
   	max-width: 1850px;
	width:100%;
	height: auto;
	margin: auto;
	padding:0;
		}
/* Containers - Fluid, Small, Default, Large, Bigger
=====================================================*/
/************** Col-Content ************/
.nx-col-fluid{
	display:flex;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	/*justify-content: flex-start;*/
	flex-direction:column;
	align-content: center;
	width:100%;
	height:auto;
	padding: 0px;
}

.col-content{
	display:flex;
	align-content: center;
	flex-direction: column;
    width: 100%;
    height: 100%;
}
.col-section-thumb{
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	flex:0 0 auto;
	margin-left:auto;
	margin-right:auto;
}
@media only screen and (max-width:1365px){
	.col-section-thumb{
		display: flex;
		flex-flow: row wrap;
		flex-direction: row;
		align-content: center;
		align-items: center;
		justify-content: center;
		flex:0 0 auto;
		margin-left:auto;
		margin-right:auto;
	}
}
/************* Col Width *********/
/************ Inner NX Row **************/
.nx-row-inner{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inner-flex-row{
    display: flex;
    flex-direction: row; /* display inline row */
	align-items: baseline; /* display vertical center middle */
}
.inner-flex-column{
    display: flex;
    flex-direction: column;
    align-content: center;
}
.nx-row-fluid{
	display:flex;
	/*flex-wrap: wrap;*/
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content:center;
	flex-direction:row !important;
	align-content: center;
    align-items: center;
	width:100%;
	height:auto;
	padding: 0px;
    gap: 2rem;
}
@media only screen and (max-width: 1120px){
.nx-row-fluid{
	flex-direction:column !important;
	align-content: center;
	justify-content: center;}
}
.nx-row-large{
	max-width:1200px;
	width:100%;
	margin-left: auto;
    margin-right: auto;
}
/************ NX Row **************/
/* NX-Col-Width
=====================*/
	.nx-col-1{flex:0 0 auto;width:8.33333333%}
    .nx-col-2{flex:0 0 auto;width:16.66666667%}
    .nx-col-3{flex:0 0 auto;width:25%}
    .nx-col-4{flex:0 0 auto;width:33.33333333%}
    .nx-col-5{flex:0 0 auto;width:41.66666667%}
    .nx-col-6{flex:0 0 auto;width:50%}
    .nx-col-7{flex:0 0 auto;width:58.33333333%}
    .nx-col-8{flex:0 0 auto;width:66.66666667%}
    .nx-col-9{flex:0 0 auto;width:75%}
    .nx-col-10{flex:0 0 auto;width:83.33333333%}
    .nx-col-11{flex:0 0 auto;width:91.66666667%}
    .nx-col-12{flex:0 0 auto;width:100%} 

    @media only screen and (max-width:1120px){
       .nx-col-1,.nx-col-2,.nx-col-3,.nx-col-4,.nx-col-5,.nx-col-6,.nx-col-7,.nx-col-8,.nx-col-9,.nx-col-10,.nx-col-11,.nx-col-12{
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            justify-content: center;
            flex:0 0 auto;
            width:100% !important;
} 
    }
    /* NX-Col-Width
==========*/
/*** Breakpoint
==========*/
.breakpoint-sm{
    max-width:var(--breakpoint-sm);
    width:100%;
}
.breakpoint-md{
    max-width:var(--breakpoint-md);
    width:100%;
}
.breakpoint-lg{
    max-width:var(--breakpoint-lg);
    width:100%;
}
.breakpoint-xl{
    max-width:var(--breakpoint-xl);
    width:100%;
}
.breakpoint-xxl{
    max-width:var(--breakpoint-xxl);
    width:100%;
}
.breakpoint-xxxl{
    max-width:var(--breakpoint-xxxl);
    width:100%;
}
.breakpoint-full{
    max-width:var(--breakpoint-full);
    width:100%;
}
/*** Breakpoint
==========*/
/*	Breadcrumbs
==============*/
.nx-breadcrumbs-content-nav{
	display:flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	justify-content: center;
	background: #d7dadd;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
}
.breadcrumb{
	display:flex;
	flex-direction: row;
	align-items: center;
	padding-left:14px;
	padding-right:14px;
}

.nx-breadcrumbs-content-nav .breadcrumb ol {
	text-align: left;
	padding-left: 0;
	margin-bottom: 0;
  }

  .nx-breadcrumbs-content-nav .breadcrumb ol li {
	display: inline;
  }

  .nx-breadcrumbs-content-nav .breadcrumb ol li::after {
	color: #253237;
	margin: 0 10px;
	vertical-align: -1px;
	content: ">";
  }
/*	Breadcrumbs
=======================*/
/*	Product Card
========================*/
.nx-card {
	position: relative;
    box-sizing: border-box;
    transition: .2s ease-in-out;
    transition-property: all;
    transition-property: color,background-color,background-size,border-color,box-shadow;
    border-radius: 12px;
	box-shadow: 0px 0px 0px rgba(255,255,255,.8),15px 15px 20px rgba(70, 81, 161, 0.10);	
}
.nx-card:hover {
	box-shadow: 0px -2px 5px rgba(255,255,255,.9),2px 2px 8px rgba(68, 81, 181, 0.35);
	}
.nx-card-default {
	background: #fff;
	color: #555371;
	border: 1px solid rgba(107, 120, 136, 0.47);
	margin-top:4px;
	margin-bottom:14px;
	}	

.product-card-col-33{
	display: inline-block;
	max-width: 445px;
	min-height: 315px;
	width: 445px;
	padding: 0px;
	margin-left: 10px;
	margin-right: 10px;
	overflow: hidden;	
}
@media only screen and (max-width:1024px){
	.product-card-col-33{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		max-width: 35rem;
		min-height: 300px;
		width: 100%;
		padding: 0px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}
}
.product-card-header{
width:100%;
height: 285px;
padding:0px;
position: relative;
overflow: hidden;
}
.product-marker-row-icon{
position: absolute;
top: 0px;
right: 0px;
display: block;
text-align: center;
background: #ffac0f;
letter-spacing: 0.150rem;
width: 142px;
height: 32px;
line-height: 33px;
/*border-radius:0 0 0 12px;*/
border-bottom-left-radius:12px;
z-index: 999;
}
.product-card-body{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:14px;
	background-color: #fff;
}
.product-card-footer{
	display:flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	width:100%;
	height:46px;
	padding:5px 3px;
	background: rgb(232, 237, 245);
	border-top: 1px solid #d5d5d5;
	line-height: 38px;
}
/*	Product Card
============*/