@media (min-width: 1024px) and (max-width: 1200px) {
	#top-nav li {
		margin-right: 70px;
	}

	#banner .banner-feat{ 
		width: 74.90196078431373%; /* 764 / 1020 */
	}

	#banner .banner-menu{
		width: 25.098039215686274%; /* 256 / 1020 */
	} 

	#top-nav {
		width: 100%;
		padding: 0 15px;
	}
 
	#top-nav ul {
		display: flex;
		flex-direction: row;
		margin: 0;
		padding: 0;
	}
 
	#top-nav ul li {
		list-style: none;
		flex-grow: 1;
		text-align: center;
		margin-right: 0;
		float: none;
	}

	#top-nav li a{ 
		display: inline-block;
	}
	#content.inner-content .container{ 
		padding: 0 20px;
	}
}

@media (max-width: 1024px) { 
	#top-nav {
		width: 100%;
		padding: 0 15px;
	}
 
	#top-nav ul {
		display: flex;
		flex-direction: row;
		margin: 0;
		padding: 0;
	}
 
	#top-nav ul li {
		list-style: none;
		flex-grow: 1;
		text-align: center;
		margin-right: 0;
		float: none;
	}

	#top-nav li a{ 
		display: inline-block;
	}

	#banner .banner-feat{ 
		width: 74.90196078431373%; /* 764 / 1020 */
	}

	#banner .banner-menu,
	#sidebar{
		width: 25.098039215686274%; /* 256 / 1020 */
	} 

	#banner .banner-feat .main .box-text{ 
		max-width:  78.01047120418848%; /* 596 / 764 */ 
	}

	#book-menu .container {
		padding: 0 32px;
	}

	#main-content {
		width: 71.96078431372549%; /* 734 / 1020 */
	}

	#content.inner-content .container{ 
		padding: 0 20px;
	}

	/*#nav li.active a, #nav a:hover {
		border-bottom: 5px solid #474a53;
	}*/
}

@media (min-width: 769px) and (max-width: 1019px) {
	#top-nav li{ 
		font-size: 12px;
	}

	#banner .boxes > div.box3{ display: none; }

	#banner .boxes > div{ 
		width: 50%;
	}
	.banner-menu nav{ 
		font-size: 12px;
	}

	#nav{ font-size: 17px; }
}

@media (max-width: 768px) {
	#nav{ font-size: 16px; }

	#banner .banner-menu,
	#sidebar {
		width: 33.33333333333333%; /* 256 / 768 */
	}

	#banner .banner-feat .main .box-text{ 
		max-width:  100%;
		font-size: 16px;
	}
	#banner .boxes > div.box3{ display: none; }

	#banner .boxes > div{ 
		width: 50%;
	}

	#banner .banner-feat{ 
		width:  66.53645833333334%; /* 511 / 768 */
	}

	#top-nav li {
		margin-right: 20px;
	}

	/*#nav li{ 
		padding-left: 28px;
	}
	#nav li:first-child{ 
		padding-left: 0;
	}*/
	#main-content {
		width: 63.80208333333334%; /* 490 / 768 */
	}

	#header.navbar-fix {
	  padding-top: 36px;
	}
}

/* EDITED */
@media (min-width: 481px) and (max-width: 768px) {
	#logo {
		display: block;
		float: none;
	}
	
	#nav{ font-size: 16px; }
	#nav ul ul {
		top: 26px;
	}

	#footer nav{ 
		font-size: 14px;
	}
	#footer nav ul li{ 
		padding-right: 15px;
	}

	.side-articles {
		display: none;
	}

	#banner .banner-feat,
	#main-content,
	#sidebar .banner-menu,
	#sidebar {
		float: left;
		width: 100%;
	}

	#main-content {
		padding-left: 20px;
	}

	#sidebar {
		margin-right: 0;
	}

	#banner .boxes > div{ 
		width: 50%;
	}

	#banner .banner-menu{ 
		width: 100%;
		margin: 0 auto;
	}
	.banner-menu nav{ 
		text-align: center;
	}

	#header-top{ 
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		padding: 10px 0;
		top: auto!important;
	}

	#top-nav{ 
		padding: 0 10px;
		display: table;
		width: 100%;
	}
	#top-nav li{ 
		display: table-cell;
		margin-right: 0;
		float: none;
		width: 1%;
		text-align: center;
	}
	#top-nav li a{ 
		display: block;
		padding: 35px 0 0 0;
		position: relative;
		font-size: 11px;
		line-height: normal;
	}

	#top-nav li a:before{ 
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -12px;
	}

	#nav{ margin-top: 20px; }
	body{ padding-bottom: 71px; }

	.banner-menu .bx-controls .bx-prev{ 
			left: -75px;
		}
		.banner-menu .bx-controls .bx-next{ 
			right: -75px;
		}
		#sidebar .banner-menu{ margin-bottom: 0; }

	.banner-menu.hp{ 
		margin: 20px 20px 0 20px;
	}
}

