@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;	
}
html,
body {
	height: 100%;
	width: 100%;
	font-size: 1rem;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
	text-align:center;	
	background-color:#F1f1f1;
}
header {
	padding:0.5% 0 0.5% 0;
	background-color:#BBD100;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	height: 2.45em;
	line-height: 2.2em;
}
header h1 {
	 color:#FFF;
	 text-transform:capitalize;
	 background-color:inherit;
}
@media (max-width: 750px) {
	header h1 {font-size: 1.5em}
}
@media (max-width: 600px) {
	header h1 {font-size: 1.25em}
}
@media (max-width: 500px) {
	header h1 {font-size: 0.75em}
}
/*############
## ACTIVITY ##
############*/
section.container {
	list-style: none;
	width: 100%;
	position: relative;
}

/* CONTROLS */
header .back {
	position: absolute;
	left: 0%;
	top: 0%;
	padding: 0;
	width: 2em;
	cursor: pointer;
	text-decoration: none;
	font-size: 2em;
	color: #fff;
	background-color: inherit;	
}
header .back:hover {
	color: #eee;
}
section.container span.closer {
	position:absolute;
	top:2%;
	right:1%;
	padding: 1% 2%;
	font-size:4em;
	display: block;
	z-index:9;
	background-color:#FFF;
	display:none;	
	cursor: pointer;
}
section.container .fa-volume-up {
	position:absolute;
	left:5%;
	top:2%;
	display:none;
	z-index: 3;
	font-size: 4em;
	padding: 1% 2%;
	background-color: #FFF;
	cursor: pointer;
}
section.container .fa-volume-up:hover,
section.container span.closer:hover {
	background-color: #ccc;
}

/* SUBJECTS (FROM VERSION 1) *//*
section.subjects.container {
	background-color: #ffffff;
	text-align: center;
}
section.subjects.container div.subject {
	display: inline-block;
	letter-spacing: 1px;
	background-color: #BBD100;
	color: #ffffff;
	text-align: Center;
	width: 27%;
	padding: 2% 1%;
	margin: 1.5%;
	box-shadow: -2px 2px 0px 0px #999;
	cursor: pointer;
}
section.subjects.container div.subject:hover {
	background-color: #CCE211;
}
section.subjects.container div.subject:active {
	background-color: #AAC000;
}*/

/* CARDS */
section.cards.container {
	/*display: none;*/
	height: 100%;
}
section.cards.container div.subject {
	position: relative;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	/*display: none;*/
}
section.cards.container div.cards {
	width:20%;
	height:auto;
	min-height:0px;
	float:left;	
	background-color:#F1F1F1;
	position: absolute;
	display: block;
	overflow: hidden;
	cursor: pointer;
}
section.cards.container div.cards.focussed {
	cursor: default;
	z-index:3
}
section.cards.container div.cards.blurred {
	display: none;
}
section.cards.container div.cards div.cardoverlay {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px #fff;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
section.cards.container div.cards div.cardInfo {
	height: 100%;
	width: 100%;
	overflow: hidden;
	text-align: center;
}
/* IMAGE THUMB */
section.cards.container div.cards div.cardInfo .thumb {
	display: inline-block;
	margin-top: -35%;
	transition: all 0.25s ease-in-out;
	max-width: 200%;
	margin: -50%;
}
section.cards.container div.cards:not(.focussed):hover div.cardInfo .thumb  {
	/*
	max-width:102%;
	margin: -1%;
	*/
	/*margin-top:-30%;	*/
}
section.cards.container div.cards.focussed div.cardInfo .thumb {
	max-height: 90%;
	max-height: calc(100% - 3em);
	margin-top: 0px;
}
/* THUMB PRELOADING SPAN*/
section.cards.container div.cards div.cardInfo span.thumb {
	display: inline-block;
	color: #d9534f;
}
section.cards.container div.cards div.cardInfo span.thumb > span {
	animation: loader 2500ms linear infinite;
}
section.cards.container div.cards div.cardInfo .thumb.preloadable {
	margin: 0px auto;
	animation: loader 1250ms steps(1) infinite;
	transition: all 125ms ease-in-out;
	max-height: 100%;
}
section.cards.container div.cards div.cardInfo .thumb.loaded {
	max-width: 100%;
	margin: 0px auto;
}
section.cards.container div.cards div.cardInfo .thumb.hide {
	display: none;
}
/* CARD FLIPPER */
section.cards.container div.cards div.cardInfo div.thumbswitch_holder {
	position: absolute;
	bottom: 1em;
	left: 0;
	width: 96%;
	opacity: 0;
	text-align: center;
	transition: all 0.25s linear;
	line-height: 1em;
}
.thumb_switcher {
	text-align: center;
	height: 2em;
	line-height: 2em;
	width: 2em;
	border-radius: 100%;
	background-color: #7F42AD;
	color: #fff;
	font-size: 2.5em;
	cursor: pointer;
	box-shadow: 0 0.15em 0 0 #777;
	box-shadow: 0 0.15em 0 0 rgba(30,30,30,0.6);
	position: relative;
	top: 0;
}
.thumb_switcher:hover {
	background-color: #8F53BE;
}
.thumb_switcher:active {
		top: 0.1em;
	box-shadow: none;
}
section.cards.container div.cards.focussed:not(.moving) div.cardInfo div.thumbswitch_holder {
	opacity: 1;
}

/* CARD TITLE */
section.cards.container div.cards div.cardInfo p.cardTitle {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 96%;
	opacity: 0;
	margin: 0 auto;
	padding: 0.6em 2% 1em;
	font-size: 3.3em;
	color: #565668;
	background-color: #fff;
	text-align: center;
	transition: all 0.25s linear;
	line-height: 1em;
}
section.cards.container div.cards div.cardInfo p.cardTitle.en {
	font-size: 1.5em;
	left: auto;
	right: 0;
	width: auto;
	padding: 0.5em 1em;
	color: #888;
}
section.cards.container div.cards.focussed:not(.moving) div.cardInfo p.cardTitle {
	opacity: 1;
}

@media (max-width: 480px) {
section.subjects.container div.subject {
	display: block;
	width: 90%;
	padding: 3% 1%;
	margin: 2.5% auto;
}
section.container span.closer {
	font-size: 30px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	padding: 0;
}
section.container .fa-volume-up {
	font-size: 26px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	padding: 0;
}
header .back {
	padding:0 3%;	
}
}
@keyframes loader {
	0% {transform: scale(0.6) rotate(0deg);}
	25% {transform: scale(0.6) rotate(5deg);}
	50% {transform: scale(0.6) rotate(0deg);}
	75% {transform: scale(0.6) rotate(-5deg);}
	100% {transform: scale(0.6) rotate(0deg);}
}