*{margin:0; padding: 0; box-sizing: border-box;


    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

}

[class*="hide"]{display:none !important; }

ul{list-style: none;}

a{text-decoration: none; font-size: 20px; font-family: sans-serif; color:red; }

a:hover{color:gold;}

body{
    display: block;    
    width:100%;
   
    background: brown;
    
    /* 
    background-image: url(../img/receita-picanha-molho-cerveja-azeitonas.jpg);
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;

    */
    
}

#main{
    display:grid;
    grid-template-columns: 20% 60% auto;
    grid-auto-rows: auto auto 350px auto 250px;
    grid-template-areas: "b b b"
    "n n n"
    "h h h"
    "sbar corpo corpo "
    "rod rod rod";
    
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    align-self: stretch;
    
    width: 100%;
    padding: 0;
    margin: 0;
            
    grid-gap:15px;

}


.barra{grid-area:b ;}
.mainnav{grid-area:n ;}
.cab{grid-area:h ;}
.sidebar{grid-area:sbar ;}
.conteudo{grid-area:corpo;}
.rodape{grid-area:rod ;}
/*
.barra{grid-area: ;}
*/





/*INICIO
//passar para outro css*/
#main{
    background: rgba(200,100,0,.4);
    text-align: center;
    font-family: verdana, arial;
}



#main #barra{
    display: table;
    width: 100%;
    min-width: 100%;
    height:60px;
    background: red;
    color:gold;
    text-align: left;
    margin: 0;
}


#btlb{
    display: block;
    width: 60px;
    color:gold !important;
    cursor: pointer;
    font-size: 40px;
    margin:0;
    text-align: center;
}

#btlb:hover{background: darkred;}

#btm{display: none;}
/**/



#mainnav{
    display: table;
    width:100%;
    background: rgba(50,10,10, .9);
    
}

#mainnav .menu{
    display: flex;
    flex-flow: row nowrap;
    min-height: 40px;
}

.menu li{
    flex: auto;
    display: block;
    align-items: flex-end;
    align-self: flex-start;
    width: 19%;
    height: 30px;
    
}

.menu li a{
    display: table;
    width: 100%;
    padding: .5rem;
}

.menu li a:hover{
    background:rgba(250,10,0, .7);
}















/*cabeçalho
//
*/
#barra .logo{width:10%; margin: 0 auto;}
#barra .tel{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    max-width:100%;
    width:100%;
    margin: 0 auto;}

#barra span{
     width: 80%;
     align-self: flex-end; margin: 0 auto;
    align-items: center;
    justify-content: center;
}

#barra span a{margin-left: .2rem !important;}


#barra span,
#barra span a{
    max-width:100%;
   
    display: flex;
    flex-flow: row nowrap;
    height: auto;
    color: #fcfcfc;
   /* align-content: center;
    align-items: flex-end;
    align-self: flex-end;
    */
    
    font-size: .9rem;
    margin: .1rem 0;
    padding: 0;
}

#cab{
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    height: inherit;
    padding: 0;
    background-image:     url(../img/receita-picanha-molho-cerveja-azeitonas.jpg);
    
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
    
    justify-content: center;
    align-content: stretch;
    
}

#cab .brilho{
    min-height: inherit;
    height: 350px;
    background: rgba(230,225,220,.1);
}


#cab .brilho h1{
    color: gold;
    font-size: 73px;
    margin-top: 10%;
    text-shadow: 1px 0px 1px #000;
}

#cab .bk{ font-family: cursive; color: #000; font-style: oblique;  font-weight: 300;}

#cab h2{
    font-size: 26px;
    color:#111;
    text-shadow: 1px 0px 2px white;
}


#desenvolvedor{
    color: #fcfcfc;
    text-shadow: 1px 0px 1px gold;}





/*Sidebar
//cardapio
//
*/
#main #sidebar{
    display: block;
    background: orangered;
    max-height: 210px;
    padding:  .7rem;
    border-radius: 1.2rem;
    z-index: 1;
}

#main #sidebar .sbar{
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: stretch;
    
}

#main #sidebar #sbar .card li,
#main #sidebar #sbar .card li a{
    display: table;
    flex: auto;
    width:100%;
    background: rgba(230,200,0, .7);
}

#sbar li:nth-child(1){
   
    width: 100%;
    font-size: 19px;
    padding: .2rem 0;
    border-radius: .9rem .9rem 0 0;
}


