@media (min-width: 600px) {

    .menu-mobile {display: none;}

    .btn {text-align: center; font-weight: bold; cursor: pointer; border-radius: 5px; border: none; width: 250px; margin: 20px 0; display: block; padding: 5px;}

    .btn_large {width: 100%; }
    .btn_medium {width: 50%; }
    .btn_small {width: 25%; }

    .btn_right {margin-left: auto;}

    .btn_green {color: white;background-color: #007F00;}
    .btn_green:hover {background-color: darkgreen;}
    .btn_yellow {color: darkgreen;background-color: #FFFF00;}
    .btn_yellow:hover {background-color: #e5e619;}
    .btn_blue {color: white;background-color: #002776;}
    .btn_blue:hover {background-color: #0c2b6a;}
    .btn_green_yellow {color: #FFFF00;background-color: #007F00;}
    .btn_green_yellow:hover {color: #007F00; background-color: #FFFF00;}
    .btn_green_yellow {color: darkgreen;background-color: #FFFF00;}
    .btn_green_yellow:hover {color: #FFFF00 ;background-color: #007F00;}

    * {line-height: 1.5;font-family: 'Roboto', sans-serif;font-size:14px; margin: 0; padding: 0;color:#333;overflow-wrap: break-word;}
    h1, h2, h3, h4, h5, h6 {font-size: 20px; color: darkgreen;}
    a {text-decoration: none;}
    body {background:#EEE}

    header {background-image:url("/files/header.webp");background-blend-mode: lighten;padding:5px;}
    header a {display:block; text-align:center} 
    header a img {padding:5px;opacity: 1}

    .barra-verde {background-color:#007F00;}
    .barra-amarela {background-color:#FFFF00; margin-bottom: 20px;}
    .barra-verde, .barra-amarela {width:100%;height:auto; box-shadow: 0 2px 2px 2px #AAA;}
    .barra-verde nav, .barra-amarela nav {text-align:center;}
    .barra-verde nav a, .barra-amarela nav a {display:inline-block;text-align:center;padding:5px 20px;font-weight:900; color:white;}
    .barra-verde nav a i.fa-solid {color: white;}
    .barra-amarela nav a, .barra-amarela nav a i.fa-solid {color:darkgreen;}
    .barra-verde nav a:hover {background:darkgreen}
    .barra-amarela nav a:hover {background:#e5e619}

    i.fa-solid.fa-p {transform: rotate(270deg)}


    main{padding:25px;width: 90%;background:white; margin:2px auto 20px auto;border-radius: 5px;overflow:hidden; box-shadow: 2px 2px 2px 2px #CCC;overflow-wrap: break-word;}
    h1, h2 {font-size:25px}

    nav.breadcrumb ol {list-style-type: none; display: block; width: 90%; margin:0 auto;}
    nav.breadcrumb ol li {display: block;float:left;padding:0 10px}
    nav.breadcrumb ol li * {font-size: small;}
    nav.breadcrumb ol li a span, nav.breadcrumb ol li span {border-left: solid 2px #CCC;padding:0 3px;}

    div.fake-breadcrumb{height: 21px;}

    article.product-card:hover {background: url("/files/header.webp") no-repeat center center;background-color: rgba(255, 255, 255, 0.8);background-blend-mode: overlay;background-size: cover;}
    article.product-card {width:21%;height:460px;padding:20px 2% 20px 2%;display:block;float:left;}
    article.product-card figure {height: 300px;background-color: white; width: 241px; text-align: center;}
    article.product-card figure img {width: 100%; background-color: white; margin: auto;}
    article.product-card div.product-details {height: 100px;}
    article.product-card div.product-details h3 {height: 120px;}
    article.product-card div.product-details div.product-price span {display: block;}
    article.product-card div.product-details div.product-price span.price-old {color:#666; text-decoration: line-through; font-size:15px;}
    article.product-card div.product-details div.product-price span.price-current {font-size:20px;}

    section.product-container {display: block;border-bottom: solid 2px #CCC;}

    article.product-gallery {display: block;width: 64%;clear: both;}
    article.product-gallery div.thumbnails {float: left;width: 20%;}
    article.product-gallery div.thumbnails a img {width: 90%; padding: 5px 5%;}
    article.product-gallery div.thumbnails a img#selected {background-color: #CCC;}
    article.product-gallery a img {width: 90%; margin: 5px 5%;}
    article.product-gallery div.destaque {display: block;float: left;width: 80%;}
    article.product-gallery div.destaque img {width: 90%; margin: 5px 5%;}

    aside.product-details {display: block;float: left;width: 34%;}
    aside.product-details h1 {color:darkgreen}
    aside.product-details p.price-old {color:#666;text-decoration: line-through;display: block;float: left;width: 50%; text-align: center;}
    aside.product-details p.price-current {background-color:#FFFF00;color:darkgreen;font-weight: 900;display: block;float: left;width: 50%; text-align: center}
    aside.product-details p.parcelas {display: block;width: 100%; text-align: center;clear: both; padding: 15px 0;}
    aside.product-details p.frete {background-color: #000; color: #fff; display: block;width: 100%; text-align: center;clear: both; font-size: 14px;}
    aside.product-details p.description {font-size: 14px; text-align: justify;padding: 15px;}
    aside.product-details form fieldset.size {padding: 5px; margin: 5px; border-radius: 3px;}
    aside.product-details form fieldset.size legend {font-size: 14px}
    aside.product-details form fieldset.size div {float: left;width: 16.6%;}
    aside.product-details form fieldset.size div input{display: none;}
    aside.product-details form fieldset.size div input[type="radio"]:checked + label {background-color: darkgreen; color: #fff; font-weight: bold; border-color: darkgreen;}
    aside.product-details form fieldset.size div label{ border: solid 1px #999;display: block;border-radius: 3px;background-color: #d8d8d8;text-align: center;width: 90%; line-height: 40px; margin: 5px 5%;}
    aside.product-details form fieldset.size div label:hover {cursor: pointer; border: solid 1px #000;}
    aside.product-details form .quantity {display: block; float: left; width: 39%; padding: 5px 5%; margin-top: 25px;}
    aside.product-details form .add-to-card {font-weight: bold; color: white; cursor: pointer; border-radius: 5px; border: none; background-color: #007F00; width: 100%; margin: 20px 0; display: block; padding: 5px;}
    aside.product-details form .add-to-card:hover {background-color: darkgreen;}
    aside.product-details form .btn_carrinho {text-shadow: 1px 1px darkgreen;text-align: center; font-weight: bold; color: white; cursor: pointer; border-radius: 5px; border: none; background-color: #FFFF00; width: 100%; margin: 20px 0; display: block; padding: 5px;}
    aside.product-details form .btn_carrinho:hover {background-color: #e5e619;}

    section.related-products {clear: both;display: block; width: 100%;}

    table *, div.cart-resume * {font-size: 14px;}
    table {width: 70%; float: left;}

    div.cart-resume * {line-height: 30px;}
    div.cart-resume {width: 25%; float: left; padding: 0 2%; border-left: dotted 1px #333;}
    .btn_checkout {text-align: center; font-weight: bold; color: white; cursor: pointer; border-radius: 5px; border: none; background-color: #007F00; width: 100%; margin: 20px 0; display: block; padding: 5px;}
    .btn_checkout:hover {background-color: darkgreen;}

    form.criar-conta {display: block; width: 60%; margin: 0 auto;}
    form.criar-conta fieldset {border: none; margin: 40px 0;}
    form.criar-conta fieldset legend {font-weight: bold; margin-bottom: 10px;}
    form fieldset div {margin: 20px 0;}
    form fieldset div.br label {display: block; margin-bottom: 10px;}
    form fieldset div.br input {display: block; width: 96%; border-radius: 0; border: solid 1px #999; line-height: 30px; padding: 0 2%;}
    form fieldset div select {display: block; width: 96%; border-radius: 0; border: solid 1px #999; line-height: 30px; padding: 0 2%; height: 30px;}

    form.entrar {width: 40%;}

    aside.profile-nav {display: block; width: 25%; float: left;}
    aside.profile-nav nav a {border-radius: 3px; display: block; width: 90%; padding: 10px 5%; border-bottom: dotted 1px #CCC; border-right: dotted 1px #CCC;}
    aside.profile-nav nav a.selected {background-color: #FEFEFE; text-indent: 10px; box-shadow: inset 1px 1px 1px #999;}
    aside.profile-nav nav a:hover {background-color: #EFEFEF;text-indent: 10px; box-shadow: 1px 1px 1px #999;}

    div.meus-dados {display: block; width: 70%; float: left; margin-left: 5%;}
    div.meus-dados fieldset { border: dotted 1px #666; border-radius: 3px; padding: 15px; margin-bottom: 20px;}
    div.meus-dados fieldset legend {padding: 0 5px;}
    div.meus-dados fieldset div {padding:4px;}
    .btn_edit_my_data {margin-top: -40px;}

    .float.left {float: left;}
    span.info {border-radius: 3px; border: solid 1px blue; color: darkblue; text-align: center; background-color: lightblue; display: block; width: 90%; margin: 10px 5%; padding: 5px;font-size: 14px; line-height: 16px;}
    span.success { border: solid 1px green; color: darkgreen; text-align: center; background-color: lightgreen; display: block; width: 95%; margin: 10px 0; padding: 5px 2.5%;font-size: 14px;}
    .info-text {font-size: 10px; color: #666;}

    .list_addresses_not_found * {text-align: center;}
    .list_addresses_not_found h3 {margin: 50px 0 25px 0;}
    .list_addresses_not_found .extra-add-address {margin: 25px auto;}

    .add-address {margin-left:auto; margin-top: -30px;}

    .cart-empty {margin-top: 40px;text-align: center;}
    table { border-collapse: collapse;}
    tbody tr.line-grey {background-color: #f9f9f9;}
    table.carrinho tfoot {background: #CCC;}

    input.cart-qnt {width: 60px; text-align: center; padding: 1px 5px; border: solid 1px #999; background: #FEFEFE; line-height: 30px;}
    input.cart_btn_submit, a.cart_btn_submit {width: 70px; padding: 2px 5px; border: solid 1px #999; background: #EFEFEF; cursor: pointer;}
    a.cart_btn_submit {padding: 4px 5px; margin-left: 3px;}
    .sub-cart-resume-calc {padding: 2px 5px; border: solid 1px #999; background: #EFEFEF; cursor: pointer;}
    .inp-cart-resume-cep {padding: 1px 5px; border: solid 1px #999; background: #FEFEFE;}

    .black-alert {display: block; text-align: center; width: 100%; background-color: #000; color: #fff; font-weight: bold;}
    .black-alert i.fa-solid {color: white;}

    h1 i.fas, h2 i.fas, h3 i.fas {color: darkgreen}

    .cart-resume h2 {font-size: 16px;}
    .cart-resume table {width: 100%;}
    td.money {text-align: right;}

    h2 i.fa-solid, h2 i.fa-regular {font-size: 25px; color: darkgreen;}

    .card-order {display: block; background: #C0C0C0;padding-top: 1px; border-top-left-radius: 10px; border-top-right-radius: 10px; margin-bottom: 15px;}
    .card-order h3 {margin: 14px 0 0 15px; line-height: 20px;}
    .card-order .created {display: block; margin-left: 15px; margin-bottom: 15px;}
    .card-order .row-prod-card {display: block;background: #EFEFEF; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);}
    .card-order .row-prod-card .row-prod img {display: block; height: 40px; float: left; margin: 3px;}
    .card-order .row-prod-card .row-prod b {display: block; line-height: 46px; float: left;}
    .card-order .row-prod-card .row-prod-ident {display: block; width: 10%; height: 46px; background: #FFF;float: left; border-bottom: solid 1px #FFF;}
    .card-order .row-prod-card .row-prod-item {display: block;width: 90%; height: 46px;float: left; border-bottom: dotted 1px #333;}

    .meus-dados-pedido .produtos h3, .meus-dados-pedido .entrega h3, .meus-dados-pedido .pagamento h3  {border-bottom: solid 1px #666; margin: 20px 0;}
    .meus-dados-pedido .produtos .cartao-produto {float: left; width: 33%;}
    .meus-dados-pedido .produtos .cartao-produto img {float: left; width: 41%; margin: 5px 2%;}
    .meus-dados-pedido .produtos .cartao-produto .info-produto {float: left; width: 50%;margin: 5px 2%; border-right: dotted 1px #666;}

    .meus-dados-pedido div div h4 {font-size: 18px;  margin: 10px 0;}

    .timeline {display: flex; float: left; width: 16.6%; text-align: center;align-items: center; line-height: 16px; font-size: 14px; height: 48px;}
    .timeline * {line-height: 14px; font-size: 14px;}
    .timeline, .timeline * {color: lightgray;}
    .timeline.first, .timeline.first * {color: green;}
    .timeline.active, .timeline.active * {color: navy; border: solid 1px navy; background: lightblue; border-radius: 3px;}
    .bar-total {display: block; width: 100%; height: 20px; border-radius: 10px; box-shadow: inset 2px 2px 2px #666; background: #C0C0C0; margin-top: 15px;}
    .bar-progress {display: block; width: 24%; height: 16px; border-radius: 10px; background: green; margin-top: -18px; margin-left: 2px; box-shadow: inset 2px 2px 5px lime; }

    .alert-black { display: block; width: 90%; margin: 10px auto; border-radius: 5px; border: solid 1px #000; color:black; background-color: #999; font-weight: 500; text-align: center; padding: 10px;}



    header {padding:5px 10px;}
    main{padding:25px;max-width: 1150px;min-width: 80%;background:white; margin:2px auto 20px auto;border-radius: 10px;overflow:hidden}
    nav.breadcrumb ol {list-style-type: none;display: block;max-width: 1200px;margin:20px auto;}
}