/*
 *   Mediascreen
 *   Copyright (C) 2017 OPS Empresas
 *   http://www.opsempresas.com.br
**/


img, picture, video, embed {max-width: 100%; max-height: 100%;}

@-moz-document url-prefix() {  
  img {   
    max-width: 100%; 
    max-height: 100%; 
  }
}

#header .header-menu-link {display: none;}
#header #menu {display: none;}

/*DESKTOP PEQUENOS E DESKTOP GRANDES*/
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    #header .header-menu-link {display: none;}
    #header #menu {display: none;}
        
    #inicio-content .bgcardapio .boxcardapio li {margin: 0 1% 0 1%;}
}

/*DESKTOP PEQUENOS*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
    #header .header-menu-link {display: none;}
    #header #menu {display: none;}   
    
    #header .boxnav #contHeader #navigation {max-width: 880px; float: none; display: block; margin: 32px auto 0 auto;}
    #header .boxnav #contHeader #navigation li {margin-right: 49px;}
    #header .boxnav #contHeader #navigation li a {box-sizing: border-box; font-size: 20px;}
    
    #header .fixed #contHeader .logo {width: 203px!important; margin-left: 10px;}
    #header .fixed #contHeader #navigation {max-width: 700px!important; float: left; margin-left: 15px!important;}
    #header .fixed #contHeader #navigation li {margin-right: 21px;}   
        
    /*FOOTER*/
    #footer #meio {width: 98%;}
        
    /*INICIO*/
    #inicio-content #conteudo {width: 97%;}
    
    #inicio-content .bgsomos {max-width: 100%; height: auto; background-position: 570px 0;}
    
    #inicio-content .bgcardapio .boxcardapio li {width: 31.3%; height: auto; float: left; display: inline-block; margin: 0 1% 0 1%;}
    #inicio-content .bgcardapio .boxcardapio li a {margin-bottom: 0;}
    #inicio-content .bgcardapio .boxcardapio li a .nome {font-size: 27px;}
    
    /*A EMPRESA*/
    #empresa-content #conteudo {width: 97%;}
    
    #conteudo .maisfotos li {width: 29.2%; height: 157px; margin: 0 2% 20px 2%;}
    
    /*PADRAO*/
    #padrao-content #conteudo {width: 97%;}
    
    /*DICAS*/
    #dicas-content #conteudo {width: 97%;}
    
    #dicas-content #conteudo #cat04Galerias {max-width: 916px;}
    #dicas-content #conteudo #cat04Galerias .cat {width: 30.7%; margin: 0 1.3% 41px;}
        
    /*DICA*/
    #dica-content #conteudo {width: 97%;}    
    
    #dica-content .boxmaisfotos .bgtotal {width: 97%;}
    #dica-content .boxmaisfotos .bgtotal .tl {margin-bottom: 9px;}
    #dica-content .boxmaisfotos .bgtotal .cat {width: 31%; display: inline-block; float: left; margin: 0 1% 40px 1%;}
    #dica-content .boxmaisfotos .bgtotal .cat:last-child {margin-right: auto;}
    
    /*CONTATO*/    
    #contato-content #conteudo {width: 97%;}
    
    #contato-content #conteudo .box {margin-right: 0;}
}

