/* xxxxxxxxx MAIN BAR xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.main_responsive_link_bar{                              /* The main container in the front-end php file which contains all the responsive link stuff */
        position            : relative;
        width               : 100%; 
        height              : 53px;
        margin              : 0px 0px 20px 0px;
        padding             : 0px;
        background-color    : #094e79;
        color               : #ffffff;
        box-shadow          : 0 5px 5px rgb(0 0 0 / 45%);
}

.main_responsive_link_bar.mumin{
        background-color    : #105201;
}

@media (max-width: 1000px){
    
        .main_responsive_link_bar{
                height                  : 30px;
                margin                  : 0px 0px 10px 0px;
        }  
}

/* xxxxxxxxx ACTUAL LINKS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.responsive_link_box{
        position            : relative;
        width               : calc(100% - 0px);
        height              : 53px;
        float               : left;
        z-index             : 1500000;                    /* Fifteen lakh */
}

.responsive_link_box ul{
        list-style-type     : none;
        width               : 100%;
        height              : 53px;
        margin              : 0px;
        padding             : 0px;
        text-transform      : uppercase;
        font-weight         : 600;
}

.responsive_link_box ul li{
        display             : inline;
        float               : right;
}

.responsive_link_box ul li div{
        float               : left;
        line-height         : 53px;
        padding             : 0px 20px 0px 20px;        
}

.responsive_link_box ul li div:hover{
        background-color    : #6ccff7;
}

.main_responsive_link_bar.mumin .responsive_link_box ul li div:hover{
        background-color    : #b7ebac;
        color               : #105201;
}

.responsive_link_box ul li div a{
        color               : #ffffff;
        text-decoration     : none;
}

@media (max-width: 1000px){
    
        .responsive_link_box{
                position                : absolute;
                display                 : none;
                width                   : calc(100% - 20px);
                height                  : auto;
                top                     : 30px;
                right                   : 0px;
                margin                  : 0px;
                overflow                : hidden;
                background-color        : #094e79;
        } 
        
        .responsive_link_box ul{
                height              : auto;
        }        
        
        .responsive_link_box ul li{
                display             : block;
                float               : left;
                clear               : both;
        }
        
        .responsive_link_box ul li div{
                width               : 100%;
                clear               : both;
                line-height         : 33px;
                padding             : 0px 0px 0px 25px;        
        }        

        .responsive_link_box ul li div a{
                display             : block;
                width               : 100%;
        }     
}

/* xxxxxxxxx 3 HORIZONTAL BAR ICON xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.responsive_link_icon {
        position            : relative;
        display             : none;
        width               : 25px;
        cursor              : pointer;
        float               : right;
        margin              : 0px 20px 0px 0px;
        z-index             : 2000000;                      /* Twenty lakh */
}

.responsive_link_icon div{
        width               : 25px;
        height              : 2px;
        margin              : 6px 0;    
        background-color    : #ffffff;
}

.responsive_link_icon div.bar1, .responsive_link_icon div.bar2, .responsive_link_icon div.bar3{
        width               : 25px;
        height              : 2px;
        margin              : 6px 0;
        background-color    : #ffffff;
        transition          : 0.4s;
}

.responsive_link_icon.change div.bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px) ;
  transform: rotate(-45deg) translate(-6px, 6px) ;
}

.responsive_link_icon.change div.bar2 {
  opacity: 0;
}

.responsive_link_icon.change div.bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -6px) ;
  transform: rotate(45deg) translate(-6px, -6px) ;
}

@media (max-width: 1000px){
        
        .responsive_link_icon{
                display             : inline-block;
        }    
}