/* NAVIGATION BAR XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

#container #navbar{
        position    : absolute;
        bottom      : calc(50% - 25px);
        left        : 0px;
        height      : 50px;
        width       : 100%;
        background-color: rgba(0, 0, 0, 1);
        z-index     : 10100;                       /*  Ten Thousand One Hundred - Needs to come above "#container"       */
}

#container #navbar .icon_container, 
#container #navbar .icon_container_blank{
        position    : absolute;
        left        : 40%;
        width       : 20%;
        height      : 100%;
        color       : #000000;
        text-align  : center;
        padding-top : 10px;
        cursor      : pointer;
}

#container #navbar .icon_container_blank{
        cursor      : auto;
}

#container #navbar .icon_container .icon_label{
        clear       : both;
        font-size   : 10px;
        padding-top : 2px;
}

#container #navbar #navbar_circle{
        position    : absolute;
        top         : 5px;
        /*left        : calc(10vw - 20px);*/
        height      : 40px;
        width       : 40px;
        background-color: red;
        border-radius   : 50%;
        display     : inline-block;
}

/* GREY FILTER SCREENS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

#grey_screen{
        position    : absolute;
        top         : 0px;
        left        : 0px;
        width       : 100%;
        height      : calc(100% - 50px);
        background-color: #000000;
        z-index     : 100000;                       /*  One lakh - Needs to come above hello page */
        opacity     : 0;
        filter      : alpha(opacity=0);             /* For IE8 and earlier */        
        display     : none;
}

#grey_screen_hello_page_hide{
        position    : absolute;
        top         : 50%;
        left        : 0px;
        width       : 100vw;
        height      : 100vh;
        background-color: #000000;
        z-index     : 10050;                       /*  Ten Thousand and Fifty - Needs to come above hello page but below navbar */
}

/* HELLO PAGES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

#hello_page{
        position    : absolute;
        top         : 50%;
        left        : 0px;
        width       : 100%;
        height      : calc(100% - 50px);
        max-height  : calc(100% - 50px);
        overflow    : hidden;
        z-index     : 10000;        /*  Ten Thousand - Needs to come above "#container"         */
        background-color: #000000;
}

#hello_page_image{
        position    : absolute;
        line-height : 200px;
        text-align  : center;
        color       : #ffffff;
        z-index     : 1000;
}

video#hello_page_image{
        position    : absolute;
        left        : 50%;
        transform   : translateX(-50%);
}

/* HELLO PAGE - VIDEO LOADING XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

#hello_page_video_loading_screen{
        position    : absolute;
        top         : 0%;
        left        : 0px;
        width       : 100%;
        height      : calc(100% - 50px);
        max-height  : calc(100% - 50px);    
        display     : block;
        z-index     : 1100;
        background-color    : #000000;
        color       : #ffffff;
}

#video_loading_container{
        position    : absolute;
        top         : 50%;
        left        : 50%;
        transform   : translate(-50%,-50%);
        width       : 100%;
        height      : 50px;
}

#video_loading_start,
#video_loading_end{
        width       : 80px;
        float       : left;
        text-align  : left;
        padding     : 10px;
}

#video_loading_start{
        text-align  : right;
}

#video_loading_pipe{
        position    : relative;
        min-width   : calc(100% - 160px);
        float       : left;   
        margin-top  : 10px;
        height      : 18px;
        border      : 2px solid green;
}

#video_loading_mercury{
        position    : absolute;
        top         : 2px;
        left        : 0px;
        width       : 0%;
        height      : 10px;        
        background-color    : green;
}

/* HELLO PAGES CAPTIONS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

#hello_page_caption{
        position    : absolute;
        width       : 80%;
        padding     : 10px;
        background-color: #000000;
        opacity     : 0.8;
        color       : #ffffff;
        z-index     : 10010;        /*  Ten Thousand and Ten - Needs to come above "#hello_page"         */
        display     : none;
}

#hello_page_caption.top_left{
        left        : -80%;
        top         : 70px;    
}

#hello_page_caption.top_right{
        right       : -80%;
        top         : 70px;    
}

#hello_page_caption.bottom_left{
        left        : -80%;
        bottom      : 180px;    
}

#hello_page_caption.bottom_right{
        right       : -80%;
        bottom      : 180px;    
}