/*TABLET VERTICAL E DESKTOP PEQUENOS*/
@media screen and (min-width: 768px) and (max-width: 959px) {
    #header .header-menu-link {display: none;}
    #header #menu {display: none;} 
    
    #header .boxnav #contHeader #navigation {max-width: 740px; float: none; display: block; margin: 32px auto 0 auto;}
    #header .boxnav #contHeader #navigation li {margin-right: 29px;}
    #header .boxnav #contHeader #navigation li a {box-sizing: border-box; font-size: 18px;}
    
    #header .fixed #contHeader .logo {width: 150px!important; margin-left: 10px;}
    #header .fixed #contHeader #navigation {max-width: 560px!important; float: left; margin-left: 15px!important;}
    #header .fixed #contHeader #navigation li {margin-right: 6px;}
    #header .fixed #contHeader #navigation li a {font-size: 15px!important;}
    
    /*FOOTER*/
    #footer #meio .voltTop {bottom: 10px; right: 10px;}
    
    /*INICIO*/
    #inicio-content #conteudo {width: 97%;}
    
    #inicio-content .bgsomos {max-width: 100%; height: auto; background-position: 475px 0;}
    #inicio-content .bgsomos .boxsomos {width: 48%; max-width: 500px; margin: 0 1% 0 1%;}
    #inicio-content .bgsomos .boxsomos .tlt { font-size: 45px; margin-left: 0;}
    #inicio-content .bgsomos .boxsomos .texto {width: 98%; height: auto; min-height: 92px; margin: 16px 1% 0 1%;}
    #inicio-content .bgsomos .boxsomos .icons {width: 100%; max-width: 461px; background-size: contain;margin: 10px 0 0 0;}
    #inicio-content .bgsomos .boxsomos .link {float: right; margin-left: 0; margin-right: 0;}
    
    #inicio-content .bgcardapio .boxcardapio li {width: 31.3%; height: auto; float: left; display: inline-block; margin: 0 1% 0 1%;}
    #inicio-content .bgcardapio .boxcardapio li a {margin-bottom: 0;}
    #inicio-content .bgcardapio .boxcardapio li a .nome {font-size: 27px;}
    
     #inicio-content .bgcardapio .boxcardapio .link {margin-right: 42%; margin-left: 30%;}
    
    
    /*A EMPRESA*/
    #empresa-content #conteudo {width: 97%;}
    
    #conteudo .maisfotos li {width: 33.3%;}
    
    /*PADRAO*/
    #padrao-content #conteudo {width: 97%;}
    
    /*DICAS*/
    #dicas-content #conteudo {width: 97%;}
    
    #dicas-content #conteudo #cat04Galerias {width: 100%;max-width: 750px;float: none;display: table;margin: 0 auto;}    
    #dicas-content #conteudo #cat04Galerias .cat {width: 30.7%;max-width: 350px; height: auto;display: inline-block;float: left;margin: 0 1.3% 41px;}    
    #dicas-content #conteudo #cat04Galerias .cat .imgPrincipal {width: 100%; height: 198px; background-size: contain;}
    #dicas-content #conteudo #cat04Galerias .cat .txtCat {height: 127px; margin-bottom: 15px;}
    #dicas-content #conteudo #cat04Galerias .cat .btn {float: none;display: table;margin: 0px auto;}
    
    /*DICA*/
    #dica-content #conteudo {width: 97%;}
    
    #dica-content .boxmaisfotos .bgtotal {width: 97%;}
    #dica-content .boxmaisfotos .bgtotal .tl {margin-bottom: 9px;}
    #dica-content .boxmaisfotos .bgtotal .cat {width: 31%; display: inline-block; float: left; margin: 0 1% 40px 1%;}
    #dica-content .boxmaisfotos .bgtotal .cat:last-child {margin-right: auto;}
    
    /*CONTATO*/
    #contato-content #conteudo {width: 97%;}
    
    #contato-content #conteudo .vForms1 {width: 48%; max-width: 349px; display: inline-block; float: left; margin: 35px auto 0 auto;}
    #contato-content #conteudo .vForms1 .campo {width: 90.8%;}
    #contato-content #conteudo .vForms1 #endereco {width: 39%;}
    #contato-content #conteudo .vForms1 #telefone {width: 39%;}
    
    #contato-content #conteudo .box {width: 48%; margin-top: 35px; margin-right: 0;}
}

