body{
    background-color:#FAF8EF;
    color:#776E65;
    font-size:1rem;
    font-family:Arial, Sans;
    text-align:center;
}
a, a:hover, a:active, a:link, a:visited{
    color:#776E65;
}
.container{
	width:524px;
	margin:0 auto;
}
.app{
    position:relative;
}
.game{
    margin:0 auto;
}
.game .row{
    overflow:hidden;
}
.grid{
    /*border-radius*/
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    width:524px;
    height:524px;
    margin:0 auto;
    background-color:#BBADA0;
}
.grid .cell{
    width:100px;
    height:100px;
    background-color:#CDC0B4;
    margin:10px;
    /*border-radius*/
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    float:left;
    border:3px solid #CDC0B4;
    z-index:0;
}
.grid .row:first-child .cell{
    margin-top:20px;
}
.grid .row:last-child .cell{
    margin-bottom:20px;
}
.grid .row .cell:first-child{
    margin-left:20px;
}
.grid .row .cell:last-child{
    margin-right:20px;
}
.pad{
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}
.game .tile{
    width:100px;
    height:100px;
    background-color:#EEE4DA;
    margin:10px;
    /*border-radius*/
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    border:3px solid #EEE4DA;
    position:absolute;
}
.tile.empty{
    z-index:10;
    display:none;
}
.tile.non-empty{
    /*transition*/
    -webkit-transition:-webkit-transform 200ms ease-in-out 0s;
    -moz-transition:-moz-transform 200ms ease-in-out 0s;
    -o-transition:-o-transform 200ms ease-in-out 0s;
    transition:transform 200ms ease-in-out 0s;
    z-index:20;
}
.tile[data-xy="0-0"]{
    /*transform*/
    -webkit-transform:translate(10px,10px);
    -moz-transform:translate(10px,10px);
    -ms-transform:translate(10px,10px);
    -o-transform:translate(10px,10px);
    transform:translate(10px,10px);
}
.tile[data-xy="0-1"]{
    /*transform*/
    -webkit-transform:translate(135px,10px);
    -moz-transform:translate(135px,10px);
    -ms-transform:translate(135px,10px);
    -o-transform:translate(135px,10px);
    transform:translate(135px,10px);
}
.tile[data-xy="0-2"]{
    /*transform*/
    -webkit-transform:translate(262px,10px);
    -moz-transform:translate(262px,10px);
    -ms-transform:translate(262px,10px);
    -o-transform:translate(262px,10px);
    transform:translate(262px,10px);
}
.tile[data-xy="0-3"]{
    /*transform*/
    -webkit-transform:translate(387px,10px);
    -moz-transform:translate(387px,10px);
    -ms-transform:translate(387px,10px);
    -o-transform:translate(387px,10px);
    transform:translate(387px,10px);
}
.tile[data-xy="1-0"]{
    /*transform*/
    -webkit-transform:translate(10px,135px);
    -moz-transform:translate(10px,135px);
    -ms-transform:translate(10px,135px);
    -o-transform:translate(10px,135px);
    transform:translate(10px,135px);
}
.tile[data-xy="1-1"]{
    /*transform*/
    -webkit-transform:translate(135px,135px);
    -moz-transform:translate(135px,135px);
    -ms-transform:translate(135px,135px);
    -o-transform:translate(135px,135px);
    transform:translate(135px,135px);
}
.tile[data-xy="1-2"]{
    /*transform*/
    -webkit-transform:translate(262px,135px);
    -moz-transform:translate(262px,135px);
    -ms-transform:translate(262px,135px);
    -o-transform:translate(262px,135px);
    transform:translate(262px,135px);
}
.tile[data-xy="1-3"]{
    /*transform*/
    -webkit-transform:translate(387px,135px);
    -moz-transform:translate(387px,135px);
    -ms-transform:translate(387px,135px);
    -o-transform:translate(387px,135px);
    transform:translate(387px,135px);
}
.tile[data-xy="2-0"]{
    /*transform*/
    -webkit-transform:translate(10px,262px);
    -moz-transform:translate(10px,262px);
    -ms-transform:translate(10px,262px);
    -o-transform:translate(10px,262px);
    transform:translate(10px,262px);
}
.tile[data-xy="2-1"]{
    /*transform*/
    -webkit-transform:translate(135px,262px);
    -moz-transform:translate(135px,262px);
    -ms-transform:translate(135px,262px);
    -o-transform:translate(135px,262px);
    transform:translate(135px,262px);
}
.tile[data-xy="2-2"]{
    /*transform*/
    -webkit-transform:translate(262px,262px);
    -moz-transform:translate(262px,262px);
    -ms-transform:translate(262px,262px);
    -o-transform:translate(262px,262px);
    transform:translate(262px,262px);
}
.tile[data-xy="2-3"]{
    /*transform*/
    -webkit-transform:translate(387px,262px);
    -moz-transform:translate(387px,262px);
    -ms-transform:translate(387px,262px);
    -o-transform:translate(387px,262px);
    transform:translate(387px,262px);
}
.tile[data-xy="3-0"]{
    /*transform*/
    -webkit-transform:translate(10px,387px);
    -moz-transform:translate(10px,387px);
    -ms-transform:translate(10px,387px);
    -o-transform:translate(10px,387px);
    transform:translate(10px,387px);
}
.tile[data-xy="3-1"]{
    /*transform*/
    -webkit-transform:translate(135px,387px);
    -moz-transform:translate(135px,387px);
    -ms-transform:translate(135px,387px);
    -o-transform:translate(135px,387px);
    transform:translate(135px,387px);
}
.tile[data-xy="3-2"]{
    /*transform*/
    -webkit-transform:translate(262px,387px);
    -moz-transform:translate(262px,387px);
    -ms-transform:translate(262px,387px);
    -o-transform:translate(262px,387px);
    transform:translate(262px,387px);
}
.tile[data-xy="3-3"]{
    /*transform*/
    -webkit-transform:translate(387px,387px);
    -moz-transform:translate(387px,387px);
    -ms-transform:translate(387px,387px);
    -o-transform:translate(387px,387px);
    transform:translate(387px,387px);
}
.tile.can-merge{
    /*box-shadow*/
    -webkit-box-shadow:0 0 10px #aaa;
    -moz-box-shadow:0 0 10px #aaa;
    box-shadow:0 0 10px #aaa;
    background:rgb(255,255,255);
    /* Old browsers */
    background:-moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(238,228,218,1) 100%);
    /* FF3.6+ */
    background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,228,218,1)));
    /* Chrome,Safari4+ */
    background:-webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(238,228,218,1) 100%);
    /* Chrome10+,Safari5.1+ */
    background:-o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(238,228,218,1) 100%);
    /* Opera 12+ */
    background:-ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(238,228,218,1) 100%);
    /* IE10+ */
    background:radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(238,228,218,1) 100%);
    /* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eee4da',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
    :;
}
.tile.moving{
    border-color:#EEE4DA!important;
}
.tile[data-edge-t="1"]{
    border-top-color:#f00;
}
.tile[data-edge-b="1"]{
    border-bottom-color:#f00;
}
.tile[data-edge-l="1"]{
    border-left-color:#f00;
}
.tile[data-edge-r="1"]{
    border-right-color:#f00;
}
.tile.empty{
    background-color:#CDC0B4;
    border-color:#CDC0B4;
}
.tile.empty .wrap{
    display:none;
}
.game .wrap{
    width:100%;
    height:100%;
    position:relative;
}
.game .tile label{
    position:absolute;
    top:10px;
    left:50%;
    /*transform*/
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
    font-weight:bold;
}
.game label.xl{
    font-size:2.8rem;
}
.game label.l{
    font-size:2.5rem;
}
.game label.m{
    font-size:2.3rem;
}
.game label.s{
    font-size:1.7rem;
}
.game .symbols{
    width:100%;
    list-style:none;
    padding:0;
    margin:0;
    font-size:.81rem;
    position:absolute;
    bottom:10px;
    left:50%;
    /*transform*/
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
}
.game .symbols li{
    display:inline-block;
}
/* Animate.css */
.animated{
    /*animation-duration*/
    -webkit-animation-duration:.3s;
    -moz-animation-duration:.3s;
    -ms-animation-duration:.3s;
    -o-animation-duration:.3s;
    animation-duration:.3s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}
