.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;
}
/* style untuk container-top */
#container-top {
    position: relative;
    height : 100vh;
    text-align : center;
    background-image: url('images/homepage/Landing.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
}
.vertical-horizontal-center{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*style untuk container about us */
#container-aboutUS{
    height : 600px;
    text-align : center;
    padding : 5%;
}
#container-aboutUS p{
    font-size: 20px;
}
/* style untuk container galeri */
.kotak {
    height : 580px;
    width : 100%;
    text-align : center;
    padding-right :0.85%
}
#map {
    padding-left: 20px;
    height : 100vh;
}
#gambar-map {
    height : 75vh;
    background-image: url('images/homepage/map.svg');
    background-size: cover;
}
#kota {
    position:absolute;
    bottom: -1275px;
    left: 70px;
}
#kota li {
    list-style: none;
}
#kota li::before {
    content: "\2022";
    color: #0492c2;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}
#container-knitting {
    background-image : url(images/homepage/ProsesProduksiKnitting.jpg); 
    background-size :cover;
    position : relative;
}
/* #container-darker-material:hover, #container-darker-material:active{
    background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://www.xrite.com/-/media/modules/weblog/blog/raw-material-sourcing-textiles/screenshot20160605at91119pmpng.png?la=en&hash=376511823998391B29EAEA7A8657327D4ACCE331);
    background-size : cover;
} */
#container-dyeing {
    background-image : url(images/homepage/ProsesProduksiDyeing.jpg); 
    background-size :cover;
    position : relative;
}
/* #container-darker-ukuran:hover, #container-darker-ukuran:active {
    background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://img.freepik.com/free-photo/colorful-knitting-thread-texture-handiwork-backdrop_279525-2002.jpg?size=626&ext=jpg); 
    background-size : cover;
} */
#container-finishing {
    background-image : url(images/homepage/ProsesProduksiFinishing.jpg); 
    background-size :cover;
    position : relative;
}
/* #container-darker-setting:hover, #container-darker-setting:active{
    background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://thepotentializedmen.com/wp-content/uploads/2021/04/istockphoto-821821278-612x612-1.jpg); 
    background-size : cover;
} */
#container-marketing {
    background-image : url(images/homepage/ProsesProduksiMarketing.jpg); 
    background-size :cover;
    position : relative;
}
/* #container-darker-mesin:hover, #container-darker-mesin:active {
    background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://cdn.shopify.com/s/files/1/0321/0241/files/Sewing_Machine_Stitches_001_large.jpg?17887855082680891261); 
    background-size :cover;
} */
/* #container-darker-material:hover .next span,#container-darker-material:active .next span{
    display : block;
    transition-delay: 100s;
}
#container-darker-ukuran:hover .next span, #container-darker-ukuran:active .next span{
    display : block;
    transition-delay: 100s;
}
#container-darker-setting:hover .next span, #container-darker-setting:active .next span{
    display : block;
    transition-delay: 100s;
}
#container-darker-mesin:hover .next span, #container-darker-mesin:active .next span{
    display : block;
    transition-delay: 100s;
} */
#button {
    text-align : center;
    height : 200px;
    background-color: #F2ECE6;
    padding-top : 45px;
}
.circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size : 10px;
    border-radius: 50%;
    text-align: center;
    background-color : transparent;
    border-style: solid;
    border-width : 1px;
    border-color: white;
}
.next span{
    position : absolute;
    width : 10px;
    height : 10px;
    border : 1px solid white;  
    transform : translateY(-89%) rotate(-45deg);
    top : 89%;
    left : 278.5px;
    display : none;
    border-top : none;
    border-left : none;
}
.next span:before {
    content : '';
    position : absolute;
    width : 202px;
    height :1px;
    border : 1px solid white;
    border-top : none;
    border-left : none;
    border-right : none;
    transform : rotate(45deg) translate(-164px,74px); 
}
/*
.kotak:hover .next span{
display : block;
} */
.inner {
    display : table;
    vertical-align : middle;
    margin-top :125px;
    position : relative;
    top: 50%;
    left: 50%;
}
.rotate {  
    transform:  translateX(-50%) translateY(-50%);
}
/* style untuk container pesan */
#container-pesan {
    height : 500px;
    padding : 5%;
}
.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;
}
.noBullet {
    list-style-type: none;
}
.ganti-warna:hover, .ganti-warna:active{
    background-color : #0492c2;
    color : white;
    border-color : #0492c2;
}
.button-ganti:hover, .button-ganti:active{
    background-color: #DBD3C9;
    color : black;
    border-color : #F2ECE6;
}
.form {
    padding-left : 100px;
}
textarea{
    resize: none;
}
/* stlye untuk footer */
#footer{
    background : #0492c2;
    height:380px; 
    color : white;
    padding : 50px;
    padding-top : 30px;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
