/* CSS Document */

@font-face {
    font-family:'DistrictThin';
    src: url(fonts/DistTh___.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family:'BebasRegular';
    src: url(fonts/BEBAS___-webfont.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;

}


body {
	background:url(images/grayBG.jpg) repeat;
	font-family:'DistrictThin', Arial, Helvetica, sans-serif;
	color:#ebebeb;
}

/*Links*/

a:link {
	color:#ebebeb;
	text-decoration:none;
}

a:visited {
	color:#ebebeb;
	text-decoration:none;
}

a:hover {
	color:#e9c846;
	text-decoration:none;
}


/*Wraps and centers all elements*/

.wrapper {
	position: relative;
	margin: auto;
	width: 960px;
}

/*Left Content*/

.leftTop {
	float:left;
	width:650px;
	height:228px;
	background:url(images/leftTop.jpg) no-repeat;
}

.leftBottom {
	float:left;
	width:500px;
	height:229px;
	background:url(images/leftbottom-M.jpg) no-repeat;
}

/*Header*/

.header {
	float:right;
	width:300px;
	font-size:24px;

}

/*Bottom Content*/

.bottomContent {
	float:right;
	width:300px;
	padding-top:50px;
	padding-right:75px;;
}

#right {
	float:right;
	width:300px;
	height:200px;
}

/*Form*/

#eForm {
	float:right;
	width:300px;
	height:80px;
	background:url(images/emailField.jpg)
}

#email {
	background:#ebebeb;
	border:none;
	width:190px;
	height:30px;
	margin:25px 6px 0px 10px; 
	font-size:14px;
}

#submit {
	background:none;
	border:none;
	font-family:'BebasRegular', Arial, Helvetica, sans-serif;
	font-style:inherit; 
	font-size:12px;
	color:#ebebeb;
	cursor:pointer;
}

#submit:onclick{
	color:#e9c846;
}

/*Footer*/

.footer {
	float:right;
	text-align:right;
	width:295px;
	font-size:11px;
	padding-right:5px;
	color:#7a0026;
}

#arial {
	font-family:Arial, Helvetica, sans-serif;
}

/*Hover Circle Position*/

.ch-grid {
	margin: 20px 0 0 210px;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 150px;
	display: inline-block;
	margin: 20px;
}

/*Hover Circle Effect*/

.ch-item {
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

.ch-info-wrap{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;

	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;

	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
		
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ch-info .ch-info-front {
	background:#ebebeb;
}
.ch-info .ch-info-back {
	-webkit-transform: rotate3d(0,1,0,180deg);
	-moz-transform: rotate3d(0,1,0,180deg);
	-o-transform: rotate3d(0,1,0,180deg);
	-ms-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
	
	background: #7a0026;
}

.ch-img-1 { 
}

.ch-img-2 { 
	
}

.ch-img-3 { 
	
}

.ch-info h2 {
	color: #7a0026;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 24px;
	margin: auto;
	padding: 60px 0 0 0;
	height: 90px;
	font-family: 'BebasRegular', Arial, Helvetica, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info h3 {
	color: #fff;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 90px;
	font-family: 'DistrictThin', Arial, Helvetica, sans-serif;
}

.ch-info h4 {
	color: #7a0026;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 24px;
	margin: auto;
	padding: 60px 0 0 0;
	height: 90px;
	font-family: 'BebasRegular', Arial, Helvetica, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
	display:none;
}

.ch-info h5 {
	color: #7a0026;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 24px;
	margin: auto;
	padding: 60px 0 0 0;
	height: 90px;
	font-family: 'BebasRegular', Arial, Helvetica, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'BebasRegular', Arial, Helvetica,
}

.ch-info p a:onclick {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}

.ch-item:onclick .ch-info-wrap {
	box-shadow: 
		0 0 0 0 rgba(255,255,255,0.8), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:onclick .ch-info {
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	-o-transform: rotate3d(0,1,0,-180deg);
	-ms-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
}