/*CELULAR HORIZONTAL E TABLET VERTICAL*/
@media screen and (min-width: 480px) and (max-width: 767px) {
    #header .boxnav #contHeader .logo {width: 280px; display: block; float: none; margin: 16px auto;}
    
    #header #contHeader #navigation {display: none;}
    
    #header .fixed #contHeader .logo {width: 215px; float: none; margin: 5px auto 0!important;}
    #header .fixed #contHeader .header-menu-link {position: absolute; margin: 21px 3%;}
    #header .fixed #contHeader .header-menu-link .seta {margin: 0 auto 8px;}
    #header .fixed #menu {top: 0;}
    
    #header .header-menu-link {width: 47px; line-height: 27px; display: block; position: relative; z-index: 20; top: 0; margin: 38px 0 0 3%; font-size: 23px; font-family: 'rakeslyregular'; color: #FFF; text-align: center;}
    #header .header-menu-link .seta {width: 28px; height: 22px; display: block; margin: 0 auto; background: url(../images/png/setamenu2.png) no-repeat;}
    #header .header-menu-link:hover .seta {background-position: -28px 0;}
    #header .header-menu-link:hover {color: #e93639;}    
    
    #header #menu {width: 100%; height: auto; position: relative; top: 2px; display: none; z-index: 20;}
    #header #menu li {width: 100%; height: 36px; float: left; background: #545454;}
    #header #menu li a {height: 36px; line-height: 36px; padding-left: 16px; display: block; font-family: 'rakeslyregular'; font-size: 15px; color: #FFF;}
    #header #menu li a:hover {color: #e93639;}
    
    #header .boxnav #contHeader #navigation {display: none;}
        
    /*FOOTER*/
    #footer #meio {width: 97%;}
    
    #footer #meio #navigation {max-width: 321px; height: auto; float: none; display: block; margin-top: 45px;}
    #footer #meio #navigation li {margin-right: 44px;}
    #footer #meio #navigation li:nth-child(1) {margin-right: 91px;}
    #footer #meio #navigation li:nth-child(2) {margin-right: 0;}
    #footer #meio #navigation li:nth-child(3) {margin-right: 0; float: right;}
    #footer #meio #navigation li:nth-child(6) {margin-right: 0; float: right;}
    
    #footer #meio .copy {margin-top: 80px; margin-bottom: 10px; font-size: 11px;}
    #footer #meio .voltTop {bottom: 0; top: 74px;}
    
    /*INICIO*/
    #inicio-content #conteudo {width: 97%;}
    
    #inicio-content .bgsomos {height: 740px; background-position: bottom;}
    #inicio-content .bgsomos .boxsomos {width: 100%; max-width: 400px;}
    #inicio-content .bgsomos .boxsomos .tlt {font-size: 45px; margin-left: 0;}
    #inicio-content .bgsomos .boxsomos .texto {width: 98%; height: auto; min-height: 92px; margin: 16px 1% 0 1%;}
    #inicio-content .bgsomos .boxsomos .icons {width: 100%; max-width: 461px; background-size: contain;margin: 10px 0 0 0;}
    #inicio-content .bgsomos .boxsomos .link {float: right; margin-left: 0; margin-right: 0;}
    
    #inicio-content .bgcardapio .boxcardapio .tlt {height: auto;}
    
    #inicio-content .bgcardapio .boxcardapio li {float: none; display: block; margin: 0 auto 0 auto;}
    #inicio-content .bgcardapio .boxcardapio li a {margin-bottom: 40px;}
        
    #inicio-content .bgcardapio .boxcardapio .link {margin-right: 39%; margin-left: 30%;}
    
    /*A EMPRESA*/
    #empresa-content #conteudo {width: 97%;}
    #empresa-content #fundotlt {margin-bottom: 35px;}
    
    #empresa-content #conteudo .textoPadrao .imgPrinc {width: 100%;max-width: 400px;height: auto;line-height: 70%;float: none;margin: 21px auto;display: block;background-size: contain;overflow: hidden;}
    
    #conteudo .maisfotos li {width: 100%; max-width: 320px; height: auto; display: block; float: none; margin: 0 auto;}
    #conteudo .maisfotos li a {margin-bottom: 25px;}
    
    /*PADRAO*/
    #padrao-content #conteudo {width: 97%;}
    #padrao-content #fundotlt {margin-bottom: 35px;}
    
    /*DICAS*/
    #dicas-content #conteudo {width: 97%;}
    #dicas-content #fundotlt {margin-bottom: 35px;}
    
    #dicas-content #conteudo #cat04Galerias {max-width: 670px;}
    #dicas-content #conteudo #cat04Galerias .cat {width: 100%; max-width: 400px; height: auto; display: block; float: none; margin: 0 auto 41px;}
    #dicas-content #conteudo #cat04Galerias .cat .imgPrincipal {width: 100%; max-width: 400px; height: 198px; background-size: contain;}
    #dicas-content #conteudo #cat04Galerias .cat .tltCat {height: 52px; font-size: 22px;}
    #dicas-content #conteudo #cat04Galerias .cat .txtCat {height: 198px; margin-bottom: 15px;}
    #dicas-content #conteudo #cat04Galerias .cat .btn {float: none;display: table;margin: 0px auto;}
    
    /*DICA*/
    #dica-content #conteudo {width: 97%;}
    #dica-content #fundotlt {margin-bottom: 35px;}   
    
    #dica-content .boxmaisfotos .bgtotal {width: 97%;}
    #dica-content .boxmaisfotos .bgtotal .tl {margin-bottom: 9px;}
    #dica-content .boxmaisfotos .bgtotal .cat {display: table; float: none; margin: 0 auto 20px auto;}
    #dica-content .boxmaisfotos .bgtotal .cat:last-child {margin-right: auto;}
    
    /*CONTATO*/
    #contato-content #conteudo {width: 97%;}
    #contato-content #fundotlt {margin-bottom: 35px;}
    
    #contato-content #conteudo .vForms1 {max-width: 449px; display: table; float: none; margin: 0 auto 0 auto;}
    #contato-content #conteudo .vForms1 .campo {width: 92.8%;}
    #contato-content #conteudo .vForms1 #endereco {width: 41%;}
    #contato-content #conteudo .vForms1 #telefone {width: 41%;}
    
    #contato-content #conteudo .box {max-width: 449px; display: table; float: none; margin: 35px auto 0 auto;}
}

