/* CLEAN STYLE */

* {box-sizing: border-box;}

html, body {
    height: 100%;
    width: 100%;
}

html {
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    background: #222 url(../img/bg-mob.jpg) no-repeat;
    background-size: cover;
    color: #fff;
    font: 400 14px/21px 'Roboto', 'Arial', sans-serif;
    margin: 0;
}

a {
    color: #fff;
    text-decoration: none;
}

a:active,
a:hover {
    outline: 0;
    text-decoration: underline;
}

a:focus {outline: none;}

img {
    border: 0;
    vertical-align: middle;
}


/* HEADING */

h1 {
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    margin: 0 0 10px;
}

@media all and (min-width: 768px){

    body {
        background: #222 url(../img/bg.jpg) no-repeat;
        background-size: cover;
    }

}


/* MAIN STYLE */

.container {
    background: rgba(0, 0, 0, .8);
    padding: 32px 45px 0;
    position: relative;
    transition: padding .5s, width .5s
}

    .container:after {
        background: url(../img/bg-mob.svg) no-repeat bottom;
        background-size: cover;
        content: '';
        height: 200px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
    }

    .container .logo {
        margin-bottom: 35px;
        transition: margin .5s;
    }

        .container .logo img {
            width: 154px;
            transition: width .5s;
        }

    .container .text p {margin: 0;}

    .container .text a[href^="mailto"] {
        display: inline-block;
        font-size: 16px;
        line-height: 16px;
        margin-top: 40px;
        position: relative;
        padding-left: 45px;
        transition: margin .5s;
    }

        .container .text a[href^="mailto"]:before {
            background: url(../img/mail.svg) no-repeat;
            content: '';
            height: 16px;
            position: absolute;
            top: 0;
            left: 0;
            width: 36px;
        }

@media all and (min-width: 600px){

    .container:after {height: 250px;}

}

@media all and (min-width: 768px){

    body {padding-right: 345px;}

        .container {
            height: 100%;
            padding: 42px 0 30px 72px;
        }

            .container:after {
                background: url(../img/bg.svg) no-repeat top right;
                background-size: cover;
                height: 100%;
                position: absolute;
                top: 0;
                left: 100%;
                width: 180px;
            }

            .container .logo {margin-bottom: 160px;}

                .container .logo img {width: 246px;}

            .container .text a[href^="mailto"] {margin-top: 80px;}

}

@media all and (min-width: 1024px){

    body {padding-right: 0;}

        .container {
            padding: 42px 0 30px 104px;
            width: 48%;
        }

}

@media all and (min-width: 1200px){

    .container {width: 38%;}

}

@media all and (min-width: 1600px){

    .container {width: 30%;}

}

@media all and (min-width: 768px) and (min-height: 850px){

    .container:after {width: 45%;}

}

@media all and (min-width: 1600px) and (min-height: 900px){

    .container:after {width: 50%;}

}

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait),
only screen and (device-width: 1366px) and (device-height: 1024px) and (orientation: landscape) {

    .container:after {width: 230px;}

}

@media only screen and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) {

    .container:after {width: 300px;}

}

@media all and (width: 2560px) and (height: 1600px){

    .container:after {width: 48%;}

}