#sbar li a:hover{
    background:orangered !important;
}










/*Conteudo
//
//
*/
#conteudo{
    
    background: rgba(250,120,20, .6);
    margin: 0 1rem 0 0;
    border-radius: .7rem;
    
    padding: 1rem 0;
}

#sobre{display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin:1.2rem 0;
    width: 100%;
}

#conteudo #sobre .box{                       background:rgba(100,50,0,.4);
    color:#222;
    width:90%;
    margin:0 auto;
    padding: 1.8rem;
}

#sobre .box h3{
    font-family: cursive;
    height: 80px;
    background: gold;
    font-size: 36px;
    padding: .5rem;
    vertical-align: baseline;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-shadow: 1px 1px 2px red;
}

#sobre .box p{
    align-items: stretch;
    font-family: verdana, sanserif;
    font-size: 18px;
    background: rgba(255,255,255, .9);
    box-shadow: 0px 1px 1px black;
    color:#222;
    margin-top: -15px;
    padding: 1.7rem;
    text-align: left;
    line-height: 30px;
}

#sobre .box p> strong{
    font-size: 1rem;
    font-style: oblique;
}

#sobre .box p,
#sobre .box,
#sobre{
    border-radius: 1.8rem;
}



/*Promoçao
//
//
*/
#main #promocao{
    display: block;
    height: auto;
}

#promocao .box{
    width:90%;
    margin: 0 auto;
    padding: 1rem 0 3rem;
    background: orangered;

}

#promocao h3{font-size: 25px; letter-spacing: .3rem;}

#conteiner{
    display: table;
    width:100%;
    position: relative;
}

#promocao .box #conteiner .ban1{
    display: block;
    min-width: 1px;
    max-width: 190px;
    width: 190px;
    height: auto;
    font-size: 22px;
    font-size-adjust: auto;
    color:white;
    text-shadow: 2px 0px 1px black, 3px 2px 1px black, -3px -1px 1px black;
    border-radius: 2rem;
    background: goldenrod;
    padding: .6rem;
    margin: 0 2%;
    
    box-shadow: 0 5px  12px black;
    
    transform: rotate(33deg);
    
    
    position: absolute;
    top:29px;
    right: 2rem;
}


#promocao .box .ban{width:200px;
    left:2rem;
    transform: rotate(-33deg)!important;

}


.sombrabranca,
#promocao .box .sombrabranca{
    display: table;
    width: 100%;
    height: auto;
    padding: 5rem 0 1rem;
    font-size: 32px;
    font-weight: bold;
    color:red;
    text-shadow: 0 0 10px white, 0 0 12px white;
    
}



#promocao .box >span{
    display: block;
    font-size: 22px;   
    
    
}

#promocao .box  {
    font-weight: 900;
    color: black;
    font-size: 2rem;
    
}


/*bug ban1 resolvido*/
@media (max-width:950px){
    #promocao h3{font-size: 25px; letter-spacing: .3rem;
    text-decoration: underline gold;}

    #promocao .box #conteiner{background: inherit;}
    
    #promocao .box #conteiner .ban1,
    #promocao .box #conteiner .ban{
        color:yellow;
        font-size: 1.1rem;
        background: #ac0000!important;
        position: relative;
        left: 0;
        top:0;
        margin: 3rem 0 -1.8rem ;
        transform: none !important;
    }
    
    #promocao .box #conteiner .ban1{
        align-self: center;
    }
    
}









/*CARDAPIO CONTEUDO
/   APOS O MAIN
/
*/
.cards{
    background: white;
    width: 90%;
    margin: 2rem auto;
    padding: 2rem;
}




body{
    background: rgba(0,0,0, .9);
}










/*rodape
//
//
*/

#rodape{
    background: rgba(20,20,0, .7);
    color:aliceblue;
    height: 350px;
    padding: .7rem
}


.px22{
    font-size: 22px;
}

#rodape .endereco li{margin: .4rem 0;}

#rodape .endereco:nth-child(n+1){
    color: lightgreen;
}



#rodape .endereco li>a{
    color:orangered;
}

#rodape .endereco li>a:hover{
    color:gold;
}

#rodape p,
#rodape .desenvolvedor{
    margin: 20px 0 0 ;
}




/*social
/
/
*/
#rodape .social{
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    
}
.social ul{
    width:100%;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
}

