/*
 *   Mediascreen
 *   Copyright (C) 2016 Luizão
 *   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%;   
  }
}

/*TV*/
@media screen and (min-width: 1367px) and (max-width: 1920px) {
    #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) {
    #container{width:100%;}
    
    #header .header-menu-link {display: none; }
    #header #menu {display: none;}
    
}

/*DESKTOP PEQUENOS*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
    #container{width:100%;}
    
    #header .header-menu-link {display: none; }
    #header #menu {display: none;}
    
    /**/
    #inicio-content .boxprodutos .bgprod li {width: 30.3%; margin-bottom: 20px;}
    
    /**/    
    #noticias-content #conteudo .lista li {width: 45.7%; min-height: 130px; height: auto; float: left; margin: 0 2% 38px 2%;}
    #noticias-content #conteudo .lista li a .imgPrincipal {width: 43%;}
    #noticias-content #conteudo .lista li a .nome {width: 53%; min-width: inherit;}
}

/*TABLET VERTICAL E DESKTOP PEQUENOS*/
@media screen and (min-width: 768px) and (max-width: 959px) {
    #container{width:100%;}
    
    #header .header-menu-link {display: none; }
    #header #menu {display: none;}
    
    #boxpainel {height: auto; margin: 0 0 20px 0;}
    
    #inicio-content #conteudo .boxempresa .desc {width: 65%;}
    
    #inicio-content #conteudo .boxcalendario .desc {width: 91.7%; margin: 27px 0 0 15px;}
        
    #inicio-content .boxprodutos .bgprod {width: 100%; max-width: inherit; height: auto; margin: 27px auto; display: table; float: none;}
    #inicio-content .boxprodutos .bgprod .tl {width: 91.7%; margin-left: 15px;}
    #inicio-content .boxprodutos .bgprod .tl .bnt {margin-right: 0;}    
    #inicio-content .boxprodutos .bgprod li a .imgPrincipal {height: 100%;}
    #inicio-content .boxprodutos .bgprod li {width: 30.2%; margin-bottom: 20px;}
    
    #produtos-content #conteudo .boxprod .cat .imgPrincipal {
    width: 370px;
    height: 258px;
    display: inline-block;
    float: left;
    margin: 0 0 0 0;
    overflow: hidden;
    
        
}

#produtos-content #conteudo .boxprod .cat .txtCat { width: 362px;}
    
    /**/    
    #empresa-content #conteudo .boxconheca .desc {width: 95%; text-align: justify;}
    #empresa-content #conteudo .boxconheca .desc .tl {width: 100%;max-width: 350px;min-height: 60px;display: block;float: none;margin: 0 auto;font-size: 48px;}
    
    /**/    
    #produtos-content .link { width: 100%; background-size: contain;}
    #produtos-content #conteudo .boxprod .cat .tltCat {width: 49%;}
    #produtos-content #conteudo .boxprod .cat .produtext {
    width: 100%;
}
                
    /**/
    #noticias-content #conteudo {width: 97%;}
    
    #noticias-content #conteudo .lista li {width: 45.7%; min-height: 130px; height: auto; float: left; margin: 0 2% 38px 2%;}
    #noticias-content #conteudo .lista li a .imgPrincipal {width: 43%;}
    #noticias-content #conteudo .lista li a .nome {width: 53%; min-width: inherit;}
    
    /**/
    #noticia-content #conteudo {width: 97%;}
    
    #noticia-content #conteudo .txt {width: 100%; margin-left: 0;}
    #noticia-content #conteudo .txt .imgPrin {width: 42%;}
}