@media screen and (min-width: 667px) and (max-width: 767px) {
    #footer #meio {width: 98%;}
    
    #footer #meio #navigation {max-width: 635px; margin: 45px auto 0 auto;}
    #footer #meio #navigation li {margin-right: 27px;}
    #footer #meio #navigation li:nth-child(1) {margin-right: 27px;}
    #footer #meio #navigation li:nth-child(2) {margin-right: 27px;}
    #footer #meio #navigation li:nth-child(3) {margin-right: 27px; float: left;}
    #footer #meio #navigation li:nth-child(6) {margin-right: 0; float: left;}
            
    #footer #meio .copy {margin-top: 36px; margin-bottom: 0; font-size: 12px;}
    #footer #meio .voltTop {bottom: 34px; top: 0;}
    
    /**/
    #inicio-content .bgsomos {max-width: 100%; height: auto; background-position: 385px 0;}
    #inicio-content .bgsomos .boxsomos {width: 48%; max-width: 500px; margin: 0 1% 0 1%;}
    #inicio-content .bgsomos .boxsomos .icons {height: 70px;}
    
    #inicio-content .bgcardapio .boxcardapio li {width: 33.3%; height: auto; float: left; display: inline-block; margin: 0 0 0 0;}
    #inicio-content .bgcardapio .boxcardapio li a {margin-bottom: 0;}
    #inicio-content .bgcardapio .boxcardapio li a .nome {font-size: 19px;}
    #inicio-content .bgcardapio .boxcardapio .link {margin-right: 40%;}
    
    /**/
    #contato-content #conteudo .vForms1 {width: 48%; max-width: 449px; display: inline-block; float: left; margin: 0 auto 0 auto;}
    #contato-content #conteudo .vForms1 .campo {width: 88%;}
    #contato-content #conteudo .vForms1 #endereco {width: 88%;}
    #contato-content #conteudo .vForms1 #telefone {width: 88%; float: left;}
    
    #contato-content #conteudo .box {width: 48%; display: inline-block; float: right;}
    
    /**/
    #empresa-content #conteudo .textoPadrao .imgPrinc {width: 100%; max-width: 400px; height: auto; line-height: 70%; float: right; margin: 0 0 21px 33px; background-size: contain; overflow: hidden;}
        
    #conteudo .maisfotos li {width: 33.3%; max-width: 320px; height: auto; display: inline-block; float: left; margin: 0 0 0 0;}
    #conteudo .maisfotos li a {margin-bottom: 0;}
    
    /**/
    #dicas-content #conteudo #cat04Galerias .cat {width: 30.7%; display: inline-block; float: left; margin: 0 1.3% 41px;}
    
    /**/
    #dicas-content #conteudo #cat04Galerias .cat .txtCat {height: 127px;}
    
    /**/
    #dica-content .boxmaisfotos .bgtotal .cat {width: 31%; display: inline-block; float: left; margin: 0 1% 40px 1%;}
    #dica-content .boxmaisfotos .bgtotal .cat:last-child {margin-right: auto;}
}

