*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}

html{
	font-size: 62.5%;
}

body{
	font-size:1.6rem;
	padding:5px 0 0;
	background: url("image/pel19810_onecard_homepagebgnd.png");
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}

a{
	text-decoration:none;
	color:none;
}

img{
	max-width:100%;
	height:auto;
}

input{
	border:none;
}

button{
	border:none;
	background:none;
	cursor:pointer;
}



.hide{
	display:none;
}



.top-wrap{
	width:1200px;
	margin:0 auto;
}

.c-flex-wrap{
	display:flex;
	text-align:center;
}

/*****************
	Header
******************/
.header{
	font-family:"FreightSansSemibold",Helvetica,Arial,sans-serif;
	font-weight: bold;
}

.nav-top{
	width:50%;
}

.nav-top-menu{
	flex-basis:20%;
	background:#51A931;
	padding: 10px 0;
	font-size:1.5rem;
	margin-right:2px;
	font-weight:bold;
	color:white;
	
	-webkit-transition: background 0.5s ease;
   	-moz-transition: background 0.5s ease;
    -ms-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    transition: background 0.5s ease;
}

.nav-top-menu:last-child{
	margin-right:0;
}


.nav-top-menu:hover{
	background:#00501f;
}




.nav-middle{
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	
	background:white;
	height: 72px;
	text-transform: uppercase;	    
	margin-bottom: 4px;
}

.logo{
	display: flex;
	align-items: center;
}

.mob-menu{
	display:none;
	font-size: 1.8em;

	text-align: center;

	font-weight: lighter;

	color: #00501f;

	background: #e9e9e9;

	padding: 2px 7px;

	margin-left: 9px;
}

.nav-middle a {
	color:white;
}

.nav-middle > *{
	cursor: pointer;
}

