/*.................. MOBILE STYLES ..................................................*/

/* Dispositivos Desktop (Computadores, etc) */
@media only screen and (min-width: 1024px) {

    .version{

        position: absolute;

        top: 75%;

        font-size: 10pt;

    }

    .icon-menu-left{
        width: 1em !important;
    }

    ul {

        padding: 0;

        list-style-type: none;

    }

    #itens_navbar_left{
      cursor: pointer;
    }


      #menuToggle {

        display: flex;

        flex-direction: column;

        position: relative;

        top: 0px;

        left: 0px;

        z-index: 4;

        -webkit-user-select: none;

        user-select: none;

      }

      

      #menuToggle input

      {

        display: flex;

        width: 40px;

        height: 32px;

        position: absolute;

        cursor: pointer;

        opacity: 0;

        z-index: 2;

      }

      

      #menuToggle span

      {

        display: flex;

        width: 29px;

        height: 2px;

        margin-bottom: 5px;

        position: relative;

        background: #ffffff;

        border-radius: 3px;

        z-index: 1;

        transform-origin: 5px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    opacity 0.55s ease;

      }

      

      #menuToggle span:first-child

      {

        transform-origin: 0% 0%;

      }

      

      #menuToggle span:nth-last-child(2)

      {

        transform-origin: 0% 100%;

      }

      

      #menuToggle input:checked ~ span

      {

        opacity: 1;

        transform: rotate(45deg) translate(-3px, -1px);

        background: #36383F;

      }

      #menuToggle input:checked ~ span:nth-last-child(3)

      {

        opacity: 0;

        transform: rotate(0deg) scale(0.2, 0.2);

      }

      

      #menuToggle input:checked ~ span:nth-last-child(2)

      {

        transform: rotate(-45deg) translate(0, -1px);

      }

      

      #menu

      {

        position: absolute;

        width: 25vw;

        height: 100vh;

        box-shadow: 0 0 10px #85888C;

        margin: -50px 0 0 -50px;

        padding: 40px;

        padding-top: 75px;

        background-color: #FFFFFF;

        transform-origin: 0% 0%;

        transform: translate(-100%, 0);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

      }

      

      #menu li

      {

        padding: 10px 0;

        transition-delay: 2s;

      }

      

      #menuToggle input:checked ~ ul

      {

        transform: none;

      }



      .icon-price{

        top: 18px;

        left: 42px;

    }

    

}

/* Dispositivos Mobile Maiores (Tablets, ex.: iPad Pro) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {



    .img-status-pedido{

        width: 15vh;

    }  



    .img-produto{

    	border-radius: 20px;

    	width: 45vw;

    	height: 16vh;

	}



    .img-produto-compra{

        border-radius: 20px;

        width: 45vw;

        height: 18vh;

    }



    #logo-nav{

        width: 10vw;

    }



    .logo-mobile{

        text-align: right;

    }



    #carrinho-nav{

        width: 4vw; 

    }



    .form-login{

        margin: 0 auto;

        width: 80vw;

        height: 100%;

        padding: 35px 35px;

        border-radius: 5px;

        box-shadow:5px 5px 10px rgba(0, 0, 0, 0.157);

        background-color:white;

    }

    

    .form-login img{

        width: 25vw;

    }



    .img-product{

        height: 15vh;

        width: 100%;

    }



    .page-header-dark {

        color: #fff;

        border-bottom-left-radius: 0%;

        border-bottom-right-radius: 0%;

    }



    .icon-menu{

        width: 13vw;

    }



    .card-products{

        height: auto;

    }



    .card-populares{

        margin: 0px;

    }



    .img-card-populares{

        height: 14vw;

    }



    .card-populares-title{

        font-size: 15pt;

    }



    .card-populares-subtitle{

        font-size: 10pt;

    }



    .category-container{

        width: 100vw;

    }



    .version{

        position: absolute;

        top: 75%;

        font-size: 10pt;

    }

    ul {

        padding: 0;

        list-style-type: none;

    }

    #itens_navbar_left{
      cursor: pointer;
    }


      #menuToggle {

        display: flex;

        flex-direction: column;

        position: relative;

        top: 0px;

        left: 0px;

        z-index: 4;

        -webkit-user-select: none;

        user-select: none;

      }

      

      #menuToggle input

      {

        display: flex;

        width: 40px;

        height: 32px;

        position: absolute;

        cursor: pointer;

        opacity: 0;

        z-index: 2;

      }

      

      #menuToggle span

      {

        display: flex;

        width: 29px;

        height: 2px;

        margin-bottom: 5px;

        position: relative;

        background: #ffffff;

        border-radius: 3px;

        z-index: 1;

        transform-origin: 5px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    opacity 0.55s ease;

      }

      

      #menuToggle span:first-child

      {

        transform-origin: 0% 0%;

      }

      

      #menuToggle span:nth-last-child(2)

      {

        transform-origin: 0% 100%;

      }

      

      #menuToggle input:checked ~ span

      {

        opacity: 1;

        transform: rotate(45deg) translate(-3px, -1px);

        background: #36383F;

      }

      #menuToggle input:checked ~ span:nth-last-child(3)

      {

        opacity: 0;

        transform: rotate(0deg) scale(0.2, 0.2);

      }

      

      #menuToggle input:checked ~ span:nth-last-child(2)

      {

        transform: rotate(-45deg) translate(0, -1px);

      }

      

      #menu

      {

        position: absolute;

        width: 85vw;

        height: 100vh;

        box-shadow: 0 0 10px #85888C;

        margin: -50px 0 0 -50px;

        padding: 40px;

        padding-top: 75px;

        background-color: #FFFFFF;

        transform-origin: 0% 0%;

        transform: translate(-100%, 0);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

      }

      

      #menu li

      {

        padding: 10px 0;

        transition-delay: 2s;

      }

      

      #menuToggle input:checked ~ ul

      {

        transform: none;

      }

    .icon-price{
        top: 18px;
        left: 42px;

    }

    

}



/* Maioria dos Dispositivos Mobile (Ex.: Sansung S5) */

