*{
    box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
img{max-width: 100%;}

.wrappe-election {
    max-width: 768px;
    margin: 0 auto;
    position: relative;
    height: calc(var(--vh, 1vh) * 100);padding: 20px 0px 0px 0px;
}

.wrappe-election h1 {
    margin: 0;
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
}
.wrappe-election h1 span{}
.logo {
    position: fixed;top: 10px;
    left: 16px;
    background: #fff;
    z-index: 999;
}
.tabs-container {
    display: none;
}
.tabs-container.active{
    display: block;
}
.share_open {
    position: fixed;right: 16px;
    top: 16px;
    z-index: 9999;
}
.share_open img{width: 40px;
    cursor: pointer;}
.share-panel {
    position: fixed;
    top: 16px;
    right: 70px;
    background: #000;
    background-color: #000;
    padding: 10px 6px 0px 6px;
    border-radius: 4px;
    display: none;z-index: 999;
}
.live_blink{color: #d91f26;
    animation: animate 
        1.5s linear infinite;
}
@keyframes animate {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}
.share-panel.active{display: block;}
.tabs-panel ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.tabs-panel ul li{font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    list-style-type: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;transition: 0.3s background-color;
    position: relative;
    white-space: nowrap;}

    .tabs-panel ul li::after{
        content: '';
    position: absolute;
    width: 1px;
    background-color: #000;
    height: 80%;
    top: 10%;
    right: -30px;
    }
    .tabs-panel ul li:last-child:after{
            width: 0;
    }
    .tabs-panel {
        margin-top: calc(var(--vh, 1vh) * 2);
    }
    #goa .center-nav {
        bottom: 20%;
    }
    .tabs-panel ul li.active{background: #fed37c;
        background-color: #fed37c;}
        .center-nav {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 17.7%;transition: 1s transform;
            width: 100%;transform: rotate(11.6deg);
        }
        .center-nav img{width: 720px;}
        .animtaion-portion {
            height: calc(var(--vh, 1vh) * 60);
            position: relative;z-index: -1;
        }
        .center {
            position: absolute;
            bottom: 0;
            transform: translate(-50%,0);
            left: 50%;
        }
        .text-left {
            font-size: 28px;
    position: absolute;
    left: 8%;
    bottom: -14%;
    font-weight: 700;
    transform: rotate(-12deg);transition: 0.5s all;
        }
        .center img{height: 150px;}
        .text-right {
            font-size: 28px;
    position: absolute;
    right: 7%;
    font-weight: 700;
    bottom: 26%;transform: rotate(-12deg);transition: 0.5s all;
        }

        .total-seat {
            position: absolute;
            transform: translate(-50%,-50%);
            left: 50%;
            top: 40%;
            background: #ebeef1;
            background-color: #ebeef1;
            border-radius: 100%;
            width: 150px;
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .text-seat{font-size: 23px;
            text-transform: uppercase;
            line-height: 21px;
            text-align: center;
            font-weight: 600;}
            .total-seat-lg {
                font-size: 40px;
                text-transform: uppercase;
                line-height: 44px;
                text-align: center;
                font-weight: 700;
                transition: 0.5s all;
            }
            .others-story {display: flex;
                justify-content: space-evenly;
                position: absolute;
                width: 100%;
                bottom: 50px;}
            .others-story a{background: #fed37c;
                background-color: #fed37c;
                text-decoration: none;
                text-transform: uppercase;
                font-size: 14px;
                font-weight: 600;
                padding: 4px 8px;
                border-radius: 4px;
                color: #000;}
                .creadits-link{position: fixed;
                    bottom: 16px;
                    right: 17px;
                    text-decoration: underline;
                    font-size: 14px;
                    color: #000;
                    cursor: pointer;}

                    .bg-bottom {
                        position: absolute;
                        bottom: -7%;
                        z-index: -1;
                        width: 60%;
                        left: 50%;
                        transform: translate(-50%,0);
                    }
                    .logo img{max-width: 80px;}

                    .creadis-container {
                        position: fixed;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        right: 0;
                        bottom: 0;
                        justify-content: center;
                        align-items: center;
                        z-index: 999;
                        background-color: #0b0b0b69;
                        background: #0b0b0b69;
                        display: none;
                    }
                    .creadis-container.active{
                        display: flex;
                    }
                    .crd-panel {
                        position: relative;
                        background: #fff;
                        background-color: #fff;
                        padding: 40px;
                        border-radius: 4px;
                        box-shadow: 0px 1px 8px 0px #808080;
                    }
                    .close {
                        position: absolute;
                        font-size: 36px;
                        top: -10px;
                        right: -10px;
                        background-color: #ef0d0d;
                        line-height: 36px;
                        width: 40px;
                        height: 40px;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                        border-radius: 50%;
                        cursor: pointer;
                    }
                    .share-panel ul{margin: 0;
                        padding: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;}
                    .share-panel ul li{list-style-type: none;
                    }
                    .share-panel ul li img{width: 35px;}
                    .share-panel::after{
                        content: '';
                        border-left: 10px solid #000;
                        border-top: 10px solid transparent;
                        border-bottom: 10px solid transparent;
                        position: absolute;
                        right: -10px;
                        top: 10px;
                    }
                    .share-panel ul li:last-child img{
                        width: 46px;
                    }
                    .share-panel ul li:nth-of-type(1){margin-bottom: 6px;}
                    .rotation-msg{
                        display: none;
                        background-color: #333399;
                        position: fixed;
                        z-index: 9999999999;
                        width: 100%;
                        height: 100vh;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                    }
                    .rm-center{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        -webkit-transform: translate(-50%,-50%);
                        -ms-transform: translate(-50%,-50%);
                        -o-transform: translate(-50%,-50%);
                        transform: translate(-50%,-50%);
                        width: 100%;
                        max-width: 470px;
                    }
                    .rotation-img{
                        text-align: center;
                        margin-bottom: 10px;
                        display: flex;
                        justify-content: center;
                    }
                    .rotation-img img{
                        width: 150px;
                    }
                    .rm-txt{
                        text-align: center;
                    }
                    .rm-txt h5{
                        font: bold 30px/24px var(--roboto);
                    color: #fff;
                    margin-bottom: 10px;
                    width: 100%;
                    text-align: center;
                    margin-top: 20px;
                    font-weight: 400;
                    }
                    .rm-txt p{
                        font: 400 16px/21px var(--roboto);
                    color: #fff;
                    }

                    .left_name {
                        position: absolute;
    bottom: -26%;
    left: 4.4%;
    transform: rotate(-12.5deg);
    font-size: 15px;
    text-align: center;line-height: 20px;
                    }

                    .right_name {
                        position: absolute;
                        bottom: 15%;
                        transform: rotate(-12deg);
                        right: 0%;
                        font-size: 15px;
                        text-align: center;line-height: 20px;
                    }
                    #goa .text-right {
                        right: 10%;
                        bottom: 22%;
                    }
                    #goa .right_name {
                        bottom: 11%;
                        right: 2%;
                    }
                    #goa .text-left {
                        left: 16%;
                        bottom: -13%;
                    }
                    #goa .text-left {
                        left: 16%;
                        bottom: -13%;
                    }
                    #goa .left_name {
                        left: 13%;
                        bottom: -22%;
                    }
                    .left_name span,.right_name span{display: block;font-weight: 600;}
                    .total-seat-name {
                        position: absolute;
                        bottom: -30px;
                        left: 50%;
                        transform: translate(-50%,0);
                        font-size: 16px;
                    }
                    .total-seat-name span{font-weight: 600;}


                     @media screen and (max-width:1024px) and (orientation:landscape) {
        
                    .rotation-msg{
                        display: block;
                    }
                    body, html {
                        overflow: hidden;
                        background-color: #333399;
                    }
                    
                }

                @media screen and (min-width:1200px) and (max-width:1400px){
                    .animtaion-portion{width: 650px;
                        margin: 0 auto;}
                        .center-nav{bottom: 88px;}
                        .text-right{bottom: 24%;}
                        .right_name{bottom: 13%;}
                        #goa .text-right{bottom: 20%;}
                        #goa .right_name{bottom: 9%;}
                        #goa .text-left{bottom: -15%;}
                        #goa .left_name{bottom: -24%;}
                        .left_name{bottom: -25%;}
                }

                @media screen and (min-width:768px) and (max-width:1024px){
                    .text-right{bottom: 21%;}
                    .right_name{bottom: 8%;}
                }

                    @media screen and (min-width:768px) and (max-width:920px){
                        .wrappe-election{width: calc(100% - 40px);
                            max-width: 100%;}
                            .wrappe-election h1{font-size: 32px;
                                max-width: 550px;
                                text-align: center;
                                margin: 0 auto;
                               }
                                
                               
                                .move-handle {
                                    display: flex;
                                    justify-content: center;
                                }

                                .center-nav img{width: 100%;}
                                .animtaion-portion {
                                    width: 600px;
                                    margin: 0 auto;
                                }
                                .center-nav{bottom: 90px;}
                                .bg-bottom {
                                    bottom: -3%;
                                }
                                #goa .left_name{bottom: -25%;}
                                #goa .right_name{bottom: 5%;}
                                #goa .text-right {
                                    bottom: 18%;
                                }
                                #goa .text-left {
                                    bottom: -15%;
                                }
                    }

                    @media screen and (max-width:767px){
                        .wrappe-election{max-width: 100%;
                            width: calc(100% - 40px);padding: 60px 0px 0px 0px;}
                            .wrappe-election h1{font-size: 6vw;
                                line-height: 7.5vw;}
                            .wrappe-election h1 span{display: block;}
                            .logo img {
                                max-width: 60px;
                            }
                            .share_open img {
                                width: 33px;
                            }
                            .tabs-panel ul {
                                justify-content: center;
                            }
                            .tabs-panel ul li {
                                font-size: 12px;
                                margin-right: 20px;
                                padding: 4px 6px;
                            }
                            .tabs-panel ul li::after {
                                top: 20%;
                                right: -10px;
                                height: 60%;
                            }
                            .tabs-panel {
                                margin-top: calc(var(--vh, 1vh) * 3);
                                width: 100%;
                            }
                            .animtaion-portion{height: 280px;
                                width: 320px;
                                margin: 0 auto;}
                            .total-seat{width: 100px;
                                height: 100px;}
                                .text-seat {
                                    font-size: 16px;
                                    line-height: 14px;
                                }
                                .total-seat-lg {
                                    font-size: 30px;
                                    line-height: 20px;
                                    margin-top: 8px;
                                }
                                .center img {
                                    height: 87px;
                                }
                                .bg-bottom {
                                    bottom: -15px;
                                width: 250px;
                                }
                                .text-left, .text-right{font-size: 16px;}
                                .share-panel ul li img {
                                    width: 30px;
                                }
                                .share-panel ul li:last-child img {
                                    width: 38px;
                                }
                                .share-panel {
                                    right: 65px;
                                }
                               .center-nav {
                                    bottom: 58px;
                                }
                                .move-handle {
                                    display: flex;
                                    justify-content: center;
                                }
                                .crd-panel{padding: 20px;
                                    width: calc(100% - 40px);}

                                    .creadits-link {
                                        transform: translate(-50%,0);
                                        left: 50%;
                                        text-align: center;
                                    }
                                    .left_name{font-size: 12px;
                                        font-size: 12px;
    left: 6%;
    bottom: -50px;line-height: 16px;
    transform: rotate(-11.5deg);}
                                .right_name{
                                    font-size: 12px;line-height: 16px;
    bottom: -10px;
    right: 5%;
                                    
                                }
                                .text-right {
                                    bottom: 30px;
                                }
                                .text-left{
                                    bottom: -17%;
                                    left: 5%;
                                }
                                
                                #goa .right_name {
                                    bottom: -9%;
                                }
                                #goa .text-left {
                                    bottom: -17%;
                                }
                                #goa .text-right {
                                    bottom: 17%;
                                }
                                #goa .left_name{bottom: -33%;}
                                #goa .center-nav {
                                    bottom: 21%;
                                }
                                .animtaion-portion{}
                                .total-seat-name{font-size: 12px;}
                    }
                    @media screen and (max-width:340px){
                        .others-story{bottom: 35px;}
                        .creadits-link{bottom: 10px;}
                    }
                    @media screen and (max-width:320px){
                        .wrappe-election {
                            max-width: 100%;
                            width: calc(100% - 20px);
                            padding: calc(var(--vh, 1vh) * 10) 0px 0px 0px;
                            margin: 0 auto;
                        }
                        .center-nav img {
                            max-width: 280px;
                        }
                        .others-story a{font-size: 12px;}
                       
                        .center-nav {
                            bottom: 62px;
                        }
                        .text-left, .text-right {
                            font-size: 14px;
                        }
                        .logo {
                            top: 5px;
                            left: 7px;
                        }
                        .share_open {
                            right: 8px;
                            top: 9px;
                        }
                        .animtaion-portion{height: 200px;width: 280px;}
                        .text-seat {
                            font-size: 14px;
                            line-height: 12px;
                        }
                        .total-seat-lg {
                            font-size: 25px;
                            line-height: 13px;
                        }
                        .share-panel {
    right: 54px;
    top: 10px;
}


.left_name {
    font-size: 11px;
    left: 7%;
    bottom: -52px;
    transform: rotate(-11.5deg);
}
.right_name {
    font-size: 11px;
    bottom: -10px;
    right: 5%;
    transform: rotate(-11deg);
}
.text-left {
    left: 11%;
    bottom: -19%;
}
.text-left, .text-right {
    font-size: 16px;
    transform: rotate(-11deg);
}
.text-right {
    bottom: 23px;
    right: 10%;
}
#goa .left_name{bottom: -35%;}
 #goa .center-nav{bottom: 26.5%;}
.logo img {
    max-width: 50px;
}
.share_open img {
    width: 25px;
}
.wrappe-election {
    padding: calc(var(--vh, 1vh) * 8) 0px 0px 0px;
}
.tabs-panel ul li.active {
    font-size: 11px;
}
.total-seat {
    width: 70px;
    height: 70px;
}
.text-seat {
    font-size: 12px;
    line-height: 12px;
}
.total-seat-lg {
    font-size: 20px;
    line-height: 11px;
    margin-top: 4px;
}

}