body
{
       
}

nav
{
    z-index: 1;
    margin: 0 8px; 
    margin-top: 8px;
    border-radius: 4px;
    align-items: center;
    background-color: #fff;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    
}

.navbar
{
    padding: .5rem 0;
}

.menu-l
{
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-r
{
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar-nav
{
    -ms-flex-direction: row;
    flex-direction: row;
}

.nav-link,
.nav-link i
{
    color: #4e5ca1;
}

.nav-item
{
    display: block;
}
.nav-item .nav-link
{
    display: inline-block;    
}

.navbar-overlay 
{
    z-index: 1; 
    margin-bottom: -104px; 
}



.menu-mobile
{
    z-index: 1051;
    margin: 8px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);

}

.menu-mobile .navbar-nav .nav-item
{
    width: 20%;
    text-align: center;
}


@media screen and (max-width: 768px)
{
    .menu-l 
    {
      z-index: 1000; 
    }

    .modal 
    {
      z-index: 1500; 
    }    
}

.navbar-brand
{
    text-align: center;
    padding: .5rem;
}

.navbar-brand,
.menu-l,
.menu-r,
.menu-descricao
{
    float: left;
}

/*
.menu-l,
.menu-r
{
    width: 20%;
}
*/

.menu-descricao
{
    width: 80%;
}



@media screen and (min-width: 768px)
{
    .navbar 
    {
      z-index: 1000; 
    }

    .modal 
    {
      z-index: 999; 
    }  
    
    .menu-l
    {
        width: 20%;
    }
    
    .menu-l .nav-item
    {
        width: 33%;
        text-align: center;
    }
    
    .menu-descricao
    {
        width: 65%;
    }
    
    .menu-r
    {
        width: 15%;
    }
    .menu-r .nav-item
    {
        width: 50%;
        text-align: center;
    }
    
}

/*------------ MODAL --------------*/

/*----Modal Style----------*/


.modal-content 
{
    border: 0;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.modal-header 
{
    border: 0;
    background-color: #ffffff; 
}

@media screen and (min-width: 768px)
{
/*
    .menu-l 
    {
      z-index: 1000; 
    }

    .modal 
    {
      z-index: 999; 
    }    
*/
    .modal.left .modal-dialog,
    .modal.right .modal-dialog 
    {
        position: fixed;
        margin: 90px auto;
/*        width: 320px;*/
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0); 
    }

    .modal.left .modal-content,
    .modal.right .modal-content 
    {
      overflow-y: auto; 
    }

    .modal.left .modal-body,
    .modal.right .modal-body 
    {
      padding: 15px; 
    }
    
    /*----Modal Left----------*/

    .modal.left.fade .modal-dialog 
    {
        left: -320px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
        transition: opacity 0.3s linear, left 0.3s ease-out; 
    }

    .modal.left.fade.show .modal-dialog 
    {
        left: 10px; 
    }

    /*----Modal Right----------*/

    .modal.right.fade .modal-dialog 
    {
      right: -320px;
      -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
      -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
      -o-transition: opacity 0.3s linear, right 0.3s ease-out;
      transition: opacity 0.3s linear, right 0.3s ease-out; 
    }

    .modal.right.fade.show .modal-dialog 
    {
      right: 10px; 
    }

    
}

.menu-descricao span{
    font-weight: bold;
}

.modal-title{
    color: #4e5ca1;
    font-weight: bold;
}

.nav-item:hover{
    background-color: #f3f3f3;
}


.btn-enviar{
    background-color: #4e5ca1;
    border-color: #4e5ca1;
}
.btn-enviar:hover{
    background-color: #3d4a8c;
    border-color: #3d4a8c ;
}

.pagina-explore{
    background-color: #f3f3f3;
}

.card-title{
    color: #3d4a8c ;
}

.categoria .card-categoria{
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
.categoria .card-categoria:hover{ 
    cursor: pointer;
}