.btn-store, .btn-contact{
	font-size:1.2rem;
	padding:0 10px;

	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.btn-store a, .btn-contact a{
	color:#e4181b;
}

.btn-store img, .btn-contact img{
	width:65%;
}

.btn-store img:hover, .btn-contact img:hover{
	transform: scale(1.1);
}


.btn-store, .btn-contact, .btn-onecard, .login-register{
	border-left:2px solid #e9e9e9;
	position: relative;
}

.btn-onecard{
	background-image: url("image/hdr_bg_onecard.jpg");
}

.login-register{
	display:flex;
	flex-direction:column;
	-webkit-justify-content: center;
	        justify-content: space-around;
	text-align:left;
	align-items:center;
}
	
	.btn-login, .btn-register{
		flex:1;
		line-height:100%;
		padding:10px;
		width:117px;
	}

	.btn-login:hover i, .btn-register:hover i{
		-webkit-transform: translate(3px);
		   -moz-transform: translate(3px);
		    -ms-transform: translate(3px);
		     -o-transform: translate(3px);
		        transform: translate(3px);
	}

		.icon-container{
			position: relative;
			display: inline-block;
			width:100%;
		}

		.icon-right{
			position: absolute;
			right:0;
			
			-webkit-transition: all 0.3s ease;
	       	-moz-transition: all 0.3s ease;
	        -ms-transition: all 0.3s ease;
	         -o-transition: all 0.3s ease;
	            transition: all 0.3s ease;
		}

	.btn-login{
		border-bottom: 2px solid #e9e9e9;
		background: url("image/hdr_bg_onecard.jpg")
	}
	.btn-register{
		background-color:#e8520d;
	}




.nav-bottom{
	background:white;
	border-bottom: 1px solid #e9e9e9;
	height:50px;
	align-items: center;
	justify-content: space-between;
	flex-wrap:wrap;
	position: relative;
}

	.nav-bottom-menues{
		display:flex;
	}


		.btn-green{
			color:#51a931;
			-webkit-transition: all 0.4s ease;
			   -moz-transition: all 0.4s ease;
			    -ms-transition: all 0.4s ease;
			     -o-transition: all 0.4s ease;
			        transition: all 0.4s ease;
		}

		.btn-green:hover{
			color:#00501f;
		}

		.nav-bottom-menu{
			flex:auto;
			padding:11px 15px 14px;
			/*color:#51a931;*/
			font-size: 1.7rem;
			
			/*-webkit-transition: all 0.4s ease;
			   -moz-transition: all 0.4s ease;
			    -ms-transition: all 0.4s ease;
			     -o-transition: all 0.4s ease;
			        transition: all 0.4s ease;*/
		}
		

		.nav-bottom-menu:not(:first-child){
			border-left: 1px solid #e9e9e9;
		}

		.nav-bottom-menu:hover{
			/*color:#00501f;*/
			background:#eee;
		}


	.nav-bottom-right{
		display:flex;
		background-color:white;
	}

	.sr-form{
		position: absolute;
		top:0;
		right:0;
		background-color: white;
		z-index:9;
	}

		.search-bar{
			display:flex;
			border-left: 2px solid #e9e9e9;
			padding:0 15px;
		}
			.sr-input{
				color:gray;
				font-size:1.7rem;
			}
		
			.sr-opts-group{
				display:flex;
				position:relative;
			}

			.sr-input:focus ~ .sr-opts-group .sr-opt-btn{
				display:block;
			}


			.sr-opt-btn, .sr-opts-list{
				display:none;
			}
			.sr-opt-btn, .sr-opts{
				transition: background 0.4s ease;
			}

			.sr-opt-btn:hover,  {
				background: #e9e9e9;
				
			}


			.sr-opts-list{
				position: absolute;
			    top: 52px;
			    list-style: none;
			    text-align: left;
			    width: 150px;
			    background: white;
			    left: -10px;
			    border-radius: 5px;
			    font-size: 1.4rem;
			}

				.sr-opts{
					padding:15px 20px;
					cursor:pointer;
				}

				.sr-opts:hover, .sr-opt-btn:hover{
					background: #eee;
				}

			.sr-submit{
				padding:15px;
				font-size:1.4rem;
			}




/*****************
	Main Area
******************/
main{
	background-color:#fff;
}


/*****************
	Carousel
******************/




/*****************
	Three column
******************/
.c-three-col{
	/*display: flex;*/
	padding:15px 15px 10px;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	
	height:275px; 
}

.row-2{
	padding:0 15px 10px;	
}

	.col-2{
		flex:2;	
		margin: 10px 5px;
		height:100%;
	}

	.col-left,.col-middle,.col-right{
		flex:1;
		margin: 10px 5px;
		height:100%;
	}

		.useful-links, .quick-links{
			display:flex;
			flex-direction: column;
			text-align: left;
			position:relative;
			flex:1;
		}
			.useful-link{
				font-size:2.4rem;
				line-height: 5.7rem;
				display:flex;
				-webkit-justify-content: space-between;
				        justify-content: space-between;
				-webkit-align-items: center;
				        align-items: center;
				border-bottom: 1px solid #51a931;
				position: relative;
				
				height:20%;
				
			}

			.useful-link:first-child{
				border-top: 1px solid #51a931;
			}

			.useful-link span{
				height:100%;
				display: flex;
				-webkit-align-items: center;
				        align-items: center;
			}

			.useful-link span span{
				width:100%;
			}
			
			.useful-link i{
				transition: all 0.3s ease;
			}

			.useful-link:hover i{
				transition: all 0.3s ease;
				transform:translate(3px);
			}
				
			.useful-link img{
				max-width: 	100%;
				height:100%;
			}


			/* Quick links */
			.quick-links span:not(:first-child){
				margin-left: 10px;
				line-height: 1.8;
				font-size: 2.1rem;
			}


			.quick-links-title{
				font-size: 35px;
				margin-bottom: 10px;
			}

			.btn-dark-green{
				color:#065f33;
				transition:all 0.4s ease;
			}

			.quick-link{
				margin-left: 10px;
			}

			.quick-links .btn-dark-green:hover{
				color:#83b640;
				margin-left:15px;
			}
				.quick-links i{
					font-size:1rem;
					margin-right: 10px;
				}




	#article-link-1{
		background:url("image/article/brand_homepage-promo-tile-420x272px_v2.jpg");
	}

	#article-link-2{
		background: url(image/article/pro6888-eesu-homepage-banner-v4.gif);
	}

	#article-link-3{
		background: url(image/article/wotm-promotile-770x272-doctor.jpg)	
	}


	#article-link-1, #article-link-2, #article-link-3{
		background-size:cover;
		background-repeat: no-repeat;
		background-position: left center;/*Define start point*/

		cursor: pointer;
		height:inherit;
	}

	
/* Bottom links */
.btm-links-area{
	background:#f0f0f0;
	padding:0px 10px 30px;
	margin-top:80px;
		
	position:relative;
}

.btm-links-area .c-flex-wrap{
	-webkit-justify-content: center;
	        justify-content: center;
}

.social-media{
	position:absolute;
	right:60px;
	top:-16px;
}

.social-media ul li{
	display:inline-block;
	border:solid white 2px;
	-webkit-border-radius: 50%;
	        border-radius: 50%;
	height:35px;
	width:35px;
	overflow: hidden;
}

.social-media ul li:last-child{
	margin-left: 55px;
}

	.social-media ul li a{
		background:red url("image/social.png") no-repeat;
		display:block;
		width:32px;
		height:32px;
		cursor:pointer;
	}

	#fb{
		background-position: left top;
	}

	#linkedin{
		background-position: left -64px;
	}

	#pinterest{
		background-position: left -128px;
	}

	#youtube{
		background-position: left -288px;
	}

	#unknown{
		background:url("image/wr_btn.png") no-repeat left top;
		background-size:32px 32px;

	}



