/* GLOBAL SETTINGS
	======================================================================== */
	html{
		margin: 0;
		padding: 0;
		background: url(./images/header-bg.png) repeat-x center top #8ffbe2;
	}
	
	body{
		padding: 0 0 0 0;
		margin: 0;
		overflow-x: hidden;
		background: url(./images/header.png) repeat-x center top;
	}
	
	.point:hover em {
	  -webkit-animation-name: rotate;
	  -webkit-animation-duration:2s;
	  -webkit-animation-iteration-count:infinite;
	  -webkit-animation-timing-function:linear;
	  -moz-animation-name: rotate;
	  -moz-animation-duration:2s;
	  -moz-animation-iteration-count:infinite;
	  -moz-animation-timing-function:linear;
	}
	
	@-webkit-keyframes rotate {
	  from {-webkit-transform:rotate(0deg);}
	  to {  -webkit-transform:rotate(360deg);}
	}
	
	@-moz-keyframes rotate {
	  from {-moz-transform:rotate(0deg);}
	  to {  -moz-transform:rotate(360deg);}
	}
	
	/* MAIN MENU
	======================================================================== */
	div.mainMenu{
		margin: 0 auto 30px auto;
		padding: 0;
		text-align: center;
	}
	
	#mainMenu{
		display: inline-block;
		text-algin: center;
		margin: 0 auto;
		padding: 10px 0;
		list-style-type: none;
		background-color: #fff;
		-webkit-border-bottom-right-radius: 30px;
		-webkit-border-bottom-left-radius: 30px;
		-moz-border-radius-bottomright: 30px;
		-moz-border-radius-bottomleft: 30px;
		border-bottom-right-radius: 30px;
		border-bottom-left-radius: 30px;
	}
	
	#mainMenu li{
		font-size: 12px;
		text-transform: uppercase;
		font-weight: bold;
		display: inline-block;
		padding: 10px 17px;	
		margin: 0;
		border-right: 1px dotted #009800;
	}
	
	#mainMenu li a{
		display: block;
		padding: 5px 10px;
		color: #009800;
	}
	
	#mainMenu li a:hover{
		color: #fff;
		text-decoration: none;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		background-color: #50d500;
	}
	
	#mainMenu li:last-child{
		border-right: none;	
	}
	
	/* MAP
	======================================================================== */
	#map{
		position: relative;
		width: 100%;
		max-width: 1076px;
		margin: 0 auto;
		height: 607px;
		background: url(./images/map-color2.png) no-repeat center top;
	}

	#map .point{
		position: absolute;
		text-align: center;
		width: 80px;
		height: 80px;
	}

	#map .point .hint{
		display: none;
		width: 250px;
		position: absolute;
		left: -85px;
		bottom: 95px;
		z-index: 5;
	}

	#map .point .hint:after{
		content: '';
		position: absolute;
		bottom: -10px;
		left: 115px;
		margin: 0 auto;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: #fcea93 transparent transparent transparent;
	}

	#map .point .hintContainer{
		/*
		position: relative;
		left: -50%;
		top: 0;
		*/
		padding: 10px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		background-color: #fcea93;
	}

	#map .point .hint h3{
		font-size: 14px;
	}
	
	#map .point div.pointName{
		display: block;
		position: absolute;
		font-family: Arial;
		font-weight: bold;
		color: #fff;
		text-transform: uppercase;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
		max-width: 110px;
		font-size: 11px;
		text-align: center;
		left: 50%;
	}
	
	#map .point:hover div.pointName{
		color: #f8ff8d;	
	}

	#map .point span{
		display: block;
		position: relative;
		left: -50%;
	}
	
	#map .point em{
		margin: 0 auto;
		display: block;
		background-repeat: no-repeat;
		background-position: center center;		
	}

	
	/*** size 1*/
	#map .point.size1 em{
		width: 38px;
		height: 38px;
		background-image: url(./images/point-size1.png);
	}
	
	#map .point.size1 .pointName{
		top: 40px;
	}

	/*** size 3*/
	#map .point.size3 em{
		width: 52px;
		height: 52px;
		background-image: url(./images/point-size3.png);
	}
	
	#map .point.size3 .pointName{
		top: 54px;
	}
	
	/* HEADER
	======================================================================== */
	#logo{
		width: 310px;
		height: 106px;
		position: relative;
		margin: 0 auto;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		background: url(./images/bioclub-logo.png) no-repeat 50% 20px #fff;
	}
	
	#logo .slogan{
		position: absolute;
		display: block;
		width: 100%;
		bottom: 9px;
		text-align: center;
	}
	
	ul#categoryMenu{
		width: 600px;
		list-style-type: none;
		margin: 15px auto 0 auto;
		padding: 0;
		text-align: center;
	}
	
	ul#categoryMenu li{
		display: inline-block;
		font-size: 12px;
		font-family: Minion Pro, Arial;
		text-transform: uppercase;
		margin: 5px 3px;
		padding: 5px 10px 4px 20px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		background: url(./images/category-li.png) no-repeat 4px 50% #8ef3b0;
	}
	
	ul#categoryMenu li:hover{
		background-color: #f0ff9a;	
	}
	
	.headerLeaf{
		width: 15%;
		max-width: 247px;
		height: 296px;
		position: absolute;
		left: 0;
		top: 0;
		background: url(../images/header-leaf.png) no-repeat 100% 0;
	}
	
	
	/* FOOTER
	======================================================================== */
	#footer{
		width: 100%;
		height: 270px;
		position: relative;
		background: url(./images/footer-bg.png) repeat-x center bottom;
	}
	
	#footer .container{
		width: 100%;
		height: 222px;
		position: absolute;
		bottom: 0;
		left: 0;
		background: url(./images/footer-line.png) no-repeat right top;
	}
	
	#footer .leaf{
		width: 226px;
		height: 159px;
		position: absolute;
		right: 0;
		bottom: 0;
		background: url(./images/footer-leaf.png) no-repeat right top;
	}

	#footer .contactsInfo{
		width: 100%;
		max-width: 1180px;
		margin: 20px auto 0 auto;
		display: table;
		height: 192px;
	}
	
	#footer .contactsInfo div{
		display: table-cell;
		height: inherit;
		vertical-align: middle;
		padding-left: 100px;
		background: url(./images/mail-ico.png) no-repeat 0 50%;	
	}
	
	
	/* CONTENT PAGE
	======================================================================== */
	#content{
		max-width: 960px;
		margin: 10px auto;
		padding: 15px;
		-webkit-border-radius: 25px;
		-moz-border-radius: 25px;
		border-radius: 25px;
		border: 1px solid #13cca2;
		background-color: #fff;
	}
	
	#content h1{
		color: #50d500;
		text-align: center;
	}
	
	a{
		color: #50bb59;
	}
	
	a:hover{
		color: #000;
	}