/* @override 
	http://www.sigre.es/modal_animation/css/style.css */

html,body {
	width: 680px;
	height: 628px;
	padding: 0;
	margin: 0;
	background-color: #e4ddd1;
	text-rendering: optimizeLegibility !important;	
	-webkit-font-smoothing: antialiased !important }

a:active, a:active * { 
	outline: none !important; 
	-moz-outline-style: none !important }
a:focus, a:focus * { 
	outline: none !important; 
	-moz-outline-style: none !important }

#content {
	width: 680px;
	height: 645px;
	overflow: hidden;
	position: absolute; }
	
#A,#B,#C {
	display: none }

/* @group Navegations ====================================== */
/* @group Sections ----------------------------------------- */
	
	#nav-sections {
		display: none;
		position: absolute;
		width: 213px;
		margin: 0 0 0 235px;
		padding: 30px 0 0 0;
		z-index: 1;
		text-align: center }
	
	#nav-sections li {
		list-style: none;
		float: left;
		width: 65px;
		height: 65px;
		margin: 0 3px }
	
	#nav-sections li a {
		display: block;
		text-indent: -9999px;
		width: 65px;
		height: 65px;
		border-radius: 35px;
		border: 2px solid #e5ddd3;
		-webkit-transition: all 400ms ease;
		-moz-transition: all 400ms ease;
		-o-transition: all 400ms ease;
		-ms-transition: all 400ms ease;
		transition: all 400ms ease }
	
	#nav-sections li a.section-a { background: #fff url('../img/icon-section-a.png') no-repeat center bottom }
	#nav-sections li a.section-b { background: #fff url('../img/icon-section-b.png') no-repeat center bottom }
	#nav-sections li a.section-c { background: #fff url('../img/icon-section-c.png') no-repeat 8px -63px; }
	
	#nav-sections li a.section-a:hover { border-color: #81ba39 }
	#nav-sections li a.section-b:hover { border-color: #d0955c }
	#nav-sections li a.section-c:hover { border-color: #5cb8dc }

	#nav-sections li a.section-a.active { background: #81ba39 url('../img/icon-section-a.png') no-repeat center top }
	#nav-sections li a.section-b.active { background: #d0955c url('../img/icon-section-b.png') no-repeat center top }
	#nav-sections li a.section-c.active { background: #5cb8dc url('../img/icon-section-c.png') no-repeat 8px -4px; }
	
	
/* @end */
/* @group Home ----------------------------------------- */
	
	#home-icon {
		display: none;
		position: absolute;
		z-index: 3;
		top: 30px;
		left: 30px }
	
	#home-icon:hover {
		opacity: 0.6;
	}
	
	#HOME {
		position: absolute;
		z-index: 2;
		width: 680px;
		height: 628px;
		background: #e4ddd2 url('../img/Z1.png') no-repeat left top;
	}
	
	#HOME h1 {
		top: 20px;
		font-size: 32px;
	}
	
	#HOME .home-menu {
		padding: 0;
		margin: 105px 0 0 500px;
	}
	
	#HOME .home-menu li {
		list-style: none;
		margin: 0 0 47px 0;
	}
	
	#HOME .home-menu li a {
		display: block;
		width: 132px;
		height: 132px;
		border-radius: 200px;
		border: 5px solid #fff;
		-webkit-transition: all 400ms ease;
		-moz-transition: all 400ms ease;
		-o-transition: all 400ms ease;
		-ms-transition: all 400ms ease;
		transition: all 400ms ease
	}
	
	#HOME .home-menu li a.section-a { background: url('../img/icon-section-a-big.png') no-repeat center }
	#HOME .home-menu li a.section-b { background: url('../img/icon-section-b-big.png') no-repeat center }
	#HOME .home-menu li a.section-c { background: url('../img/icon-section-c-big.png') no-repeat center }

	#HOME .home-menu li h2 {
		margin-top: 30px;
		font-size: 16px;
		text-align: center;
		font-weight: 600;
	}
	
	#HOME .home-menu li a.section-a:hover { border-color: #81ba39 }
	#HOME .home-menu li a.section-b:hover { border-color: #d0955c }
	#HOME .home-menu li a.section-c:hover { border-color: #5cb8dc }

/* @end */
/* @group Frame ----------------------------------------- */
	
	.nav-frame {
		position: absolute;
		padding: 0;
		margin: 0;
		margin-top: 500px;
		background-color: #fff; }
	
	.nav-frame li {
		float: left;
		list-style: none;
		margin: 0 5px }
	
	.nav-frame li a {
		display: block;
		border-radius: 100px;
		overflow: hidden;
		border: 4px solid #7c7c7c;
		-webkit-transition: all 400ms ease;
		-moz-transition: all 400ms ease;
		-o-transition: all 400ms ease;
		-ms-transition: all 400ms ease;
		transition: all 400ms ease }
	
	#A .nav-frame,
	#B .nav-frame {
		padding: 10px 68px; }
	#C .nav-frame {
		padding: 10px 204px }
	
	#A .nav-frame li a:hover,
	#A .nav-frame li a.active {
		border-color: #81ba39 }
	#B .nav-frame li a:hover,
	#B .nav-frame li a.active {
		border-color: #d0955c }
	#C .nav-frame li a:hover,
	#C .nav-frame li a.active {
		border-color: #5cb8dc }
		
	.nav-bar {
		position: absolute;
		width: 560px;
		height: 4px;
		background-color: #EEE;
		top: 582px;
		left: 70px;
		z-index: -1;
		overflow: hidden;
		border-radius: 5px }
	
	.nav-bar .on {
		display: block;
		height: 4px;
		width: 50px }
	
/* @end */
/* @end */
/* @group Frames ============================== */

	/* Titles ---------------------------------- */

	.frame-content h1 {
		position: absolute;
		z-index: 1;
		width: 680px;
		text-align: center;
		font-size: 24px;
		letter-spacing: -1px;
		font-weight: 600;
		text-shadow: 0px 1px 2px #bbb2a6;
		top: 110px }
	
	#A.frame-content h1 strong {
		color: #81ba39 }
	#B.frame-content h1 strong {
		color: #d0955c }
	#C.frame-content h1 strong {
		color: #5cb8dc }
	
	.frame-content .frames h2 {
		position: absolute;
		z-index: 1;
		top: 410px;
		width: 680px;
		text-align: center;
		font-size: 16px;
		padding: 0 100px;
		text-shadow: 0px 1px 2px #bbb2a6 }

	/* Layouts ---------------------------------- */
	
	.frame-content ul.frames {
		padding: 0;
		margin: 0;
		height: 500px;
		width: 2760px;
		position: absolute }
	
	.frame-content ul.frames li {
		float: left;
		margin:0;
		list-style: none;
		width: 680px;
		height: 628px }
	
/* @end */