/*CELULAR HORIZONTAL E TABLET VERTICAL*/
@media screen and (min-width: 480px) and (max-width: 767px) {
    #header #contHeader .maislogos {display: none;}
    
    #header #contHeader .navsup {display: none;}
    #header #navigation {display: none;}
    
    #header #contHeader {background: none;}
    #header #contHeader .logo {width: 100%;max-width: 450px;display: block;float: none;margin: 53px auto 0 auto;}
    #header #contHeader .navsup {display: none;}
    #header #boxnav #navigation {display: none;}
        
    #header .header-menu-link {width: 95px; height: 29px; line-height: 29px; display: block; float: left; margin: 22px 0 0 3%; font-size: 22px; color: #FFFFFF;}
    #header .header-menu-link .seta {width: 28px; height: 22px; float: left; margin: 3px 11px 0 0; background: url(../images/png/setamenu.png) no-repeat;}
    #header .header-menu-link:hover .seta {background-position: -28px 0;}
    #header .header-menu-link:hover {color: #F8FC00;} 
       
    #header #menu {width: 100%; height: auto; float: left; margin-top: 19px; display: none; position: relative; z-index: 2;}
    #header #menu li {width: 100%; height: 36px; float: left; background: #ce9434;}
    #header #menu li a {height: 36px; line-height: 36px; padding-left: 16px; display: block; font-size: 15px; color: #FFF;}
    #header #menu li a:hover {color: #F8FC00;}
    
    #header .menu-fixo {display: none;}
    
    #footer #meio .box {width: 97%; margin: 24px 0 0 3%;}
    #footer #meio .box .tel {width: 100%; }
    #footer #meio .box .end {width: 100%; }
    #footer #meio .box .copy {width: 100%;}
    
    /**/
    
    #boxpainel {height: auto; margin: 0 0 20px 0;}   
    
    .callbacks_nav {top: 26%!important;} 
    
    #inicio-content #conteudo .boxempresa {width: 100%; max-width: 300px; height: 320px; display: block; float: none; margin: 25px auto; overflow: hidden;}
    #inicio-content #conteudo .boxempresa .tl {width: 97%; font-size: 30px;}
    #inicio-content #conteudo .boxempresa .sub {width: 300px;}
    #inicio-content #conteudo .boxempresa .desc {width: 180px; height: 200px;}
    #inicio-content #conteudo .boxempresa .bnt {margin: 20px auto;float: none;display: table;}
    
    #inicio-content #conteudo .boxcalendario {width: 100%; max-width: 300px; height: 272px; display: block; float: none; margin: 20px auto;}
    #inicio-content #conteudo .boxcalendario .tl {font-size: 60px;}
    #inicio-content #conteudo .boxcalendario .imgcalendario {display: none;}
    #inicio-content #conteudo .boxcalendario .desc {width: 91.7%; margin: 27px 0 0 15px;}
    #inicio-content #conteudo .boxcalendario .bnt {margin: 20px auto;float: none;display: table;}
    
    #inicio-content .boxprodutos .bgprod {width: 100%; max-width: 300px; height: auto; margin: 27px auto; display: table; float: none;}
    #inicio-content .boxprodutos .bgprod .tl {width: 91.7%; margin-left: 15px;}
    #inicio-content .boxprodutos .bgprod .tl .bnt {margin-right: 0;}    
    #inicio-content .boxprodutos .bgprod li {width: 96%; margin-bottom: 20px;}

    #inicio-content #conteudo .boxdicas {width: 100%; overflow: hidden;}
    #inicio-content #conteudo .boxdicas a {width: 100%;}
    #inicio-content #conteudo .boxdicas a .tl {margin-left: 0;}
    #inicio-content #conteudo .boxdicas a .sub {margin-left: 13px; font-size: 18px;}
    #inicio-content #conteudo .boxdicas a .bnt {margin-right: 13px;}
    
    /**/
    #servico-content .tlt #breadcrumb {display: none;}
    #servico-content #conteudo #imgs li {width: 44%;}
    
    /**/
    #erro-content .tlt #breadcrumb {display: none;}
    
    /**/
    #empresa-content #conteudo .textoPadrao #bg-i {height: auto; display: block; margin: 0 auto 24px auto; float: none;}
    #empresa-content .tlt {width: 95%;margin: 20px 0 20px 2%;font-size: 28px;}
    #empresa-content .tlt #breadcrumb {display: none;}
    #empresa-content #conteudo .boxconheca .desc {width: 98%; height: auto; margin: 15px 0 25px 7px; text-align: justify;}   
    #empresa-content #conteudo .boxconheca .desc .tl {width: 100%;min-height: 60px;font-size: 47px;}
    #empresa-content #conteudo .boxconheca .desc .imgPrincipal {width: 100%;max-width: 300px;height: auto;float: none;display: block;margin: 20px auto;}
    
    /**/
    
    #produtos-content .tlt {width: 95%;margin: 20px 0 20px 2%;font-size: 28px;}
    #produtos-content .tlt #breadcrumb {display: none;}
    #produtos-content #conteudo {margin-top: 15px;}
    #produtos-content #conteudo .textoPadrao {width: 95%; margin: 9px auto 0 auto; text-align: left;}
    #produtos-content .link {width: 300px; height: 61px; display: table; float: none; margin: 15px auto; background-size: contain; background: url(../images/png/imgbaixe02.png) no-repeat;}
    #produtos-content #conteudo .boxprod {width: 95%; max-width: 300px; margin: 7px auto; float: none; display: block;}
    #produtos-content #conteudo .boxprod .cat {}
    #produtos-content #conteudo .boxprod .cat .imgPrincipal {width: 292px; height: 212px;}
    #produtos-content #conteudo .boxprod .cat .imgPrincipal02 {width: 100%;height: auto;display: block;float: none;margin: 0 auto 0 auto;overflow: hidden;}
    #produtos-content #conteudo .boxprod .cat .tltCat {width: 95%; height: auto; float: left; margin: 15px 0 0 7px;}
    #produtos-content #conteudo .boxprod .cat .txtCat {width: 95%; height: auto; float: left; margin: 15px 0 0 7px;}
    #produtos-content #conteudo .boxprod .cat .btn {float: right; margin-right: 13px; margin-bottom: 25px;}
    
    #produtos-content #conteudo .boxprod .prod {height: auto;width: 100%;}
    #produtos-content #conteudo .boxprod .prod {
    width: 100%;
    max-width: 441px;
    height: 261px;
    display: table;
    float: none!important;
    margin: 0 auto 32px auto;
    padding-bottom: 36px;
    /* background: #F3F3F3; */
}

    /**/
    #noticias-content #conteudo {width: 97%;}
    
    #noticias-content #conteudo .lista {margin-top: 20px;}
    #noticias-content #conteudo .lista li {width: 28.8%; height: 190px; float: left; margin: 0 2% 38px 2%;}
    #noticias-content #conteudo .lista li a .nome {width: 100%; min-width: inherit;}
    
    #noticias-content .tlt #breadcrumb {display: none;}
    
    /**/
    #noticia-content #conteudo {width: 97%;}
        
    #noticia-content #conteudo .txt {width: 100%; margin-left: 0;}
    #noticia-content #conteudo .txt .imgPrin {width: 55%;}
    #noticia-content #conteudo .txt .tlt2 {width: 100%;}
        
    #noticia-content .tlt #breadcrumb {display: none;}    
    
    /**/    
    #contato-content .tlt #breadcrumb {display: none;}
    #contato-content #conteudo .vForms1 {width: 60.2%;display: block;float: none;margin: 20px auto;}

}

