@import "common.css";

body {
    background: #4e278f url("../img/bg-line.png") repeat-y right top;
}
.bg {
    background: transparent url("../img/header-bg.png") no-repeat right top;
    min-width: 100%;
    min-height: 100%;
    float: left;
}

section.main > nav {
    /*background: transparent url("../img/logo-post3d.png") no-repeat 20px center;*/
}

section.main > nav ul li a {
    color: #fff;
}

section.main {
    position: relative;
    /*height: 100%;
    background: transparent url("../img/phone.png") no-repeat 480px 80px;*/
}

section.body {
    width: 100%;
}

section.body h1 {
    color: #fff;
    margin-top: 100px;
}

section.body h2 {
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    margin-top: 50px;
}

nav.links {
    margin-top: 50px;
}
nav.links a {
    display: block;
    color: #fff;
    font-size: 18px;
    width: 175px;
    height: 50px;
    float: left;
    margin-top: 50px;
    margin-bottom: 20px;
}

nav.links a.gplay {
    background: transparent url("../img/icon-gplay.png") no-repeat left center;
    margin-right: 90px;
}

nav.links a.facebook {
    background: transparent url("../img/logo-f.svg") no-repeat left 0px;
    padding-left: 35px;
    margin-right: 0;
    width: 125px;
    filter: brightness(0) invert(100%) sepia(0%) saturate(0%) hue-rotate(77deg) brightness(103%) contrast(106%);
}

section.left {
    width: 465px;
}

section.preview.right {
    margin-top: 50px;
    background: transparent url("../img/phone.png") no-repeat 0 -20px;
    background-size: 400px 700px;
    padding: 45px 0 65px 0;
    width: 395px;
    height: 660px;
}

.iframe {
    position: relative;
    margin: 0;
    margin-left: 45px;
    width: 310px;
    height: 550px;
    border-radius: 32px;
    z-index: 10;
    overflow:hidden;

}
iframe {
    width: 420px;
    margin-left: -50px;
    margin-top: -20px;
    height: 600px;
    border: none;
    position: relative;
    z-index: 9;
}

/* MOBILE VERSION */

@media only screen and (max-width: 900px) {
    section.left, section.right {
        width: 100%;
        margin: auto;
        float: none;
        text-align: center;
    }
}