.hello_page_caption_top,
.hello_page_caption_bottom{
        display     : block;
        width       : 100%;
        clear       : both;
}

.hello_page_caption_top{
        font-size   : 1.2em;
        padding-bottom  : 5px;
}

.hello_page_caption_bottom{
        padding-top     : 5px;
}

/* HELLO PAGES AUDIO XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

#hello_page_audio{
        position    : absolute;
        width       : 40px;
        height      : 40px;
        padding     : 10px;
        padding-top : 13px;
        display     : none;  
        bottom      : 70px;
        z-index     : 10010;
        background-color    : #ff7171;
        opacity     : 0.8;
        color       : #ffffff;
        border-radius   : 50%;
}

#hello_page_audio.right{
        right       : 5px;
}

#hello_page_audio.left{
        left        : 5px;
}

#hello_page_audio.no_audio_available{
        font-size   : 0.8em;
        width       : 110px;
        height      : 20px;
        border-radius   : 15px;
        padding-top : 3px;
        text-align  : center;
}

/* BUBBLES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.bubble{
	position            : absolute;
	background          : #ffffff;
        border-radius       : 10px;
        width               : calc(100% - 40px);
        height              : 0px;
        padding             : 0px;
        left                : 20px;
        color               : #444444;
        bottom              : 70px;
        z-index             : 500000;                   /*  Five lakhs  - Needs to come above grey screen */
        display             : none;
        overflow            : hidden;  
        opacity             : 1;
}

#bubble_arrow{
        position            : absolute;
        left                : 0px;
        bottom              : 55px;
        height              : 0px;
        clear               : both;
        display             : none;
        z-index             : 500000;                   /*  Five lakhs  - Needs to come above grey screen */
}

#bubble_arrow:after {
	content             : '';
	position            : absolute;
	bottom              : 0;
	width               : 0;
	height              : 0;
        border-top          : 15px solid #ffffff;
        border-left         : 11px solid transparent;
        border-right        : 11px solid transparent;        
}

.bubble_header{
        position            : absolute;
        width               : 100%;
        left                : 0px;
        top                 : 0px;
        background-color    : #eff1f4;
        font-weight         : 500;
        color               : #ffffff;
}

.bubble_header_name{
        float               : left;
        padding             : 10px;
        letter-spacing      : 0.05em;
        opacity             : 0;
        text-transform      : uppercase;
	max-width           : calc(100% - 45px);
        overflow            : hidden;
        text-overflow       : ellipsis;
        white-space         : nowrap;        
}

.bubble_header_name span.category_name{
        color               : #65eeea;
}

.bubble_header_close{
        float               : right;
        padding             : 10px;
        padding-left        : 20px;
        cursor              : pointer;
}

.bubble_content{
        position            : absolute;
        width               : 100%;
        left                : 0px;
        top                 : 50px;     /* 26 Mar 2023 - This was actually "bottom : 10px;" but I changed it to this for the bubble "bounce" animation. I am not sure if I caused an issue somewhere else due to this*/
        padding             : 0px;
        overflow            : hidden;
        line-height         : 1.8em;
        font-weight         : 400;
}

.bubble_content p.header{
        font-size           : 1.8em;
        font-weight         : 300;
}

