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

@font-face {
    font-family:sukhumvit_bold;
    src:url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.eot);
    src:url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.eot?#iefix) format("embedded-opentype"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.woff2) format("woff2"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.woff) format("woff"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.ttf) format("truetype"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.svg#sukhumvit_setbold) format("svg");
    font-weight:normal;
}
@font-face {
    font-family:sukhumvit;
    src:url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.eot);
    src:url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.eot?#iefix) format("embedded-opentype"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.woff2) format("woff2"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.woff) format("woff"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.ttf) format("truetype"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.svg#sukhumvit_setmedium) format("svg");
    font-style:normal;
}
@font-face {
    font-family:sukhumvit_text;
    src:url(../fonts/sukhumvit/sukhumvit-set_text-webfont.eot);
    src:url(../fonts/sukhumvit/sukhumvit-set_text-webfont.eot?#iefix) format("embedded-opentype"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.woff2) format("woff2"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.woff) format("woff"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.ttf) format("truetype"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.svg#sukhumvit_text) format("svg");
    font-style:normal;
}

html, body, h1, h2, h3, h4, h5, h6, div, p, a, li, span, tr, th, td, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "sukhumvit";
}
b, th, .text-bold {
    font-family: "sukhumvit_bold";
    font-weight: 600;
}
h1 {
    font-size: calc(55px + 1vw);
}

body {
    /*background-color: #00B140;*/
    margin: 0px;
    padding: 0px;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
#vertical-main .swiper-container {
    width: 500px;
    height: 100%;
    margin-left: 0px;
}
#vertical-main .swiper-container .swiper-slide-prev,
#vertical-main .swiper-container .swiper-slide-next,
#vertical-main .swiper-container .swiper-slide {
    opacity: 0 !important;
}
#vertical-main .swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

#vertical-main .swiper-slide .province {
    top: 464px;
    position: absolute;
    left: 47px;
    color: #000;
    background: none !important;
    font-weight: bold;
    font-size: 27px;
}
/*  Horizontal TOP 1*/
#vertical-main .swiper-slide .top1-num,
#vertical-main .swiper-slide .top2-num,
#vertical-main .swiper-slide .top3-num {
    top: 513px;
    position: absolute;
    text-align: center;
    left: 18px;
    font-size: 50px;
    font-weight: bold;
    color: #85d3ff;
    width: 100px;
    overflow: hidden;
}
#vertical-main .swiper-slide .top1-party,
#vertical-main .swiper-slide .top2-party,
#vertical-main .swiper-slide .top3-party {
    top: 608px;
    position: absolute;
    text-align: right;
    left: 19px;
    font-size: 23px;
    color: #000000;
    width: 205px;
    overflow: hidden;
}
#vertical-main .swiper-slide .top1-vote,
#vertical-main .swiper-slide .top2-vote,
#vertical-main .swiper-slide .top3-vote {
    position: absolute;
    top: 583px;
    left: 244px;
    width: 187px;
    font-size: 44px;
    font-weight: bold;
    color: #ff7404;
    text-align: right;
    overflow: hidden;
}
#vertical-main .swiper-slide .top1-fullname,
#vertical-main .swiper-slide .top2-fullname,
#vertical-main .swiper-slide .top3-fullname {
    top: 512px;
    position: absolute;
    color: #fff;
    font-size: 23px;
    left: 139px;
    width: 306px;
    overflow: hidden;
}
#vertical-main .swiper-slide .top1-fullname .top1-firstname,
#vertical-main .swiper-slide .top1-fullname .top2-firstname,
#vertical-main .swiper-slide .top1-fullname .top3-firstname {
    margin-bottom: 4px;
}

/*  Horizontal Top2*/
#vertical-main .swiper-slide .top2-num {
    top: 665px;
}
#vertical-main .swiper-slide .top2-party {
    top: 761px;
}
#vertical-main .swiper-slide .top2-vote {
    top: 736px;
}
#vertical-main .swiper-slide .top2-fullname {
    top: 665px;
}
#vertical-main .swiper-slide .top2-fullname .top2-firstname {
    margin-bottom: 4px;
}

/*  Horizontal top3*/
#vertical-main .swiper-slide .top3-num {
    top: 818px;
}
#vertical-main .swiper-slide .top3-party {
    top: 914px;
}
#vertical-main .swiper-slide .top3-vote {
    top: 889px;
}
#vertical-main .swiper-slide .top3-fullname {
    top: 818px;
}
#vertical-main .swiper-slide .top3-fullname .top3-firstname {
    margin-bottom: 4px;
}


