.header-bg .logo {width: 220px; height: 168px; margin: 1rem 0 0 1rem; background: url(images/logo-header.png) no-repeat;
background-size: 100%; position: absolute; z-index: 4; -webkit-transition: width .3s, -webkit-transform .3s; transition: width .3s, -webkit-transform .3s; -moz-transition: width .3s, -webkit-transform .3s; -o-transition: width .3s, -webkit-transform .3s;}


div.nav-wrap {z-index: 100;}

/* active state for side nav */

.side-nav li.here {
background: #512598 !important;
color: white !important;
}

.side-nav li.here a {
color: #fff !important;
}

/* Rollover Header Styles */

		.heroWrap {
			height: 210px;
			margin-left: 155px;
			overflow-x:hidden;
    		overflow-y:hidden;
    		white-space: nowrap;
    		z-index: 1;
		}
		.person {
			height: 206px;
			display: inline-block;
			position: relative;
			left: 0;
			-webkit-transition: background .2s, -webkit-transform .3s;
			-moz-transition: background .2s, -webkit-transform .3s;
			-o-transition: background .2s, -webkit-transform .3s;
			transition: background .2s, -webkit-transform .3s;
		}
		span.name {
			text-align: center;
			background: #fff;
			padding: 10px;
			margin: 0px auto;
			z-index: 11;
			font-size: 9pt;
			font-weight: bold;
			display: block;
			position: relative;
			width: 140px;
			opacity: 0;
			top: 135px;
			text-transform: uppercase;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);
			-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);
			box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.45);
			-webkit-transition: opacity .3s, top .3s, -webkit-transform .3s;
			-moz-transition: opacity .3s, top .3s, -webkit-transform .3s;
			-o-transition: opacity .3s, top .3s, -webkit-transform .3s;
			transition: opacity .3s, top .3s, -webkit-transform .3s;
		}
		span.name .grey {color: #888888;}

		a.person:hover span.name {opacity: 1; top: 145px; z-index: 11;}

		a.person.one {background: url('http://ridefinders.com/uploads/person-1.png') no-repeat 0px 40px; width: 213px; z-index: 3; left: 0px;}
		a.person.two {background: url('http://ridefinders.com/uploads/person-2.png') no-repeat 0px 40px; width: 159px; z-index: 2; left: -90px;}
		a.person.three {background: url('http://ridefinders.com/uploads/person-3.png') no-repeat 0px 40px; width: 215px; z-index: 1; left: -160px;}
		a.person.four {background: url('http://ridefinders.com/uploads/person-4.png') no-repeat 0px 40px; width: 139px; z-index: 3; left: -280px;}
		a.person.five {background: url('http://ridefinders.com/uploads/person-5.png') no-repeat 0px 40px; width: 170px; z-index: 2; left: -360px;}
		a.person.six {background: url('http://ridefinders.com/uploads/person-6.png') no-repeat 0px 40px; width: 238px; z-index: 1; left: -490px;}
		a.person.seven {background: url('http://ridefinders.com/uploads/person-7.png') no-repeat 0px 40px; width: 121px; z-index: 3; left: -580px;}
		a.person.eight {background: url('http://ridefinders.com/uploads/person-8.png') no-repeat 0px 40px; width: 187px; z-index: 1; left: -670px;}

		a.person.one:hover {background: url('http://ridefinders.com/uploads/person-1.png') no-repeat 0px 10px; z-index: 10;}
		a.person.two:hover {background: url('http://ridefinders.com/uploads/person-2.png') no-repeat 0px 10px; z-index: 10;}
		a.person.three:hover {background: url('http://ridefinders.com/uploads/person-3.png') no-repeat 0px 10px; z-index: 10;}
		a.person.four:hover {background: url('http://ridefinders.com/uploads/person-4.png') no-repeat 0px 10px; z-index: 10;}
		a.person.five:hover {background: url('http://ridefinders.com/uploads/person-5.png') no-repeat 0px 10px; z-index: 10;}
		a.person.six:hover {background: url('http://ridefinders.com/uploads/person-6.png') no-repeat 0px 10px; z-index: 10;}
		a.person.seven:hover {background: url('http://ridefinders.com/uploads/person-7.png') no-repeat 0px 10px; z-index: 10;}
		a.person.eight:hover {background: url('http://ridefinders.com/uploads/person-8.png') no-repeat 0px 10px; z-index: 10;}



@media all and (max-width: 950px) {
	.header-bg .logo {margin: 1rem auto; position: static; float: none;}
	.heroWrap {display: none;}
}

@media all and (max-width: 640px) {
	.header-bg .logo {margin: 1rem auto; height: 115px; width: 115px; position: static; float: none;}
	.header-bg {height: 125px;background: #ccc; background: url(images/bg-skyline.png) no-repeat; background-size: cover; }
	.heroWrap {display: none;}
}

/* Alerts */
.announcement {
    margin-top: 1.25em;
    border: 2px solid #ff8084;
    background: #ffdfe0;
    padding: 0.3125em 1.875em;
    font-size: 1.0625em;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.announcement.green {
    border: 2px solid #5dbb45;
    background: #d0f2c2;
}
.announcement.red {
    border: 2px solid #ff8084;
    background: #ffdfe0;
}
.announcement.yellow {
    border: 2px solid #e5dc48;
    background: #faf7b8;
}
.announcement p {
    color: #353535;
    margin: 0;
    padding: 0;
}
.announcement.yellow a {
    color: #ca9c34;
    font-weight: bold;
}
.announcement.red span.alert, 
.announcement.red a {
    color: #ff393a;
    font-weight: bold;
}
.announcement.green span.alert, 
.announcement.green a {
    color: #469f36;
    font-weight: bold;
}


/* FF Composer Form Styles
-------------------------------------------- */

.ff_composer input[type=checkbox] {
    height: 15px;
    width: 15px;
    min-width: 15px;
    appearance: checkbox;
}

.ff_composer ul > li {
    display: flex;
    align-items: start;
    margin: 10px 0;
}

.ff_composer select {
    appearance: auto;
    width: 100% !important;
    padding: 8px;
    background: snow;
    border-color: #e0d8eb;
    border-radius: 4px;
    margin-top: 8px;
}