@charset "utf-8";
/* CSS Document */

#cycle-loader {
	height: 32px;
	left: 50%;
	margin: -8px 0 0 -8px;
	position: absolute;
	top: 50%;
	width: 32px;
	z-index: 999;
}
#holder {
	margin: 0;
	width: 100%;
	height: 240px;
	padding: 0;
	overflow:hidden;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1024px) and (min-device-width: 768px) {
#holder, .header-container, .nav-container, .ft-wrap {
	width:100%;
padding: 0 2.5%;
}}
.ft-wrap {
	background: #8d96a0;
    overflow: auto;
    width: 90%;
    padding: 0 5%;
}

.home #holder {
	height: 700px;
}
.video #holder {
	height: 720px;
}
.video #holder.return {
 height:215px!important;
}
.about #holder {
	height: 450px;
}
.pos #holder {
	height: 250px;
}
/*Set my gradient above all images*/
			#gradient {
				left:0;
				height:120px;
				position:absolute;
				top:140px;
				width:100%;
				z-index:999;
			}
			.home #gradient {
				top:410px;
				height:180px;
			}
			.video #gradient {
				top:410px;
				height:180px;
			}
			.about #gradient {
				height:400px;
			}
			.partic #gradient {
				height:130px;
				top:110px;
			}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
	/* display: none; Only use this if you fade it in again after the images load */
	position: relative !important;
}


#arrow_left, #arrow_right {
	bottom: 30px;
	height: 67px;
	position: absolute;
	right: 30px;
	width: 36px;
	z-index: 1000;
}
#arrow_left {
	right: 86px;
}
#arrow_left:hover, #arrow_right:hover {
	bottom: 29px;
}
#arrow_left:active, #arrow_right:active {
	bottom: 28px;
}
.sl-cont {
	width:100%;
	text-align:center;
	margin:0;
	padding:0;
	position:absolute;
	top: 410px;
	height: 180px;
	left:0;
}
.sl-cont-hold {
	width:100%;
	height:100%;
	margin:0 auto;
	text-align:left!important;
}
.in-slide-content {
	color: #333;
	background: url(../img/nav_bk2.png);
	float: left;
	font-family: Relay; font-weight:normal;
	font-size: 14px;
	padding: 0;
	margin: 0;
	position: absolute;
	height:100%;
	width: 100%;
	text-align:left!important;
	z-index: 9999; /* Show above .gradient */
	-webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 768px) {
	.sl-cont-hold {
	width:1026px;
}
.home #holder, .video #holder {
	height: 580px;
}
.video #holder.result {
 height:220px!important;
}
.home #gradient, .video #gradient {
				height:140px;
}
.sl-cont {
	height: 180px;
}
.in-slide-content {
	width: 654px;
}
.pos #holder {
	height: 150px;
}
.video #holder {
	height: 598px;
}
.video #gradient {
	top:410px;
	height:180px;
}
}