.topo{
    width: 100vw;
    height: 60px;
    background-color: #2e2e2e;
    position: fixed;
    top: 0px;
    left:0px;
    padding: 5px;
    padding-left: 15px;
}

.load{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 99;
}

.img_load{
    font-size: 150px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    color: rgba(133, 133, 133, 0.9);
}

.bt_menu{
    background-color: #c9c9c9;
    position: fixed;
    top: 65px;
    left: 275px;
    z-index: 100;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
}

.menu{
    width: 300px;
    height: calc(100vh - 60px);
    background-color: #515151;
    position: fixed;
    top: 60px;
    left:0px;
}

.opcao{
    color:#fff;
    border-bottom: solid 1px #2e2e2e;
    border-right: solid 5px #242424;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    cursor: pointer;
}

.opcao-ativa{
    background-color: #2e2e2e;
    padding-left: 30px;
    color: #fff;
    border-right: solid 5px orangered;
}

.opcao:hover{
    background-color: #2e2e2e;
    padding-left: 30px;
    color: #fff;
    border-right: solid 5px orangered;
}

.conteudo{
    width: calc(100vw - 300px);
    height: calc(100vh - 60px);
    background-color: #fefefe;
    position: fixed;
    top: 60px;
    left:300px;
    overflow: auto;
}

.toggle > input {
    display: none;
}

.toggle > label {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.toggle > label:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.toggle{
  margin-top: 5px;
}
.toggle > label:active:after {
    transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
    background: #6fbeb5;
}
.toggle > input:checked ~ label:after {
    left: 20px;
    background: #179588;
}
.toggle > input:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.toggle > input:disabled ~ label:after {
    background: #bcbdbc;
}

.img-background{
    width:100vw;
    height: 100vh; 
    z-index:-1; 
    position: fixed; 
    top:0px; 
    left:0px
}

@media only screen and (max-width: 600px) {
    .img-background{
        width: auto;
        z-index:-1; 
        position: fixed; 
        top:0px; 
        left:0px
    }
    
    .menu{
        width: 300px;
        height: calc(100vh - 60px);
        background-color: #515151;
        position: fixed;
        top: 60px;
        left:0px;
        z-index: 98;
    }

    .bt_menu{
        background-color: #c9c9c9;
        position: fixed;
        top: 65px;
        left: 80vw;
        z-index: 100;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        padding: 15px;
        cursor: pointer;
    }

    .conteudo{
        width: 100vw;
        height: 100vh;
        background-color: #fefefe;
        position: fixed;
        top: 60px;
        left:0px;
        z-index: 97;
        overflow: auto;
    }

    /* Force table to not be like tables anymore */
    #no-more-tables table, 
    #no-more-tables thead, 
    #no-more-tables tbody, 
    #no-more-tables th, 
    #no-more-tables td, 
    #no-more-tables tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    #no-more-tables tr { border: 1px solid #ccc; }
    
    #no-more-tables td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;
    }
    
    #no-more-tables td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
    
    /*
    Label the data
    */
    #no-more-tables td:before { content: attr(data-title); }
}