/* Sticky Header Style */	
body.sticky-header header {height:85px;}
body.sticky-header header .lucky-draw-banner {@include scale(0);}
body.sticky-header header nav {position:fixed;bottom:unset;top:0;}
body.sticky-header header .banner-main {display:none;}


body {margin:0;font-size:18px!important;font-family:"IBM Plex Sans Thai", sans-serif!important;@include transition(padding-top .5s ease);}
body.one-page section {padding:100px 0;}
a  {text-decoration:none!important;outline: none;-webkit-transition: all 0.5s;transition: all 0.5s;}
h1 {font-size:60px!important;color: #0088D5;font-weight:600!important;margin-bottom:0!important;}
h1 span {display: block;color:#EE7E22;}
h1 span.fzsmall {font-size:40px;line-height:1.9}
h2 {font-size:45px!important;color:#474747;font-weight:600!important;margin-bottom:0!important;}
h3 {font-size: 40px!important;color:#0088D5;font-weight:600!important;margin-bottom:0!important;}
h4 {font-size:25px!important;margin-bottom:0!important;}
/* .bg-color {background-image: url(../images/lucky-draw-color.png);background-repeat: repeat-y;background-position: center;background-size:100%;} */
/* .bg-white {background-image: url(../images/lucky-draw-white.png);background-repeat: repeat-y;background-position: center;background-size:100%;} */

/* header {
    width: 100%;
    position: relative;
    overflow: visible;
    font-family: "IBM Plex Sans Thai", sans-serif;
    @include transition(all .5s ease);
    .lucky-draw-banner {
        width: 100%;
        img {
            width:100%;
            height: auto;
        }
    }
    nav {
        position: absolute;
        bottom: -112px;
        height: 85px;
        width: 100%;
        background: #fff;
        z-index: 88;
        display: flex;
        align-items: center;
        box-shadow: rgb(0 0 0 / 16%) 0px 3px 15px 0px;
    }
    ul {
        &.desktop {
            display: flex;
            align-items: center;
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding: 30px 0;
                &:last-child {
                    border-right: 1px solid #E8E8E8;
                }
                & + li {
                    border-left: 1px solid #E8E8E8;
                }
                a {
                    font-size: 16px;
                    color: #000;
                    display: inline;
                    text-decoration: none;
                    font-weight: 600;
                    padding: 23px 20px;
                    -webkit-transition: none;
                    transition: none;
                    &.active {
                        border-bottom: 6px solid #156082
                    }
                    @include border-radius(2px);
                        &:hover {
                        @include box-shadow(0 0 0 1px #fff);
                    }
                }
            }
        }

    }
    
    .flex-btn-menu {
        display: flex;
        margin-left: auto;
        .btn-menu {
            & + .btn-menu {
                margin-left:10px;
                padding-right: 20px;
            }
            a {
                color: #fff !important;
                padding: 15px 35px;
                border-radius:30px;
                font-weight: 600;
                &.blue {
                    background: #0088D5;
                }
                &.pink {
                    background: #EA0988;
                }
                &:hover {
                    opacity: 0.8;
                    -webkit-transition: all 0.5s;
                    transition: all 0.5s;
                }
            }
        }
    }
} */


/* menu desktop */
header {width:100%;position:relative;overflow:visible;font-family: "IBM Plex Sans Thai", sans-serif;@include transition(all .5s ease);}
header .lucky-draw-banner {width:100%;}
header .lucky-draw-banner img {width:100%;height:auto;}
header nav {position:absolute;bottom:-112px;height:85px;width:100%;background:#fff;z-index:88;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-shadow: rgb(0 0 0 / 16%) 0px 3px 15px 0px;}
header ul.desktop {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;list-style:none;padding:0;margin:0;}
header ul.desktop li {padding:30px 0;}
header ul.desktop li:last-child {border-right:1px solid #E8E8E8;}
header ul.desktop li + li {border-left:1px solid #E8E8E8;}
header ul.desktop li a {font-size:18px;color: #000;display:inline;text-decoration:none;font-weight:600;padding:23px 20px;-webkit-transition:none;transition:none;}
header ul.desktop li a.active {border-bottom:6px solid #156082}
header .flex-btn-menu {display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto;}
header .flex-btn-menu .btn-menu + .btn-menu {margin-left:10px;padding-right: 20px;}
header .flex-btn-menu .btn-menu a {font-size:18px;color: #fff !important;padding: 15px 30px;border-radius:30px;font-weight:600;}
header .flex-btn-menu .btn-menu a.blue {background:#0088D5;}
header .flex-btn-menu .btn-menu a.pink {background:#EA0988;}
header .flex-btn-menu .btn-menu a:hover {opacity: 0.8;-webkit-transition: all 0.5s;transition: all 0.5s;}

/* menu responsive */
.header-burger {display:none;}
.burger-menu {display:block;width:35px;height:23px;position: relative;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: 0.25s;transition: 0.25s;cursor: pointer;opacity: 1;}
.burger-menu span {display:block;position: absolute;width: 35px;height: 3px;background: #616161;border-radius: 0;opacity: 1;left: 0;right: 0;margin-left: auto;margin-right: auto;z-index: 9;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: 0.25s ease-in-out;transition: 0.25s ease-in-out;}
.burger-menu span {background-color:#616161;}
.burger-menu span:nth-child(1) {top:0px;}
.burger-menu span:nth-child(2), .burger-menu span:nth-child(3) {top:10px;}
.burger-menu span:nth-child(4) {top:20px;}
.burger-menu:focus, .burger-menu:active, .burger-menu:visited {opacity: 1;}
.burger-menu.open span:nth-child(1) {top: 0;width: 0%;left: 0;right: 0;}
.burger-menu.open span:nth-child(2) {-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.burger-menu.open span:nth-child(3) {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.burger-menu.open span:nth-child(4) {top: 20px;width: 0%;left: 0;right: 0;}
.menu-responsive {opacity: 1;position: fixed;top: 0;left: 0;z-index: 11;width: 100%;height: 100vh;padding-top: 100px;display:none;background: url(../images/bg-main-inner.svg) no-repeat top left #F3F9FE;-webkit-transition: all 0.5s;transition: all 0.5s;}
.menu-responsive.active {opacity: 1;visibility: visible;}
.menu-responsive .content-mb {width: 100%;height: 100%;overflow: auto;text-align:center;padding-left:2%;padding-right:2%;}
.menu-responsive .content-mb ul {list-style: none;margin: 0;padding: 0;}
.menu-responsive .content-mb ul li {position: relative;padding-top: 30px}
.menu-responsive .content-mb ul li a {display: table;width: 100%;font-size: 25px;color: #000}
.menu-responsive .content-mb ul li a:hover {color:#0088D5;}




.content-1440 { width: 90%;max-width: 1440px;margin: 0 auto;}
.close-absolute {position:absolute;right:0;top:-50px}
.close-absolute a:hover {opacity: 0.8;-webkit-transition: all 0.5s;transition: all 0.5s;}
.close-absolute.top-external {top:52px;}
.box-margin-50 {margin-bottom: 50px;}
.box-margin-30 {margin-bottom: 30px;}
.content-pad {padding: 0 100px;}
.center {text-align:center;}
.col-width-100 {width:100%;}
.col-width-100 img {width:100%;}
.border-dotted {border-top:2px dotted #BFBFBF;margin-top:50px;padding-bottom:50px;width:80%;margin-left:auto;margin-right:auto;}
input[type=file].textbox {appearance: none;-moz-appearance: none;-webkit-appearance: none;outline: none;position: relative;padding-left: 25px;}
input[type=file].textbox::after {content: "อัพโหลดไฟล์";color: #fff;font-size: 14px;font-weight: 500;position: absolute;top: 0;bottom: 0;left: 0;z-index: 9;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;background: #156082;border-radius: 25px;padding: 12px 25px;;-webkit-transition: all 0.5s;transition: all 0.5s;}
input[type=file].textbox:hover::after {opacity: 0.9;color:#fff;-webkit-transition: all 0.5s;transition: all 0.5s;}
::placeholder {color: #9A9A9A!important;opacity: 1!important;}
::-ms-input-placeholder {color: #9A9A9A!important;}

#campaign {padding-top:200px;padding-bottom:100px;}
.flex-gift {margin-top:50px;display: -webkit-box;display: -ms-flexbox;display: flex;}
.flex-gift.left {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.flex-gift.left .text-gift {padding-left: 40px;} 
.flex-gift.right {-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.flex-gift.right .text-gift {padding-right: 40px;}
.flex-gift.middle {display:block;}
.flex-gift.middle .img-gift {display:block;margin:0 auto;}
.flex-gift.middle .text-gift {width:100%;margin-top:40px;}
.col-width100 {width:100%;}
.img-gift {width:50%;}
.img-gift img {width:100%;}
.text-gift {width:50%;}
#campaign .text-gift h2, #campaign .text-gift h3, #campaign .text-gift h4 {margin-bottom:50px!important}
#campaign .text-gift p {font-size:20px;color:#474747;font-weight:500;margin-bottom:0}
#campaign .text-gift p + p {margin-top:20px;}


.flex-join {display:-webkit-box;display:-ms-flexbox;display:flex;}
.flex-join.left {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.flex-join.left .text-howto {padding-left: 40px;} 
.flex-join.right {-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
.flex-join.right .text-howto {padding-right: 40px;}
.flex-join.middle {display:block;}
.flex-join.middle .img-howto {display:block;margin:0 auto;}
.flex-join.middle .text-howto {width:100%;margin-top:40px;}
.flex-join + .flex-join {margin-top:50px;}
.img-howto {width:50%;}
.img-howto img {width:100%}
.text-howto {width:50%;}
a.register-index {background:#ea0988;font-size:18px;color:#fff !important;padding:15px 30px;border-radius:30px;font-weight:600;display:inline-block}
a:hover.register-index {opacity: 0.8;-webkit-transition:all 0.5s;transition:all 0.5s;}
#reward h4 {font-size:22px!important;margin-bottom:15px!important;}
#reward p {color:#474747;margin-bottom:25px}
#reward p.red {color:#FF0000;margin-bottom:0;font-weight:500}
#reward a {color:#0088D5}

#results .main-table {overflow-x:auto;position:relative;border-radius:25px;}
#results table {text-align:center;margin-bottom:0;}
#results table thead {background:#6D8DA2;color:#fff;font-size:16px;}
#results table tbody tr {background:#fff;color:#575757;font-size:14px;}
#results table tbody tr:nth-of-type(odd) {background:#F2F2F2;}
#results table td {padding:13px 15px}
#results table tr {border-style: hidden;}
#results table tr td:first-child {border-bottom-left-radius: 25px;border-top-left-radius: 25px;}
#results table tr td:last-child {border-bottom-right-radius: 25px;border-top-right-radius: 25px;}
#results .step {font-size:18px;margin-top:50px;;margin-bottom:10px;}
#results ul, #results ol {margin-bottom:0;padding-left:20px}
#results ul li, #results ol li {color:#474747}
#results br.show1080 {display:none;}
#results .main-table.active::after {opacity: 0;visibility: hidden;}
#results.active::after {opacity: 0;visibility: hidden;}
#results .main-table::after {opacity: 0;visibility: hidden;content: "แตะ 1 ครั้ง แล้วเลื่อนดู";position: absolute;top: 0;left: 0;z-index: 8;width: 100%;height: 100%;background-image: url("../images/drag-table.svg");background-repeat: no-repeat;background-position: center 100px;background-size: 61px 75px;background-color: rgba(255, 255, 255, 0.6);font-size:25px;font-weight:500;color:#707070;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
ul, ol {margin-bottom:0;}
ul li, ol li {line-height: 1.8;color:#474747;}

#annoucement {padding:100px 0;}
#annoucement .tab-week {width:100%;background:#fff;border-radius: 10px;}
#annoucement .tab-box {border-radius: 0 0 10px 10px;padding: 50px 25px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
#annoucement .tab-box .flex-week {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
#annoucement .tab-box .flex-week .text-week {width:50%;}
#annoucement .tab-box .flex-week .img-week {width:50%}
#annoucement .tab-box .flex-week .img-week img {width:100%}
#annoucement .tab-box .flex-week .text-week h4 {margin-bottom:15px;text-align:center;}
#annoucement .tab-box .flex-week .text-week p {font-size:20px;color:#474747;text-align:center;font-weight:500;}
#annoucement .main-table {overflow-x:auto;position:relative;border-radius:25px;}
#annoucement table {width:60%;margin-left:auto;margin-right:auto;margin-top:30px;margin-bottom:0;}
#annoucement table thead {background:#A7C1DB;color:#000;font-size:16px;}
#annoucement table tbody tr {background:#F2F2F2;color:#575757;font-size:14px;}
#annoucement table tbody tr:nth-of-type(odd) {background:#fff;}
#annoucement table td {padding:13px 20px}
#annoucement table tr {border-style: hidden;}
#annoucement table tr td:first-child {border-bottom-left-radius: 25px;border-top-left-radius: 25px;}
#annoucement table tr td:last-child {text-align:right;border-bottom-right-radius: 25px;border-top-right-radius: 25px;}

#registration {padding:100px 0;}
#registration p.red {font-size:18px;color:#D44B4B;}
#registration p.info-text {font-size:20px;color:#000;font-weight:500;}
#registration .info-member {margin-top:50px;width:60%;margin-left: auto;margin-right: auto;}
#registration form .col-width-100 + .col-width-100 {margin-top:15px;}
#registration label {font-size:16px;color:#000;font-weight:500;margin-bottom:5px;}
#registration label span {font-size:14px;color:#000;}
#registration label a {font-size:14px;color:#156082;}
#registration .form-check-input {position: absolute;}
#registration .text-accept {margin-left:27px;margin-bottom:0}
#registration .form-control, #registration .form-select {border: 1px solid #DBDBDB;padding: 12px 20px;border-radius: 25px;}
#registration .flex-howto {display:-webkit-box;display:-ms-flexbox;display:flex;}
#registration .flex-howto .example {margin-left: auto;}
#registration .flex-howto .example a {font-size: 14px;color:#156082;font-weight:500;text-decoration: underline !important;}
#registration .remark {font-size:14px;color:#D44B4B;margin-top:5px;font-weight:500}
#registration .pl-remark {padding-left:145px}
#registration .regis {width:100%;font-size:18px;background:#156082;color:#fff!important;font-weight: 500;margin-top:50px;padding:12px 0;border-radius:25px;-webkit-transition: all 0.5s;transition: all 0.5s;}
#registration .regis:hover {opacity: 0.8;color:#fff;-webkit-transition: all 0.5s;transition: all 0.5s;}
#registration .box-btn-add {margin-top: 30px;text-align: center;}
#registration .btn-add {border:none;outline:none;background:transparent;font-size:14px;color:#156082;font-weight: 600;}
#RowReceipt #inputReceipt {border-top: 1px solid #156082;margin-top: 50px;padding-top: 50px;}
#registration .btn-remove {border:none;outline:none;background:transparent;color:#D44B4B;font-size: 14px;font-weight: 600;}



.content-lucky {width: 90%;max-width: 1600px;margin: 0 auto;}

/* footer */
.footer-unseal {width: 100%;padding:100px 0;background-image: url(../images/bg-footer.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;}
.content-unseal {width: 90%;max-width: 1600px;margin: 0 auto;}
.logo-center {text-align: center;}
.flex-footer img {max-width: 100%;height:auto;}
.between-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.open-chat {width:595px;height:auto;max-width:100%;}
.all-social {margin-top: 25px;}
.all-social ul {margin:0;padding:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content: center;}
.all-social ul li + li { margin-top: 0;margin-left: 8px;}
p.copyright {color: #000;font-size: 15px;margin: 20px 0 0 0;text-align:center;}
p.copyright a {color: #000;}
.all-social  ul li a img {-webkit-transition: all 0.5s;transition: all 0.5s; }
.all-social  ul li a:hover img {opacity: 0.8;-webkit-transition: all 0.5s;transition: all 0.5s;}


#history h4 {font-size:28px!important;color:#212529}
#history .text-read {font-size:28px;font-weight:500;margin:25px 0 15px 0}
.calendar-sidebar ul li {color:#fff!important}
.calendar-events>.event-header>p {font-size:30px !important;color: #8773c1!important;}
.sub-booklover {font-size:22px!important;margin-bottom:8px!important;color:#5a5a5a}
.evo-calendar, .calendar-inner {height:100%;min-height:615px}
.qty-today {font-size:25px;color:#0088D5;font-weight:600;margin-bottom:25px}
.summary-total {font-weight:500;font-size:25px;text-align:center;margin-top:50px}
.summary-total + .summary-total {margin-top:15px}
.summary-total span {color:#0088D5;font-size:35px;font-weight:bold}

@media only screen and (max-width:1600px) {
    h1 {font-size:50px!important;}
    h2 {font-size: 40px !important;}
    #campaign .text-gift h2, #campaign .text-gift h3, #campaign .text-gift h4 {margin-bottom:40px!important}
    header ul.desktop li a {font-size:16px;padding:23px 12px;}
    header .flex-btn-menu .btn-menu +.btn-menu {padding-right:10px;}
    header .flex-btn-menu .btn-menu a {padding:10px 25px;font-size: 16px;}
    header nav{position:absolute;bottom:-80px;}
    a.register-index {padding:10px 25px;font-size:16px}
}

@media only screen and (max-width:1536px) {
    body.one-page section, #annoucement, #registration {padding: 80px 0;}
    header nav {bottom:-70px;}
    #campaign {padding-top: 150px;padding-bottom:80px;}
    .close-absolute.top-external {top:30px;}
    body {font-size:16px!important}
    #reward h4, #campaign .text-gift p {font-size:18px !important;}
}

@media only screen and (max-width:1440px) {
    .footer-unseal {padding:80px 0}
    h2 {font-size: 35px!important;}
    #annoucement .tab-box .flex-week .text-week p {font-size: 18px;}
    header ul.desktop li a, header .flex-btn-menu .btn-menu a {font-size: 14px;}
}

@media only screen and (max-width:1366px) {
    .footer-unseal {padding: 60px 0;}
    body.one-page section, #annoucement, #registration {padding: 60px 0;}
    .all-social ul li a img {width: 35px;height: auto;}
    h1 {font-size: 45px!important;}
    h3 {font-size:30px!important;}
    .box-margin-30 {margin-bottom: 15px;}
    #campaign .text-gift h2, #campaign .text-gift h3, #campaign .text-gift h4 {margin-bottom:30px!important}
    #campaign {padding-top:140px;padding-bottom:60px;}
    h1 span.fzsmall {font-size: 30px}
    br.none1366 {display:none;}
    #registration p.red {font-size: 16px;}
    #registration .form-control {padding:8px 20px}
    #registration .regis {padding:8px 0}
    header  ul.desktop {display:none;}
    header  .flex-btn-menu {margin-left:0;margin-right:auto;}
    header nav {padding: 0 2%;}
    header .flex-btn-menu .btn-menu a {font-size: 16px;}
    header .flex-btn-menu .btn-menu +.btn-menu {padding-right:0;}
    .header-burger {display: block;}
    .close-absolute {top:-30px;}
    ::placeholder {font-size:14px!important;}
    ::-ms-input-placeholder {font-size:14px;color: #9A9A9A!important;}
    .content-pad {padding:0 50px}
    .summary-total {font-size:20px}
    .summary-total + .summary-total {margin-top:0}
    .summary-total span {font-size:30px}
}

@media only screen and (max-width:1280px) {
    #registration .info-member {width:80%;}
    header nav {bottom:-100px;}
    .content-pad {padding:0px}
}

@media only screen and (max-width:1180px) {
    #annoucement .content-pad {padding:0}
    #annoucement table {width: 70%;}
    #annoucement table {width: 70%;}
}
@media only screen and (max-width:1080px) {
    #results br.show1080 {display:block;}
    .content-pad {padding:0}
    .evo-calendar, .calendar-inner {min-height:auto}
}

@media only screen and (max-width:1024px) {
    #registration .info-member {width: 100%;}
    .between-footer {display: block;}
    .col-open-chat {margin-bottom:50px;text-align: center;}
}

@media only screen and (max-width:960px) {
    .flex-gift {display:block;}
    .text-gift, .img-gift {width: 100%;}
    .img-gift {margin-bottom:30px}
    #campaign br.none960 {display:none;}
    .flex-gift {margin-top: 30px;}
    .flex-gift.left .text-gift {padding-left:0}
    .flex-gift.right .text-gift {padding-right: 0;}
    .flex-join {display: block;}
    .text-howto , .img-howto {width: 100%;}
    .img-howto {margin-bottom: 30px;}
    .flex-join.left .text-howto {padding-left:0;}
    .flex-join.right .text-howto {padding-right:0;}
}

@media only screen and (max-width:820px) {
    #annoucement table {width:90%}
    #annoucement .tab-box {padding:50px;}
    br.none820 {display:none;}
}

@media only screen and (max-width:768px) {
    #results .main-table::after {opacity: 1;visibility: visible;}
    #results .main-table.active {overflow: auto;}
    #campaign .text-gift h2, #campaign .text-gift h3, #campaign .text-gift h4 {margin-top: 20px!important}
    #campaign .text-gift p + p {margin-top: 15px;}
    .box-margin-50 {margin-bottom:35px;}
    #registration .regis {margin-top:35px}
    .close-absolute a img {width:25px;}
    #annoucement .tab-box .flex-week .text-week {width: 100%;}
    #annoucement .tab-box .flex-week .img-week {width: 100%;margin-top: 60px;}
    #annoucement .tab-box .flex-week {display:block;}
    h1 span.fzsmall {line-height: 1.5;}
    h1 {font-size: 40px !important;}
    h3 {font-size: 25px !important;}
    
}

@media only screen and (max-width:736px) {
    #registration label {font-size:14px;}
    #registration .flex-howto .example {margin-bottom: 5px;}
    #registration .flex-howto .example a {font-size: 12px;}
}

@media only screen and (max-width:640px) {
    #registration .flex-howto {display:block;}
    #registration .btn-remove {margin-top:20px;}
    #RowReceipt #inputReceipt {margin-top: 40px;padding-top: 40px;}
    header nav {padding: 0 3%;}
}

@media only screen and (max-width:568px) {
    ul {padding-left: 20px;}
    .box-margin-50 {margin-bottom: 35px;}
    #registration .pl-remark {padding-left: 0;}
    h1 {font-size:35px !important;}
    h1 span.fzsmall {font-size:20px;margin-top: 10px;}
    h2 {font-size:30px!important;}
}

@media only screen and (max-width:480px) {
    #registration form .col-width-100 + .col-width-100 {margin-top: 20px;}
    #registration .regis {font-size:16px;}
}

@media only screen and (max-width:430px) {
    #annoucement .tab-box {padding: 50px 25px;}
    #annoucement table {width:100%;}
    #results .main-table::after{background-position: center 120px;}
    header .flex-btn-menu .btn-menu a {font-size:12px;padding:10px;}
    header .flex-btn-menu .btn-menu + .btn-menu {margin-left:5px;}
    .summary-total {font-size:18px}
    .summary-total span {font-size:25px}
}

@media only screen and (max-width:414px) {
    h3 {font-size: 25px!important;}
}

@media only screen and (max-width:390px) {
    #registration .form-control {padding: 8px 15px;}
    #results .main-table::after {font-size:22px;}
}

@media only screen and (max-width:375px) {
    #annoucement .tab-box {padding: 50px 15px;}
    #annoucement table td {padding: 13px 10px;}
}


@media only screen and (max-width:360px) {
    #results .main-table::after {font-size: 18px;}
    .burger-menu span {width:30px;}
}