#imagen {
    padding-bottom: 10px;
}

.navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
}

#desplegable {
    margin-left: 7px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#pull-derecha {
    margin-top: 0px;
    margin-bottom: 0px;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #000000	;
}
.navbar-brand {
    padding: 7px;
}

.centrar-verticalmente {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mainContainer {
    background-color: #ffb3ee;
    display:block;
    position:fixed;
    top:50px;
    bottom:0;
    margin:0;
    padding:0;
    width:100%;
    /*border:10px solid #ff0000;*/
}

.mainPanel {
    background-color: #F8F8F8;
    overflow: auto;
    position: absolute;
    /*left: 55px;*/
    left: 0px;
    top:0px;
    bottom:0;
    /*width:320px;*/
    height:auto;
    padding: 0px;
    border:0px solid #00ff00;
    -webkit-overflow-scrolling:touch;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transition:-webkit-transform .4s ease-out;
    transition:transform .4s ease-out;
    z-index: 100;
}

.sidebar {
    position: absolute;
    padding-top: 20px;
    width: 55px;
    height: 100%;
    background-color: #000000;
    color: #00F0FF;
    z-index: 1000;
}


.sidebar > .nav-tabs .icon {
    color: grey;
    font-size: 20px;
    /*width: 45px;*/
}

.glyphicon {
    /*margin-left: 10px;*/
    width: 39px;
    /*horiz-align: center;*/
    /*align-self: center;*/
    /*border:2px solid #ffffff;*/
}

.wi {
    font-size: 20px;
    color: #7F7F7F;
}

.sidebar.collapse ul.nav.nav-tabs.nav-stacked a {
    /*text-align: center;*/
    padding-left: 15px;
    padding-right: 15px;
}

.nav-tabs > li {
    background-color: black;
    border-color: black;
}

.nav-tabs > li > a:hover {
    background-color: black;
    border-color: black;
}

.nav-tabs.nav-stacked li.active a {
    background-color: transparent;
    border-color: transparent;
}


.nav-tabs > li.active {
    background-color: black;
    background-image: url("../images/bg_active_white.png");
    background-repeat: no-repeat;
    background-position: center right;
}


.suma-notificacion {
    text-align: center;
}

#btn-suma {
    width: 100%;
}

/*
.nav-tabs > li.active > a:hover {
    border-color: #f00 #f00 #f00;
    background-color: transparent;
    color: #000;
}

.nav-tabs > li.active > a:focus {
    border-color: #f00 #f00 #f00;
    background-color: transparent;
    color: #000;
}

.nav-tabs > li.active {
    border-color: #f00 #f00 #f00;
    background-color: transparent;
    color: #000;
}
*/

/*
.nav-tabs > li.active {
    border-color: #0f0 #0f0 #0f0;
    background-color: #000;
}

.nav-tabs > li > a.active {

    border-color: #f00 #f00 #f00;
    background-color: #000;
}
*/

#toggle-sidebar {
    margin-top: 3px;
    margin-bottom: 2px;
    margin-left: 4px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 4px;
    border-radius: 4px;
}

.section-title{
    font-size:18px;
    font-weight:700;
    margin:8px 45px 0;
    position:absolute;
    width:auto;
    text-align:center;
    right:0;
    left:0;
    height:34px;
    line-height:34px;
    margin-top:8px;
    color: red;
    display:block;
}


a.toggles{
    position:fixed;
    left:0;
    bottom:0;
    display:none;
    background-color:#252525;
    color:#fff;
    padding:10px 20px;
    z-index:2000
}

.navbar-header {
    margin-top: 5px;
}

.sidebar ul.nav.nav-tabs.nav-stacked{
    border-bottom-color: #000;
}

/* media queries */

/*
@media (max-width:384px) {
    .mainPanel {
        border:1px solid #007000;
        left: 0px;
    }
}
*/


.wrapper{
    padding:5px 5px 5px 5px;
}


@media (min-width:100px) { /* 100 o m�s */
    .mainPanel {
        width: 100%;
        background-color: blueviolet;
    }
}

/*
@media (min-width:315px) {
    .mainPanel {
        width: 260px;
        background-color: green;
    }
}
*/

@media (min-width:300px) {
    .mainPanel{
        width:300px;
        background-color: yellow;
    }
}

/*
@media (min-width:700px) {
    .mainPanel{
        width:320px;
        background-color: red;
    }
}
*/

@media (min-width: 700px) {
    .section-title {
        display: none;
    }
}
