html,body{
    height: 100%;
}

#container-all{
    min-height: 100%;
    position: relative;
}

#content-all{
    padding: 0px;
    padding-bottom: 60px;
}

#footer{
    bottom: 0px;
    position: absolute;
    height: 50px;
}

#baris-galeri{
    padding-bottom: 30px;
}

/* products hover kiri besar */
.hovers{
    cursor: pointer;
    position: relative;
    width: 1060px;
    height: 612px;
    margin-left: 100px;
    margin-bottom: 10px;
}

.hovers:hover .hoverr{
    width: 1060px;
}

.img-sub{
    display: block;   
    width: 1060px;
    height: 612px;
    margin-bottom: 10px;
    position: relative;
}

.hoverr{
    width: 0px;
    height: 612px;
    position: absolute;
    background: #000000c4;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
}

.judul-sub{
    font-family: Rajdhani;
    color: white;
    text-align: left;
    font-weight: bolder;
    font-size: 30pt;
    position: absolute;
    margin-left: 700px;
    width: 1000px;
}
/* products hover kiri besar */

#bawahah{
    margin-bottom: 50px;
}

/* products hover bagian kanan */
.kot-ak{
    cursor: pointer;
    position: relative;
    width: 301px;
    height: 301px;
    margin-left: -100px;
}

.kot-akh{
    width: 0px;
    height: 301px;
    position: absolute;
    background: #000000c4;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
}

.kot-ak:hover .kot-akh{
    width: 301px;
}

.kot-aka{
    cursor: pointer;
    position: relative;
    width: 301px;
    height: 301px;
    margin-left: 105px;
}

.kot-aki{
    width: 0px;
    height: 301px;
    position: absolute;
    background: #000000c4;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.4s ease;
}

.kot-aka:hover .kot-aki{
    width: 301px;
}

.img-kotakiri{
    display: block;
    position: relative;
}

.img-kotakanan{
    display: block;
    position: relative;
}

.sub-judul{
    font-family: Rajdhani;
    color: white;
    text-align: left;
    font-weight: bolder;
    font-size: 20pt;
    position: absolute;
    width: 200px;
    margin-left: 100px;
}

#breakah{
    padding-bottom: 10px;
}
/* products hover bagian kanan */

/* fop */
.judulfop{
    margin-top: 90px;
    font-size: 50pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
}

.subjudulfop{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
    padding-bottom: 100px;   
}


.fop-ak{
    cursor: pointer;
    position: relative;
    width: 301px;
    height: 301px;
    margin-left: 150px;
}

.fop-akh{
    width: 0px;
    height: 301px;
    position: absolute;
    background: #000000c4;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.3s ease;
}

.fop-ak:hover .fop-akh{
    width: 301px;
}

.fop-aka{
    cursor: pointer;
    position: relative;
    width: 301px;
    height: 301px;
    margin-left: 150px;
}

.fop-aki{
    width: 0px;
    height: 301px;
    position: absolute;
    background: #000000c4;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.3s ease;
}

.fop-aka:hover .fop-aki{
    width: 301px;
}

#breakfop{
    padding-bottom: 200px;
}

    /* natural grass */
    .judulgrass{
        margin-top: 90px;
        font-size: 50pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        padding-bottom: 80px;
    }

    .system-grass{
        font-family: Rajdhani;
        text-align: center;
        font-weight: bold;
        font-size: 30pt;
        /* width: 634px; */
    }

    .sub-grass{
        font-family: Rajdhani;
        text-align: center;
        font-weight: bold;
        font-size: 20pt;
        /* width: 634px; */
        margin-bottom: -30px;
    }

    .img-grass{
        margin-left: 150px;
    }

    .grasses{
        text-align: center;
        font-size: 18pt;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .sub-grassess{
        text-align: center;
    }
    /* natural grass */

    /* synthetic grass */

    .img-grasssyn{
        margin-top: 50px;
        margin-left: 150px;
        margin-bottom: 30px;
    }

    #breaksyn{
        padding-bottom: 100px;
    }
    /* synthetic grass */

    /* Squash */

    .judulsquash{
        margin-top: 90px;
        font-size: 50pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        padding-bottom: 50px;
    }

    .sub-squash{
        font-family: Rajdhani;
        text-align: center;
        font-weight: bold;
        font-size: 20pt;
        /* width: 634px; */
        margin-bottom: -30px;
    }

    #img-squash{
        margin-left: 300px;
        margin-top: 100px;
    }
    /* Squash */

/* fop */

/* Sport Equipment */

    /* Track n Field Equipment */

    .foptr{
        margin-left: 80px;
    }

    .sub-fop{
        text-align: center;
        font-family: Rajdhani;
        font-size: 20pt;
        font-weight: bold;
    }

    #breakeq{
        padding-bottom: 50px;
    }

    /* Track n Field Equipment */

    /* High pole */

    .fophp{
        margin-left: 50px;
    }

    #breakhp{
        padding-bottom: 100px;
    }

    .sub-hp{
        font-family: Rajdhani;
        font-size: 20pt;
        font-weight: bold;
        text-align: center;
        margin-left: 137px;
    }

    /* High pole */

    /* bench */

    .benchfop{
        margin-left: 70px;
    }

    .sub-bench{
        font-family: Rajdhani;
        font-size: 20pt;
        font-weight: bold;
        text-align: center;
    }

    #breakbench{
        padding-bottom: 50px;
    }
    /* bench */

    /* long n triple */

    .longtri{
        margin-left: 75px;
    }

    .sub-long{
        font-family: Rajdhani;
        font-size: 20pt;
        font-weight: bold;
        text-align: center;
    }

    #breaklong{
        padding-bottom: 50px;
    }

    /* long n triple */

/* Sport Equipment */

/* Sport Technology */

    

    #breakfop{
        margin-bottom: -90px;
    }

    /* VAR */

    .img-var{
        margin-left: 60px;
    }

    .judul-var{
        text-align: center;
        font-family: Rajdhani;
        font-size: 40pt;
        font-weight: bold;
        padding-bottom: 10px;
    }

    .sub-var{
        text-align: justify;
        font-family: Rajdhani;
        font-size: 20pt;
        font-weight: bold;
    }

    #breakvar{
        padding-bottom: 30px;
    }

    /* VAR */

    /* Esub */

    .esub{
        margin-left: 180px;
        margin-top: -44px;
    }

    .sub-esub{
        font-family: Rajdhani;
        font-size: 25pt;
        text-align: center;
        font-weight: bold;
        margin-left: 310px;
        width: 145px;
        margin-top: -20px;
    }

    .sub-esubs{
        font-family: Rajdhani;
        font-size: 25pt;
        text-align: center;
        font-weight: 400;
    }

    #breakesub{
        padding-bottom: 20px;
    }

    .tipesub{
        font-family: Rajdhani;
        font-size: 35pt;
        text-align: center;
        font-weight: bold;
    }

    /* Esub */

    /* Smartspeed by fusion sport */

    .ssp{
        margin-left: 80px;
    }

    .judul-ssp{
        font-family: Rajdhani;
        font-size: 25pt;
        font-weight: bold;
        text-align: center;
    }

    .sub-ssp{
        font-family: Rajdhani;
        font-size: 17pt;
        font-weight: 400;
        text-align: justify;
    }

    /* Smartspeed by fusion sport */

/* Sport Technology */

/* Services */

#services{
    padding-bottom: 115px;
}

.judulser{
    margin-top: 90px;
    font-size: 50pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
}

.sub-ser{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
    padding-bottom: 100px;
}

    /* Rental */

    .rental{
        width: 435px;
    }

    .rentals{
        width: 435px;
        margin-left: 30px;
    }

    .judul-rental{
        text-align: center;
        font-family: Rajdhani;
        font-size: 25pt;
        font-weight: bold;
    }

    .sub-rental{
        text-align: justify;
        font-family: Rajdhani;
        font-size: 20pt;
        font-weight: 500;
        width: 500px;
        margin-left: -20px;
    }

    /* Rental */

    /* Operator */

    .judulope{
        padding-top: 300px;
        font-family: Rajdhani;
        font-size: 50pt;
        text-align: center;
        font-weight: bolder;
    }

    .sub-ope{
        font-family: Rajdhani;
        font-size: 25pt;
        text-align: center;
        padding-bottom: 306px; 
    }

    /* Operator */

    /* Ticketing */

    .judultic{
        padding-top: 300px;
        font-family: Rajdhani;
        font-size: 50pt;
        text-align: center;
        font-weight: bolder;
    }

    .sub-tic{
        font-family: Rajdhani;
        font-size: 25pt;
        text-align: center;
        padding-bottom: 306px; 
    }

    /* Ticketing */

/* Services */


#products-galery{
    margin-top: 100px;
}
    

.sale-judul{
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

#barang{
    margin: 0 auto;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 50pt;
    padding-top: 300px;
    padding-bottom: 380px;
}

.nobull{
    list-style-type: none;
    padding-top: 7px;
    padding-bottom: 7px;
}


#tombol-submit{
    margin-bottom: 130px;
}

#contactuz{
    padding-top: 90px;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 40pt;
}



#nama, #telepon, #email, #pesan{
    width: 80%;
}

#pesan{
    height: 100px;
}

#kolom-kiri{
    margin-top: 50px;
}

#kolom-kanan{
    margin-top: 45px;
}

#hidden-menu{
    background-color: #fdfdfdc2 !important;
}

.logo-web{
    width: 90%;
    margin-left: -15px;
    position: relative;
    z-index: 1000;
}

.nav-link{
    text-transform: uppercase;
    font-weight: 500;
    font-size: 17pt;
    margin-left: 50px;
    margin-right: 1em;
    margin-top: 10px;
}

.nav-link:hover::after{
    content: '';
    display: block;
    border-bottom: 3px solid #962F32;
    margin: auto;
    /* padding-bottom: 3px; */
    margin-bottom: -8px;
}

.carousel-inner{
    margin-top: -30px;
    height: 92%;
    position: relative;
}

.carousel-inner::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgb(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    position: absolute;
    bottom: 0;
    /* z-index: 9; */
}

.carousel-caption{
    margin-left: -29%;
    margin-top: -80px;
    text-align: center;
    position: relative;
    z-index: 4;
}

.carousel-caption .judul {
    margin-left: 0 auto !important;
    margin-top: -700px;
    text-align: center;
    position: relative;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
    z-index: 10;
}

.carousel-caption .isian {
    margin-left: 0 auto !important;
    margin-top: 10px;
    text-align: center;
    position: relative;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
    z-index: 10;
}

.swiper-container{
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
    margin-bottom: -100px;
    text-align: center;
    background-color: #000000;
    height: 650px;
}

.swiper-slide{
	background-position: center;
	background-size: cover;
	width: 300px;
	height: 300px;
    background-color: salmon;
    margin-top: 20px;
}

.swiper-container .judulnya{
	font-family: Rajdhani;
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	margin-top: 20px;
}


.container-image{
	position: absolute;
	background-color: white;
	width: 100%;
	bottom: 135px;
}

.swiper-container .judul-baju{
	/* position: relative; */
	/* text-align: center !important; */
	font-size: 27;
	text-transform: uppercase;
}

.swiper-pagination{
    bottom:150px !important;left:0;width:100%;
}



.judulproduk{
    margin-top: 90px;
    font-size: 50pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

.subjudulp{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
}

.logo-sti{
    width: 90%;
    margin-left: 15px;
    position: relative;
    z-index: 1000;
    margin-top: 150px;
}

.jabout{
    /* margin-right: -200px; */
    /* color: white; */
    /* background-color: #000000; */
    margin-top: 90px;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    text-transform: uppercase;
}

.kotak{
    background-color: black;
    margin-left: 1825px;
    margin-top: -240px;
}

.row-vm{
    /* margin-top: 10px; */
    margin-left: 500px;
    padding-bottom: 50px;
}

.visi{
    
    margin-top: 40px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 40pt;
}

.visip{
    font-family: Rajdhani;
    text-align: center;
    font-size: 19pt;
    
}

.misi{
    
    margin-top: 40px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 40pt;
}

.misip{
    
    font-family: Rajdhani;
    text-align: center;
    font-size: 19pt;
}


.aboutp{
    /* margin-right: -200px; */
    /* background-color: black; */
    margin-top: -10px;
    /* color: white; */
    font-size: 20pt;
    font-family: Rajdhani;
    text-align: center;
}

.row-footer{
    background-color: rgb(2, 2, 2);
    position: relative;
    z-index: 10000;
    margin-bottom: 0px !important;
    margin-top: 50px;
}

.footer-it{
    color: white;
    font-family: Rajdhani;
    font-weight: 100;
    font-size: 19pt;
    margin-bottom: -5px;
}

.footerz{
    padding: 0px;
}

@media (max-width: 1536px){
    .nav-link{
        margin-top: -5px;
        font-size: 15pt;
    }

    /* products */

    #baris-galeri{
        padding-bottom: 25px;
    }

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 881px;
        height: 509px;
        margin-left: 47px;
        margin-bottom: 10px;
    }
    
    .hovers:hover .hoverr{
        width: 881px;
    }
    
    .img-sub{
        display: block;
        width: 881px;
        height: 509px;
        margin-bottom: 10px;
        position: relative;
    }
    
    .hoverr{
        width: 0px;
        height: 509px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }
    
    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 22pt;
        position: absolute;
        margin-left: 630px;
        width: 1000px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
      cursor: pointer;
        position: relative;
        width: 250px;
        height: 250px;
        margin-left: -80px;
    }

    .kot-akh{
        width: 0px;
        height: 250px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .kot-ak:hover .kot-akh{
        width: 250px;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 250px;
        height: 250px;
        margin-left: 100px;
    }

    .kot-aki{
        width: 0px;
        height: 250px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .kot-aka:hover .kot-aki{
        width: 250px;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        height: 250px;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        height: 250px;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
    }

    #breakah{
        padding-bottom: 9px;
    }
    /* products hover bagian kanan */

        /* fop */
        .fop-ak{
            margin-left: 75px;
        }

        .fop-aka{
            margin-left: 100px;
        }

        #ser-squ{
            margin-left: 35px;
        }

        #breakfop{
            padding-bottom: 100px;
            margin-bottom: 0px;
        }

            /* natural grass */
            .img-grass{
                margin-left: 75px;
            }
            /* natural grass */

            /* synthetic grass */
            .img-grasssyn{
                margin-left: 80px;
                margin-top: 30px;
            }

            .sub-grass{
                font-size: 25pt;
            }

            .grasses{
                font-size: 24pt;
                width: 300px;
                margin-left: 15px;
                font-weight: bolder;
            }

            .sub-grassess{
                width: 300px;
                font-size: 21pt;
                font-weight: 400;
                text-align: justify;
                margin-left: 15px;
            }

            #img-aqua{
                margin-left: 5px;
            }

            #img-olimpia{
                margin-left: 5px;
            }
            #olimpia-cool{
                margin-left: -140px !important;
            }

            #img-platinum{
                margin-left: 5px;
            }
            #platinum-cool{
                margin-left: -140px !important;
            }

            #img-rs240{
                margin-left: 5px;
            }
            

            #img-rs260{
                margin-left: 25px;
            }
            #rs260{
                margin-left: -140px !important;
            }

            #img-ulti{
                margin-left: 15px;
            }
            #ultimate{
                margin-left: -140px !important;
            }
            /* synthetic grass */

            /* squash */
            #img-squash{
                width: 1400px !important;
                height: 786px !important;
                margin-left: 55px;
            }
            /* squash */
        /* fop */

        /* sporteq */
            /* trackfield */
            .foptr{
                margin-left: 25px;
            }
            /* trackfield */

            /* bench */
            .benchfop{
                margin-left: 13px;
            }
            /* bench */

            /* highjump */
            .fophp{
                width: 436px !important;
                height: 262px !important;
                margin-left: 20px;
            }

            .sub-hp{
                width: 400px;
                margin-left: 40px;
            }

            #breakhp{
                padding-bottom: 30px;
            }
            /* highjump */

            /* longjump */
            .longtri{
                margin-left: 30px;
            }
            /* longjump */
        /* sporteq */

        /* sport tech */
        #fop-var{
            margin-left: 150px;
        }

        #fop-fs{
            margin-left: 100px;
            margin-top: 0px;
        }

        #fop-es{
            margin-top: 0px;
            margin-left: 35px;
        }

        .tech-kotakiri{
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .tech-kotakanan{
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
        }

        #tech-sub{
            font-family: Rajdhani;
            color: white;
            text-align: left;
            font-weight: bolder;
            font-size: 15pt;
            position: absolute;
            width: 200px;
            margin-left: 90px;
        }

        #spasi{
            margin-left: -15px;
        }

            /* var */
            .img-var{
                margin-left: -23px;
            }

            .judul-var{
                margin-left: -20px;
            }
            /* var */

            /* fusiionsport */
            #ssp1{
                width: 300px !important;
                height: 300px !important;
                margin-left: 30px;
            }
            #jud-ssp1{
                font-family: Rajdhani;
                font-size: 23pt;
                font-weight: bold;
                text-align: center;
                width: 450px;
                margin-left: -50px;
            }
            #sub-ssp1{
                font-family: Rajdhani;
                font-size: 16pt;
                font-weight: 400;
                text-align: justify;
                width: 450px;
                margin-left: -50px;
            }

            #ssp2{
                width: 300px !important;
                height: 300px !important;
                margin-left: 30px;
            }
            #jud-ssp2{
                font-family: Rajdhani;
                font-size: 23pt;
                font-weight: bold;
                text-align: center;
                width: 450px;
                margin-left: -45px;
            }
            #sub-ssp2{
                font-family: Rajdhani;
                font-size: 16pt;
                font-weight: 400;
                text-align: justify;
                width: 450px;
                margin-left: -45px;
            }

            #ssp3{
                width: 300px !important;
                height: 300px !important;
                margin-left: 30px;
            }
            #jud-ssp3{
                font-family: Rajdhani;
                font-size: 23pt;
                font-weight: bold;
                text-align: center;
                width: 450px;
                margin-left: -40px;
            }
            #sub-ssp3{
                font-family: Rajdhani;
                font-size: 16pt;
                font-weight: 400;
                text-align: justify;
                width: 450px;
                margin-left: -40px;
            }

            .ssp{
                margin-left: 10px;
            }
            /* fusiionsport */

            /* esub */
            #esub1{
                margin-left: 40px;
                margin-top: -5px;
            }
            #sub-esub1{
                margin-left: 40px;
                font-size: 25pt;
                width: 400px;
            }

            #esub2{
                margin-left: 145px;
                margin-top: 0px;
            }
            #sub-esub2{
                margin-left: 145px;
                font-size: 25pt;
                width: 400px;
            }

            #sub-esub3{
                font-size: 25pt;
            }
            /* esub */
        /* sport tech */

        /* service */
            .fop-ak {
            cursor: pointer;
            position: relative;
            width: 301px;
            height: 301px;
            margin-left: 150px;
            }

            #ser-rent{
                margin-left: 35px;
            }

            /* rental */
            .rental{
                width: 455px;
                margin-left: -85px;
                margin-top: 30px;
            }
            
            .rentals{
                width: 455px;
                margin-left: -38px;
                margin-top: 30px;
            }

            .judul-rental{
                font-size: 23pt;
                width: 455px;
                margin-left: -83px;
            }

            .sub-rental{
                width: 455px;
                font-size: 19pt;
                margin-left: -83px;
            }

            #jud-rental{
                font-size: 23pt;
                width: 455px;
                margin-left: -38px;
            }

            #sj-rental{
                width: 455px;
                font-size: 19pt;
                margin-left: -38px;
            }
            /* rental */
        /* service */
    /* products */
}

