﻿.ch-item {
	width: 155px;
	height: 155px;
	border-radius: 50%;
	-webkit-border-radius: 90px;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-khtml-border-radius: 50%;
	position: relative;
	cursor: default;
	-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;
}

.ch-img-1 {
	background-image: url(../images/img_9.png);
	transform: translate(90px);
	-ms-transform: translate(80px);
	-webkit-transform: translate(80px);
	-webkit-box-shadow: inset 0 0 0 2px rgba(29,36,120,0.6), 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: inset 0 0 0 2px rgba(29,36,120,0.6), 0 1px 2px rgba(0,0,0,0.1);
	border-radius: 50%;
	-webkit-border-radius: 90px;
	/*-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-khtml-border-radius: 50%;*/
}

.ch-img-2 {
	background-image: url(../images/img_2.png);
	transform: translate(-50px);
	-ms-transform: translate(-50px);
	-webkit-transform: translate(-50px);
	box-shadow: inset 0 0 0 2px rgba(14,15,248,0.6), 0 1px 2px rgba(0,0,0,0.1);
	border-radius: 50%;
	/*-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-khtml-border-radius: 50%;*/
}

.ch-img-3 {
	background-image: url(../images/img_3.png);
	transform: rotate(130deg) translate(60px) rotate(-130deg);
	-ms-transform: rotate(130deg) translate(60px) rotate(-130deg);
	-webkit-transform: rotate(130deg) translate(60px) rotate(-130deg);
	box-shadow: inset 0 0 0 2px rgba(156,18,19,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 0 0 2px rgba(156,18,19,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-4 {
	background-image: url(../images/img_4.png);
	transform: rotate(30deg) translate(120px) rotate(-30deg);
	-ms-transform: rotate(30deg) translate(120px) rotate(-30deg);
	-webkit-transform: rotate(30deg) translate(120px) rotate(-30deg);
	float: left;
	box-shadow: inset 0 0 0 2px rgba(63,61,63,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-5 {
	background-image: url(../images/img_5.png);
	transform: rotate(25deg) translate(210px) rotate(-25deg);
	-ms-transform: rotate(25deg) translate(210px) rotate(-25deg);
	-webkit-transform: rotate(25deg) translate(210px) rotate(-25deg);
	float: left;
	box-shadow: inset 0 0 0 2px rgba(230,128,77,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-6 {
	background-image: url(../images/img_6.png);
	transform: rotate(8deg) translate(250px) rotate(-8deg);
	-ms-transform: rotate(8deg) translate(250px) rotate(-8deg);
	-webkit-transform: rotate(8deg) translate(250px) rotate(-8deg);
	float: left;
	box-shadow: inset 0 0 0 2px rgba(150,108,12,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-7 {
	background-image: url(../images/img_7.png);
	transform: rotate(-25deg) translate(300px) rotate(25deg);
	-ms-transform: rotate(-25deg) translate(300px) rotate(25deg);
	-webkit-transform: rotate(-25deg) translate(300px) rotate(25deg);
	float: left;
	box-shadow: inset 0 0 0 2px rgba(6,146,52,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-8 {
	background-image: url(../images/img_8.png);
	transform: rotate(-70deg) translate(360px) rotate(70deg);
	-ms-transform: rotate(-70deg) translate(360px) rotate(70deg);
	-webkit-transform: rotate(-70deg) translate(360px) rotate(70deg);
	float: left;
	box-shadow: inset 0 0 0 2px rgba(129,36,120,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 0 0 2px rgba(129,36,120,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-ms-box-shadow: inset 0 0 0 2px rgba(129,36,120,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-9 {
	background-image: url(../images/img_1.png);
	transform: translate( 580px, -500px);
	-ms-transform: translate(580px, -500px);
	-webkit-transform: translate(580px, -500px);
	/*transform: rotate(-40deg) translate(760px) rotate(40deg);*/
	box-shadow: inset 0 0 0 2px rgba(252,206,19,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-10 {
	background-image: url(../images/img_10.png);
	transform: translate( 340px, -680px);
	-ms-transform: translate(340px, -680px);
	-webkit-transform: translate(340px, -680px);
	/*transform: rotate(5deg) translateX(-100px) rotate(-5deg);*/
	box-shadow: inset 0 0 0 2px rgba(22,22,114,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 0 0 2px rgba(22,22,114,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-ms-box-shadow: inset 0 0 0 2px rgba(22,22,114,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

/*.center {
	width: 500px;
	height:350px;
	background-color:grey;
	color:white;
	border-radius: 50%;

}*/

.ch-info {
	position: absolute;
	background-color: black;
	width: 100%;
	height: 100%;
	border-radius: 10%;
	-webkit-border-top-left-radius: 50px;
	opacity: 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: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	/*-webkit-backface-visibility: hidden; /*for a smooth font  */
}

	.ch-info h3 {
		color: #fff;
		text-transform: uppercase;
		position: relative;
		letter-spacing: 2px;
		font-size: 12px;
		text-align: center;
		vertical-align: middle;
		margin: 0 10px;
		padding: 5px 0 0 0;
		height: 100px;
		font-family: 'Open Sans', Arial, sans-serif;
		/*text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);*/
	}

	.ch-info p {
		color: #fff;
		padding: 5px 5px;
		font-style: italic;
		margin: 0 10px;
		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: 500;
			text-transform: uppercase;
			font-size: 10px;
			letter-spacing: 1px;
			padding-top: 4px;
			font-family: 'Open Sans', Arial, sans-serif;
		}

			.ch-info p a:hover {
				color: #fff222;
				color: rgba(255,242,34, 0.8);
			}

.ch-item:hover {
	/*background-image: url('../images/1.jpg');*/
}

.ch-img-1:hover {
	background-image: url('../images/img_1_hover.png');
	box-shadow: inset 0 0 0 5px rgb(29,36,120), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 0 0 5px rgb(29,36,120), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-2:hover {
	background-image: url('../images/img_2_hover.png');
	box-shadow: inset 0 0 0 5px rgb(14,15,248), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 0 0 5px rgb(14,15,248), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-3:hover {
	background-image: url('../images/img_3_hover.png');
	box-shadow: inset 0 0 0 5px rgb(156,18,16), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-4:hover {
	background-image: url('../images/img_4_hover.png');
	box-shadow: inset 0 0 0 5px rgb(63,61,63), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-5:hover {
	background-image: url('../images/img_5_hover.png');
	box-shadow: inset 0 0 0 5px rgb(230,128,77), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-6:hover {
	background-image: url('../images/img_6_hover.png');
	box-shadow: inset 0 0 0 5px rgb(150,108,12), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-7:hover {
	background-image: url('../images/img_7_hover.png');
	box-shadow: inset 0 0 0 5px rgb(6,146,52), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-8:hover {
	background-image: url('../images/img_8_hover.png');
	box-shadow: inset 0 0 0 5px rgb(255,0,16), 0 1px 2px rgba(139,140,140,0.1);
}

.ch-img-9:hover {
	background-image: url('../images/img_9_hover.png');
	box-shadow: inset 0 0 0 5px rgb(252,206,19), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-img-10:hover {
	background-image: url('../images/img_10_hover.png');
	box-shadow: inset 0 0 0 5px rgb(22,22,114), 0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover.ch-info {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

/*.circle-container {
	position: relative;
	width: 24em;
	height: 24em;
	padding: 2.8em;*/
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
/*border: dashed 1px;
	border-radius: 50%;
	margin: 1.75px auto 0;
}

	.circle-container ul li h3 {
		display: block;
		position: absolute;
		top: 30%;
		left: 15%;
		width: 100px;
		height: 60px;
		margin: -2px;
		text-align: center;
		vertical-align: middle;
	}

	.circle-container img {
		display: block;
		width: 100%;
	}*/
.circle-container {
	position: relative;
	width: 834px;
	height: 650px;
	padding: 5px;
	/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
	/*border: dashed 1px;*/
	border-radius: 50%;
	/*-webkit-border-radius: 90px;*/
	-webkit-border-top-left-radius: 50%;
	-webkit-border-top-right-radius: 50%;
	-webkit-border-bottom-left-radius: 50%;
	-webkit-border-bottom-right-radius: 50%;

	-webkit-border-top-left-radius: 1018px;
	-webkit-border-top-right-radius:1018px;
	-webkit-border-bottom-left-radius: 1018px;
	-webkit-border-bottom-right-radius: 1018px;


	/*-webkit-border-top-left-radius: 5000px;
	-webkit-border-top-right-radius: 5000px;
	-webkit-border-bottom-left-radius: 5000px;
	-webkit-border-bottom-right-radius: 5000px;*/
	-moz-border-radius: 50%;
	/*-khtml-border-radius: 90%;*/
	margin: 10px auto 0;
	background-image: url('../images/bg_1.png');
	background-repeat: repeat-x repeat-y;
	color: white;
}

	.circle-container a {
		display: block;
		position: absolute;
		top: 40%;
		left: 40%;
		width: 155px;
		height: 155px;
		margin: 0px;
	}

	.circle-container img {
		display: block;
		width: 100%;
	}

.center_text {
	width: 600px;
	height: 330px;
	color: white;
	border-radius: 50%;
	font-size: 14px;
	padding-top: 20px;
	text-align: center;
	word-wrap: break-word;
	float: left;
	transform: translate(120px,150px);
	-ms-transform: translate(120px,150px);
	-webkit-transform: translate(120px, 150px);
	/*word-spacing: inherit;
	word-break: keep-all;
	font-size: 14px;
	background-color: red;*/
}