.links-half{
	display:flex;
	-webkit-justify-content: space-around;
	        justify-content: space-around;
	
}

.li-link{
	flex-basis:165px;
	text-align:left;
	margin:27px 22px 0 8px;
}
	
	.li-link *{
		color: #00501f;
		transition: all 0.3s ease;
	}

	.li-link *:hover{
		color: #83B640;
	}

	.li-link h4{
		border-bottom: #00501F solid 1px;
	}

	.li-link ul{
		list-style-type: none;
	}



/*****************
	Footer
******************/

.footer{
	background: linear-gradient(to right,rgb(149, 193, 31) 0%, rgb(0, 80, 31) 100%);
	padding:15px;

	display:flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	
	-webkit-align-items: center;
	        align-items: center;
	
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
}

	.terms, .terms a{
		color:white;
		font-size: 1.6rem;
	}
	
	.footer-logo{
		flex-basis:200px;
		/*background: url("image/footer-logo.png") left top/100% 100% cover;*/
	}

	.footer-logo img{
		
	}





/*****************
	Media Query
******************/


@media screen and (max-width: 1200px){
	.top-wrap{
		width: 970px;
	}

	
	.nav-top-menu, .nav-middle-right-info, .nav-bottom-menu{
		font-size:1.3rem;
	}
	
	.c-three-col{
		height:216px;
	}

	.quick-links-title{
		font-size: 2.8rem;
	}
	
	.quick-links span:not(:first-child){
				/*margin-left: 10px;*/
				line-height: 1.5;
				font-size: 2rem;
	}

/*		.quick-link{
			font-size: 2rem;
			line-height: 1.5;
		}*/

	.btm-links-area .c-flex-wrap{
		flex-wrap:wrap;
	}


	.li-link{
		flex-basis:286px;
	}

}




@media screen and (max-width:992px){
	.top-wrap{
		width:750px;
	}

	.nav-top{
		width:66%;
	}


	.nav-top-menu, .nav-middle-right-info, .nav-bottom-menu{
		font-size:1.3rem;
	}


	.nav-bottom-menues{
		flex:1;
	}

	.nav-bottom-right, .sr-form{
		flex-basis:100%;
	}

	.sr-form{
		position: initial; /* Make it stacked */
	}

	.sr-input{
		flex:1;
	}
	.sr-opt-btn{
		display:initial;
	}

	.c-three-col{
		height:172px;
	}

	.useful-link{
		font-size:2rem;
		line-height: 4.4rem;
	}

	.quick-links span:not(:first-child){
				/*margin-left: 10px;*/
				line-height: 1.5;
				font-size: 1.5rem;
	}

	.li-link{
		flex-basis:210px;
	}

}




@media screen and (max-width:768px){
	.top-wrap{
		width:100%;
	}

	.nav-top{
		width:100%;
	}

	.nav-bottom{
		display:none;
	}

	.nav-top-menu, .nav-middle-right-info, .nav-bottom-menu{
		font-size:1.3rem;
	}
	

	.nav-top-menu{
		flex:1;
	}
	
	.mob-login-btn{
		display: initial;
		margin-right:5px;
		font-size:1em;
	}

	.mob-login-btn .icon-container{
		height: 31px;
		background: #51a931;
		width: 31px;
		font-size: 1.3em;
		padding-top: 6px;
		
		transition:all 0.4s ease;
	}
		.mob-login-btn .icon-container:hover{
			background-color:#83b640;
		}
		.mob-login-btn .icon-container ~ span{
			display: block;
			color: #51a931;
			font-size: 0.6em;
			margin-top:4px;
		}


	.mob-menu{
		display:initial;
	}
	
	.nav-middle-right-info div:not(:last-child){
		display: none;
	}


	.c-three-col{
		flex-wrap:wrap;
		height:auto;
	}

	.col-left,.col-middle,.col-right {
		flex:1 1 100%;	
	}
	
	.col-left{
		order:2;
		height:262px;
	}

	.col-middle{
		order:1;
		height:300px;
	}

	.col-right{
		order:3;
		height:300px;
	}

	.useful-link{
		font-size:2.2rem;
		line-height: 3.6rem;
	}

	.row-2{
		display: none;
	}

	.li-link{
		flex-basis:100%;
	}

	.li-link ul li{
		line-height: 1.8;
	}
	
}


@media screen and (max-width:580px) {
	.col-middle, .col-right{
		height:240px;
	}
}


@media screen and (max-width:420px) {
	.col-middle, .col-right{
		height:190px;
	}
}


.show{
	display:initial;
}