.response{
    background-color: green;
    position: fixed;
    bottom: 10px; right: 10px;
    width: 25px; height: 25px; border-radius: 50%;
}

/* Large desktop */
@media (min-width: 1200px) {
    
    .response{background-color: brown;} 
    
    
    
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 991px) { 
    
    .response{background-color: yellow;} 
    .navbar .navbar-nav > li > a{font-size: 14px; padding-left: 8px; padding-right: 8px;}
    
    
    
    
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    .jquery-css3media{width: 4px; }
    .response{background-color: blue;} 
    /*----------------*/
    .row-noti .ul-noti > li > ul.dropdown-menu {
        border-radius: 0px;
        background-color: #068CD5;
        color: #FFF;
        width: 100%;
        position: fixed;
        right: 0;
        top: 47px;
    }
    .navbar-nav > li .dropdown-menu:after{content: none;}
    .nav-row ul.dropdown-menu.double-column li{border-bottom: 1px solid #646E6F; padding: 0; padding-right: 0; width: 100%;}
    .nav-row ul.multi-clm-ul li:first-child{padding: 15px; padding-left: 20px;}
    /*----------------------*/
    .dropdown-menu{background-color: red;}
    .dropdown-menu > li > ul.rightdropmenu {float: none !important; position: static; width: 100%;}
    .double-column{width: 100%; background-color: #3D4748 !important;}
    ul.double-column{width: 100% !important; position: static; float: none !important;}
    ul.multi-clm-ul li:first-child{background-color: #303a3a;} 
    ul.double-column li a{color: white; display: block; padding: 0;} 
    ul.double-column li a:hover{color: white;} 
    ul.rightdropmenu {float:left;position: static; width: 100%;}
    /*-------*/
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {color: white; background-color: #3D4748;}
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover, 
    .navbar-default .navbar-nav > .open > a:focus {opacity: 1; color: white; background-color: #3d4748;}
    .navbar-nav .open .dropdown-menu{padding: 0; padding-top: 1px;}
    .navbar-default .navbar-nav .open .dropdown-menu > li > a{padding-top: 10px; padding-bottom: 10px;}
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover{background-color: #3D4748; color: gray;}
    .navbar-default .navbar-collapse{border-color: #00AEEA;}
    .navbar-default .navbar-toggle{background-color: #3d4748; color: white; border-color: #3d4748; min-width: 40px;}
    /*-------------- login page ----------------*/
    .loginpage .container.container-alert{margin-top: 50px; max-width: 400px !important;}
    .loginboxwrap{border: 0; margin-top: 25px; margin-bottom: 25px;}
    .loginform{max-width: 401px; margin: 0 auto; border: 1px solid #DBDBDB;; border-top: 0;}
    
    
    


}

/* Landscape phones and down */
@media (max-width: 480px) {
    .response{background-color: red;} 
    
}


/* Login page below 400px */
@media (max-width: 400px) {
    .loginpage .container.container-alert{
        margin-top: 0px; max-width: 100% !important;
        margin-bottom: 0px;
    }
    .loginpage .container.container-alert .alert{margin-bottom: 0; border-radius: 0;}
    .loginboxwrap{border: 0; margin-top: 0; margin-bottom: 0;}
    .loginform{max-width: 401px; margin: 0 auto; border: 0; border-top: 0;} 
    
}



/*================================================*/
/*------------------ custom media (desktop n tablet)-------------*/
@media (min-width: 768px) {
    
    .jquery-css3media{width:1px; }
    
    
}

/*------------------ custom media (tablet and mobile)-------------*/
@media (max-width: 991px) { 
    
    .panel-default{margin-bottom: 20px;}
    
    
    
    
}

/*###################################### Bootstrap class added for achive five column grid ###################### */
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
/*-------*/
.col-xs-5ths {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}