@media (max-width: 1440px){
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
    }

    .nav-link{
        margin-top: -5px;
        font-size: 15pt;
    }

    /* products */

    #baris-galeri{
        padding-bottom: 25px;
    }

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 881px;
        height: 509px;
        margin-left: 5px;
        margin-bottom: 10px;
    }
    
    .hovers:hover .hoverr{
        width: 881px;
    }
    
    .img-sub{
        display: block;
        width: 881px;
        height: 509px;
        margin-bottom: 10px;
        position: relative;
    }
    
    .hoverr{
        width: 0px;
        height: 509px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }
    
    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 22pt;
        position: absolute;
        margin-left: 630px;
        width: 1000px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
      cursor: pointer;
        position: relative;
        width: 250px;
        height: 250px;
        margin-left: -60px;
    }

    .kot-akh{
        width: 0px;
        height: 250px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .kot-ak:hover .kot-akh{
        width: 250px;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 250px;
        height: 250px;
        margin-left: 120px;
    }

    .kot-aki{
        width: 0px;
        height: 250px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .kot-aka:hover .kot-aki{
        width: 250px;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        height: 250px;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        height: 250px;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
    }

    #breakah{
        padding-bottom: 9px;
    }
    /* products hover bagian kanan */

    /* fop */
    .fop-ak{
        margin-left: 120px;
    }

    #ser-squ{
        margin-left: 35px;
    }

    .fop-aka{
        margin-left: 80px;
    }

    #breakfop{
        padding-bottom: 100px;
    }

        /* natural grass */
        .img-grass{
            margin-left: 75px;
        }
        /* natural grass */

        /* synthetic grass */
        .img-grasssyn{
            margin-left: 80px;
            margin-top: 30px;
        }

        .sub-grass{
            font-size: 23pt;
        }

        .grasses{
            font-size: 22pt;
            width: 300px;
            margin-left: 15px;
        }

        .sub-grassess{
            width: 300px;
            font-size: 20pt;
            font-weight: 300;
            text-align: justify;
            margin-left: 15px;
        }

        #img-aqua{
            margin-left: 5px;
        }

        #img-olimpia{
            margin-left: 5px;
        }
        #olimpia-cool{
            margin-left: -140px !important;
        }

        #img-platinum{
            margin-left: 5px;
        }
        #platinum-cool{
            margin-left: -140px !important;
        }

        #img-rs240{
            margin-left: 5px;
        }
        

        #img-rs260{
            margin-left: 25px;
        }
        #rs260{
            margin-left: -140px !important;
        }

        #img-ulti{
            margin-left: 15px;
        }
        #ultimate{
            margin-left: -140px !important;
        }
        /* synthetic grass */

        /* squash */
        #img-squash{
            width: 1400px !important;
            height: 786px !important;
            margin-left: 5px;
        }
        /* squash */
    /* fop */

    /* sporteq */
        /* trackfield */
        .foptr{
            margin-left: 15px;
        }
        /* trackfield */

        /* bench */
        .benchfop{
            margin-left: 13px;
        }
        /* bench */

        /* highjump */
        .fophp{
            width: 436px !important;
            height: 262px !important;
            margin-left: 7px;
        }

        .sub-hp{
            width: 400px;
            margin-left: 23px;
        }

        #breakhp{
            padding-bottom: 30px;
        }
        /* highjump */

        /* longjump */
        .longtri{
            margin-left: 15px;
        }
        /* longjump */
    /* sporteq */

    /* sport tech */
    #fop-var{
        margin-left: 120px;
    }

    #fop-fs{
        margin-left: 80px;
        margin-top: 0px;
    }

    #fop-es{
        margin-top: 0px;
        margin-left: 35px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            margin-left: -23px;
        }

        .judul-var{
            margin-left: -20px;
        }
        /* var */

        /* fusiionsport */
        #ssp1{
            width: 300px !important;
            height: 300px !important;
            /* margin-left: -40px; */
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -40px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -40px;
        }

        #ssp2{
            width: 300px !important;
            height: 300px !important;
            /* margin-left: -40px; */
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -40px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -40px;
        }

        #ssp3{
            width: 300px !important;
            height: 300px !important;
            /* margin-left: -40px; */
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -40px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -40px;
        }

        .ssp{
            margin-left: 10px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            margin-left: 40px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: 40px;
            font-size: 25pt;
            width: 400px;
        }

        #esub2{
            margin-left: 145px;
            margin-top: 0px;
        }
        #sub-esub2{
            margin-left: 145px;
            font-size: 25pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 25pt;
        }
        /* esub */
    /* sportech */

    /* service */
        /* rental */
        .rental{
            width: 455px;
            margin-left: -85px;
            margin-top: 30px;
        }
        
        .rentals{
            width: 455px;
            margin-left: -38px;
            margin-top: 30px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -83px;
        }

        .sub-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -83px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -38px;
        }

        #sj-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -38px;
        }
        /* rental */
    /* service */
/* products */
}



@media (max-width: 1366px){
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
    }

    .nav-link{
        margin-top: -10px !important;
        margin-left: 10px !important;
        /* padding-left: 10px; */
        margin-right: 30px !important;
    }

    .logo-web{
        margin-left: -15px !important;
        
    }

    .carousel-inner{
        margin-top: -25px;
        height: 93%;
        position: relative;
    }

    .carousel-caption{
        margin-left: -29%;
        margin-top: 110px !important;
        text-align: center;
        position: relative;
        z-index: 4;
    }
/* products */

#baris-galeri{
    padding-bottom: 25px;
}

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 710px;
        height: 410px;
        margin-left: 100px;
        margin-bottom: 10px;
    }
    
    .hovers:hover .hoverr{
        width: 710px;
    }
    
    .img-sub{
        display: block;
        width: 710px;
        height: 410px;
        margin-bottom: 10px;
        position: relative;
    }
    
    .hoverr{
        width: 0px;
        height: 410px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }
    
    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 22pt;
        position: absolute;
        margin-left: 630px;
        width: 1000px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
      cursor: pointer;
        position: relative;
        width: 201px;
        height: 201px;
        margin-left: -80px;
    }

    .kot-akh{
        width: 0px;
        height: 201px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .kot-ak:hover .kot-akh{
        width: 201px;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 201px;
        height: 201px;
        margin-left: 55px;
    }

    .kot-aki{
        width: 0px;
        height: 201px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .kot-aka:hover .kot-aki{
        width: 201px;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        height: 201px;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        height: 201px;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
    }

    #breakah{
        padding-bottom: 8px;
    }
    /* products hover bagian kanan */

    /* fop menu */
    #ser-squ{
        margin-left: 40px;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 301px;
        height: 301px;
        margin-left: 85px;
    }

    .fop-akh{
        width: 0px;
        height: 301px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 301px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 301px;
        height: 301px;
        margin-left: 65px;
    }

    .fop-aki{
        width: 0px;
        height: 301px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 301px;
    }

    #breakfop{
        padding-bottom: 100px;
    }

        /* natural grass */
        .img-grass{
            margin-left: 58px;
        }

        #judul-nat{
            margin-left: 5px;
        }

        #sub-nat{
            margin-left: 5px;
        }
        /* natural grass */

        /* synthetic grass */
        .img-grasssyn{
            margin-left: 65px;
            margin-top: 30px;
        }

        .sub-grass{
            font-size: 23pt;
        }

        .grasses{
            font-size: 21pt;
            width: 300px;
            margin-left: -20px;
        }

        .sub-grassess{
            width: 300px;
            font-size: 19pt;
            font-weight: 300;
            text-align: justify;
            margin-left: -20px;
        }

        #img-aqua{
            margin-left: -20px;
        }

        #img-olimpia{
            margin-left: -20px;
        }

        #img-platinum{
            margin-left: -20px;
        }

        #img-rs240{
            margin-left: -20px;
        }

        #img-rs260{
            margin-left: 10px;
        }

        #img-ulti{
            margin-left: -5px;
        }
        /* synthetic grass */

        /* squash */
        #img-squash{
            width: 1244px !important;
            height: 699px !important;
            margin-left: 50px;
        }
        /* squash */
    /* fop menu */

    /* sporteq */
        /* trackfield */
        .foptr{
            margin-left: 6px;
        }
        /* trackfield */

        /* bench */
        .benchfop{
            margin-left: 12px;
        }
        /* bench */

        /* highjump */
        .fophp{
            width: 436px !important;
            height: 262px !important;
            margin-left: -5px;
        }

        .sub-hp{
            width: 400px;
            margin-left: 15px;
        }

        #breakhp{
            padding-bottom: 30px;
        }
        /* highjump */

        /* longjump */
        .longtri{
            margin-left: 5px;
        }
        /* longjump */
    /* sporteq */
    
    /* sport tech */
    #fop-var{
        margin-left: 85px;
    }

    #fop-fs{
        margin-left: 65px;
        margin-top: 0px;
    }

    #fop-es{
        margin-top: 0px;
        margin-left: 40px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            margin-left: -23px;
        }

        .sub-var{
            font-size: 19pt;
        }
        /* var */

        /* fusiionsport */
        #ssp1{
            width: 300px !important;
            height: 300px !important;
            /* margin-left: -40px; */
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -40px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -40px;
        }

        #ssp2{
            width: 300px !important;
            height: 300px !important;
            /* margin-left: -40px; */
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -40px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -40px;
        }

        #ssp3{
            width: 300px !important;
            height: 300px !important;
            /* margin-left: -40px; */
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -40px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -40px;
        }

        .ssp{
            margin-left: 10px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            margin-left: -70px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -70px;
            font-size: 25pt;
            width: 400px;
        }

        #esub2{
            /* margin-left: 75px; */
            margin-top: 0px;
        }
        #sub-esub2{
            margin-left: 175px;
            font-size: 25pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 25pt;
        }
        /* esub */
    /* sport tech */

    /* service */
    #ser-op{
        margin-left: 65px;
    }

    #ser-rent{
        margin-left: 40px;
    }

        /* rental */
        .rental{
            width: 455px;
            margin-left: -113px;
            margin-top: 30px;
        }
        
        .rentals{
            width: 455px;
            margin-left: -38px;
            margin-top: 30px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -111px;
        }

        .sub-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -111px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -38px;
        }

        #sj-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -38px;
        }
        /* rental */
    /* service */
/* products */
}

@media (max-width: 1024px){
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
    }

    .logo-web{
        min-height: 80px;
        min-width: 240px;
    }

    .nav-link{
        font-size: 12pt;
        margin-top: 10px !important;
    }

    .carousel-inner {
        margin-top: -1px;
        height: 54%;
        position: relative;
    }

/* Products */
.judulproduk{
    margin-top: 10px;
    font-size: 40pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

.subjudulp{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
}

#products-galery{
    margin-top: 20px;
}

#baris-galeri{
    padding-bottom: 25px;
}

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 711px;
        height: 411px;
        margin-left: 140px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 711px;
    }

    .img-sub{
        display: block;
        width: 711px;
        height: 411px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 411px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        margin-left: 250px;
        width: 300px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-akh{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-ak:hover .kot-akh{
        width: 5%;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-aki{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-aka:hover .kot-aki{
        width: 5%;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
        z-index: 500;
    }

    #breakah{
        padding-bottom: 10px;
    }
    /* products hover bagian kanan */

    /* fop */
    #ser-nat{
        margin-left: 150px;
    }

    #ser-syn{
        margin-left: 205px;
    }

    #ser-squ{
        margin-top: 400px;
        margin-left: -530px;
    }

    .judulfop{
        margin-top: 50px;
        font-size: 35pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .subjudulfop{
        font-size: 19pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;   
    }

    .fop-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: 0px;
        margin-top: 20px;
    }

    .fop-akh{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 300px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: 55px;
        margin-top: 20px;
    }

    .fop-aki{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 300px;
    }

    #breakfop{
        padding-bottom: 75px;
    }

        /* natural grass */
        .img-grass{
            margin-left: 0px;
        }

        #sub-nat{
            padding-bottom: 30px;
            font-weight: 400;
            width: 200px;
            font-size: 18pt;
            text-align: center;
        }

        #judul-nat{
            width: 200px;
        }
        /* natural grass */

        /* synthetic grass */
        .judulgrass{
            padding-bottom: 20px;
        }

        .sub-grassess{
            font-size: 19pt;
            width: 250px;
            text-align: justify;
            font-weight: 300;
        }

        .sub-grassess{
            width: 250px;
            margin-left: 0px;
        }

        .grasses{
            font-size: 23pt;
            font-weight: bolder;
            width: 250px;
            margin-left: 0px;
        }

        .img-grasssyn {
            margin-top: 40px;
            margin-left: -15px;
            margin-bottom: 30px;
        }

        #img-aqua{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #aqua-turf{
            margin-left: 8px !important;
            margin-top: 50px;
        }

        #img-olimpia{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #olimpia-cool{
            margin-left: -65px !important;
            margin-top: 50px; 
        }

        #img-platinum{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px; 
        }
        #platinum-cool{
            margin-left: -65px !important;
            margin-top: 50px;
        }

        #img-rs240{
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #rs240{
            margin-left: 8px !important;
            margin-top: -70px;
        }

        #img-rs260{
            margin-top: -5px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #rs260{
            margin-left: -65px !important;
            margin-top: -70px;
        }

        #img-ulti{
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #ultimate{
            margin-left: -65px !important;
            margin-top: -70px;
        }
        /* synthetic grass */

        /* squash */
        #img-squash{
            width: 985px !important;
            height: 553px !important;
            margin-left: 10px;
        }
        /* squash */
    /* fop */

    /* sporteq */

        /* trackfield */
        #foptr1{
            margin-left: 158px;
        }
        #sub-fop1{
            width: 300px;
            margin-left: 158px;
        }

        #foptr2{
            margin-left: 280px;
        }
        #sub-fop2{
            width: 300px;
            margin-left: 280px;
        }

        #foptr3{
            margin-top: 400px;
            margin-left: -355px;
        }
        #sub-fop3{
            width: 300px;
            margin-left: -355px;
        }

        #foptr4{
            margin-top: 400px;
            margin-left: -230px;
        }
        #sub-fop4{
            width: 300px;
            margin-left: -230px;
        }

        #foptr5{
            margin-left: 158px;
        }
        #sub-fop5{
            width: 300px;
            margin-left: 158px;
        }

        #foptr6{
            margin-left: 280px;
        }
        #sub-fop6{
            width: 300px;
            margin-left: 280px;
        }

        #foptr7{
            margin-top: 370px;
            margin-left: -355px;
        }
        #sub-fop7{
            width: 300px;
            margin-left: -355px;
        }

        #foptr8{
            margin-top: 370px;
            margin-left: -230px;
        }
        #sub-fop8{
            width: 300px;
            margin-left: -230px;
        }
        /* trackfield */

        /* bench */
        #benchfop1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 160px; 
        }
        #sub-bench1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 160px;
        }

        #benchfop2{
            height: 250px !important;
            width: 250px !important;
            margin-left: 325px;
        }
        #sub-bench2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 325px;
        }

        #benchfop3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -350px;
            margin-top: 350px;
        }
        #sub-bench3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -350px;
        }

        #benchfop4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -185px;
            margin-top: 350px;
        }
        #sub-bench4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -185px;
        }

        #benchfop5{
            height: 250px !important;
            width: 250px !important;
            margin-left: -95px;
            margin-top: 50px;
        }
        #sub-bench5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -95px;
        }

        #benchfop6{
            height: 250px !important;
            width: 250px !important;
            margin-left: 70px;
            margin-top: 50px;
        }
        #sub-bench6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 70px;
        }

        #benchfop7{
            height: 250px !important;
            width: 250px !important;
            margin-left: 160px;
            margin-top: 20px;
        }
        #sub-bench7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 160px;
        }

        #benchfop8{
            height: 250px !important;
            width: 250px !important;
            margin-left: 325px;
            margin-top: 20px;
        }
        #sub-bench8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 325px;
        }

        #benchfop9{
            height: 250px !important;
            width: 250px !important;
            margin-top: 350px;
            margin-left: -350px;
        }
        #sub-bench9{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -350px;
        }

        #benchfop10{
            height: 250px !important;
            width: 250px !important;
            margin-left: -185px;
            margin-top: 350px;
        }
        #sub-bench10{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -185px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            height: 301px !important;
            width: 501px !important;
            margin-left: 248px; 
        }
        #sub-hp1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 248px;
        }

        #fophp2{
            height: 301px !important;
            width: 501px !important;
            margin-left: -94px; 
            margin-top: 370px;
        }
        #sub-hp2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -94px;
        }

        #fophp3{
            height: 301px !important;
            width: 501px !important;
            margin-left: -435px; 
            margin-top: 740px;
        }
        #sub-hp3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -435px;
        }

        #fophp4{
            height: 301px !important;
            width: 501px !important;
            margin-left: 248px; 
            margin-top: -85px;
        }
        #sub-hp4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 248px;
        }

        #fophp5{
            height: 301px !important;
            width: 501px !important;
            margin-left: -94px; 
            margin-top: 290px;
        }
        #sub-hp5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -94px;
        }

        #fophp6{
            height: 301px !important;
            width: 501px !important;
            margin-left: -430px; 
            margin-top: 665px;
        }
        #sub-hp6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -430px;
        }
        /* highjump */

        /* longjump */
        #longtri1{
            margin-left: 160px;
        }
        #sub-long1{
            width: 300px;
            margin-left: 160px;
        }

        #longtri2{
            margin-left: 280px;
        }
        #sub-long2{
            width: 300px;
            margin-left: 280px;
        }

        #longtri3{
            margin-top: 400px;
            margin-left: -352px;
        }
        #sub-long3{
            width: 300px;
            margin-left: -352px;
        }

        #longtri4{
            margin-top: 400px;
            margin-left: -230px;
        }
        #sub-long4{
            width: 300px;
            margin-left: -230px;
        }

        #longtri5{
            margin-left: 160px;
            margin-top: -40px;
        }
        #sub-long5{
            width: 300px;
            margin-left: 160px;
        }

        #longtri6{
            margin-left: 280px;
            margin-top: -40px;
        }
        #sub-long6{
            width: 300px;
            margin-left: 280px;
        }

        #longtri7{
            margin-top: 330px;
            margin-left: -352px;
        }
        #sub-long7{
            width: 300px;
            margin-left: -352px;
        }

        #longtri8{
            margin-top: 330px;
            margin-left: -230px;
        }
        #sub-long8{
            width: 300px;
            margin-left: -230px;
        }
        /* longjump */
    /* sporteq */

    /* sporttech */
    #fop-var{
        margin-left: 150px;
    }

    #fop-fs{
        margin-left: 205px;
        margin-top: 20px;
    }

    #fop-es{
        margin-top: 400px;
        margin-left: -530px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            margin-left: -85px;
        }

        .judul-var{
            width: 650px;
            margin-left: -170px;
        }

        .sub-var{
            font-size: 17pt;
        }
        /* var */

        /* fusiionsport */
        #ssp1{
            width: 300px !important;
            height: 300px !important;
            margin-left: -40px;
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -40px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -40px;
        }

        #ssp2{
            width: 300px !important;
            height: 300px !important;
            margin-left: -40px;
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -40px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -40px;
        }

        #ssp3{
            width: 300px !important;
            height: 300px !important;
            margin-left: -40px;
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -40px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -40px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            margin-left: -70px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -70px;
            font-size: 23pt;
            width: 400px;
        }

        #esub2{
            margin-left: 75px;
            margin-top: 0px;
        }
        #sub-esub2{
            margin-left: 75px;
            font-size: 23pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 20pt;
        }
        /* esub */
    /* sporttech */

    /* service */
    .ser-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .ser-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #ser-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 19pt;
        position: absolute;
        width: 200px;
        margin-left: 130px;
    }

    #ser-tick{
        margin-left: 150px;
    }

    #ser-op{
        margin-left: 205px;
    }

    #ser-rent{
        margin-left: -530px;
        margin-top: 400px;
    }

        /* rental */
        .rental{
            width: 455px;
            margin-left: -155px;
            margin-top: 30px;
        }
        
        .rentals{
            width: 455px;
            margin-left: -80px;
            margin-top: 30px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -153px;
        }

        .sub-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -153px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -80px;
        }

        #sj-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -80px;
        }
        /* rental */
    /* service */
