.visi-misi{
    display: flex;
    height: 562px;
}

.tahun{
    background-color: #fff;
    color: #025BAB;
    width: 100px;
    height: 50px;
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
}
.home-journey{
    z-index: 1;
    height: auto;
    position: relative;
    left: 150px;
    top: -70px;
    width: 300px;
    color: #fff;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#card-journey{
    position: relative;
    padding-top: 120px;
}

@media (min-width:769px) {
.tahun:hover{
    overflow: unset;
}

.tahun:hover .home-journey{
    left: 100px;
    opacity: 1;
}

.tahun-2{
    background-color: #fff; 
    color: #025BAB;
    width: 100px;
    height: 50px;
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
}
.home-journey-2{
    z-index: 1;
    height: auto;
    position: relative;
    left: -380px;
    top: -70px;
    width: 300px;
    color: #fff;
    opacity: 0;
    transition: all 1s ease-in-out;
}

#card-journey-2{
    position: relative;
    padding-top: 120px;
}

.tahun-2:hover{
    overflow: unset;
}

.tahun-2:hover .home-journey-2{
    left: -330px;
    opacity: 1;
}
}

@media (min-width: 527px) AND (max-width:768px) {
    .tahun{
      background-color: #fff;
      color: #025BAB;
      width: 100px;
      height: 50px;
      padding: 14px;
      border-radius: 10px;
      text-align: center;
      overflow: unset;
    }
    .home-journey{
      z-index: 1;
      height: auto;
      position: relative;
      left: 80px;
      top: -60px;
      width: 200px;
      color: #fff;
      opacity: 1;
    }

    #card-journey{
      position: relative;
      padding-top: 120px;
    }

    .tahun-2{
      background-color: #fff; 
      color: #025BAB;
      width: 100px;
      height: 50px;
      padding: 14px;
      border-radius: 10px;
      text-align: center;
      overflow: unset;
    }
    .home-journey-2{
      z-index: 1;
      height: auto;
      position: relative;
      left: -210px;
      top: -60px;
      width: 200px;
      color: #fff;
      opacity: 1;
    }

    #card-journey-2{
      position: relative;
      padding-top: 120px;
    }
}

@media (min-width:300px) AND (max-width: 526px) {
.tahun{
    background-color: #fff;
    color: #025BAB;
    width: 80px;
    height: 40px;
    padding: 8px;
    border-radius: 10px;
    text-align: center;
    overflow: unset;
}
.home-journey{
    z-index: 1;
    height: auto;
    position: relative;
    left: 60px;
    top: -45px;
    width: 150px;
    color: #fff;
    opacity: 1;
}

.img-journey{
    width: 100px;
}

#card-journey{
    position: relative;
    padding-top: 120px;
}

.content-journey{
    font-size: 8px !important;
}

.tahun-2{
    background-color: #fff;
    color: #025BAB;
    width: 80px;
    height: 40px;
    padding: 8px;
    border-radius: 10px;
    text-align: center;
    overflow: unset;
}
.home-journey-2{
    z-index: 1;
    height: auto;
    position: relative;
    left: -150px;
    top: -40px;
    width: 150px;
    color: #fff;
    opacity: 1;
}

#card-journey-2{
    position: relative;
    padding-top: 120px;
}

.img-journey-2{
    width: 100px;
}

.content-journey-2{
    font-size: 8px !important;
}

}

@media (min-width:300px) AND (max-width:479px) {
    .visi-misi{
        display: flex;
        height: auto;
        flex-direction: column;
    }
    .vision{
        width: 100%;
        height: 300px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
        width: 60px;
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -160px;
        float:right;
        opacity: 0;
        font-size: 10px;
        width: 85%;
        padding-right: 25px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        font-size: 18px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 200px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -180px;
        text-align: right;
    }

    .vision:hover{
        width: 100%;
        height: 300px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-150px;
        left:-22px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -290px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        top: -100px;
        left: 45px;
        color: #fff;
    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -130px;
        left: -90px;
        height: 350px;
        filter: blur(2px);
    }

    .mission{
        width: 100%;
        height: 300px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        width: 60px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 100%;
        font-size: 10px;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 45px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        font-size: 18px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 140px;
        right: -20px;
        height: 250px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 100%;
        height: 300px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-55px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 35px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -40px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 150px;
        right: -50px;
        height: 320px;
        filter: blur(2px);
    }
}

