/* font-family: 'Roboto Condensed', sans-serif; 400 700 */
/* font-family: 'Open Sans', sans-serif; */

* {
	outline: none;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
    background: #061117 url(../img/bg.jpg) center top no-repeat;
    background-size: cover;
    color: #a5935d;
    font-size: 14px;
    font-weight: 400;
    min-width: 320px;
    overflow-x: hidden;
}

#wrapper {
    width: 100%;
    height: 100%;
}

.content {
    width: 320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.header {
    width: 320px;
    height: 130px;
    /*background: url(../img/header.png) no-repeat;
    margin-left: -23px;*/
    position: relative;
    z-index: 100;
}

.logo {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 258px;
    height: 43px;
    background: url(../img/logo.svg) no-repeat;
    background-size: cover;
}

.text {
    width: 538px;
    height: 331px;
    background: url(../img/text.png) no-repeat;
    background-size: contain;
    margin-left: -105px;
    position: relative;
    z-index: 1;
}

.jack-btn {
    width: 513px;
    margin-left: -95px;
    padding-top: 50px;
    padding-bottom: 100px;
}

.btn {
    width: 513px;
    height: 141px;
    background: url(../img/btn.png) 0px 0px no-repeat;
    background-size: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.btn:hover {
    background-position: 0px -141px;
}

.footer {
    padding-bottom: 30px;
}

.girl {
    position: absolute;
    left: calc(50% + 230px);
    bottom: 0px;
    z-index: 0;
    display: block;
}

.girl-small {
    position: absolute;
    top: 298px;
    left: 142px;
    z-index: 1;
    display: none;
}

@media screen and (max-height: 880px) {
    .girl {
        top: 100px;
    }
}

@media screen and (max-width: 1920px) {
    body {
        background-size: auto;
    }
}

@media screen and (max-width: 1200px) {
    .text {
        width: 320px;
        height: 390px;
        margin-left: 0;
    }

    .jack-btn {
        width: 284px;
        margin-left: 18px;
        padding-bottom: 50px;
    }

    .btn {
        width: 284px;
        height: 78px;
        background: url(../img/btn.png) 0px 0px no-repeat;
        background-size: cover;
        display: block;
    }

    .btn:hover {
        background-position: 0px -78px;
    }

    .girl {
        display: none;
    }

    .girl-small {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .logo {
        width: 202px;
        height: 34px;
        top: 38px;
    }
}