/* products */
}

@media (max-width: 992px){
    #container-all{
        margin-top: -60px;
    }

    #hidden-menu{
        background-color: #fdfdfdc2 !important;
        text-align: center;
        margin-left: -10px;
        margin-top: -70px;
    }

    .navbar-collapse{
        height: 185px;
    }

    .navbar-toggler{
        position: relative;
        top: 10px;
    }

    #carouselExampleIndicators{
        margin-top: -60px;
    }

    .carousel-inner {
        margin-top: -1px;
        height: 45%;
        position: relative;
    }

/* Products */
.judulproduk{
    margin-top: 10px;
    font-size: 40pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

.subjudulp{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
}

#products-galery{
    margin-top: 20px;
}

#baris-galeri{
    padding-bottom: 20px;
}

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 677px;
        height: 391px;
        margin-left: 140px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 677px;
    }

    .img-sub{
        display: block;
        width: 677px;
        height: 391px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 391px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        margin-left: 250px;
        width: 300px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-akh{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-ak:hover .kot-akh{
        width: 5%;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-aki{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-aka:hover .kot-aki{
        width: 5%;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
        z-index: 500;
    }

    #breakah{
        padding-bottom: 10px;
    }
    /* products hover bagian kanan */

    /* fop */
    #ser-nat{
        margin-left: 130px;
    }

    #ser-syn{
        margin-left: 205px;
    }

    #ser-squ{
        margin-top: 400px;
        margin-left: -530px;
    }

    .judulfop{
        margin-top: 50px;
        font-size: 35pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .subjudulfop{
        font-size: 19pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;   
    }

    .fop-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: -30px;
        margin-top: 20px;
    }

    .fop-akh{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 300px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: 50px;
        margin-top: 20px;
    }

    .fop-aki{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 300px;
    }

    #breakfop{
        padding-bottom: 90px;
    }

        /* natural grass */
        .img-grass{
            margin-left: 0px;
        }

        #sub-nat{
            padding-bottom: 30px;
            font-weight: 400;
            width: 200px;
            font-size: 18pt;
            text-align: center;
        }

        #judul-nat{
            width: 200px;
        }
        /* natural grass */

        /* synthetic grass */
        .judulgrass{
            padding-bottom: 20px;
        }

        .sub-grassess{
            font-size: 19pt;
            width: 250px;
            text-align: justify;
            font-weight: 300;
        }

        .sub-grassess{
            width: 250px;
            margin-left: 0px;
        }

        .grasses{
            font-size: 23pt;
            font-weight: bolder;
            width: 250px;
            margin-left: 0px;
        }

        .img-grasssyn {
            margin-top: 40px;
            margin-left: -15px;
            margin-bottom: 30px;
        }

        #img-aqua{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #aqua-turf{
            margin-left: 8px !important;
            margin-top: 50px;
        }

        #img-olimpia{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #olimpia-cool{
            margin-left: -65px !important;
            margin-top: 50px; 
        }

        #img-platinum{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px; 
        }
        #platinum-cool{
            margin-left: -65px !important;
            margin-top: 50px;
        }

        #img-rs240{
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #rs240{
            margin-left: 8px !important;
            margin-top: -70px;
        }

        #img-rs260{
            margin-top: -5px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #rs260{
            margin-left: -65px !important;
            margin-top: -70px;
        }

        #img-ulti{
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #ultimate{
            margin-left: -65px !important;
            margin-top: -70px;
        }
        /* synthetic grass */

        /* squash */
        #img-squash{
            width: 933px !important;
            height: 524px !important;
            margin-left: 15px;
        }
        /* squash */
    /* fop */

    /* sporteq */

        /* trackfield */
        #foptr1{
            margin-left: 145px;
        }
        #sub-fop1{
            width: 300px;
            margin-left: 145px;
        }

        #foptr2{
            margin-left: 270px;
        }
        #sub-fop2{
            width: 300px;
            margin-left: 270px;
        }

        #foptr3{
            margin-top: 400px;
            margin-left: -350px;
        }
        #sub-fop3{
            width: 300px;
            margin-left: -350px;
        }

        #foptr4{
            margin-top: 400px;
            margin-left: -225px;
        }
        #sub-fop4{
            width: 300px;
            margin-left: -225px;
        }

        #foptr5{
            margin-left: 145px;
        }
        #sub-fop5{
            width: 300px;
            margin-left: 145px;
        }

        #foptr6{
            margin-left: 270px;
        }
        #sub-fop6{
            width: 300px;
            margin-left: 270px;
        }

        #foptr7{
            margin-top: 370px;
            margin-left: -350px;
        }
        #sub-fop7{
            width: 300px;
            margin-left: -350px;
        }

        #foptr8{
            margin-top: 370px;
            margin-left: -225px;
        }
        #sub-fop8{
            width: 300px;
            margin-left: -225px;
        }
        /* trackfield */

        /* bench */
        #benchfop1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 145px; 
        }
        #sub-bench1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 145px;
        }

        #benchfop2{
            height: 250px !important;
            width: 250px !important;
            margin-left: 320px;
        }
        #sub-bench2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 320px;
        }

        #benchfop3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -355px;
            margin-top: 350px;
        }
        #sub-bench3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -355px;
        }

        #benchfop4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -175px;
            margin-top: 350px;
        }
        #sub-bench4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -175px;
        }

        #benchfop5{
            height: 250px !important;
            width: 250px !important;
            margin-left: -105px;
            margin-top: 50px;
        }
        #sub-bench5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -105px;
        }

        #benchfop6{
            height: 250px !important;
            width: 250px !important;
            margin-left: 70px;
            margin-top: 50px;
        }
        #sub-bench6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 70px;
        }

        #benchfop7{
            height: 250px !important;
            width: 250px !important;
            margin-left: 145px;
            margin-top: 20px;
        }
        #sub-bench7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 145px;
        }

        #benchfop8{
            height: 250px !important;
            width: 250px !important;
            margin-left: 320px;
            margin-top: 20px;
        }
        #sub-bench8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 320px;
        }

        #benchfop9{
            height: 250px !important;
            width: 250px !important;
            margin-top: 350px;
            margin-left: -355px;
        }
        #sub-bench9{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -355px;
        }

        #benchfop10{
            height: 250px !important;
            width: 250px !important;
            margin-left: -175px;
            margin-top: 350px;
        }
        #sub-bench10{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -175px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            height: 301px !important;
            width: 501px !important;
            margin-left: 230px; 
        }
        #sub-hp1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 230px;
        }

        #fophp2{
            height: 301px !important;
            width: 501px !important;
            margin-left: -100px; 
            margin-top: 370px;
        }
        #sub-hp2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -100px;
        }

        #fophp3{
            height: 301px !important;
            width: 501px !important;
            margin-left: -430px; 
            margin-top: 740px;
        }
        #sub-hp3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -430px;
        }

        #fophp4{
            height: 301px !important;
            width: 501px !important;
            margin-left: 230px; 
            margin-top: -15px;
        }
        #sub-hp4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 230px;
        }

        #fophp5{
            height: 301px !important;
            width: 501px !important;
            margin-left: -100px; 
            margin-top: 350px;
        }
        #sub-hp5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -100px;
        }

        #fophp6{
            height: 301px !important;
            width: 501px !important;
            margin-left: -430px; 
            margin-top: 720px;
        }
        #sub-hp6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -430px;
        }
        /* highjump */

        /* longjump */
        #longtri1{
            margin-left: 135px;
        }
        #sub-long1{
            width: 300px;
            margin-left: 135px;
        }

        #longtri2{
            margin-left: 280px;
        }
        #sub-long2{
            width: 300px;
            margin-left: 280px;
        }

        #longtri3{
            margin-top: 400px;
            margin-left: -360px;
        }
        #sub-long3{
            width: 300px;
            margin-left: -360px;
        }

        #longtri4{
            margin-top: 400px;
            margin-left: -215px;
        }
        #sub-long4{
            width: 300px;
            margin-left: -215px;
        }

        #longtri5{
            margin-left: 135px;
            margin-top: -40px;
        }
        #sub-long5{
            width: 300px;
            margin-left: 135px;
        }

        #longtri6{
            margin-left: 280px;
            margin-top: -40px;
        }
        #sub-long6{
            width: 300px;
            margin-left: 280px;
        }

        #longtri7{
            margin-top: 330px;
            margin-left: -360px;
        }
        #sub-long7{
            width: 300px;
            margin-left: -360px;
        }

        #longtri8{
            margin-top: 330px;
            margin-left: -215px;
        }
        #sub-long8{
            width: 300px;
            margin-left: -215px;
        }
        /* longjump */
    /* sporteq */

    /* sporttech */
    #fop-var{
        margin-left: 130px;
    }

    #fop-fs{
        margin-left: 205px;
        margin-top: 20px;
    }

    #fop-es{
        margin-top: 400px;
        margin-left: -530px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            margin-left: -85px;
            margin-top: 30px;
        }

        .judul-var{
            font-size: 25pt;
            width: 600px;
            margin-left: -150px;
        }

        .sub-var{
            font-size: 17pt;
            margin-left: 15px;
            margin-top: -20px;
            width: 600px;
        }
        /* var */

        /* fusiionsport */
        #ssp1{
            width: 300px !important;
            height: 300px !important;
            margin-left: -40px;
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -40px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -40px;
        }

        #ssp2{
            width: 300px !important;
            height: 300px !important;
            margin-left: -40px;
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -40px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -40px;
        }

        #ssp3{
            width: 300px !important;
            height: 300px !important;
            margin-left: -40px;
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -40px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -40px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            margin-left: -80px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -80px;
            font-size: 23pt;
            width: 400px;
        }

        #esub2{
            margin-left: 65px;
            margin-top: 0px;
        }
        #sub-esub2{
            margin-left: 65px;
            font-size: 23pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 20pt;
        }
        /* esub */
    /* sporttech */

    /* service */
    .ser-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .ser-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #ser-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 19pt;
        position: absolute;
        width: 200px;
        margin-left: 130px;
    }

    #ser-tick{
        margin-left: 130px;
    }

    #ser-op{
        margin-left: 205px;
    }

    #ser-rent{
        margin-left: -530px;
        margin-top: 400px;
    }

        /* rental */
        .rental{
            width: 455px;
            margin-left: -155px;
            margin-top: 30px;
        }
        
        .rentals{
            width: 455px;
            margin-left: -80px;
            margin-top: 30px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -153px;
        }

        .sub-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -153px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 455px;
            margin-left: -80px;
        }

        #sj-rental{
            width: 455px;
            font-size: 19pt;
            margin-left: -80px;
        }
        /* rental */
    /* service */

/* Products */
}

@media (max-width: 877px){
    #container-all{
        margin-top: -25px;
    }

    #carouselExampleIndicators{
        margin-top: -25px;
    }
/* Home */
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
        margin-left: -160px;
        margin-top: -10px;
    }

    .navbar-toggler{
        position: relative;
        top: -40px;
    }

    .nav-margin-top{
        margin-top: 60px;
    }   

    .carousel-inner{
        margin-top: -30px;
        height: 59%;
        position: relative;
    }

    #navbarSupportedContent{
        text-align: center;
        padding-top: 10px;
        height: 300px;
    }
/* Home */

/* Products */
.judulproduk{
    margin-top: 10px;
    font-size: 40pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

.subjudulp{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
}

#products-galery{
    margin-top: 20px;
}

#baris-galeri{
    padding-bottom: 15px;
}

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 677px;
        height: 391px;
        margin-left: 85px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 677px;
    }

    .img-sub{
        display: block;
        width: 677px;
        height: 391px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 391px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        margin-left: 250px;
        width: 300px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-akh{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-ak:hover .kot-akh{
        width: 5%;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-aki{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-aka:hover .kot-aki{
        width: 5%;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
        z-index: 500;
    }

    #breakah{
        padding-bottom: 10px;
    }
    /* products hover bagian kanan */

    /* fop */
    #ser-nat{
        margin-left: 80px;
    }

    #ser-syn{
        margin-left: 160px;
    }

    #ser-squ{
        margin-top: 400px;
        margin-left: -505px;
    }

    .judulfop{
        margin-top: 50px;
        font-size: 35pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .subjudulfop{
        font-size: 19pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;   
    }

    .fop-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: -50px;
        margin-top: 20px;
    }

    .fop-akh{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 300px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: 35px;
        margin-top: 20px;
    }

    .fop-aki{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 300px;
    }

    #breakfop{
        padding-bottom: 100px;
    }

        /* natural grass */
        .img-grass{
            margin-left: 0px;
        }

        #sub-nat{
            padding-bottom: 30px;
            font-weight: 400;
            width: 200px;
            font-size: 18pt;
            text-align: center;
            margin-left: 0px;
        }

        #judul-nat{
            width: 200px;
            margin-left: 0px;
        }
        /* natural grass */

        /* synthetic grass */
        .judulgrass{
            padding-bottom: 20px;
        }

        .sub-grassess{
            font-size: 19pt;
            width: 250px;
            text-align: justify;
            font-weight: 300;
        }

        .sub-grassess{
            width: 250px;
            margin-left: 0px;
            
        }

        .grasses{
            font-size: 23pt;
            font-weight: bolder;
            width: 250px;
            margin-left: 0px;
        }

        .img-grasssyn {
            margin-top: 40px;
            margin-left: -15px;
            margin-bottom: 30px;
        }

        #img-aqua{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #aqua-turf{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-olimpia{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #olimpia-cool{
            margin-left: -65px !important;
            margin-top: 50px; 
        }

        #img-platinum{
            margin-top: -10px;
            margin-left: 2px;
            width: 249px;
            height: 223px; 
        }
        #platinum-cool{
            margin-left: -65px !important;
            margin-top: 50px;
        }

        #img-rs240{
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #rs240{
            margin-left: 0px !important;
            margin-top: -70px;
        }

        #img-rs260{
            margin-top: -5px;
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #rs260{
            margin-left: -65px !important;
            margin-top: -70px;
        }

        #img-ulti{
            margin-left: 2px;
            width: 249px;
            height: 223px;
        }
        #ultimate{
            margin-left: -65px !important;
            margin-top: -70px;
        }
        /* synthetic grass */

        /* squash */
        #img-squash{
            width: 726px !important;
            height: 408px !important;
            margin-left: 65px;
        }
        /* squash */
    /* fop */

    /* sporteq */
    .eq-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .eq-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #eq-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

        /* trackfield */
        #foptr1{
            margin-left: 85px;
        }
        #sub-fop1{
            width: 300px;
            margin-left: 85px;
        }

        #foptr2{
            margin-left: 250px;
        }
        #sub-fop2{
            width: 300px;
            margin-left: 250px;
        }

        #foptr3{
            margin-top: 400px;
            margin-left: -353px;
        }
        #sub-fop3{
            width: 300px;
            margin-left: -353px;
        }

        #foptr4{
            margin-top: 400px;
            margin-left: -188px;
        }
        #sub-fop4{
            width: 300px;
            margin-left: -188px;
        }

        #foptr5{
            margin-left: 85px;
        }
        #sub-fop5{
            width: 300px;
            margin-left: 85px;
        }

        #foptr6{
            margin-left: 250px;
        }
        #sub-fop6{
            width: 300px;
            margin-left: 250px;
        }

        #foptr7{
            margin-top: 370px;
            margin-left: -353px;
        }
        #sub-fop7{
            width: 300px;
            margin-left: -353px;
        }

        #foptr8{
            margin-top: 370px;
            margin-left: -188px;
        }
        #sub-fop8{
            width: 300px;
            margin-left: -188px;
        }
        /* trackfield */

        /* bench */
        #benchfop1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 125px; 
        }
        #sub-bench1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 125px;
        }

        #benchfop2{
            height: 250px !important;
            width: 250px !important;
            margin-left: 270px;
        }
        #sub-bench2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 270px;
        }

        #benchfop3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -313px;
            margin-top: 350px;
        }
        #sub-bench3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -312px;
        }

        #benchfop4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -168px;
            margin-top: 350px;
        }
        #sub-bench4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -165px;
        }

        #benchfop5{
            height: 250px !important;
            width: 250px !important;
            margin-left: -95px;
            margin-top: 50px;
        }
        #sub-bench5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -95px;
        }

        #benchfop6{
            height: 250px !important;
            width: 250px !important;
            margin-left: 50px;
            margin-top: 50px;
        }
        #sub-bench6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 50px;
        }

        #benchfop7{
            height: 250px !important;
            width: 250px !important;
            margin-left: 125px;
            margin-top: 20px;
        }
        #sub-bench7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 125px;
        }

        #benchfop8{
            height: 250px !important;
            width: 250px !important;
            margin-left: 278px;
            margin-top: 20px;
        }
        #sub-bench8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 278px;
        }

        #benchfop9{
            height: 250px !important;
            width: 250px !important;
            margin-top: 350px;
            margin-left: -305px;
        }
        #sub-bench9{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -300px;
        }

        #benchfop10{
            height: 250px !important;
            width: 250px !important;
            margin-left: -165px;
            margin-top: 350px;
        }
        #sub-bench10{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -165px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            height: 301px !important;
            width: 501px !important;
            margin-left: 180px; 
        }
        #sub-hp1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 180px;
        }

        #fophp2{
            height: 301px !important;
            width: 501px !important;
            margin-left: -112px; 
            margin-top: 370px;
        }
        #sub-hp2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -112px;
        }

        #fophp3{
            height: 301px !important;
            width: 501px !important;
            margin-left: -404px; 
            margin-top: 740px;
        }
        #sub-hp3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -404px;
        }

        #fophp4{
            height: 301px !important;
            width: 501px !important;
            margin-left: 180px; 
            margin-top: -15px;
        }
        #sub-hp4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 180px;
        }

        #fophp5{
            height: 301px !important;
            width: 501px !important;
            margin-left: -112px; 
            margin-top: 350px;
        }
        #sub-hp5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -112px;
        }

        #fophp6{
            height: 301px !important;
            width: 501px !important;
            margin-left: -404px; 
            margin-top: 715px;
        }
        #sub-hp6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -404px;
        }
        /* highjump */

        /* longjump */
        #longtri1{
            margin-left: 85px;
        }
        #sub-long1{
            width: 300px;
            margin-left: 85px;
        }

        #longtri2{
            margin-left: 250px;
        }
        #sub-long2{
            width: 300px;
            margin-left: 250px;
        }

        #longtri3{
            margin-top: 400px;
            margin-left: -353px;
        }
        #sub-long3{
            width: 300px;
            margin-left: -353px;
        }

        #longtri4{
            margin-top: 400px;
            margin-left: -188px;
        }
        #sub-long4{
            width: 300px;
            margin-left: -188px;
        }

        #longtri5{
            margin-left: 85px;
            margin-top: -40px;
        }
        #sub-long5{
            width: 300px;
            margin-left: 85px;
        }

        #longtri6{
            margin-left: 250px;
            margin-top: -40px;
        }
        #sub-long6{
            width: 300px;
            margin-left: 250px;
        }

        #longtri7{
            margin-top: 330px;
            margin-left: -353px;
        }
        #sub-long7{
            width: 300px;
            margin-left: -353px;
        }

        #longtri8{
            margin-top: 330px;
            margin-left: -188px;
        }
        #sub-long8{
            width: 300px;
            margin-left: -188px;
        }
        /* longjump */
    /* sporteq */

    /* sport technology */
    #fop-var{
        margin-left: 80px;
    }

    #fop-fs{
        margin-left: 160px;
        margin-top: 20px;
    }

    #fop-es{
        margin-top: 400px;
        margin-left: -505px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            margin-left: -110px;
            margin-top: 30px;
        }

        .judul-var{
            font-size: 25pt;
            width: 600px;
            margin-left: -160px;
        }

        .sub-var{
            font-size: 17pt;
            margin-left: -15px;
            margin-top: -20px;
            width: 600px;
        }
        /* var */

        /* fusiionsport */
        #ssp1{
            width: 250px !important;
            height: 250px !important;
            margin-left: -29px;
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 250px;
            margin-left: -30px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 250px;
            margin-left: -30px;
        }

        #ssp2{
            width: 250px !important;
            height: 250px !important;
            margin-left: -29px;
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 250px;
            margin-left: -30px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 250px;
            margin-left: -30px;
        }

        #ssp3{
            width: 250px !important;
            height: 250px !important;
            margin-left: -29px;
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 250px;
            margin-left: -30px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 250px;
            margin-left: -30px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            margin-left: -100px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -100px;
            font-size: 23pt;
            width: 400px;
        }

        #esub2{
            margin-left: 40px;
            margin-top: 0px;
        }
        #sub-esub2{
            margin-left: 40px;
            font-size: 23pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 20pt;
        }
        /* esub */
    /* sport technology */

    /* service */
    .ser-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .ser-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #ser-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 19pt;
        position: absolute;
        width: 200px;
        margin-left: 130px;
    }

    #ser-tick{
        margin-left: 80px;
    }

    #ser-op{
        margin-left: 160px;
    }

    #ser-rent{
        margin-left: -505px;
        margin-top: 400px;
    }

        /* rental */
        .rental{
            width: 455px;
            margin-left: 55px;
            margin-top: 30px;
        }
        
        .rentals{
            width: 455px;
            margin-left: -315px;
            margin-top: 600px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 700px;
            margin-left: -70px;
        }

        .sub-rental{
            width: 700px;
            font-size: 19pt;
            margin-left: -70px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 700px;
            margin-left: -435px;
        }

        #sj-rental{
            width: 700px;
            font-size: 19pt;
            margin-left: -435px;
        }
        /* rental */
    /* service */

