/*
#00 - Geral
#01 - Header
#02 - Categorias Destaque
#03 - Produto
#04 - Contactos
#05 - Área Pessoal
#06 - Call To Action Icons
#07 - Homeapege Marcas
#08 - Marcas
#09 - Dados Pessoais
#10 - Dados de Entrega
*/

@media only screen and (max-width: 991px) {
   /* Force table to not be like tables anymore */
   table.mobile-table, .mobile-table thead, .mobile-table tbody, .mobile-table th, .mobile-table td, .mobile-table tr {
      display: block !important;
      text-align: left !important;
   }

   /* Hide table headers (but not display: none;, for accessibility) */
   .mobile-table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
   }

   .mobile-table tr {
      border-bottom: 1px solid #e62e25;
      margin: 0 0 1rem 0;
   }

   .mobile-table tr:nth-child(odd) {
      /*background: #FFF;*/
   }

   .mobile-table td {
      padding-top: 0px !important;
      /* Behave  like a "row" */
      border: none;
      /*border-bottom: 1px solid #eee;*/
      position: relative;
      padding-left: 30%;
   }

   .mobile-table td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 0;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
   }

   .mobile-table td .cart-product-thumbnail-name{
      width: 140px !important;

   }

   .mobile-table td.cart-product-price{
      height: 120px !important;
   }

   /*
   Label the data
   You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
   */
   .mobile-table td:nth-of-type(1):before { content: ""; }
   .mobile-table td:nth-of-type(2):before { content: "Produto"; }
   .mobile-table td:nth-of-type(3):before { content: "Quantidade"; }
   .mobile-table td:nth-of-type(4):before { content: "Total"; }
   .mobile-table td:nth-of-type(5):before { content: "Remover"; }

   .magnify > .magnify-lens {
      display: none !important;
   }

   /* #00 - Geral */
   .mobile-hide{
      display: none !important;
   }
   .desktop-hide{
      display: block;
   }
   .mobile-custom-6{
      width: 50% !important;
   }
   .mobile-custom-4{
      width: 33% !important;
   }
   /* #01 - Header */
   header #header-wrap{
      border-bottom: 1px solid #e62e25 !important;
   }
   #header #logo > a{
      margin-top: 0px !important;
   }
   #header #header-wrap #logo a > img{
      margin-top: 5px !important;
      height: 60px !important;
   }
   .pesquisa{
      width: 150px !important;
   }
   /* #02 - Categorias Destaque */
   .shop-category-box{
      margin-bottom: 40px;
   }

   /* #03 - Produto */
   .mobile-adicionar-btn{
      margin-top: 25px !important;
   }
   .product-image > img{
      margin: auto;
   }
   /* #04 - Contactos */
   .mobile-contactos-form{
      margin-top: 40px;
   }

   /* #05 - Área Pessoal */
   .registar-box{
      margin-top: 40px;
   }

   /* #06 - Call To Action Icons */
   .icon-box{
      margin-bottom: 20px;
   }

   /* #07 - Homeapege Marcas */
   .owl-carousel .owl-item img{
      width: auto !important;
      margin: auto;
      max-width: 100%;
      max-height: 120px;
   }

   /* #08 - Marcas */
   .marcas-mobile > a > img{
      width: 100%;
   }

   /* #09 - Dados Pessoais */
   .alterarpassword-box{
      margin-top: 40px;
   }

   /* #10 - Dados de Entrega */
   .totalcarrinho-dadosentrega{
      margin-top: 40px;
   }
}