@import url(../../../warp/css/responsive.css);


/* Extra Large Screens and Up
----------------------------------------------------------------------------------------------------*/
@media (min-width: 1220px) {}

/* Large Screens
----------------------------------------------------------------------------------------------------*/
@media (min-width: 960px) and (max-width: 1219px) {}

/* Medium Screens
----------------------------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 959px) {
	#search { display: none;}
	.grid-gutter > .grid-box:nth-child(n+2) > * { margin-top: 0; }
	.grid-gutter > .grid-box:nth-child(n+3) > * { margin-top: 0; }
}
@media (max-width: 959px) {
	.menu-dropdown li.level1.item265 { display: none; }
	.hp_top-submenu-toggle { display: block; }
	#top-submenu { display: none; }
	#top-submenu .menu-horizontal li { display: block; }
	
	.hp_blog-page #sidebar-a,
	.hp_blog-page #sidebar-b {
		margin-top: 30px;
		margin-bottom: 30px;
		border-top: 2px solid #ddd;
	}
}

/* Small Screens
----------------------------------------------------------------------------------------------------*/
@media (min-width: 640px) and (max-width: 767px) {}
	
@media (max-width: 767px) {
	
	/* background attachment */
	body {
		background-attachment: scroll;
	}

	/* Layout */
	.hp_toolbar-bg {
		display: block;
	}
	
	#logo {
		position: static;
		float: left;
		margin: 32px 0;
	}

	#breadcrumbs,
	#totop-scroller { display: none; }
	
	.grid-gutter > .grid-box:nth-child(n+2) > * { margin-top: 30px; }
	.grid-gutter > .grid-box:nth-child(n+3) > * { margin-top: 30px; }
	
	/*Main Menu */
	.hp_menu-toggle { 
		display: block;
	}
	.hp_menubar-bg { display: none; }
	.hp_menubar-bg .wrapper { padding: 0 !important; }
	.menu-dropdown { 
		margin-left: 0; 
		margin-bottom: 0;
		background-color: rgba(18,19,20,.55);
	}
	
	#menu,
	.menu-dropdown, .menu-dropdown .level1,
	.menu-dropdown .level1 > span {
		float: none;
		display: block;
		margin: 0 !important;
		padding-bottom: 0 !important;
		text-align: center;
	}
	.menu-dropdown a.level1, .menu-dropdown span.level1 {
		border-bottom: 1px solid #555;
		border-bottom: 1px solid rgba(255,255,255,.2);
		background-color: transparent;
	}
	.menu-dropdown li.active .level1,
	.menu-dropdown li.level1:hover .level1,
	.menu-dropdown li.remain .level1 { 
		color: #fff;
		background-color: #d24a30;
		background-color: rgba(210,74,48,.55);
		-webkit-box-shadow: none;
			 -moz-box-shadow: none;
						box-shadow: none;
	}
	.menu-dropdown li.active .level1:after, .menu-dropdown li.active .level1:before { display: none; }
	
	#menu .dropdown { display: none !important; }
	
}

/* Mobile Screens
----------------------------------------------------------------------------------------------------*/
@media (min-width: 480px) and (max-width: 639px) {}
	
@media (max-width: 639px) {
	/* Base */
	
	/* Spacing */
	.wrapper { padding: 0 6px; }
	
	.grid-gutter.grid-block { margin: 0 -6px; }
	.grid-gutter > .grid-box > * { margin: 0 6px; }

	#header .wrapper, #toolbar { padding: 0 12px; }
	#header-responsive {
		padding: 25px 12px 5px;
	}

	.module,
	#breadcrumbs,
	#content { margin: 6px; }
	
	.mod-blank { margin: 0; }

	#menu .module { margin: 10px 5px; }
	#footer, .hp_site-credits { text-align: center; }
	#sub-footer .module { margin: 10px 6px; }

	.hp_main-bg { padding: 30px 0; }
	
	.hp_top-submenu-toggle { padding-left: 15px; }

	/* System */
	#system .items .item,
	#system .items .item:first-child {
		margin-top: 12px;
		padding-top: 18px;
		border-top-width: 1px;
	}
	#system .items :first-child .item:first-child {
		margin-top: 0;
		padding-top: 0;
		border-width: 0;
	}
	#system .items .leading .item {
		margin-bottom: 0;
		padding-bottom: 0;
		border-width: 0;
	}
}

/* Small Mobile Screens
----------------------------------------------------------------------------------------------------*/
@media (max-width: 479px) {
	
	/* Globals */
	body {
		background: #171717;
	}
	#toolbar .float-right,
	#toolbar .float-right .module { 
		float: none;
		margin-left: 0;
	}
	.bar-address {
		width: 100%;
		text-align: center;
	}
	#headerbar { text-align: center}
	#logo {
		width: 170px;
	}
	#headerbar .module {
		position: absolute;
		right: 15px;
		float: none;
		margin: 15px 0 0;
		width: auto;
		max-width: auto;
	}
}