@charset "UTF-8";
html { 
    /* background-color: #09284C !important; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    scroll-behavior: smooth;
}
h1, h2 {
    color: #FF9900 !important;
}
.title-page {
    height: 730px !important;
    background: url('../images/graphics/tapati-soon-come.png') no-repeat center center; 
}
.white-type {
    color: #FFFFFF !important;
}

.fu-page {
    margin-top: 30px !important;
}
.fu1 {
    background-color: #FFFFFF !important;
}
.fu-l {
    margin: 0px 10px 30px 14px !important;
    padding: 30px;
    border-radius: 5px;
}
.fu-r {
    margin: 0px 14px 30px 10px !important;
    padding: 30px;
    border-radius: 5px;
}
.btn-primary {
    background-color: #FF9900 !important;
    border: 1px solid #FFFFFF !important;
}
.btn-primary:hover {
    background-color: #FF6600 !important;
}
.icon-but {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    margin: 0px 10px;
    cursor: "pointer";
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    z-index: 1 !important;
}
.icon-img {
    width: 20px;
    height: 20px;
}
.icon0 {
    background: url('../images/icons/Amazon-icon.png');
}
.icon1 {
    background: url('../images/icons/Apple-icon.png');
}
.icon2 {
    background: url('../images/icons/Facebook-icon.png');
}
.icon3 {
    background: url('../images/icons/Instagram-icon.png');
}
.icon4 {
    background: url('../images/icons/Spotify-icon.png');
}
.icon5 {
    background: url('../images/icons/YouTube-icon.png');
}
.icon-img {
    background-size: 20px 20px;
}

.op05 {
    opacity: 0.5
}
.modal-header {
    height: 10px !important;
    border: none !important;
}
.close {
    z-index: 1000 !important;
    margin-top: -20px !important;
    color: #FFFFFF;
}
.close:hover {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
.dropdown-item:hover {
    color: #FF9900 !important;
}
/* Use Bootstrap breakpoints for consistency*/
.progress {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background-color: #F2F2F2;
}
.bar { 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px; 
}
.percent { 
  position: absolute; 
  display: inline-block; 
  top: 3px; 
  left: 48%; 
}
/*
$bootstrap-sm: 576px;
$bootstrap-md: 768px;
$bootstrap-lg: 992px;
$bootstrap-xl: 1200px;
*/

.modal {
    margin-top: 0px !important;
    background-color: #000000 !important;
}
.bg-grey {
    background-color: rgba(150,150,150,.3) !important;
}
.bg-black {
    background-color: #000000 !important;
}
.bd-white {
    border: 1px solid #FFFFFF;
}
#gallery img {
    height: 11vw;
    object-fit: contain;
    overflow: hidden;
    
    @media (min-width: $bootstrap-md) {
      height: 15vw;
    }
    
    @media (min-width: $bootstrap-lg) {
      height: 18vw;
    }
}
.carousel-item img {
    height: 50vw !important;
    object-fit: contain;

    @media (min-width: $bootstrap-sm) {
        height: 350px;
    }
}
.b-op5{
   background-color: rgba(0,0,0,.5) !important;
}