@media screen and (min-width: 667px) and (max-width: 767px) {
    /**/
    #noticias-content #conteudo .lista li {width: 45.7%; min-height: 130px; height: auto; float: left; margin: 0 2% 38px 2%;}
    #noticias-content #conteudo .lista li a .imgPrincipal {width: 43%;}
    #noticias-content #conteudo .lista li a .nome {width: 53%; min-width: inherit;}
    
    /**/
    #produtos-content #conteudo .boxprod {width: 100%; max-width: inherit; margin: 7px auto; float: none; display: block;}
    #produtos-content #conteudo .boxprod .cat .tltCat {width: 49%; float: right;}
    #produtos-content #conteudo .boxprod .cat .txtCat {width: 49%; float: right;}

    #produtos-content #conteudo .boxprod .cat .produtext {
    width: 100%;
    text-align: center;
}
    
    /**/
    #empresa-content #conteudo .textoPadrao #bg-i {width: 48%; display: inline-block; float: right; margin: 0 0 24px 24px;}
    
    /**/
    #inicio-content #conteudo .boxempresa {width: 48%; max-width: 460px; height: 320px; display: inline-block; float: left; margin: 25px auto; overflow: hidden;}
    
    #inicio-content #conteudo .boxcalendario {width: 48%; max-width: 460px; height: 272px; display: inline-block; float: right; margin: 25px auto;}
 
    #inicio-content .boxprodutos .bgprod {width: 100%; max-width: inherit;}
    #inicio-content .boxprodutos .bgprod li {width: 30.2%; margin-bottom: 20px;}
    #inicio-content .boxprodutos .bgprod li a .imgPrincipal {height: 100%;}
    #inicio-content .boxprodutos .bgprod li a .nome {font-size: 19px;}
    
   
}

