/* -----------------------------------------------------
TABLE OF CONTENTS
--------------------------------------------------------
	1. Global HTML Selectors
	2. Media Query Breakpoints
--------------------------------------------------------
----------------------------------------------------- */


/* -----------------------------------------------------
1. Global HTML Selectors
----------------------------------------------------- */
body {
	position: relative;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body.no-body-scroll {
	overflow: hidden !important;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

.clear {
	clear: both;
}

a:hover {
	opacity: 0.5;
}

.black-mask {
	display: none;
	position: fixed;
	z-index: 101;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	background: rgba(0,0,0,0.7);
}

.body-spinner {
	display: none;
	position: fixed;
	z-index: 102;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.search-mask {
	display: none;
	position: fixed;
	z-index: 80;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	background: rgba(0,0,0,0.7);
}

.title {
	position: relative;
	z-index: 10;
	padding: 20px 30px;
	background: #eee;
}

.title .cat-mobile-name {
	display: none;
}

.title .fa-caret-right {
	display: block;
	position: absolute;
	top: 50%;
	left: -4px;
	margin-top: -27px;
	font-size: 50px;
}

.title .showing {
	display: block;
	position: absolute;
	top: 50%;
	left: 340px;
	width: 300px;
	height: 50px;
	overflow: hidden;
	margin: -25px 0 0 0;
	padding: 0 50px 0 15px;
	cursor: pointer;
}

ul.selector {
	display: none;
	position: absolute;
	top: 50%;
	left: 340px;
	width: 300px;
	margin: 24px 0 0 0;
	border-top: none;
	padding: 0;
	list-style-type: none;
	cursor: pointer;
}

ul.selector.show-list {
	overflow: visible;
}

ul.selector li {
	position: relative;
	height: 50px;
	padding: 0 50px 0 15px;
	cursor: pointer;
}

.title .showing:hover,
ul.selector li:hover {
	opacity: 0.8;
}

.title .showing .fa-caret-down,
ul.selector li .fa-caret-down {
	position: absolute;
	right: 10px;
	top: 10px;
}

.next-section {
	display: none;
	position: fixed;
	z-index: 79;
	bottom: 50px;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	border-radius: 50px;
}

.other-dots {
	position: relative;
	overflow: visible;
	display: none;
	position: fixed;
	z-index: 79;
	bottom: 10px;
	left: 50%;
	height: 15px;
	width: 225px;
	margin-left: -112px;
}

.other-dots a {
	display: block;
	float: left;
	height: 15px;
	width: 15px;
	margin: 0 5px;
	border-radius: 15px;
}

.other-dots a span {
	position: fixed;
	top: 0;
	left: 50%;
	display: none;
	width: 225px;
	height: 15px;
	margin-left: -112px;
}

.other-dots a b {display: none;}

.alternate .next-section {
	display: none;
	position: absolute;
}

.next-section img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	margin-top: -15px;
}

.next-section:hover {
	cursor: pointer;
	opacity: 0.5;
}

.next-section:hover img {
	width: 34px;
	height: 34px;
	margin-left: -17px;
	margin-top: -17px;
}

.next-section .fa-angle-double-down {
	position: absolute;
	left: 50%;
	bottom: -21px;
	width: 20px;
	height: 20px;
	margin-left: -10px;
}

.back-top {
	display: none;
	position: fixed;
	z-index: 200;
	bottom: 0;
	right: 0;
	padding: 10px;
	border-radius: 10px 0 0 0;
}

.back-to-top:hover {
	opacity: 1;
}



/* -----------------------------------------------------
2. Media Query Breakpoints
----------------------------------------------------- */
@media screen and (max-width: 1025px) {	
	body {
		min-height: inherit !important;
	}
	
	.title h2 b {
		text-indent: -9999px;
	}
	
	.title .showing {
		display: block;
		position: relative;
		left: 0px;
		right: 20px;
		top: 0px;
		width: auto;
		height: 40px;
		margin: 0 auto;
		padding: 0;
	}
	
	ul.selector {
		display: none;
		position: absolute;
		left: 30px;
		right: 30px;
		bottom: inherit;
		top: inherit;
		width: auto;
		height: auto;
		margin: 0 auto;
	}

	ul.selector li {
		position: relative;
		height: 40px;
		padding: 0;
	}
	

	.other-dots {
		display: none !important;
		bottom: 0;
		left: 50%;
		height: 35px;
		width: 315px;
		margin-left: -157px;
		border-radius: 5px 5px 0 0;
		.box-shadow1;
	}
	
	.mobile .other-dots {
		display: none !important;
	}
	
	.other-dots a {
		display: block;
		float: left;
		height: 25px;
		width: 25px;
		margin: 5px;
		border-radius: 15px;
	}


}