body {
    margin: 0;
    padding: 0;
    background: #ADC4D8 url(../img/bg-top.png) no-repeat top center;
    text-align: center;
    font-family: Arial, sans-serif;
}

a:hover {
    text-decoration: none;
}

#proxy {
    position: absolute;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 200px;
    color: white;
}

body.proxy {
    overflow: hidden;
}

body.proxy #proxy {
    display: block;
}

.viewport {
    width: 850px;
    display: inline-block;
    position: relative;
}

.clear {
    clear: both;
}

.hoverable {
    transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
}

#tv {
    background: url(../img/bg-tv.png) no-repeat bottom center;
    height: 640px;
}

#logo {
    padding-top: 20px;
    text-align: center;
}

#logo a {
    width: 250px;
    height: 167px;
    display: inline-block;
    background: url(../img/logo.png) no-repeat;
    background-size: 100%;
}

#logo a:hover {
    /*transform: scale(1.05);*/
    /*-moz-transform: scale(1.05);*/
    /*-webkit-transform: scale(1.05);*/
    /*-o-transform: scale(1.05);*/
    /*-ms-transform: scale(1.05);*/
}

#logo img {
    width: 250px;
}

#social {
    position: absolute;
    right: -220px;
    top: 50px;
    width: 300px;
    height: 205px;
    z-index: 900;
}

#social .lang {
    float: left;
    width: 16px;
    height: 11px;
    background: url(../img/flags.png) no-repeat left top;
    margin-right: 8px;
}

#social .lang.ru {
    background-position: 0 0;
}

#social .lang.en {
    background-position: 0 -11px;
}

#social .lang.fr {
    background-position: 0 -22px;
}

#social .lang.de {
    background-position: 0 -33px;
}

#social #tw-fixed {
    float: left;
    margin-left: 75px;
    margin-top: 22px;
}

#social #fb-fixed {
    float: left;
    margin-left: 75px;
    margin-top: 50px;
}

#social #vk-fixed {
    float: left;
    margin-left: 75px;
    margin-top: 50px;
}

#social .follow {
    position: absolute;
    left: 0;
    width: 68px;
    height: 68px;
    background: url(../img/social-v.png) no-repeat 0 0;
}

#social .tw {
    top: 40px;
    background-position: 0 0;
}

#social .fb {
    top: 110px;
    background-position: 0 -70px;
}

#social .vk {
    top: 185px;
    background-position: 0 -145px;
}

#screen {
    padding-top: 95px;
    padding-left: 5px;
    text-align: center;
}

#screen a {
    opacity: 0.75;
}

#screen a:hover {
    opacity: 1;
}

#screen a {
    background: url(../img/tv-screen.png) no-repeat;
    width: 261px;
    height: 188px;
    display: inline-block;
}

.get-ios {
    width: 135px;
    height: 40px;
    background: url(../img/get-ios.png) no-repeat;
    position: absolute;
}

#tv .get-ios {
    top: 158px;
    right: 172px;
    transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
}

#bottom .get-ios {
    top: 83px;
    left: 187px;
    transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
}

.get-android {
    width: 169px;
    height: 41px;
    background: url(../img/get-android.png) no-repeat;
    position: absolute;
}

#tv .get-android {
    top: 240px;
    right: 135px;
    transform: rotate(-7deg) scale(0.85);
    -moz-transform: rotate(-7deg) scale(0.85);
    -webkit-transform: rotate(-7deg) scale(0.85);
    -o-transform: rotate(-7deg) scale(0.85);
    -ms-transform: rotate(-7deg) scale(0.85);
}

#bottom .get-android {
    top: 158px;
    left: 165px;
    transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
}

#middle {
    background: url(../img/bg-middle.jpg) no-repeat top center;
    height: 1100px;
}

#screenshots {
    height: 250px;
    position: absolute;
    right: 94px;
    top: -37px;
    width: 167px;
    background: url(../img/screenshots.png) no-repeat 0 0;
    transform: rotate(6.5deg);
    -moz-transform: rotate(6.5deg);
    -webkit-transform: rotate(6.5deg);
    -o-transform: rotate(6.5deg);
    transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
}

#screenshots.page1 { background-position: 0 0; }
#screenshots.page2 { background-position: -167px 0; }
#screenshots.page3 { background-position: -334px 0; }
#screenshots.page4 { background-position: -501px 0; }
#screenshots.page5 { background-position: -668px 0; }
#screenshots.page6 { background-position: -835px 0; }

#screenshots #iphone-mask {
    position: absolute;
    left: -1px;
    display: inline-block;
    width: 168px;
    height: 250px;
    background: url(../img/iphone-mask.png) no-repeat;
}

#intro {
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    color: #35546D;
    text-align: left;
    margin: 0 400px 0 180px;
}

#intro a {
    color: #4a7497;
}

#intro strong {
    display: block;
}

#intro .first {
    margin-top: 7px;
}

#intro .second {
    margin-top: 25px;
}


#how-to-play {
    font-size: 13px;
    line-height: 16px;
    margin-top: 350px;
}

#how-to-play div {
    text-indent: 20px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: left;
}

#how-to-play b {
    color: white;
    font-weight: 900;
}

#how-to-play .block-1-1 {
    margin: 50px 100px 0 400px;
}

#how-to-play .block-1-2 {
    margin: 22px 100px 0 395px;
}

#how-to-play .block-1-3 {
    margin: 22px 235px 0 390px;
}

#how-to-play .block-1-4 {
    text-align: right;
    color: #35546D;
    margin: 10px 275px 0 400px;
}

#how-to-play .block-2-1 {
    text-align: center;
    margin: 30px 280px 0 280px;
}

#how-to-play .block-2-2 {
    color: #FFF296;
    font-size: 12px;
    text-align: left;
    text-indent: 50px;
    margin: 24px 418px 0 247px;
}

#how-to-play .block-2-3 {
    color: #FFF296;
    font-size: 12px;
    text-align: left;
    text-indent: 55px;
    margin: 22px 418px 0 240px;
}

#how-to-play .block-3-1 {
    bottom: 85px;
    position: absolute;
    right: 35px;
    text-indent: 0;
    width: 180px;
}

#how-to-play .block-hint {
    text-align: center;
    color: #FFF296;
    font-size: 12px;
    bottom: 108px;
    left: 125px;
    position: absolute;
    text-indent: 0;
    width: 110px;
}

#bottom {
    background: url(../img/bg-bottom.png) no-repeat center -35px;
    height: 280px;
}

#copyrights {
    color: #555555;
    font-size: 11px;
    margin: 150px 150px 0 320px;
}

#copyrights a {
    color: #222222;
}