@media only screen and (min-width: 400px) and (max-width: 600px) {           

               

    .img-status-pedido{

        width: 15vh;

    }   



     .img-produto{

    	border-radius: 20px;

    	width: 45vw;

    	height: 16vh;

	}   



    .img-produto-compra{

        border-radius: 20px;

        width: 45vw;

        height: 18vh;

    }



    #logo-nav{

        width: 22vw;

    }



    .logo-mobile{

        text-align: right;

        padding-left: 7vw;

    }



    #carrinho-nav{

        width: 7vw; 

    }



    .img-product{

        height: 15vh;

        width: 100%;

    }



    .body-login{

        background-color: white;

    }



    .form-login{

        margin: 0px 0px;

        width: 80vw;

        padding: 25px 25px;

        box-shadow:0px 0px 0px white;

    }



    .form-login img{

        width: 45vw;

    }



    .page-header-dark {

        color: #fff;

        border-bottom-left-radius: 0%;

        border-bottom-right-radius: 0%;

    }



    .icon-menu{

        width: 13vw;

    }



    .card-products{

        height: auto;

    }



    .card-populares{

        margin-left: 0px;

    }



    .img-card-populares{

        height: 40vw;

    }



    .card-populares-desktop{

        display: flex;

        justify-content: left;

    }



    .category-container{

        width: 100vw;

    }



    .version{

        position: absolute;

        top: 50%;

        font-size: 10pt;

    }

    ul {

        padding: 0;

        list-style-type: none;

    }

    #itens_navbar_left{
      cursor: pointer;
    }

      #menuToggle {

        display: flex;

        flex-direction: column;

        position: relative;

        top: 0px;

        left: 0px;

        z-index: 4;

        -webkit-user-select: none;

        user-select: none;

      }

      

      #menuToggle input

      {

        display: flex;

        width: 40px;

        height: 32px;

        position: absolute;

        cursor: pointer;

        opacity: 0;

        z-index: 2;

      }

      

      #menuToggle span

      {

        display: flex;

        width: 29px;

        height: 2px;

        margin-bottom: 5px;

        position: relative;

        background: #ffffff;

        border-radius: 3px;

        z-index: 1;

        transform-origin: 5px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    opacity 0.55s ease;

      }

      

      #menuToggle span:first-child

      {

        transform-origin: 0% 0%;

      }

      

      #menuToggle span:nth-last-child(2)

      {

        transform-origin: 0% 100%;

      }

      

      #menuToggle input:checked ~ span

      {

        opacity: 1;

        transform: rotate(45deg) translate(-3px, -1px);

        background: #36383F;

      }

      #menuToggle input:checked ~ span:nth-last-child(3)

      {

        opacity: 0;

        transform: rotate(0deg) scale(0.2, 0.2);

      }

      

      #menuToggle input:checked ~ span:nth-last-child(2)

      {

        transform: rotate(-45deg) translate(0, -1px);

      }

      

      #menu

      {

        position: absolute;

        width: 85vw;

        height: 100vh;

        box-shadow: 0 0 10px #85888C;

        margin: -50px 0 0 -50px;

        padding: 40px;

        padding-top: 75px;

        background-color: #FFFFFF;

        transform-origin: 0% 0%;

        transform: translate(-100%, 0);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

      }

      

      #menu li

      {

        padding: 10px 0;

        transition-delay: 2s;

      }

      

      #menuToggle input:checked ~ ul

      {

        transform: none;

      }



      .icon-price{

        position: absolute;

        top: 18px;

        left: 42px;

    }

    

}