/* Products */

/* About */
.logo-sti{
    width: 90%;
    margin-left: 15px;
    position: relative;
    z-index: 1000;
    margin-top: 30px;
}

.jabout{
    margin-top: 40px;
    font-size: 40pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    text-transform: uppercase;
}

.aboutp{
    /* margin-right: -200px; */
    /* background-color: black; */
    margin-top: -10px;
    /* color: white; */
    font-size: 20pt;
    font-family: Rajdhani;
    text-align: center;
}

.visi{
    margin-top: 30px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 40pt;
}

.visip{
    font-family: Rajdhani;
    text-align: center;
    font-size: 20pt;
    
}

.misi{
    margin-top: 40px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 40pt;
}

.misip{
    
    font-family: Rajdhani;
    text-align: center;
    font-size: 20pt;
}
/* About */

/* Contact */
#contactuz{
    padding-top: 35px;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 40pt;
}

#kolom-kiri{
    margin-top: 20px;
    height: 400px;
}

#kolom-kanan{
    margin-top: 85px;
}
/* Contact */

/* Shop */
#barang{
    margin: 0 auto;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 40pt;
    padding-top: 250px;
    padding-bottom: 200px;
    
}
/* Shop */
}

@media (max-width: 767px){
    #container-all{
        margin-top: 0px;
    }

    #carouselExampleIndicators{
        margin-top: 0px;
    }
/* Home */
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
        margin-left: 10px;
    }

    .navbar-toggler{
        position: relative;
        top: -40px;
    }

    .nav-margin-top{
        margin-top: -50px;
    }   

    #navbarSupportedContent{
        text-align: center;
        padding-top: 10px;
        height: 270px;
    }

    .carousel-inner{
        margin-top: -6px;
        height: 59%;
        position: relative;
    }
/* Home */

/* Products */
.judulproduk{
    margin-top: 10px;
    font-size: 40pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

.subjudulp{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
}

#products-galery{
    margin-top: 20px;
}

#baris-galeri{
    padding-bottom: 15px;
}

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 677px;
        height: 391px;
        margin-left: 30px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 677px;
    }

    .img-sub{
        display: block;
        width: 677px;
        height: 391px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 391px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        margin-left: 250px;
        width: 300px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-akh{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-ak:hover .kot-akh{
        width: 5%;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-aki{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-aka:hover .kot-aki{
        width: 5%;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
        z-index: 500;
    }

    #breakah{
        padding-bottom: 10px;
    }
    /* products hover bagian kanan */

    /* fop */

    #ser-nat{
        margin-left: 220px;
    }

    #ser-syn{
        margin-left: 220px;
        margin-top: 30px;
    }

    #ser-squ{
        margin-left: 220px;
        margin-top: 30px;
    }

    .judulfop{
        margin-top: 50px;
        font-size: 35pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .subjudulfop{
        font-size: 19pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;   
    }

    .fop-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: 220px;
        margin-top: 20px;
    }

    .fop-akh{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 300px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: 220px;
        margin-top: 20px;
    }

    .fop-aki{
        width: 0px;
        height: 300px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 300px;
    }

    #breakfop{
        padding-bottom: 200px;
    }

        /* natural grass */
        .img-grass{
            margin-left: 215px;
        }

        .sub-grass{
            width: 720px;
            margin-left: 0px;
        }

        #judul-nat{
            width: 720px;
        }

        #sub-nat{
            padding-bottom: 30px;
            font-weight: 400;
            width: 720px;
        }
        /* natural grass */

        /* synthetic grass */
        .judulgrass{
            padding-bottom: 20px;
        }

        .sub-grassess{
            font-size: 19pt;
            width: 720px;
            margin-left: 0px;
        }

        .grasses{
            font-size: 23pt;
            font-weight: bolder;
            width: 720px;
        }

        .img-grasssyn {
            margin-top: 40px;
            margin-left: 215px;
            margin-bottom: 30px;
        }

        #img-aqua{
            margin-top: -35px;
            margin-left: 230px;
        }
        #aqua-turf{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-olimpia{
            margin-top: -35px;
            margin-left: 230px;
        }
        #olimpia-cool{
            margin-left: 0px !important;
            margin-top: 50px; 
        }

        #img-platinum{
            margin-top: -35px;
            margin-left: 230px;  
        }
        #platinum-cool{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-rs240{
            margin-left: 230px;
        }
        #rs240{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-rs260{
            margin-top: -5px;
            margin-left: 230px;
        }
        #rs260{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-ulti{
            margin-left: 230px;
        }
        #ultimate{
            margin-left: 0px !important;
            margin-top: 50px;
        }
        /* synthetic grass */

        /* squash */
        #img-squash{
            width: 726px !important;
            height: 408px !important;
            margin-left: 5px;
        }
        /* squash */
    /* fop */

    /* sporteq */
    .eq-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .eq-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #eq-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

        /* trackfield */
        #foptr1{
            margin-left: 40px;
        }
        #sub-fop1{
            width: 300px;
            margin-left: 40px;
        }

        #foptr2{
            margin-left: 205px;
        }
        #sub-fop2{
            width: 300px;
            margin-left: 205px;
        }

        #foptr3{
            margin-top: 400px;
            margin-left: -343px;
        }
        #sub-fop3{
            width: 300px;
            margin-left: -343px;
        }

        #foptr4{
            margin-top: 400px;
            margin-left: -178px;
        }
        #sub-fop4{
            width: 300px;
            margin-left: -178px;
        }

        #foptr5{
            margin-left: 40px;
        }
        #sub-fop5{
            width: 300px;
            margin-left: 40px;
        }

        #foptr6{
            margin-left: 205px;
        }
        #sub-fop6{
            width: 300px;
            margin-left: 205px;
        }

        #foptr7{
            margin-top: 370px;
            margin-left: -343px;
        }
        #sub-fop7{
            width: 300px;
            margin-left: -343px;
        }

        #foptr8{
            margin-top: 370px;
            margin-left: -178px;
        }
        #sub-fop8{
            width: 300px;
            margin-left: -178px;
        }
        /* trackfield */

        /* bench */
        #benchfop1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 70px; 
        }
        #sub-bench1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 70px;
        }

        #benchfop2{
            height: 250px !important;
            width: 250px !important;
            margin-left: 215px;
        }
        #sub-bench2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 215px;
        }

        #benchfop3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -313px;
            margin-top: 350px;
        }
        #sub-bench3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -312px;
        }

        #benchfop4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -168px;
            margin-top: 350px;
        }
        #sub-bench4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -165px;
        }

        #benchfop5{
            height: 250px !important;
            width: 250px !important;
            margin-left: -120px;
            margin-top: 50px;
        }
        #sub-bench5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -120px;
        }

        #benchfop6{
            height: 250px !important;
            width: 250px !important;
            margin-left: 25px;
            margin-top: 50px;
        }
        #sub-bench6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 25px;
        }

        #benchfop7{
            height: 250px !important;
            width: 250px !important;
            margin-left: 75px;
            margin-top: 20px;
        }
        #sub-bench7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 75px;
        }

        #benchfop8{
            height: 250px !important;
            width: 250px !important;
            margin-left: 220px;
            margin-top: 20px;
        }
        #sub-bench8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: 220px;
        }

        #benchfop9{
            height: 250px !important;
            width: 250px !important;
            margin-top: 350px;
            margin-left: -305px;
        }
        #sub-bench9{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -300px;
        }

        #benchfop10{
            height: 250px !important;
            width: 250px !important;
            margin-left: -165px;
            margin-top: 350px;
        }
        #sub-bench10{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 250px;
            margin-left: -165px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            height: 301px !important;
            width: 501px !important;
            margin-left: 110px; 
        }
        #sub-hp1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 110px;
        }

        #fophp2{
            height: 301px !important;
            width: 501px !important;
            margin-left: 110px; 
            margin-top: 10px;
        }
        #sub-hp2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 110px;
            
        }

        #fophp3{
            height: 301px !important;
            width: 501px !important;
            margin-left: 110px; 
            margin-top: 10px;
        }
        #sub-hp3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 110px;
        }

        #fophp4{
            height: 301px !important;
            width: 501px !important;
            margin-left: -82px; 
            margin-top: 375px;
        }
        #sub-hp4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: -73px;
        }

        #fophp5{
            height: 301px !important;
            width: 501px !important;
            margin-left: 110px; 
            margin-top: 10px;
        }
        #sub-hp5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 110px;
        }

        #fophp6{
            height: 301px !important;
            width: 501px !important;
            margin-left: 110px; 
            margin-top: 10px;
        }
        #sub-hp6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 500px;
            margin-left: 110px;
        }
        /* highjump */

        /* longjump */
        #longtri1{
            margin-left: 40px;
        }
        #sub-long1{
            width: 300px;
            margin-left: 40px;
        }

        #longtri2{
            margin-left: 205px;
        }
        #sub-long2{
            width: 300px;
            margin-left: 205px;
        }

        #longtri3{
            margin-top: 400px;
            margin-left: -343px;
        }
        #sub-long3{
            width: 300px;
            margin-left: -343px;
        }

        #longtri4{
            margin-top: 400px;
            margin-left: -178px;
        }
        #sub-long4{
            width: 300px;
            margin-left: -178px;
        }

        #longtri5{
            margin-left: 40px;
        }
        #sub-long5{
            width: 300px;
            margin-left: 40px;
        }

        #longtri6{
            margin-left: 205px;
        }
        #sub-long6{
            width: 300px;
            margin-left: 205px;
        }

        #longtri7{
            margin-top: 370px;
            margin-left: -343px;
        }
        #sub-long7{
            width: 300px;
            margin-left: -343px;
        }

        #longtri8{
            margin-top: 370px;
            margin-left: -178px;
        }
        #sub-long8{
            width: 300px;
            margin-left: -178px;
        }
        /* longjump */
    /* sporteq */

    /* sport technology */
    #fop-var{
        margin-left: 220px;
    }

    #fop-fs{
        margin-left: 220px;
        margin-top: 30px;
    }

    #fop-es{
        margin-left: 220px;
        margin-top: 30px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            margin-left: 130px;
            margin-top: 30px;
        }

        .judul-var{
            font-size: 25pt;
            width: 720px;
            margin-left: 10px;
        }

        .sub-var{
            font-size: 17pt;
            margin-left: -215px;
            margin-top: 350px;
            width: 660px;
        }
        /* var */

        /* fusiionsport */
        #ssp1{
            width: 250px !important;
            height: 250px !important;
            margin-left: -45px;
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 200px;
            margin-left: -20px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 200px;
            margin-left: -20px;
        }

        #ssp2{
            width: 250px !important;
            height: 250px !important;
            margin-left: -45px;
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 200px;
            margin-left: -20px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 200px;
            margin-left: -20px;
        }

        #ssp3{
            width: 250px !important;
            height: 250px !important;
            margin-left: -45px;
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 200px;
            margin-left: -20px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 16pt;
            font-weight: 400;
            text-align: justify;
            width: 200px;
            margin-left: -20px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            margin-left: -140px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -140px;
            font-size: 23pt;
            width: 400px;
        }

        #esub2{
            margin-left: 25px;
            margin-top: 0px;
        }
        #sub-esub2{
            margin-left: 25px;
            font-size: 23pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 19pt;
        }
        /* esub */
    /* sport technology */

    /* service */
    #ser-tick{
        margin-left: 220px;
    }

    #ser-op{
        margin-left: 220px;
        margin-top: 30px;
    }

    #ser-rent{
        margin-left: 220px;
        margin-top: 30px;
    }

    .ser-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .ser-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #ser-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 19pt;
        position: absolute;
        width: 200px;
        margin-left: 130px;
    }

        /* rental */
        .rental{
            width: 455px;
            margin-left: 15px;
            margin-top: 30px;
        }
        
        .rentals{
            width: 455px;
            margin-left: -303px;
            margin-top: 600px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 600px;
            margin-left: -55px;
        }

        .sub-rental{
            width: 600px;
            font-size: 19pt;
            margin-left: -55px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 600px;
            margin-left: -372px;
        }

        #sj-rental{
            width: 600px;
            font-size: 19pt;
            margin-left: -372px;
        }
        /* rental */ 
    /* service */
/* Products */

/* About */
.logo-sti{
    width: 90%;
    margin-left: 15px;
    position: relative;
    z-index: 1000;
    margin-top: 30px;
}

.jabout{
    margin-top: 40px;
    font-size: 40pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    text-transform: uppercase;
}

.aboutp{
    /* margin-right: -200px; */
    /* background-color: black; */
    margin-top: -10px;
    /* color: white; */
    font-size: 20pt;
    font-family: Rajdhani;
    text-align: center;
}

.visi{
    margin-top: 30px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 40pt;
}

.visip{
    font-family: Rajdhani;
    text-align: center;
    font-size: 20pt;
    
}

.misi{
    margin-top: 40px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 40pt;
}

.misip{
    
    font-family: Rajdhani;
    text-align: center;
    font-size: 20pt;
}
/* About */

/* Contact */
#contactuz{
    padding-top: 35px;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 40pt;
}

#kolom-kiri{
    margin-top: 20px;
    height: 400px;
}

#kolom-kanan{
    margin-top: 85px;
}
/* Contact */

/* Shop */
#barang{
    margin: 0 auto;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 40pt;
    padding-top: 250px;
    padding-bottom: 200px;
    
}
/* Shop */
}


@media (max-width: 576px) {
/* Home */
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
        margin-left: 10px;
    }

    .navbar-toggler{
        /* margin-left: 320px; */
        margin-top: 25px;
        position: relative;
        top: -40px;
    }

    .carousel-inner{
        margin-top: -21px;
        height: 100%;
        position: relative;
    }
    
    .carousel-inner::after{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, rgb(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
        position: absolute;
        bottom: 0;
        /* z-index: 9; */
    }

    #carouselExampleIndicators{
        height: 27.5%;
    }

    #navbarSupportedContent{
        text-align: center;
        padding-top: 10px;
        height: 280px;
    }

    .collapse{
        text-align: center;
    }

    .navbar-collapse{
        height: 255px;
    }

    .nav-margin-top{
        margin-top: -50px;
    }

    .carousel{
        margin-bottom: -21px;
    }

    .carousel-caption .judul{
        position: relative;
        margin-top: 1000px;
        height: 10000;
        z-index: 1000;
    }
/* Home */

/* Products */
.judulproduk{
    margin-top: 10px;
    font-size: 40pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

.subjudulp{
    font-size: 25pt;
    text-align: center;
    font-family: Rajdhani;
}

#products-galery{
    margin-top: 20px;
}

