.box-custom {
        display: inline-block;
        padding: 80px 5px 65px 10px;
        border-radius: 0px;
        color: #fff;
        margin: 0 1px;
        min-width: 300px;
        font-size: 70px;
}
.box-custom h4{
        font-size: 30px;
}
.boxslider {
        display: inline-block;
        padding: 10px 0px 10px 0px;
        border-radius: 0px;
        color: #fff;
        margin: 5px;
        min-width: 100px;
        font-size: 30px;
    }

.otul {
	text-shadow:
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
}
.fs12{
    font-size: 14px;
}
@media screen and (max-width: 400px) {
  .hpnovis {
    visibility: hidden;
    display: none;
  }
  .hpnovis {
    /*visibility: hidden;*/
    display: block;
  }
  
  .box-custom {
        display: inline-block;
        padding: 10px 0px 10px 0px;
        border-radius: 0px;
        color: #fff;
        margin: 5px;
        min-width: 90px;
        font-size: 30px;
    }
    .box-custom h4{
            font-size: 16px;
    }
 .bmobile {
    display: block;
  }
  
    

}

@media screen and (max-width: 768px) {
  .hpnovis {
    visibility: hidden;
    display: none;
  
  }
}



@media screen and (min-width: 768px) {
  .hpvis {
    visibility: hidden;
    display: none;
  }
}

@media (min-width:801px) { .monly{ display: none; }}
@media (min-width:1025px) { .monly{ display: none; } }

.bmobile {
  display: none;
}

        .menum {
            position: relative;
            bottom: 20px; /*bottom: auto;*/
            padding: 31px;
            background: linear-gradient(90deg, orange, #8cc63f, #d63e84, orange);
            background-size: 400%;
            border-radius: 100%;
            border: 3px solid whitesmoke;
            cursor: pointer;
            width: 22px;
            height: 22px;
            margin:auto; /*margin-left: 204px;*/
            animation: animate 6s linear infinite;
        	transition: 0.5s;
        }
        
        .menum i{
            font-size: 35px;
            margin-left: -9px;
            margin-top: -16px;
            color: aliceblue;
            transition: 0.2s ease;
        }
        
        .menum.open i{
          transform: scale(1.1);
        }
        
        .menum.open {
          opacity: 0.9;
          border: 3px solid #3cb1fb;
        }
        
        .menum.open .tombols {
          opacity: 1;
          pointer-events: auto;
        }
        .menum.open .tombols:first-of-type {
          bottom: 40px;
          right: 70px;
          background: url("../../assets/media/icon/destinasi-maps.png") no-repeat 50%/50% #e8e8f3;
        }
        .menum.open .tombols:nth-of-type(2) {
          bottom: 80px;
          background: url("../../assets/media/icon/hotelmaps.png") no-repeat 50%/50% #e8e8f3;
          transition-delay: 0.05s;
        }
        .menum.open .tombols:last-of-type {
          bottom: 40px;
          right: -70px;
          background: url("../../assets/media/icon/logo-bmkg.png") no-repeat 50% 45%/50% 45% #e8e8f3;
          transition-delay: 0.1s;
        }
        
        .tombols {
          padding: 30px;
          border-radius: 50%;
          cursor: pointer;
          background: #e8e8f3;
          position: absolute;
          bottom: 0;
          right: 0;
          opacity: 0;
          pointer-events: none;
          box-shadow: inherit;
          transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
        }
        .tombols:hover {
          transform: scale(1.1);
        }
        
        @keyframes animate {
        	0% {
        		background-position: 0%;
        	}
        	100% {
        		background-position: 400%;
        	}
        }
        
        text {
          fill: #fff;/*white;*/
          font-family: "Lato", sans-serif;
          font-size: 22px;
          font-weight: 500;
          text-transform: uppercase;
          font-variant-ligatures: none;
          letter-spacing: 6px;
          animation: rotate 25s linear infinite;
          transform-origin: 250px 250px;
        }
        
        svg{
            max-width: 17vmin;
            position: relative;
            /*top: 65px;*/
            bottom: -85px;
        }
        
        @keyframes rotate {
          to {
            transform: rotate(360deg);
          }
        }
        
        .textcircle {
          transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
          transform-origin: 250px 250px;
        }
        
        .menum i:hover + #textc {
          transform: scale(1.2) rotate(90deg);
        }
        
        svg:hover .textcircle {
          transform: scale(1.2) rotate(90deg);
        }
        
    .listing-item-grid{max-height:250px;min-height:250px;}
    .gallery-item img{width: 115%;}
    .listing-item-grid .listing-item-cat p {margin-top: 3px;}
    
    .rating-counter{
        top: 0px;
        right: -246px;
        position: absolute;
        z-index: 4;
        color: #fff;
        font-weight: 700;
        padding: 6px 10px;
        border-radius: 4px;
        background: rgb(6 6 5 / 41%);
        font-size: 12px;
    }
    
    .rating-counter i {
        color: #4DB7FE;
        padding-left: 4px;
    }
    
    .header-search {position: fixed;z-index: 100;top: 15px;left: 15px;}
    
    @media screen and (min-height: 800px) {.svg{max-width: 14vmin;}}
    
    @media screen and (max-width: 640px) {
      .menum {
                top: -48px;
            }
        .badge{
            width: 100%;
    margin-bottom: 5px;
        }
        svg {
            max-width: 32vmin;
            position: relative;
            bottom: -55px;
        }
        #home{
            height:92vh;
        }
         .gallery-item img {
            width: 125%;
        }
        .listing-item-grid .listing-counter{
            display: block;
        }
        
        .rating-counter{right: -175px;}
        
        .header-search {top: 67px;left: 35px;} 
    }
     @media screen and (max-width: 400px) {
         svg {
            max-width: 34vmin;
            bottom: -30px;
        }
        .menum {
                top: -69px;
            }
            
           
     }