:root {
    --midblue: #31334a;
    --cream: #ffe9c2;
    --white: #faf7f0;
    --rock: #f15b29;
    --rockblue: #2e3192;
    --nr: #F5e7ca;
    --nrgreen: #007f30;
    --cilembu: #ffce72;
    --cilembuorange: #f78d20;
    --darbe: #242424;
    --darbegold: #d2ae6d;
}
  
  * {
    margin: 0;
    padding: 0;
    font-family: 'Bodoni Moda', serif;
    color: var(--midblue);
    font-size: 16pt;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-x: hidden;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

body {
    background-color: var(--white);
}

p {
font-family:'Open Sans', sans-serif;
line-height: 1.5;
font-size: 0.9rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 15px;
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
    background: var(--white); 
}
   
/* Scrollbar Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--midblue); 
}

ion-icon {
    font-size: 2.5rem;
    color: var(--midblue);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 92vw;
    margin: 1rem auto;
}

/* Content */

.morework {
    width: 75vw;
    margin: 0 auto;
}

.intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.introleft {
    width: 40%;
}

.introright {
    width: 60%;
}

.textgrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.textleft {
    margin-right: 5rem;
}

.banner {
    height: 450px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 8rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.botnav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 4rem 0;
}

.botnavlink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
}

.botnavtext {
    margin: 0;
    font-weight: bold;
    padding: 0 1rem;
    font-size: 1.2rem;
}

.prev, .next {
    width: 45%;
    height: 200px;
    padding: 0 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
}