.animated.slowly{
    /*animation-duration*/
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}
@-webkit-keyframes grow{
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }
    
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes grow{
    0% {
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
    }
    
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.grow{
    /*animation-name*/
    -webkit-animation-name:grow;
    -moz-animation-name:grow;
    -ms-animation-name:grow;
    -o-animation-name:grow;
    animation-name:grow;
}
@-webkit-keyframes pulse{
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    
    50% {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes pulse{
    0% {
        -webkit-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8);
    }
    
    50% {
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
    }
    
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.pulse{
    /*animation-name*/
    -webkit-animation-name:pulse;
    -moz-animation-name:pulse;
    -ms-animation-name:pulse;
    -o-animation-name:pulse;
    animation-name:pulse;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

header{
    margin:0 auto;
    overflow:hidden;
    margin-top:50px;
}
header .site-info, header .control-panel{
    float:left;
}
header .site-info{
    text-align:left;
    width:50%;
}
.site-info h1{
    font-size:3rem;
    margin:0;
    padding:0;
}
.site-info h2{
    font-size:1.7rem;
    margin:0;
    padding:0;
}
header .control-panel{
    width:50%;
}
p.sub{
	text-align:left;
}
.content{
    margin:30px auto 0 auto;
    text-align:left;
}
.content p{
    font-size:1rem;
    line-height:2rem;
    margin:30px 0;
}
.content .how-to{
    border-bottom:1px solid #D8D4D0;
}

.score{
	float:left;
	background-color:#BBADA0;
	color:#fff;
	padding:5px 10px;
	border-radius:10px;
	text-transform: uppercase;
	font-weight:bold;
    margin-right: 10px;
}
.score label{
	font-size:.71rem;
	color:#EEE4DA;
}
.score strong{
	display:block;
	font-size:1.2rem;
}

.app .over{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.8);
	z-index:100;
}

.over button{
	background-color:#8F7A66;
	color:#fff;
	padding:10px 20px;
	border-radius:5px;
	border:none;
	font-weight:bold;+
	
}
.over .wrap{
	position:relative;
	top:50%;
	left:50%;
	-webkit-transform:translateY(-50%) translateX(-50%);
	transform:translateY(-50%) translateX(-50%);
}

@media (max-width: 480px){
	header{
		margin-top:10px;
	}
	.site-info h1{
		font-size:2.2rem;
	}
	.container{
		width:300px;
	}
	p.sub{
		font-size:.9rem;
	}
	.grid{
		width:275px;
		height:275px;
	}
	.grid .cell{
		width:50px;
		height:50px;
		margin:5px;
	}
	.grid .row:first-child .cell{
	    margin-top:10px;
	}
	.grid .row:last-child .cell{
	    margin-bottom:10px;
	}
	.grid .row .cell:first-child{
	    margin-left:10px;
	}
	.grid .row .cell:last-child{
	    margin-right:10px;
	}
	.game .tile{
		width:50px;
		height:50px;
		margin:5px;
	}
	.game .tile label{
		top:2px;
	}
	.game label.xl{
    font-size:1.5rem;
	}
	.game label.l{
	    font-size:1.5rem;
	}
	.game label.m{
	    font-size:1.4rem;
	}
	.game label.s{
	    font-size:1.3rem;
	}
	.game .symbols{
		bottom:2px;
	}
	.tile[data-xy="0-0"]{
    /*transform*/
    -webkit-transform:translate(18px,5px);
    -moz-transform:translate(18px,5px);
    -ms-transform:translate(18px,5px);
    -o-transform:translate(18px,5px);
    transform:translate(18px,5px);
	}
	.tile[data-xy="0-1"]{
	    /*transform*/
	    -webkit-transform:translate(84px,5px);
	    -moz-transform:translate(84px,5px);
	    -ms-transform:translate(84px,5px);
	    -o-transform:translate(84px,5px);
	    transform:translate(84px,5px);
	}
	.tile[data-xy="0-2"]{
	    /*transform*/
	    -webkit-transform:translate(150px,5px);
	    -moz-transform:translate(150px,5px);
	    -ms-transform:translate(150px,5px);
	    -o-transform:translate(150px,5px);
	    transform:translate(150px,5px);
	}
	.tile[data-xy="0-3"]{
	    /*transform*/
	    -webkit-transform:translate(215px,5px);
	    -moz-transform:translate(215px,5px);
	    -ms-transform:translate(215px,5px);
	    -o-transform:translate(215px,5px);
	    transform:translate(215px,5px);
	}
	.tile[data-xy="1-0"]{
	    /*transform*/
	    -webkit-transform:translate(18px,71px);
	    -moz-transform:translate(18px,71px);
	    -ms-transform:translate(18px,71px);
	    -o-transform:translate(18px,71px);
	    transform:translate(18px,71px);
	}
	.tile[data-xy="1-1"]{
	    /*transform*/
	    -webkit-transform:translate(84px,71px);
	    -moz-transform:translate(84px,71px);
	    -ms-transform:translate(84px,71px);
	    -o-transform:translate(84px,71px);
	    transform:translate(84px,71px);
	}
	.tile[data-xy="1-2"]{
	    /*transform*/
	    -webkit-transform:translate(150px,71px);
	    -moz-transform:translate(150px,71px);
	    -ms-transform:translate(150px,71px);
	    -o-transform:translate(150px,71px);
	    transform:translate(150px,71px);
	}
	.tile[data-xy="1-3"]{
	    /*transform*/
	    -webkit-transform:translate(215px,71px);
	    -moz-transform:translate(215px,71px);
	    -ms-transform:translate(215px,71px);
	    -o-transform:translate(215px,71px);
	    transform:translate(215px,71px);
	}
	.tile[data-xy="2-0"]{
	    /*transform*/
	    -webkit-transform:translate(18px,137px);
	    -moz-transform:translate(18px,137px);
	    -ms-transform:translate(18px,137px);
	    -o-transform:translate(18px,137px);
	    transform:translate(18px,137px);
	}
	.tile[data-xy="2-1"]{
	    /*transform*/
	    -webkit-transform:translate(84px,137px);
	    -moz-transform:translate(84px,137px);
	    -ms-transform:translate(84px,137px);
	    -o-transform:translate(84px,137px);
	    transform:translate(84px,137px);
	}
	.tile[data-xy="2-2"]{
	    /*transform*/
	    -webkit-transform:translate(150px,137px);
	    -moz-transform:translate(150px,137px);
	    -ms-transform:translate(150px,137px);
	    -o-transform:translate(150px,137px);
	    transform:translate(150px,137px);
	}
	.tile[data-xy="2-3"]{
	    /*transform*/
	    -webkit-transform:translate(215px,137px);
	    -moz-transform:translate(215px,137px);
	    -ms-transform:translate(215px,137px);
	    -o-transform:translate(215px,137px);
	    transform:translate(215px,137px);
	}
	.tile[data-xy="3-0"]{
	    /*transform*/
	    -webkit-transform:translate(18px,203px);
	    -moz-transform:translate(18px,203px);
	    -ms-transform:translate(18px,203px);
	    -o-transform:translate(18px,203px);
	    transform:translate(18px,203px);
	}
	.tile[data-xy="3-1"]{
	    /*transform*/
	    -webkit-transform:translate(84px,203px);
	    -moz-transform:translate(84px,203px);
	    -ms-transform:translate(84px,203px);
	    -o-transform:translate(84px,203px);
	    transform:translate(84px,203px);
	}
	.tile[data-xy="3-2"]{
	    /*transform*/
	    -webkit-transform:translate(150px,203px);
	    -moz-transform:translate(150px,203px);
	    -ms-transform:translate(150px,203px);
	    -o-transform:translate(150px,203px);
	    transform:translate(150px,203px);
	}
	.tile[data-xy="3-3"]{
	    /*transform*/
	    -webkit-transform:translate(215px,203px);
	    -moz-transform:translate(215px,203px);
	    -ms-transform:translate(215px,203px);
	    -o-transform:translate(215px,203px);
	    transform:translate(215px,203px);
	}
	.gitfork{
		display:none;
	}
}