@charset "utf-8";
/* CSS Document */

/* Typography */
h1, h2, h3, h4, h5, h6 {padding-bottom:0.1em;}
h1 {font-size:36px; color:#05395c; font-weight:normal;}
h2 {font-size:20px; color:#415c6c; font-weight:normal;}
h3 {font-size:18px; color:#1a7bb6; font-weight:normal;}
h4 {font-size:16px; color:#9bc7d3;}
h5 {font-size:13px; color:#415c6c;}
h6 {font-size:10px; color:#477a0b;}

a{color:#2b6dad; text-decoration:none; outline:none;}
a:hover{ text-decoration:underline; outline:none;}
a:focus{outline:none;}
ul, ol {padding-left:20px; padding-bottom:1em;}
ul li{list-style:none;  padding:10px 0 0 10px;}
ol li {list-style-type:decimal; padding:10px 0 0 0;}
strong{font-weight:normal;}

table{width:100%; border:1px solid #dadcdc; margin:20px 0;}
table th{text-align:left; font-size:13px; background:#e9f3f6; padding:7px 7px 7px 15px;}
table td{text-align:left; font-size:12px; padding:7px 7px 7px 15px; border:1px dotted #e9f3f6;}
textarea{resize:none;}
/* for float */
.clear {clear:both;}
.clearfix:after {content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden;}
.clearfix {display:inline-block;}
html{width:100%; height: 100%; min-width:320px;   }
html,body { height: 100%;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height:1%;}
.hidden {display:none;}

body {    
	color: #fff;
    background: #1a1513 ;
    font-size: 15px;
    font-family: "Myriad Pro", Arial,sans-serif;
    min-height: 100%;
}

#container {
    width: 100%;
    min-height: 875px;
    background: url(../images/main-bg.jpg) #1a1513 center top no-repeat;
    background-size: cover;
}

.main-logo {
    display: block;
    padding: 20px 0 0 0;
    margin: 0 auto;
}

.game-logo {
    display: block;
    margin: 10px auto 150px auto; 
}

.bonus-block {
    position: relative;
    width: 511px;
    height: 301px;
    margin:  0 auto;
    z-index: 1;
}


.bonus-info {
    width: 511px;
    height: 301px;
    background: url(../images/bonus-desctop.png) no-repeat;
}

.play-btn {
    position: absolute;
    top: 795px;
    left: 50%;
    margin: 0 0 0 -75px;
    z-index: 10;
}

.inner {
    width: 700px;
    margin: 0 auto;
    text-align: center;
}

.list-footer {
    width: 694px;
    height: 58px;
    margin: 0 auto;
    background: url(../images/footer-icon.jpg) no-repeat;
}

.copyright {
    margin: 10px 0 0 0;
}

footer {
    height: auto;
    padding: 120px 0 10px 0;
}

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@-webkit-keyframes pulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
}
@keyframes pulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
@-webkit-keyframes tada{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}

/**********************************************
                - MEDIA-QUERIES -
**********************************************/
/* realy small device */
@media (min-width: 1px) {

}

/* smartphones, iPhone, portrait 480x320 phones */
@media (min-width:320px) {

}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
@media (min-width:481px) {

}

/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
@media (min-width:641px) {

}

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:961px) {

}


@media (max-width: 860px) {
    body {
        background:  #1a1513;
    }

    #container {
        min-height: 560px;
        background: url(../images/main-bg-mobile.png) #1a1513  no-repeat;
        background-size: cover;
    }

    .bonus-block {
        position: relative;
        width: 265px;
        height: 306px;
        margin:  0 auto;
        padding: 75px 0 0 55px;
        background: url(../images/bonus-mobile-bg.png) no-repeat;
    }

    .bonus-info {
        width: 240px;
        height: 243px;
        background: url(../images/bonus-mobile.png) no-repeat;
    }

    .main-logo {
        width: 295px;
        height: 50px;
        padding: 15px 0 0 0;
        margin: 0 auto;
    }

    .game-logo {
        width: 265px;
        height: 135px;
        margin: 5px auto -15px auto; 
    }

    .play-btn  {
        position: absolute;
        top: 528px;
        left: 50%;
        margin: 0 0 0 -55px;
    }

    .play-btn img {
        width: 110px;
        height: 24px;
    }

    .inner {
        width: 320px;
        text-align: center;
    }

    footer {
        background: #1a1513;
        font-size: 12px;
        padding:  10px 0;
    }

    .list-footer {
        width: 320px;
        height: 156px;
        margin: 0 auto;
        background: url(../images/footer--mobile-icons.jpg) no-repeat;
    }
}