/*---------------------------*/
body, html {
    height: 100vh;
    width: 100%;
    background-color: #F8F9FA;
}

.judul{font-family: 'Raleway';}

/*--MAMEN--------------------------------------------*/
.mamen {
    background-color: #F8F9FA;
    transition: 1s ease;
}

.mamen .navpxl {
    padding: 2vw 0 0 0;

}

.mamen .judul{
    margin: 3vw 3vw 0 3vw;
    padding : 0 0 0 7.3vw;
}

.mamen .px{
    width: 25vw;
}

.mamen .btnx{
    width: 3.5vw;
    height: 3.5vw;
    padding: 0.07vw;
    border-radius: 4.4vw;
}

.mamen .btny{
    width: 2vw;
    height: 2vw;
}

.mamen .btnz{
    width: 5.7vw;
    height: 1vw;
}

.mamen h1 {
    font-family: 'Playfair+Display';
    font-size: 6vw;
    font-weight: 900;
    transition: 1s ease;

}

.mamen p{
    font-family: 'Raleway';
    font-size: 1.1vw ;
    padding-top: 1.1vw;
    transition: 1s ease;
}

.mamen .grup1{
    padding-top: 1.8vw;
    transition: 1s ease;

}

.mamen .garis{
    padding:0;
    margin: 0.7vw;
    padding: 1vw 0 0 0;
    }

.mamen .warnap{
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    font-size: 1.2vw;
    }

.mamen .kiri {
    padding: 1vw;

}

.mamen .porto {
    background-image: url('../img/Home_1.jpg');
    background-size: cover;
    width:45vw;
    height:45vw;
    padding: 1vw;
    border-radius: 2vw;
    transition: 1s ease;
}

.mamen .prtx{
    margin:32vw 0 0 0.5vw;
}

.mamen .portbtn {
    padding-left: 1vw;
    text-align: left;
    font-size: 0.9vw;
    font-weight: 700;
    width: 10vw;
    height: 2.5vw;
    border-radius: 5vw;
}

.mamen .contbtn {
    padding-left: 1vw;
    text-align: left;
    font-size: 0.9vw;
    font-weight: 700;
    width: auto;
    height: 2.5vw;
    border-radius: 5vw;
}

.mamen .ctrx {
    margin:0.5vw 0 0 35vw;
}

.mamen .contbtnx {
    margin-left: 4vw;
}