/* Horizontal */
#horizontal-main .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: 0px;
}
#horizontal-main .swiper-container .swiper-slide-prev,
#horizontal-main .swiper-container .swiper-slide-next,
#horizontal-main .swiper-container .swiper-slide {
    opacity: 0 !important;
}
#horizontal-main .swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

#horizontal-main .swiper-slide .province {
    bottom: 26px;
    position: absolute;
    left: 452px;
    color: #000;
    background: none !important;
    font-weight: bold;
    font-size: 27px;
    width: 337px;
    text-align: center;
}
/*  Horizontal TOP 1*/
#horizontal-main .swiper-slide .top1-num,
#horizontal-main .swiper-slide .top2-num,
#horizontal-main .swiper-slide .top3-num {
    bottom: 135px;
    position: absolute;
    text-align: center;
    left: 854px;
    font-size: 50px;
    font-weight: bold;
    color: #85d3ff;
    width: 110px;
    overflow: hidden;
}
#horizontal-main .swiper-slide .top1-party,
#horizontal-main .swiper-slide .top2-party,
#horizontal-main .swiper-slide .top3-party {
    bottom: 132px;
    position: absolute;
    text-align: center;
    left: 993px;
    font-size: 28px;
    color: #000000;
    width: 305px;
    overflow: hidden;
    line-height: 1.5;
}
#horizontal-main .swiper-slide .top1-vote,
#horizontal-main .swiper-slide .top2-vote,
#horizontal-main .swiper-slide .top3-vote {
    position: absolute;
    bottom: 129px;
    left: 1359px;
    width: 525px;
    font-size: 40px;
    font-weight: bold;
    color: #ff7404;
    text-align: left;
    overflow: hidden;
}
#horizontal-main .swiper-slide .top1-fullname,
#horizontal-main .swiper-slide .top2-fullname,
#horizontal-main .swiper-slide .top3-fullname {
    bottom: 183px;
    position: absolute;
    color: #fff;
    font-size: 32px;
    left: 1021px;
    width: 860px;
    overflow: hidden;
    line-height: 1.5;
}
#horizontal-main .swiper-slide .top1-fullname .top1-firstname,
#horizontal-main .swiper-slide .top1-fullname .top2-firstname,
#horizontal-main .swiper-slide .top1-fullname .top3-firstname {
    margin-bottom: 4px;
}

/*  Horizontal Top2*/
#horizontal-main .swiper-slide .top2-num {
    bottom: 20px;
}
#horizontal-main .swiper-slide .top2-party {
    bottom: 18px;
}
#horizontal-main .swiper-slide .top2-vote {
    bottom: 14px;
}
#horizontal-main .swiper-slide .top2-fullname {
    bottom: 68px;
}
#horizontal-main .swiper-slide .top2-fullname .top2-firstname {
    margin-bottom: 4px;
}


#vertical-main {
    background: url("../images/bar_online_2.png") left top no-repeat;
    width: 1920px;
    height: 1080px;
}
#horizontal-main {
    background: url("../images/bar_online_1.png") left top no-repeat;
    width: 1920px;
    height: 1080px;
}


#main {
    background: url("../images/bg_website.jpg") left top no-repeat;
    width: 100%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    background-size: cover;
}

#main_slide .swiper-container {
    width: 100%;
    height: 100%;
}

#main_slide .swiper-container .swiper-slide {
    background: url("../images/bg_vote.png") left top no-repeat;
    background-size: 100% auto;
    height: 700px;
}

#main .swiper-slide .province {
    top: 3px;
    position: absolute;
    left: 50px;
    color: #000;
    background: none !important;
    font-weight: bold;
    font-size: 27px;
    width: 356px;
    text-align: center;
}
#main .swiper-slide .top1-num,
#main .swiper-slide .top2-num,
#main .swiper-slide .top3-num {
    top: 76px;
    position: absolute;
    text-align: center;
    left: 8px;
    font-size: 40px;
    font-weight: bold;
    color: #85d3ff;
    width: 110px;
    overflow: hidden;
}
#main .swiper-slide .top2-num {
    top: 230px;
}
#main .swiper-slide .top3-num {
    top: 383px;
}

