/* Obit Slider
   ======================================== */
   :root {
       --website-theme-color-default: #757575;
   }
*{outline:0;}   
.hide-arrow{display: none !important;}
.obit-outer{
    font-family: 'Roboto', sans-serif!important;
    width: 100%;
    padding:0;
    margin:0;
    position: relative;
}  
.obit-header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 18px;
    position: absolute;
    left: 25%;
    right: 25%;
    top: -62px;
    z-index: 10;
}
.obit-header a {width: 100%; height: 100%; display: flex; align-items: center;}
.obit-header img{
    transition:all 0.5s ease-in-out;
    border-radius: 50%;
    max-width: 110px!important;
    width: 100%;
} 
.with-profile:hover img, .no-profile:hover img{
    -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); 
}
.with-profile, .no-profile{overflow:hidden;}    
.obit-header span{margin: 0 4px;}
.obit-header-outer{position: relative;}
.obit-footer {padding: 10px 5px; font-size: 18px;}
.obit-footer a{color: #000;}
.obit-footer a:hover{text-decoration: underline!important;}
.cloud-img{text-align: center; margin: 0;}
.cloud-img img{
    max-width: 220px!important; max-height: 162px!important; display: block; margin: auto;
}
.obit-detail{
    color: #b87e98; font-size: 14px!important; line-height: 1.4!important; margin: 30px 0 0 0
}
.btn-memo{
    background: #9dc1dd;
    color: #fff;
    padding: 15px 5px;
    text-align: center;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1.1;
    display: block;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.btn-memo:hover{background: #b87e98; color:#fff;}    
.ls-record{
    margin: 2px 0;
    color: inherit;
    font-size: 17px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.ls-record span{margin-right: 5px; font-size: 21px; position: relative; top: -2px;}
.auther-by{color: inherit; font-size:12px; display:block; margin-bottom: 4px; line-height:1.25;}
.obit-container{
    width: 100%;
    overflow-x: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.obit-container-listing{margin: 0 auto; overflow-x: auto; position: relative;}
.xMandatory::-webkit-scrollbar{width: 10px; background-color: #F5F5F5; -webkit-appearance: none}
.xMandatory::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #ccc;}     
.obitlist-inner-container{
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    overflow-x: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.xMandatory{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    scroll-behavior: smooth;
}
.xMandatory .obit-item{margin: 120px 0 40px 36px; order:1;}
.obit-item-inside{min-width: 300px; max-width: 300px; outline: none!important;}
.obit-item-inside:hover .obit-content-hover, .obit-item-inside:focus .obit-content-hover{
    z-index: 5; opacity: 1; pointer-events: auto;
}
.obit-box{
    outline:none!important;
    text-align: center;
    position: relative;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none;
     border-radius: 16px;
    margin-bottom: 2px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25)); 
}
.obit-content{
    border: 5px solid #888;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    height: 400px;
    max-height: 400px;
    overflow: hidden;
}
.main-img{
    overflow:hidden;
     border-radius:20px;
     box-sizing:border-box;
     transform: translateZ(0);
    -webkit-transform: translateZ(0);
        will-change:transform;
     -o-object-fit: cover;
    object-fit: cover;
      width: 100%;
     height:100%!important
}
.no-hero-image .main-img{overflow:hidden;
     border-radius:20px;
     box-sizing:border-box;
     transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change:transform; }
.no-hero-image .obit-content-hover{opacity: 1;}
.no-hero-image  .blur-bg{background: rgba(255,255,255,0.42);}
.no-hero-image .btn-memo{opacity: 0;
     -o-transition: opacity .15s ease-in-out;
     transition: opacity .15s ease-in-out;
     -moz-transition: opacity .15s ease-in-out;
     -webkit-transition: opacity .15s ease-in-out;
    }
.no-hero-image .obit-detail{opacity: 0;
     -o-transition: opacity .15s ease-in-out;
     transition: opacity .15s ease-in-out;
     -moz-transition: opacity .15s ease-in-out;
     -webkit-transition: opacity .15s ease-in-out;
    }
.no-hero-image .no-profile{display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     width: 100px;
     min-width: 100px;
     height: 100px;
     background: #ae8098;
     border-radius: 50%;
     border: 4px solid #ae8098;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;}
.no-profile img{border: none; max-width: 100%!important;}
.with-profile{display: -webkit-box;
     display: -ms-flexbox;
    display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     width: 100px;
     min-width: 100px;
     height: 100px;
     background: #fff;
     border-radius: 50%;
     border: 2px solid #fff;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     position: relative;
     top: 4px;
    }
.obit-item-inside:hover .no-hero-image .btn-memo{opacity: 1; }
.obit-item-inside:hover .no-hero-image .obit-detail{opacity: 1; }
.obit-item-inside:hover .no-hero-image .blur-bg{background: rgba(255,255,255,1);}
.obit-content-hover{opacity: 0;
     pointer-events: none;
     -o-transition: 
        opacity .15s ease-in-out, pointer-events .15s ease-in-out, z-index .15s ease-in-out;
     transition: 
        opacity .15s ease-in-out, pointer-events .15s ease-in-out, z-index .15s ease-in-out;
     -moz-transition: 
        opacity .15s ease-in-out, pointer-events .15s ease-in-out, z-index .15s ease-in-out;
     -webkit-transition: 
        opacity .15s ease-in-out , pointer-events .15s ease-in-out, z-index .15s ease-in-out;
     border: 5px solid #b87e98;
     background-repeat: no-repeat;
     background-size: cover;
     position: absolute;
     z-index: -1;
     border-radius: 25px;
     height: 400px;
     max-height: 400px;
     width: 100%;
     overflow: hidden;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
    }
.blur-eff{padding: 8px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     position: relative;
     min-width: 300px;
     min-height: 400px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     width: 100%;
     /*-webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
    */}
.blur-bg{background: rgba(255,255,255,0.92); width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left:0;
     right:0;
     bottom:0;
    }
.obit-detail-outer{position: relative; z-index: 10;
     padding: 8px 16px;
     box-sizing: border-box;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
    }
.cont-top{min-height: 80px;}
.orbit-arrow-right{position: absolute;
     top: 0;
     bottom: 1px;
     height: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     z-index: 10;
     min-width: 4vw;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     pointer-events: none;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     right: 0;
     background: 
        -webkit-gradient(
            linear,
            left top,
            right top,
            from(rgba(255, 255, 255, 0)),
            to(rgba( 255, 255, 255, 1))
        );
     background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba( 255, 255, 255, 1) 100%);
     background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,rgba( 255, 255, 255, 1) 100%);
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     }
.orbit-arrow-right button{ color: inherit;
     border: 0;
     margin-right: 8px;
     cursor: pointer;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     outline: none;
     padding: 0;
     position: relative;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     border-radius: 0;
     vertical-align: middle;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -moz-appearance: none;
     text-decoration: none;
     background-color: transparent;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: transparent;
     -webkit-box-flex: 0;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     color: rgba(0, 0, 0, 0.54);
     width: 48px;
     height: 48px;
     padding: 0;
     overflow: visible;
     font-size: 1.5rem;
     text-align: center;
     -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     -o-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     border-radius: 50%;
     -webkit-box-shadow: 
        0px 1px 5px 0px rgb(0 0 0 / 20%),
        0px 2px 2px 0px rgb(0 0 0 / 14%),
        0px 3px 1px -2px rgb(0 0 0 / 12%);
     box-shadow:
        0px 1px 5px 0px rgb(0 0 0 / 20%),
        0px 2px 2px 0px rgb(0 0 0 / 14%),
        0px 3px 1px -2px rgb(0 0 0 / 12%);
     pointer-events: visible;
    }
.orbit-arrow-right button>span.material-icons{color: #fff;
     font-size: 24px}
.top-live{position: absolute;
     top: 10px;
     right: 18px;
     color:#b87e98;
     z-index: 12;
    }
.top-live:hover{color: #9dc1dd;}
.orbit-arrow-left{position: absolute;
     top: 0;
     bottom: 1px;
     height: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     z-index: 10;
     min-width: 4vw;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     pointer-events: none;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     left: 0;
     background: 
        -webkit-gradient(
            linear,
            right top,
            left top,
            from(rgba(255, 255, 255, 0)),
            to(rgba( 255, 255, 255, 1))
        );
     background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 0%,rgba( 255, 255, 255, 1) 100%);
     background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%,rgba( 255, 255, 255, 1) 100%);
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     }
.orbit-arrow-left button{ color: inherit;
     border: 0;
     margin-left: 8px;
     cursor: pointer;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     outline: none;
     padding: 0;
     position: relative;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     border-radius: 0;
     vertical-align: middle;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -moz-appearance: none;
     text-decoration: none;
     background-color: transparent;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: transparent;
     -webkit-box-flex: 0;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     color: rgba(0, 0, 0, 0.54);
     width: 48px;
     height: 48px;
     padding: 0;
     overflow: visible;
     font-size: 1.5rem;
     text-align: center;
     -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     -o-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     border-radius: 50%;
     -webkit-box-shadow: 
        0px 1px 5px 0px rgb(0 0 0 / 20%),
        0px 2px 2px 0px rgb(0 0 0 / 14%),
        0px 3px 1px -2px rgb(0 0 0 / 12%);
     box-shadow: 
        0px 1px 5px 0px rgb(0 0 0 / 20%),
        0px 2px 2px 0px rgb(0 0 0 / 14%),
        0px 3px 1px -2px rgb(0 0 0 / 12%);
     pointer-events: visible;
     }
.orbit-arrow-left button>span.material-icons{color: #fff;
     font-size: 24px}
.swipe-btn p{margin:0;
     font-size:13px!important;
     line-height:1!important}
.swipe-btn .swipe-arrow{-webkit-filter: none;
    filter: none;
     width: 0;
     right: -7px;
     height: 0;
     -webkit-filter: drop-shadow(4px 0px 2px rgba(0,0,0,0.2));
     filter: drop-shadow(4px 0px 2px rgba(0,0,0,0.2));
     position: absolute;
     border-top: 8px solid transparent;
     background: transparent;
     border-left: 8px solid var(--website-theme-color, var(--website-theme-color-default, ##757575));
     border-bottom: 8px solid transparent;
    }
.swipe-btn{animation: animate-horizontal 1.5s infinite;
     position: absolute;
     z-index: 10;
     right: 20px;
     top: 124px;
     -webkit-filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.4));
     filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.4));
     padding: 0 12px 0 8px;
     background: var(--website-theme-color, var(--website-theme-color-default, ##757575));
     color: #fff;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex!important;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
     border-radius: 6px;
     -webkit-box-shadow: none;
     box-shadow: none;
     height: 32px;
     min-width:85px;
     margin: 4px 0;
     transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
     }
.swipe-btn.fade-in{opacity:1;}    
.swipe-btn.fade-out{opacity:0;}    
.vab{display: none; justify-content: center;
     align-items: center;
     margin: 60px 36px 0!important;
     order: 2!important;
     visibility: hidden;
     pointer-events: none;
    }
.vab-btn{position: relative; top: 0;
     transition: all 0.3s ease-in-out;

    background: var(--website-theme-color, var(--website-theme-color-default, ##757575));
     text-decoration: none;
     color: #fff;
     padding: 5px 10px;
     border-radius: 5px;
     text-align: center;
     width: 95px;
     height: 110px;
     font-size: 14px;
     line-height: 1.4;

    box-sizing: border-box;
     display: flex;
     align-items: center;
     flex-direction: column;
     margin: 0;
     justify-content: center;
     box-shadow: 2px 2px 60px rgb(0 0 0 / 70%);
    }
.vab-btn:hover{color:#ffffff; top:-10px;}
.show-vab {visibility: visible;pointer-events: auto; display: flex;}
/** tooltip  **/
.obit-tooltip .material-icons{font-size: 30px;}
.obit-tooltip {position: relative; display: inline-block;cursor: pointer; height: 30px;}
.obit-tooltip a {color: inherit; pointer-events:none;}
.obit-tooltip:hover a,
.obit-tooltip:focus a{pointer-events: auto;}
.obit-tooltip .tooltiptext {font-size: 13px; line-height: 1.4; visibility: hidden;
     width: 220px;
     background-color: #b87e98;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 15px 7px;
     position: absolute;
     z-index: 99;
     bottom: 100%;
     left: 50%;
     margin-left: -148px;
    opacity: 0;
     transition: opacity 0.2s, background-color 0.2s;
      box-shadow: -1px 1px 6px rgb(0 0 0 / 22%);
      cursor: auto;
    }
.obit-tooltip:hover .tooltiptext {visibility: visible;
     opacity: 1;}
.arrow-btn { background: var(--website-theme-color, var(--website-theme-color-default, ##757575)) !important;}

/* when no mobile cover but has theme, 
we want to show the theme image but hide other details of hover state */
.obit-content-hover.has-no-mobile-cover {opacity: 1; z-index: 5;}
.obit-content-hover.has-no-mobile-cover .cont-top,
.obit-content-hover.has-no-mobile-cover .cont-bottom a {position: relative; z-index: 5;}
.obit-content-hover.has-no-mobile-cover .blur-bg,
.obit-content-hover.has-no-mobile-cover .cont-top,
.obit-content-hover.has-no-mobile-cover .cont-bottom a { 
    -o-transition: opacity .15s ease-in-out, z-index .15s ease-in-out;
    transition: opacity .15s ease-in-out, z-index .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out, z-index .15s ease-in-out;
    -webkit-transition: opacity .15s ease-in-out, z-index .15s ease-in-out;
}
.obit-item-inside:not(:hover) .has-no-mobile-cover .blur-bg,
.obit-item-inside:not(:hover) .has-no-mobile-cover .cont-top,
.obit-item-inside:not(:hover) .has-no-mobile-cover .cont-bottom a {opacity: 0;
      pointer-events: none;
      z-index: -1;}

@media screen and (min-width: 768px){
  .swipe-btn{display: none!important;} 
}    
@media screen and (min-width: 960px){    
   .orbit-arrow-right{min-width: 10vw;}
}
@media only screen and (max-width: 767px) {
.content-des{
    overflow: hidden;
    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 7;
     -webkit-box-orient: vertical;
    }   
.info-block{max-width: 95%;}
.content-bio{padding:0 30px;}
.content-bio h1{font-size: 50px;}
.theme-btn{font-size:18px}
.pop-evnt-info{min-width: 270px; max-width: 270px;}
.pop-middle,.border-btn{font-size: 16px;}
.dialog-box01{left: 20px;}
.dialog-box02{right: 20px}
.orbit-arrow-left, .orbit-arrow-right{display: none!important;}
.sub_title{font-size:28px!important; line-height:1!important; margin-bottom:15px;}    
}  

@keyframes animate-horizontal {
    0% {
        transform: translateX(10px);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(10px);
    }
} 