@media (min-width:480px) AND (max-width:547px) {
    .visi-misi{
        display: flex;
        height: auto;
        flex-direction: column;
    }
    .vision{
        width: 100%;
        height: 400px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
        width: 60px;
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -160px;
        float:right;
        opacity: 0;
        font-size: 14px;
        width: 85%;
        padding-right: 25px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        font-size: 22px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 250px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -220px;
        text-align: right;
    }

    .vision:hover{
        width: 100%;
        height: 400px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-150px;
        left:-30px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -330px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        top: -100px;
        left: 45px;
        color: #fff;
    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -130px;
        left: -90px;
        height: 350px;
        filter: blur(2px);
    }

    .mission{
        width: 100%;
        height: 400px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        width: 60px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 80%;
        font-size: 14px;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 95px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        font-size: 22px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 10px;
        right: -20px;
        height: 250px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 100%;
        height: 400px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-55px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 80px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -42px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 50px;
        right: -50px;
        height: 350px;
        filter: blur(2px);
    }
}

@media (min-width:548px) AND (max-width:725px) {
    .visi-misi{
        display: flex;
        height: auto;
        flex-direction: column;
    }
    .vision{
        width: 100%;
        height: 500px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
        width: 60px;
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -160px;
        float:right;
        opacity: 0;
        font-size: 14px;
        width: 85%;
        padding-right: 25px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        font-size: 22px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 300px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -220px;
        text-align: right;
    }

    .vision:hover{
        width: 100%;
        height: 500px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-450px;
        left:-30px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -630px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        top: -400px;
        left: 45px;
        color: #fff;
    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -200px;
        left: -150px;
        height: 700px;
        filter: blur(2px);
    }

    .mission{
        width: 100%;
        height: 500px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        width: 60px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 80%;
        font-size: 14px;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 95px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        font-size: 22px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 10px;
        right: -20px;
        height: 300px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 100%;
        height: 500px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-55px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 80px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -42px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 20px;
        right: -70px;
        height: 400px;
        filter: blur(2px);
    }
}

@media (min-width:726px) AND (max-width:865px) {
    .visi-misi{
        display: flex;
        height: auto;
        flex-direction: column;
    }
    .vision{
        width: 100%;
        height: 500px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -380px;
        float:right;
        opacity: 0;
        width: 65%;
        padding-right: 35px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -420px;
        text-align: right;
    }

    .vision:hover{
        width: 100%;
        height: 500px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-300px;
        left:-25px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -650px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        left: 100px;
        top: -200px;
        color: #fff;
    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -200px;
        left: -150px;
        height: 700px;
        filter: blur(2px);
    }

    .mission{
        width: 100%;
        height: 500px;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 65%;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 95px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 160px;
        right: -20px;
        height: 400px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 100%;
        height: 500px;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-90px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 60px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -82px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 200px;
        right: -100px;
        height: 550px;
        filter: blur(2px);
    }
}

@media (min-width:866px) AND (max-width:999px) {
    .vision{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -380px;
        float:right;
        opacity: 0;
        width: 65%;
        padding-right: 35px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -420px;
        text-align: right;
    }

    .vision:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-300px;
        left:-25px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -650px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        left: 100px;
        top: -200px;
        color: #fff;
    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -200px;
        left: -150px;
        height: 700px;
        filter: blur(2px);
    }

    .mission{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 65%;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 95px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 300px;
        right: 135px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-90px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 60px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -82px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 250px;
        right: 200px;
        height: 600px;
        filter: blur(2px);
    }
}