#main .swiper-slide .top1-fullname,
#main .swiper-slide .top2-fullname,
#main .swiper-slide .top3-fullname {
    top: 73px;
    position: absolute;
    color: #fff;
    font-size: 21px;
    left: 136px;
    width: 301px;
    overflow: hidden;
}
#main .swiper-slide .top2-fullname {
    top: 229px;
}
#main .swiper-slide .top3-fullname {
    top: 380px;
}
#main .swiper-slide .top1-party,
#main .swiper-slide .top2-party,
#main .swiper-slide .top3-party {
    top: 169px;
    position: absolute;
    text-align: right;
    left: 13px;
    font-size: 23px;
    color: #000000;
    width: 205px;
    overflow: hidden;
}
#main .swiper-slide .top2-party {
    top: 323px;
}
#main .swiper-slide .top3-party {
    top: 476px;
}
#main .swiper-slide .top1-vote,
#main .swiper-slide .top2-vote,
#main .swiper-slide .top3-vote {
    position: absolute;
    top: 147px;
    left: 246px;
    width: 187px;
    font-size: 35px;
    font-weight: bold;
    color: #ff7404;
    text-align: right;
    overflow: hidden;
}
#main .swiper-slide .top2-vote {
    top: 299px;
}
#main .swiper-slide .top3-vote {
    top: 452px;
}
#main .swiper-slide .top1-fullname .top1-firstname,
#main-main .swiper-slide .top1-fullname .top2-firstname,
#main .swiper-slide .top1-fullname .top3-firstname {
    margin-bottom: 2px;
}
.footer {
    background: url("../images/footer_logo.png") center top no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 66px;
}





