/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    overflow:hidden;
    background:#000;
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
	font-family: Arial;
	color: #000;
	font-size: 16px;
}

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:9999; /* makes sure it stays on top */
}
#preloader > img{ display: none; }
#preloader > img, .background > img{ width: 100%; }
.gamestart{ position: absolute; top: 3.2em; font-size: 1.8em; left: 4.4em; width: 6.5em; display: none;  border-radius: 0.625em; background: #387d01; outline: 0;  border: 1px solid #387d01; color: #fff; padding: 0.5em 0.5em; border-radius: 0.4em; cursor: pointer; }
.play { position: absolute; top: 12.45em; font-size: 1.8em; left: 2.1em; width: 6.5em; padding: 0.4em 0.7em; border-radius: 0.625em; background: #387d01; outline: 0;  border: 1px solid #387d01; color: #fff; padding: 0.5em 0.5em; border-radius: 0.4em; cursor: pointer; }
.wGlow {
	-webkit-animation: whiteGlow 3s infinite; /* Safari 4+ */
	-moz-animation: whiteGlow 3s infinite; /* Fx 5+ */
	-o-animation: whiteGlow 3s infinite; /* Opera 12+ */
	animation: whiteGlow 3s infinite; /* IE 10+, Fx 29+ */
}
.background{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    color: white;
    text-align: center;
    overflow: hidden;
	background: url("../img/page1.jpg") no-repeat center / contain;
}
.game-view{
	overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}
/*pages*/
.page{
	width: 100%;
	height: 100%;
	z-index: 999;
	position: absolute;
	top:0;
	left:0;
	display: none;
}
#page1{ display: block; }
#page1 .contentText {
    font-size: 2.28em;
    color: #000;
    width: 16em;
    position: absolute;
    top: 1.78em;
    left: 1.65em;
    line-height: 1.15;    
}
#page2 .contentTitle {
    font-size: 4.6em;
    font-weight: normal;
    text-align: center;
	position: absolute;
    width: 100%;
    margin: 0;
    top: 1.4em;
} 
#page2 .characterSelection, #page3 .levelSelection{
	position: absolute;
	bottom:0;
}
#page2 .characterSelection .character{
	position: absolute;
	cursor: pointer;
}
#page2 .characterSelection #character_1{
	background: url("../img/avatar_1.png") no-repeat center / contain;
	width: 23.5625em;
	height: 42em;
	left: 0.1em;
	bottom: -9.5em;
}
#page2 .characterSelection #character_2{
	background: url("../img/avatar_2.png") no-repeat center / contain;
	width: 23.5625em;
	height: 42em;
	left: 21em;
    bottom: -9.3em;
}
#page2 .characterSelection #character_3{
	background: url("../img/avatar_3.png") no-repeat center / contain;
	width: 23.5625em;
	height: 42em;
	left: 43.5em;
    bottom: -9em;
}
#page2 .characterSelection #character_4{
	background: url("../img/avatar_4.png") no-repeat center / contain;
	width: 23.5625em;
	height: 42em;
	left: 65.8em;
    bottom: -8.6em;
}
#page3 .contentTitle {
    font-size: 3.5em;
    font-weight: normal;
    text-align: center;
	position: absolute;
    width: 100%;
    margin: 0;
    top: 1.2em;
} 
#page3 .level{ position: absolute; bottom: 5.4em; cursor: pointer; }
body #page3 .level.disabled{ opacity: 0.6; cursor: not-allowed; }
#page3 #level_1{
	background: url("../img/meat.png") no-repeat center / contain;
	width: 24.3125em;
	height: 31.6875em;
	left: 16.3em;
}
#page3 #level_2{
	background: url("../img/egg.png") no-repeat center / contain;
	width: 40.6875em;
	height: 26.125em;
	left: 42.4em;    
}
.round-img{
	top: 0; 
	right: 0; 
	position: absolute; 
	display: none;
	width: 100%;
    height: 100%;	
}
.level_1_round_0 .round-img{
	background: url(../img/level0_round0.png) no-repeat center / contain;
   /* width: 68.3em;
    height: 31.5em;*/
}
.level_1_round_1 .round-img{
    background: url(../img/level0_round1.png) center center / contain no-repeat;
    /*width: 55.75em;
    height: 35.45em;*/	
}
.level_1_round_2 .round-img{
    background: url(../img/level0_round2.png) center center / contain no-repeat;
   /*width: 57.0em;
    height: 31.85em;*/
}
.level_1_round_3 .round-img{
    background: url(../img/level0_round3.png) center center / contain no-repeat;
    /*width: 53.0em;
    height: 27.2em;*/
}
.level_1_round_4 .round-img{
    background: url(../img/level0_round4.png) center center / contain no-repeat;
    /*width: 45.35em;
    height: 30.8em;*/
} 
.level_2_round_0 .round-img{
	background: url(../img/level1_round0.png) no-repeat center / contain;
    /*width: 69.2em;
    height: 40.8em;*/
}
.level_2_round_1 .round-img{
    background: url(../img/level1_round1.png) center center / contain no-repeat;
    /*width: 90em;
    height: 31.25em;*/
}
.level_2_round_2 .round-img{
    background: url(../img/level1_round2.png) center center / contain no-repeat;
    /*width: 62.0em;
    height: 20.9em;*/
}
.level_2_round_3 .round-img{
    background: url(../img/level1_round3.png) center center / contain no-repeat;
    /*width: 54.1em;
    height: 37.5em;*/
}
#page4 .contentTitle,#page5 .contentTitle,
#page4 .status  {
    font-size: 3em;
    font-weight: normal;
    position: absolute;
    margin: 0;
    top: 0.36em;
    left: 0.8em;
	display: none; 
}#page4 .status{ display: block; }
.problemContainer {
    position: absolute;
    font-size: 2.0em;
    bottom: 1.5em;
    right: 1em;
    width: 67%;
	text-align: center;
}   
.problemDisplay div:last-child {
    font-size: 1.39em;
    color: #fff;
    margin-top: 0.8em;
    line-height: 1.2;
}
.options {
    display: table;
    width: 57%;
    margin: 1em auto 0;
}
.level_1_round_2 .options,.level_1_round_3 .options,.level_1_round_4 .options,.level_2_round_3 .options { width: 80%; }
.level_2_round_2 .options { width: 85%; }
.options > div {
    display: table-cell;
    width: 25%;
}
.optCon {
    border: 0.1em solid #fff;
    margin: 0 auto;
    width: 70%;
	color: #fff;
	padding: 0.15em 0;
    cursor: pointer;
}
div.fact {
    position: absolute;
    top: 4em;
    color: #fff;
    font-size: 1.6em;
	display: table;
    width: 19.35em;
	left: -19.35em;
	min-height: 6em;
	max-height: 6em;
	height: 100%;
}
.level_1_round_3 div.fact{  font-size: 1.5em;  width: 20.65em; min-height: 6.5em; max-height: 6.5em; left: -20.65em; }
div.fact > div {
    display: table-cell;
	padding: 1em;
	vertical-align: middle;
}
div.fact > div:first-child{ width: 1.2em; }
div.fact > div:first-child > div{
	-ms-transform: rotate(-90deg); /* IE 9 */
	-ms-transform-origin: 34% 34%; /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari */
   -webkit-transform-origin: 34% 34%; /* Safari 3-8 */
  transform: rotate(-90deg);
  transform-origin: 34% 34%;
      position: absolute;
}
div.fact #fact-title{
	background: #2c70ac;
}
div.fact .fact-content{
	background-color: rgba(44, 112, 172, 0.75);
}