#baris-galeri{
    padding-bottom: 10px;
}

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 509px;
        height: 294px;
        margin-left: 20px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 509px;
    }

    .img-sub{
        display: block;
        width: 509px;
        height: 294px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 294px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        margin-left: 200px;
        width: 300px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-akh{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-ak:hover .kot-akh{
        width: 5%;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-aki{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-aka:hover .kot-aki{
        width: 5%;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
        z-index: 500;
    }

    #breakah{
        padding-bottom: 10px;
    }
    /* products hover bagian kanan */

    /* fop */
    #ser-nat{
        margin-left: 130px;
    }

    #ser-syn{
        margin-left: 130px;
        margin-top: 30px;
    }

    #ser-squ{
        margin-left: 130px;
        margin-top: 30px;
    }

    .judulfop{
        margin-top: 50px;
        font-size: 35pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .subjudulfop{
        font-size: 19pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;   
    }

    .fop-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 275px;
        height: 275px;
        margin-left: 140px;
        margin-top: 20px;
    }

    .fop-akh{
        width: 0px;
        height: 275px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 275px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 275px;
        height: 275px;
        margin-left: 140px;
        margin-top: 20px;
    }

    .fop-aki{
        width: 0px;
        height: 275px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 275px;
    }

    #breakfop{
        padding-bottom: 200px;
    }

        /* natural grass */
        .img-grass{
            margin-left: 125px;
        }

        .sub-grass{
            width: 550px;
            margin-left: 0px;
        }

        #judul-nat{
            width: 550px;
        }

        #sub-nat{
            width: 550px;
        }
        /* natural grass */

        /* synthetic grass */
        .judulgrass{
            padding-bottom: 20px;
        }

        .sub-grassess{
            font-size: 19pt;
            width: 550px;
            margin-left: 0px;
        }

        .grasses{
            font-size: 23pt;
            font-weight: bold;
            width: 550px;
        }

        .img-grasssyn {
            margin-top: 40px;
            margin-left: 125px;
            margin-bottom: 30px;
        }

        #img-aqua{
            margin-top: -40px;
            margin-left: 120px;
        }
        #aqua-turf{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-olimpia{
            margin-top: -40px;
            margin-left: 120px;
        }
        #olimpia-cool{
            margin-left: 0px !important;
            margin-top: 50px; 
        }

        #img-platinum{
            margin-top: -40px;
            margin-left: 120px;  
        }
        #platinum-cool{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-rs240{
            margin-top: -5px;
            margin-left: 120px;
        }
        #rs240{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-rs260{
            margin-top: -5px;
            margin-left: 120px;
        }
        #rs260{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-ulti{
            margin-top: -5px;
            margin-left: 120px;
        }
        #ultimate{
            margin-left: 0px !important;
            margin-top: 50px;
        }
        /* synthetic grass */

        /* squash */
        .judulsquash {
            margin-top: 40px;
            font-size: 35pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
            padding-bottom: 10px;
        }

        .sub-squash {
            font-family: Rajdhani;
            text-align: center;
            font-weight: 500;
            font-size: 19pt;
            margin-bottom: -30px;
        }

        #img-squash{
            width: 518px !important;
            height: 291px !important;
            margin-left: 15px;
        }
        /* squash */

    /* fop */

    /* sporteq */
    .eq-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .eq-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #eq-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

        /* tracknfield */
        #foptr1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 145px; 
        }
        #sub-fop1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 65px;
        }

        #foptr2{
            height: 250px !important;
            width: 250px !important;
            margin-left: 0px;
            margin-top: 305px;
        }
        #sub-fop2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -72px;
        }

        #foptr3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 610px;
        }
        #sub-fop3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #foptr4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -285px;
            margin-top: 910px;
        }
        #sub-fop4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -360px;
        }

        #foptr5{
            height: 250px !important;
            width: 250px !important;
            margin-left: 145px;
        }
        #sub-fop5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 65px;
        }

        #foptr6{
            height: 250px !important;
            width: 250px !important;
            margin-left: 0px;
            margin-top: 310px;
        }
        #sub-fop6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -72px;
        }

        #foptr7{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 620px;
        }
        #sub-fop7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -220px;
        }

        #foptr8{
            height: 250px !important;
            width: 250px !important;
            margin-left: -285px;
            margin-top: 935px;
        }
        #sub-fop8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -360px;
        }

        .sub-fop{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }
        /* tracknfield */

        /* bench */
        #benchfop1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 150px; 
        }
        #sub-bench1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 70px;
        }

        #benchfop2{
            height: 250px !important;
            width: 250px !important;
            margin-left: 0px;
            margin-top: 310px;
        }
        #sub-bench2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -72px;
        }

        #benchfop3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -143px;
            margin-top: 625px;
        }
        #sub-bench3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #benchfop4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -285px;
            margin-top: 930px;
        }
        #sub-bench4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -350px;
        }

        #benchfop5{
            height: 250px !important;
            width: 250px !important;
            margin-left: -0px;
        }
        #sub-bench5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -72px;
        }

        #benchfop6{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 305px;
        }
        #sub-bench6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #benchfop7{
            height: 250px !important;
            width: 250px !important;
            margin-left: 150px;
        }
        #sub-bench7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 70px;
        }

        #benchfop8{
            height: 250px !important;
            width: 250px !important;
            margin-left: -0px;
            margin-top: 305px;
        }
        #sub-bench8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -72px;
        }

        #benchfop9{
            height: 250px !important;
            width: 250px !important;
            margin-top: 610px;
            margin-left: -143px;
        }
        #sub-bench9{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #benchfop10{
            height: 250px !important;
            width: 250px !important;
            margin-left: -285px;
            margin-top: 920px;
        }
        #sub-bench10{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -350px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            height: 193px !important;
            width: 321px !important;
            margin-left: 110px; 
        }
        #sub-hp1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 70px;
        }

        #fophp2{
            height: 193px !important;
            width: 321px !important;
            margin-left: 110px; 
            margin-top: 20px;
        }
        #sub-hp2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 70px;
        }

        #fophp3{
            height: 193px !important;
            width: 321px !important;
            margin-left: 110px; 
            margin-top: 20px;
        }
        #sub-hp3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 70px;
        }

        #fophp4{
            height: 193px !important;
            width: 321px !important;
            margin-left: -34px; 
            margin-top: 290px;
        }
        #sub-hp4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -73px;
        }

        #fophp5{
            height: 193px !important;
            width: 321px !important;
            margin-left: 110px; 
            margin-top: 20px;
        }
        #sub-hp5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 70px;
        }

        #fophp6{
            height: 193px !important;
            width: 321px !important;
            margin-left: 110px; 
            margin-top: 20px;
        }
        #sub-hp6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 70px;
        }
        /* highjump */

        /* longjump */
        #longtri1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 145px; 
        }
        #sub-long1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 65px;
        }

        #longtri2{
            height: 250px !important;
            width: 250px !important;
            margin-left: 1px;
            margin-top: 310px;
        }
        #sub-long2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -72px;
        }

        #longtri3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 620px;
        }
        #sub-long3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #longtri4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -285px;
            margin-top: 930px;
        }
        #sub-long4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -360px;
        }

        #longtri5{
            height: 250px !important;
            width: 250px !important;
            margin-left: 145px;
            margin-top: 5px;
        }
        #sub-long5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 65px;
        }

        #longtri6{
            height: 250px !important;
            width: 250px !important;
            margin-left: 1px;
            margin-top: 320px;
        }
        #sub-long6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -78px;
        }

        #longtri7{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 630px;
        }
        #sub-long7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #longtri8{
            height: 250px !important;
            width: 250px !important;
            margin-left: -285px;
            margin-top: 939px;
        }
        #sub-long8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -365px;
        }
        /* longjump */
    /* sporteq */

    /* sport technology */
    #fop-var{
        margin-left: 130px;
    }

    #fop-es{
        margin-left: 130px;
        margin-top: 30px;
    }

    #fop-fs{
        margin-left: 130px;
        margin-top: 30px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            width: 398px !important;
            height: 231px !important;
            margin-left: 75px;
            margin-top: 30px;
        }

        .judul-var{
            font-size: 23pt;
            width: 400px;
            margin-left: 75px;
        }

        .sub-var{
            font-size: 17pt;
            margin-left: -120px;
            margin-top: 295px;
            width: 400px;
        }
        /* var */

        /* fusionsport */
        #ssp1{
            width: 250px !important;
            height: 250px !important;
            margin-left: 120px;
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: 45px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 17pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: 45px;
        }

        #ssp2{
            height: 250px !important;
            width: 250px !important;
            margin-left: -70px;
            margin-top: 555px;
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -145px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 17pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -145px;
        }

        #ssp3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -250px;
            margin-top: 1150px;
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -330px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 17pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -330px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            width: 400px !important;
            height: 267px !important;
            margin-left: -20px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -20px;
            font-size: 23pt;
            width: 400px;
        }

        #esub2{
            width: 400px !important;
            height: 267px !important;
            margin-left: -165px;
            margin-top: 310px;
        }
        #sub-esub2{
            margin-left: -165px;
            font-size: 23pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 19pt;
        }
        /* esub */
    /* sport technology */

    /* service */
    #ser-tick{
        margin-left: 130px;
    }

    #ser-op{
        margin-left: 130px;
        margin-top: 30px;
    }

    #ser-rent{
        margin-left: 130px;
        margin-top: 30px;
    }

    .ser-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .ser-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #ser-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 130px;
    }

       /* rental */
       .rental{
            width: 455px;
            margin-left: -50px;
            margin-top: 30px;
        }
        
        .rentals{
            width: 455px;
            margin-left: -285px;
            margin-top: 600px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 400px;
            margin-left: -20px;
        }

        .sub-rental{
            width: 400px;
            font-size: 19pt;
            margin-left: -20px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 400px;
            margin-left: -260px;
        }

        #sj-rental{
            width: 400px;
            font-size: 19pt;
            margin-left: -260px;
        }
        /* rental */ 
    /* service */
/* Products */

/* About */
.logo-sti{
    width: 90%;
    margin-left: 15px;
    position: relative;
    z-index: 1000;
    margin-top: 30px;
}

.jabout{
    margin-top: 40px;
    font-size: 35pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    text-transform: uppercase;
}

.aboutp{
    /* margin-right: -200px; */
    /* background-color: black; */
    margin-top: -10px;
    /* color: white; */
    font-size: 19pt;
    font-family: Rajdhani;
    text-align: center;
}

.visi{
    margin-top: 30px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 35pt;
}

.visip{
    font-family: Rajdhani;
    text-align: center;
    font-size: 19pt;
    
}

.misi{
    margin-top: 40px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 35pt;
}

.misip{
    
    font-family: Rajdhani;
    text-align: center;
    font-size: 19pt;
}
/* About */

/* Contact */
#contactuz{
    padding-top: 35px;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 40pt;
}

#kolom-kiri{
    margin-top: 20px;
    height: 400px;
}

#kolom-kanan{
    margin-top: 85px;
}
/* Contact */

/* Shop */
#barang{
    margin: 0 auto;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 40pt;
    padding-top: 250px;
    padding-bottom: 200px;
}
/* Shop */
}

@media (max-width: 455px) {
/* Navbar */
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
    }

    .logo-web {
        width: 80%;
    }

    .nav-margin-top{
        margin-top: 1px;
    }

    .navbar-toggler {
        margin-top: -35px;
    }
    
    #navbarSupportedContent{
        margin-top: -5px;
    }

    #carouselExampleIndicators{
        margin-top: -25px
    }
/* Navbar */

/* Home */
/* Home */

/* Products */
.judulproduk{
    margin-top: 10px;
    font-size: 35pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bold;
}

.subjudulp{
    font-size: 20pt;
    text-align: center;
    font-family: Rajdhani;
}

#products-galery{
    margin-top: 20px;
}

#baris-galeri{
    padding-bottom: 10px;
}

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 380px;
        height: 220px;
        margin-left: 20px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 380px;
    }

    .img-sub{
        display: block;
        width: 380px;
        height: 220px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 220px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        margin-left: 150px;
        width: 300px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-akh{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-ak:hover .kot-akh{
        width: 5%;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-aki{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-aka:hover .kot-aki{
        width: 5%;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
        z-index: 500;
    }

    #breakah{
        padding-bottom: 10px;
    }
    /* products hover bagian kanan */

    /* fop */
    #ser-nat{
        margin-left: 90px;
    }

    #ser-syn{
        margin-left: 90px;
    }

    #ser-squ{
        margin-left: 90px;
    }

    .judulfop{
        margin-top: 50px;
        font-size: 35pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .subjudulfop{
        font-size: 19pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;   
    }

    .fop-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .fop-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 245px;
        height: 245px;
        margin-left: 95px;
        margin-top: 20px;
    }

    .fop-akh{
        width: 0px;
        height: 245px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 245px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 245px;
        height: 245px;
        margin-left: 95px;
        margin-top: 20px;
    }

    .fop-aki{
        width: 0px;
        height: 245px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 245px;
    }

    #breakfop{
        padding-bottom: 200px;
    }

        /* natural grass */
        .sub-grass{
            width: 420px;
            margin-left: 3px;
        }

        .img-grass{
            margin-left: 65px;
        }

        #judul-nat{
            width: 420px;
        }

        #sub-nat{
            width: 420px;
        }
        /* natural grass */

        /* synthetic grass */
        .grasses{
            width: 420px;
            margin-left: 0px;
        }

        .sub-grassess{
            margin-left: 0px;
            width: 420px;
        }

        .judulgrass{
            padding-bottom: 20px;
        }

        .img-grasssyn {
            margin-top: 40px;
            margin-left: 65px;
            margin-bottom: 30px;
        }

        #img-aqua{
            margin-top: -40px;
            margin-left: 65px;
        }
        #aqua-turf{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-olimpia{
            margin-top: -40px;
            margin-left: 65px;
        }
        #olimpia-cool{
            margin-left: 0px !important;
            margin-top: 50px; 
        }

        #img-platinum{
            margin-top: -40px;
            margin-left: 65px;  
        }
        #platinum-cool{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-rs240{
            margin-top: -5px;
            margin-left: 65px;
        }
        #rs240{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-rs260{
            margin-top: -5px;
            margin-left: 65px;
        }
        #rs260{
            margin-left: 0px !important;
            margin-top: 50px;
        }

        #img-ulti{
            margin-top: -5px;
            margin-left: 65px;
        }
        #ultimate{
            margin-left: 0px !important;
            margin-top: 50px;
        }
        /* synthetic grass */

        /* squash */
        .judulsquash {
            margin-top: 40px;
            font-size: 35pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
            padding-bottom: 10px;
        }

        .sub-squash {
            font-family: Rajdhani;
            text-align: center;
            font-weight: 500;
            font-size: 19pt;
            margin-bottom: -30px;
        }

        #img-squash{
            width: 415px !important;
            height: 233px !important;
            margin-left: 5px;
        }
        /* squash */
    /* fop */

    /* sport equipment */
    .eq-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .eq-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #eq-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }
        /* tracknfield */
        #foptr1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 85px; 
        }
        #sub-fop1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #foptr2{
            height: 250px !important;
            width: 250px !important;
            margin-left: -29px;
            margin-top: 305px;
        }
        #sub-fop2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #foptr3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 610px;
        }
        #sub-fop3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #foptr4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -256px;
            margin-top: 910px;
        }
        #sub-fop4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -325px;
        }

        #foptr5{
            height: 250px !important;
            width: 250px !important;
            margin-left: 85px;
        }
        #sub-fop5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #foptr6{
            height: 250px !important;
            width: 250px !important;
            margin-left: -29px;
            margin-top: 310px;
        }
        #sub-fop6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #foptr7{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 620px;
        }
        #sub-fop7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #foptr8{
            height: 250px !important;
            width: 250px !important;
            margin-left: -255px;
            margin-top: 935px;
        }
        #sub-fop8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -325px;
        }

        .sub-fop{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }
        /* tracknfield */

        /* bench */
        #benchfop1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 85px; 
        }
        #sub-bench1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #benchfop2{
            height: 250px !important;
            width: 250px !important;
            margin-left: -29px;
            margin-top: 310px;
        }
        #sub-bench2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #benchfop3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 625px;
        }
        #sub-bench3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #benchfop4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -255px;
            margin-top: 930px;
        }
        #sub-bench4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -325px;
        }

        #benchfop5{
            height: 250px !important;
            width: 250px !important;
            margin-left: -29px;
        }
        #sub-bench5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #benchfop6{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 305px;
        }
        #sub-bench6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #benchfop7{
            height: 250px !important;
            width: 250px !important;
            margin-left: 85px;
        }
        #sub-bench7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #benchfop8{
            height: 250px !important;
            width: 250px !important;
            margin-left: -29px;
            margin-top: 305px;
        }
        #sub-bench8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #benchfop9{
            height: 250px !important;
            width: 250px !important;
            margin-top: 610px;
            margin-left: -142px;
        }
        #sub-bench9{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #benchfop10{
            height: 250px !important;
            width: 250px !important;
            margin-left: -255px;
            margin-top: 920px;
        }
        #sub-bench10{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -325px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            height: 193px !important;
            width: 321px !important;
            margin-left: 55px; 
        }
        #sub-hp1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #fophp2{
            height: 193px !important;
            width: 321px !important;
            margin-left: 55px; 
            margin-top: 20px;
        }
        #sub-hp2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #fophp3{
            height: 193px !important;
            width: 321px !important;
            margin-left: 55px; 
            margin-top: 20px;
        }
        #sub-hp3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #fophp4{
            height: 193px !important;
            width: 321px !important;
            margin-left: -59px; 
            margin-top: 290px;
        }
        #sub-hp4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #fophp5{
            height: 193px !important;
            width: 321px !important;
            margin-left: 55px; 
            margin-top: 20px;
        }
        #sub-hp5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #fophp6{
            height: 193px !important;
            width: 321px !important;
            margin-left: 55px; 
            margin-top: 20px;
        }
        #sub-hp6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }
        /* highjump */

        /* longjump */
        #longtri1{
            height: 250px !important;
            width: 250px !important;
            margin-left: 85px; 
        }
        #sub-long1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #longtri2{
            height: 250px !important;
            width: 250px !important;
            margin-left: -29px;
            margin-top: 305px;
        }
        #sub-long2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #longtri3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 610px;
        }
        #sub-long3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #longtri4{
            height: 250px !important;
            width: 250px !important;
            margin-left: -256px;
            margin-top: 920px;
        }
        #sub-long4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -325px;
        }

        #longtri5{
            height: 250px !important;
            width: 250px !important;
            margin-left: 85px;
        }
        #sub-long5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: 10px;
        }

        #longtri6{
            height: 250px !important;
            width: 250px !important;
            margin-left: -29px;
            margin-top: 305px;
        }
        #sub-long6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -100px;
        }

        #longtri7{
            height: 250px !important;
            width: 250px !important;
            margin-left: -142px;
            margin-top: 610px;
        }
        #sub-long7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -215px;
        }

        #longtri8{
            height: 250px !important;
            width: 250px !important;
            margin-left: -256px;
            margin-top: 920px;
        }
        #sub-long8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            width: 400px;
            margin-left: -325px;
        }
        /* longjump */
    /* sport equipment */

    /* sport technology */
    #fop-var{
        margin-left: 90px;
    }

    #fop-fs{
        margin-left: 90px;
        margin-top: 30px;
    }

    #fop-es{
        margin-top: 30px;
        margin-left: 95px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }
        /* var */
        

        .img-var{
            width: 398px !important;
            height: 231px !important;
            margin-left: 14px;
        }

        .judul-var{
            font-size: 23pt;
            width: 420px;
            margin-left: 0px;
            
        }

        .sub-var{
            font-size: 15pt;
            margin-left: -150px;
            margin-top: 300px;
            width: 420px;
        }
        /* var */

        /* fusionsport */
        #ssp1{
            width: 250px !important;
            height: 250 !important;
            margin-left: 70px;
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -12px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -12px;
        }

        #ssp2{
            height: 250px !important;
            width: 250px !important;
            margin-left: -80px;
            margin-top: 490px;
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -160px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -160px;
        }

        #ssp3{
            height: 250px !important;
            width: 250px !important;
            margin-left: -225px;
            margin-top: 1015px;
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 23pt;
            font-weight: bold;
            text-align: center;
            width: 400px;
            margin-left: -310px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: 400;
            text-align: justify;
            width: 400px;
            margin-left: -310px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            width: 400px !important;
            height: 267px !important;
            margin-left: -65px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -65px;
            font-size: 23pt;
            width: 400px;
        }

        #esub2{
            width: 400px !important;
            height: 267px !important;
            margin-left: -175px;
            margin-top: 310px;
        }
        #sub-esub2{
            margin-left: -175px;
            font-size: 23pt;
            width: 400px;
        }

        #sub-esub3{
            font-size: 19pt;
        }
        /* esub */
    /* sport technology */

    /* service */
    .ser-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .ser-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #ser-tick{
        margin-left: 90px;
    }

    #ser-op{
        margin-left: 90px;
    }

    #ser-rent{
        margin-left: 90px;
        margin-top: 20px;
    }

    #ser-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 130px;
    }

        /* rental */
        .rental{
            width: 444px;
            margin-left: -85px;
        }
        
        .rentals{
            width: 444px;
            margin-left: -275px;
            margin-top: 520px;
        }

        .judul-rental{
            font-size: 23pt;
            width: 400px;
            margin-left: -65px;
        }

        .sub-rental{
            width: 400px;
            font-size: 19pt;
            margin-left: -65px;
        }

        #jud-rental{
            font-size: 23pt;
            width: 400px;
            margin-left: -250px;
        }

        #sj-rental{
            width: 400px;
            font-size: 19pt;
            margin-left: -250px;
        }
        /* rental */
    /* service */
