* {
    margin: 0;
    padding: 0;
    border: none;
    -webkit-border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: 'VWTextWeb-Regular';
}

body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, input {
    list-style: none;
    color: #0D0D0D;
}

a {
    text-decoration: none;
    outline: none;
    color: inherit;
    font-family: inherit;
}
/*Reset CSS End*/

@font-face {
    font-family: 'VWHeadWeb-Bold';
    src: url('../font/VWHeadWeb-Bold.eot?#iefix') format('embedded-opentype'), url('../font/VWHeadWeb-Bold.woff') format('woff'), url('../font/VWHeadWeb-Bold.ttf') format('truetype'), url('../font/VWHeadWeb-Bold.svg#Font') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'VWHeadWeb-Regular';
    src: url('../font/VWHeadWeb-Regular.eot?#iefix') format('embedded-opentype'), url('../font/VWHeadWeb-Regular.woff') format('woff'), url('../font/VWHeadWeb-Regular.ttf') format('truetype'), url('../font/VWHeadWeb-Regular.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VWTextWeb-Light';
    src: url('../font/VWTextWeb-Light.eot?#iefix') format('embedded-opentype'), url('../font/VWTextWeb-Light.woff') format('woff'), url('../font/VWTextWeb-Light.ttf') format('truetype'), url('../font/VWTextWeb-Light.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VWTextWeb-Bold';
    src: url('../font/VWTextWeb-Bold.eot?#iefix') format('embedded-opentype'), url('../font/VWTextWeb-Bold.woff') format('woff'), url('../font/VWTextWeb-Bold.ttf') format('truetype'), url('../font/VWTextWeb-Bold.svg#Font') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'VWTextWeb-Regular';
    src: url('../font/VWTextWeb-Regular.eot?#iefix') format('embedded-opentype'), url('../font/VWTextWeb-Regular.woff') format('woff'), url('../font/VWTextWeb-Regular.ttf') format('truetype'), url('../font/VWTextWeb-Regular.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VWHeadWeb-Light';
    src: url('../font/VWHeadWeb-Light.eot?#iefix') format('embedded-opentype'), url('../font/VWHeadWeb-Light.woff') format('woff'), url('../font/VWHeadWeb-Light.ttf') format('truetype'), url('../font/VWHeadWeb-Light.svg#Font') format('svg');
    font-weight: normal;
    font-style: normal;
}

a:hover.selected {
    text-decoration: none;
}

img {
    border: none;
}

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

p, input, a {
    color: #5f5f5f
}

h1 {
    font-size: 1.8em;
    line-height: 1.2em;
}

h2 {
    font-size: 1.5em;
}

h3, h3 a {
    font-size: 1.2em;
}

h4, h4 a {
    font-size: 1.2em;
}

h5, h5 a {
    font-size: 1.2em;
}

h6, h6 a {
    font-size: 1.2em;
}

    h3 a, h4 a, h5 a, h6 a {
        font-size: 1em;
        text-decoration: underline;
    }

table, table tr td, table tr th {
    border: none
}

.clearfix:after {
    content: "."; /*display: block;*/
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

* html .clearfix {
    height: 1%;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.clear {
    font-size: 1%;
    height: 0;
    line-height: 0;
    width: 0;
    float: none;
    clear: both;
}

input {
    outline: none
}

article, aside, canvas, details, figcaption, figure, main, footer, header, hgroup, menu, nav, section, summary, mark {
    display: block;
    width: 100%;
    float: left;
}

strong {
    font-weight: normal
}

* {
    box-sizing: border-box
}

a {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}


.responsive {
    width: 100%;
    max-width: 100%;
}

.container-game {
    position: relative;
    display: block;
    width: 100%;
    background-color: #001c4e;
    height: 720px;
}

.login_warper, .congratulation, .opps {
    width: 600px;
    margin: 0 auto;
    padding: 30px 0;
}

    .login_warper h1 {
        color: #ffffff;
        font-size: 1.8em;
        margin: 8px 0 25px 0;
        font-family: 'VWHeadWeb-Regular';
    }

    .congratulation h2, .opps h2 {
        font-family: 'VWHeadWeb-bold';
        font-size: 2.2em;
        margin: 0px 0 25px 0;
        color: #ffffff;
    }

        .opps h2 small {
            font-size: 0.6em;
        }

    .login_warper h4 {
        color: #ffffff;
        font-size: 2.4em;
        margin: 8px 0 25px 0;
        font-family: 'VWHeadWeb-Light';
        position: absolute;
        top: 18px;
        left: 30px;
        line-height: 1em;
        text-shadow: 1px 4px 20px #000000;
    }

        .login_warper h4 span {
            font-family: 'VWHeadWeb-bold';
            font-size: 1.2em;
        }

    .login_warper p, .congratulation p, .opps p {
        color: #bfb6b6;
        font-size: 1.2em;
        font-family: 'VWTextWeb-Light';
        margin-bottom: 15px;
    }

.heighhlight {
    color: rgb(224, 8, 120);
    font-size: 1.4em;
    font-family: 'VWHeadWeb-bold';
    margin: 20px 0 0 0;
}

.container-game-warper {
    width: 500px;
    margin: 0 auto;
    padding: 30px 0;
}

.kmasub-pad {
    padding: 0 25px;
    margin-bottom: 20px;
}

input.login_input {
    display: block;
    width: 100%;
    border: 0;
    color: #fcfcfc;
    font-size: 1.2em;
    font-family: 'VWTextWeb-Light';
    outline: none;
    border: 0;
    background: transparent;
    position: relative;
    padding: 10px 0;
    margin: 5px 0 10px 0;
    border-bottom: solid 1px #fff;
}

    input.login_input::-webkit-input-placeholder {
        color: #fcfcfc;
    }

    input.login_input:-moz-placeholder {
        color: #fcfcfc;
        opacity: 1;
    }

    input.login_input::-moz-placeholder {
        color: #fcfcfc;
        opacity: 1;
    }

    input.login_input:-ms-input-placeholder {
        color: #fcfcfc;
    }

    input.login_input::-ms-input-placeholder {
        color: #fcfcfc;
    }

    input.login_input::placeholder {
        color: #fcfcfc;
    }

.btn {
    text-align: center;
    cursor: pointer;
    padding: 10px 45px;
    color: #ffffff;
    border-radius: 25px;
    font-size: 1.2em;
    margin-bottom: 12px;
    background: rgba(255,93,177,1);
    background: -moz-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(239,1,124,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,93,177,1)), color-stop(100%, rgba(239,1,124,1)));
    background: -webkit-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(239,1,124,1) 100%);
    background: -o-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(239,1,124,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(239,1,124,1) 100%);
    background: linear-gradient(to right, rgba(255,93,177,1) 0%, rgba(239,1,124,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c', GradientType=1 );
    outline: none;
}

.center {
    text-align: center;
}

.kma {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.input_area {
    height: 175px;
    width: 100%; 
    margin: 15px 0 15px 15px;
    padding: 10px 0 10px 10px;
    outline: none;
    border: 0px;
    resize: none;
    overflow: auto;
    background: transparent;
    border-top: 1px solid #ef017c;
    border-bottom: 1px solid #ef017c; 
    z-index: 2;
    position: relative; 
    width: 480px;
}

.quote, .input_area{font-family: 'VWHeadWeb-Light'; color: #ffffff; 
    font-size: 2.4em; font-weight: 600;  }

.quote {
    position: absolute;  
    opacity: 0.2;
    top: 26px;
    left: 24px;
    z-index: 0; 
    z-index: 1; 
    width: 468px;
}

.heading {
    color: #fcfcfc;
    font-size: 1.8em;
    font-family: 'VWTextWeb-Light';
    margin: 10px 0 45px 0;
}

.timer {
    font-family: 'VWHeadWeb-Light';
    font-size: 2.2em;
    color: #ffffff;
    text-align: right;
}

    .timer span {
        font-family: 'VWHeadWeb-Light';
        position: relative;
    }

        .timer span svg {
            fill: #fff;
            width: 38px;
            position: absolute;
            left: -42px;
            top: 2px;
        }

.text-over {
    position: relative;
    width: 500px;
}
.errorMsg {
    color: rgba(255,93,177,1);
    font-size: 14px;
    display: none;
} 

@media (max-width:767px) {

    .container-game {
        width: 100%
    }

    .login_warper, .congratulation, .opps {
        width: 95%;
    }

        .login_warper h4 {
            font-size: 2.2em;
            top: 1px;
            left: 14px;
        }

        .login_warper h1 {
            font-size: 1.2em;
        }

    .container-game-warper {
        width: 90%;
        margin: 0 auto;
        padding: 30px 0; }

    .text-over { position: relative; width: 100%; } 

    .timer { font-family: 'VWHeadWeb-Light';  font-size: 1.5em; color: #ffffff;  text-align: right; width: 97%; }

    .timer span svg { fill: #fff; width: 26px; position: absolute; left: -27px; top: 2px; }
 
    .login_warper p, .congratulation p, .opps p { font-size: 1.2em; margin-bottom: 12px; }

    .login_warper, .congratulation, .opps{width:498px;}

    .quote, .input_area {  font-size: 1.6em; }
    .input_area { height:110px; width: 406px;}
    .quote { width: 380px;}

    .congratulation h2, .opps h2 { font-size: 1.8em;}

}

@media (max-width:500px) {

    .login_warper, .congratulation, .opps {
        width: 90%;
    }

    .container-game {
        height: 600px;
    }  
 .login_warper, .congratulation, .opps{width:379px;}
 .kmasub-pad {
    padding: 0 12px;
    margin-bottom: 20px;
}
.login_warper h4 {
    font-size: 2em; 
}
.input_area {
    height: 121px;
    width: 315px;
}
.quote {
    width: 296px;
}

}

@media (max-width:380px) {

    .login_warper, .congratulation, .opps{width:290px;} 
    .input_area { height: 120px; width: 285px; margin: 15px 0 15px 5px; padding: 10px 0 10px 10px;}
    .quote { width: 275px; top: 25px; left: 14px;}
    .quote, .input_area { font-size: 1.4em;}
    .congratulation h2, .opps h2 { font-size: 1.5em;}

}