/************************************************************************************
smaller than 1020
*************************************************************************************/
@media screen and (max-width: 1020px) {

	/* pagewrap */
	#page {
		width: 95%;
	}
	/* header wrap */
	#header-wrap {
		width: 95%;
	}

	/* content */
	#secondary img{
		width: 95%;
	}
	/* navigation */
	header nav.primary	{
	width: 770px;
	
	}
	nav.primary ul {
	margin-left:10px;
	display:block;
	}
	nav.primary ul li a {
	padding:  0 14px 0 0;
	}
 	/* footer */
	.footer1{
		width: 95%;
	}
	#menu-icon {
	display: none; /* hide menu icon initially */
}
	.floatright {
		float:left;
	}

		.post ul#discount li{
	 	width: 50%;
	 }
	 .post ul#discount li:nth-child(3n){width: 50%; }
	  .post ul#discount li:nth-child(3n) .li-content{margin: 30px; }
	 .post ul#discount li .li-content{
	margin: 30px;
	
}

	.post ul#discount 	li:nth-child(4){ -moz-box-shadow: 0 1px 0 #fafafa;
	-webkit-box-shadow: 0 1px 0 #fafafa;
	box-shadow: 0 1px 0 #fafafa;
	border-bottom: #dcdcdc 1px solid;
	}
}

/************************************************************************************
smaller than 720
*************************************************************************************/
@media screen and (max-width: 720px) {
#primary{
	
	float:none;
	margin: 0 0 0 0;
	width: 100%;
}
#content{
	margin: 0 0 0 0;
	width: 100%;
	overflow:hidden;	
}
#secondary {
	float: none;
	width: 100%;
}
#secondary img{
		width: 127px;
	}
	
#menu-icon {
		color: #000;
		width: 42px;
		height: 30px;
		background: #ecebeb url(image/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		margin:7px 0 0 5px;
		display: block; /* show menu icon */
		float:left;
	}
	#menu-icon:hover {
		background-color: #f8f8f8;
	}
	#menu-icon.active {
		background-color: #bbb;
	}
	
	/* main nav */
	header nav.primary	{
	width: 100px;
	
	}

	nav.primary  ul{
		clear: both;
		position: relative;
		top: -1px;
		left: 6px;
		margin: 0;
		padding:10px 0;
		width:200px;
		z-index: 10000;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	nav.primary ul li {
		float: none;
		display:block;
		padding-left:20px;
	}
	nav.primary ul li a {
		height:25px;
		line-height: 25px;
		font-weight: 700;
		
		background: none;
		display: inline;
		padding: 0;
		margin:0;
		
		color: #666;
		border: none;
	}
	nav.primary ul li a:hover {
		 text-decoration:underline;
		 color:#333;
		 background: none;
		 line-height: 25px;
		 display: inline;
	}
	
	.post ul#discount li{
	 		width: 100%;
	 }
	 .post ul#discount li:nth-child(3n){ 
	      width: 100%;
	 }
	 
	 
	 #discount-inner-content{ margin-right: 30px; position:relative; }
	 div.figure-discount{ float:none; position: static; width: 300px; }
	 div.discount-inner-intro{float:none; position: static; width: auto;}
	 div.benefit-wrap{float:none; position: static; width: auto; margin-top: 30px;}
	
}
@media screen and (min-width: 720px) {

	/* ensure #nav is visible on desktop version */
	.primary  ul{
		display: block !important;
	}

}

/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {

	.boxwidth1{
		width: 94%;
	}
	.content {
	margin: 10px 3%;
}
	.box-left {
		width: 90%;
		
	}
	.box-right {
		float: left;
	}
	.padding{
		padding: 5px 10px;
	}
	.li-content .button{
	
		float:left;
		margin-bottom: 10px;
	
	
	}
		
}