@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Poppins');



    html {
    scroll-behavior: smooth;
    }




    .style-tawk {
        display: block !important;
        z-index : 100;
    }

    #style-tawk {
        display: block !important;
    }



    .style-chaport {
        display: block !important;
        z-index : 100;
    }

    #style-chaport {
        display: block !important;
    }



    body {
        overflow-x: hidden;
    }
    
    /* width */
    body::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    body::-webkit-scrollbar-track {
        background: #000;
    }

    /* Handle */
    body::-webkit-scrollbar-thumb {
        background: #53C511;
        border-radius:2px;
    }

    /* Handle on hover */
    body::-webkit-scrollbar-thumb:hover {
        background: #555;
    }




/* Display style from pages  */

	.sub-pages {
		color: #53C511;
	}

	.sub-pages-first {
		color:white;
		font-size:2.5vw;

	}

    .sub-pages-second {
		color: #53C511;
        font-size:2vw;
	}
    
	.img-pages {
		width:80%;
        height:auto;
	}

	.wrapper-img-pages {
		width:100%;
		text-align:center;
	}

	.wrapper-marque-first {
		padding-top:50px;
		width:90%;
		color:white;
        margin:auto;
        border:2px solid #53C511;
	}

    .wrapper-img-pages-second {
		width:100%;
		text-align:center;
	}
    .img-pages-second {
		width:50%;
        height:auto;
	}


    .wrapper-judul-first-pages {
		width : 100%;
		text-align:center;
	}

    .centered-judul-pages {
        width:80%;
        margin:auto;
    }


	.main-wrapper-first-pages {
		width:100%;
		background:#000;
        color:#FFFFF;
	}

    .main-wrapper-second-pages{
		background:#E5E5E5;
        width: 100%;
        height:700px;
	}

	.wrapper-left-content-pages-second {
		width:30%;
        height:550px;
		float:left;
	}

     .txt-content-pages-black {
         color:#000;

     }

    .txt-content-pages-white {
         color:#FFF;

     }


	.main-wrapper-three-pages {
		width:100%;
		height:auto;
		background:#53C511;
        border:2px solid #53C511;
	}

    .fa-slide-toogle {
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items:center;
    }



    .wrapper-fa-stylings{
        display:none;
    }


    .wrapper-button-first-pages {
        width:100%;
        text-align:center;
        padding:40px;
    }
    .btn-join-now-pages {
        border-radius: 8px;
        animation: blinks 10s infinite;  
        color:#FFF;
        border: none;
        color: white;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        width:30%;
    }





    .buttonjoinnow{
        text-decoration: none;
        font-size: 2vw;
        color:#53C511;
        width:30%;
        border: 3px solid #53C511;
        border-radius:10px;
        position: relative;
        padding:10px;
        cursor:pointer;
        background:#000;
        font-family: 'Games', sans-serif;
        text-shadow:1px 1px 4px #fff, 1px 1px 1px #53C511;
        font-style: normal;
        filter: brightness(2);
        
        
                                                
       
    }
    .buttonjoinnow::before,
    .buttonjoinnow::after{
        content:"";
        position: absolute;
        width: 40px;
        height: 40px;
        border: inherit;
        transition: all .5s;
    }
    .buttonjoinnow::before{
        top: -15px;
        left: -15px;
        border-width: 3px 0 0 3px;
       

    }
    .buttonjoinnow::after{
        bottom: -15px;
        right: -15px;
        border-width: 0 3px 3px 0;
               
    }
    .buttonjoinnow:hover::before,
    .buttonjoinnow:hover::after{
        width: calc(100% + 27px);
        height: calc(100% + 27px);
    }