@media screen and (min-width: 600px) and (max-width: 767px) {
    #inicio-content #conteudo .boxface {width: 48%; height: auto;}
    #inicio-content #conteudo .boxface .imgface {margin-bottom: 2%;}
    
    #inicio-content #conteudo .boxdicas {width: 48%; height: auto;}
    #inicio-content #conteudo .boxdicas a {height: auto;}
    /*#inicio-content #conteudo .boxdicas a .imgPrincipal {width: 97%;}*/
    
    /**/
    #servico-content #conteudo #imgs li { width: 19%;} 
}

/*CELULAR VERTICAL*/
@media screen and (min-width: 320px) and (max-width: 479px) {
    #boxpainel02 {width: 100%; height: 123px; display: inline-block; float: left; margin: 18px 0 0 0;}
    #boxpainel02 #owl-demo .item {width: 100%; display: inline-block; float: left; margin: 0 0 0 0;}
    #bgprodutos {height: 953px; margin: 1093px 0 0 0; border-top: 5px solid #BBB; border-bottom: 5px solid #BBB; background: url(../images/jpg/imgprodutos02.jpg) repeat;}
    
    #header #contHeader .logo {width: 280px;display: block;margin: 53px auto 0 auto;float: none;}
    #header #contHeader .navsup {display: none;}
    #header #boxnav #navigation {display: none;}
        
    #header .header-menu-link {width: 95px; height: 29px; line-height: 29px; display: block; float: left; margin: 22px 0 0 3%; font-size: 22px; color: #FFFFFF;}
    #header .header-menu-link .seta {width: 28px; height: 22px; float: left; margin: 3px 11px 0 0; background: url(../images/png/setamenu.png) no-repeat;}
    #header .header-menu-link:hover .seta {background-position: -28px 0;}
    #header .header-menu-link:hover {color: #F8FC00;}    
    #header #menu {width: 100%; height: auto; float: left; margin-top: 19px; display: none; position: relative; z-index: 2;}
    #header #menu li {width: 100%; height: 36px; float: left; background: #ce9434;}
    #header #menu li a {height: 36px; line-height: 36px; padding-left: 16px; display: block; font-size: 15px; color: #FFF;}
    #header #menu li a:hover {color: #F8FC00;}
    #header .menu-fixo {display: none;}
    
    #footer {width: 100%; min-height: 161px; margin: 0 auto;}
    #footer #meio {background: none;}    
    #footer #meio .box {width: 91.7%; display: inline-block; float: left; margin: 24px 0 0 15px;}
    #footer #meio .box .tel {width: 100%; height: 38px; font-size: 16px;}
    #footer #meio .box .tel i {font-size: 16px;}
    #footer #meio .box .end {width: 100%; height: 38px; font-size: 16px;}
    #footer #meio .box .copy {width: 100%; height: 38px; margin: 5px 0 0 0; font-size: 10px;}
    
    /**/
    
    #boxpainel {height: auto; margin: 0 0 20px 0;}
    
    .callbacks_nav {height: 36px!important; width: 21px!important; background: url("../images/png/seta2x.png") no-repeat!important;}
    .callbacks_nav:active {background-position: 0 -36px!important;}
    .callbacks_nav:hover {background-position: 0 -36px!important;}
    .callbacks_nav.next:active {background-position: -21px -36px!important;}
    .callbacks_nav.next {background-position: -21px 0!important;}
    .callbacks_nav.next:hover {background-position: -21px -36px!important;}    
    .callbacks_nav.prev:active {background-position: 0 -36px!important;}
    .callbacks_nav.prev:hover {background-position: 0 -36px!important;}
    
    #inicio-content #conteudo .boxempresa {width: 100%; max-width: 300px; height: 320px; display: block; float: none; margin: 25px auto; overflow: hidden;}
    #inicio-content #conteudo .boxempresa .tl {width: 97%; font-size: 30px;}
    #inicio-content #conteudo .boxempresa .sub {width: 300px;}
    #inicio-content #conteudo .boxempresa .desc {width: 180px; height: 200px;}
    #inicio-content #conteudo .boxempresa .bnt {margin: 20px auto;float: none;display: table;}
    #inicio-content #conteudo .boxcalendario {width: 100%; max-width: 300px; height: 272px; display: block; float: none; margin: 25px auto;}
    #inicio-content #conteudo .boxcalendario .tl {font-size: 60px;}
    #inicio-content #conteudo .boxcalendario .imgcalendario {display: none;}
    #inicio-content #conteudo .boxcalendario .desc {width: 91.7%; margin: 27px 0 0 15px;}
    #inicio-content #conteudo .boxcalendario .bnt {margin: 20px auto;float: none;display: table;}
    
    #inicio-content .boxprodutos .bgprod {width: 100%; max-width: 300px; height: auto; margin: 27px auto; display: table; float: none;}
    #inicio-content .boxprodutos .bgprod .tl {width: 91.7%; margin-left: 15px;}
    #inicio-content .boxprodutos .bgprod .tl .bnt {margin-right: 0;}    
    #inicio-content .boxprodutos .bgprod li {width: 96%; margin-bottom: 20px;}
    
    #inicio-content #conteudo .boxdicas {width: 100%; overflow: hidden;}
    #inicio-content #conteudo .boxdicas a {width: 100%;}
    #inicio-content #conteudo .boxdicas a .tl {margin-left: 0;}
    #inicio-content #conteudo .boxdicas a .sub {margin-left: 13px; font-size: 18px;}
    #inicio-content #conteudo .boxdicas a .bnt {margin-right: 13px;}
    
    /**/
    #noticias-content #conteudo {width: 97%;}
    
    #noticias-content #conteudo .lista {margin-top: 20px;}
    #noticias-content #conteudo .lista li {width: 45.7%; height: 200px; float: left; margin: 0 1.9% 38px 2.4%;}
    #noticias-content #conteudo .lista li a .nome {width: 100%; min-width: 140px; font-size: 15px;}
    
    #noticias-content .tlt #breadcrumb {display: none;}
    
    /**/
    #servico-content #conteudo #imgs li { width: 43%;}
    #servico-content #conteudo {width: 97%;}
    #servico-content .tlt {font-size: 34px;}
    #servico-content .tlt #breadcrumb {display: none;}

    /**/
    #noticia-content #conteudo {width: 97%;}
    #noticia-content #conteudo .tlt {font-size: 41px;}
    
    #noticia-content #conteudo .txt {width: 100%; margin-left: 0;}
    #noticia-content #conteudo .txt .imgPrin {width: 100%; float: none; display: block; margin: 2px auto 16px auto;}
    #noticia-content #conteudo .txt .tlt2 {width: 100%;}
        
    #noticia-content .tlt #breadcrumb {display: none;}
    
    /**/
    
    #erro-content .tlt {width: 95%; margin: 27px auto 0 7px;}
    #erro-content .tlt #breadcrumb {display: none;}
    #erro-content #conteudo {margin-top: 15px;}
    #erro-content #conteudo .textoPadrao {width: 95%; margin: 9px auto 0 auto; text-align: left;}
    
    /**/
    
    #empresa-content .tlt {width: 95%;margin: 20px 0 0 2%;font-size: 28px;}
    
    #empresa-content .tlt #breadcrumb {display: none;}
    #empresa-content .tlt .bg {width: 280px;}
    
    #empresa-content #conteudo {margin-top: 15px;}
    #empresa-content #conteudo .textoPadrao {width: 95%; margin: 9px auto 0 auto; text-align: justify;}
    #empresa-content #conteudo .textoPadrao #bg-i {height: auto; display: block; margin: 0 auto 24px auto; float: none;}    
    #empresa-content #conteudo .boxconheca {height: auto;}
    #empresa-content #conteudo .boxconheca .imgPrincipal {width: 310px; height: 205px; float: left; margin: 15px 0 0 5px;}
    #empresa-content #conteudo .boxconheca .tl {width: 100%; height: auto; margin: -25px 0 0 0;}
    #empresa-content #conteudo .boxconheca .desc {width: 95%; height: auto; margin: 15px 0 25px 7px; text-align: justify;}   
    #empresa-content #conteudo .boxconheca .desc .tl {width: 100%;min-height: 60px;font-size: 47px;}
    #empresa-content #conteudo .boxconheca .desc .imgPrincipal {width: 100%;max-width: 300px;height: auto;float: none;display: block;margin: 20px auto;}

    #empresa-content #conteudo .boxsobre {height: auto;}
    #empresa-content #conteudo .boxsobre .imgPrincipal {width: 310px; height: 205px; float: left; margin: 15px 0 0 5px;}
    
    #empresa-content #conteudo .boxsobre .tl {width: 95%; height: auto; margin: 15px 0 0 7px;}
    #empresa-content #conteudo .boxsobre .desc {width: 95%; height: auto; margin: 15px 0 25px 7px;}
    
    /**/
    
    #contato-content .tlt {width: 95%; margin: 27px auto 0 7px;}
    #contato-content .tlt #breadcrumb {display: none;}
    #contato-content #conteudo {margin-top: 15px;}
    #contato-content #conteudo .vForms1 {width: 95%; height: auto; display: inline-block; float: left; margin: 34px auto 0 7px;}
    #contato-content #conteudo .vForms1 .campo {width: 87.6%; margin-left: 0;}
    #contato-content #conteudo .vForms1 textarea {height: 75px;}
    #contato-content #conteudo .boxfale {width: 95%; height: auto; display: inline-block; float: left; margin: 25px 0 0 7px;}
    #contato-content #conteudo .boxmapa {width: 100%; display: inline-block; float: left;}
    
    /**/    
    #produtos-content .tlt {width: 95%;margin: 20px 0 0 2%;font-size: 28px;}
    #produtos-content .tlt #breadcrumb {display: none;}
    #produtos-content #conteudo {margin-top: 15px;}
    #produtos-content #conteudo .textoPadrao {width: 95%; margin: 9px auto 0 auto; text-align: left;}
    #produtos-content .link {width: 300px; height: 61px; display: inline-block; float: left; margin: 15px 0 0 0; background-size: contain; background: url(../images/png/imgbaixe02.png) no-repeat;}
    #produtos-content #conteudo .boxprod {width: 95%; max-width: 300px; margin: 7px auto; float: none; display: block;}
    #produtos-content #conteudo .boxprod .cat {height: auto;}
    #produtos-content #conteudo .boxprod .cat .imgPrincipal {width: 292px; height: 212px;}
    #produtos-content #conteudo .boxprod .cat .imgPrincipal02 {width: 292px; height: 212px;}    

    #produtos-content #conteudo .boxprod .cat .tltCat {width: 95%; height: auto; float: left; margin: 15px 0 0 7px;}
    #produtos-content #conteudo .boxprod .cat .txtCat {width: 95%; height: auto; float: left; margin: 15px 0 0 7px;}
    #produtos-content #conteudo .boxprod .cat .btn {float: right; margin-right: 13px; margin-bottom: 25px;}
    
    #produtos-content #conteudo .boxprod .prod {height: auto;width: 100%;}
}