body {
    margin: 0;
    padding: 0;

}

p {
    color: #555;
}

h1 >small {
    color: lightpink;
}

h3 {
    color: #666;
}

.transparent {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 5, 10, .84);
    z-index:999;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.transparent p {
    width:auto;
    margin:0 auto;
    color: #FFF;
    font-size:32px;
    font-style: italic;
}


#author p {
    font-size: 21px;
    text-align: justify;
}

.moves-left {
    font-size: 40px;
}

.moves-left > strong {
    font-size:60px;
    font-style: italic;
}

#game {
    background-image: url(../img/wallpaper.jpg);
    background-size: cover;
    background-position: center;
}


#game #right-state {
    //background-color: lightpink;
}

#game #left-state {
    //background-color: lightgrey;
    position: relative;
}


#game ul {
    overflow: hidden;
    width:auto;
    float: left;
}


#game ul > li {
    float: left;
    border:1px solid #FFF;
    border-radius: 3px;
    margin:1px -1px -1px 1px;
    background-size: cover;
    box-shadow: inset 0 1vw 50px 1px rgba(0, 0, 0,.3);
    position: relative;
    top: 0;
    left: 0;
}

#game ul > li.light-shadow {
    box-shadow: inset 0 1vw 50px 1px rgba(200, 200, 200,.3);
}

#game #left-state > ul > li {
    width: 100px;
    height: 100px;
}

#game #left-state > ul > li.size-7 {
    width: 75px;
    height: 75px;
}

#game #left-state > ul > li.size-6 {
    width: 85px;
    height: 85px;
}

#game #left-state > ul > li.size-5 {
    width: 100px;
    height: 100px;
}

#game #left-state > ul > li.size-4 {
    width: 115px;
    height: 115px;
}

#game #left-state > ul > li.size-3 {
    width: 130px;
    height: 130px;
}

#game #left-state > ul > li.size-2 {
    width: 145px;
    height: 145px;
}

#game #right-state > ul > li {
    width: 70px;
    height: 70px;
}


#game ul > li[data-color="B"] {
    background-color: #1aa3ff;
}

#game ul > li[data-color="G"] {
    background-color: #00e600;
}

#game ul > li[data-color="R"] {
    background-color: #e60000;
}

#game ul > li[data-color="Y"] {
    background-color: gold;
}

#game ul > li[data-color="O"] {
    background-color: #ff7400;
}

#game ul > li[data-color="M"] {
    background-color: #999;
}

#game ul > li[data-kind="Q"][data-color="M"] {
    background-image: url(/puzzle-x/assets/img/qm.png);
}

#game ul > li[data-kind="B"][data-color="M"]  {
    background-image: url(/puzzle-x/assets/img/bm.png);
}

#game ul > li[data-kind="T"][data-color="M"]  {
    background-image: url(/puzzle-x/assets/img/tm.png);
}


#game ul > li[data-kind="Q"][data-color="R"] {
    background-image: url(/puzzle-x/assets/img/qr.png);
}

#game ul > li[data-kind="B"][data-color="R"]  {
    background-image: url(/puzzle-x/assets/img/br.png);
}

#game ul > li[data-kind="T"][data-color="R"]  {
    background-image: url(/puzzle-x/assets/img/tr.png);
}

#game ul > li[data-kind="Q"][data-color="B"] {
    background-image: url(/puzzle-x/assets/img/qb.png);
}

#game ul > li[data-kind="B"][data-color="B"]  {
    background-image: url(/puzzle-x/assets/img/bb.png);
}

#game ul > li[data-kind="T"][data-color="B"]  {
    background-image: url(../img/tb.png);
}

#game ul > li[data-kind="Q"][data-color="G"] {
    background-image: url(../img/qg.png);
}

#game ul > li[data-kind="B"][data-color="G"]  {
    background-image: url(../img/bg.png);
}

#game ul > li[data-kind="T"][data-color="G"]  {
    background-image: url(../img/tg.png);
}

#game ul > li[data-kind="Q"][data-color="O"] {
    background-image: url(../img/qo.png);
}

#game ul > li[data-kind="B"][data-color="O"]  {
    background-image: url(../img/bo.png);
}

#game ul > li[data-kind="T"][data-color="O"]  {
    background-image: url(../img/to.png);
}

#game ul > li[data-kind="Q"][data-color="Y"] {
    background-image: url(../img/qy.png);
}

#game ul > li[data-kind="B"][data-color="Y"]  {
    background-image: url(../img/by.png);
}

#game ul > li[data-kind="T"][data-color="Y"]  {
    background-image: url(../img/ty.png);
}



#game ul > li[data-color="#"] {
    background-image: url(../img/wall0.png);
}

#game ul > li.blank {
    background-image: none;
    /*box-shadow: none;
    border: none;*/
}

#game ul > li.wall0{
    background-image: url(../img/wall0.png);
}

#game ul > li.wall1{
    background-image: url(../img/wall1.png);
}
#game ul > li.wall2{
    background-image: url(../img/wall2.png);
}
#game ul > li.wall3{
    background-image: url(../img/wall3.png);
}
#game ul > li.wall4{
    background-image: url(../img/wall4.png);
}
#game ul > li.wall5{
    background-image: url(../img/wall5.png);
}
#game ul > li.wall6{
    background-image: url(../img/wall6.png);
}
#game ul > li.wall7{
    background-image: url(../img/wall7.png);
}
#game ul > li.wall8{
    background-image: url(../img/wall8.png);
}
#game ul > li.wall9{
    background-image: url(../img/wall9.png);
}
#game ul > li.wall10{
    background-image: url(../img/wall10.png);
}
#game ul > li.wall11{
    background-image: url(../img/wall11.png);
}


#game ul > li.no-image{
    -webkit-transition: all 2000ms ease;
    transition: all 2000ms ease;
    background-image: none!important;
}

    /** Essentials **/
.display { display: none; }
.clear { clear: both; }
ul { list-style: none; padding: 0; margin: 0}

.btn {
    border-radius: 50px;
    padding: 15px 30px!important;
    color: #FFF!important;
    font-size:20px;
    //border:2px solid #EEE;
    font-weight: bold;
}

.simple-shadow {
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.large-shadow {
    box-shadow: 0px 1px 25px 5px rgba(0,0,0,.4);
}

.pull-left {
    width: auto;
    float:left;
}

.pull-right {
    width: auto;
    float:right;
}

.align-right {
    text-align: right;
}

#audio-control {
    font-size: 40px;
    color: sandybrown;
    cursor: pointer;
}

.max-height-animation {
    min-height: 700px;
}