div#question {
    position: absolute;
    top: 11em;
    color: #fff;
    font-size: 1.6em;
	display: table;
    width: 19.35em;
	min-height: 6.3em;
    height: 100%;
    overflow: hidden;
    max-height: 6.3em;
	left: -19.35em;
}
div#question > div {
    display: table-cell;
	padding: 1em;
	vertical-align: middle;
}
div#question > div:first-child{ width: 1.2em; }
div#question > div:first-child > div{
	-ms-transform: rotate(-90deg); /* IE 9 */
	-ms-transform-origin: 30% 80%; /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari */
   -webkit-transform-origin: 30% 80%; /* Safari 3-8 */
  transform: rotate(-90deg);
  transform-origin: 30% 80%;
      position: absolute;
}
div#question #qns-title{
	background: #d9a60a;
}
div#question #qns-content{
	background-color: rgba(217, 166, 10, 0.75);
}
.xmask{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#FFF;
    z-index:9999;
    display:none;
}
.avatar {
    background: url("../img/avatar_2.png") no-repeat left top / contain;
    width: 17.563em;
    height: 36em;
    left: 2.1em;
    bottom: -12.5em;
    position: absolute;
	display: none;
}
.tip {
    width: auto;
    display: block;
    position: absolute;
    left: 7.5em;    
    font-size: 2.0em;
    width: 5em;
    height: 3em;
	}