/*CELULAR VERTICAL*/
@media screen and (min-width: 320px) and (max-width: 479px) {
    #header .boxnav #contHeader .logo {width: 280px; display: block; float: none; margin: 16px auto;}
    
    #header #contHeader #navigation {display: none;}
    
    #header .fixed #contHeader .logo {width: 217px!important; float: right; margin: 5px auto 0!important; margin-right: 15px!important;}
    #header .fixed #contHeader .header-menu-link {position: absolute; margin: 21px 3%;}
    #header .fixed #contHeader .header-menu-link .seta {margin: 0 auto 8px;}
    #header .fixed #menu {top: 0;}
    
    #header .header-menu-link {width: 47px; line-height: 27px; display: block; position: relative; z-index: 20; top: 0; margin: 38px 0 0 3%; font-size: 23px; font-family: 'rakeslyregular'; color: #FFF; text-align: center;}
    #header .header-menu-link .seta {width: 28px; height: 22px; display: block; margin: 0 auto; background: url(../images/png/setamenu2.png) no-repeat;}
    #header .header-menu-link:hover .seta {background-position: -28px 0;}
    #header .header-menu-link:hover {color: #e93639;}    
    
    #header #menu {width: 100%; height: auto; position: relative; top: 2px; display: none; z-index: 20;}
    #header #menu li {width: 100%; height: 36px; float: left; background: #545454;}
    #header #menu li a {height: 36px; line-height: 36px; padding-left: 16px; display: block; font-family: 'rakeslyregular'; font-size: 15px; color: #FFF;}
    #header #menu li a:hover {color: #e93639;}
    
    #header .boxnav #contHeader #navigation {display: none;}
        
    /*FOOTER*/
    #footer #meio {width: 97%;}
    
    #footer #meio #navigation {max-width: 195px; height: auto; float: none; display: none; margin-top: 45px;}
    #footer #meio #navigation li {margin-right: 44px;}
    #footer #meio #navigation li:nth-child(2) {margin-right: 0; float: right;}
    #footer #meio #navigation li:nth-child(4) {margin-right: 0; float: right;}
    #footer #meio #navigation li:nth-child(6) {margin-right: 0; float: right;}
    
    #footer #meio .copy {height: auto;}
    #footer #meio .voltTop {display: none;}
    
    /*INICIO*/
    #inicio-content #conteudo {width: 97%;}
    
    #inicio-content .bgsomos {height: 740px; background-position: bottom;}
    #inicio-content .bgsomos .boxsomos {width: 95%; max-width: 310px;}
    #inicio-content .bgsomos .boxsomos .tlt {font-size: 45px; margin-left: 0;}
    #inicio-content .bgsomos .boxsomos .texto {width: 98%; height: auto; min-height: 92px; margin: 16px 1% 0 1%;}
    #inicio-content .bgsomos .boxsomos .icons {width: 100%; max-width: 461px; background-size: contain;margin: 10px 0 0 0;}
    #inicio-content .bgsomos .boxsomos .link {float: right; margin-left: 0; margin-right: 0;}
    
    #inicio-content .bgcardapio .boxcardapio .tlt {height: auto;}
    
    #inicio-content .bgcardapio .boxcardapio li {float: none; display: block; margin: 0 auto 0 auto;}
    #inicio-content .bgcardapio .boxcardapio li a {margin-bottom: 40px;}
        
    #inicio-content .bgcardapio .boxcardapio .link {margin-right: 30%;}
    
    /*A EMPRESA*/
    #empresa-content #conteudo {width: 97%;}
    #empresa-content #fundotlt {margin-bottom: 35px;}
    
    #empresa-content #conteudo .textoPadrao .imgPrinc {width: 100%;max-width: 400px;height: auto;line-height: 70%;float: none;margin: 21px auto;display: block;background-size: contain;overflow: hidden;}
    
    #conteudo .maisfotos li {width: 100%; max-width: 320px; height: auto; display: block; float: none; margin: 0 auto;}
    #conteudo .maisfotos li a {margin-bottom: 25px;}
         
    /*PADRAO*/
    #padrao-content #conteudo {width: 97%;}
    #padrao-content #fundotlt {margin-bottom: 35px;}
    
    /*DICAS*/
    #dicas-content #conteudo {width: 97%;}
    #dicas-content #fundotlt {margin-bottom: 35px;}
    
    #dicas-content #conteudo #cat04Galerias {width: 100%;max-width: 300px;float: none; display: table;margin: 0 auto;}    
    #dicas-content #conteudo #cat04Galerias .cat {width: 100%; height: auto; display: inline-block; float: left; margin: 0 0 41px 0;}
    #dicas-content #conteudo #cat04Galerias .cat .imgPrincipal {width: 293px; height: 198px; background-size: contain;}
    #dicas-content #conteudo #cat04Galerias .cat .tltCat {height: auto;}
    #dicas-content #conteudo #cat04Galerias .cat .txtCat {height: auto; margin-bottom: 15px;}
    #dicas-content #conteudo #cat04Galerias .cat .btn {float: none;display: table;margin: 0px auto;}
    
    /*DICA*/
    #dica-content #conteudo {width: 97%;}
    #dica-content #fundotlt {margin-bottom: 35px;}
    
    #dica-content #conteudo #total .titulonot {font-size: 25px;}
    
    #dica-content .boxmaisfotos .bgtotal {width: 97%;}
    #dica-content .boxmaisfotos .bgtotal .tl {margin-bottom: 9px;}
    #dica-content .boxmaisfotos .bgtotal .cat {display: table; float: none; margin: 0 auto 20px auto;}
    #dica-content .boxmaisfotos .bgtotal .cat:last-child {margin-right: auto;}
    
    /*CONTATO*/
    #contato-content #conteudo {width: 97%;}    
    #contato-content #fundotlt {margin-bottom: 35px;}
    
    #contato-content #conteudo .vForms1 {max-width: 293px; display: table; float: none; margin: 0 auto 0 auto;}
    #contato-content #conteudo .vForms1 .campo {width: 89.2%;}
    #contato-content #conteudo .vForms1 #endereco {width: 36%;}
    #contato-content #conteudo .vForms1 #telefone {width: 36%;}
    
    #contato-content #conteudo .box {max-width: 293px; display: table; float: none; margin: 35px auto 0 auto;}
}