html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=9d8653da-85f2-41cd-a060-5fc5f64c5528");
@font-face{
font-family:"Avenir Next LT W02SC Demi";
src:url("../../fonts/093cecaf-bae9-4928-87d7-de460ba3bfa7.eot?#iefix");
src:url("../../fonts/093cecaf-bae9-4928-87d7-de460ba3bfa7.eot?#iefix") format("eot"),url("../../fonts/373db362-010f-4a93-8677-0e79c739f520.woff2") format("woff2"),url("../../fonts/eea58f26-3cc8-41c5-8dd3-cb71287f9bef.woff") format("woff"),url("../../fonts/ba2cc6b9-5b84-43bd-a52f-12493b937908.ttf") format("truetype"),url("../../fonts/adc8a73e-7eef-4ffa-9ab8-73b0a1824b56.svg#adc8a73e-7eef-4ffa-9ab8-73b0a1824b56") format("svg");
}
@font-face{
font-family:"Avenir Next LT W02SC Bold";
src:url("../../fonts/5d935365-5dbd-425b-b201-ea84ccc5ebf9.eot?#iefix");
src:url("../../fonts/5d935365-5dbd-425b-b201-ea84ccc5ebf9.eot?#iefix") format("eot"),url("../../fonts/6c660095-c4cb-48c0-9631-aac39152dbaa.woff2") format("woff2"),url("../../fonts/45f41043-63ce-4e17-9511-c4434e651c2c.woff") format("woff"),url("../../fonts/18a556fd-1cf2-4af8-afa3-b0e0346bcfc9.ttf") format("truetype"),url("../../fonts/4ca8a95d-bd83-4c38-b9d7-c2156aa82c21.svg#4ca8a95d-bd83-4c38-b9d7-c2156aa82c21") format("svg");
}
@font-face{
font-family:"Avenir Next W01 Light";
src:url("../../fonts/0ecef829-586e-426d-a633-4c8a8c926769.eot?#iefix");
src:url("../../fonts/0ecef829-586e-426d-a633-4c8a8c926769.eot?#iefix") format("eot"),url("../../fonts/49c5f3e1-5867-4b1d-a843-2d07fa60d85d.woff2") format("woff2"),url("../../fonts/f401df6f-54eb-406c-b46a-90b9451c598d.woff") format("woff"),url("../../fonts/276fe25e-e430-4376-b33c-705dd77b3dba.ttf") format("truetype"),url("../../fonts/869dc33b-3685-4d74-a51c-82b435579093.svg#869dc33b-3685-4d74-a51c-82b435579093") format("svg");
}

@font-face{
font-family:"AvenirNextLTPro-Demi";
src:url("../../fonts/AvenirNextLTPro-Demi?#iefix");
src:url("../../fonts/AvenirNextLTPro-Demi?#iefix") format("eot"),url("../../fonts/AvenirNextLTPro-Demi.woff") format("woff"),url("../../fonts/AvenirNextLTPro-Demi.ttf") format("truetype"),url("../../fonts/AvenirNextLTPro-Demi.svg") format("svg");
}



body {
  font-family: "AvenirNextLTPro-Demi";
  color:#242424;
}

.hide { display:none; }
.main { max-width: 500px; margin: 0px auto; position:relative; overflow:hidden;}

#stage { background-color:gray; }
#stage-inner { background-color:white; position:relative; width:100%; height:100%; clear:both; overflow:hidden; }
#player { position:absolute; right:5%; top:50%; z-index:5; }
.lemon { position:absolute; left:-200px; top:0px; z-index:3; }
.enemy { position:absolute; left:-200px; top:0px; z-index:3; }

#stage > .bg { position:absolute; width:100%; height:100%; background:transparent url('bg2.jpg') repeat-x scroll 0px 0px; background-size:cover; opacity:.8; z-index:0;}

#scoreboard { float:left; width:100%; z-index:2; position:relative; }
#scoreboard span { font-size:30px; vertical-align: text-bottom;}
#scoreboard .legend { display:inline-block; width:32px; height:35px; background:transparent url('lemon-2.png') no-repeat scroll 50% 50%; background-size:contain; }
#scoreboard .text {  }
#scoreboard .col { position:absolute; left:6px; top:6px; background-color:black; color:white; padding: 4px 10px;}
#scoreboard .col.col2 { left:auto; right:6px; }
#scoreboard .col1 {  }
#scoreboard .col2 {  }
#scoreboard .legend { margin-right:10px; }
#scoreboard .col1 .legend {  }
#scoreboard .col2 .legend { background-image:url('bey.png'); width:22px; }