.level_1_round_1 .tip{/*.level_2_round_0 .tip*/
    width: 7em;
    height: 4.2em;
    left: 6.5em;
}
.level_1_round_1 .tip .yes,.level_1_round_1 .tip .no{/*,.level_2_round_0 .tip .yes,.level_2_round_0 .tip .no*/
	width: 5.5em;
    height: 3.8em;
    line-height: 3.8;
    font-size: 1.1em;
}
.level_1_round_1 .tip.yes-tip/*,
.level_2_round_0 .tip.yes-tip*/{ top: 0.5em;}
.level_1_round_1 .tip.no-tip/*,
.level_2_round_0 .tip.no-tip*/{ top: 5em; }
.tip.yes-tip{ top: 1em; background: url("../img/yes.png") no-repeat center / contain; }
.tip.no-tip{ top: 4.6em; background: url("../img/no.png") no-repeat center / contain; }

.tip .yes, .tip .no {
    width: 3em;
    height: 2.6em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    position: relative;
    margin-left: 1em;
    line-height: 2.6;
    font-size: 1.2em;
    color: #FFF;
    cursor: pointer;
}
body #powerTip{ white-space: normal; min-width: 12.5em; width: 100%; max-width: 28em; font-size: 1.5em; }
/*.tip.yes::before{
    content: "";
    width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;   
  border-right:1em solid blue;
  position: absolute;
left: -1.1em;
}
.tip.yes::after{
    content: "";
    width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;   
  border-right:1em solid black;
  position: absolute;
left: -1em;
}*/
div#myth-fact {
    position: absolute;
    top: 13.5em;
    color: #fff;
    font-size: 1.6em;
    display: table;
    width: 38.2em;
    right: 0;
    max-height: 9.2em;
    height: 100%;
	right: -38.2em;
}
div#myth-fact > div {
    display: table-cell;
    padding: 1em;
    vertical-align: middle;
}
div#myth-fact > div:last-child{ width: 2.42em; }
div#myth-fact > div:last-child > div {
    -ms-transform: rotate(90deg);
    -ms-transform-origin: 40% -18%;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 40% -18%;
    transform: rotate(90deg);
    transform-origin: 40% -18%;
    position: absolute;
    font-size: 2.3em;
}
div#myth-fact #myth-fact-title, div#myth-fact #myth-fact-content{
    background: #2c70ac;/*#0054a6;*/
}
/*div#myth-fact #myth-fact-content{
    background-color: rgba(44, 112, 172, 0.75);
}*/
div#myth {
    position: absolute;
    top: 3em;
    color: #fff;
    font-size: 2.2em;
    display: table;
    width: 27.7em;
    min-height: 6.3em;
    height: 100%;
    overflow: hidden;
    max-height: 6.3em;
	left: -27.7em;
}
div#myth > div {
    display: table-cell;
    padding: 1em;
    vertical-align: middle;
}
div#myth > div:first-child{ width: 1.2em; }
div#myth > div:first-child > div{
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin: 26% 48%; /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari */
   -webkit-transform-origin: 26% 48%; /* Safari 3-8 */
  transform: rotate(-90deg);
  transform-origin: 26% 48%;
      position: absolute;
      font-size: 1.7em;
}
div#myth #myth-title,div#myth #myth-content{
    background: #d9a60a;
}
div#myth-fact-content {
    font-size: 1.4em;
}
.level_1_round_0 div#myth-fact-content {
    font-size: 1.25em;
}
/*div#myth #myth-content{
    background-color: rgba(217, 166, 10, 0.75);
}*/
.show-fact {
    background: #f26522;
    color: #fff;
    border: 0;
    outline: 0;
    font-size: 2em;
    width: 7em;
    text-align: center;
    padding: 2.3em 1em;
    position: absolute;
    left: 31em;
    top: 3.3em;
    cursor: pointer;
	display: none;
}
.next{
    background: #387d01;
    color: #fff;
    border: 0;
    outline: 0;
    font-size: 2em;
    width: 7em;
    text-align: center;
    padding: 0.5em 1em;
    position: absolute;
    left: 31em;
    top: 21.3em;
    cursor: pointer;
    border-radius: 0.4em;
	display: none;
}
#page6 .contentTitle,#page7 .contentTitle {
    font-size: 3em;
    position: absolute;
    left: 0.95em;
    font-weight: normal;
    top: 0.4em;
    margin: 0;
}
.cook-room{
	background: url(../img/cooking_room.png) no-repeat top right / contain;
    width: 52.5em;
    height: 47.5em;
    position: absolute;
    right: 0em;
    top: 0em;
}
#refrigerater_0{
    background: url("../img/refrigerater.png") no-repeat center / contain;
    width: 20.6875em;
    height: 44.8125em;
    position: absolute;
    left: 20.7em;
    top: 2.5em;
}
#refrigerater_0:not(.disabled):hover{
    background: url("../img/refrigerater_hover.png") no-repeat center / contain;
}
#stove_1{
    background: url("../img/stove.png") no-repeat center / contain;
    width: 19.875em;
    height: 28.0625em;
    position: absolute;
    left: 49em;
    top: 19.65em;
}
#stove_1:not(.disabled):hover{
    background: url("../img/stove_hover.png") no-repeat center / contain;
}
.home-items{ cursor: pointer; }
.home-items.disabled{ opacity: 0.8; cursor: not-allowed; }
.popup-definition{ 
	cursor: pointer;
	color: #2C70AC;
    /* border: 0.05em solid #f00; */
    border-radius: 0.2em;
    padding: 0.2em;
    background: #FFFDE4;}
.ref-arrow{
	background: url(../img/arrow_refrigerater.png) no-repeat center / contain;
    width: 14.1875em;
    height: 7.8125em;
    position: absolute;
    left: 12.5em;
    top: 15em;
    z-index: 999;
}
.stove-arrow{
	background: url(../img/arrow_stove.png) no-repeat center / contain;
    width: 13.875em;
    height: 8.4375em;
    position: absolute;
    left: 63em;
    top: 31em;
    z-index: 999;
}
div#fact_2 {
    top: 7.2em;
}
.table{
    display: table;
    position: absolute;
    bottom: 1.6em;
    font-size: 2.5em;
    right: 2.2em;
    width: 30em;
    color: #fff;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
	 padding-right: 1.35em;
}
.table-cell:first-child {
    width: 16em;   
}
.table-cell:last-child{ padding-right: 0; }
button.safe,button.start {
    border: 0;
    outline: 0;
    background: #0054a6;
    color: #fff;
    padding: 0.7em 0.5em;
	font-size: 0.9em;
    cursor: pointer;
}
button.start[disabled='disabled']{
	opacity: 0.6;
}
.img-container{
	background: url(../img/try_chicken.png) no-repeat center / contain;
    width: 31.25em;
    height: 13.125em;
    position: absolute;
    right: 18em;
    top: 14em;
    z-index: 999;
}
.thermometer{
	background: url(../img/thermometer.png) no-repeat center / contain;
    width: 12.3125em;
    height: 34.25em;
    position: absolute;
    right: 3em;
    top: 0.5em;
    z-index: 999;
}
#reading {
    position: absolute;
    width: 1em;
    bottom: 7.4em;
    height: 1em;
    background: #BF1E2E;
    left: 4.35em;
    max-height: 21em;
    /*border-radius: 0.5em;*/
}
.certificate{
	width: 51.6875em;
	height: 40.375em;
	display: block;
    position: absolute;
    right: 3em;
    top: 8em;
}
.certificate img{ width: 100%; height: 100%; }
.congrat h1{
	font-size: 3.8em;
    margin: 0;
    position: absolute;
    width: 9.5em;
    text-align: center;
    top: 4em;
}
.congrat-info {
    font-size: 2.5em;
    position: absolute;
    top: 8.2em;
    text-align: center;
    width: 14.5em;
}
a.download {
    position: absolute;
    font-size: 2em;
    color: #fff;
    background: #387d01;
    text-decoration: none;
    border-radius: 0.2em;
    padding: 0.3em 0.8em;
    top: 15.85em;
    left: 6em;
}
.stars{
	background: url(../img/stars.png) no-repeat top center/ contain;
    width: 100%;
    height: 30%;
    z-index: 99;
    display: block;
    position: absolute;	
	top:-30%;
	left:0;
}
#confetti-canvas{ position: absolute; }
.problemContainer.disabled {
    opacity: 0.5;
}
.optCon:not(.disabled):hover,.optCon.clicked{ background: #000; }
.option .optCon.disabled,
.tip > div.disabled{ cursor: not-allowed; }
#mute {
    position: absolute;
    z-index: 999;
    width: 2em;
    height: 2em;
	cursor: pointer;
	right: 2em;
    bottom: 1em;
}
#mute > img {
    width: 100%;
    height: 100%;
}
/*popup*/
#overlay {
    width: 100%;
    height: 100%;
    background-color: #fff;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    -khtml-opacity: 0.1;
    opacity: 0.1;
    z-index: 999;
    position:absolute;
    top:0px;
}
#popup{
    background: #5DA63D;
    display: none;
    height: 14.1875em !important;
    left: 41em !important;
    position: absolute;
    text-align: center;
    bottom: 15.8em !important;
    width: 35.75em !important;
    z-index: 999;
    color: #fff;
}
button.close {
    border: 0.1em solid #fff;
    background: transparent;
    color: #fff;
    font-size: 2em;
    margin: 0.5em auto;
    padding: 0.2em 0.5em;
}
#popup.correct-popup{ background: #2c70ac; }
#popup.incorrect-popup{ background: #d9a60a;}
#popup.congratulation-popup{ background: #2E3192;}
#popup .title{ font-size: 2.958125em; margin: 1.3em 0 0 0; font-weight: normal; } 
#popup.nexts .title{ margin: 1.7em 0 0 0; }
#popup .pop_con, #popup .pop_wrong{ font-size: 2.21875em; } 
#popup .pop_wrong{ font-style: italic; min-height: 1.2em; }
#popup .popup-close button, #page4 button.nextLevel, #popup .popup-close .playVideo{ font-size: 1.479375em;  background: #FBAF5D; outline: 0;  border: 1px solid #FBAF5D; color: #fff; padding: 0.5em 0.7em; border-radius: 0.4em; cursor: pointer; margin-top: 0.55em; display: inline-block; margin-left: 1em; margin-right: 1em; }