/* Products */

/* About */
.logo-sti{
    width: 90%;
    margin-left: 15px;
    position: relative;
    z-index: 1000;
    margin-top: 30px;
}

.jabout{
    margin-top: 40px;
    font-size: 35pt;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    text-transform: uppercase;
}

.aboutp{
    /* margin-right: -200px; */
    /* background-color: black; */
    margin-top: -10px;
    /* color: white; */
    font-size: 19pt;
    font-family: Rajdhani;
    text-align: center;
}

.visi{
    margin-top: 30px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 35pt;
}

.visip{
    font-family: Rajdhani;
    text-align: center;
    font-size: 19pt;
    
}

.misi{
    margin-top: 40px;
    font-weight: bolder;
    font-family: Rajdhani;
    text-align: center;
    font-size: 35pt;
}

.misip{
    
    font-family: Rajdhani;
    text-align: center;
    font-size: 19pt;
}
/* About */

/* Contact */
#contactuz{
    padding-top: 35px;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 35pt;
}

#kolom-kiri{
    margin-top: 20px;
    height: 400px;
}

#kolom-kanan{
    margin-top: 85px;
}
/* Contact */

/* Shop */
#barang{
    margin: 0 auto;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 35pt;
    padding-top: 250px;
    padding-bottom: 200px;
}
/* Shop */
}

@media (max-width: 415px){
/* products */

    .judulproduk {
        margin-top: 10px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bold;
    }

    .subjudulp{
        font-size: 20pt;
        text-align: center;
        font-family: Rajdhani;
    }

    #products-galery{
        margin-top: 20px;
    }

    #baris-galeri{
        padding-bottom: 10px;
    }


    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 371px;
        height: 214px;
        margin-left: 7px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 371px;
    }

    .img-sub{
        display: block;
        width: 371px;
        height: 214px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 214px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        margin-left: 150px;
        width: 331px;
    }
    /* products hover bagian kiri */

        /* fop */
        #ser-nat{
            margin-left: 70px;
        }

        #ser-syn{
            margin-left: 70px;
        }

        #ser-squ{
            margin-left: 70px;
        }

        .judulfop{
            margin-top: 50px;
            font-size: 30pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
        }
    
        .subjudulfop{
            font-size: 20pt;
            text-align: center;
            font-family: Rajdhani;
            padding-bottom: 15px;   
        }

        .fop-ak{
            cursor: pointer;
            position: relative;
            width: 245px;
            height: 245px;
            margin-left: 70px;
            margin-top: 20px;
        }
    
        .fop-akh{
            width: 0px;
            height: 245px;
            position: absolute;
            background: #000000c4;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: 0.3s ease;
        }
    
        .fop-ak:hover .fop-akh{
            width: 245px;
        }
    
        .fop-aka{
            cursor: pointer;
            position: relative;
            width: 245px;
            height: 245px;
            margin-left: 70px;
            margin-top: 20px;
        }
    
        .fop-aki{
            width: 0px;
            height: 245px;
            position: absolute;
            background: #000000c4;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: 0.3s ease;
        }
    
        .fop-aka:hover .fop-aki{
            width: 245px;
        }

            /* natural grass */
            .judulgrass{
                margin-top: 50px;
                font-size: 30pt;
                text-align: center;
                font-family: Rajdhani;
                font-weight: bolder;
                padding-bottom: 0px;
            }

            #judul-nat{
                margin-left: 27px;
                width: 331px;
                font-size: 20pt;
                font-weight: bolder;
            }

            #sub-nat{
                width: 331px;
                margin-left: 27px;
                font-size: 15pt;
            }

            .system-grass{
                font-size: 20pt;
                font-weight: bolder;
            }

            .sub-grass{
                font-size: 15pt;
                width: 331px;
                margin-left: 27px;
            }

            .img-grass{
                margin-left: 45px;
            }
            /* natural grass */

            /* synthetic grass */
            .grasses{
                width: 331px;
                margin-left: 27px;
            }

            .sub-grassess{
                width: 331px;
                margin-left: 27px;
                font-size: 15pt;
            }

            .judulgrass{
                padding-bottom: 20px;
            }

            .img-grasssyn {
                margin-top: 50px;
                margin-left: 43px;
                margin-bottom: 30px;
            }

            #img-aqua{
                margin-left: 65px;
            }

            #img-olimpia{
                margin-left: 65px;
            }

            #img-platinum{
                margin-left: 65px;
            }

            #img-rs240{
                margin-left: 65px;
            }

            #img-rs260{
                margin-left: 65px;
            }

            #img-ulti{
                margin-left: 65px;
            }

            #aqua-turf{
                margin-left: 0px !important;
            }

            #olimpia-cool{
                margin-left: 0px !important;
            }

            #platinum-cool{
                margin-left: 0px !important;
            }

            #rs240{
                margin-left: 0px !important;
            }

            #rs260{
                margin-left: 0px !important;
            }

            #ultimate{
                margin-left: 0px !important;
            }
            /* synthetic grass */

            /* squash */
            #img-squash{
                width: 363px !important;
                height: 204px !important;
                margin-left: 12px;
            }

            .judulsquash {
                margin-top: 50px;
                font-size: 30pt;
                text-align: center;
                font-family: Rajdhani;
                font-weight: bolder;
                padding-bottom: 0px;
            }

            .sub-squash {
                font-family: Rajdhani;
                text-align: center;
                font-weight: bold;
                font-size: 20pt;
                margin-bottom: -30px;
                margin-top: 30px;
                
            }
            /* squash */
        /* fop */

        /* sporteq */
            /* tracknfield */
            #foptr1{
                height: 200px !important;
                width: 200px !important;
                margin-left: 95px; 
            }
            #sub-fop1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 25px;
            }

            #foptr2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -9px;
                margin-top: 250px;
            }
            #sub-fop2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -75px;
            }

            #foptr3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -113px;
                margin-top: 500px;
            }
            #sub-fop3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #foptr4{
                height: 200px !important;
                width: 200px !important;
                margin-left: -216px;
                margin-top: 750px;
            }
            #sub-fop4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -280px;
            }

            #foptr5{
                height: 200px !important;
                width: 200px !important;
                margin-left: 95px;
            }
            #sub-fop5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 30px;
            }

            #foptr6{
                height: 200px !important;
                width: 200px !important;
                margin-left: -9px;
                margin-top: 250px;
            }
            #sub-fop6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -75px;
            }

            #foptr7{
                height: 200px !important;
                width: 200px !important;
                margin-left: -113px;
                margin-top: 500px;
            }
            #sub-fop7{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #foptr8{
                height: 200px !important;
                width: 200px !important;
                margin-left: -216px;
                margin-top: 750px;
            }
            #sub-fop8{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -280px;
            }

            .sub-fop{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -75px;
            }
            /* tracknfield */

            /* bench */
            #benchfop1{
                height: 200px !important;
                width: 200px !important;
                margin-left: 90px; 
            }
            #sub-bench1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 25px;
            }

            #benchfop2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -15px;
                margin-top: 250px;
            }
            #sub-bench2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -80px;
            }

            #benchfop3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -115px;
                margin-top: 500px;
            }
            #sub-bench3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #benchfop4{
                height: 200px !important;
                width: 200px !important;
                margin-left: -220px;
                margin-top: 750px;
            }
            #sub-bench4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -280px;
            }

            #benchfop5{
                height: 200px !important;
                width: 200px !important;
                margin-left: -15px;
                margin-top: -5px;
            }
            #sub-bench5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -80px;
            }

            #benchfop6{
                height: 200px !important;
                width: 200px !important;
                margin-left: -115px;
                margin-top: 250px;
            }
            #sub-bench6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #benchfop7{
                height: 200px !important;
                width: 200px !important;
                margin-left: 90px;
            }
            #sub-bench7{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 25px;
            }

            #benchfop8{
                height: 200px !important;
                width: 200px !important;
                margin-left: -15px;
                margin-top: 250px;
            }
            #sub-bench8{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -80px;
            }

            #benchfop9{
                height: 200px !important;
                width: 200px !important;
                margin-top: 500px;
                margin-left: -115px;
            }
            #sub-bench9{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #benchfop10{
                height: 200px !important;
                width: 200px !important;
                margin-left: -215px;
                margin-top: 750px;
            }
            #sub-bench10{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -280px;
            }
            /* bench */

            /* highjump */
            #fophp1{
                height: 193px !important;
                width: 321px !important;
                margin-left: 35px; 
            }
            #sub-hp1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                width: 400px;
                margin-left: -7px;
            }

            #fophp2{
                height: 193px !important;
                width: 321px !important;
                margin-left: 35px; 
                margin-top: 20px;
            }
            #sub-hp2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                width: 400px;
                margin-left: -7px;
            }

            #fophp3{
                height: 193px !important;
                width: 321px !important;
                margin-left: 35px; 
                margin-top: 20px;
            }
            #sub-hp3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                width: 400px;
                margin-left: -7px;
            }

            #fophp4{
                height: 193px !important;
                width: 321px !important;
                margin-left: -70px; 
                margin-top: 290px;
            }
            #sub-hp4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                width: 400px;
                margin-left: -111px;
            }

            #fophp5{
                height: 193px !important;
                width: 321px !important;
                margin-left: 35px; 
                margin-top: 20px;
            }
            #sub-hp5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                width: 400px;
                margin-left: -7px;
            }

            #fophp6{
                height: 193px !important;
                width: 321px !important;
                margin-left: 35px; 
                margin-top: 20px;
            }
            #sub-hp6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                width: 400px;
                margin-left: -7px;
            }
            /* highjump */

            /* longjump */
            #longtri1{
                height: 200px !important;
                width: 200px !important;
                margin-left: 90px; 
            }
            #sub-long1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 25px;
            }

            #longtri2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -15px;
                margin-top: 250px;
            }
            #sub-long2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -80px;
            }

            #longtri3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -119px;
                margin-top: 500px;
            }
            #sub-long3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #longtri4{
                height: 200px !important;
                width: 200px !important;
                margin-left: -222px;
                margin-top: 750px;
            }
            #sub-long4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -280px;
            }

            #longtri5{
                height: 200px !important;
                width: 200px !important;
                margin-left: 90px;
            }
            #sub-long5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 25px;
            }

            #longtri6{
                height: 200px !important;
                width: 200px !important;
                margin-left: -15px;
                margin-top: 250px;
            }
            #sub-long6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -80px;
            }

            #longtri7{
                height: 200px !important;
                width: 200px !important;
                margin-left: -119px;
                margin-top: 500px;
            }
            #sub-long7{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #longtri8{
                height: 200px !important;
                width: 200px !important;
                margin-left: -222px;
                margin-top: 750px;
            }
            #sub-long8{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -280px;
            }
            /* longjump */
        /* sporteq */

        /* sport tech */
        #fop-var{
            margin-left: 70px;
        }

        #fop-fs{
            margin-left: 70px;
            margin-top: 30px;
        }

        #fop-es{
            margin-left: 70px;
            margin-top: 30px;
        }

        .tech-kotakiri{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        .tech-kotakanan{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        #tech-sub{
            font-family: Rajdhani;
            color: white;
            text-align: left;
            font-weight: bolder;
            font-size: 15pt;
            position: absolute;
            width: 200px;
            margin-left: 90px;
        }

        #spasi{
            margin-left: -15px;
        }

            /* var */
            .img-var{
                width: 315px !important;
                height: 183px !important;
                margin-left: 35px;
            }

            .judul-var{
                font-size: 20pt;
                width: 331px;
                margin-left: 20px;
            }

            .sub-var{
                font-size: 15pt;
                margin-left: -115px;
                margin-top: 250px;
                width: 331px;
                font-weight: 500;
            }
            /* var */

            /* fusionsport */
            #ssp1{
                width: 200px !important;
                height: 200 !important;
                margin-left: 75px;
            }
            #jud-ssp1{
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                text-align: center;
                width: 331px;
                margin-left: 7px;
            }
            #sub-ssp1{
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: 400;
                text-align: justify;
                width: 331px;
                margin-left: 7px;
            }

            #ssp2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -65px;
                margin-top: 490px;
            }
            #jud-ssp2{
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                text-align: center;
                width: 331px;
                margin-left: -130px;
            }
            #sub-ssp2{
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: 400;
                text-align: justify;
                width: 331px;
                margin-left: -130px;
            }

            #ssp3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -200px;
                margin-top: 1020px;
            }
            #jud-ssp3{
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                text-align: center;
                width: 331px;
                margin-left: -265px;
            }
            #sub-ssp3{
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: 400;
                text-align: justify;
                width: 331px;
                margin-left: -265px;
            }
            /* fusiionsport */

            /* esub */
            #esub1{
                width: 317px !important;
                height: 212px !important;
                margin-left: -35px;
                margin-top: -5px;
            }
            #sub-esub1{
                margin-left: -45px;
                font-size: 19pt;
                width: 331px;
            }

            #esub2{
                width: 317px !important;
                height: 212px !important;
                margin-left: -140px;
                margin-top: 220px;
            }
            #sub-esub2{
                margin-left: -145px;
                font-size: 19pt;
                width: 331px;
            }

            #sub-esub3{
                font-size: 17pt;
            }
            /* esub */
        /* sport tech */

        /* service */
        .judulser{
            margin-top: 50px;
            font-size: 30pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
        }
    
        .sub-ser{
            font-size: 20pt;
            text-align: center;
            font-family: Rajdhani;
            padding-bottom: 15px;
        }

        .ser-kotakiri{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        .ser-kotakanan{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        #ser-sub{
            font-family: Rajdhani;
            color: white;
            text-align: left;
            font-weight: bolder;
            font-size: 15pt;
            position: absolute;
            width: 200px;
            margin-left: 130px;
        }

        #ser-tick{
            margin-left: 70px;
        }

        #ser-op{
            margin-left: 70px;
        }

        #ser-rent{
            margin-left: 70px;
            margin-top: 20px;
        }

            /* rental */
            .rental{
                width: 316px;
                margin-left: -35px;
            }
            
            .rentals{
                width: 316px;
                margin-left: -210px;
                margin-top: 520px;
            }

            .judul-rental{
                font-size: 20pt;
                width: 331px;
                margin-left: -45px;
            }

            .sub-rental{
                width: 331px;
                font-size: 17pt;
                margin-left: -45px;
            }

            #jud-rental{
                font-size: 20pt;
                width: 331px;
                margin-left: -215px;
            }

            #sj-rental{
                width: 331px;
                font-size: 17pt;
                margin-left: -215px;
            }
            /* rental */

            /* ticketing */
            .judultic {
                padding-top: 200px;
                font-family: Rajdhani;
                font-size: 30pt;
                text-align: center;
                font-weight: bolder;
            }

            .sub-tic {
                font-family: Rajdhani;
                font-size: 20pt;
                text-align: center;
                padding-bottom: 150px;
            }
            /* ticketing */

            /* operator */
            .judulope {
                padding-top: 200px;
                font-family: Rajdhani;
                font-size: 30pt;
                text-align: center;
                font-weight: bolder;
            }

            .sub-ope{
                font-family: Rajdhani;
                font-size: 20pt;
                text-align: center;
                padding-bottom: 150px;
            }
            /* operator */
        /* service */
/* products */

/* about */
    .logo-sti{
        width: 90%;
        margin-left: 15px;
        position: relative;
        z-index: 1000;
        margin-top: 20px;
    }

    .jabout{
        margin-top: 40px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        text-transform: uppercase;
    }

    .aboutp{
        margin-top: -10px;
        font-size: 15pt;
        font-family: Rajdhani;
        text-align: center;
    }

    .visi{
        margin-top: 30px;
        font-weight: bolder;
        font-family: Rajdhani;
        text-align: center;
        font-size: 20pt;
    }

    .visip{
        font-family: Rajdhani;
        text-align: center;
        font-size: 15pt;
        
    }

    .misi{
        margin-top: 40px;
        font-weight: bolder;
        font-family: Rajdhani;
        text-align: center;
        font-size: 20pt;
    }

    .misip{
        
        font-family: Rajdhani;
        text-align: center;
        font-size: 15pt;
    }
/* about */

/* contact */
    #contactuz{
        padding-top: 10px;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        font-size: 30pt;
    }

    #kolom-kiri{
        margin-top: 20px;
        height: 400px;
    }

    #kolom-kanan{
        margin-top: 65px;
    }
/* contact */

/* Shop */
#barang{
    margin: 0 auto;
    text-align: center;
    font-family: Rajdhani;
    font-weight: bolder;
    font-size: 30pt;
    padding-top: 200px;
    padding-bottom: 150px;
}
/* Shop */
}