/* PRODUCTS BUBBLE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.bubble_left_content_page{
        position    : absolute;
        display     : none;
        top         : 0px;    
        overflow-y  : scroll;
        overflow-x  : hidden;        
        padding     : 0px 15px 0px 15px;
}

#bubble_left_content_page_0{
        display     : block;
}

div.bubble_left_content_page_0_img_container_row{
        width       : 100%;
        clear       : both;
        overflow    : hidden;
}

div.bubble_left_content_page_0_img_container_row.strikethrough{
        max-height          : 15px;
        margin-bottom       : 15px;
        border-bottom       : 1px solid #cecece;
        overflow            : visible;
}

div.bubble_left_content_page_0_img_container_row.strikethrough span{
        background-color    : #ffffff;
        padding-right       : 20px;
}

div.bubble_left_content_page_0_img_container_row.category_separator{
        padding             : 10px;
}

div.bubble_left_content_page_0_img_container_row.category_separator.more_link{
        text-align          : right;
        color               : blue;
        text-decoration     : underline;    
}

div.tile .bubble_left_content_page_0_img_container{
        cursor              : pointer;
        float               : left;
        position            : relative;
        width               : 33%;
        max-width           : 33%;
        overflow            : hidden;
}

div.tile .bubble_left_content_page_0_img_container.hide_container{
        display             : none;
}

div.list .bubble_left_content_page_0_img_container{
        cursor              : pointer;
        float               : left;
        width               : 100%;
        max-width           : 100%;
        overflow            : hidden;
}

.bubble_left_content_page_0_img{
        clear       : both;
        margin      : 10px 7px 2px 7px;
        border      : 1px #eff1f4 solid;
        line-height : 0;
}

.bubble_left_content_page_0_img img{
        position    : relative;
        width       : 100%;
        line-height     : 50px;
        text-align      : center;
        color           : #000000;                
}

img.bubble_left_content_page_0_img_bookmark{
        position    : absolute;
        top         : 10px;
        right       : 13px;
        width       : 15px;
}

.bubble_left_content_page_0_img_text{
        clear       : both;
        margin      : 1px 5px 10px 5px;
        text-align  : center;
        font-family : Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        font-size   : 0.9em;
        white-space : nowrap;
        overflow    : hidden;
        text-overflow: ellipsis; 
        color       : #0081ff;
        text-decoration : underline;        
}

.bubble_left_content_page_n_fi{
        width       : 100%;
        height      : 25px;
        max-height  : 25px;
        clear       : both;
        color       : red;
        overflow    : visible;
        position    : relative;
        display     : none;
}

.bubble_left_content_page_n_fi_text{
        display     : block;
        position    : absolute;
        top         : 0px;
}

.bubble_left_content_page_n_fi img{
        position    : absolute;
        top         : 25px;
}

.bubble_left_content_page_n_img_main{
        clear       : both;
        max-width   : 100%;
        max-height  : 50%;
        padding-bottom  : 10px;
        text-align  : center;
        display     : block;
        margin-left : auto;
        margin-right: auto;        
        color           : #000000;                
}

div.bubble_left_content_page_n_img_multiple_icon_container{
        display     : none;
        position    : relative;
        top         : -40px;
        color       : #ffffff;
        width       : 26px;
        text-align  : center;
        opacity     : 0.8;
}

.bubble_left_content_page a.inquire i{
        width       : 20px;
        color       : green;    
        font-weight : bold;
}

.bubble_left_content_page a.move_to_page_0 i{
        width       : 20px;
        font-weight : bold;
}

/* ABOUT BUBBLE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.bubble_center_content_page{
        position    : absolute;
        top         : 0px; 
        left        : 0px;
        overflow-y  : scroll;
        overflow-x  : hidden;        
        padding     : 0px 15px 0px 15px;    
}

#bubble_center_img{
        display: block;
        max-width:100%;
        max-height:50%;
        width: auto;
        height: auto;    
        clear       : both;
        padding-bottom  : 10px;
        text-align  : center;
        display     : block;
        margin-left : auto;
        margin-right: auto;        
        text-align      : center;
        color           : #000000;                
}

/* CONTACT BUBBLE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.bubble_right_content_page{
        position    : absolute;
        top         : 0px; 
        left        : 0px;
        overflow-y  : scroll;
        overflow-x  : hidden;        
        padding     : 0px 15px 0px 15px;     
}

.contact_section{
        width           : 100%;
        margin-bottom   : 20px;
}

/* xxx If person's pic is available xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.contact_section #contact_section_pic_personal_img_container{
        width           : 100%;
        text-align      : center;
}

.contact_section #contact_section_pic_personal_img_container img#contact_section_pic_personal_img{
        width           : 50%;
        border-radius   : 50%;  
        text-align      : center;
        color           : #000000;        
}

.contact_section #contact_section_pic_name_container{
        width           : 100%;
        text-align      : center;
        margin-bottom   : 20px;
}

.contact_section #contact_section_pic_name_container #contact_section_pic_person_name_skin{
        width               : 100%;
        height              : 30px;
        font-weight         : 300;    
}

.contact_section #contact_section_pic_name_container #contact_section_pic_desig_business_skin{
        width               : 100%;
        font-size           : 15px;
        color               : #c6c7c8;
        font-weight         : 500;    
        line-height         : 1.3em;
        margin-bottom       : 10px;
}

/* xxx If person's pic is NOT available xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.contact_section #contact_section_no_pic_container{
        width           : 100%;
        height          : 45px;
        margin-bottom   : 30px;    
}

.contact_section #contact_section_no_pic_icon_container{
        float           : left;
        width           : 45px;
        height          : 45px;
        border-radius   : 50%;  
        border          : 1px solid #c6c7c8;        
        text-align      : center;
        padding-top     : 12px;
}

.contact_section #contact_section_no_pic_icon_img{
        width           : 20px;
}

.contact_section #contact_section_no_pic_name_container{
        float           : left;
        width           : calc(100% - 45px);   
        height          : 45px;
        padding-left    : 10px;
}

.contact_section #contact_section_no_pic_name_container #contact_section_no_pic_person_name_skin{
        width               : 100%;
        height              : 25px;
        text-align          : left;
        font-weight         : 400;    
}

.contact_section #contact_section_no_pic_name_container #contact_section_no_pic_desig_business_skin{
        width               : 100%;
        height              : 20px;
        text-align          : left;
        font-weight         : 500;  
        color               : #c6c7c8;
}

/* xxx Remaining sections of Contact Bubble xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.contact_section .contact_section_quick_icon_container{
        display             : inline-block;
        position            : relative;
        left                : 50%;
        transform           : translateX(-50%);
}

.contact_section .contact_section_quick_icon{
        float: left;
        width: 45px;
        height: 45px;
        text-align: center;
        font-size: 1.1em;
        color: #69696a;
        margin: 10px;
        border-radius: 50%;
        padding-top: 9px;
        border: 1px solid #c6c7c8;    
}

.contact_section .contact_section_quick_icon a{
        color   : #69696a;
}

p.contact_add_to_addressbook{
    text-align      : center;
}

p.contact_add_to_addressbook a{
    color           : #67c9fc;
}

.contact_section.note{
        clear       : both;
        font-size   : 0.9em;
        font-style  : italic;
        padding-top : 10px;
}

.contact_section .contact_section_icon{
        float       : left;
        width       : 30px;
        color       : #c6c7c8;
        margin-bottom   : 20px;
}

.contact_section .contact_section_icon i.fa-whatsapp{
        font-size   : 1.1em;
        font-weight : bold;
}

.contact_section .contact_section_detail{
        float       : left;
        width       : calc(100% - 30px);
        max-width   : calc(100% - 30px);
        margin-bottom   : 20px;
        overflow-x  : hidden;
}

.contact_section .contact_section_detail a{
        text-decoration : none;
        color           : #444444;
}

.contact_section .contact_section_detail a.google_map{
        font-size       : 0.9em;
        text-decoration : underline;
}

.contact_section .contact_section_detail a.google_map i.fa-external-link-alt{
        text-decoration : none;
        color           : #c6c7c8;
        padding-left    : 5px;
}

.contact_section .contact_section_icon a{
        text-decoration : none;
        color           : #c6c7c8;
}

.contact_section .contact_section_detail.contact_section_detail_break_all{
        word-break: break-all;
}

.contact_section .contact_section_social_icon{
        float       : left;
        width       : 45px;
        height      : 45px;
        text-align  : center;
        font-size   : 1.1em;
        color       : #69696a;
        margin      : 7px;
        border-radius: 50%;        
        padding-top : 9px;
        border      : 1px solid #c6c7c8;
}

/* EXTRA BUBBLE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.bubble_extra_content_page{
        position    : absolute;
        top         : 0px; 
        left        : 0px;
        overflow-y  : scroll;
        overflow-x  : hidden;        
        padding     : 0px 15px 0px 15px;         
}

.bubble_extra_content_page div.social_media_icon_container{
        float       : left;
        width       : 20%;
        text-align  : center;
        padding     : 10px 0px 10px 0px;        
}

.bubble_extra_content_page div.social_media_icon_container a img{
        width       : 40px;
        text-align  : center;
        font-size   : 9px;
}

/* POPPABLE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

iframe#poppable_iframe{
        z-index     : 550050;       /* Five lakh Fifty Thousand and Fifty */
        position    : absolute;
        display     : none;
        width       : 100%;
        height      : 100%;
        top         : 0px;
        left        : 0px;
        border      : 0px;
}