@media all and ( max-width: 362px ){
    .hide_xs{
        display: none;
    }
    .hide_md,
    .hide_lg,
    .hide_table_lg{
        display: block;
    }
    .hide_table_xs{
        display: none;
    }
    header {
        padding: 10px;
    }
    header img {
        width: 100px;
        height: 4vh;
    }
    header .redes-sociais {
        width: 150px;
    }
    header .redes-sociais a {
        font-size: 20px;
    }
    header .redes-sociais span {
        display: none;
    }
    header .nav-login {
        display: none;
    }
    header .header_menu{
        display: block;
    }
    header .header_menu:focus{
        outline: none;
    }
    header #modal_header_menu,
    header #modal-login2{
        width: 96%;
    }
    header .modal_header_menu2 {
        width: 100% !important;
    }
    header .modal_header_menu a,
    header .modal_header_menu2 a{
        color: #6b6b6b;
        font-size: 15px;
    }
    header .modal_header_menu a i.fa,
    header .modal_header_menu2 a i.fa{
        font-size: 20px;
        transition: color .3s;
    }
    header .modal_header_menu a span.badge-cart,
    header .modal_header_menu2 a span.badge-cart{
        position: relative;
        top: -15px;
        left: -16px;
        padding: 5px 6px;
        border: 1px solid #F17B1A;
        border-radius: 50%;
        color: #F5F5F5;
        background-color: #F17B1A;
    }
    header .modal_header_menu a span.valor-carrinho,
    header .modal_header_menu2 a span.valor-carrinho{
        position: relative;
        left: -20px;
        font-weight: bold;
    }
    header .modal_header_menu a.login_user,
    header .modal_header_menu2 a.login_user{
        font-weight: bold;
        margin-left: 35px;
        font-size: 16px;
    }
    header .modal_header_menu .filtros h4,
    header .modal_header_menu2 .filtros h4{
        color: #6b6b6b;
    }
    header .modal_header_menu .filtros .shop-catigory,
    header .modal_header_menu2 .filtros .shop-catigory{
        margin-bottom: 20px;
    }
    header #modal-login2 .modal-body .close{
        position: relative;
        background-color: #F17B1A;
        color: #F5F5F5;
        top: -14px;
        left: 13px;
        padding: 0 5px 5px 5px;
        border-top-right-radius: 3px;
    }
    header #modal-login2 .modal-body h3{
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
        color: #6b6b6b;
    }
    header #modal-login2 .modal-body form{
        width: 70%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    header #modal-login2 .modal-body form .button-box{
        width: 100%;
        height: auto;
    }
    header #modal-login2 .modal-body form .button-box .btn-form-modal{
        width: 49%;
        height: 40px;
        border: none;
        outline: none;
    }
    header #modal-login2 .modal-body form .button-box .btn-login-orange{
        background-color: #F17B1A;
        color: #F5F5F5;
    }
    header #modal-login2 .modal-body form .button-box .btn-login-orange:hover{
        background-color: #cf6916;
    }
    header #modal-login2 .modal-body p{
        font-size: 12px;
    }
    main {
        flex-direction: column;
    }
    main .filtros {
        width: 100%;
    }
    main .filtros .div-form input {
        height: 30px;
        font-size: 14px;
    }
    main .filtros .div-form button {
        height: 30px;
    }
    main .produtos{
        width: 100%;
    }
    main .produtos .col_small{
        width: 50%;
    }
    main .produtos .col_small .img_card_header{
        padding: 0;
        height: 180px !important;
    }
    main .produtos .col_small a h4{
        font-size: 16px;
    }
    main .produtos .card .card-body p{
        font-size: 19px;
    }
    footer .box-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    footer .box-footer .footer-info,
    footer .box-footer .footer-endereco,
    footer .box-footer .footer-midias{
        width: 100%;
    }
    main .media{
        max-width: 331px;
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    main .media .media-img,
    main .media .media-body {
        max-width: 331px;
        width: 100% !important;
        height: 100%;
    }
    main .media .media-body h2{
        font-size: 24px;
    }
    main .media .btn-submit-prod{
        position: relative;
        top: 12px;
    }
    main .media .btn-produtos {
        margin-top: 15px;

    }
    main table tbody div.box-car{
        display: flex;
        flex-direction: row;
    }
    main table tbody div.box-car img {
        width: 70px;
        height: 100%;
    }
    main table tbody div.box-car .box-car-body {
        font-size: 12px;
    }
    main table tbody div.qtde_card{
        flex-direction: row;
        align-items: center;
    }
    table tbody tr td div.box-valores{
        height: 60px;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .table_small tr th,
    .table_small tr td{
        display: inline-block;
        width: 100%;
    }
    thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		/* position: absolute; */
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
    td:nth-of-type(1):before { content: "Produto"; font-weight: bold; font-size: 12px; }
	td:nth-of-type(2):before { content: "Quantidade"; font-weight: bold; font-size: 12px; }
	td:nth-of-type(3):before { content: "Valor Unitário"; font-weight: bold; font-size: 12px; }
	td:nth-of-type(4):before { content: "Sub-total"; font-weight: bold; font-size: 12px; }
}

@media all and ( max-width: 502px ) and ( min-width: 363px ){
    .hide_xs{
        display: none;
    }
    .hide_md,
    .hide_lg,
    .hide_table_lg{
        display: block;
    }
    .hide_table_xs{
        display: none;
    }
    header {
        padding: 10px;
    }
    header img {
        width: 100px;
        height: 4vh;
    }
    header .redes-sociais {
        width: 150px;
    }
    header .redes-sociais a {
        font-size: 20px;
    }
    header .redes-sociais span {
        display: none;
    }
    header .nav-login {
        display: none;
    }
    header .header_menu{
        display: block;
    }
    header .header_menu:focus{
        outline: none;
    }
    header #modal_header_menu,
    header #modal-login2{
        width: 96%;
    }
    header .modal_header_menu2 {
        width: 100% !important;
    }
    header .modal_header_menu a,
    header .modal_header_menu2 a{
        color: #6b6b6b;
        font-size: 15px;
    }
    header .modal_header_menu a i.fa,
    header .modal_header_menu2 a i.fa{
        font-size: 20px;
        transition: color .3s;
    }
    header .modal_header_menu a span.badge-cart,
    header .modal_header_menu2 a span.badge-cart{
        position: relative;
        top: -15px;
        left: -16px;
        padding: 5px 6px;
        border: 1px solid #F17B1A;
        border-radius: 50%;
        color: #F5F5F5;
        background-color: #F17B1A;
    }
    header .modal_header_menu a span.valor-carrinho,
    header .modal_header_menu2 a span.valor-carrinho{
        position: relative;
        left: -20px;
        font-weight: bold;
    }
    header .modal_header_menu a.login_user,
    header .modal_header_menu2 a.login_user{
        font-weight: bold;
        margin-left: 35px;
        font-size: 16px;
    }
    header .modal_header_menu .filtros h4,
    header .modal_header_menu2 .filtros h4{
        color: #6b6b6b;
    }
    header .modal_header_menu .filtros .shop-catigory,
    header .modal_header_menu2 .filtros .shop-catigory{
        margin-bottom: 20px;
    }
    header #modal-login2 .modal-body .close{
        position: relative;
        background-color: #F17B1A;
        color: #F5F5F5;
        top: -14px;
        left: 13px;
        padding: 0 5px 5px 5px;
        border-top-right-radius: 3px;
    }
    header #modal-login2 .modal-body h3{
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
        color: #6b6b6b;
    }
    header #modal-login2 .modal-body form{
        width: 70%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    header #modal-login2 .modal-body form .button-box{
        width: 100%;
        height: auto;
    }
    header #modal-login2 .modal-body form .button-box .btn-form-modal{
        width: 49%;
        height: 40px;
        border: none;
        outline: none;
    }
    header #modal-login2 .modal-body form .button-box .btn-login-orange{
        background-color: #F17B1A;
        color: #F5F5F5;
    }
    header #modal-login2 .modal-body form .button-box .btn-login-orange:hover{
        background-color: #cf6916;
    }
    header #modal-login2 .modal-body p{
        font-size: 12px;
    }
    main {
        flex-direction: column;
    }
    main .filtros {
        width: 100%;
    }
    main .filtros .div-form input {
        height: 30px;
        font-size: 14px;
    }
    main .filtros .div-form button {
        height: 30px;
    }
    main .produtos{
        width: 100%;
    }
    main .produtos .col_small{
        width: 50%;
    }
    main .produtos .col_small .img_card_header{
        padding: 0;
        height: 180px !important;
    }
    main .produtos .col_small a h4{
        font-size: 16px;
    }
    main .produtos .card .card-body p{
        font-size: 19px;
    }
    footer .box-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    footer .box-footer .footer-info,
    footer .box-footer .footer-endereco,
    footer .box-footer .footer-midias{
        width: 100%;
    }
    main .media{
        max-width: 501px;
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    main .media .media-img,
    main .media .media-body {
        max-width: 501px;
        width: 100% !important;
        height: 100%;
    }
    main .media .media-img .img-carousel {
        width: 100%;
        height: 20%;
        padding: 5px;
        overflow: auto;
    }
    main .media .media-img .img-carousel ul {
        width: 100%;
        height: 75px;
        list-style: none;
        display: flex;
        justify-content: flex-start;
    }
    main .media .media-img .img-carousel ul li img {
        width: 90px;
    }
    main .media .media-body h2{
        font-size: 24px;
    }
    main .media .btn-submit-prod{
        position: relative;
        top: 0px;
    }
    main .media .btn-produtos {
        margin-top: 15px;

    }
    main table tbody div.box-car{
        display: flex;
        flex-direction: row;
    }
    main table tbody div.box-car img {
        width: 70px;
        height: 100%;
    }
    main table tbody div.box-car .box-car-body {
        font-size: 12px;
    }
    main table tbody div.qtde_card{
        flex-direction: row;
        align-items: center;
    }
    table tbody tr td div.box-valores{
        height: 60px;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .table_small tr th,
    .table_small tr td{
        display: inline-block;
        width: 100%;
    }
    thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		/* position: absolute; */
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
    td:nth-of-type(1):before { content: "Produto"; font-weight: bold; font-size: 12px; }
	td:nth-of-type(2):before { content: "Quantidade"; font-weight: bold; font-size: 12px; }
	td:nth-of-type(3):before { content: "Valor Unitário"; font-weight: bold; font-size: 12px; }
	td:nth-of-type(4):before { content: "Sub-total"; font-weight: bold; font-size: 12px; }
}