/* Dispositivos Mobile Menores (Ex.: Moto G4, iPhone 7) */

@media only screen and (min-width: 200px) and (max-width: 400px) {           

    

    .img-status-pedido{

        width: 15vh;

    } 



     .img-produto{

    	border-radius: 20px;

    	width: 45vw;

    	height: 16vh;

	} 



    .img-produto-compra{

        border-radius: 20px;

        width: 45vw;

        height: 18vh;

    }



    #logo-nav{

        width: 22vw;

    }



    .logo-mobile{

        text-align: right;

        padding-left: 11vw;

    }



    #carrinho-nav{

        width: 7vw; 

    }



    .img-product{

        height: 15vh;

        width: 100%;

    }



    .body-login{

        background-color: white;

    }



    .form-Login{

        margin: 0px 0px;

        width: 80vw;

        padding: 0px 15px;

        box-shadow:0px 0px 0px white;

    }



    .form-Login img{

        width: 45vw;

    }



    .page-header-dark {

        color: #fff;

        border-bottom-left-radius: 0%;

        border-bottom-right-radius: 0%;

    }



    .icon-menu{

        width: 13vw;

    }



    .card-products{

        height: auto;

    }



    .card-populares{

        margin: 0px;

    }



    .img-card-populares{

        height: 30vw;

    }



    .card-populares-desktop{

        display: flex;

        justify-content: left;

    }



    .category-container{

        width: 100vw;

    }



    .version{

        position: absolute;

        top: 50%;

        font-size: 10pt;

    }


      ul {

        padding: 0;

        list-style-type: none;

      }

      
      #itens_navbar_left{
        cursor: pointer;
      }
    

      #menuToggle {

        display: flex;

        flex-direction: column;

        position: relative;

        top: 0px;

        left: 0px;

        z-index: 4;

        -webkit-user-select: none;

        user-select: none;

      }

      

      #menuToggle input

      {

        display: flex;

        width: 40px;

        height: 32px;

        position: absolute;

        cursor: pointer;

        opacity: 0;

        z-index: 2;

      }

      

      #menuToggle span

      {

        display: flex;

        width: 29px;

        height: 2px;

        margin-bottom: 5px;

        position: relative;

        background: #ffffff;

        border-radius: 3px;

        z-index: 1;

        transform-origin: 5px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

                    opacity 0.55s ease;

      }

      

      #menuToggle span:first-child

      {

        transform-origin: 0% 0%;

      }

      

      #menuToggle span:nth-last-child(2)

      {

        transform-origin: 0% 100%;

      }

      

      #menuToggle input:checked ~ span

      {

        opacity: 1;

        transform: rotate(45deg) translate(-3px, -1px);

        background: #36383F;

      }

      #menuToggle input:checked ~ span:nth-last-child(3)

      {

        opacity: 0;

        transform: rotate(0deg) scale(0.2, 0.2);

      }

      

      #menuToggle input:checked ~ span:nth-last-child(2)

      {

        transform: rotate(-45deg) translate(0, -1px);

      }

      

      #menu

      {

        position: absolute;

        width: 85vw;

        height: 230vw;

        box-shadow: 0 0 10px #85888C;

        margin: -50px 0 0 -50px;

        padding: 40px 50px;

        padding-top: 75px;

        background-color: #FFFFFF;

        transform-origin: 0% 0%;

        transform: translate(-100%, 0);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

      }

      

      #menu li

      {

        padding: 10px 0;

        transition-delay: 2s;

      }

      

      #menuToggle input:checked ~ ul

      {

        transform: none;

      }



      .icon-price{

          position: absolute;

          top: 18px;

          left: 42px;

      }

}