@media (min-width: 1000px) AND (max-width:1300px) {
    .vision{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -380px;
        float:right;
        opacity: 0;
        width: 65%;
        padding-right: 35px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -420px;
        text-align: right;
    }

    .vision:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-300px;
        left:-25px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -650px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        left: 100px;
        top: -200px;
        color: #fff;
    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -200px;
        left: -150px;
        height: 700px;
        filter: blur(2px);
    }

    .mission{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 65%;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 95px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 245px;
        right: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-90px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 60px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -82px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 240px;
        right: 85px;
        height: 600px;
        filter: blur(2px);
    }
}

@media (min-width: 1301px) AND (max-width: 1435px){
    .vision{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -380px;
        float:right;
        opacity: 0;
        width: 65%;
        padding-right: 35px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -420px;
        text-align: right;
    }

    .vision:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-300px;
        left:-25px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -650px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        left: 100px;
        top: -200px;
        color: #fff;

    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -200px;
        left: -150px;
        height: 700px;
        filter: blur(2px);
    }

    .mission{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 65%;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 95px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 200px;
        right: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-90px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 60px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -82px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 160px;
        right: -70px;
        height: 550px;
        filter: blur(2px);
    }
}

@media (min-width: 1436px) {
    .vision{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-vision{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-vision.png);
    }

    .text-vision-contents{
        text-align: right;
        position:  relative;
        top: -380px;
        float:right;
        opacity: 0;
        width: 65%;
        padding-right: 35px;
        transition: all 1s ease-in-out;
    }

    .text-vision{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-vision-batik-content{
        position: relative;
        top: -70px;
        left: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .icon-content-vision{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: -420px;
        text-align: right;
    }

    .vision:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .vision:hover #img-vision{
        position: relative;
        top:-300px;
        left:-25px;
        content:url(../img/icon-vision-white.png);
    }

    .vision:hover .text-vision-contents{
        opacity: 1;
        top: -650px;
        color: #fff;
    }

    .vision:hover .text-vision{
        position: relative;
        left: 100px;
        top: -200px;
        color: #fff;
    }

    .vision:hover #bg-vision-batik-content{
        position: relative;
        top: -200px;
        left: -150px;
        height: 700px;
        filter: blur(2px);
    }

    .mission{
        width: 50%;
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
        overflow: hidden;
        background-color: #D9D9D9;
    }

    #img-mission{
        position: relative;
        top:0px;
        left:0px;
        transition: all 1s ease-in-out;
        content:url(../img/icon-mission.png);
    }

    .text-mission-contents{
        text-align: left;
        position:  relative;
        opacity: 0;
        width: 65%;
        top: 120px; 
        left: 0px;
        padding-left: 20px;
        transition: all 1s ease-in-out;
    }

    .icon-content-mission{
        font-size: 30px;
        font-weight: 700;
        position: relative;
        top: 95px;
        text-align: left;
    }

    .text-mission{
        position: relative;
        left: 0px;
        top: 0px;
        transition: all 1s ease-in-out;
    }

    #bg-mission-batik-content{
        position: relative;
        bottom: 200px;
        right: -20px;
        height: 500px;
        transition: all 1s ease-in-out;
    }

    .mission:hover{
        width: 50%;
        background: linear-gradient(to bottom right, rgba(2, 91, 171, 1) 0%, rgba(60, 154, 255, 1) 100%);
        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mission:hover #img-mission{
        position: relative;
        top:-90px;
        left: 30px;
        content:url(../img/icon-mission-white.png);
    }

    .mission:hover .text-mission-contents{
        opacity: 1;
        top: 60px; 
        left: 0px;
        color: #fff;
    }

    .mission:hover .text-mission{
        position: relative;
        left: -82px;
        top: 0px;
        color: #fff;
    }

    .mission:hover #bg-mission-batik-content{
        position: relative;
        bottom: 160px;
        right: -70px;
        height: 550px;
        filter: blur(2px);
    }
}