/* style untuk semua bisa */
.small {
    line-height: 0.3;
}
.bigger {
    line-height : 5;
}
.gap {
    margin-bottom: 0px;
}
.dontShow { 
    display: none;
}
/* .next span{
    position : absolute;
    width : 10px;
    height : 10px;
    border : 1px solid white;  
    transform : translateY(-89%) rotate(-45deg);
    top : 89%;
    right : 70px;
    border-top : none;
    border-left : none;
    display : none;
}
.next span {
    transform : translateY(-89%) rotate(-45deg);
    top : 89%;
    right : 70px;
    border-top : none;
    border-left : none;
}
.next span:before {
    content : '';
    position : absolute;
    width : 228px;
    height :1px;
    border : 1px solid white;
    border-top : none;
    border-left : none;
    border-right : none;
    transform : rotate(45deg) translate(-185px,83.5px); 
} */
#textbox span {
    float : right;
}
.rotate p {
    transform: rotate(-90deg);
}
.inner p {
    margin-top: 200px;
}
.itemLeft { 
    text-align: center;
}
.title {
    font-size: 50px;
}

.bodycopy {
    font-size: 20px;
}
.itemCenter {
    text-align: center;
}
@supports(-webkit-overflow-scrolling:touch) {
    #container-top{
        background-attachment: scroll;
    }
}
@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;
    }
}
@media screen and (max-width: 989px){
    .kotak {
        height : 1850px;
        margin-bottom : -100px;
        padding-right : 12px;
    }
    #kota { 
        width: 100px;
    }
}
@media screen and (max-width:576px) {
    .itemCenter{
        text-align: left;
    }
    #container-aboutUS{
        height : 750px;
    }
    #footer { 
        height : 600px;
    }
    #map {
        height: 70vh;
        padding-left: 0px;
        margin-bottom: 50px;
    }
    #kota { 
        bottom : -1280px;
        width: 100px;
    }
    #map #gambar-map {
        background-image: url('images/homepage/PetaIN.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
    .kotak h1 {
        margin-top: -50px;
    }
    .rotate p {
        transform: rotate(0deg);
    }
    .gap {
        margin-bottom: 15px;
    }
    .dontShow {
        display: block;
    }
    .container-logo .alignright {
        display: none;
    }
    .kotak {
        margin-bottom : 0px;
        height : 1280px;
    }
    #container-knitting, #container-dyeing, #container-finishing, #container-marketing {
        height : 300px;
    }
    .inner p {
        margin-top: 100px;
    }
    .itemLeft {
        text-align : left;
    }
    .title {
        font-size: 40px;
    }
    .bodycopy{
        font-size: 15px;
    }
}
@media screen and (max-width:542px) {
    #textbox p {
        margin-bottom: 0px;
    }
    #textbox span{
        float : none;
    }
}
@media screen and (max-width:530px) {
    .inputFields{
        width: 250px;
    }
    .input-Fields{
        width: 250px;
    }
}
@media screen and (max-width:500px) {
    #container-top .bigger img {
        width : 40vh;
        height : 400px;
    }
    #container-aboutUS p {
        font-size: 15px;
    }
}
/* @media screen and (max-width:494px) {
    #button {
        padding-top: 30px;
    }
} */