/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 320px) {
    .container-fluid.slide-fluid {
        width: 312px;
        align-items: center;
    }
    .footer {
        height: 40px;
    }
    #main .swiper-slide .province {
        top: 1px;
        position: absolute;
        left: auto;
        color: #000;
        background: none !important;
        font-weight: bold;
        font-size: 1.2em;
        width: 100%;
        text-align: center;
        right: auto;
    }
    #main .swiper-slide .top1-num,
    #main .swiper-slide .top2-num,
    #main .swiper-slide .top3-num {
        top: 45px;
        left: 8px;
        font-size: 27px;
        width: 64px;
    }
    #main .swiper-slide .top2-num {
        top: 141px;
    }
    #main .swiper-slide .top3-num {
        top: 236px;
    }
    #main .swiper-slide .top1-fullname,
    #main .swiper-slide .top2-fullname,
    #main .swiper-slide .top3-fullname {
        top: 44px;
        font-size: 14px;
        left: 90px;
        width: 179px;
    }
    #main .swiper-slide .top2-fullname {
        top: 140px;
    }
    #main .swiper-slide .top3-fullname {
        top: 236px;
    }
    #main .swiper-slide .top1-party,
    #main .swiper-slide .top2-party,
    #main .swiper-slide .top3-party {
        top: 104px;
        left: 13px;
        font-size: 14px;
        width: 123px;
    }
    #main .swiper-slide .top2-party {
        top: 201px;
    }
    #main .swiper-slide .top3-party {
        top: 296px;
    }
    #main .swiper-slide .top1-vote,
    #main .swiper-slide .top2-vote,
    #main .swiper-slide .top3-vote {
        top: 89px;
        left: 155px;
        width: 114px;
        font-size: 24px;
        font-weight: bold;
    }
    #main .swiper-slide .top2-vote {
        top: 185px;
    }
    #main .swiper-slide .top3-vote {
        top: 280px;
    }
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (min-width: 321px) and (max-width: 575.98px) {
    .container-fluid.slide-fluid {
        width: 375px;
        align-items: center;
    }
    .footer {
        height: 40px;
    }
    #main .swiper-slide .province {
        top: 3px;
        position: absolute;
        left: auto;
        color: #000;
        background: none !important;
        font-weight: bold;
        font-size: 1.2em;
        width: 100%;
        text-align: center;
        right: auto;
    }
    #main .swiper-slide .top1-num,
    #main .swiper-slide .top2-num,
    #main .swiper-slide .top3-num {
        top: 57px;
        left: 8px;
        font-size: 32px;
        width: 79px;
    }
    #main .swiper-slide .top2-num {
        top: 173px;
    }
    #main .swiper-slide .top3-num {
        top: 290px;
    }
    #main .swiper-slide .top1-fullname,
    #main .swiper-slide .top2-fullname,
    #main .swiper-slide .top3-fullname {
        top: 55px;
        font-size: 17px;
        left: 104px;
        width: 228px;
    }
    #main .swiper-slide .top2-fullname {
        top: 172px;
    }
    #main .swiper-slide .top3-fullname {
        top: 289px;
    }
    #main .swiper-slide .top1-party,
    #main .swiper-slide .top2-party,
    #main .swiper-slide .top3-party {
        top: 129px;
        left: 9px;
        font-size: 17px;
        width: 160px;
    }
    #main .swiper-slide .top2-party {
        top: 246px;
    }
    #main .swiper-slide .top3-party {
        top: 362px;
    }
    #main .swiper-slide .top1-vote,
    #main .swiper-slide .top2-vote,
    #main .swiper-slide .top3-vote {
        top: 109px;
        left: 190px;
        width: 136px;
        font-size: 30px;
    }
    #main .swiper-slide .top2-vote {
        top: 226px;
    }
    #main .swiper-slide .top3-vote {
        top: 342px;
    }

}

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .container-fluid.slide-fluid {
        width: 480px;
        /*padding-right: 30px;*/
        /*padding-left: 30px;*/
        align-items: center;
    }
    .footer {
        height: 40px;
    }
    #main .swiper-slide .province {
        top: 3px;
        position: absolute;
        left: auto;
        color: #000;
        background: none !important;
        font-weight: bold;
        font-size: 1.7em;
        width: 100%;
        text-align: center;
        right: auto;
    }
    #main .swiper-slide .top1-num,
    #main .swiper-slide .top2-num,
    #main .swiper-slide .top3-num {
        top: 74px;
        left: 8px;
        font-size: 41px;
        width: 110px;
    }
    #main .swiper-slide .top2-num {
        top: 226px;
    }
    #main .swiper-slide .top3-num {
        top: 379px;
    }
    #main .swiper-slide .top1-fullname,
    #main .swiper-slide .top2-fullname,
    #main .swiper-slide .top3-fullname {
        top: 73px;
        font-size: 21px;
        left: 138px;
        width: 295px;
    }
    #main .swiper-slide .top2-fullname {
        top: 226px;
    }
    #main .swiper-slide .top3-fullname {
        top: 378px;
    }
    #main .swiper-slide .top1-party,
    #main .swiper-slide .top2-party,
    #main .swiper-slide .top3-party {
        top: 169px;
        left: 9px;
        font-size: 20px;
        width: 210px;
    }
    #main .swiper-slide .top2-party {
        top: 322px;
    }
    #main .swiper-slide .top3-party {
        top: 473px;
    }
    #main .swiper-slide .top1-vote,
    #main .swiper-slide .top2-vote,
    #main .swiper-slide .top3-vote {
        top: 144px;
        left: 245px;
        width: 180px;
        font-size: 36px;
    }
    #main .swiper-slide .top2-vote {
        top: 297px;
    }
    #main .swiper-slide .top3-vote {
        top: 449px;
    }
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-fluid.slide-fluid {
        width: 768px;
        align-items: center;
    }
    #main .swiper-slide .province {
        top: 3px;
        position: absolute;
        left: auto;
        color: #000;
        background: none !important;
        font-weight: bold;
        font-size: 1.3em;
        width: 100%;
        text-align: center;
        right: auto;
    }
    #main .swiper-slide .top1-num,
    #main .swiper-slide .top2-num,
    #main .swiper-slide .top3-num {
        top: 59px;
        left: 8px;
        font-size: 31px;
        width: 82px;
    }
    #main .swiper-slide .top2-num {
        top: 179px;
    }
    #main .swiper-slide .top3-num {
        top: 299px;
    }
    #main .swiper-slide .top1-fullname,
    #main .swiper-slide .top2-fullname,
    #main .swiper-slide .top3-fullname {
        top: 56px;
        font-size: 17px;
        left: 107px;
        width: 234px;
    }
    #main .swiper-slide .top2-fullname {
        top: 177px;
    }
    #main .swiper-slide .top3-fullname {
        top: 297px;
    }
    #main .swiper-slide .top1-party,
    #main .swiper-slide .top2-party,
    #main .swiper-slide .top3-party {
        top: 132px;
        left: 9px;
        font-size: 17px;
        width: 158px;
    }
    #main .swiper-slide .top2-party {
        top: 252px;
    }
    #main .swiper-slide .top3-party {
        top: 372px;
    }
    #main .swiper-slide .top1-vote,
    #main .swiper-slide .top2-vote,
    #main .swiper-slide .top3-vote {
        top: 112px;
        left: 189px;
        width: 150px;
        font-size: 30px;
    }
    #main .swiper-slide .top2-vote {
        top: 232px;
    }
    #main .swiper-slide .top3-vote {
        top: 352px;
    }

}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container-fluid.slide-fluid {
        width: 990px;
        align-items: center;
    }
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container-fluid.slide-fluid {
        width: 1200px;
        align-items: center;
    }
    #main .swiper-slide .province {
        top: 3px;
        position: absolute;
        left: auto;
        color: #000;
        background: none !important;
        font-weight: bold;
        font-size: 1.4em;
        width: 100%;
        text-align: center;
        right: auto;
    }
    #main .swiper-slide .top1-num,
    #main .swiper-slide .top2-num,
    #main .swiper-slide .top3-num {
        top: 59px;
        left: 8px;
        font-size: 35px;
        width: 87px;
    }
    #main .swiper-slide .top2-num {
        top: 185px;
    }
    #main .swiper-slide .top3-num {
        top: 310px;
    }
    #main .swiper-slide .top1-fullname,
    #main .swiper-slide .top2-fullname,
    #main .swiper-slide .top3-fullname {
        top: 59px;
        font-size: 18px;
        left: 115px;
        width: 238px;
    }
    #main .swiper-slide .top2-fullname {
        top: 185px;
    }
    #main .swiper-slide .top3-fullname {
        top: 310px;
    }
    #main .swiper-slide .top1-party,
    #main .swiper-slide .top2-party,
    #main .swiper-slide .top3-party {
        top: 139px;
        left: 9px;
        font-size: 17px;
        width: 170px;
    }
    #main .swiper-slide .top2-party {
        top: 264px;
    }
    #main .swiper-slide .top3-party {
        top: 388px;
    }
    #main .swiper-slide .top1-vote,
    #main .swiper-slide .top2-vote,
    #main .swiper-slide .top3-vote {
        top: 119px;
        left: 202px;
        width: 150px;
        font-size: 30px;
    }
    #main .swiper-slide .top2-vote {
        top: 244px;
    }
    #main .swiper-slide .top3-vote {
        top: 369px;
    }

}

