.header
{
	width:100%;
	height:100px;
	background:#FFFFFF;
	padding:10px;
	-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
	position:fixed;
	z-index:2;
	min-width:320px;
}
.header .logo
{
	width:15%;
	float:left;
	margin-left:0;
}
.header .logo img
{
	width:150px;
	line-height:100px;
}
.header .menu
{
	width:68%;
	float:left;
	line-height:90px;
	z-index:1;
}
.header .menu .menu-left
{
	font-size:17px;
	color:#707070;
	padding:0 10px;
	margin-left:10px;
	z-index:1;
	cursor:pointer;
}
.header .menu a:hover,.header .menu a:focus
{
	color:#F36C21;
	text-decoration-line:none;
}
.header .collapse-active
{
	color:#F36C21;
}
/*----------------------------Start submenu subj-------*/
.submenu-subj
{
	position:fixed;
	font-size:15px;
	color:#707070;
	background:white;
	width:190px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	top:80px;
	margin-left:120px;
	display:none;
	max-height: calc(100vh - 50px - 50px); 
	overflow:auto;
}
@media screen and (max-width: 1190px) 
{
	.submenu-subj
	{
		margin-left:90px;
	}
}
.submenu-subj-before
{
	-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;
}
.submenu-subj-active
{
	display:block;
}
.submenu-subj img
{
	width:30px;
	margin-right:10px;
}
.submenu-subj a
{
	display:block;
	height:55px;
	line-height:55px;
	padding-left:25px;
	margin-left:0;
}
.submenu-subj a:hover,.submenu-subj a:focus
{
	text-decoration-line:none;
	color:#F36C21;
}
/*----------------------------End submenu subj-------*/
/*----------------------------Start submenu content-------*/
.submenu-content
{
	position:fixed;
	font-size:15px;
	color:#707070;
	background:white;
	width:190px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	top:80px;
	margin-left:350px;
	display:none;
	max-height: calc(100vh - 50px - 50px); 
	overflow:auto;
}
@media screen and (max-width: 1199px) 
{
	.submenu-content
	{
		margin-left:280px;
	}
}
.submenu-content-before
{
	-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;
}
.submenu-content-active
{
	display:block;
}
.submenu-content a
{
	display:block;
	height:55px;
	line-height:55px;
	padding-left:25px;
	margin-left:0;
}
.submenu-content a:hover,.submenu-content a:focus
{
	text-decoration-line:none;
	color:#F36C21;
}
/*----------------------------End submenu content-------*/
/*----------------------------Start submenu about-us-------*/
.submenu-about-us
{
	position:fixed;
	font-size:15px;
	color:#707070;
	background:white;
	width:190px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
	top:80px;
	margin-left:830px;
	display:none;
	max-height: calc(100vh - 50px - 50px); 
	overflow:auto;
}
@media screen and (max-width: 1199px) 
{
	.submenu-about-us
	{
		margin-left:280px;
	}
}
.submenu-about-us-before
{
	-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;
}
.submenu-about-us-active
{
	display:block;
}
.submenu-about-us a
{
	display:block;
	height:55px;
	line-height:55px;
	padding-left:25px;
	margin-left:0;
}
.submenu-about-us a:hover,.submenu-about-us a:focus
{
	text-decoration-line:none;
	color:#F36C21;
}
/*----------------------------End submenu about-us-------*/
.header .btn-collapse
{
	position:absolute;
	margin-left:-5px;
	display:none;
	font-size:26px;
	top:20px;
	color:#9C9C9C;
}
.header .btn-collapse:hover
{
	color:#9C9C9C;
}
.header .profile
{
	width:17%;
	float:left;
	text-align:right;
	line-height:90px;
}
.header .profile a
{
	color:#9C9C9C;
	font-size:28px;
	margin-left:10px;
}
.header .profile a:hover,.header .menu a:focus
{
	color:#F36C21;
	text-decoration-line:none;
}
@media screen and (max-width: 1199px) 
{
	.header .menu .menu-left
	{
		font-size:14px;
	}
}
@media screen and (max-width: 1024px) 
{
	.header
	{
		height:130px;
	}
	.header .logo
	{
		width:50%;
		float:left;
		position:absolute;
		left:20px;
	}
	.header .logo img
	{
		position:absolute;
		top:-5px;
	}
	.header .profile
	{
		width:50%;
		float:left;
		position:absolute;
		right:10px;
		line-height:80px;
	}
	.header .menu
	{
		width:180px;
		max-height: calc(100vh - 50px - 50px); 
		display:block;
		background:#FFFFFF;
		position:absolute;
		left:-190px;
		top:80px;
		box-shadow:0 5px 15px -5px #00000070;
		overflow: auto;
	}
	.header .menu-before
	{
		-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;
	}
	.header .menu-active
	{
		left: 0;
		top: 80px;
	}
	.header .menu .menu-left
	{
		display:block;
		-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
		height:80px;
		line-height:80px;
		padding-left:25px;
		margin-left:0;
	}
	.header .menu .icon
	{
		right:25px;
		position:absolute;
		margin-top:30px;
		transform: rotate(270deg);
	}
	.header .btn-collapse
	{
		display:block;
	}
	.header .logo img
	{
		width:120px;
		margin-left:30px;
		margin-top:5px;
	}
	/*----------------------------Start submenu subj-------*/
	.submenu-subj
	{
		left: 180px;
		top:80px;
		max-height: calc(100vh - 50px - 50px); 
		overflow:auto;
		margin-left:0;
		z-index:-1;
	}
	.submenu-subj-before
	{
		-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;
	}
	.submenu-subj-active
	{
		display:block;
	}
	/*----------------------------End submenu subj-------*/
	/*----------------------------Start submenu subj-------*/
	.submenu-content
	{
		left: 180px;
		top:80px;
		display:none;
		max-height: calc(100vh - 50px - 50px); 
		overflow:auto;
		margin-left:0;
	}
	.submenu-content-before
	{
		-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;
	}
	.submenu-content-active
	{
		display:block;
	}
	/*----------------------------End submenu subj-------*/
/*----------------------------Start submenu about-us-------*/
	.submenu-about-us
	{
		left: 180px;
		top:80px;
		display:none;
		max-height: calc(100vh - 50px - 50px); 
		overflow:auto;
		margin-left:0;
	}
	.submenu-about-us-before
	{
		-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;
	}
	.submenu-about-us-active
	{
		display:block;
	}
	/*----------------------------End submenu about-us-------*/
}
.img-profile
{
	width: 33px;
    height: 33px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
	margin: 0 auto;
	z-index:0;
	top:5px;
}
.img-member
{
	display: inline;
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index:-1;
}
.submenu-profile
{
	width:300px;
	max-height: calc(100vh - 50px - 50px); 
	display:block;
	background:#FFFFFF;
	top:80px;
	box-shadow:0 5px 15px -5px #00000070;
	overflow: auto;
}
.submenu-img-profile
{
	width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
	margin: 0 auto;
	z-index:0;
}
.submenu-profile-img img
{
	display: inline;
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index:-1;
}
.submenu-profile-img
{
	width:45%;
	float:left;
}
.submenu-profile-desc
{
	width:55%;
	float:left;
	line-height:25px;
	text-align:left;
	padding:10px;
}
.notification 
{
	position: relative;
	display: inline-block;
}
.notification .badge 
{
	position: absolute;
	top: -10px;
	right: -10px;
	font-size:10px;
	padding: 5px 10px;
	border-radius: 50%;
	background: #F36C21;
	color: white;
	box-shadow:0 5px 15px -5px #00000070;
}
.basket-active
{
	color:#F36C21;
	opacity:.7;
}
.basket-none
{
	display:none;
}
.dropdown-profile
{
	margin-left:10px;
}
.header .profile a.sub-profile
{
	font-size:14px;
	color:#707070;
}
.header .profile a.sub-profile:hover
{
	color:#F36C21;
}
.dropdown-menu>li>a
{
	padding: 10px 30px;
}
.search-body
{
	box-shadow:0 3px 3px 0 rgb(0,0,0,0.16);
	width:460px;
	max-width:100%;
	margin-top:60px;
	z-index:99;
	background:white;
	margin-left:615px;
	padding:10px;
	padding-bottom:20px;
	background:#F7F5F4;
	position:relative;
}
.search-body-before
{
	display:none;
	-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;
}
.btn-submit
{
	width:auto;
	padding-left:30px;
	padding-right:30px;
	position:absolute;
	right:10px;
	top:33px;
	height:33px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
@media screen and (max-width: 1199px) 
{
	.search-body
	{
		margin-left:420px;
	}
	.btn-submit
	{
		top:30px;
	}
}
@media screen and (max-width: 1024px) 
{
	.search-body
	{
		position:absolute;
		right:0;
		top:20px;
	}
	.btn-submit
	{
		top:10px;
	}
}
.search-body input 
{
	border-radius:25px;
	font-size:13px;
	padding-right:100px;
}
.search-body-active
{
	display:block;
}
#switch-search
{
	cursor:pointer;
}
.card
{
	padding: .75rem;

	margin: 2.5px;
	margin-bottom: 10px;
	border: 0;
	flex-basis: 90%;
	flex-grow: 0;
	flex-shrink: 0;
	box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.16);
	border-radius: 5px;
	position: relative;
}
.btn-purple
	{
		width:100%;
		background-color:#2F358B;
		color:white;
		border-radius: 25px;
		font-size:13px;
	}
	.btn-purple:hover
	{
		background-color:white;
		border-color:#2F358B;
		color:#2F358B;
	}
	.btn-purple-white
	{
		width:100%;
		background-color:white;
		color:#2F358B;
		border-color:#2F358B;
		border-radius: 25px;
		font-size:13px;
	}
	.btn-purple-white:hover
	{
		background-color:#2F358B;
		border-color:#2F358B;
		color:white;
	}
	.btn-blue
	{
		width:100%;
		background-color:#06559F;
		color:white;
		border-radius: 25px;
		font-size:13px;
	}
	.btn-blue:hover
	{
		background-color:white;
		border-color:#06559F;
		color:#06559F;
	}
	.btn-blue-white
	{
		width:100%;
		background-color:white;
		color:#06559F;
		border-color:#06559F;
		border-radius: 25px;
		font-size:13px;
	}
	.btn-blue-white:hover
	{
		background-color:#06559F;
		border-color:white;
		color:white;
	}
	.btn-yellow
	{
		width:100%;
		background-color:#f0bd3b;
		color:white;
		border-radius: 25px;
		font-size:13px;
	}
	.btn-yellow:hover
	{
		background-color:white;
		border-color:#f0bd3b;
		color:#f0bd3b;
	}
	.btn-yellow-white
	{
		width:100%;
		background-color:white;
		color:#f0bd3b;
		border-color:#f0bd3b;
		border-radius: 25px;
		font-size:13px;
	}
	.btn-yellow-white:hover
	{
		background-color:#f0bd3b;
		border-color:white;
		color:white;
	}
	.btn-orange
	{
		width:100%;
		background-color:#F36F24;
		color:white;
		border-radius: 25px;
		font-size:12px;
	}
	.btn-orange:hover
	{
		background-color:white;
		border-color:#F36F24;
		color:#F36F24;
	}
	.btn-red
	{
		width:100%;
		background-color:#E92B0B;
		color:white;
		border-radius: 25px;
		font-size:12px;
	}
	.btn-red:hover
	{
		background-color:white;
		border-color:#E92B0B;
		color:#E92B0B;
	}
	.btn-grey
	{
		width:100%;
		background-color:#707070;
		color:white;
		border-radius: 25px;
		font-size:12px;
	}
	.btn-grey:hover
	{
		background-color:white;
		border-color:#707070;
		color:#707070;
	}
	.btn-orange-cart
	{
		width:100%;
		background-color:white;
		border-color:#F36F24;
		color:#F36F24;
		border-radius: 25px;
		font-size:12px;
	}
	.btn-orange-cart:hover
	{
		background-color:#F36F24;
		color:white;
	}
	.btn-red-cart
	{
		width:100%;
		background-color:#F36F24;
		border-color:#F36F24;
		color:white;
		border-radius: 25px;
		font-size:12px;
	}
	.btn-red-cart:hover
	{
		background-color:white;
		color:#F36F24;
	}