.modal {     position: relative;
    z-index: 10000;
    background-color: transparent;
    width: 80%;
    margin: 0px auto 0px;
    height: 80%;
    text-align: center; text-transform:uppercase;
    top: 9%; font-size:13px; }
.modal .modalbg { position:absolute; width:100%; height:100%; background-color:white; opacity:.8; z-index:-2; top:0px; }
.modal h3 { font-size: 32px; padding: 20px 0px 0px; }
/*.modal p { margin: 8px 0px; font-size: 21px; vertical-align: middle; min-height: 30px; }*/
.modal p { clear:both; }
.modal p.single { clear:both; margin:0px 0px 7px 0px; }
.modal .instructions { float:left; width:100%; margin:20px 0px 10px 0px;  }
.modal .col { float:left; width:50%; }
.modal .col1 {  }
.modal .col2 {  }
.modal .text { padding: 0px 0px; text-align: center; display: block; }
.instructions > .col1 { padding:0px 20px 0px 5px; }
.instructions > .col2 { padding:0px 5px 0px 20px; }
.row { float:left; width:100%; display:flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; -webkit-box-align: center; justify-content: center; -webkit-justify-content: center; margin:0px 0px 12px 0px; }
.row.withicon .col1 { width:75% }
.row.withicon .col2 { width:25% }
.row.withicon .introimg { width:100%; }
.row.withplayer .col1 { width:35% }
.row.withplayer .col2 { width:65% }
.icon-touch { width: 50%; display: block; margin: 0px auto; }
.modal-start .introimg.introplayer { width:100%; }
.modal-start .introenemy.small { width:12px }
.modal-gameover h3 { padding:33px 0px 10px 0px; }
.modal-gameover .row.withscore { margin:0px 0px 11px 0px; }

/*.modal -start .introimg { width:40px; vertical-align:middle; }*/
.modal-gameover .introimg { width: 47px; vertical-align: baseline; margin:-12px 6px 0px 0px; }
.modal-gameover .lemoncount { font-size:58px; }
.introimg.introplayer { width:100%; }

.button {     background-color: black;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 20px 41px 15px 41px;
    display: inline-block;
    margin: 0px 0px 0px;
    font-size: 26px;
    letter-spacing: 2px; }

#pause { position:absolute; bottom:4px; right:4px; width:45px; height:45px; z-index:2000; background:transparent url('playpause.svg') no-repeat scroll 11px 8px; background-size:101px; }
#pause.paused { background-position:-64px 8px; }

.chart { position:relative; width:53px; height:29px; display:inline-block; margin:0px 0px 0px 13px; top:-3px; }
.chart .bg { position:absolute; left:0px; top:0px; height:100%; background-color:gray; width:100%; }
.chart .fg { position:absolute; left:0px; top:0px; height:100%; background-color:green; width:100%; }

.share .fg {position: relative; z-index: 1; }
.share .bg { background-color: #000000; position: absolute; width: 100%; height: 100%; top: 0; z-index: 0;}
.share { margin:10px 0px 0px 0px; }
.share ul {  }
.share li { position: relative; display: inline-block; margin:0px 5px 0px 0px; }
.share li a { }
.share .bg {  }
.share .fg { width: 40px; height: 33px; display: inline-block; }

.icon-fb .bg { background-color:#3B5998;  }
.icon-tw .bg { background-color:#4099FF;  }
.icon-em .bg { background-color:#000000; }

.icon-fb .fg { background:transparent url('../images/icon-fb.svg') no-repeat scroll 50% 50%; background-size:10px; }
.icon-tw .fg { background:transparent url('../images/icon-tw.svg') no-repeat scroll 50% 50%; background-size:26px; }
.icon-em .fg { background:transparent url('../images/icon-em.svg') no-repeat scroll 50% 50%; background-size:24px; }


@media only screen and (min-width: 374px) {
.modal .text { padding:0px 7px; }
.modal p.single { margin-bottom:15px; }
.modal-gameover h3 { padding:40px 0px 22px; }
.modal-gameover .row.withscore { margin: 9px 0px 20px 0px; }
}

@media only screen and (min-width: 414px) {
.modal h3 { padding:34px 0px 0px 0px; }
}

@media only screen and (min-width: 465px) {
.modal h3 { padding:47px 0px 20px }
.modal-gameover h3 { padding:67px 0px 30px; }
.modal-gameover .row.withscore { margin:9px 0px 44px 0px; }
}


@media only screen and (min-width: 520px) {
.button:hover { background-color:#444; }
}