body {
    overflow: hidden;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}
.container  {
    text-align: center;
    position: relative;
    z-index: 100;
    padding: 0 15px;
    display: block;
    margin: 12% auto 0 auto;
}

p {
    margin-top: 0;
    margin-bottom: 6px;
    text-align: center;
}
a {
    color: #777;
    text-decoration: none;
}
a:hover {
    color: #333;
}
.logo {
    margin-bottom: 20px;
}
.logo img {
    width: 100%;
    height: auto;
    max-width: 316px;
}

.icon-fb {
    display: inline-block;
    float: none;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3M0NGMTAzN0E5MjI2ODExODcxRkI3NDgwNEJDRDUyRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzA1OUQxRTVFN0ExMUU3QTBBN0Q5OTdGQkQ3MjU0MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzA1OUQxRDVFN0ExMUU3QTBBN0Q5OTdGQkQ3MjU0MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0N2E2NGI0NS05M2EzLTA3NGUtOTc0OS0wODIzNjNkMGEwYjAiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDowNGNhNmViZC01ZTY5LTExZTctYTJkNS1kNzNhMjJiMzFiMTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5h2AXTAAABY0lEQVR42mKctPhY/O8/fxf8+/efgRTAyMjIwMLMlMZy5+HbxrNXnzKQAwy1pGpZWFiYvhOjWEyIm0FMmIfh959/DPefvGP49fsvAxsr83cWJkbGf4Q058dZMYR66ML5mQ0bGC7fegn0BsNfFkKajbSk4Jp/A239+OUHw7fvv+HyLET4E0x/+PSDISR/KcOPn39Q5JkIGfDm/Tcw/ertFwzNeF2gqybBYGeiwKCtKg7mS4rxMuREWzIwMTEyzFt7huHLt1/4DbA3U2SI8NKD83m52RkivCH8mStPEXbBOWDakJXgZ5ABYnkpAbDzQekF5JWfv/4QNuDY+UdgHOCixVCSZMvw/PVnhvKeHRjqCAYiH9DpYJuYsStlIibN4wNM/xn+MzKQCf7/B0bK79//uPEpevsBkg5+/fmLIQcMTG4WJVmhFllJ/lm4srOloRyYFuTjZPBz0kQ4HZgeWFmY2wECDAA5MHnAem+1yAAAAABJRU5ErkJggg==');
}
p.footer {
    margin-top: 10%;
}
.big-back {
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

@media (min-width: 1200px){
    .container  {
        max-width: 450px;
        float: left;
        left: 15%;
        margin-top: 12%;
        font-size: 100%;
    }

    .big-back {
        display: block;
        background: url(/img/background.jpg) no-repeat right -220px;
        background-size: 87%;
        z-index: 0;
        right: 0;
    }
}
@media (min-width: 320px) {
    .container  {
        max-width: 290px;
        float: none;
        left: 0;
        right: 0;
        font-size: 12px;
    }

    .big-back {
        display: none;
        background: none;
        background-size: contain;
        z-index: 0;
        right: 0;
    }
}
@media (min-width: 768px) and (max-width: 960px) {
    .container  {
        max-width: 450px;
        float: left;
        left: 15%;
        margin-top: 12%;
        font-size: 100%;
    }

    .big-back {
        display: block;
        background: url(/img/background.jpg) no-repeat right 30%;
        background-size: contain;
        z-index: 0;
        right: 0;
    }
}
@media (min-width: 992px) {
    .container  {
        max-width: 450px;
        float: left;
        left: 5%;
        margin-top: 12%;
        font-size: 100%;
    }

    .big-back {
        display: block;
        background: url(/img/background.jpg) no-repeat right 0%;
        background-size: cover;
        z-index: 0;
        right: -170px;
    }
}
@media (min-width: 920px) and (max-width: 1366px) {
    .container  {
        max-width: 450px;
        float: left;
        left: 2%;
        margin-top: 12%;
        font-size: 100%;
    }

    .big-back {
        display: block;
        background: url(/img/background.jpg) no-repeat right -145px;
        background-size: 100%;
        z-index: 0;
        right: -80px;
    }
}
@media (min-width: 1200px){
    .container  {
        max-width: 450px;
        float: left;
        left: 15%;
        margin-top: 12%;
        font-size: 100%;
    }

    .big-back {
        display: block;
        background: url(/img/background.jpg) no-repeat right -220px;
        background-size: 87%;
        z-index: 0;
        right: 0;
    }
}