@media (min-width: 1400px) {
    .container-fluid.slide-fluid {
        width: 1400px;
        align-items: center;
    }
    #main .swiper-slide .province {
        top: 3px;
        position: absolute;
        left: auto;
        color: #000;
        background: none !important;
        font-weight: bold;
        font-size: 1.6em;
        width: 100%;
        text-align: center;
        right: auto;
    }
    #main .swiper-slide .top1-num,
    #main .swiper-slide .top2-num,
    #main .swiper-slide .top3-num {
        top: 72px;
        left: 8px;
        font-size: 40px;
        width: 106px;
    }
    #main .swiper-slide .top2-num {
        top: 219px;
    }
    #main .swiper-slide .top3-num {
        top: 367px;
    }
    #main .swiper-slide .top1-fullname,
    #main .swiper-slide .top2-fullname,
    #main .swiper-slide .top3-fullname {
        top: 70px;
        font-size: 21px;
        left: 137px;
        width: 280px;
    }
    #main .swiper-slide .top2-fullname {
        top: 218px;
    }
    #main .swiper-slide .top3-fullname {
        top: 366px;
    }
    #main .swiper-slide .top1-party,
    #main .swiper-slide .top2-party,
    #main .swiper-slide .top3-party {
        top: 163px;
        left: 9px;
        font-size: 21px;
        width: 200px;
    }
    #main .swiper-slide .top2-party {
        top: 311px;
    }
    #main .swiper-slide .top3-party {
        top: 459px;
    }
    #main .swiper-slide .top1-vote,
    #main .swiper-slide .top2-vote,
    #main .swiper-slide .top3-vote {
        top: 141px;
        left: 234px;
        width: 183px;
        font-size: 33px;
    }
    #main .swiper-slide .top2-vote {
        top: 290px;
    }
    #main .swiper-slide .top3-vote {
        top: 438px;
    }

}