@font-face {
    font-family: 'Crimson Text Bold';
    src: url('../fonts/CrimsonText-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/CrimsonText-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/CrimsonText-Bold.woff') format('woff'), /* Modern Browsers */
    url('../fonts/CrimsonText-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/CrimsonText-Bold.svg#bfe4717502f841845321b5f9b9f45ab7') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  700;
}

@font-face {
    font-family: 'Crimson Text';
    src: url('../fonts/CrimsonText-Roman.eot'); /* IE9 Compat Modes */
    src: url('../fonts/CrimsonText-Roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/CrimsonText-Roman.woff') format('woff'), /* Modern Browsers */
    url('../fonts/CrimsonText-Roman.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/CrimsonText-Roman.svg#13dc73e3781b936ac8184d25c72fae4c') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  400;
}

@font-face {
    font-family: 'PT Sans Bold';
    src: url('../fonts/PT_Sans-Web-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/PT_Sans-Web-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/PT_Sans-Web-Bold.woff') format('woff'), /* Modern Browsers */
    url('../fonts/PT_Sans-Web-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/PT_Sans-Web-Bold.svg#8e2408bd894c6a9f4e6f9cb12ad976a5') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  700;
}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT_Sans-Web-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/PT_Sans-Web-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/PT_Sans-Web-Regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/PT_Sans-Web-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/PT_Sans-Web-Regular.svg#f39585f1b656e5f9297b79e526233403') format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  400;
}

* {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
    background: #000;
}

#bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}
#bg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}

.message {
    width: 500px;
    height: 220px;
    border-top: 1px solid rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;

    font-family: 'Crimson Text';
    letter-spacing: 6px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 50px;
    padding-top: 80px;
}

.logo {
    position: absolute;
    width: 142px;
    height: 52px;
    background-image: url('../images/ui/logo.png');
    background-size: 142px 52px;
    top: 30px;
    right: 30px;
}

.message.browser {
    padding-top: 45px;
    height: 280px;
    width: 500px;
}

@media only screen
and (max-width : 500px) {

    .message {
        width: 300px !important;
        height: 200px !important;
        font-size: 14px;
        line-height: 30px;
    }
}

@media only screen
and (max-height :350px) {
    .message {
        height: 170px !important;
        font-size: 14px;
        line-height: 30px;
        border-top: none;
        border-bottom: none;
    }

    .logo {
        top: 15px;
        right: 15px;
    }
}