@media (max-width: 380px){
    .img-sub{
        display: block;
        width: 340px;
        height: 196px;
        margin-bottom: 10px;
        position: relative;
    }

    /* fop */
    #ser-nat{
        margin-left: 55px;
    }

    #ser-syn{
        margin-left: 55px;
    }

    #ser-squ{
        margin-left: 55px;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 245px;
        height: 245px;
        margin-left: 55px;
        margin-top: 20px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 245px;
        height: 245px;
        margin-left: 55px;
        margin-top: 20px;
    }

        /* natural grass */
        .sub-grass{
            margin-left: 10px;
        }

        .img-grass{
            margin-left: 25px;
        }

        #judul-nat{
            margin-left: 10px;
        }

        #sub-nat{
            margin-left: 10px;
        }
        /* natural grass */

        /* synthetic grass */
        .img-grasssyn{
            margin-left: 25px;
        }

        .grasses{
            margin-left: 10px;
        }

        .sub-grassess{
            margin-left: 10px;
        }

        #img-aqua{
            margin-left: 55px;
        }

        #img-olimpia{
            margin-left: 55px;
        }

        #img-platinum{
            margin-left: 55px;
        }

        #img-rs240{
            margin-left: 55px;
        }

        #img-rs260{
            margin-left: 55px;
        }

        #img-ulti{
            margin-left: 55px;
        }
        /* synthetic grass */

        /* squash */
        #img-squash{
            margin-left: -6px;
        }
        /* squash */
    /* fop */

    /* sport equipment */
        /* track field */
        #foptr1{
            margin-left: 75px;
        }
        #sub-fop1{
            margin-left: 10px;
        }

        #foptr2{
            margin-left: -20px;
        }
        #sub-fop2{
            margin-left: -85px;
        }

        #foptr3{
            margin-left: -115px;
        }

        #foptr4{
            margin-left: -210px;
        }
        #sub-fop4{
            margin-left: -275px;
        }

        #foptr5{
            margin-left: 75px;
        }
        #sub-fop5{
            margin-left: 10px;
        }

        #foptr6{
            margin-left: -20px;
        }
        #sub-fop6{
            margin-left: -85px;
        }

        #foptr7{
            margin-left: -115px;
        }

        #foptr8{
            margin-left: -210px;
        }
        /* track field */

        /* bench */
        #benchfop1{
            margin-left: 75px;
        }
        #sub-bench1{
            margin-left: 10px;
        }

        #benchfop2{
            margin-left: -20px;
        }
        #sub-bench2{
            margin-left: -85px;
        }

        #benchfop4{
            margin-left: -210px;
        }
        #sub-bench4{
            margin-left: -275px;
        }

        #benchfop5{
            margin-left: -5px;
        }
        #sub-bench5{
            margin-left: -85px;
        }

        #benchfop7{
            margin-left: 75px;
        }
        #sub-bench7{
            margin-left: 10px;
        }

        #benchfop8{
            margin-left: -20px;
        }
        #sub-bench8{
            margin-left: -85px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            margin-left: 15px;
        }
        #sub-hp1{
            width: 350px;
            margin-left: 0px;
        }

        #fophp2{
            margin-left: 15px;
        }
        #sub-hp2{
            width: 350px;
            margin-left: 0px;
        }

        #fophp3{
            margin-left: 15px;
        }
        #sub-hp3{
            width: 350px;
            margin-left: 0px;
        }

        #fophp4{
            margin-left: -80px;
        }
        #sub-hp4{
            width: 350px;
            margin-left: -95px;
        }

        #fophp5{
            margin-left: 15px;
        }
        #sub-hp5{
            width: 350px;
            margin-left: 0px;
        }

        #fophp6{
            margin-left: 15px;
        }
        #sub-hp6{
            width: 350px;
            margin-left: 0px;
        }
        /* highjump */

        /* triple jump */
        #longtri1{
            margin-left: 75px;
        }
        #sub-long1{
            width: 350px;
            margin-left: 0px;
        }

        #longtri2{
            margin-left: -20px;
        }
        #sub-long2{
            width: 350px;
            margin-left: -95px;
        }

        #longtri3{
            margin-left: -115px;
        }
        #sub-long3{
            width: 350px;
            margin-left: -190px;
        }

        #longtri4{
            margin-left: -210px;
        }
        #sub-long4{
            width: 350px;
            margin-left: -285px;
        }

        #longtri5{
            margin-left: 75px;
        }
        #sub-long5{
            width: 350px;
            margin-left: 0px;
        }

        #longtri6{
            margin-left: -20px;
        }
        #sub-long6{
            width: 350px;
            margin-left: -95px;
        }

        #longtri7{
            margin-left: -115px;
        }
        #sub-long7{
            width: 350px;
            margin-left: -190px;
        }

        #longtri8{
            margin-left: -210px;
        }
        #sub-long8{
            width: 350px;
            margin-left: -285px;
        }
        /* triple jump */
    /* sport equipment */

    /* sport-tech */
    #fop-var{
        margin-left: 55px;
    }

    #fop-fs{
        margin-left: 55px;
    }

    #fop-es{
        margin-left: 55px;
    }

        /* VAR */
        .img-var{
            margin-left: 15px;
        }

        .judul-var{
            margin-left: 5px;
        }

        .sub-var{
            margin-left: -120px;
        }
        /* VAR */

        /* fusion */
        #ssp1{
            margin-left: 60px;
        }
        #jud-ssp1{
            width: 350px;
            margin-left: -15px;
        }
        #sub-ssp1{
            width: 350px;
            margin-left: -15px;
        }

        #ssp2{
            margin-left: -70px;
        }
        #jud-ssp2{
            width: 350px;
            margin-left: -140px;
        }
        #sub-ssp2{
            width: 350px;
            margin-left: -140px;
        }

        #ssp3{
            margin-left: -200px;
        }
        #jud-ssp3{
            width: 350px;
            margin-left: -270px;
        }
        #sub-ssp3{
            width: 350px;
            margin-left: -270px;
        }
        /* fusion */

        /* esub */
        #esub1{
            margin-left: -45px;
        }
        /* esub */
    /* sport-tech */

    /* service */
    #ser-tick{
        margin-left: 55px;
    }

    #ser-op{
        margin-left: 55px;
    }

    #ser-rent{
        margin-left: 55px;
    }

        /* rental */
        .rental{
            margin-left: -45px;
        }
        .judul-rental{
            width: 350px;
            margin-left: -65px;
        }
        .sub-rental{
            width: 350px;
            margin-left: -65px;
        }

        .rentals{
            margin-left: -205px;
        }
        #jud-rental{
            width: 350px;
            margin-left: -220px;
        }
        #sj-rental{
            width: 350px;
            margin-left: -220px;
        }
        /* rental */
    /* service */

}

@media (max-width: 362px){
/* products */

    .judulproduk {
        margin-top: 10px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bold;
    }

    .subjudulp{
        font-size: 20pt;
        text-align: center;
        font-family: Rajdhani;
    }

    #products-galery{
        margin-top: 20px;
    }

    #baris-galeri{
        padding-bottom: 10px;
    }

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 340px;
        height: 196px;
        margin-left: -3px;
        margin-bottom: 10px;
    }

    .hovers:hover .hoverr{
        width: 340px;
    }

    .img-sub{
        display: block;
        width: 340px;
        height: 196px;
        margin-bottom: 10px;
        position: relative;
    }

    .hoverr{
        width: 0px;
        height: 196px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        margin-left: 150px;
        width: 300px;
    }
    /* products hover bagian kiri */

        /* fop */
        #ser-nat{
            margin-left: 45px;
        }

        #ser-syn{
            margin-left: 45px;
        }

        #ser-squ{
            margin-left: 45px;
        }

        .judulfop{
            margin-top: 50px;
            font-size: 30pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
        }
    
        .subjudulfop{
            font-size: 20pt;
            text-align: center;
            font-family: Rajdhani;
            padding-bottom: 15px;   
        }

        .fop-ak{
            cursor: pointer;
            position: relative;
            width: 245px;
            height: 245px;
            margin-left: 45px;
            margin-top: 20px;
        }
    
        .fop-akh{
            width: 0px;
            height: 245px;
            position: absolute;
            background: #000000c4;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: 0.3s ease;
        }
    
        .fop-ak:hover .fop-akh{
            width: 245px;
        }
    
        .fop-aka{
            cursor: pointer;
            position: relative;
            width: 245px;
            height: 245px;
            margin-left: 45px;
            margin-top: 20px;
        }
    
        .fop-aki{
            width: 0px;
            height: 245px;
            position: absolute;
            background: #000000c4;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: 0.3s ease;
        }
    
        .fop-aka:hover .fop-aki{
            width: 245px;
        }

            /* natural grass */
            .judulgrass{
                margin-top: 50px;
                font-size: 30pt;
                text-align: center;
                font-family: Rajdhani;
                font-weight: bolder;
                padding-bottom: 0px;
            }

            #judul-nat{
                margin-left: 0px;
                width: 331px;
                font-size: 20pt;
                font-weight: bolder;
            }

            #sub-nat{
                width: 331px;
                margin-left: 0px;
                font-size: 15pt;
            }

            .system-grass{
                font-size: 20pt;
                font-weight: bolder;
            }

            .sub-grass{
                font-size: 15pt;
                width: 331px;
                margin-left: 0px;
            }

            .img-grass{
                margin-left: 15px;
            }
            /* natural grass */

            /* synthetic grass */
            .grasses{
                width: 331px;
                margin-left: 0px;
            }

            .sub-grassess{
                width: 331px;
                margin-left: 0px;
                font-size: 15pt;
            }

            .img-grasssyn {
                margin-top: 50px;
                margin-left: 15px;
                margin-bottom: 30px;
            }

            #img-aqua{
                margin-left: 40px;
            }

            #img-olimpia{
                margin-left: 40px;
            }

            #img-platinum{
                margin-left: 40px;
            }

            #img-rs240{
                margin-left: 40px;
            }

            #img-rs260{
                margin-left: 40px;
            }

            #img-ulti{
                margin-left: 40px;
            }

            #aqua-turf{
                margin-left: 0px !important;
            }

            #olimpia-cool{
                margin-left: 0px !important;
            }

            #platinum-cool{
                margin-left: 0px !important;
            }

            #rs240{
                margin-left: 0px !important;
            }

            #rs260{
                margin-left: 0px !important;
            }

            #ultimate{
                margin-left: 0px !important;
            }
            /* synthetic grass */

            /* squash */
            .judulsquash {
                margin-top: 50px;
                font-size: 30pt;
                text-align: center;
                font-family: Rajdhani;
                font-weight: bolder;
                padding-bottom: 0px;
            }

            .sub-squash {
                font-family: Rajdhani;
                text-align: center;
                font-weight: bold;
                font-size: 20pt;
                margin-bottom: -30px;
                
            }

            #img-squash{
                width: 311px !important;
                height: 175px !important;
                margin-left: 10px;
            }
            /* squash */
        /* fop */

        /* sporteq */



            /* tracknfield */
            #foptr1{
                height: 200px !important;
                width: 200px !important;
                margin-left: 70px; 
            }
            #sub-fop1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: 20px;
            }

            #foptr2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -20px;
                margin-top: 250px;
            }
            #sub-fop2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: -75px;
            }

            #foptr3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -110px;
                margin-top: 500px;
            }
            #sub-fop3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: -160px;
            }

            #foptr4{
                height: 200px !important;
                width: 200px !important;
                margin-left: -200px;
                margin-top: 750px;
            }
            #sub-fop4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: -240px;
            }

            #foptr5{
                height: 200px !important;
                width: 200px !important;
                margin-left: 70px;
            }
            #sub-fop5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: 0px;
            }

            #foptr6{
                height: 200px !important;
                width: 200px !important;
                margin-left: -20px;
                margin-top: 250px;
            }
            #sub-fop6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: -75px;
            }

            #foptr7{
                height: 200px !important;
                width: 200px !important;
                margin-left: -110px;
                margin-top: 500px;
            }
            #sub-fop7{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: -160px;
            }

            #foptr8{
                height: 200px !important;
                width: 200px !important;
                margin-left: -200px;
                margin-top: 750px;
            }
            #sub-fop8{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: -240px;
            }

            .sub-fop{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 300px;
                margin-left: -75px;
            }
            /* tracknfield */

            /* bench */
            #benchfop1{
                height: 200px !important;
                width: 200px !important;
                margin-left: 70px; 
            }
            #sub-bench1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #benchfop2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -25px;
                margin-top: 250px;
            }
            #sub-bench2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -90px;
            }

            #benchfop3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -115px;
                margin-top: 500px;
            }
            #sub-bench3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #benchfop4{
                height: 200px !important;
                width: 200px !important;
                margin-left: -205px;
                margin-top: 750px;
            }
            #sub-bench4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -270px;
            }

            #benchfop5{
                height: 200px !important;
                width: 200px !important;
                margin-left: -25px;
                margin-top: -5px;
            }
            #sub-bench5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -90px;
            }

            #benchfop6{
                height: 200px !important;
                width: 200px !important;
                margin-left: -115px;
                margin-top: 250px;
            }
            #sub-bench6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #benchfop7{
                height: 200px !important;
                width: 200px !important;
                margin-left: 70px;
            }
            #sub-bench7{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #benchfop8{
                height: 200px !important;
                width: 200px !important;
                margin-left: -25px;
                margin-top: 250px;
            }
            #sub-bench8{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -90px;
            }

            #benchfop9{
                height: 200px !important;
                width: 200px !important;
                margin-top: 500px;
                margin-left: -109px;
            }
            #sub-bench9{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #benchfop10{
                height: 200px !important;
                width: 200px !important;
                margin-left: -205px;
                margin-top: 750px;
            }
            #sub-bench10{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -270px;
            }
            /* bench */

            /* highjump */
            #fophp1{
                height: 176px !important;
                width: 293px !important;
                margin-left: 20px; 
            }
            #sub-hp1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #fophp2{
                height: 176px !important;
                width: 293px !important;
                margin-left: 20px; 
                margin-top: 10px;
            }
            #sub-hp2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #fophp3{
                height: 176px !important;
                width: 293px !important;
                margin-left: 20px; 
                margin-top: 10px;
            }
            #sub-hp3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #fophp4{
                height: 176px !important;
                width: 293px !important;
                margin-left: -70px; 
                margin-top: 240px;
            }
            #sub-hp4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -90px;
            }

            #fophp5{
                height: 176px !important;
                width: 293px !important;
                margin-left: 20px; 
                margin-top: 10px;
            }
            #sub-hp5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #fophp6{
                height: 176px !important;
                width: 293px !important;
                margin-left: 20px; 
                margin-top: 10px;
            }
            #sub-hp6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }
            /* highjump */

            /* longjump */
            #longtri1{
                height: 200px !important;
                width: 200px !important;
                margin-left: 65px; 
            }
            #sub-long1{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #longtri2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -25px;
                margin-top: 250px;
            }
            #sub-long2{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -90px;
            }

            #longtri3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -115px;
                margin-top: 500px;
            }
            #sub-long3{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #longtri4{
                height: 200px !important;
                width: 200px !important;
                margin-left: -205px;
                margin-top: 750px;
            }
            #sub-long4{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -270px;
            }

            #longtri5{
                height: 200px !important;
                width: 200px !important;
                margin-left: 65px;
            }
            #sub-long5{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: 0px;
            }

            #longtri6{
                height: 200px !important;
                width: 200px !important;
                margin-left: -25px;
                margin-top: 250px;
            }
            #sub-long6{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -90px;
            }

            #longtri7{
                height: 200px !important;
                width: 200px !important;
                margin-left: -115px;
                margin-top: 500px;
            }
            #sub-long7{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -180px;
            }

            #longtri8{
                height: 200px !important;
                width: 200px !important;
                margin-left: -205px;
                margin-top: 750px;
            }
            #sub-long8{
                text-align: center;
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: bold;
                width: 331px;
                margin-left: -270px;
            }
            /* longjump */
        /* sporteq */
        
        /* sport tech */
        #fop-var{
            margin-left: 45px;
        }

        #fop-fs{
            margin-left: 45px;
            margin-top: 30px;
        }

        #fop-es{
            margin-left: 45px;
            margin-top: 30px;
        }

        .tech-kotakiri{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        .tech-kotakanan{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        #tech-sub{
            font-family: Rajdhani;
            color: white;
            text-align: left;
            font-weight: bolder;
            font-size: 15pt;
            position: absolute;
            width: 200px;
            margin-left: 90px;
        }

        #spasi{
            margin-left: -15px;
        }

            /* var */
            .img-var{
                width: 315px !important;
                height: 183px !important;
                margin-left: 10px;
            }

            .judul-var{
                font-size: 20pt;
                width: 331px;
                margin-left: 0px;
                padding-bottom: 20px;
            }

            .sub-var{
                font-size: 15pt;
                margin-left: -120px;
                margin-top: 250px;
                width: 331px;
                font-weight: 500;
            }
            /* var */

            /* fusionsport */
            #ssp1{
                width: 200px !important;
                height: 200 !important;
                margin-left: 45px;
            }
            #jud-ssp1{
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                text-align: center;
                width: 331px;
                margin-left: -15px;
            }
            #sub-ssp1{
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: 400;
                text-align: justify;
                width: 331px;
                margin-left: -15px;
            }

            #ssp2{
                height: 200px !important;
                width: 200px !important;
                margin-left: -72px;
                margin-top: 490px;
            }
            #jud-ssp2{
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                text-align: center;
                width: 331px;
                margin-left: -135px;
            }
            #sub-ssp2{
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: 400;
                text-align: justify;
                width: 331px;
                margin-left: -135px;
            }

            #ssp3{
                height: 200px !important;
                width: 200px !important;
                margin-left: -185px;
                margin-top: 1020px;
            }
            #jud-ssp3{
                font-family: Rajdhani;
                font-size: 20pt;
                font-weight: bold;
                text-align: center;
                width: 331px;
                margin-left: -255px;
            }
            #sub-ssp3{
                font-family: Rajdhani;
                font-size: 15pt;
                font-weight: 400;
                text-align: justify;
                width: 331px;
                margin-left: -255px;
            }
            /* fusiionsport */

            /* esub */
            #esub1{
                width: 317px !important;
                height: 212px !important;
                margin-left: -50px;
                margin-top: -5px;
            }
            #sub-esub1{
                margin-left: -55px;
                font-size: 19pt;
                width: 300px;
            }

            #esub2{
                width: 317px !important;
                height: 212px !important;
                margin-left: -141px;
                margin-top: 220px;
            }
            #sub-esub2{
                margin-left: -135px;
                font-size: 19pt;
                width: 300px;
            }

            #sub-esub3{
                font-size: 17pt;
            }
            /* esub */
        /* sport tech */

        /* service */
        .judulser{
            margin-top: 50px;
            font-size: 30pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
        }
    
        .sub-ser{
            font-size: 20pt;
            text-align: center;
            font-family: Rajdhani;
            padding-bottom: 15px;
        }

        .ser-kotakiri{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        .ser-kotakanan{
            display: block;
            position: relative;
            /* z-index: 500; */
            width: 100%;
            height: 100%;
        }

        #ser-sub{
            font-family: Rajdhani;
            color: white;
            text-align: left;
            font-weight: bolder;
            font-size: 15pt;
            position: absolute;
            width: 200px;
            margin-left: 130px;
        }

        #ser-tick{
            margin-left: 45px;
        }

        #ser-op{
            margin-left: 45px;
        }

        #ser-rent{
            margin-left: 45px;
            margin-top: 20px;
        }

            /* rental */
            .rental{
                width: 316px;
                margin-left: -65px;
            }
            
            .rentals{
                width: 316px;
                margin-left: -200px;
                margin-top: 520px;
            }

            .judul-rental{
                font-size: 20pt;
                width: 300px;
                margin-left: -55px;
            }

            .sub-rental{
                width: 300px;
                font-size: 17pt;
                margin-left: -55px;
            }

            #jud-rental{
                font-size: 20pt;
                width: 300px;
                margin-left: -190px;
            }

            #sj-rental{
                width: 300px;
                font-size: 17pt;
                margin-left: -190px;
            }
            /* rental */

            /* ticketing */
            .judultic {
                padding-top: 200px;
                font-family: Rajdhani;
                font-size: 30pt;
                text-align: center;
                font-weight: bolder;
            }

            .sub-tic {
                font-family: Rajdhani;
                font-size: 20pt;
                text-align: center;
                padding-bottom: 150px;
            }
            /* ticketing */

            /* operator */
            .judulope {
                padding-top: 200px;
                font-family: Rajdhani;
                font-size: 30pt;
                text-align: center;
                font-weight: bolder;
            }

            .sub-ope{
                font-family: Rajdhani;
                font-size: 20pt;
                text-align: center;
                padding-bottom: 150px;
            }
            /* operator */
        /* service */
