/* style navbar */
.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 {
    width : 100%;
    padding-top : 10px;
}
}

.navbar-nav li{
    margin-left: 100px;
} */
.change-color:hover, .change-color:active {
    background-color: #dbd3c9;
}
/* section untuk container pertama */
#gambar{
    background-image : url('images/kontak/LandingKontak2.jpg');
    background-size : cover;
    height : 60vh;
}
#tulisan{
    height : 40vh;
    text-align : center;
    padding-top : 5%;
}
/* style untuk section google map */
#map {
    height : 60vh;
    overflow : hidden;
}
#container-alamat-real{
    position : relative;
    background-color:#F2ECE6;
    height : 60vh;
    margin-left: opx;
}
#container-alamat-real p{
    font-size: 15px;
}
#container-map {
    padding-right :0px;
    height : 60vh;
    margin-right: 0px;
}
/* style untuk alamat dan kontak */
#alamat {
    padding-top : 5%;
    padding-right : 10%;
    padding-left : 15%;
    height : 60vh;
}
/* stlye untuk container pesan */
#container-pesan {
    height : 500px;
    padding : 5%;
    overflow : hidden;
}
.inputFields{
    width: 500px;
    margin: 15px 0;
    box-shadow : none;
    border-color: #ccc;
    border-radius:0;
    border-style : none none solid none;
}
.input-Fields{
    width: 500px;
    margin: 15px 0;
    height: 200px;
}
.input-Fields:focus, .inputFields:focus{
    box-shadow: none;
    outline : none;
}
.form {
    padding-left : 100px;
}
.noBullet {
    list-style-type: none;
}
.ganti-warna:hover, .ganti-warna:active{
    background-color : #0492c2;
    color : white;
    border-color : #0492c2;
}
.khusus {
    border-radius: 25px; 
    padding-right : 15px; 
    padding-left : 15px; 
    background-color : transparent;
}
.dontShow { 
    display: none;
}
textarea{
    resize: none;
}
/* style untuk section closing */
#closing {
    position : relative;
    height : 50vh;
    text-align : center;
    background-image : url('images/kontak/Atasnyafooter2.jpg');
    background-size : cover;
}
#closing:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
}
#closing p {
    position : relative;
}
.center {
    position: absolute;
    right : 4%;
    top: 50%;
    transform: translateY(-50%);
}
/* style untuk footer */
#footer{
    background : #0492c2;
    height:380px; 
    padding : 50px;
    padding-top : 30px;
    color : white;
}
#textbox span {
    float : right;
}
/* style yang bisa untuk banyak hal */
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.smaller{
    line-height: 1.5;
}
.bigger{
    line-height:2;
}
.container {
    position : relative;
}
.itemLeft { 
    text-align: center;
}
.title {
    font-size: 50px;
}
.bodycopy {
    font-size: 20px;
}
.itemCenter{
    text-align : center;
}
.aturwidth {
    width: 30%;
}
@media screen and (max-width: 1300px){
    #container-pesan {
        padding : 5%;
    }
    #container-pesan textarea {
    margin-left : 5px;
    }
    .form, .noBullet, .pesan{
        padding-left : 0px;
    }
}
@media screen and (max-width: 1116px){
    #container-pesan {
        height : 750px;
        padding : 5%;
        text-align: center;
    }
    #container-pesan textarea {
    margin-left : 5px;
    }
    .form, .noBullet, .pesan{
        padding-left : 0px;
    }
    .aturwidth {
        width: 60%;
    }
}
@media screen and (max-width: 767px){
    /* #alamat {
        height : 60vh;
        margin-bottom : 250px;
    } */
}
@media screen and (max-width:576px) {
    .itemCenter{
        text-align: left;
    }
    #alamat {
        height: 65vh;
        margin-bottom : 350px;
    }
    #map {
        height : 120vh;
    }
    #footer { 
        height : 600px;
    }
    .gap {
        margin-bottom: 15px;
    }
    .dontShow {
        display: block;
    }
    .container-logo .alignright {
        display: none;
    }
    .itemLeft {
        text-align : left;
    }
    #tulisan {
        top : 10%;
    }
    .title {
        font-size: 40px;
    }
    .bodycopy{
        font-size: 15px;
    }
}
@media screen and (max-width:515px) {
    #textbox p {
        margin-bottom: 0px;
    }
    #textbox span{
        float : none;
    }
    #container-alamat-real p{
        font-size: 10px;
    }
}
@media screen and (max-width:530px) {
    .inputFields{
        width: 250px;
    }
    .input-Fields{
        width: 250px;
    }
}
@media screen and (max-width:378px) {
    .bigger{
        line-height:1;
        margin-bottom: 20px;
    }
}