@media (max-width: 480px) {
	.side-articles {
		display: none;
	}

	#footer nav ul li{ 
		padding-right: 10px;
	}

	#footer .footer-logo {
		margin: 0 15px 0 0;
		padding: 15px 15px 15px 10px;
	}

	#banner .banner-feat,
	#banner .boxes > div,
	#main-content,
	#sidebar .banner-menu,
	#sidebar {
		width: 100%;
	}

	#main-content {
		padding-left: 20px;
	}

	#sidebar {
		margin-right: 0;
	}

	#banner .banner-feat .main .box-text{ 
		font-size: 15px;
	}

	#banner .banner-feat .main .logo{ 
		left: 50%;
		margin-left: -155px;
	}
	#banner .banner-feat .main,
	#banner .boxes > div{ 
		border-bottom: #fff 6px solid;
	}
	#banner .boxes > div{ 
		max-height: 190px;
		overflow: hidden;
	}
	#banner .boxes > div img{ 
		width: 100%;
	}
	#banner .boxes > div .box-text p{ 
		float: right;
	}

	#footer nav{ 
		font-size: 14px;
	}
	#sidebar .banner-menu{ 
		margin: 0 0 0;
		width: auto;
	}

	.banner-menu.hp{ 
		margin: 20px 20px 0 20px;
	}

	.banner-menu .slide{ width: 220px!important; }

	.banner-menu nav{ 
		text-align: center;
	}

	.banner-menu .bx-controls .bx-prev{ 
		left: -10px;
	}
	.banner-menu .bx-controls .bx-next{ 
		right: -10px;
	}
	body{ 
		padding-bottom: 87px;
		padding-top: 50px;
	}

	#logo { 
		width: 100%;
		text-align: center;
		float: none;
	}

	#logo img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#login-box{ 
		color: #fff;
		background: #2f313b;
		padding: 15px 15px 15px 15px;
		max-width: 100%;
		width: 100%;
		position: absolute;
		top: -85px;
		right: 0;
		z-index: 99;
		font-family: 'Conv_Avenir-Heavy';
		font-size: 14px;
	}

	#header-top{ 
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		top: auto!important;
		z-index: 9999;
		padding: 10px 0;
	}

	#top-nav{ 
		padding: 0 10px;
		display: table;
		width: 100%;
	}
	#top-nav li{ 
		display: table-cell;
		margin-right: 0;
		float: none;
		width: 1%;
		text-align: center;
	}
	#top-nav li a{ 
		display: block;
		padding: 35px 0 0 0;
		position: relative;
		font-size: 11px;
		line-height: normal;
	}

	#top-nav li a:before{ 
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -12px;
	}

	#nav{ 
		float: right;
		font-size: 18px;
		margin: -75px 0 0 0;
		padding-right: 10px;
		display: none;
	}

	body{ 
		overflow-x: hidden;
	}
	.slicknav_menu{ 
		display: block;
	}

	#book-menu .bx-controls .bx-prev{ 
		left: 10px;
	}
	#book-menu .bx-controls .bx-next{ 
		right: 10px;
	}

	#content.inner-content .container{ 
		padding: 0 15px;
	}
}

/**
	320 x 480
	iPhone 3G/3GS
**/
@media (max-width: 320px){
	#banner .banner-feat .main .logo {
		margin-left: -121px;
		max-width: 80%;
	}
	
	#footer .footer-logo{ 
		float: none;
		display: block;
		padding: 0 0 15px;
		border: none;
		margin: 0 10px 15px;
		border-bottom: #57728a 1px solid;
		text-align: center;
	}
	
	#footer nav{ 
		float: none;
		text-align: center;
		display: block;
	}
	
	#top-nav li a{ 
		font-size: 10px;
	}
	
	.banner-menu .bx-controls .bx-prev{ 
		left: -5px;
	}
	.banner-menu .bx-controls .bx-next{ 
		right: -5px;
	}
}