/* products */

/* about */
    .logo-sti{
        width: 90%;
        margin-left: 15px;
        position: relative;
        z-index: 1000;
        margin-top: 20px;
    }

    .jabout{
        margin-top: 40px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        text-transform: uppercase;
    }

    .aboutp{
        margin-top: -10px;
        font-size: 15pt;
        font-family: Rajdhani;
        text-align: center;
    }

    .visi{
        margin-top: 30px;
        font-weight: bolder;
        font-family: Rajdhani;
        text-align: center;
        font-size: 20pt;
    }

    .visip{
        font-family: Rajdhani;
        text-align: center;
        font-size: 15pt;
        
    }

    .misi{
        margin-top: 40px;
        font-weight: bolder;
        font-family: Rajdhani;
        text-align: center;
        font-size: 20pt;
    }

    .misip{
        
        font-family: Rajdhani;
        text-align: center;
        font-size: 15pt;
    }
/* about */

/* contact */
    #contactuz{
        padding-top: 10px;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        font-size: 30pt;
    }

    #kolom-kiri{
        margin-top: 20px;
        height: 400px;
    }

    #kolom-kanan{
        margin-top: 65px;
    }
/* contact */

/* Shop */
    #barang{
        margin: 0 auto;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        font-size: 30pt;
        padding-top: 200px;
        padding-bottom: 150px;
    }
/* Shop */
}

@media (max-width: 327px) {
/* Home */
    #hidden-menu{
        background-color: #fdfdfdc2 !important;
    }

    .nav-margin-top {
        margin-top: -35PX;
    }

    #navbarSupportedContent {
        margin-top: 30px;
    }

    .carousel-inner{
        margin-top: 25px;
        height: 100%;
        position: relative;
    }
    
    .carousel-inner::after{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, rgb(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
        position: absolute;
        bottom: 0;
        /* z-index: 9; */
    }

    #carouselExampleIndicators{
        height: 183px;
    }

    .navbar-toggler {
        top: 10px;
    }
/* Home */

/* Produk */
    .judulproduk{
        margin-top: 10px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bold;
    }

    .subjudulp{
        font-size: 20pt;
        text-align: center;
        font-family: Rajdhani;
    }

    #products-galery{
        margin-top: 20px;
    }

    #baris-galeri{
        padding-bottom: 5px;
    }

    /* products hover bagian kiri */
    .hovers{
        cursor: pointer;
        position: relative;
        width: 281px;
        height: 162px;
        margin-left: 7px;
        margin-bottom: 10px;
        z-index: 800;
    }
    
    .hovers:hover .hoverr{
        width: 281px;
    }
    
    .img-sub{
        display: block;
        width: 281px;
        height: 162px;
        margin-bottom: 10px;
        position: relative;
        z-index: 900;
    }
    
    .hoverr{
        width: 0px;
        height: 162px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 1000;
    }
    
    .judul-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        margin-left: 130px;
        width: 300px;
    }
    /* products hover bagian kiri */

    /* products hover bagian kanan */
    .kot-ak{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-akh{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-ak:hover .kot-akh{
        width: 5%;
    }

    .kot-aka{
        cursor: pointer;
        position: relative;
        width: 5%;
        height: 5%;
        margin-left: 100px;
        margin-top: -100px;
        z-index: 500;
    }

    .kot-aki{
        width: 0px;
        height: 5%;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.4s ease;
        z-index: 500;
    }

    .kot-aka:hover .kot-aki{
        width: 5%;
    }

    .img-kotakiri{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .img-kotakanan{
        display: block;
        position: relative;
        z-index: 500;
        width: 5%;
        height: 5%;
    }

    .sub-judul{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 20pt;
        position: absolute;
        width: 200px;
        margin-left: 100px;
        z-index: 500;
    }

    #breakah{
        padding-bottom: 10px;
    }
    /* products hover bagian kanan */

    /* fop */
    .judulfop{
        margin-top: 50px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .subjudulfop{
        font-size: 20pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;   
    }

    .fop-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .fop-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .fop-ak{
        cursor: pointer;
        position: relative;
        width: 211px;
        height: 211px;
        margin-left: 45px;
        margin-top: 20px;
    }

    .fop-akh{
        width: 0px;
        height: 211px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-ak:hover .fop-akh{
        width: 211px;
    }

    .fop-aka{
        cursor: pointer;
        position: relative;
        width: 211px;
        height: 211px;
        margin-left: 45px;
        margin-top: 20px;
    }

    .fop-aki{
        width: 0px;
        height: 211px;
        position: absolute;
        background: #000000c4;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: 0.3s ease;
    }

    .fop-aka:hover .fop-aki{
        width: 211px;
    }

    #breakfop{
        padding-bottom: 200px;
    }

        /* natural grass */
        .judulgrass{
            margin-top: 50px;
            font-size: 30pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
        }

        #judul-nat{
            margin-left: 0px;
            width: 300px;
            font-size: 20pt;
            font-weight: bolder;
        }

        #sub-nat{
            width: 300px;
            margin-left: 0px;
        }

        .system-grass{
            font-size: 20pt;
            font-weight: bolder;
        }

        .sub-grass{
            font-size: 15pt;
            width: 300px;
            margin-left: 0px;
        }

        .img-grass{
            margin-left: 0px;
        }
        /* natural grass */

        /* synthetic grass */
        .grasses{
            width: 300px;
            margin-left: 0px;
            font-size: 20pt;
        }

        .sub-grassess{
            width: 300px;
            margin-left: 0px;
        }

        .judulgrass{
            padding-bottom: 20px;
        }

        .img-grasssyn {
            margin-top: 50px;
            margin-left: -5px;
            margin-bottom: 30px;
        }

        #img-aqua{
            margin-left: 20px;
        }

        #img-olimpia{
            margin-left: 20px;
        }

        #img-platinum{
            margin-left: 20px;
        }

        #img-rs240{
            margin-left: 20px;
        }

        #img-rs260{
            margin-left: 20px;
        }

        #img-ulti{
            margin-left: 20px;
        }

        #aqua-turf{
            margin-left: 0px !important;
        }

        #olimpia-cool{
            margin-left: 0px !important;
        }

        #platinum-cool{
            margin-left: 0px !important;
        }

        #rs240{
            margin-left: 0px !important;
        }

        #rs260{
            margin-left: 0px !important;
        }

        #ultimate{
            margin-left: 0px !important;
        }
        /* synthetic grass */

        /* squash */
        .judulsquash {
            margin-top: 50px;
            font-size: 30pt;
            text-align: center;
            font-family: Rajdhani;
            font-weight: bolder;
            padding-bottom: 0px;
        }

        .sub-squash {
            font-family: Rajdhani;
            text-align: center;
            font-weight: bold;
            font-size: 20pt;
            margin-bottom: -30px;
        }

        #img-squash{
            width: 291px !important;
            height: 179px !important;
            margin-left: 5px;
        }
        /* squash */
    /* fop */

    /* sport equipment */
    .eq-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .eq-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #eq-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

        /* tracknfield */
        #foptr1{
            height: 200px !important;
            width: 200px !important;
            margin-left: 54px; 
        }
        #sub-fop1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #foptr2{
            height: 200px !important;
            width: 200px !important;
            margin-left: -28px;
            margin-top: 250px;
        }
        #sub-fop2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }

        #foptr3{
            height: 200px !important;
            width: 200px !important;
            margin-left: -109px;
            margin-top: 500px;
        }
        #sub-fop3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -160px;
        }

        #foptr4{
            height: 200px !important;
            width: 200px !important;
            margin-left: -191px;
            margin-top: 750px;
        }
        #sub-fop4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -240px;
        }

        #foptr5{
            height: 200px !important;
            width: 200px !important;
            margin-left: 54px;
        }
        #sub-fop5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: 0px;
        }

        #foptr6{
            height: 200px !important;
            width: 200px !important;
            margin-left: -28px;
            margin-top: 250px;
        }
        #sub-fop6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }

        #foptr7{
            height: 200px !important;
            width: 200px !important;
            margin-left: -109px;
            margin-top: 500px;
        }
        #sub-fop7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -160px;
        }

        #foptr8{
            height: 200px !important;
            width: 200px !important;
            margin-left: -191px;
            margin-top: 750px;
        }
        #sub-fop8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -240px;
        }

        .sub-fop{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }
        /* tracknfield */

        /* bench */
        #benchfop1{
            height: 200px !important;
            width: 200px !important;
            margin-left: 54px; 
        }
        #sub-bench1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #benchfop2{
            height: 200px !important;
            width: 200px !important;
            margin-left: -28px;
            margin-top: 250px;
        }
        #sub-bench2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }

        #benchfop3{
            height: 200px !important;
            width: 200px !important;
            margin-left: -109px;
            margin-top: 500px;
        }
        #sub-bench3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -160px;
        }

        #benchfop4{
            height: 200px !important;
            width: 200px !important;
            margin-left: -191px;
            margin-top: 750px;
        }
        #sub-bench4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -240px;
        }

        #benchfop5{
            height: 200px !important;
            width: 200px !important;
            margin-left: -28px;
        }
        #sub-bench5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -80px;
        }

        #benchfop6{
            height: 200px !important;
            width: 200px !important;
            margin-left: -109px;
            margin-top: 250px;
        }
        #sub-bench6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -156px;
        }

        #benchfop7{
            height: 200px !important;
            width: 200px !important;
            margin-left: 54px;
        }
        #sub-bench7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #benchfop8{
            height: 200px !important;
            width: 200px !important;
            margin-left: -28px;
            margin-top: 250px;
        }
        #sub-bench8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }

        #benchfop9{
            height: 200px !important;
            width: 200px !important;
            margin-top: 500px;
            margin-left: -109px;
        }
        #sub-bench9{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -160px;
        }

        #benchfop10{
            height: 200px !important;
            width: 200px !important;
            margin-left: -191px;
            margin-top: 750px;
        }
        #sub-bench10{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -240px;
        }
        /* bench */

        /* highjump */
        #fophp1{
            height: 176px !important;
            width: 293px !important;
            margin-left: 2px; 
        }
        #sub-hp1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #fophp2{
            height: 176px !important;
            width: 293px !important;
            margin-left: 2px; 
            margin-top: 10px;
        }
        #sub-hp2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #fophp3{
            height: 176px !important;
            width: 293px !important;
            margin-left: 2px; 
            margin-top: 10px;
        }
        #sub-hp3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #fophp4{
            height: 176px !important;
            width: 293px !important;
            margin-left: -80px; 
            margin-top: 240px;
        }
        #sub-hp4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -80px;
        }

        #fophp5{
            height: 176px !important;
            width: 293px !important;
            margin-left: 2px; 
            margin-top: 10px;
        }
        #sub-hp5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #fophp6{
            height: 176px !important;
            width: 293px !important;
            margin-left: 2px; 
            margin-top: 10px;
        }
        #sub-hp6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }
        /* highjump */

        /* longjump */
        #longtri1{
            height: 200px !important;
            width: 200px !important;
            margin-left: 54px; 
        }
        #sub-long1{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #longtri2{
            height: 200px !important;
            width: 200px !important;
            margin-left: -28px;
            margin-top: 250px;
        }
        #sub-long2{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }

        #longtri3{
            height: 200px !important;
            width: 200px !important;
            margin-left: -109px;
            margin-top: 500px;
        }
        #sub-long3{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -160px;
        }

        #longtri4{
            height: 200px !important;
            width: 200px !important;
            margin-left: -191px;
            margin-top: 750px;
        }
        #sub-long4{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -240px;
        }

        #longtri5{
            height: 200px !important;
            width: 200px !important;
            margin-left: 54px;
        }
        #sub-long5{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -5px;
        }

        #longtri6{
            height: 200px !important;
            width: 200px !important;
            margin-left: -28px;
            margin-top: 250px;
        }
        #sub-long6{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -75px;
        }

        #longtri7{
            height: 200px !important;
            width: 200px !important;
            margin-left: -109px;
            margin-top: 500px;
        }
        #sub-long7{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -160px;
        }

        #longtri8{
            height: 200px !important;
            width: 200px !important;
            margin-left: -191px;
            margin-top: 750px;
        }
        #sub-long8{
            text-align: center;
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: bold;
            width: 300px;
            margin-left: -240px;
        }
        /* longjump */
    /* sport equipment */

    /* sport tech */
    #fop-var{
        margin-left: 45px;
    }

    #fop-fs{
        margin-left: 45px;
        margin-top: 30px;
    }

    #fop-es{
        margin-left: 45px;
        margin-top: 30px;
    }

    .tech-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .tech-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #tech-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 90px;
    }

    #spasi{
        margin-left: -15px;
    }

        /* var */
        .img-var{
            width: 315px !important;
            height: 183px !important;
            margin-left: -10px;
        }

        .judul-var{
            font-size: 20pt;
            width: 300px;
            margin-left: 0px;
            padding-bottom: 20px;
        }

        .sub-var{
            font-size: 15pt;
            margin-left: -110px;
            margin-top: 250px;
            width: 300px;
            font-weight: 500;
        }
        /* var */

        /* fusionsport */
        #ssp1{
            width: 200px !important;
            height: 200 !important;
            margin-left: 40px;
        }
        #jud-ssp1{
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -12px;
        }
        #sub-ssp1{
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -12px;
        }

        #ssp2{
            height: 200px !important;
            width: 200px !important;
            margin-left: -72px;
            margin-top: 490px;
        }
        #jud-ssp2{
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -123px;
        }
        #sub-ssp2{
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -123px;
        }

        #ssp3{
            height: 200px !important;
            width: 200px !important;
            margin-left: -185px;
            margin-top: 1020px;
        }
        #jud-ssp3{
            font-family: Rajdhani;
            font-size: 20pt;
            font-weight: bold;
            text-align: center;
            width: 300px;
            margin-left: -235px;
        }
        #sub-ssp3{
            font-family: Rajdhani;
            font-size: 15pt;
            font-weight: 400;
            text-align: justify;
            width: 300px;
            margin-left: -235px;
        }
        /* fusiionsport */

        /* esub */
        #esub1{
            width: 317px !important;
            height: 212px !important;
            margin-left: -65px;
            margin-top: -5px;
        }
        #sub-esub1{
            margin-left: -55px;
            font-size: 20pt;
            width: 300px;
        }

        #esub2{
            width: 317px !important;
            height: 212px !important;
            margin-left: -146px;
            margin-top: 220px;
        }
        #sub-esub2{
            margin-left: -135px;
            font-size: 20pt;
            width: 300px;
        }

        #sub-esub3{
            font-size: 15pt;
        }
        /* esub */

    /* sport tech */

    /* service */
    .judulser{
        margin-top: 50px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
    }

    .sub-ser{
        font-size: 20pt;
        text-align: center;
        font-family: Rajdhani;
        padding-bottom: 15px;
    }

    .ser-kotakiri{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    .ser-kotakanan{
        display: block;
        position: relative;
        /* z-index: 500; */
        width: 100%;
        height: 100%;
    }

    #ser-sub{
        font-family: Rajdhani;
        color: white;
        text-align: left;
        font-weight: bolder;
        font-size: 15pt;
        position: absolute;
        width: 200px;
        margin-left: 130px;
    }

    #ser-tick{
        margin-left: 45px;
    }

    #ser-op{
        margin-left: 45px;
    }

    #ser-rent{
        margin-left: 45px;
        margin-top: 20px;
    }

        /* rental */
        .rental{
            width: 316px;
            margin-left: -65px;
        }
        
        .rentals{
            width: 316px;
            margin-left: -200px;
            margin-top: 520px;
        }

        .judul-rental{
            font-size: 20pt;
            width: 300px;
            margin-left: -55px;
        }

        .sub-rental{
            width: 300px;
            font-size: 15pt;
            margin-left: -55px;
        }

        #jud-rental{
            font-size: 20pt;
            width: 300px;
            margin-left: -190px;
        }

        #sj-rental{
            width: 300px;
            font-size: 17pt;
            margin-left: -190px;
        }
        /* rental */

        /* ticketing */
        .judultic {
            padding-top: 200px;
            font-family: Rajdhani;
            font-size: 30pt;
            text-align: center;
            font-weight: bolder;
        }

        .sub-tic {
            font-family: Rajdhani;
            font-size: 20pt;
            text-align: center;
            padding-bottom: 150px;
        }
        /* ticketing */

        /* operator */
        .judulope {
            padding-top: 200px;
            font-family: Rajdhani;
            font-size: 30pt;
            text-align: center;
            font-weight: bolder;
        }

        .sub-ope{
            font-family: Rajdhani;
            font-size: 20pt;
            text-align: center;
            padding-bottom: 150px;
        }
        /* operator */
    /* service */
        
/* Produk */

/* About */
    .logo-sti{
        width: 90%;
        margin-left: 15px;
        position: relative;
        z-index: 1000;
        margin-top: 20px;
    }

    .jabout{
        margin-top: 40px;
        font-size: 30pt;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        text-transform: uppercase;
    }

    .aboutp{
        margin-top: -10px;
        font-size: 15pt;
        font-family: Rajdhani;
        text-align: center;
    }

    .visi{
        margin-top: 30px;
        font-weight: bolder;
        font-family: Rajdhani;
        text-align: center;
        font-size: 20pt;
    }

    .visip{
        font-family: Rajdhani;
        text-align: center;
        font-size: 15pt;
        
    }

    .misi{
        margin-top: 40px;
        font-weight: bolder;
        font-family: Rajdhani;
        text-align: center;
        font-size: 20pt;
    }

    .misip{
        
        font-family: Rajdhani;
        text-align: center;
        font-size: 15pt;
    }
/* About */

/* Contact */
    #contactuz{
        padding-top: 10px;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        font-size: 30pt;
    }

    #kolom-kiri{
        margin-top: 20px;
        height: 400px;
    }
    
    #kolom-kanan{
        margin-top: 65px;
    }
/* Contact */

/* Shop */
    #barang{
        margin: 0 auto;
        text-align: center;
        font-family: Rajdhani;
        font-weight: bolder;
        font-size: 30pt;
        padding-top: 200px;
        padding-bottom: 150px;
    }
/* Shop */
}