@charset "utf-8";
	
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
		margin:0;
		padding:0;
	}
	table {
		border-collapse:collapse;
		border-spacing:0;
	}
	fieldset,img { 
		border:0;
	}
	address,caption,cite,code,dfn,em,strong,th,var,small {
		font-style:normal;
		font-weight:normal;
	}
	ol,ul {
		list-style:none;
	}
	caption,th {
		text-align:left;
	}
	h1,h2,h3,h4,h5,h6 {
		font-weight:normal;
	}
	q:before,q:after {
		content:'';
	}
	abbr,acronym { border:0;
	}
	
	/* @font-face definitions */
	
	/* @font-face { */
	/* font-family: 'KulminoituvaRegular'; */
	/* src: url('../fonts/kulminoituva.eot'); */
	/* src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg'); */
/* } */
	
	/* @font-face { */
	/* font-family: 'NotethisRegular'; */
	/* src: url('../fonts/Note_this.eot'); */
	/* src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg'); */
/* } */

	/* General styling */
	
	body {
		background:#00A170;	
		font-family: NotethisRegular, Verdana, Arial, sans-serif;
		font-size:100%;
		color:#202020;
	}
	
	h1, h2, h3, h4, h5, h6 {
		font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
		font-size:1.5em;
	}
	
	#wrapper {
		width:98%;
		margin:0 auto;
		text-align:center;
		/* padding-top:50px; */
		padding-top:5%;
	}
	
	/* Index Card Styling */
	
	ul#index_cards {
		/* margin-top:50px; */
		margin-top:5%;
		text-align:center;
	}
	
		ul#index_cards li {
			background:url(../cmns/cuadernario.png) repeat;
			/* height:450px; */
			/* width:130px; */
			height:45%;
			width:18%;
			min-width: min-content;
			display:block;
			float:left;
			border:1px solid #666;
			/* padding:25px 10px; */
			padding:2.5% 1%;
			position:relative;
			/* -moz-border-radius: 10px; */
			/* -webkit-border-radius: 10px; */
			/* -moz-box-shadow: 2px 2px 10px #000; */
			/* -webkit-box-shadow: 2px 2px 10px #000; */
				-moz-border-radius: 1%;
			-webkit-border-radius: 1%;
			-moz-box-shadow: 0.5% 0.5% 1% #000;
			-webkit-box-shadow: 0.5% 0.5% 1% #000;
			-moz-transition: all 0.5s ease-in-out;
			-webkit-transition: all 0.5s ease-in-out;
			/* margin-bottom:70px; */
			/* margin-bottom:7%; */
			/* margin-bottom: -31%; */
			margin-bottom: -77%;
			
		}
	
	
	
	#card-1 {
		-webkit-transform: rotate(-225deg);
		-moz-transform: rotate(-225deg);
		z-index:4;
		/* left:150px; */
		/* top:40px; */
		/* left:10%; */
		/* left: 22%; */
		left: 33%;
		top:4%;
	}
	
	#card-2 {
		-webkit-transform: rotate(-120deg);
		-moz-transform: rotate(-120deg);
		z-index:3;
		/* left:70px; */
		/* top:10px; */
		/* left:1%; */
		left: 31%;
		top:10%;
	}
	
	#card-3 {
		-webkit-transform: rotate(55deg);
		-moz-transform: rotate(55deg);
		background-color:#69732B;
		z-index:3;
		left: 2%;
		top:10%;
	}
	
	#card-4 {
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		z-index:2;
		/* right:70px; */
		/* top:10px; */
		/* right:10%; */
		right: -1%;
		top:-2%;
	}
	
	#card-5 {
		-webkit-transform: rotate(-150deg);
		-moz-transform: rotate(-150deg);
		z-index:1;
		/* right:150px; */
		/* top:40px; */
		/* right:15%; */
		right: -14%;
		top:4%;
	}
	
	/* Hover States */
	
	ul#index_cards li:hover {
		z-index:4;
	}
	
	#card-1:hover {
		-moz-transform: scale(1.1) rotate(0deg);
   	 	-webkit-transform: scale(1.1) rotate(0deg); 
	}
		
	#card-2:hover {
		-moz-transform: scale(1.1) rotate(0deg);
   	 	-webkit-transform: scale(1.1) rotate(0deg); 
	}
	
	#card-3:hover {
		-moz-transform: scale(1.1) rotate(0deg);
   	 	-webkit-transform: scale(1.1) rotate(0deg); 
	}
	
	#card-4:hover {
		-moz-transform: scale(1.1) rotate(0deg);
   	 	-webkit-transform: scale(1.1) rotate(0deg); 
	}
	
	#card-5:hover {
		-moz-transform: scale(1.1) rotate(0deg);
   	 	-webkit-transform: scale(1.1) rotate(0deg); 
	}
	
	/* Content Styling */
	
			ul#index_cards li img {
				/* margin-top:7px; */
				/* background:#eee; */
				/* -moz-border-radius: 5px; */
				/* -webkit-border-radius: 5px; */
				/* -moz-box-shadow: 0px 0px 5px #aaa; */
				/* -webkit-box-shadow: 0px 0px 5px #aaa; */
				margin-top:0.7%;
				background:#eee;
				-moz-border-radius: 0.5%;
				-webkit-border-radius: 0.5%;
				-moz-box-shadow: 0% 0% 0.5% #aaa;
				-webkit-box-shadow: 0% 0% 0.5% #aaa;
			}
			
			ul#index_cards li p {
				/* margin-top:4px; */
				margin-top:0.4%;
				text-align:left;
				/* line-height:28px;	 */
				/* line-height:2.8%;	 */
				line-height:1em;
			}
			
	#back {
		clear:both;
		text-decoration:none;
		color:#F90;
		font-size:1.3em;
	}
	
	#back:hover {
		text-decoration:underline;
	}