@-webkit-keyframes whiteGlow {
	from { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(56, 125, 1, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}
@-moz-keyframes whiteGlow {
	from { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(56, 125, 1, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}
@-o-keyframes whiteGlow {
	from { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(56, 125, 1, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}
@keyframes whiteGlow {
	from { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
	50% { background-color: rgba(56, 125, 1, 0.5); -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
	to { background-color: rgba(56, 125, 1, 1); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); }
}

@-webkit-keyframes level {
    0% { -webkit-transform: scale(0.98, 0.98); }
    50% { -webkit-transform: scale(1, 1);  }
    100% {-webkit-transform: scale(0.98, 0.98); }
}
@-moz-keyframes level {
    0% { -moz-transform: scale(0.98, 0.98); }
    50% { -moz-transform: scale(1, 1); }
    100% { -moz-transform: scale(0.98, 0.98); }
}
@-o-keyframes level {
    0% { -o-transform: scale(0.98, 0.98); }
    50% { -o-transform: scale(1, 1); }
    100% { -o-transform: scale(0.98, 0.98); }
}
@keyframes level {
    0% { transform: scale(0.98, 0.98); }
    50% { transform: scale(1, 1); }
    100% { transform: scale(0.98, 0.98); }
}

@-webkit-keyframes pulsate {
    0% { -webkit-transform: scale(1, 1); opacity: 1.0; }
    50% { -webkit-transform: scale(0.9, 0.9); opacity: 0.5; }
    100% {-webkit-transform: scale(1, 1); opacity: 1.0; }
}
@-moz-keyframes pulsate {
    0% { -moz-transform: scale(1, 1); opacity: 1.0; }
    50% { -moz-transform: scale(0.9, 0.9); opacity: 0.5; }
    100% { -moz-transform: scale(1, 1); opacity: 1.0; }
}
@-o-keyframes pulsate {
    0% { -o-transform: scale(1, 1); opacity: 1.0; }
    50% { -o-transform: scale(0.9, 0.9); opacity: 0.5; }
    100% { -o-transform: scale(1, 1); opacity: 1.0; }
}
@keyframes pulsate {
    0% { transform: scale(1, 1); opacity: 1.0; }
    50% { transform: scale(0.9, 0.9); opacity: 0.5; }
    100% { transform: scale(1, 1); opacity: 1.0; }
}

@-webkit-keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
@-moz-keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
@-o-keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
@keyframes marquee {
    0% { top: 0; }
	100% { top: -100%; }
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}