.social ul .seguir{
    min-width:100%;
    max-width: 100%;
    width: 100%;
    padding: 1rem 0;
    margin: 1rem auto ;
    align-self: stretch;
    justify-content: space-around;
    background: rgba(0,0,0, .7);
    border: 2px solid teal;
    
    border-radius: 2rem;
}
 
hr{margin: 0 auto; width:90%;}

.social ul li{
    max-width: 40px!important;
    margin: 10px .5rem !important;
    
}

.icon{
    display: flex;
    flex-wrap: wrap ;
    width:40px;
    height: 40px;
    max-width:40px;
    max-height: 40px;
    margin: 0 ;
    align-content: center;
    align-items: center;
    align-self: center;
    
}




/*Conteudo conteiner
//
//
*/
#conteiner{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
    width: 100%;
    background: white;
}

.cards{
    display:  flex;
    flex-flow: column wrap;
    align-content:stretch;
    align-items: baseline;
    align-self: center;
    justify-content: center;
    background: rgba(100,35,122, .6);
}

.cardbox,
.cardcab{
    width: 100%;
    margin: .4rem auto;
    text-align: center;
    
}

.cardcab{font-family: cursive;
    font-size: 26px;
    background: rgba(0,0,200, .3);
    color:gold;
    text-shadow: 0px 2px 3px royalblue;
}



.cardbox{
    padding: 1.5rem;
    background: rgba(245,250,250, .7);
    font-size: 18px;

    border-radius: .7rem;
    box-shadow: 0px 1px 22px ;
    width: ;
    
}


.cardbox ul{
    display: block;
    margin: 1rem auto;
}

.cardbox ul li{
    margin-left: 0;
    text-align: left;
    font-family: sans-serif, verdana;
}

.pratos,
.acomp{
    width: 100%;
    color:red;
    font-weight: bold;
    font-style: italic;
    font-size: 17px;
    text-decoration: underline orangered;
    margin: .7rem 0;  
    text-shadow: 0 2px forestgreen;
}

.listpratos,
.listacomp{
    display: block;
    width: 49%;
    height: auto;
    margin: 1rem .4rem 0!important;
    padding: .5rem;
    background: rgba(288,180,100, .5);
    word-spacing: .7rem 0;
}

.cards,
.listpratos,
.listacomp,
.cardbox figure,
.cardbox figure img{
    -webkit-border-radius: .7rem;
    -moz-border-radius: .7rem;
    border-radius: .7rem;
}

.cardbox figure{
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    min-height: 180px;
    margin: 1.3rem 0 0 .3rem;
    height:auto;
    position: top;
    border: 1px solid gray;
    padding: 0;

    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    align-self: stretch;
}


.cardbox figure img{
    display: flex;
    min-height: inherit;
    width: 100%;
    
    justify-content: flex-start;
    align-content: stretch;
    align-self: stretch;
}



[class*="cardfoot"]{
    height: auto;
    width: 100%;
    text-align: right;
    background: lawngreen;
    color:navy!important;
}



.cardbox{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}


/*editar este MEDIA ====================================
/
/
*/
@media (max-width:800px){
    #conteudo{
        max-width: 90vw;
        padding: .2rem;
    }
    .cardbox{
        min-width:auto;
        width:90%;
        flex-flow: column wrap;
        margin: 0 auto;
    }
    
    .cardbox .listpratos,
    .cardbox .listacomp,
    .cardbox .cardfig{
        width: 100%;
        display: table;
        margin:0 auto;
    }
    
    
    
    
    
}

/***
**
**
*/

#sidebar{margin: 0;display: flex;}
#sidebar #sbar{
    display: flex;
    width: 100%; margin: 0 auto;}

#sidebar #sbar .card li{
    display: flex;
    margin:0;
    min-width:100%;
    width:100%;
    align-items: stretch;
}

