/* style header */
#container-header{
    height : 50px;
}
.navbar .navbar-toggler{
    z-index:1000
}
.navbar-nav li{
    margin-left: 100px;
}
@media (max-width: 991.98px){
    .navbar .navbar-collapse{
        background:#F2ECE6;
        opacity:0;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        transition:opacity 0.35s ease;
        display:flex;
        flex-direction:column;
        align-content:center;
        text-align:center !important
    }
    .navbar .navbar-collapse.collapse{
        display:flex;
        opacity:0;
        pointer-events:none
    }
    .navbar .navbar-collapse.collapsing[style*="height"]{
        opacity:1;
        height:100vh !important
    }
    .navbar .navbar-collapse.collapsing{
        opacity:0;
        height:100vh
    }
    .navbar .navbar-collapse.collapse.show{
        opacity:1;
        pointer-events:auto
    }
    .navbar .navbar-collapse .navbar-nav{
        margin-right:initial !important;
        margin-top:auto;
        /* margin-bottom:auto */
    }
    .navbar-nav li{
        margin-left: 0px;
        margin-bottom: 30px;
    }
    .navbar-nav li:nth-child(5) {
        margin-left : 102px;
        margin-bottom:100px;
    }
    .navbar-nav .dontShowYet {
        display: block;
    }
    div .dontShowYet{
        display: block;
    }
}

@media (max-width: 991.98px) {
    .navbar-nav {
        margin-left: initial !important;
    }
}
.dontShowYet {
    display: none;
}
/* .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}
.style-navs {
    padding-top : 20px;
}
.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
    position : absolute;
    right : 0;
    display: inline-block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}
.topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
}
.topnav.responsive a:hover, .topnav.responsive a:active {
    background-color: #dbd3c9;
    color: black;
}
.style-navs {
    padding-top : 10px;
    width : 100%;
}
} */
.change-color:hover,.change-color:active {
    background-color: #dbd3c9;
}
.container {
    margin-bottom : 40px;
}
.grid-container {
    display: grid;
    grid-auto-rows: 25px;
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}

.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    margin: 5px;
}

.grid-row-200 {
    grid-row: span 8;
}

.grid-row-225 {
    grid-row: span 9;
}

.grid-row-250 {
    grid-row: span 10;
}

.grid-row-275 {
    grid-row: span 11;
}

.grid-row-300 {
    grid-row: span 12;
}

.grid-row-350 {
    grid-row: span 14;
}
.grid-container img {
    width :100%;height:100%;
}
/* style untuk footer */
#footer{
    background :#0492c2;
    color : white;
    height:380px; 
    padding : 50px;
    padding-top : 30px;
}
.ganti-warna:hover, .ganti-warna:active{
    background-color : #0492c2;
    color : white;
    border-color : #0492c2;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
h1 {
    margin-top : 100px;
    margin-bottom : 50px;
    text-align : center;
}
.notshow {
    display : none;
}
.button {
    text-align : center;
    margin-bottom : 50px;
}
.buttonMobile {
    display: none;
    text-align : center;
    margin-bottom: 50px;
}
.dontShow { 
    display: none;
}
#textbox span {
    float : right;
}
.ganti-warna-button-mobile {
    border-radius:50%;
    width:50px;
    height:50px;
    /* background: transparent; */
}
.itemLeft { 
    text-align: center;
}
.itemCenter{
    text-align: center;
}
#page1 {
    background : #0492c2;
    color: white;
    border-color : #0492c2;
}
#page2, #page3 {
    border-color : #0492c2;
    background-color: transparent;
}
@media screen and (max-width:1000px) {
    .grid-container {
        display: grid;
        grid-auto-rows: 25px;
        grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
    }
}
@media screen and (max-width:768px) {
    .grid-container {
        display: grid;
        grid-auto-rows: 25px;
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    }
}

@media screen and (max-width:576px) {
    .container-button-href{
        text-align: left;
    }
    .itemCenter{
        text-align: left;
    }
    .grid-container {
        display: grid;
        grid-auto-rows: 25px;
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
        padding-left : 10px ;
        padding-right : 10px;
    }
    #footer { 
        height :600px;
    }
    .gap {
        margin-bottom: 15px;
    }
    .dontShow {
        display: block;
    }
    .container-logo .alignright {
        display: none;
    }
    .itemLeft {
        text-align : left;
    }
    .title {
        font-size: 40px;
    }
    .bodycopy{
        font-size: 15px;
    }
    .button {
        display : none;
    }
    .buttonMobile{
        display: block;
    }
}
@media screen and (max-width:542px) {
    #textbox p {
        margin-bottom: 0px;
    }
    #textbox span{
        float : none;
    }
}
@media screen and (max-width:400px) {
    .grid-container {
        display: grid;
        grid-auto-rows: 12px;
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
        padding-left : 10px ;
        padding-right : 10px;
    }
}