/* container untuk image slide */
#imageSlider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

#imgSlide {
    display: flex;
    width: 500%;
}

/* radio button untuk image slide */
#imgSlide input {
    display: none;
}

/* gambar tiap-tiap poster */
.imgObject {
    width: 20%;
    display: flex;
    justify-content: center;
    transition: 2s;
}

.imgObject img {
    width: 100%;
    border-radius: 15px;
}

/* tombol untuk auto slide */
#autoSlide {
    position: absolute;
    width: 100%;
    top: 88%;
    display: flex;
    justify-content: center;
}

#autoSlide div {
    border: 2px solid #C34939;
    padding: 5px;
    border-radius: 50%;
}

#autoSlide div:not(:last-child) {
    margin-right: 20px;
}

#img1:checked~#autoSlide #a-btn1 {
    background-color: #C34939;
}

#img2:checked~#autoSlide #a-btn2 {
    background-color: #C34939;
}

#img3:checked~#autoSlide #a-btn3 {
    background-color: #C34939;
}

#img4:checked~#autoSlide #a-btn4 {
    background-color: #C34939;
}

#img5:checked~#autoSlide #a-btn5 {
    background-color: #C34939;
}

/* tombol untuk manual slide */
#manualSlide {
    position: absolute;
    width: 100%;
    top: 88%;
    display: flex;
    justify-content: center;
}

#manualSlide .m-btn {
    border: 2px solid #C34939;
    padding: 5px;
    border-radius: 50%;
}

#manualSlide .m-btn:not(:last-child) {
    margin-right: 20px;
}

#manualSlide .m-btn:hover {
    background-color: #C34939;
}

#img1:checked~.first {
    margin-left: 0;
}

#img2:checked~.first {
    margin-left: -20%;
}

#img3:checked~.first {
    margin-left: -40%;
}

#img4:checked~.first {
    margin-left: -60%;
}

#img5:checked~.first {
    margin-left: -80%;
}

/* =============================================================================================================== */
/* =============================================================================================================== */
/* container home content */
#contentHome {
    margin-top: 50px;
}

/* **************** */
/* bagian content */
.row {
    display: flex;
    flex-direction: row;
}

.row:not(:first-child) {
    margin-top: 8%;
}

/* **************** */
/* row 1 biografi  */
#contentHome #biografi {
    display: flex;
    justify-content: space-between;
}

#contentHome #biografi #photoJudika {
    width: 28%;
}

#contentHome #biografi #photoJudika img {
    width: 100%;
    border-radius: 15px;
}

#contentHome #biografi #textJudika {
    width: 70%;
}

#contentHome #biografi #textJudika span {
    font-size: 2.5em;
    font-weight: 500;
}

#contentHome #biografi #textJudika p#p1 {
    margin-top: 1.5%;
}

#contentHome #biografi #textJudika p {
    text-indent: 2em;
}

/* **************** */
/* row 2 video & forum */
#media {
    display: block;
}

#videoForum {
    display: flex;
    justify-content: center;
    margin-top: 1%;
    height: 200px;
}

#videoForum div:not(:last-child) {
    margin-right: 3%;
}

#videoForum div {
    width: 35%;
}

#linkForum #forumBox {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#linkForum #forumBox #forumLink {
    height: 70%;
    width: 40%;
    max-height: 150px;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background-color: #C34939;
}

#linkForum #forumBox #forumLink img {
    width: 60%;
    max-width: 80px;
    margin-top: 5%;
    margin-left: 50%;
    transform: translate(-50%);
}

#linkForum #forumBox #forumLink span {
    text-align: center;
    font-family: 'Ubuntu Mono', monospace;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
}

#linkForum #forumBox #forumText {
    text-align: left;
    width: 55%;
    font-size: 1.2em;
}

#linkForum #forumBox #forumText a {
    text-decoration: underline;
}

#linkForum #forumBox #forumText a:hover {
    color: #C34939;
}

/* **************** */
/* row 3 out program */
#ourProgram {
    position: relative;
    display: flex;
    justify-content: center;
}

#ourProgram img {
    width: 100%;
    border-radius: 10px;
}

#ourProgramHover {
    position: absolute;
    height: 0;
    width: 100%;
    transition: 0.6s;
    background-color: black;
    opacity: 30%;
}

#ourProgram:hover img~#ourProgramHover {
    height: 100%;
}

/* =============================================================================================================== */
/* =============================================================================================================== */
/* login require popup */
#logRequire {
    position: fixed;
    top: 0;
    z-index: 1001;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}

#logRequire #requireContent {
    margin-left: 50%;
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: translate(-50%);
    background-color: #201f1f;
    width: 28%;
    height: 50%;
    border-radius: 15px;
    opacity: 1;
}

#logRequire #requireContent #close-btn {
    position: absolute;
    top: -3%;
    right: 0;
    font-size: 2.5em;
    margin: 5%;
}

#logRequire #requireContent h1 {
    margin-bottom: 5%;
}

#logRequire #requireContent .btn {
    padding: 1% 1.5%;
    background-color: #C34939;
    border-radius: 50px;
    width: 90px;
    text-align: center;
    font-size: 1.3em;
}

#logRequire #requireContent .orText {
    font-size: 1.5em;
}

#logRequire #requireContent .google {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    border-radius: 50px;
    margin-top: 4%;
    padding: 1% 2%;
}

#logRequire #requireContent img {
    width: 13%;
}

#logRequire #requireContent .google #google-txt {
    margin-left: 2%;
    color: black;
    font-size: 1.2em;
    text-align: left;
}

#logRequire #requireContent #close-btn:hover {
    color: #9b6c66;
}

#logRequire #requireContent .btn:hover {
    background-color: #A33324;
    color: rgb(226, 226, 226);
    cursor: pointer;
}

#logRequire #requireContent .google:hover {
    opacity: 70%;
}


@keyframes onload {
    from {
        opacity: 0;
        margin-top: -50%;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}