﻿.content ul {position: relative; width: 100%; height: 800px; display: block; background-color: #fff; list-style: none; padding: 0;}
.explore-app .tile {position: absolute; background-color: #fff; overflow: hidden;}
.tile-inner {display: block; height: 100%;}
.tile-inner div.tile-content {border: 2px solid #fff; height: 100%; background-color: #fff;}
.tile-inner div.tile-content img {
	max-width:100%;
}

/*.explore-app .tile.selected .tile-inner div.tile-content {background-color: #aaa;}*/

#indicator {
	background: #e04579 center center no-repeat;
}
#indicator.up {
	background-image: url("/_a2015/Whatson/Festivals/MoombaFestival/2015/PublishingImages/Explore/White-circle-arrow-up.png");
}
#indicator.down {
	background-image: url("/_a2015/Whatson/Festivals/MoombaFestival/2015/PublishingImages/Explore/White-circle-arrow-down.png");
}
#indicator.left {
	background-image: url("/_a2015/Whatson/Festivals/MoombaFestival/2015/PublishingImages/Explore/White-circle-arrow-left.png");
}
#indicator.right {
	background-image: url("/_a2015/Whatson/Festivals/MoombaFestival/2015/PublishingImages/Explore/White-circle-arrow-right.png");
}
#indicator div.tile-inner div.tile-content {background-color: transparent;}
#explorefact {overflow: hidden;}
#explorefact div.tile-inner div.tile-content {background-color: transparent; margin: 10px;}
#explorefact h3 {
	font-family: 'Proxima Nova Semibold';
	font-size: 18px;
	color: #009dcc;
	margin: 0 0 10px 0 !important;
}
#explorefact p {
	font-family: 'Proxima Nova Light';
	font-size: 14px;
	color: #3b3453;
}
.explore-app .tile div.tile-inner div.tile-content h3 {
	transition: bottom 0.2s;
	position: absolute;
	bottom: -110px;
	background-color: rgba(255,255,255,0.7);
	padding-top: 10px;
	padding-left: 5px;
	text-align: left;
	color: #444;
	width: 100%;
}
.explore-app .tile div.tile-inner div.tile-content h3.active {bottom: -10px;}
#explorefact div.tile-inner div.tile-content h3 {position: relative; bottom: auto; font-size: 16px; margin:0; padding:0;}
#explorefact div.tile-inner div.tile-content > p {font-size: 14px;}
.no-right-border .tile-inner div.tile-content {border-right: 0px;}
.no-left-border .tile-inner div.tile-content {border-left: 0px;}
.no-top-border .tile-inner div.tile-content {border-top: 0px;}
.no-bottom-border .tile-inner div.tile-content {border-bottom: 0px;}
.video-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000;
	background-color: rgba(0,0,0,0.7);
}
.video-container .video-wrapper {width: 580px; height: 335px; margin: 10% auto; position: relative;}
.video-container .video-wrapper span {
	position: absolute;
	top: -13px;
	right: -13px;
	font: 13px/22px Arial, sans-serif;
	color: #fff;
	background: #000;
	border: 2px solid #fff;
	border-radius: 13px;
	width: 26px;
	height: 26px;
	text-align: center;
	font-weight: 900;
	cursor: pointer;
}
.video-container .video-wrapper .video-inner {padding: 10px; background-color: #fff; border-radius: 3px;}
.video-container .video-wrapper .video-inner iframe {border: none;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.content ul {height: auto; width: 100%;}
	.content ul li {display: block; width: 100% !important; height: 200px !important; position: relative; top: auto !important; left: auto !important;}
	.content ul li#explorefact-mobile.shrink {height: 0 !important;}
	#explorefact, #indicator {display: none;}
	#explorefact-mobile {transition: height 0.3s;}
	#explorefact-mobile div.tile-inner div.tile-content {background-color: transparent;}
	.explore-app .tile {position:inherit;left: 0px!important;}
}