/* fonts */

/* Prompt Regular */
@font-face {
    font-family: "Prompt";
    font-style: normal;
    font-weight: 400;
    src: local(""),
         url("../fonts/prompt.woff2") format("woff2"),
         url("../fonts/prompt.woff") format("woff");
}





/* common */

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }

html, body { width: 100%; height: 100%; }
body { background-color: #000; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); font-size: 16px; }

body,
input,
select,
textarea,
button { line-height: 1.5; letter-spacing: 1px; font-family: "Prompt", sans-serif; color: #fff; }
input, select, textarea, button { border: none; outline: none; font-size: 18px; }
input, select, textarea { border-bottom: 1px solid #fff; background: none; }
textarea { overflow: auto; vertical-align: top; height: 160px; resize: none; }
input::-webkit-contacts-auto-fill-button { position: absolute; right: 0; display: none !important; visibility: hidden; pointer-events: none; }
select:-moz-focusring { text-shadow: 0 0 0 #000; color: transparent; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

a { text-decoration: underline; color: #333; }
a, a:active { outline: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 1em; line-height: 1.2; font-weight: normal; }
h1 { font-size: 30px; }
h2 { font-size: 28px; }
h3 { font-size: 26px; }
h4 { font-size: 24px; }
h5 { font-size: 22px; }
h6 { font-size: 20px; }

p { margin-bottom: 2em; }

img { border: none; vertical-align: top; }





/* structure */
.page { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; min-height: 100%; background: #000 url("../images/bg/bg_desktop.jpg") no-repeat center center; background-size: cover; }
.content { display: flex; justify-content: space-between; align-items: center; flex-grow: 1; width: 900px; padding: 40px 0; margin: 0 auto; }
.header,
.main { flex-basis: 50%; min-width: 50%; padding: 0 50px; }


/* header */
.logo { width: 350px; height: 425px; background: url("../images/logo/logo.png") no-repeat 0 0; background-size: 350px 425px; }


/* main */
.main__header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; }
.main__header h1 { margin-bottom: 0; }

/* buttons */
.btn { vertical-align: top; width: 100%; height: 50px; padding: 0 10px; border-radius: 2px; background-color: #256cec; cursor: pointer; font-weight: normal; }
.btn:not(.btn--loading):hover { background-color: #1556cb; }
.btn--loading { overflow: hidden; cursor: default; }
.btn--loading.btn--icon:before { display: none; }
.btn--loading .btn__text,
.btn--loading .btn__text:before,
.btn--loading .btn__text:after { display: block; width: 20px; height: 20px; border-radius: 50%; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: btn_loading 1.8s infinite ease-in-out; animation: btn_loading 1.8s infinite ease-in-out; }
.btn--loading .btn__text { position: relative; margin: 0 auto; font-size: 0; color: #fff; transform: translateY(-20px); animation-delay: -0.10s; }
.btn--loading .btn__text:before,
.btn--loading .btn__text:after { content: ''; position: absolute; top: 0; }
.btn--loading .btn__text:before { left: -30px; animation-delay: -0.20s; }
.btn--loading .btn__text:after { left: 30px; }
@keyframes btn_loading {
    0%,
    80%,
    100% {
        box-shadow: 0 20px 0 -10px;
    }
    40% {
        box-shadow: 0 20px 0 0;
    }
}

/* forms */
.form__row:not(:last-child) { margin-bottom: 30px; }
.form__label { display: block; margin-bottom: 5px; }
.form__input { width: 100%; border: none; }
.form__input-decor { position: relative; width: 100%; height: 2px; }
.form__input-decor:before,
.form__input-decor:after { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 1px; background-color: #fff; content: ""; }
.form__input-decor:after { left: 50%; width: 0; height: 2px; background-color: #256cec; transition: left 0.2s ease 0s, width 0.2s ease 0s; }
.form__input:focus + .form__input-decor:after { left: 0; width: 100%; }
.form__error { overflow: hidden; max-height: 0; font-size: 14px; color: #e61515; transition: max-height 0.5s ease 0s; }
.form__error--active { max-height: 46px; }

/* langs */
.langs { display: flex; justify-content: space-between; align-items: center; }
.langs__btn { width: 30px; height: 22px; background: url("../images/flags/flags.png") no-repeat 0 0; background-size: 30px 50px; opacity: 0.7; cursor: pointer; }
.langs__btn--th { margin-left: 10px; background-position: 0 -28px; }
.langs__btn--active { opacity: 1; cursor: default; }

/* alert */
.alert { overflow: hidden; max-height: 0; text-align: center; font-size: 22px; color: #02c802; transition: max-height 0.5s ease 0s; }
.alert--error { color: #e11; }
.alert--visible { max-height: 70px; }


/* footer */
.footer { display: flex; justify-content: center; align-items: center; padding: 10px 0; }
.footer__copyrights { width: 225px; height: 15px; background: url("../images/footer/footer.png") no-repeat center 0; background-size: 225px 30px; }
.footer__copyrights--th { background-position: center -15px; }





/* media queries */


/* ... - 1024 */
@media screen and (max-width: 1024px) {

    /* structure */
    .content { width: 670px; }
    .header,
    .main { padding: 0 20px; }

    /* header */
    .logo { width: 295px; height: 359px; background-image: url("../images/logo/logo_tablet.png"); background-size: 295px 359px; }
}


/* ... - 700 */
@media screen and (max-width: 700px) {

    /* structure */
    .content { flex-direction: column; justify-content: flex-start; align-items: center; width: 295px; }
    .header,
    .main { flex-basis: 100%; min-width: 100%; padding: 0; }


    /* header */
    .header { margin-bottom: 30px; }
    .logo { margin: 0 auto; }
}