.font-16{
	font-size:16px;
}
.font-30{
	font-size:30px;
}
.font-40{
	font-size:40px;
}
@media screen and (max-width: 640px) 
{
	p{
	font-size:14px;
	}
	.font-30{
		font-size:20px;
	}
	.font-40{
		font-size:30px;
	}
	.header{
		height:100px;
	}
}
//subj
.subj_color{
		color: transparent;  
		text-shadow: 0 0 0 blue;	
	}
	.subj_bgcolor{
		color: white;  
		background : blue;
		border-radius: 5px;
		padding:3px;
	}
	.subj01_color{
		color: transparent;  
		text-shadow: 0 0 0 #f8af3c;	
	}
	.subj01_bgcolor{
		color: white;  
		background : #f8af3c;
		border-radius: 5px;
		padding:3px;
	}
	.subj04_color{
		color: transparent;  
		text-shadow: 0 0 0 #c0282e;	
	}
	.subj04_bgcolor{
		color: white;  
		background : #c0282e;
		border-radius: 5px;
		padding:3px;
	}
	.subj05_color{
		color: transparent;  
		text-shadow: 0 0 0 #569fd1;	
	}
	.subj05_bgcolor{
		color: white;  
		background : #569fd1;
		border-radius: 5px;
		padding:3px;
	}
	.subj06_color{
		color: transparent;  
		text-shadow: 0 0 0 #00a99d;	
	}
	.subj06_bgcolor{
		color: white;  
		background : #00a99d;
		border-radius: 5px;
		padding:3px;
	}
	.subj07_color{
		color: transparent;  
		text-shadow: 0 0 0 #34ad72;	
	}
	.subj07_bgcolor{
		color: white;  
		background : #34ad72;
		border-radius: 5px;
		padding:3px;
	}
	.subj20_color{
		color: transparent;  
		text-shadow: 0 0 0 #b97cb3;	
	}
	.subj20_bgcolor{
		color: white;  
		background : #b97cb3;
		border-radius: 5px;
		padding:3px;
	}
	.subj22_color{
		color: transparent;  
		text-shadow: 0 0 0 #8cbf44;	
	}
	.subj22_bgcolor{
		color: white;  
		background : #8cbf44;
		border-radius: 5px;
		padding:3px;
	}
	.subj23_color{
		color: transparent;  
		text-shadow: 0 0 0 #34ad72;	
	}
	.subj23_bgcolor{
		color: white;  
		background : #34ad72;
		border-radius: 5px;
		padding:3px;
	}
	.subj24_color{
		color: transparent;  
		text-shadow: 0 0 0 #00a99d;	
	}
	.subj24_bgcolor{
		color: white;  
		background : #00a99d;
		border-radius: 5px;
		padding:3px;
	}
	.subj40_color{
		color: transparent;  
		text-shadow: 0 0 0 #b97cb3;	
	}
	.subj40_bgcolor{
		color: white;  
		background : #b97cb3;
		border-radius: 5px;
		padding:3px;
	}
	.subj59_color{
		color: transparent;  
		text-shadow: 0 0 0 #362050;	
	}
	.subj59_bgcolor{
		color: white;  
		background : #362050;
		border-radius: 5px;
		padding:3px;
	}
	.subj71_color{
		color: transparent;  
		text-shadow: 0 0 0 #c0282e;	
	}
	.subj71_bgcolor{
		color: white;  
		background : #c0282e;
		border-radius: 5px;
		padding:3px;
	}
	.subj77_color{
		color: transparent;  
		text-shadow: 0 0 0 #72cbd7;	
	}
	.subj77_bgcolor{
		color: white;  
		background : #72cbd7;
		border-radius: 5px;
		padding:3px;
	}
	.subj87_color{
		color: transparent;  
		text-shadow: 0 0 0 #fa2020;	
	}
	.subj87_bgcolor{
		color: white;  
		background : #fa2020;
		border-radius: 5px;
		padding:3px;
	}	
	.subj88_color{
		color: transparent;  
		text-shadow: 0 0 0 #fa2020;	
	}
	.subj88_bgcolor{
		color: white;  
		background : #fa2020;
		border-radius: 5px;
		padding:3px;
	}
	.subj97_color{
		color: transparent;  
		text-shadow: 0 0 0 #F36C21;	
	}
	.subj97_bgcolor{
		color: white;  
		background : #F36C21;
		border-radius: 5px;
		padding:3px;
	}
	.subj9B_color{
		color: transparent;  
		text-shadow: 0 0 0 #ffa8b5;	
	}
	.subj9B_bgcolor{
		color: white;  
		background : #ffa8b5;
		border-radius: 5px;
		padding:3px;
	}