@media screen and (min-width:460px) and (max-width:670px){
    #sidebar{
        max-height: 270px !important;
        height: auto;
        padding: .6rem  !important;
    }
    
    #sidebar #sbar .card li{
    /* font-size: 15px; */
        font-size: 1.rem;
        margin:.3rem 0;
        padding: 0;
    }
    
    #sbar .card li:first-child{
        /*font-size: 12px;*/
        font-size: 1rem;
        
        padding: 1rem 0; width: 100%;}
    
}
/*funcoes sidebar
/
/
*/
.cards{
    position: absolute;
    left: -9999px;
    width:2500px;
    opacity:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

/*
#cardsegunda,
#cardterca,
#cardquarta,
#cardquinta,
#cardsexta,
#cardsabado,
#carddomingo{
    
}
*/

#cardsegunda:target,
#cardterca:target,
#cardquarta:target,
#cardquinta:target,
#cardsexta:target,
#cardsabado:target,
#carddomingo:target{
    position: relative;
    left: 0;
    width:100%;
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}


.brilhof,
.cards{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    text-align: center;
}

.cards .cardfoot{
    -webkit-border-radius: 1.2rem;
    -moz-border-radius: 1.2rem;
    border-radius: 1.2rem;
}

.cards .cardfoot .brilhof p{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    background: rgba(0,0,0, 0);
    
}

.cards .cardfoot .brilhof p>span{
    align-self: stretch;
    margin:.3rem auto;
    color: #111;
    font-family: cursive;
    font-weight: bold;
}

.cards .cardfoot .brilhof ul{
    display: flex;
    flex-flow: row wrap;
    
    background-image: url(../img/churrasco.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    -webkit-text-shadow: 1px 0px 2px black;
    -moz-text-shadow: 1px 0px 2px black;
    text-shadow: 1px 0px 2px black;
}

.cards .cardfoot .brilhof ul li{
    
    align-self: flex-start;
    width:33%;
    align-self: stretch;
    margin: .3rem 0;
    padding-left: .7rem;
    text-align: left;
    color: #fff;
}

.cards .cardfoot .brilhof .centro{margin: 0 auto; text-align: center;}

.cards .cardfoot .brilhof{
   
    margin: 0;
    width: 100%;
    height: inherit;
    padding: 1rem;
    background: #fca!important;

}


.red{color:red !important;}




/*escondendo barra menu desktop*/
#barra{
    display: none !important;
}





/****
/MOBILE
/
/
*/
@media (min-width:1px) and (max-width:460px){
    #barra{display: flex!important;} 
  
    #btlb{color: gold !important;}
    #btlb:hover{color:yellow !important;}
    
    #main{
        /*
        display: grid;
        grid-template-areas: "";
        */
        
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        align-content: center;
        align-items: stretch;
    }
    
    
    
    
    #mainnav{
        display: table;
        width: 100wv;
        height:auto;
        padding: .5rem 0;
    }
    
    #mainnav .menu{
        display: table;
        width: 100%;
        height:100px !important;
    }

    #mainnav .menu li,
    #mainnav .menu li a{
        display: table;
        width: 100%;
        height: 50px;
        padding:   0;
      
        text-align: center;
        color:gold;
    } 
    
    #mainnav .menu li a{padding: 1rem 0;}
    
    #mainnav .menu li a:active{color:orangered;}
    
    
/****    funcao menu*/
    #mainnav{position:absolute;
    left:-9999px;}
    
    #btm:checked~ #main #mainnav{
        position:relative;
        left:0;
    }
    
    #mainnav,
    #btm:checked~ #main #mainnav{
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
    }
    
    
    
    #cab #desenvolvedor{
        margin: 1rem 0 0!important;
    }
    #sidebar{
        height: auto; margin: 1rem 0;}
    
    #sidebar #sbar{height: auto;
    margin: -.2rem 0;}
    
    #sidebar #sbar .card>li{
        height: auto;
        margin: .1rem 0;
    }
    
    #sidebar #sbar .card li>a{
        padding: .3rem;
    }
/***    conteudo*/
    section{
        display:flex;
        flex-flow: column wrap;
        margin: 0 auto;
        min-width: 100%;
        justify-content: center;
        align-content: stretch;
    }
    
    
    
    #main{
        /*
        display: grid;
    grid-template-areas: "";
    grid-template-rows: auto;
    grid-template-columns: 100%;    
    */
    
    display:grid;
    grid-template-columns:100%;
    grid-auto-rows: auto auto auto auto auto;
    grid-template-areas: "b"
    "n"
    "h"
    "corpo "
    "rod";
    }
    
    .sidebar{
    grid-area: n;    
    }
    
    .sidebar{
        position:absolute;
        left: -9999px;
    }
    .sidebar:target{
        position: relative;
        left:0;
    }
    
    a:target{
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }

    
    
    #main .cards,
    #main #sobre .box,
    #main #promocao {padding: 0;}
    
    #main .cards .cardbox{
        width: 100%;
        margin-bottom: 1.5rem !important;
    }
    
    .cards .cardfoot .brilhof>.px16{
    font-size: 15px !important;
    width: 100%;
    margin: 0;
}

    span{
        font-size-adjust: 100%!important;
    }

    
    
    
    #rodape .desenvolvedor,
    .desenvolvedor a{
        margin: 1rem .7rem;
        font-size: 12px;
    }
    .desenvolvedor a{
        color: yellow;}
}

