@import url('https://fonts.googleapis.com/css2?family=Monserrat:wght@300;700&display=swap');


body {
     font-family: 'Monserrat', sans-serif;
     margin: 0;
     padding: 0;
     /* background: url('https://bungaontheweb.com/img/display/half1.png') no-repeat bottom left fixed, url('https://bungaontheweb.com/img/display/half 2.png') no-repeat bottom right fixed, url('https://bungaontheweb.com/img/display/half 3.png') no-repeat top left fixed, url('https://bungaontheweb.com/img/display/half4.png') no-repeat top right fixed; */
}

#orange {background-color: #ff4f33;}
#blue {background-color: #2c9dd8;}
#purple {background-color: #d42dc8;}
#green {background-color: #21db64;}

/*#orange {background-image: linear-gradient(#f67280, #c06c84);}
#blue {background-image: linear-gradient(#6c5b7b, #355c7d);}
#purple {background-image: linear-gradient(#c06c84, #6c5b7b);}*/

.gray {opacity: 0.5;}

.content {
     max-width: 1024px;
     width: 100%;
     margin: 0 auto;
}

.logo {
     background: url('https://bungaontheweb.com/img/display/logo.png') no-repeat center center ;
     width: 100%;
     height: 150px;
     margin: 50px auto;
}

nav {
     font-size: 1.25em;
     font-weight: 700;
}
     ul {
          list-style-type: none;
          margin: 0 auto;
          padding: 0;
          overflow: hidden;
          width: 50%;
          display: flex;
          background-color: rgba(255, 255, 255, 0.75);
          /*border-top: 5px solid rgba(0, 0, 64, 0.75); */
     }
          ul img {
               width: 24px;
               opacity: 0.80;
          }

     li {
          display: inline-block;
          text-align: center;
          margin: 0 auto;
          padding: 15px 0;
          color: #000;
          width: 100%;

     }
     ul a {    
          color: #000;
          text-decoration: none;
          width: 100%;
     }
     ul a:hover, ul a:hover {    
          background-color: #FFF;
     }

          .active {
          background-color: #FFF;
          color: #000;
          }

.gallery {
     width: 100%;
     background-color: #FFF;
     text-align: center;
     padding: 20px 0;
     border-radius: 20px;
}

     .gallery p {
          font-size: 1.0em;
          font-weight: 300;
          padding: 0 24px;
     }
          .gallery p img {
          width: auto;
          height: 50px;
          vertical-align: middle;
     }

     .gallery a {
          color: #000;
          text-decoration: none;
     }


.grid, .grid-video {
     display: inline-block;
     padding: 0 10px 20px 10px; 
     vertical-align: text-top;
     border-bottom: 3px dotted lightgray;
}
.grid {
     column-count: 3;
}
.grid-video {
     column-count: 2;
}
     .grid img, .grid-video video {
          padding: 10px;
          width: 95%;
          max-width: 480px;
     }


.text {
     width: 100%;
     padding-top: 12px;
}

     .text p, .text h3 {
          padding: 0 50px;
          text-align: left;
     }

     .bunga h1 {
          font-size: 2.5em;
          padding: 0 auto;
          font-variant-caps: small-caps;
          margin-top: 0;
          margin-bottom: 24px;
     }
     .bunga h2 {
          font-size: 2.0em;
          padding-top: 0;
          font-variant-caps: small-caps;
     }
     .text h3 {
          font-size: 1.75em;
          font-variant-caps: small-caps;
     }


.image {
     display: inline-block;
     vertical-align: middle;
}

.min {
     font-size: 80%;
}

.bunga {
     width: 100%;
}

footer {
     color: #FFF;
     text-align: center;
     font-size: 0.75em;
}


     }

footer p {padding: 20px 0;}


@media screen and (max-width:480px){

     .text p, .text h3 {
     padding: 0 24px;
}

     ul {
          width: 75%;
          left: 25%;
     }

     .grid, .grid-video {
     column-count: 1;
}

}