@font-face
{
	font-family: snaphand;
	src: url('../fonts/snaphand-v1-free.ttf');
}

@font-face
{
	font-family: SnapHand;
	src: url('../fonts/snaphand-v1-free.ttf');
}

// Orientation feature
#warning-message 
{ 	
	display:block;
}

#master-wrapper 
{ 
	display:flex;
	flex-direction: column;
	flex:1;
}
@media only screen and (orientation:portrait)
{
	#master-wrapper { display:none; }
	
	#warning-message 
	{ 
		display: block;
		margin:auto 0;
		font-size:1.8em;
		text-align:center;
		text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.8);
	}
	#social {display:none;}
}
@media only screen and (orientation:landscape)
{
	#warning-message { display:none; }
}
	
html
{
	font-family: snaphand;
	color: white;
}

body
{
	display: flex;
	flex-direction: column;

	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	margin: 1.667vh;
}

a { outline: 0; text-decoration: none;}

#title
{
	background: url('../images/title.svg') no-repeat center center;
	background-size: contain;
	margin: 0 auto 0 auto;
	width: 55.3704vh;
	height: 19.074vh;
	display: block;
}

#content
{
	flex: 1;
	max-width: 111.111vh;
	margin: 0 auto 0 auto;

	display: block;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.box
{
	border-radius: 8px;
	background: linear-gradient(#0055d4, #0044aa);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
	padding: 10px;
}

.full-height
{
	flex: 1;
}

.anchor-top-right
{
	position: absolute;
	right: -9vh !important;
    top: -7vh !important;
}
.anchor-bottom-right
{
	position: absolute;
	right: 0;
	bottom: 0;
}

footer, footer a
{
	display: inline-block;
	text-align: center;
	color: #e8f0c8;
	font-size: 10pt;
	text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.8);
	white-space: nowrap;
}

/*****************************
* Mute Button
******************************/
#mute-button
{
	position: absolute;
	right:2vh;
	top:2vh;
	width:40px;
	height:40px;
}

.muted
{
	background-image: url('../images/mutebutton.png');
	background-position: -40px 0px;
	background-repeat: no-repeat;
}

.unmuted
{
	background-image: url('../images/mutebutton.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
}


/*****************************
* Navigation
******************************/

.nav
{
	font-family: snaphand;
	width: 100%
	display: inline-block;
	text-align: center;
	margin:0 auto;
	padding: 0;
}

.nav li
{
	display: inline-block;
}

.nav a
{
	display: inline-block;
	height: 6.4815vh;
	width: 20.37vh;
}

.nav svg
{
	height: inherit;
	width: inherit;
	font-size: 5.5556vh;
}

.nav text
{
	text-anchor: middle;
}

.nav text.select
{
	stroke: white;
	stroke-width: 1.296vh;
	visibility: hidden;
}
.nav a.active text.select
{
	visibility: visible;
}

.nav text.outline
{
	stroke: white;
	stroke-width: 0.85vh;
}
.nav a:hover text.outline
{
	stroke: white;
	stroke-width: 1.296vh;
}

.nav a.play text.fill { fill: #ffc954; }
.nav a.active.play:not(:hover) text.outline { stroke: #c88800; }

.nav a.learn text.fill { fill: #33b4f0; }
.nav a.active.learn:not(:hover) text.outline { stroke: #0a648e; }

.nav a.make text.fill { fill: #ff6177; }
.nav a.active.make:not(:hover) text.outline { stroke: #d4001e; }

.nav a.music text.fill { fill: #bd9fe7; }
.nav a.active.music:not(:hover) text.outline { stroke: #7032c8; }

.nav a.story text.fill { fill: #54bc7e; }
.nav a.active.story:not(:hover) text.outline { stroke: #255f3c; }

/* end */

.hor-flex-wrap
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 1vh;
}

.hor-flex
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1vh;
}

.bg-base
{
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%; 
}
.bg-index { background-image: url('../images/main_page_bg.jpg'); }
.bg-play { background-image: url('../images/play_bg.jpg'); }
.bg-learn { background-image: url('../images/learn_bg.jpg'); }
.bg-make { background-image: url('../images/make_bg.jpg'); }
.bg-story { background-image: url('../images/story_bg.jpg'); }
.bg-music { background-image: url('../images/music_bg.jpg'); }
.bg-terms { background-image: url('../images/music_bg.jpg'); }

.terms-container
{
	overflow-y:scroll;
	max-height: 45vh;
	font-size: 2.5vh;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.panel
{
	background-color: #83cb4c;
	border: white solid 0.74vh;
	border-radius: 3.703vh;
	text-align: center;
	padding: 5vh 6vh;
}

.title
{
	width: 80vh;
	height: 6.4815vh;
	font-size: 6.0185vh;
}
.title text
{
	text-anchor: middle;
	fill: #f9b006;
}
.title text.outline
{
	stroke: white;
	stroke-width: 0.85vh;
}

.paging
{
	display:block !important;
	height: 3vh;
	width: 100%;
	font-size: 3vh;
}
.paging text
{
	text-anchor: middle;
	fill: #f9b006;
}
.paging text.outline
{
	stroke: white;
	stroke-width: 0.85vh;
}

.page-arrow-left
{
	height: 5.37vh;
	position: absolute;
	left: -4vh;
	top: 50%;
	transform: translateY(-50%);

	cursor: pointer;
}
.page-arrow-right
{
	height: 5.37vh;
	position: absolute;
	right: -4vh;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);

	cursor: pointer;
}

.play-page-arrow-left
{
	height: 5.37vh;
	position: absolute;
	left: -4.5vh;
	top: 50%;
	transform: translateY(-50%);

	cursor: pointer;
}
.play-page-arrow-right
{
	height: 5.37vh;
	position: absolute;
	right: -4.5vh;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);

	cursor: pointer;
}

/*****************************
* Thumb Item UI
******************************/

.thumb-empty
{
	width: 12vh;
	height: 12vh;
	margin: 0 1vh;

	border-radius: 1.5vh;
	border: 4px rgba(255, 255, 255, 0.1) double;
	background-color: rgba(255, 255, 255, 0.2);
	box-sizing: border-box;

	display: none;
}

.thumb
{
	width: 12vh;
	height: 12vh;
	margin: 0 1vh;
	z-index: 0;
	cursor: pointer;

	box-sizing: border-box;

	border: white solid 0.5vh;
	border-radius: 1.5vh;
	background-color: #4d5e40;
	background-size: cover;
	position: relative;
}

/*****************************
* Video Item UI
******************************/

.item-empty
{
	width: 21.2963vh;
	height: 16.6667vh;
	margin: 0.9259vh;

	border-radius: 1.5vh;
	border: 4px rgba(255, 255, 255, 0.1) double;
	background-color: rgba(255, 255, 255, 0.2);
	box-sizing: border-box;

	display: none;
}

.item
{
	width: 21.2963vh;
	height: 16.6667vh;
	margin: 0.9259vh;
	z-index: 0;
	cursor: pointer;

	box-sizing: border-box;

	border: white solid 0.5vh;
	border-radius: 1.5vh;
	background-color: #4d5e40;
	background-size: cover;
	position: relative;
}

.item-label
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0 0 1vh 1vh;
	padding: 0.6vh;

	text-align: center;
	text-decoration: none;
	pointer-events: none;
	visibility: hidden;

	text-shadow: 0 1.5px black;
}
.item:hover .item-label
{
	visibility: visible;
}

/*****************************
* Play Item UI
******************************/

.play-item
{
	width: 23.1481vh;
	height: 43vh;
	margin: 0.9259vh;
	z-index: 0;
	cursor: pointer;

	box-sizing: border-box;

	border: #fefc73 solid 0.55556vh;
	/*border-radius: 1.5vh;*/
	background-color: #4d5e40;
	background-size: cover;
	background-position: center;
	position: relative;
}

.play-item:hover, .learn-item:hover, .make-item:hover, .close-button:hover, .item:hover,  .page-arrow-left:hover, .page-arrow-right:hover, .thumb:hover, .close-cross-button:hover
{
	background-color: rgba(0,0,0,.3);
	background-blend-mode: multiply;
}

.play-item-label
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0 0 1vh 1vh;
	padding: 0.6vh;

	text-align: center;
	text-decoration: none;
	pointer-events: none;
	visibility: hidden;

	font-size: 3vh;
	text-shadow: 0 1.5px black;
}
.play-item:hover .play-item-label
{
	visibility: visible;
}

.play-item-empty
{
	width: 23.1481vh;
	height: 46.2963vh;
	margin: 0.9259vh;

	border-radius: 1.5vh;
	border: 4px rgba(255, 255, 255, 0.1) double;
	background-color: rgba(255, 255, 255, 0.2);
	box-sizing: border-box;

	display: none;
}

/*****************************
* Learn Item UI
******************************/

.learn-item
{
	width: 49.074vh;
	height: 46.2963vh;
	margin: 0.9259vh;
	z-index: 0;
	cursor: pointer;

	box-sizing: border-box;
	display: inline-block;

	border: #fefc73 solid 0.55556vh;
	/*border-radius: 1.5vh;*/
	background-color: #4d5e40;
	background-size: cover;
    background-position: center;
	position: relative;
}

.learn-hogie-friend
{
	background: url('../images/learn_hogie_and_friends.jpg');
	background-size: 100% 100%;
}

.learn-did-you-know
{
	background: url('../images/learn_did_you_know.jpg');
	background-size: 100% 100%;
}

.learn-item-label
{
	position: absolute;
	height: 12vh;
	width: 100%;
	left: 0;
	bottom: 0;

	padding-bottom: 2vh;

	font-size: 3vh;

	text-align: center;
	text-decoration: none;
	pointer-events: none;
}
.learn-item-label text
{
	text-anchor: middle;
	fill: #83cb4c;
}
.learn-item-label text.outline
{
	stroke: white;
	stroke-width: 0.85vh;
}

/*****************************
* Make Item UI
******************************/

.make-item
{
	width: 32.4074vh;
	height: 46.2963vh;
	margin: 0.9259vh;
	z-index: 0;
	cursor: pointer;

	box-sizing: border-box;
	display: inline-block;

	border: #fefc73 solid 0.55556vh;
	/*border-radius: 1.5vh;*/
	background-color: #4d5e40;
	background-size: cover;
	position: relative;
}

.make-paint-thumb
{
	background: url('../images/make_paint_thumb.jpg');
	background-size: 100% 100%;
}

.make-colour-thumb
{
	background: url('../images/make_colour_thumb.jpg');
	background-size: 100% 100%;
}

.make-item-label
{
	position: absolute;
	height: 12vh;
	width: 100%;
	left: 0;
	bottom: 0;

	padding-bottom: 2vh;

	font-size: 3vh;

	text-align: center;
	text-decoration: none;
	pointer-events: none;
}
.make-item-label text
{
	text-anchor: middle;
	fill: #83cb4c;
}
.make-item-label text.outline
{
	stroke: white;
	stroke-width: 0.85vh;
}

/*****************************
* Download Item UI
******************************/

.item-type
{
	position: absolute;
	bottom: 0;
	right: 0;

	color: #faff79;
	background-color: #f9b006;
	border-radius: 1vh 0 1vh 0;
	padding: 0 1vh;

	text-align: center;
	text-decoration: none;
	pointer-events: none;

	font-size: 2.5vh;
}
.item:hover .item-type
{
	visibility: hidden;
}

.item-download
{
	position: absolute;
	top: 3vh;
	left: 0;
	right: 0;
	bottom: 6vh;

	background-image: url('../images/download.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;

	pointer-events: none;
	visibility: hidden;
}
.item:hover .item-download
{
	visibility: visible;
}

/*****************************
* Character Item UI
******************************/

#character-portrait
{
	height: 23vh;
	min-width: 15vh;
	margin: 2vh;
	float: left;
}

#character-name
{
	font-size: 4vh;
	text-align: left;
	color: #faff79;
}
#character-desc
{
	font-size: 2.5vh;
	line-height: 3vh;
	text-align: left;
	color: #045200;
}

.character-detail-wrap
{
	height: 30vh;
	display:block;
}

.close-button
{
	color: #83cb4c;
	background-color: white;
	padding: 1px 15px;
    cursor: pointer;
    font-size: 5vh;
	bottom:3% !important;
}

.close-cross-button
{
	width: 8vh;
	height: 8vh;
	background-image: url('../images/x.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/*****************************
* Popup UI
******************************/

#popup
{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	display: none;
	text-align: center;
	align-items: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.5);
}

.align-center 
{
	position: absolute;
    margin-left: 38%;
}

.guarded-frame
{
	width: 150vh;
	max-width: 1440px;
	max-height: 90vh;

	padding: 0 10% !important;
	
	box-sizing: border-box;
	position: relative;
}

.video-frame
{
	max-width: 1024px;
	max-height: 576px;
	width: 100%;
	padding-bottom: 56.25%;
	position: relative;
	box-sizing: border-box;
}
.video-frame>div
{
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	display: block;
}
.video-frame>div>iframe
{
	width: 100%;
	height: 100%;
	background-color: black;
}

#popup-iframe
{
	border: 0.5556vh white solid;
}


/*=========================
  Social Icons
 ================= */ 
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";

.social {
	display:block;
	position:absolute;
	right:0;
	bottom:0;
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
	list-style-type: none;
	vertical-align: top;
}

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    line-height:40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover {
    background: #4060A5;
}

.social .fa-twitter:hover {
    background: #00ABE3;
}

.social .fa-google-plus:hover {
    background: #e64522;
}

.social .fa-github:hover {
    background: #343434;
}

.social .fa-pinterest:hover {
    background: #cb2027;
}

.social .fa-linkedin:hover {
    background: #0094BC;
}

.social .fa-flickr:hover {
    background: #FF57AE;
}

.social .fa-instagram:hover {
    background: #375989;
}

.social .fa-vimeo-square:hover {
    background: #83DAEB;
}

.social .fa-stack-overflow:hover {
    background: #FEA501;
}

.social .fa-dropbox:hover {
    background: #017FE5;
}

.social .fa-tumblr:hover {
    background: #3a5876;
}

.social .fa-dribbble:hover {
    background: #F46899;
}

.social .fa-skype:hover {
    background: #00C6FF;
}

.social .fa-stack-exchange:hover {
    background: #4D86C9;
}

.social .fa-youtube:hover {
    background: #FF1F25;
}

.social .fa-xing:hover {
    background: #005C5E;
}

.social .fa-rss:hover {
    background: #e88845;
}

.social .fa-foursquare:hover {
    background: #09B9E0;
}

.social .fa-youtube-play:hover {
    background: #DF192A;
}