#rodape hr:last-child{
    margin:1rem auto;
    text-align: center;
}











/*
/bug figure desktop
/
*/

@media(min-width:400px){
    
    .cardbox .listpratos,
    .cardbox .listacomp{
        max-height: 350px;
    }
    
    .cardbox .imagens{
        border: none;
        display: flex;
        flex-flow: row  nowrap;
        width: 100%;
        padding: .7rem 0;
        
        justify-content: center;
        align-content: center;
        align-self: stretch;
    }
    
    
    .cardbox figure img:hover{
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2);
        
        box-shadow: 2px 0px 20px brown;
    }
    
     .cardbox figure img,
    .cardbox figure img:hover{
        -webkit-transition: all 1.2s ease-in-out;
        -moz-transition: all 1.2s ease-in-out;
        transition: all 1.2s ease-in-out;
    }
    
    
    .cardbox figure{
        
        margin: 0 auto;
        width:90%;
        height: 100px;
        justify-content:center;
        align-items: stretch;
    }
    
    .cardbox figure img{
        width: 100%;
        flex: 0 1 auto;
        
    }
    
    #imgtopg,
    #imgtopg:hover{
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    
    #imgtopg{
        height:25px;
    
    
    }
    
    #imgtopg:hover{
    height: 480px;
    min-height:480px;
    width: 100%;
    background-image: url(../img/capa2.png);
    background-attachment: fixed !important;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    }
    
}






@media (max-width:400px){
    
    
    #imgtopg{
        height:200px;
        width: 100%;
        background-image: url(../img/capa2.png);
        background-attachment: local;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }


    
}

#fechar{
    color:#888;
    border: 2px solid;
    width:130px;
    border-radius: 2rem;
    padding: .5rem 0;
    margin: 3rem auto 0;
}

#fechar:hover{
    color:#fff;
}

#inicio,
#inicio:target{
    -webkit-transition:all 1.2s ease-in-out;
    -moz-transition:all 1.2s ease-in-out;
    transition:all 1.2s ease-in-out;
}

*:target{
    overflow: visible !important;
}

#inicio:target{
    position: ;
    top:55px;
}

#inicio:target ~ .brilho{display: none;}


#inicio{
    
    position: absolute;
    top:-9999px;
    
    width: 100%;
    color:#ececec;
    text-align: center;
    height: 400px;
    padding: 1rem 0;
    margin: 0 auto;
    background: rgba(0,0,0, .8);
 
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

#inicio h2{
    margin: 1rem auto;
    width: 100%;
    color:Gold;

}

#inicio h2 span{color:gray; text-shadow: 1px 2px black;}





/*bugs finais rodape*/
.maior{
    color:gold;
    font-family: verdana;
    font-size: 22px;
    text-decoration: underline ;
    text-decoration-color: dodgerblue;
    margin: 0 auto .6rem;
}

.desenv{
    font-size: 16px;
    color:darkturquoise;
}

#rodape hr:last-child{
    margin:1rem auto;
    text-align: center;
}












/* BREAK POINTS
//540px
//
*/


@media only screen and (max-width:540px){

    
    #sbar,
    .card{
        max-height:250px;
        height: inherit;
        
        background: transparent;
    }
    
    #sidebar .card{max-height: 250px;
    }
    
    #main #sidebar{
       width: 100%; 
        background:rgba(388,67,40, .9);
        height:300px !important;
        padding: 0;
    }
    
    #sbar,
    #sbar>ul{
        max-width: 100% !important;
        width: 100%;
        
    }
    
    
    #sbar .card li{
        max-width:100%;
        width: 100%;
        font-size: ;
    }
    .card li a{
        font-size: 1.2rem;
        padding:  0;
    }


}