.prev {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.next {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.firstwork, .lastwork {
    visibility: hidden;
}

.under {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 6rem 0 4rem 0;
}
.under h2 {
    width: 40%;
}

.under p {
    width: 60%;
}

.mockup {
    margin-top: 4rem;
}

/* Mockup Images */
.setimg {
    height: 100vh;
    width: 100%;
    margin-bottom: 2rem;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.imgrock:nth-child(1) {
    background-image: url(../works/ROCK_GSM.jpg);
}

.imgrock:nth-child(2) {
    background-image: url(../works/ROCK_GSMCONTENT.jpg);
}

.imgrock:nth-child(3) {
    background-image: url(../works/ROCK_STATIONERY.jpg);
}

.imgrock:nth-child(4) {
    background-image: url(../works/ROCK_MERCH.jpg);
}

.imgrock:nth-child(5) {
    background-image: url(../works/ROCK_CAR.jpg);
}

.imgnr:nth-child(1) {
    background-image: url(../works/NR_BROSUR.jpg);
}

.imgnr:nth-child(2) {
    background-image: url(../works/NR_INSTASTORY.jpg);
}

.imgnr:nth-child(3) {
    background-image: url(../works/NR_ONLINESHOP.jpg);
}

.imgnr:nth-child(4) {
    background-image: url(../works/NR_SPANDUK1.jpg);
}

.imgnr:nth-child(5) {
    background-image: url(../works/NR_SPANDUK2.jpg);
}

.imgcilembu:nth-child(1) {
    background-image: url(../works/CILEMBU_PACKAGING.jpg);
}

.imgcilembu:nth-child(2) {
    background-image: url(../works/CILEMBU_LAYOUT.jpg);
}

.imgdarbe:nth-child(1) {
    background-image: url(../works/DARBECAFE_IGFEEDS.jpg);
}

.imgdarbe:nth-child(2) {
    background-image: url(../works/DARBECAFE_UI.jpg);
}

.imgdarbe:nth-child(3) {
    background-image: url(../works/DARBECAFE_AR.jpg);
}

.imgdarbe:nth-child(4) {
    background-image: url(../works/DARBECAFE_CHALLENGE.jpg);
}

.imgrock:nth-child(2) {
    height: 110vh;
}

.imgnr:nth-child(2),
.imgnr:nth-child(5),
.imgcilembu:nth-child(1),
.imgcilembu:nth-child(2) {
    height: 130vh;
}

/* Responsive Mockup Images */
@media only screen and (max-width: 1400px) {
    .setimg {
        height: 80vh;
    }

    .imgrock:nth-child(2) {
        height: 85vh;
    }

    .imgnr:nth-child(2),
    .imgnr:nth-child(5),
    .imgcilembu:nth-child(1),
    .imgcilembu:nth-child(2) {
        height: 105vh;
    }
}

@media only screen and (max-width: 1200px) {
    .setimg {
        height: 70vh;
    }

    .imgrock:nth-child(2) {
        height: 75vh;
    }

    .imgnr:nth-child(2),
    .imgnr:nth-child(5),
    .imgcilembu:nth-child(1),
    .imgcilembu:nth-child(2) {
        height: 95vh;
    }
}

@media only screen and (max-width: 1000px) {
    .setimg {
        height: 60vh;
    }

    .imgrock:nth-child(2) {
        height: 65vh;
    }
    .imgnr:nth-child(2),
    .imgnr:nth-child(5),
    .imgcilembu:nth-child(1),
    .imgcilembu:nth-child(2) {
        height: 85vh;
    }
}

/* Different Styles for every works */
#partner {
    margin-top: 1.5rem;
}

/* Banner */
.rock {
    background-color: var(--rock);
    background-image: url(../works/ROCK_LOGO.png);
}

.nr {
    background-color: var(--nr);
}

.cilembu {
    background-color: var(--cilembu);
    background-image: url(../works/CILEMBU_LOGO.png);
}

.darbe {
    background-color: var(--darbe);
}

/* Banner Text */
.nrtext {
    color: var(--nrgreen);
    font-size: 1.5rem;
}

.darbetext {
    color: var(--darbegold);
    font-size: 2rem;
    margin-left: 4rem;
}

/* Botnav Hover */
.nrlink {
    background-position: left;
}
.nrlink:hover {
    background-color: var(--nr);
    background-image: url(../works/NR_LOGO.png);
    background-position: 18%;
    background-repeat: no-repeat;
    background-size: 20vh;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.nrlink:hover .botnavtext {
    color: var(--nrgreen);
}

.nrlink:hover ion-icon {
    color: var(--nrgreen);
}

.rocklink {
    background-position: right;
}
.rocklink:hover {
    background-color: var(--rock);
    background-image: url(../works/ROCK_LOGO.png);
    background-position: 82%;
    background-repeat: no-repeat;
    background-size: 16vh;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.rocklink:hover .botnavtext {
    color: var(--rockblue);
}

.rocklink:hover ion-icon {
    color: var(--rockblue);
}

.cilembulink {
    background-position: left;
}
.cilembulink:hover {
    background-color: var(--cilembu);
    background-image: url(../works/CILEMBU_LOGO.png);
    background-position: 18%;
    background-repeat: no-repeat;
    background-size: 20vh;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.cilembulink:hover .botnavtext {
    color: var(--cilembuorange);
}

.cilembulink:hover ion-icon {
    color: var(--cilembuorange);
}

.nrprevlink {
    background-position: right;
}
.nrprevlink:hover {
    background-color: var(--nr);
    background-image: url(../works/NR_LOGO.png);
    background-position: 82%;
    background-repeat: no-repeat;
    background-size: 20vh;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.nrprevlink:hover .botnavtext {
    color: var(--nrgreen);
}

.nrprevlink:hover ion-icon {
    color: var(--nrgreen);
}

.darbelink {
    background-position: left;
}
.darbelink:hover {
    background-color: var(--darbe);
    background-image: url(../works/DARBECAFE_LOGO.png);
    background-position: 22%;
    background-repeat: no-repeat;
    background-size: 10vh;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.darbelink:hover .botnavtext {
    color: var(--darbegold);
}

.darbelink:hover ion-icon {
    color: var(--darbegold);
}

.cilembuprevlink {
    background-position: right;
}
.cilembuprevlink:hover {
    background-color: var(--cilembu);
    background-image: url(../works/CILEMBU_LOGO.png);
    background-position: 82%;
    background-repeat: no-repeat;
    background-size: 22vh;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.cilembuprevlink:hover .botnavtext {
    color: var(--cilembuorange);
}

.cilembuprevlink:hover ion-icon {
    color: var(--cilembuorange);
}