@import "../css/fonts.css" screen;

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

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

html, body {
    width: 100%;
    height: 100%;
    font-family: "Karbon", sans-serif;
    font-style: italic;
    font-weight: bold;
}

.logo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 206px;
    height: 169px;
    background: url(../images/logo.png) no-repeat top left;
    margin: 5% 5% 0 auto;
    padding: 0 0 5% 0;
}

.logo_abs {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 206px;
    height: 169px;
    background: url(../images/logo.png) no-repeat top left;
    margin: 5% 5% 0 auto;
    padding: 0 0 5% 0;
}

.survey-container {
    position: relative;
    min-height: 100vh;
}

.survey {
    width: 100%;
    position: relative;
    background: url("../images/bg.png") no-repeat top left;
    background-size: cover;
    background-position-x: 50%;
    height: 100%;
    padding-bottom: 0;
    min-height: 100vh;
}

.survey .header {
    width: 60%;
    padding: 10% 0 5% 10%;
}


.survey .header i {
    width: 178px;
    height: 178px;
    display: inline-block;
}

.survey h1 {
    color: #f6d300;
    font-size: 80pt;
}

.survey .answers {
    padding-bottom: 100px;
}

.survey .answers > a {
    text-decoration: none;
    align-items: center;
    height: 265px;
    background: url("../images/answers_bg.png") no-repeat top left;
    background-size: contain;
    margin: 5% 0 0 0;
    padding: 0 0 0 8%;
    color: #18356b;
    font-size: 65pt;
    display: flex;
}

.survey .answers > a:last-of-type {
    margin-bottom: 200px;
}

.survey .answers > a i {
    width: 100%;
    height: 100%;
    max-width: 178px;
    max-height: 178px;
    display: flex;
}

.survey .answers > a span {
    display: flex;
    width: 45%;
    padding: 0 0 0 10%;
}

.survey .answers > a.mini {
    font-size: 45pt;
    padding: 0 0 0 5%;
}

.survey .answers > a.maxi {
    font-size: 100pt;
    padding: 0 0 0 5%;
}

.survey .answers > a.mini span {
    width: 85%;
    padding: 0 0 0 5%;
}

.appreciation {
    width: 100%;
    position: relative;
    background: url("../images/bg.png") no-repeat top left;
    background-size: cover;
    background-position-x: 50%;
    height: 100%;
    padding-bottom: 0;
    min-height: 100vh;
}

.appreciation .thank-you {
    width: 60%;
    padding: 10% 0 5% 10%;
    color: #f6d300;
    font-size: 80pt;
}

.appreciation .appreciation_block {
    text-align: center;
}

.appreciation .appreciation_block  {
    text-decoration: none;
    align-items: center;
    height: 265px;
    background: url(../images/answers_bg.png) no-repeat top left;
    background-size: contain;
    margin: 5% 0 0 0;
    padding: 0 0 0 8%;
    color: #18356b;
    font-size: 65pt;
    display: flex;
    text-align: center;
    width: 85%;
    margin-left: -25%;
    flex-direction: column;
}

.appreciation .appreciation_block i {
    width: 100%;
    height: 100%;
    max-width: 234px;
    max-height: 225px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    margin-top: 2%;
}

.appreciation .appreciate {
    display: inline-block;
    width: 234px;
    height: 225px;
    background: url(../images/ico_appreciate.png) no-repeat top left;
}

.appreciation .appreciation-description {
    width: 60%;
    margin: 5% 0 0 0;
    padding: 0 0 0 11%;
    font-size: 80pt;
    color: #f6d300;
}

.thanks {
    width: 100%;
    height: 100%;
    background: url("../images/bg_yellow.png") no-repeat top left;
    background-size: cover;
}

.thanks .like_block {
    text-align: center;
}

.thanks .like {
    display: inline-block;
    width: 234px;
    height: 209px;
    background: url(../images/ico_like.png) no-repeat top left;
    margin: 20% 0 10% 0;
}

.thanks .error {
    display: inline-block;
    width: 256px;
    height: 256px;
    background: url(../images/ico_error.png) no-repeat top left;
    margin: 20% 0 10% 0;
}

.thanks .thank-you {
    text-decoration: none;
    align-items: center;
    height: 265px;
    background: url("../images/thanks_bg.png") no-repeat top left;
    background-size: contain;
    margin: 5% 0 0 0;
    padding: 0 0 0 11%;
    color: #fff;
    font-size: 85pt;
    display: flex;
}

.thanks .thank-you-description {
    width: 50%;
    margin: 5% 0 0 0;
    padding: 0 0 0 11%;
    font-size: 70pt;
    color: #18356b;
}

.select-station {
    width: 100%;
    height: 100%;
    background: url("../images/bg_yellow.png") no-repeat top left;
    background-size: cover;
}

.select-station .select-block {
    width: 70%;
    padding: 33% 0 10% 0%;
    font-size: 70pt;
    color: #18356b;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
}

.select-station .select-html {
    text-align: center;
}

.select-station .select-html select {
    width: 50%;
    font-size: 30pt;
    height: 5vh;
    padding-left: 3vw;
}

.select-station .select-html button {
    cursor: pointer;
    border: 0;
    text-decoration: none;
    background: url("../images/thanks_bg.png") no-repeat top left;
    background-size: contain;
    margin: 5% 0 0 0;
    color: #fff;
    font-size: 25pt;
    width: 25%;
    padding: 2vw 6vw 2vw 5vw;
}

.select-station .select-html button span {
    text-align: center;
}

.video {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slideshow {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("../images/bg_wood.jpg") no-repeat top left;
    background-size: cover;
    overflow: hidden;
}

.slideshow .slider {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
}

.slideshow .slider img {
    width: 100%;
}

.slick-prev {
    position: absolute;
    width: 62px;
    height: 74px;
    background: url("../images/left.png") no-repeat top left;
    background-size: contain;
    z-index: 999;
    left: 5%;
}

.slick-next {
    position: absolute;
    width: 62px;
    height: 74px;
    background: url("../images/right.png") no-repeat top left;
    background-size: contain;
    z-index: 999;
    right: 5%;
}

i.like {
    background: url("../images/ico_like.png") no-repeat top left;
}

i.error {
    background: url("../images/ico_error.png") no-repeat top left;
}

i.good {
    background: url("../images/ico_good.png") no-repeat top left;
}

i.neutral {
    background: url("../images/ico_neutral.png") no-repeat top left;
}

i.bad {
    background: url("../images/ico_bad.png") no-repeat top left;
}

i.sad {
    background: url("../images/ico_sad.png") no-repeat top left;
}