/* Message to show when border-radius is not supported */
.message{
	display: none;
	text-align: center;
	font-weight: bold;
	color: #000;
	font-size: 20px;
	font-style: italic;
	padding-bottom: 20px;
}
.no-borderradius .message{
	display: block;
}
/* Box with dashed border to show the bounding box of the circle */
.normal-trigger-area{
	width: 220px;
    height: 220px;
	position: absolute;
    left: 6px;
    top: -14px;
    padding-left: 14px;
    padding-top: 14px;
/*
	background: transparent url('../style/images/fonas.png') no-repeat scroll 2px 2px;
	
	-webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.5);
	-moz-box-shadow: 0 0 0 1px rgba(255,255,255,0.5);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.5); */
}
/* The circle */
.ec-circle, .ec-circle2, .ec-circle3, .ec-circle4, .ec-circle5  {
    width: 220px;
    height: 220px;
	-webkit-border-radius: 210px;
	-moz-border-radius: 210px;
	border-radius: 50%;
	text-align: center;
    overflow: hidden;
	font-family: 'MyriadPro-Cond';
	-webkit-box-shadow: 
        inset 0 0 1px 230px rgba(75,39,77,0.6);
	-moz-box-shadow: 
        inset 0 0 1px 230px rgba(75,39,77,0.6);
	box-shadow: 
        inset 0 0 1px 230px rgba(75,39,77,0.6);
	-webkit-transition: box-shadow 800ms ease-in-out;
	-moz-transition: box-shadow 400ms ease-in-out;
	-o-transition: box-shadow 400ms ease-in-out;
	-ms-transition: box-shadow 400ms ease-in-out;
	transition: box-shadow 400ms ease-in-out;
	/*For IE < 9 so that we have some kind of effect */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	display: block;
	outline: none;
}
.ec-circle {
	background:  #4B274D url(../images/ikona1.png) no-repeat center center;
}
.ec-circle2 {
	background: #4B274D url(../images/ikona2.png) no-repeat center center;
}
.ec-circle3 {
	background: #dda994 url(../images/ikona3.png) no-repeat center center;
}
.ec-circle4 {
	background: #dda994 url(../images/ikona4.png) no-repeat center center;
}
.ec-circle5 {
	background: #dda994 url(../images/ikona5.png) no-repeat center center;
}
.ec-circle-hover, .ec-circle-hover2, .ec-circle-hover3, .ec-circle-hover4, .ec-circle-hover5 {
	-webkit-box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 0 #c18167,
		0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 0 #c18167,
		0 0 10px rgba(0,0,0,0.3);
    box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 0 #c18167,
		0 0 10px rgba(0,0,0,0.3);
	/*For IE < 9 so that we have some kind of effect */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}



/* Text inside of circle */
.ec-circle h3, .ec-circle2 h3, .ec-circle3 h3, .ec-circle4 h3, .ec-circle5 h3 {

    -webkit-transition: text-shadow 400ms ease-in-out;
	-moz-transition: text-shadow 400ms ease-in-out;
	-o-transition: text-shadow 400ms ease-in-out;
	-ms-transition: text-shadow 400ms ease-in-out;
	transition: text-shadow 400ms ease-in-out;
	
	color: white;
	font-size: 20pt;
	
	text-shadow: 0px 0px 100px rgb(255, 255, 255);

	transition: text-shadow 400ms ease-in-out 0s;
	padding-top: 80px;
	font-family: PT Sans;
	font-weight:bold;
}
.ec-circle-hover h3, .ec-circle-hover2 h3, .ec-circle-hover3 h3, .ec-circle-hover4 h3, .ec-circle-hover5 h3 {
	/*
	text-shadow: 0px 0px 4px #fff;
	*/
	font-size: 0;
}
/* Content on the right side */
.content{
	width: 233px;
	float: right;
}
.content a{
	color: #c18167;
	font-weight: bold;
}
.content a:hover{
	color: #000;
}
.content p{
	padding: 10px 0px;
	font-size: 16px;
	line-height: 26px;
	font-family: Georgia, serif;
	font-style: italic;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
}
.content h1{
	font-family: 'MyriadPro-Cond';
	font-size: 46px;
	padding-bottom: 10px;
	color: #c18167;
	text-shadow: 2px 1px 2px rgba(0,0,0,0.2), 0px 0px 1px #fff;
}
.content h1 span{
	font-size: 22px;
}