@keyframes pulsate {
    
  100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #53C511,
      0 0 80px #53C511,
      0 0 90px #53C511,
      0 0 100px #53C511,
      0 0 150px #53C511;
  
  }
  
  0% {

    text-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 10px #53C511,
    0 0 45px #53C511,
    0 0 55px #53C511,
    0 0 70px #53C511,
    0 0 80px #53C511;

}
}

    @keyframes blinking{
        0%{   color: #53C511;   }
        47%{   color:#53C511; }
        62%{   color: transparent; }
        97%{   color:transparent; }
        100%{  color:#53C511;   }
    }

    @-webkit-keyframes glow {
        from {
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #53C511, 0 0 40px #53C511, 0 0 50px #53C511, 0 0 60px #53C511, 0 0 70px #53C511;
        }
        
        to {
            text-shadow: 0 0 20px #fff, 0 0 30px #53C511, 0 0 40px #53C511, 0 0 50px #53C511, 0 0 60px #53C511, 0 0 70px #53C511, 0 0 80px #53C511;
        }
    }

    @keyframes blinks{
            0% {
                background: linear-gradient(to left, #53C511, #e8e8e8);  
            }
            20% {
                 background: linear-gradient(to right, #53C511, #e8e8e8); 
            }
            40% {
                background:  #53C511;
            }
            60% {
               background: linear-gradient(to left, #53C511, #e8e8e8);  
            }
            80% {
               background: linear-gradient(to right, #53C511, #e8e8e8); 
            }
            100% {
               background:  #53C511;
            }
    }

/* Display style dekstop from header   */


    body { 
        background: #000;
        width: 100%;
        height: 100%;

    }

    .wrapper-fixed-nav {
        width: 100%;
        position: fixed;
        z-index: 100;
        top : 0;
    }

    .wrapper-nav-container { 
        width: 100%;
        background:#53C511;

    }


    .nav-logo{
        margin: auto;
        width: 50%;
        height: 80px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height: auto;
        

    }



/* Display style dekstop from first content   */

        .main-wrapper-temp-5{
            width: 100%;
            height: auto;
          
        }

        /*wrapper first content styling css */


        .wrap-first{
            width: 100%;
            height: 790px;
      
        } 
        

        .wrap-content-first {
            width: 100%;
            height: 500px;
        }


        .wrap-content-img {
            width: 100%;
            height: auto;

            background: #000;
            padding-top: 80px;
            position: relative;
        }

        .img-content-first { 
            width: 100%;
            height: 100%;
            filter: brightness(100%);
        
        }


        .wrapper-link {
            width: 100%;
            height: auto;
            clear: both;
            position: relative;
            top: 120px;

        }


        .txt-alternartif{
            position: relative;
            width: 80%;
            height: 142px;
            bottom: 600px;
            font-family: 'Audiowide';
            font-style: normal;
            font-weight: normal;
            font-size: 56px;
            line-height: 71px;
            color: #fff;
            text-align: left;
            margin: auto;
            z-index: 2;
        }

        .txt-alternartif-1{
            position: relative;
            width: 80%;
            height: 142px;
            bottom: 545px;
            font-family: 'Audiowide';
            font-style: normal;
            font-weight: normal;
            font-size: 4vw;
            line-height: 71px;
            color: #fff;
            text-align: left;
            margin: auto;
            z-index: 2;
        }


        
        .txt-alternartif-1-cust-sport{
            position: relative;
            width: 80%;
            height: 142px;
            bottom: 545px;
            font-family: 'Audiowide';
            font-style: normal;
            font-weight: normal;
            font-size: 4vw;
            line-height: 71px;
            color: #fff;
            text-align: left;
            margin: auto;
            z-index: 2;
        }



        .wrapper-txt-link {
            width: 100%;
            height: 200px;
            position: relative;
            bottom: 457px;

        }

        .content-txt-link {
            width: 80%;
            margin: auto;
            height: 100px;

        }





        .wrapper-text-content-info {
            color:#FFF;
            padding-right: 22px;
            padding-left: 22px;
            padding-bottom: 20px;
            text-align:left;
        }

        .style-text-link-content {
            color:#53C511;
            text-decoration: none; 
            filter: brightness(2);
        }

         .style-text-link-content:hover{
             text-shadow:1px 1px 1px #fff, 1px 1px 1px #53C511;
              filter: brightness(1.75);
         }
        .txt-24{
            width: 100%;
            height: 24px;
            color: #fff;
            font-weight: 500;
            font-family: 'Lato';
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
        }
        .txt-link{
            width: 136px;
            height: 19px;
            color: #fff;
            font-family: 'Lato';
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
        }


        .wrapper-main-link {
            width: 100%;
            height: 200px;
            position: relative;
            bottom: 550px;

        }


        .wrap-link-1 {
            width: 100%;
            margin: 0;
            text-align: center;
        }


        .wrap-link-1:after {
            /* content: ""; */
            display: table;
            clear: both;
        }
        

        .wrap-link-2 {
            width: 100%;
            margin: 0 ;
            text-align: center;
            padding-top: 30px;
        }


        .wrapper-card { 
            width: 80%;
            margin: auto;
            display: flex;
            text-align: justify;
        }


        
        .wrap-card-content {
            float: left;
            width: 30%;
            padding: 0 8px;
        }

        
        
        .card {
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                text-align: center;
                background: rgba(255, 255, 255, 0.24);
                border-radius: 12px;
                width:100%;
                cursor:pointer;
                color:#fff;
                backdrop-filter: brightness(300%);
                outline: none;
                height:55px;
                border:none;


            }

            .card:hover{
                position: relative;
                bottom: 15px;
                background:#53C511;
                opacity: 2;
                text-decoration: none;
            }

            .wrapper-split-link { 
                width:100%;
                height:55px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .wrapper-left-icon {
                width:19%;
                height:50px;
                float:left;
                display: flex;
                justify-content: center;
                align-items: center;


            }
            .wrapper-right-link {
                width:80%;
                height:50px;
                float:right;
                display: flex;
                align-items: center;
   
     
            }
            .link-brand{
                font-size:1vw;
                color: #fff;
                text-decoration: none;
                display: flex;
                -webkit-justify-content: center;
                -webkit-align-items: center;
                display: flex;
            }

                
            .link-brand:hover{
                text-decoration: none;
                color: #fff;
            }



            .wrap-content-second { 
                width: 75%;
                height:auto;
                background: rgba(255, 255, 255, 0.12);
                backdrop-filter: blur(32px);
                /* Note: backdrop-filter has minimal browser support */
                border-radius: 10px;
                margin: auto;
                opacity: 1;
                position: relative;
                bottom: 100px;
                font-family: 'Lato', sans-serif;
                font-weight: 400;
            }




            .wrap-judul-text-content-link {
                width: 100%;
                height:80px;
                
            }

            .content-link-left { 
                color: #FFF;
                text-align: left;
                height:80px;
                width:47.9%;
                 float: left;
                 
            }

            .border-corners { 
                box-shadow: -2px -2px 2px #53C511;
                border-radius:10px;
                filter: brightness(2);
            }



            .content-link-right { 
                width: 47.9%;
                height:80px;
                float: right;
                color: #62BB46;
                text-align: right;
            }

            .txt-content-link-left { 
                /* font-family: 'Lato'; */
                font-style: normal;
                font-weight: 900;
                letter-spacing: 0.02em;
                font-size: 18px;
                text-transform: capitalize;
            

            }


            .wrapper-txt-content-second-right { 
                width: 100%;
                font-size: 50px;
                padding-right: 22px;
                position: relative;
                top: 15px;
            }

            .txt-content-link-right{
                /* font-family: 'Lato'; */
                font-style: normal;
                /* letter-spacing: 0.02em; */
                text-transform: capitalize;
                font-weight: bold;
                font-size: 16px;
                color: #fff;
            }


            .none-res-link {
                display: none;
            }

            .wrap-content-page-second {
                width: 100%;
            }


            .txt-content-page-second{
                color: #fff;
                text-align: left;
                padding-right: 22px;
                padding-left: 22px;
                /* padding-top: 100px; */
                padding-bottom: 20px;
            }

            
            .wrapper-txt-content-second-left { 
                width: 100%;
                position: relative;
                top: 15px;
                padding-left: 22px;

            }




/* Display style dekstop from footer   */

        .wrapper-footer{
            width: 100%;
            height: 530px;
            bottom: 0;

    }



        .item-pages {
            list-style: none;
            color: #666;
            font-family: verdana;
            font-size: 1vw;
            text-decoration: none;
            text-transform: uppercase;
        }

        .txt-jdl-toogle {
            color: #797a77;
            font-size: 1vw;
            text-align: right; 
        }

        .main-wrapper-footer { 
            width: 100%;
           height: 330px;
            clear: both;
            background: #000;
            /* min-height: 415px; */
     }



        .wrap-center-footer { 
            width: 100%;
     }

        .wrap-content-left-footer { 
            width: 49%;
            float: left;   
     }





     .wrap-content-right-footer {
            width: 49%;
            float: right;         
     }


     .content-footer-left-wrapper { 
         width: 80%;
         margin: auto;
         padding-top: 20px;
     }

     .wrap-img-logo-footer {
         width: 100%;
         margin: auto;
         padding-top: 20px;
     }

     .content-img-footer-logo { 
         width: 30%;
         height: 30%;
     }


     
     .wrap-content-text-footer {
         width: 100%;
         padding-top: 30px;
         text-align: left;
         font-family : 'Lato';
         line-height: 24px;
     }

    .wrap-footer-icon { 
         width: 50%;
         padding-top: 15px;
         padding-bottom: 15px;
     }

    .left-icon-footer{
         width: 60%;
         float: left;
         clear:both;
         padding-left:5%;
         position:relative;
         top:-23px;
     }


    .wrapper-centered-icon-footer {
        width:100%;
    }
    .content-img-icon-footer { 
        width: 49%;
        height: auto;
     }



     .txt-footer-lefts {
        color:white;;
        font-weight: 300;
     }

    .content-footer-right-wrapper {
        width: 80%;
        margin: auto;
        padding-top: 20px;
     }

    .wrapper-judul-footer-right {
        width: 100%;
        margin: auto;
        padding-top: 20px;
       
     }


    .txt-jdl-footer {
        color: #797a77;
        font-size: 1vw;
        text-align: left;
    }

    .wrapper-ctr-footer{
         width: 100%;
         height: 100px;
     }


     .txt-judul-footer-right {
         font-weight: bold;
         color: #fff;
         font-family: 'Lato';
         text-transform: uppercase;
         font-size: 1.5vw;
         position: relative;
         top: -37px;

     }


    .wrap-content-text-footer-right {
        width: 100%;
        font-family : 'Lato';
        line-height: 24px;

        
    }


    .tele-icon {
        width:44%;    
    }
     .wrapper-icon-sosmed-footer { 
         width: 100%;
         height: 60px;
         padding-top: 10px;
     }

    .right-icon-footer{
        width: 100%;
        float: right;
        position: relative;
        top: 20px;
    }

     .wrapper-center-footer{
         width: 100%;
         height: 30px;
     }

     
    .wrapper-image-card { 
        padding-top: 55px;
        width: 30%;
        margin: auto;
        text-align: center;
    }


     .wrapper-icon-fixed {
         width: 100%;
         height: 30px;
         text-align: center;
         /* float: none; */
     }

     .wrapper-text-fixed {
         width: 100%;
         height: 30px;
         text-align: center;
         position: relative;
         top: -20px;
     }

     .icon-sosmed { 
        width: 20%;
        float: left;
        text-align: right;
        margin: auto;
     }

    .icon-hov:hover{
            opacity: 0.5;
            position: relative;
            bottom: 10px;
    }

    .wrapper-jdl-ajukan {
        position: relative;
        top: 0px;
        padding-top:30px;
    }

     .fa-twt{
        font-size:22px;
        color:#1DA1F2
     }


     .wrapper-text-content-footer-right { 
         width: 100%;
     }

     .txt-content-footer-right { 
        width: 100%;
       
        padding-top: 30px;
        text-align: justify;
        font-family : 'Lato';
        line-height: 24px
     }


    .style-circle-footer:hover { 
        transform: translateY(-5px);
        opacity: 0.5;
    }

    .style-circle-footer {
        height: 50px;
        width: 50px;
        background-color: #050929;
        border-radius: 50%;
        display: inline-block;
        position: relative ;
    }
    .style-circle-footer i {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }
        
        
    .icn-style{
        font-size: 30px;
        background: #050929;
    }

     .wrapper-copy-right{
         text-align:center;
         
         bottom:0;

        position: relative;
        top: -15px;
        margin: auto;
        width: 50%;
     }



    .wrapper-content-copy-right {
        width:100%;
        text-align:center;
        margin:auto;
    }



     .txt-ctn-cpy {
         color:white;
     }
     

     .wrapper-change-copy-right {
         display: none;
         
     }

     .txt-content-copyright { 
         color: #797a77;
         font-family: 'Lato';
         font-size: 10.5px;
     }


     .txt-content-copyright-1 { 
        color: #797a77;
        font-family: 'Lato';
        font-size: 10.5px;
    }



    .wrapp-content-panduan{
         width: 100%;
         height: 50px;
         position: relative;
         top: 20px;
     }

    .wrapper-center-panduan {
         width: 100%;
         height: 40px;
     }


    .wrapper-float-right-footer {
        width: 33.3%;
        height: 50px;
        float: left;
     }

    .wrapper-txt-footer-cara {
         width: 70%;
         float: right;
         
     }

    .txt-footer-right {
        color: #fff;
        font-weight: 900;
        text-decoration: none;
        cursor: pointer;
        font-size: 1vw;
        font-family: 'Lato';
     }

     .txt-footer-right:hover {
        color: #53C511;
        text-decoration: none;
        cursor: pointer;
        filter: brightness(1.75);

     }

    .wrapper-icon-footer-cara {
         width: 49%;
         text-align: center;
        
     }

    .icon-cara {
        width: 16%;
    }

    .border-ctr-cara {
         border-left: 2px solid #797a77;
         border-right: 2px solid #797a77;
         height: 25px;
     }


    .wraper-content-copy-right {
        position: relative;
        top: 17px;
        width: 103%;
    }



    .wrapper-fixed-footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        color: white;
        text-align: center;
        z-index: 100;
        display: none;
     }

    .wrapper-fixed-footer-mobile {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        color: white;
        text-align: center;
        z-index: 100;
        display: none;
     }


         
     .wrapper-slice-footer-fixed {
        width: 33.3%;
        float: left;
        border-radius: 10px;
        height: 35px;
        
     }


     .wrapper-slice-footer-fixed-mobile {
        width: 25%;
        float: left;
        border-radius: 10px;
        height: 35px;
        

     }


      .wrap-text-link { 
        
         background: #53C511;
         display: block;
         justify-content: center;
         align-items: center;
         height: 70px;
         padding-top: 10px;
         cursor: pointer;
         position: relative;
         top: -25px;
       
        
         
     }

     .wrap-text-link:hover {
         position: relative;
         bottom: 10px;
         background: linear-gradient(to right,  #53C511 , #bfbfbf);
     }


    .txt-link-featured {
         color: #fff;
         font-size: 0.9vw;
         text-decoration: none;
         font-family: 'Lato';
         margin: auto;
         width: 100%;
         text-align: center;
         text-transform: uppercase;
     }



     .txt-link-featured:hover{
         color: #fff;
     }


    .txt-content-copyright { 
         color: #797a77;
         font-family: 'Lato';
         font-size: 10.5px;
     }


    .wrapper-change-copy-right {
        display: none;
    }



/* Display style dekstop from featured   */


    .wrap-for{
        width: 100%;
        height: 830px;
        background: #53C511;
        border:2px solid #53C511;
    }




    .card-content-featured
    {
        display:inline-block;
        width: 100%;
        height: 335px;
        backdrop-filter: brightness(85%);
        color: #fff;
        border-radius: 25px;
        margin: 10px;
        transition: 0.5s;
    }


    .card-content-featured:before{
        display:inline-block;
        content: '';
        backdrop-filter: brightness(85%);
        -webkit-backdrop-filter: brightness(85%);
        position: absolute;
        width: 100%;
        height: 335px;
        border-radius: 25px;
        transition: 0.5s;
        align-item:center;
        justify-content:center;
        
    }

        .wrapper-page-featured{
            width: 100%;
            height: auto;
            clear: both;
            z-index: 80;
            
        }


        .main-wrapper-content-m5-featured { 
            width: 100%;
            height: 400px;
            position: relative;
            top: -10px;
            z-index: 95;
            
        }


        .wrapper-content-m5-featured { 
            width: 100%;
            margin: auto;
            position: relative;
            top: 142px;

        }

        
        .wrapper-content-m5-featured:after {
            content: "";
            display: table;
            clear: both;
        }

   
        .wrapper-index-featured-dekstop {
            width: 100%;
            text-align: center;
            position: relative;
            top: -50px;
         }


         .txt-judul-centered-featured {
            color: #fff;
            text-align: center;
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            font-style: normal;
            letter-spacing: 0.02em;
            font-size: 34px;
            line-height: 31px;
            text-transform: uppercase;
            
        }


        .column-wrapper-featured { 
            float: left;
            width: 24.7%;
            padding: 0 10px;
        }



        .card-content-featured:hover{
            /* background: #fff; */
            /* color: #62BB46; */
            color: #fff;
            transform: translateY(-50px);
        }



        .wrapper-card-img-featured { 
            width: 100%;
            margin: auto;
            text-align: center;
            padding-top: 20px;
            
        
        }


        
        .content-img-featured { 
            width: 50%;
            height: 70px;
            border-radius: 10px;
        }

        .wrapper-judul-featured { 
            width: 100%;
            padding-top: 10px;
            text-align: center;
        }

        .txt-judul-featured { 
            font-size: 1.1vw;
            font-weight: bold;
            /* color: #fff; */
            text-transform: uppercase;
        }


        .main-wrapper-text-content-featured {
            width: 100%;
        }


            
        .txt-content-featured { 
            /* color: #fff; */
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            padding-bottom: 40px;
            font-family: 'Lato', sans-serif;
            font-weight: 400;
        }


        .icons-featured {
            width: 100%;
            display: none;
            position: relative;
            bottom: 280px;
        }


        .prevnext-featured{
            display: none;
            clear: both;
        }

        .wrapper-prevnext-benefit {
            display:none;
        }


        .next-ben, .prev-ben{ 
             display:none;
        }



/* Display Slider style  from featured   */
      
        * {box-sizing: border-box;}
        body {font-family: Verdana, sans-serif;}
        .mySlides {display: none;}
        img {vertical-align: middle;}

        /* Slideshow container */
        .slideshow-container-featured {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        /* Caption text */
        .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
        }

        /* The dots/bullets/indicators */
        .dot-fea {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        }

        .active-fea {
        background-color: #717171;
        }

        /* Fading animation */
        .fade-fea {
        animation-name: fade-fea;
        animation-duration: 1.5s;
        }

        @keyframes fade-fea {
        from {opacity: .4} 
        to {opacity: 1}
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
        .text {font-size: 11px}
        }
        



/* Display style dekstop from benefit   */

    .wrap-three{
            width: 100%;
            height: 1300px;
            background: #E5E5E5;
    }


    .wrapper-benefit {
        width: 100%;
        height: 650px;
    }
    .wrapper-page-benefit{
        width: 100%;
        height: auto;
        clear: both;
        z-index: 80;
        
    }


    .wrapper-index-benefit{
        position:relative;
        top:-25px;
    }



    .card-content {
        display:inline-block;
        background: #FFFFFF;
        border-radius: 25px;
        margin: 10px;
        width: 100%;
        height: auto;
        box-shadow: 0px 20px 50px #000;
    }


    .wrapper-card-img-benefit { 
        width: 100%;
        margin: auto;
        text-align: center;
        padding-top: 20px;
    }

    .content-img-benefit { 
        width: 90%;
        height: 240px;
        border-radius: 10px;
    }

    .wrapper-judul-benefit { 
        width: 100%;
        padding-top: 10px;
        text-align: center;
    }

    .txt-judul-benefit { 
        font-size: 14px;
        font-weight: bold;
        color: black;
        text-transform: uppercase;
        font-family: 'Lato';
    }

    

    .main-wrapper-text-content-benefit {
        width: 100%;
        
    }

    .wrapper-text-content-benefit{
        width: 90%;
        float: left;
        padding-left: 20px;
        padding-top: 18px;
        
    }

    .txt-content-benefit { 
        color: black;
        font-size: 1.2vw;
        font-family: 'Lato';
        font-weight: 400;
    }



    .wrapper-icon-content-benefit { 
        padding-top: 70px;
        text-align: right;
        padding-right: 10px;
        
    }

    
        .style-circle:hover { 
            transform: translateY(-5px);
            opacity: 0.5;
        }

        .style-circle {
            height: 50px;
            width: 50px;
            background-color: #53C511;
            border-radius: 50%;
            display: inline-block;
            position: relative ;
        }
        .style-circle i {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            color: #fff;
        }






    .main-wrapper-content-m5-benefit { 
        width: 100%;
        height: 400px;
        position: relative;
        top: -100px;
        z-index: 95;
        
    }


    .wrapper-content-m5-benefit { 
        width: 100%;
        margin: auto;
        position: relative;
        top: 142px;
    }

    
    .wrapper-content-m5-benefit:after {
        content: "";
        display: table;
        clear: both;
    }


    .wrapper-index-benefit-dekstop {
        width: 100%;
        text-align: center;
        position: relative;
        top: -50px;
     }


     .txt-judul-centered-benefit {
        color: #000;
        text-align: center;
 
        font-style: normal;
        letter-spacing: 0.02em;
        font-size: 34px;
        line-height: 31px;
        text-transform: uppercase;

        font-family: 'Lato', sans-serif;
        font-weight: 400;
        
    }


    .column-wrapper-benefit { 
        float: left;
        width: 33%;
        padding: 0 10px;
    }



    .card-content-benefit:hover{
        /* background: #fff; */
        /* color: #62BB46; */
        color: #fff;
        transform: translateY(-50px);
    }



    .wrapper-card-img-benefit { 
        width: 100%;
        margin: auto;
        text-align: center;
        padding-top: 20px;
    
    }


    
    .content-img-benefit { 
        width: 80%;
        height: auto;
        border-radius: 10px;
    }

    .wrapper-judul-benefit { 
        width: 100%;
        padding-top: 10px;
        text-align: center;
    }

    .txt-judul-benefit { 
        font-size: 1.1vw;
        font-weight: bold;
        /* color: #fff; */
        text-transform: uppercase;
    }


    .main-wrapper-text-content-benefit {
        width: 100%;
    }


        
    .txt-content-benefit { 
        /* color: #fff; */
        padding-top: 10px;
        padding-left: 20px;
        text-align: center;
    }


    .icons-benefit {
        width: 100%;
        display: none;
        position: relative;
        bottom: 280px;
    }

    .dot-res-ben{
        display: none;
    }

/* Display Slider style  from benefit  */

        * {box-sizing: border-box}
       body {font-family: Verdana, sans-serif; margin:0}
       .mySlidesFea {display: none}
       img {vertical-align: middle;}
       
       /* Slideshow container */
       .slideshow-container-benefit {
         max-width: 1000px;
         position: relative;
         margin: auto;
       }
       
       /* Next & previous buttons */
       .next-ben {
            cursor: pointer;
            position: absolute;
            top: 42%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 50px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
       }

       .prev-ben{

            cursor: pointer;
            position: absolute;
            top: 42%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 50px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;

       }
       
       /* Position the "next-fea button" to the right */
        .next-ben {
        right: 0;
        border-radius: 3px 0 0 3px;
        }
       
       /* On hover, add a black background color with a little bit see-through */
       .prev-ben:hover, .next-ben:hover {
         background-color: #fff;
         color: #53C511;
       }
       
       /* Caption text */
       .text {
         color: #f2f2f2;
         font-size: 15px;
         padding: 8px 12px;
         position: absolute;
         bottom: 8px;
         width: 100%;
         text-align: center;
       }
       
       /* Number text (1/3 etc) */
       .numbertext {
         color: #f2f2f2;
         font-size: 12px;
         padding: 8px 12px;
         position: absolute;
         top: 0;
       }
       
       /* The dots/bullets/indicators */
       .dot-ben {
         cursor: pointer;
         height: 15px;
         width: 15px;
         margin: 0 2px;
         background-color: #bbb;
         border-radius: 50%;
         display: inline-block;
         transition: background-color 0.6s ease;
       }
       
       .active-ben, .dot-ben:hover {
         background-color: #717171;
       }
       
       /* Fading animation */
       .fade-ben {
         -webkit-animation-name: fade-ben;
         -webkit-animation-duration: 1.5s;
         animation-name: fade-ben;
         animation-duration: 1.5s;
       }
       
       @-webkit-keyframes fade-ben {
         from {opacity: .4} 
         to {opacity: 1}
       }
       
       @keyframes fade-ben {
         from {opacity: .4} 
         to {opacity: 1}
       }
       
       /* On smaller screens, decrease text size */
       @media only screen and (max-width: 300px) {
         .prev-ben, .next-ben,.text {font-size: 11px}
       }



/* Display style dekstop from event   */


        .wrapper-event {
            width: 100%;
            height: 650px;
        }
    

        .card-content-iframe{
            display:inline-block;
            /* background: #E5E5E5; */
            border-radius: 12px;
            margin: 10px;
            width: 100%;
            height: auto;
        }


        .wrapper-content-iframe { 
            width: 100%;
            margin: auto;

        }
        
        
        .content-iframe-event {
            border-radius: 35px;
            border: 2px solid #53C511;
        }




        .wrapper-page-event{
            width: 100%;
            height: auto;
            clear: both;
            z-index: 80;
            
        }



        .wrapper-index-event{
            position:relative;
            top:-65px;
        }
    
        .main-wrapper-content-m5-event { 
            width: 100%;
            height: 400px;
            position: relative;
            top: -10px;
            z-index: 95;
            
        }
    
    
        .wrapper-content-m5-event { 
            width: 100%;
            margin: auto;
            position: relative;
            top: 142px;
        }
    
        
        .wrapper-content-m5-event:after {
            content: "";
            display: table;
            clear: both;
        }
    
    
        .wrapper-index-event-dekstop {
            width: 100%;
            text-align: center;
            position: relative;
            top: -50px;
         }
    
    
         .txt-judul-centered-event {
            color: #000;
            text-align: center;
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            font-style: normal;
            letter-spacing: 0.02em;
            font-size: 34px;
            line-height: 31px;
            text-transform: uppercase;
            
        }
    
        .span-custome {
            color:#53C511;
        }

        .column-wrapper-event { 
            float: left;
            width: 33.1%;
            padding: 0 10px;
            z-index:98;
        }
    
    
    
    
        .icons-event {
            width: 100%;
            display: none;
            position: relative;
            bottom: 280px;
        }
    
        .wrapper-img-comming-soon {
            width:100%;
            height:auto;
            justify-content:center;
            display:flex;
            align-items:center; 
        }
    
        .item-img-commingsoon {
            width:80%;
            border:2px solid #53C511;
            border-radius:20px;
            box-shadow: 2px 10px 25px #898989;
        }


        .item-link-comming-soon-mbl{
                justify-content: center;
                align-items: center;
                display: flex;
        }

        .item-img-commingsoon:hover {
            position:relative;
            bottom:20px;
        }
    
        .dot-res-event{
            display: none;
        }


/* Display Slider style dekstop from event   */

    * {box-sizing: border-box}
       body {font-family: Verdana, sans-serif; margin:0}
       .mySlidesEvent {display: none}
       img {vertical-align: middle;}
       
       /* Slideshow container */
       .slideshow-container-event {
         max-width: 1000px;
         position: relative;
         margin: auto;
       }
       
    
        /* Next & previous buttons */
        .next-event {
            cursor: pointer;
            position: absolute;
            top: 38%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 50px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
       }

       .prev-event{

            cursor: pointer;
            position: absolute;
            top: 38%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 50px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;

       }

       
       /* Position the "next-event button" to the right */
       .next-event {
         right: 0;
         border-radius: 3px 0 0 3px;
       }

        /* On hover, add a black background color with a little bit see-through */
        .prev-event:hover, .next-event:hover {
            background-color:#53C511;
            color: #fff;
        }
       
       /* Caption text */
       .text {
         color: #f2f2f2;
         font-size: 15px;
         padding: 8px 12px;
         position: absolute;
         bottom: 8px;
         width: 100%;
         text-align: center;
       }
       
       /* Number text (1/3 etc) */
       .numbertext {
         color: #f2f2f2;
         font-size: 12px;
         padding: 8px 12px;
         position: absolute;
         top: 0;
       }
       
       /* The dots/bullets/indicators */
       .dot-event {
         cursor: pointer;
         height: 15px;
         width: 15px;
         margin: 0 2px;
         background-color: #bbb;
         border-radius: 50%;
         display: inline-block;
         transition: background-color 0.6s ease;
       }
       
       .active-event, .dot-event:hover {
         background-color: #717171;
       }
       
       /* Fading animation */
       .fade-event {
         -webkit-animation-name: fade-event;
         -webkit-animation-duration: 1.5s;
         animation-name: fade-event;
         animation-duration: 1.5s;
       }
       
       @-webkit-keyframes fade-event {
         from {opacity: .4} 
         to {opacity: 1}
       }
       
       @keyframes fade-event {
         from {opacity: .4} 
         to {opacity: 1}
       }



@media screen and (max-width: 5600px)   {

/* Display style mobile 5200 from pages   */
    .img-pages-second {
        width: 19%;
        height: auto;
    }


    .img-pages {
        width: 40%;
        height: auto;
    }



/* Display style mobile 5200 from footer   */ 
    .tele-icon {
        width: 15%;
    }

/* Display style mobile 5200 from content first   */ 

    .wrap-first {
        height: 1824px;
    }
    .wrapper-link {
        top: -747px;
    }

    .wrapper-main-link {
        bottom : 1276px;
    }

    .wrapper-txt-link {
        bottom:1310px;
    }


 /* Display style mobile 5200 from content second   */ 
    .wrap-second {
        height:1830px;
    }

/* Display style mobile 5200 from content three   */ 
    .wrap-three {
        height:2300px;
    }

/* Display style mobile 5200 from content three   */ 
    .wrap-for {
        height:1030px;
    }



}

@media screen and (max-width: 3080px)   { 

/* Display style mobile 3080 from footer   */
    .tele-icon {
        width: 20%;
    }

}


@media screen and (max-width: 2500px)   { 

/* Display style mobile 2500 from footer   */
    .tele-icon {
        width: 26%;
    }

/* Display style mobile 2500 from content first   */
    .wrapper-link {
        top: 120px;
    }

    .wrapper-txt-link {
        bottom:390px;
    }

    .wrapper-main-link {
        bottom:480px;
    }

    .wrap-first {
        height: 1124px;
    }


/* Display style mobile 2500 from content three   */
    .wrap-three {
        height: 1700px;
    }
}



@media screen and (max-width: 2200px)   { 

/* Display style mobile 2200 from pages   */
    .img-pages-second {
        width: 23%;
        height: auto;
    }


/* Display style mobile 2200 from footer   */
    .tele-icon {
        width: 30%;
    }




}



@media screen and (max-width: 1800px)   { 

/* Display style mobile 1800 from footer   */
    .tele-icon {
        width: 35%;
    }

}



@media screen and (max-width: 1550px)   { 

/* Display style mobile 1550 from pages   */

/* Display style mobile 1550 from footer   */
    .tele-icon {
        width: 42%;
    }

/* Display style mobile 1550 from content first   */ 

    .wrap-first {
        height: 724px;
    }
    .wrapper-link {
        top: 115px;
    }

    .wrapper-main-link {
        bottom : 580px;
    }

    .wrapper-txt-link {
        bottom: 480px;
    }

/* Display style mobile 1550 from three  */ 

    .wrap-three {
        height: 1350px;
    }

/* Display style mobile 1550 from for  */ 

    .wrap-for {
        height: 730px;
    }

/* Display style mobile 1550 from pages  */ 
    .img-pages {
        width:80%;
    }

    .img-pages-second {
        width:45%;
    }

}


@media screen and (max-width: 1300px)   { 

/* Display style mobile 1300 from footer   */
    .tele-icon {
        width: 51%;
    }

/* Display style mobile 1300 from first   */
    .wrapper-main-link {
        bottom: 510px;
    }

    .wrapper-txt-link {
        bottom: 415px;
    }

    .wrapper-link {
        top: 180px;
    }
}


@media screen and (max-width: 1200px)   { 

/* Display style mobile 1200 from footer   */
    .tele-icon {
        width: 55%;
    }

}


@media screen and (max-width: 1050px)   { 

/* Display style mobile 1050 from footer   */
    .tele-icon {
        width: 63%;
    }

/* Display style mobile 1050 from content first   */

    .wrapper-txt-link {
        bottom: 340px;
    }

    .wrapper-main-link {
        bottom: 425px;
    }

    .wrapper-link {
        top: 250px;
    }

/* Display style mobile 1050 from second   */
    .wrapper-image-card {
        width: 30%;
    }
}





@media screen and (max-width: 895px)  {

/* Display style mobile 895 from first content   */




     .img-content-first {
                width: 100%;
                height: auto;
            }

            .wrapper-link {
                position: relative;
                top: 280px;
            }

            .wrapper-txt-link {
                position: relative;
                bottom: 250px;
            }

            .txt-24{
                position: relative;
                top: -55px;
            }

            .txt-link{
                position: relative;
                top: -45px;
            }


            .wrapper-main-link {
                position: relative;
                bottom: 402px;
            }

            .wrap-card-content {
                width: 50%;
            }


            .link-brand {
                font-size: 1.8vw;
            }
     

/* Display style mobile 895 from footer   */

        .txt-jdl-footer {
            font-size: 1.5vw;
        }

        .txt-jdl-toogle {
            font-size: 1.5vw;
        }

        .item-pages {
            font-size: 1.5vw;
         }

        .tele-icon {
            width: 70%;
        }


/* Display style mobile 895 from featured   */

        .wrapper-page-featured {
            position: relative;
            top: -880px;
            height: 38px;
        }

        .resslide-featured{
            width: 100%;
            clear: both;
            position: relative;
            top:400px;
            height:10px;
        }

        .content-dekstop-featured {display: none;}

        .txt-judul-centered-featured {
            font-size: 28px;
        }


        .column-wrapper-featured {
            width: 100%;
            position: relative;
            top: -45px;
            padding: 0px;
        }



        .txt-judul-featured{
            font-size: 2vw;
        }



        .icons-featured {
            display: block;
            margin: auto;
            width: 80%;
            position: relative;
            top: 625px;
            height: 10px;
        }

        .wrapper-index-featured-mobile {
            width: 100%;
            text-align: center;
            position: relative;
            top: -85px;
        }


        .centered-mobile-featured{
            width: 80%;
            /* height: 400px; */
            margin: auto;
        
        }

        .mySlidesFea {
            width: 100%;
            height: 600px;
        }


        .prevnext-featured{
            position: relative;
            top: -510px;
            display: block;
            margin: auto;
            /* height: 100%; */
        }

        .dot-res-fea {
            text-align: center;
            position: relative;
            top: -220px;
        }


/* Display style mobile 895 from benefit  */


        .wrapper-benefit {
            height: 768px;
        }

         
        .content-img-benefit{
            height: auto;
        }

        .txt-judul-benefit { 
            font-size: 20px;
        }

        .wrapper-text-content-benefit { 
            position: relative;
            top: -20px;
        }


        .txt-content-benefit {
            font-size: 14px;
            text-align: justify;
        }


        .wrapper-page-benefit {
            position: relative;
            top: -930px;
            height: 38px;
        }

        .resslide-benefit{
            width: 100%;
            clear: both;
            position: relative;
            top: 1115px;
        }

        .content-dekstop-benefit {display: none;}

        .txt-judul-centered-benefit {
            font-size: 28px;
        }


        .column-wrapper-benefit {
            width: 97%;
            position: relative;
            top: -45px;
        }


        .txt-judul-benefit{
            font-size: 2vw;
        }



        .icons-benefit {
            display: block;
            margin: auto;
            width: 80%;
            position: relative;
            top: -200px;
            height: 600px;
        }

        .wrapper-index-benefit-mobile {
            width: 100%;
            text-align: center;
            position: relative;
            top: -85px;
        }


        .centered-mobile-benefit{
            width: 80%;
            /* height: 400px; */
            margin: auto;
        
        }

        .mySlidesBen {
            width: 100%;
            height: 600px;
        }

        .dot-res-ben{
            display: block;
            position: relative;
            top: -90px;
        }


        .next-ben, .prev-ben{ 
             display:block;
        }

        .wrapper-prevnext-benefit {
            width:100%;
            z-index: 99;
            position: relative;
            top: -348px;
            float:left;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }

        .prevnext-benefit {
            width:90%;
  
        }


/* Display style mobile 895 from event   */




        .wrap-three {
            height:1420px;
        }

        .card-content-iframe{
            width: 100%;
        }


        .prevnext-event{
            position: relative;
            top: -510px;
            display: block;
            margin: auto;
            z-index:5;

        }

        .wrapper-page-event {
            position: relative;
            top: -215px;
            height: 38px;
        }

        .resslide-event{
            width: 100%;
            clear: both;
            height:10px;
            position: relative;
            top: 475px; 
        }

        .content-dekstop-event {display: none;}

        .txt-judul-centered-event {
            font-size: 28px;
        }


        .column-wrapper-event {
            width: 100%;
            position: relative;
            top: -45px;
            display: flex;
            justify-content: center;
            align-items: center;
 
        }



        .icons-event {
            display: block;
            margin: auto;
            width: 90%;
            position: relative;
            top: -154px;
            height: 450px;
        }

        .wrapper-index-event-mobile {
            width: 100%;
            text-align: center;
            position: relative;
            top: -55px;
        }


        .centered-mobile-event{
            width: 89%;
            /* height: 400px; */
            margin: auto;
        
        }

        .mySlidesEvent {
            width: 100%;
            height: 600px;
        }

        .dot-res-event{
            display: block;
            position: relative;
            top: -268px;
        }



}

@media screen and (max-width: 795px)  {
            
            
/* Display style mobile 795 from footer and content first  */
            .txt-footer-right {
                font-size: 1vw;
            }

            .content-img-icon-footer {
                width: 100%;
            }


            .wrapper-link {
                position: relative;
                top: 290px;
            }

            .wrapper-txt-link {
                position: relative;
                bottom: 230px;
            }

            .wrapper-main-link {
                position: relative;
                bottom: 375px;
            }

            .content-link-left { 
                float: none;
                width: 100%;
                text-align: center;
                height:15px;
                position:relative;
                top:-40px;
            }

            .content-link-right { 
                float: none;
                width: 100%;
                text-align: center;
                height:50px;
                position:relative;
                top:-40px;
            }

            .wrapper-txt-content-second-right {
                padding-right:0px;

            }

            .wrapper-txt-content-second-left {
                padding-left:0px;
            }

            .wrap-none-link{
                width: 100%;
                text-align: center;
            }

            .border-corners  {
                box-shadow:none;
            }

            .border-corners-change {
                box-shadow:-2px -2px 2px #53C511; 
                width: 16%;
                height: 50px;
                border-radius: 5px;
            }

            .


            .none-res-link {
                width: 100%;
                height: auto;
                display: block;
                text-align: center;
                clear: both;
                padding-bottom: 50px;
                color: #fff;
                font-family: 'Lato';
            
            }

            .wrap-content-page-second {
                width: 100%;
                padding-top: 0px;
            }
            
            .left-icon-footer {
                width: 40%;
            }

            .txt-content-link-right {
                font-size: 1.5vw;
            }

            

              .txt-content-link-left {
                font-size: 2vw;
                margin:auto;
            }

            .tele-icon {
                width: 82%;
            }



/* Display style mobile 795 from featured  */

        .wrapper-page-featured {
            /* position: absolute;
            top: 217px; */
        }

        .column-wrapper-featured{
            position: relative;
            top: 0px;
        }

        .wrapper-index-featured-mobile{
            position: relative;
            top: -75px;
        }

        .prevnext-featured {
            position: relative;
            top: -455px;
        }

        

/* Display style mobile 795 from benefit  */

             .wrapper-page-benefit {
                /* position: absolute;
                top: 217px; */
            }

            .column-wrapper-benefit{
                position: relative;
                top: -110px;
            }

            .wrapper-index-benefit-mobile{
                position: relative;
                top: -125px;
            }

            
            .dot-res-ben{
                position: relative;
                top: -225px;
            }


            .icons-benefit {
                top:-95px;
            }

            .next-ben, .prev-ben { 
                top: 28%;
             }


/* Display style mobile 795 from event  */

        .prevnext-event {
            position: relative;
            top: -460px;
        }

        .style-play-yt{
            position: relative;
            top: 79%;
        }
        .wrapper-page-event {
            /* position: absolute;
            top: 217px; */
        }

        .column-wrapper-event{
            position: relative;
            top: 0px;
        }

        .wrapper-index-event-mobile{
            position: relative;
            top: -20px;
        }

        
        .dot-res-event{
            position: relative;
            top: -260px;
        }
    

        .icons-event {
            top: -200px;
        }

        .next-event, .prev-event {
            top:47%;
        }
/* Display style mobile 795 from pages  */
    .wrapper-left-content-pages-second {
        display: flex;
        justify-content: center;
        align-items: center;
    }


}


@media screen and (max-width: 720px) {

/* Display style mobile 720 from first content  */
    .wrapper-main-link {
        position: relative;
        bottom: 321px;
    }

    .wrapper-txt-link {
        position: relative;
        bottom: 180px;
    }

    .wrapper-link {
        position: relative;
        top: 340px;
    }

}



@media screen and (max-width: 695px) {


/* Display style mobile 695 from footer  */
    .wrapper-copy-right{
        top: -15px;
    }


    .txt-content-copyright {
        font-size: 8.7px;
    }

    .content-img-footer-logo {
        width:60%;
    }

    .txt-footer-lefts {
        font-size:1.9vw;
    }

    .left-icon-footer {
        top:-34px;
    }

    
    .txt-content-page-second {
        font-size:2.4vw;
    }

    .style-text-link-content {
        font-size:2.4vw;
    }

     .wrapper-text-content-info{
        font-size:2.4vw;
     }

    
    .tele-icon {
        width: 94%;
    }



/* Display style mobile 695 from event  */

    .wrapper-page-event {
        position: relative;
        top: -200px;
    }


/* Display style mobile 695 from benefit  */

    .wrapper-page-benefit {
        position: relative;
        top: -930px;
    }

    .next-ben, .prev-ben {
        top: 24%;
    }


/* Display style mobile 695 from featured  */

    .wrapper-page-featured {
        position: relative;
        top: -830px;
    }




/* Display style mobile 695 from content first  */
    .wrap-content-second{
        bottom: 180px;
    }

    .link-brand {
        font-size:1.6vw;
    }

    .logo { 
       width: 45%;
    }

    @media screen and (max-width: 730px) {

/* Display style mobile from pages   */

    .main-wrapper-second-pages {
        height:750px;
    }
        
    .sub-pages-second {
        font-size:2.7vw;
    }

    .img-pages-second {
        max-width: 68%;
        width: 500px;
    }
}




@media screen and (max-width: 620px) {



/* Display style mobile 620 from pages  */

    .btn-join-now-pages {
        width:40%;
    }

/* Display style mobile 620 from footer  */


            .txt-footer-left {
                font-size: 2.6vw;
            }


            .wrap-link-2 {
                padding-top:22px;
            }

            .card {
                font-size:1.7vw;
            }

            .txt-jdl-toogle {
                font-size: 1.8vw;
            }

            .item-pages {
                font-size: 1.8vw;
            }

            .style-circle-footer {
                height: 45px;
                width: 45px;
            }

            .content-img-change-icon-footer {
                width: 90%;
            }


            .wrapper-float-right-footer{
                float: none;
                width: 100%;
                height: 35px;
            }

            .wrapper-center-panduan{
                position: relative;
                top: -30px;
            }

            .border-ctr-cara{
                border-left: none;
                border-right: none;
            }

            .txt-footer-right {
                font-size: 1.8vw;
            }

    

            .txt-jdl-footer {
                font-size: 1.8vw;
            }


            .icon-hov {
                width: 90%;
                height: auto;
            }



            .wrapper-link {
                position: relative;
                top: 365px;
            }

            .txt-alternartif {
                width: 62%;
                font-size: 40px;
            }

            .txt-alternartif-1 {
                width: 62%;
                font-size: 4vw;
            }

            .txt-alternartif-1-cust-sport {
                width: 62%;
                font-size: 4vw;
            }


            .wrapper-txt-link {
                position: relative;
                bottom: 180px;
            }

            .wrapper-main-link {
                position: relative;
                bottom: 330px;
            }



            .none-res-link {
                font-size: 4vw;
            }

/* Display style mobile 620 from featured  */

        .wrapper-page-featured {
            position: relative;
            top: -1427px;
            height: 42px;
        }



        .txt-judul-featured{
            font-size: 3vw;
        }


        .wrapper-index-featured-mobile{
            position: relative;
            top: -95px;
        }

        .prevnext-featured {
            position: relative;
            top: -465px;
        }


        .icons-featured {
            position: relative;
            top: 1173px;
        } 

        

/* Display style mobile 620 from benefit  */

            .wrapper-page-benefit {
                position: relative;
                top: -2180px;
                height: 5px;
            }




            .txt-judul-benefit{
                font-size: 3vw;
            }


            .wrapper-index-benefit-mobile{
                position: relative;
                top: -155px;
            }


            .icons-benefit {
                position: relative;
                top: 1173px;
            } 

            


/* Display style mobile 620 from event  */

        .prevnext-event {
            position: relative;
            top: -440px;
        }

        .wrapper-page-event {
            position: relative;
            top: -1570px;
            height: 5px;
        }





        .wrapper-index-event-mobile{
            position: relative;
            top: -50px;
        }


        .icons-event {
            position: relative;
            top: 1173px;
        } 


/* Display style mobile 620 from second  */
    .wrap-content-second {
        position: relative;
        bottom: 230px;
    }

/* Display style mobile 620 from pages   */

    .main-wrapper-second-pages {
        height:800px;
    }

    .sub-pages-first {
        font-size:3.8vw;
    }

    .sub-pages-second {
        font-size: 3vw;
    }

    .img-pages-second {
        width:80%;
        height:auto;
    }

    .buttonjoinnow {
        width:45%;
        font-size: 3vw;
    }


}

@media screen and (max-width: 558px)  { 
/* Display style mobile 558 from footer   */
    .style-circle-footer {
        height: 40px;
        width: 40px;
    }

/* Display style mobile 558 from pages   */
    .main-wrapper-second-pages {
        height: 840px;
    }

 }

@media screen and (max-width: 528px)  { 
/* Display style mobile 528 from pages   */

    .main-wrapper-second-pages {
        height:950px;
    }


/* Display style mobile 528 from footer   */
    .style-circle-footer {
        height: 36px;
        width: 36px;
    }

}




@media screen and (max-width: 480px)  {
    
    

/* Display style mobile 480 from footer & first content  */
       


        .wrap-content-second {
            width:90%;
        }


        .wrapper-text-content-info{
            font-size:2.8vw;
        }
        .border-corners-change {
            width: 14%;
            height: 40px;
        }


        .wrapper-card {
            width:97%
        }

        .card{
            font-size:2.6vw;
        }

        .content-link-left {
            top: -20px;
        }

        .content-link-right {
            top: -20px;
        }
        .wrapper-fa-stylings{
            display:block;
        }

        .wrapper-fa-stylings-dekstop {
            display:none;
        }
        .logo { 
            width: 50%;
        }

        .style-circle-footer {
            height: 32px;
            width: 32px;
        }
       
        .wrapper-fixed-footer {
            display: none;
        }

        .wrapper-fixed-footer-mobile {
            display: block;
        }

        .wrap-text-link {
            top: -5px;
        }


        .wrapper-content-copy-right {
            display:none;
        }


        .wrapper-change-copy-right {
            display: block;
        }

        .txt-content-copyright {
            font-size:8.5px;
        }


            .txt-alternartif {
            font-size: 32px;
        }

    
        .txt-alternartif-1 {
            font-size: 6vw;
            text-align:center;
        }

        .txt-alternartif-1-cust-sport{
            font-size: 6vw;
            width:90%;
            text-align:left;
        }

        .txt-content-link-left {
            font-size:2.6vw;
        }

        .txt-24 {
            font-size: 4vw;
        }

        .wrap-content-second{
            position: relative;
            top: -265px;
        }

        .wrapper-link {
            position: relative;
            top: 300px;
        }


        .style-lv {
            display:none;
        }

        .style-tawk {
            display: none !important;
        }


        #style-tawk {
            display: none !important;
        }

        .style-chaport {
            display: none !important;
        }


        #style-chaport {
            display: none !important;
        }


        .style-catcher {
            display:none;
        }

        .wrapper-main-link {
            position: relative;
            bottom: 260px;
        }

        .wrapper-txt-link {
            position: relative;
            bottom: 130px;
        }

        .wrapper-link {
            position: relative;
            top: 410px;
        }

        .txt-content-copyright {

            height:2px;
        }



/* Display style mobile 480 from featured  */

            .wrapper-page-featured {
                position: relative;
                top: -1720px;;
            }

            
            .centered-mobile-featured {
                width:100%;
            }

            .column-wrapper-featured {
                position: relative;
                top: 165px;
            }


            .wrapper-index-featured-mobile{
                position: relative;
                top: 115px;
            }

            .prevnext-featured{
                position: relative;
                top: -160px;
            }


            .dot-res-fea {
                position: relative;
                top: -51px;
                margin: auto;
                width: 50%;
            }

            .icons-featured {
                top: 1300px;
            }




/* Display style mobile 480 from benefit  */


            .wrapper-page-benefit {
                position: relative;
                top: -2450px;
            }

        

            .column-wrapper-benefit {
                position: relative;
                top: 115px;
            }


            .wrapper-index-benefit-mobile{
                position: relative;
                top: 265px;
            }


            .dot-res-ben {
                position: relative;
                top: 348px;
                margin: auto;
                width: 50%;
                height:10px;
            }

            .mySlidesBen {
                height:10px;
                top:85px;
                position:relative;
            }

            .icons-benefit {
                height:10px;
            }

            .next-ben, .prev-ben {
                top: 782px;
            }

            .centered-mobile-benefit {
                width:100%;
                position: relative;
                top: 85px;

            }


/* Display style mobile 480 from event  */

        .prevnext-event{
            position: relative;
            top: 58px;
        }


        .wrapper-page-event {
            position: relative;
            top: -1850px;
        }

        
        .wrapper-content-iframe { 
            width: 100%;
            margin: auto;

        }


        .column-wrapper-event {
            position: relative;
            top: 295px;
        }


        .wrapper-index-event-mobile{
            position: relative;
            top: 265px;
        }


        .dot-res-event {
            position: relative;
            top: 80px;
            margin: auto;
            width: 50%;
        }

        .centered-mobile-event {
            width:100%;
        }

        .next-event, .prev-event {
            top: 740px;
        }


/* Display style mobile 480 from pages  */
    .sub-pages-second {
        font-size: 3.7vw;
    }

    .wrapper-content-pages-second {
        font-size:3vw;
    }

    .wrapper-content-pages-first {
        font-size:3vw;
    }

    .main-wrapper-second-pages {
        height:750px;
    }

    .sub-pages-first {
        font-size: 4.5vw;
    }

    .wrapper-marque-first {
        font-size:2.8vw;
    }

    .txt-content-pages-black {
         color:#000;
          font-size:2.5vw;
     }

    .txt-content-pages-white {
         color:#FFF;
         font-size:2.5vw;
     }
}

@media screen and (max-width: 445px) {
/* Display style mobile 445 from footer  */
        .txt-content-copyright {
            font-size:7.5px;
        }

        .wrapper-footer {
            height: 430px;
        }

        .wraper-content-copy-right {
            top:5px;
        }

        .left-icon-footer {
            position: relative;
            top: -42px;
        }

/* Display style mobile 445 from first content  */
    .link-brand {
        font-size: 1.5vw;
    }
}


@media screen and (max-width: 420px)  { 

/* Display style mobile 420 from pages  */
    .main-wrapper-second-pages {
        height: 470px;
    }

    .main-wrapper-second-pages {
     height: auto;
    }

    .main-wrapper-three-pages { 
        height:600px;
    }

    .wrapper-left-content-pages-second {
        height: 382px;
    }



/* Display style mobile 420 from footer  */
        .fa-stylings {
            display:none;
        }

        .fa-stylings-mobile {
            display:block;
        }

        .main-wrapper-second-pages {
            height: 670px;
        }


}



@media screen and (max-width: 405px)  {

/* Display style mobile 405 from featured  */


    .style-circle-footer {
        height: 30px;
        width: 30px;
    }


/* Display style mobile 405 from benefit  */

        .column-wrapper-benefit{
            position: relative;
            top: 105px;
        }

/* Display style mobile 405 from event  */

        .column-wrapper-event{
            position: relative;
            top: 298px;
        }

/* Display style mobile 405 from first content  */
    .wrapper-main-link {
        position: relative;
        bottom: 290px;
    }

    .wrapper-txt-link {
        position: relative;
        bottom: 130px;
    }

    .wrapper-link {
        position: relative;
        top: 430px;
    }

/* Display style mobile 405 from pages  */
    .main-wrapper-three-pages { 
        height:780px;
    }
}

@media screen and (max-width: 395px) {
   .txt-jdl-footer {
        font-size: 2.2vw;
    }

    .txt-content-copyright {
        font-size:7.5px;
   
    }

    .left-icon-footer {
        position: relative;
        top: -40px;
    }

    .wraper-content-copy-right {
        top:2px;
    }




}

@media screen and (max-width: 380px) { 

/* Display style mobile 380 from header  */

    .logo {
        width:60%;
    }

    .style-circle-footer {
        height: 27px;
        width: 27px;
    }

/* Display style mobile 380 from featured  */


    .prevnext-featured {
        position: relative;
        top: -155px;
    }

    .wrapper-page-featured {
        position: relative;
        top: -740px;
    }

    .main-wrapper-content-m5-featured {
        position: relative;
        top: -605px;
    }



/* Display style mobile 380 from benefit  */


    .wrapper-page-benefit {
        position: relative;
        top: -850px;
    }

    .main-wrapper-content-m5-benefit {
        position: relative;
        top: -605px;
    }


    .dot-res-ben {
        position: relative;
        top: 360px;
        margin: auto;
        width: 50%;
    }

    .centered-mobile-benefit {
        width:100%;
    }

/* Display style mobile 380 from event  */

        .prevnext-event {
            top: 60px;
        }

        .wrapper-page-event {
            position: relative;
            top: -780px;
        }

        .main-wrapper-content-m5-event {
            position: relative;
            top: -605px;
        }


        .dot-res-event {
            position: relative;
            top: 82px;
            margin: auto;
            width: 50%;
        }


/* Display style mobile 380 from pages  */


    .sub-pages-second {
        font-size: 4.2vw;
    }

    .sub-pages-first {
        font-size: 5vw;
    }


    /* Display style mobile 620 from pages  */

        .btn-join-now-pages {
            width:45%;
        }



}




@media screen and (max-width: 365px) {  


/* Display style mobile 365 from featured  */

    .wrapper-page-featured {
        position: relative;
        top: -700px;
    }


/* Display style mobile 365 from benefit  */

    .wrapper-page-benefit {
      position: relative;
      top: -710px;
    }

    .icons-benefit {
        top: 1090px;
    }

    .next-ben, .prev-ben {
        top: 790px;
    }

/* Display style mobile 365 from event  */

    .wrapper-page-event {
      position: relative;
      top: -780px;
    }

}


@media screen and (max-width: 358px) { 
/* Display style mobile 358 from benefit  */ 

    .next-ben, .prev-ben {
        top: 831px;
    }


 }



@media screen and (max-width: 346px) { 

/* Display style mobile 346 from event  */ 
    .next-event, .prev-event {
        top: 765px;
    }


 }

@media screen and (max-width: 340px) {  
/* Display style mobile 340 from pages  */


    .sub-pages-second {
        font-size: 4.5vw;
    }


    .btn-join-now-pages {
        width:50%;
    }




}

@media screen and (max-width: 870px) {
        

/* Display style mobile 870 from featured  */

        .resslide-featured.responsive-featured {position: relative;}
        .resslide-featured.responsive-featured .icons-featured {
        position: absolute;
        right: 0;
        top: 0;
        }
    
        .resslide-featured.responsive-featured .content-dekstop-featured {
        float: none;
        display: block;
        text-align: left;
        }


/* Display style mobile 870 from benefit  */
    .resslide-benefit.responsive-benefit {position: relative;}
    .resslide-benefit.responsive-benefit .icons-benefit {
        position: absolute;
        right: 0;
        top: 0;
    }

    .resslide-benefit.responsive-benefit .content-dekstop-benefit {
        float: none;
        display: block;
        text-align: left;
    }

/* Display style mobile 870 from event  */
        .resslide-event.responsive-event {position: relative;}
        .resslide-event.responsive-event .icons-event {
            position: absolute;
            right: 0;
            top: 0;
        }
    
        .resslide-event.responsive-event .content-dekstop-event {
            float: none;
            display: block;
            text-align: left;
        }

}