.mamen .ctr {
    width: 7vw;
    animation-name: warna;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes warna {
    to {
      transform: rotate(1turn);
    }
  }

/*--MAMEN 2--------------------------------------------*/

.mamen2{
    background-color: #F8F9FA;
    padding: 2.19vw;
    transition: 1s ease;
}
.mamen2 .garisatas{
    padding-bottom: 6vw;
    opacity: 0;
}
.mamen2 h1 {
    font-family: 'Playfair+Display';
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1.5vw;
    color: #F8F9FA;
}

.mamen2 p{
    font-family: 'Raleway';
    font-size: 15px;
    padding-top: 13px;
    color: #F8F9FA;
}


/*--Kolom 0---------------*/
.mamen2 .k0{
    padding: 0px;
    margin-right:0.5vw;
}


/*--Kolom 1---------------*/
.mamen2 .k1{
    background-color: #212529;
    width: 60vw;
    height: 25vw;
    border-radius: 20px;

}
.mamen2 .k1 .kk1{
    width: 30vw;
    height: 25vw;
    border-radius: 20px;
    padding: 3vw;
    padding-left: 5vw;
}

                .mamen2 .k1 .kk1 .btn{
                    width: 3vw;
                    height: 3vw;
                    padding: 1px;
                    border-radius: 60px;
                    margin-top: 0.3vw;
                }

                .mamen2 .k1 .kk1 .garis{
                    padding:0px;
                    margin: 11px 20px 10px 20px;
                }

                .mamen2 .k1 .kk1 .xgaris{
                    height:1px ;
                    width: 80px;
                }

.mamen2 .k1 .kk2{
    width: 30vw;
    height: 25vw;
    border-radius: 20px;
    padding: -0px;
    position: relative;
    overflow: hidden;
}

                .mamen2 .k1 .kk2 p {
                    font-family: 'Raleway';
                    font-size: 5vw;
                    font-weight: 900;
                    color: #F8F9FA;
                    padding: 0px;
                    margin: 0px;
                    line-height: 1;
                    white-space: nowrap;

                }



/*--Kolom 2---------------*/
.mamen2 .k2{
    background-image: url('../img/bg1.jpg');
    background-size: cover;
    width: 41.5vw;
    height: 18vw;
    padding: 2vw;
    border-radius: 20px;
    margin-top: 0.5vw;
    margin-right: 0.5vw;

}

.mamen2 .k2 .kk1{
    width: 14vw;
    height: 14vw;
    padding: 0;
    margin: 0;
}

.mamen2 .k2 .wes{
    margin-left: 1.5vw

}


.mamen2 .k2 .fto{
    background-image: url('../img/Mockup_3.jpg');
    background-size: cover;
    width: 14vw;
    height: 14vw;
    padding: 2vw;
    border-radius: 20px;
}

.mamen2 .k2 .tag1 {
    font-family: 'Montserrat';
    font-size: 0.7vw;
    font-weight: 900;
    margin-bottom: 0;
    padding: 1.2vh 0.5vw 0 0;
    color: #F8F9FA;

}

.mamen2 .k2 .tag2 {
    font-family: 'Montserrat';
    text-align: right;
    font-size: 0.7vw;
    font-weight: 900;
    margin-bottom: 0;
    margin-left: 2vw;
    padding: 1.2vh 0 0 0;
    color: #F8F9FA;

}

.mamen2 .k2 .tag3 {
    font-family: 'Raleway';
    font-size: 0.9vw;
    font-weight: 300;
    margin-bottom: 0;
    color: #F8F9FA;
    padding: 0;

}

.mamen2 .k2 .oi {
    font-family: 'Montserrat';
    font-size: 1.5vw;
    font-weight: 900;
    margin-bottom: 0;
    margin-top: 7.3vw;
    color: #F8F9FA;

}

.mamen2 .k2 .btn{
    width: 3vw;
    height: 3vw;
    padding: 1px;
    border-radius: 60px;
    margin-top: 0.25vw;
    margin-left: 1.5vw;
    margin-bottom: 0.25vw;
}


/*--Kolom 3---------------*/
.mamen2 .k3{
    background-image: url('../img/PXL.gif');
    background-size: cover;
    width: 18vw;
    height: 18vw;
    padding: 2vw;
    margin-top: 0.5vw;
    border-radius: 20px;

}

.mamen2 .k3 h1 {
    font-family: 'Montserrat';
    font-size: 1.5vw;
    font-weight: 900;
    margin-bottom: 0;
    color: #F8F9FA;

}

.mamen2 .k3 .tag1 {
    font-family: 'Montserrat';
    font-size: 0.7vw;
    font-weight: 900;
    margin-bottom: 0;
    margin-left: 0.8vw;
    padding: 1.2vh 0.5vw 0 0;
    color: #F8F9FA;

}

.mamen2 .k3 .tag2 {
    font-family: 'Raleway';
    font-size: 0.9vw;
    font-weight: 300;
    margin-bottom: 0;
    color: #F8F9FA;
    padding: 0;

}

.mamen2 .k3 .exh{
    visibility: hidden;

}

.mamen2 .k3 .contx {
    visibility: hidden;
    width: 0;
    height: 0;

}

.mamen2 .k3 .cont {
    margin-top: 6.8vw;

}

.mamen2 .k3 .btn{
    width: 3vw;
    height: 3vw;
    padding: 1px;
    border-radius: 60px;
    margin-left: 5vw;
    margin-top: 0.25vw;
    margin-bottom: 0.25vw;
}


/*--Kolom 4---------------*/
.mamen2 .k4{
    background-image: url('../img/home_6.jpg');
    background-repeat: no-repeat;
    background-position: -50px 0px;
    background-size: cover;
    padding: 3vw;
    border-radius: 20px;
    width: 30vw;
    height: 43.5vw;
}

.mamen2 .k4 h1 {
    font-family: 'Montserrat';
    font-size: 1.6vw;
    font-weight: 900;
    margin-bottom: 0;
    color: #F8F9FA;

}

.mamen2 .k4 .tag1 {
    font-family: 'Raleway';
    font-size: 0.9vw;
    font-weight: 300;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    color: #F8F9FA;

}

.mamen2 .k4 .tag2 {
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 1.2vw;
    color: #F8F9FA;
    padding:5px 0px 0px 0px;
    margin: 0px;

}

.mamen2 .k4 .cont {
    margin-top: 30vw;
    padding: 0;

}

.mamen2 .k4 .btn{
    width: 3vw;
    height: 3vw;
    padding: 1px;
    border-radius: 60px;
    margin-left: 7.5vw;
    margin-top: 0.25vw;
    margin-bottom: 0.25vw;
}


/*--MAMEN 3--------------------------------------------*/

.mamen3{
    background-color: #F8F9FA;
    padding: 2.19vw;
}

.mamen3 h1 {
    font-family: 'Montserrat';
    font-size: 4vw;
    font-weight: 900;
    margin-top: 5vw;
    margin-left: 8vw;

}
.mamen3 i {
    font-family: 'Raleway';
    font-size: 4vw;
    font-weight: 900;

}

.mamen3 .judul{
    font-family: 'Raleway';
    font-size: 1.3vw;
    margin-top: 2vw;
    margin-bottom: 3vw;

}

.mamen3 .isi{
    font-family: 'Raleway';
    font-size: 1vw;
    margin-top: 32vw;
    margin-bottom: 3vw;
    text-align: justify;

}
.mamen3 .row1{
    padding-right: 3vh;
    padding-left: 3vh;
}

.mamen3 .k1{
    width: 15.5vw;

}

.mamen3 .lol{
    margin-left: 46vw;
}

/*--MAMEN 4--------------------------------------------*/

.mamen4 {

}

.mamen4 .k2{
    margin-top: -2.5vh;
    margin-bottom: -2.5vh;

}

.mamen4 .biodata{
    font-family: 'Montserrat';
    font-size: 7vw;
    margin: 0;
    font-weight: 1000;
}

.mamen4 .k2 .b1{
 padding :0;
 margin-left: 5vw;
}

.mamen4 .k2 .b2{
    padding :0;
    margin-left: 16vw;
   }

.mamen4 .k2 .b3{
 padding :0;
 margin-left: 5vw;
}

.mamen4 .k2 .b4{
    padding :0;
    margin-left: 30vw;
   }

.mamen4 .k2 .b5{
    padding :0;
    margin-left: 8vw;
    }

.mamen4 .k2 .b6{
        padding :0;
        margin-left: 11.5vw;
    }

footer .f1{
opacity: 100%;

}

/*---------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:600px) {

    .mamen {
        background-color: #F8F9FA;
        transition: 1s ease;
    }

    .mamen .navpxl {
        padding: 2vw 0 0 0;

    }

    .mamen .btnx{
        width: 16vw;
        height: 16vw;
        padding: 0.07vw;
        border-radius: 10vw;
    }

    .mamen .btny{
        width: 8vw;
        height: 8vw;
    }

    .mamen .btnz{
        width: 25vw;
        height: 1vw;
    }

    .mamen .px{
        width: 80vw;
    }

    .mamen .judul{
        margin: 3vw 3vw 0 3vw;
        padding : 5vw 0 0 4vw;
    }

    .mamen h1 {
        font-family: 'Playfair+Display';
        font-size: 15vw;
        font-weight: 900;
        transition: 1s ease;

    }

    .mamen p{
        font-family: 'Raleway';
        font-size: 4vw;
        padding-top: 2vw;
        transition: 1s ease;
    }

    .mamen .grup1{
        padding-top: 1.8vw;
        transition: 1s ease;

    }

    .mamen .garis{
        margin: 0.7vw;
        padding: 7.1vw 0 0 0;
        }

    .mamen .warnap{
        padding-top: 5vw;
        padding-bottom: 0.8vw;
        font-size: 3.5vw;
        }

    .mamen .kiri {
        padding: 1vw;

    }

    .mamen .porto {
        background-image: url('../img/Home_1.jpg');
        background-size: cover;
        width:90vw;
        height:90vw;
        padding: 2vw;
        margin-top: 5vw;
        margin-left: 5vw;
        border-radius: 2vw;
        transition: 1s ease;
    }

    .mamen .prtx{
        margin:47vw 0 0 0;

    }

    .mamen .portbtn {
        padding-left: 3vw;
        text-align: left;
        font-size: 3vw;
        font-weight: 700;
        width: 25vw;
        height: 10vw;
        border-radius: 5vw;
    }

    .mamen .contbtn {
        padding-left: 1vw;
        text-align: left;
        font-size: 3vw;
        font-weight: 700;
        width: auto;
        height: 10vw;
        border-radius: 5vw;
    }

    .mamen .contbtnx {
        margin-left: 10vw;
    }

    .mamen .ctrx {
        margin:0.5vw 0 0 60vw;
    }

    .mamen .ctr {
        width: 25vw;
        animation-name: warna;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes warna {
        to {
          transform: rotate(1turn);
        }
      }

      /*--MAMEN 2--------------------------------------------*/

.mamen2{
    background-color: #F8F9FA;
    padding: 2.19vw;
    transition: 1s ease;
}
.mamen2 .garisatas{
    padding-bottom: 6vw;
    opacity: 0;
}
.mamen2 h1 {
    font-family: 'Playfair+Display';
    font-size: 0vw;
    font-weight: 900;
    margin-bottom: 1.5vw;
    color: #F8F9FA;
}

.mamen2 p{
    font-family: 'Raleway';
    font-size: 6vw;
    padding-top: 13px;
    color: #F8F9FA;
}


/*--Kolom 0---------------*/
.mamen2 .k0{
    padding: 0px;
    margin-right:0.5vw;
}


/*--Kolom 1---------------*/
.mamen2 .k1{
    background-color: #212529;
    width: 89vw;
    height: 25vw;
    border-radius: 20px;
    margin-left: 4vw;

}
.mamen2 .k1 .kk1{
    width: 89vw;
    height: 25vw;
    border-radius: 20px;
    padding: 3vw;
    padding-left: 5vw;
}

                .mamen2 .k1 .kk1 .btn{
                    width: 15vw;
                    height: 15vw;
                    padding: 1px;
                    border-radius: 60px;
                    margin-top: 0.3vw;
                }

                .mamen2 .k1 .kk1 .garis{
                    padding:0px;
                    margin: 4vw 20px 10px 20px;
                }

                .mamen2 .k1 .kk1 .xgaris{
                    height:1px ;
                    width: 100px;
                }

.mamen2 .k1 .kk2{
    width: 0vw;
    height: 25vw;
    border-radius: 0px;
    padding: -0px;
    position: relative;
    overflow: hidden;
}

                .mamen2 .k1 .kk2 p {
                    font-family: 'Raleway';
                    font-size: 0vw;
                    font-weight: 900;
                    color: #F8F9FA;
                    padding: 0px;
                    margin: 0px;
                    line-height: 1;
                    white-space: nowrap;

                }



/*--Kolom 2---------------*/
.mamen2 .k2{
    background-image: url('../img/bg1.jpg');
    background-size: cover;
    width: 89vw;
    height: 25vw;
    padding: 2vw;
    border-radius: 20px;
    margin-left: 4vw;
    margin-top: 0.5vw;
    margin-right: 0.5vw;

}

.mamen2 .k2 .kk1{
    width: 14vw;
    height: 14vw;
    padding: 0;
    margin: 0;
}

.mamen2 .k2 .wes{
    margin-left: 11vw

}


.mamen2 .k2 .fto{
    background-image: url('../img/Mockup_3.jpg');
    background-size: cover;
    width: 21vw;
    height: 21vw;
    padding: 2vw;
    border-radius: 20px;
}

.mamen2 .k2 .tag1 {
    font-family: 'Montserrat';
    font-size: 0vw;
    font-weight: 900;
    margin-bottom: 0;
    padding: 1.2vh 0.5vw 0 0;
    color: #F8F9FA;

}

.mamen2 .k2 .tag2 {
    font-family: 'Montserrat';
    text-align: right;
    font-size: 0vw;
    font-weight: 900;
    margin-bottom: 0;
    margin-left: 2vw;
    padding: 1.2vh 0 0 0;
    color: #F8F9FA;

}

.mamen2 .k2 .tag3 {
    font-family: 'Raleway';
    font-size: 2.5vw;
    font-weight: 300;
    margin-bottom: 0;
    color: #F8F9FA;
    padding: 0;

}

.mamen2 .k2 .oi {
    font-family: 'Montserrat';
    font-size: 5vw;
    font-weight: 900;
    margin-bottom: 0;
    margin-top: 2vw;
    color: #F8F9FA;

}

.mamen2 .k2 .btn{
    width: 15vw;
    height: 15vw;
    padding: 1px;
    border-radius: 60px;
    margin-top: 2.5vw;
    margin-left: 10vw;
    margin-bottom: 0.25vw;
}

/*--Kolom 3---------------*/
.mamen2 .k3{
    background-image: url('../img/PXL.gif');
    background-size: cover;
    background-position: center;
    width: 89vw;
    height: 25vw;
    padding: 2vw;
    margin-left: 4vw;
    margin-top: 0.5vw;
    border-radius: 20px;

}

.mamen2 .k3 h1 {
    font-family: 'Montserrat';
    font-size: 4vw;
    font-weight: 900;
    margin-bottom: 0;
    color: #F8F9FA;

}

.mamen2 .k3 .tag1 {
    font-family: 'Montserrat';
    font-size: 0vw;
    font-weight: 900;
    margin-bottom: 0;
    margin-left: 0.8vw;
    padding: 1.2vh 0.5vw 0 0;
    color: #F8F9FA;

}

.mamen2 .k3 .tag2 {
    font-family: 'Raleway';
    font-size: 2.5vw;
    font-weight: 300;
    margin-bottom: 0;
    color: #F8F9FA;
    padding: 0;

}

.mamen2 .k3 .cont {
    visibility: hidden;
    margin-top: 6.8vw;

}

.mamen2 .k3 .btn{
    width: 15vw;
    height: 15vw;
    padding: 1px;
    border-radius: 60px;
    margin-top: 2.5vw;
    margin-left: 37vw;
    margin-bottom: 0.25vw;
}

.mamen2 .k3 .exh{
    visibility: visible;

}

.mamen2 .k3 .contx {
    visibility: visible;
    margin-top: 7vw;
    margin-left: 2vw;
    width: auto;
    height: auto;
}

/*--Kolom 4---------------*/
.mamen2 .k4{
    background-image: url('../img/home_6.jpg');
    background-repeat: no-repeat;
    background-position: 0px -30px;
    background-size: cover;
    padding: 2vw;
    width: 89vw;
    height: 25vw;
    margin-left: 4vw;
    margin-top: 0.5vw;
    border-radius: 20px;
    padding-left: 5vw;
}

.mamen2 .k4 h1 {
    font-family: 'Montserrat';
    font-size: 4vw;
    font-weight: 900;
    margin-top: 6vw;
    margin-bottom: 0;
    color: #F8F9FA;

}

.mamen2 .k4 .tag1 {
    font-family: 'Raleway';
    font-size: 2.5vw;
    font-weight: 300;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    color: #F8F9FA;

}

.mamen2 .k4 .tag2 {
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 1.2vw;
    color: #F8F9FA;
    padding:5px 0px 0px 0px;
    margin: 0px;

}

.mamen2 .k4 .cont {
    visibility: hidden;
    margin-top: 0vw;
    padding: 0;

}

.mamen2 .k4 .btn{
    width: 15vw;
    height: 15vw;
    padding: 1px;
    border-radius: 60px;
    margin-left: 29.8vw;
    margin-top: 3vw;
    margin-bottom: 0.25vw;
}

/*--MAMEN 3--------------------------------------------*/

.mamen3{
    background-color: #F8F9FA;
    padding: 2.19vw;
}

.mamen3 h1 {
    font-family: 'Montserrat';
    font-size: 4.5vw;
    font-weight: 900;
    margin-top: 5vw;
    margin-left: 8vw;

}
.mamen3 i {
    font-family: 'Raleway';
    font-size: 4.5vw;
    font-weight: 900;

}

.mamen3 .judul{
    font-family: 'Raleway';
    font-size: 3vw;
    margin-top: 4vw;
    margin-bottom: 3vw;

}

.mamen3 .isi{
    font-family: 'Raleway';
    font-size: 0vw;
    margin-top: 0vw;
    margin-bottom: 0vw;
    text-align: justify;

}
.mamen3 .row1{
    padding-top: 2vw;
    padding-right: 0.1vh;
    padding-left: 0.1vh;
}

.mamen3 .k1{
    width: 30vw;

}

.mamen3 .lol{
    margin-left: 10vw;
}

/*--MAMEN 4--------------------------------------------*/

.mamen4 {

}

.mamen4 .k2{
    margin-top: -2vw;
    margin-bottom: -2vw;

}

.mamen4 .biodata{
    font-family: 'Montserrat';
    font-size: 7vw;
    margin: 0;
    font-weight: 1000;
}

.mamen4 .k2 .b1{
 padding :0;
 margin-left: 10vw;
}

.mamen4 .k2 .b2{
    padding :0;
    margin-left: 16vw;
   }

.mamen4 .k2 .b3{
 padding :0;
 margin-left: 10vw;
}

.mamen4 .k2 .b4{
    padding :0;
    margin-left: 30vw;
   }

.mamen4 .k2 .b5{
    padding :0;
    margin-top: 1vw;
    margin-left: 15vw;
    }

.mamen4 .k2 .b6{
        padding :0;
        margin-left: 7vw;
    }

footer .f1{
    width: 0;
    height: 0;
    visibility: hidden;

}
footer .f2{
    height: 7vw;
    margin-right: 4vw;

}
}