/**
 Project: Fresh to go
 File   : Main
**/

body{
    margin:0px;
    border:0px;
    font-size:62.5%;
    background: #ffffff;
    overflow: hidden;   
}

*{
    box-sizing: border-box;
}
.clear{
    clear:both;
}

a{
    text-decoration: none;
}

@font-face {
    font-family:WarungKopi;
    src:url('../font/WarungKopi.otf');
}
@font-face {
    font-family:Roboto;
    src:url('../font/Roboto.ttf');
}
@font-face {
    font-family:Questrial;
    src:url('../font/Questrial-Regular.ttf');
}

/** Intro **/
.wbt-intro{
    position: fixed;
    top:0px;
    width:100%;
    height:100%;
    background: #00a04b;
    z-index:1000;
}
.logo-intro{
    position: absolute;
    top:calc(50% - 120px);
    left:calc(50% - 100px);
    width:200px;
    height:85px;
    background: url('../img/logo.png') no-repeat;
    background-position: center 0px;
    background-size: 200px;    
}
.ctn-loader-intro{
    position: absolute;
    top:calc(50% - 30px);
    left:calc(50% - 120px);
    width:240px;
}
.ctn-loader{
    position: absolute;
    top:calc(50% - 30px);
    left:calc(50% - 120px);
    width:240px;
}

/** Page **/
.wbt-page{
    position: relative;
    width:100%;
    height:100%;
}
.wbt-work{
    position: relative;
    margin:0 auto;
    width:1200px;
    min-height:140px;
    height:auto;
    background: transparent; /*rgba(120,200,140,0.2);*/
}

/** Page: Header **/
.wbt-header{
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height:160px;
    background: #ffffff;
    z-index:1;
}
.wbt-logo{
    position: absolute;
    top:0px;
    left:5px;
    width:130px;
    height:100px;
    background:url('../img/logo.png') no-repeat;
    background-position: left top;
    background-size: 110px;
}
.ctn-top{
    width:100%;
    height:60px;
    background: transparent;
}
.ctn-search{
    position: absolute;
    top:10px;
    left:calc(50% - 250px);
    width:500px;
    height:40px;
    /*background: #ffffff;*/
    z-index:0;
}
.ctn-search input{
    width:100%;
    height:40px;
    background: #ffffff;
    border: 2px solid #97d729; /*rgba(0,0,0,0.25);*/
    border-radius:10px 0px;
    padding-left:15px;
    padding-right:15px;
    font-family:Questrial;
    font-size:15px;
    color:#000000;
    outline: none;
}
.ctn-search input:focus{
    background:rgba(151,215,41,0.10);
    border: 2px solid #97d729;
    box-shadow:0px 0px 0px 4px rgba(0,0,0,0.02);
}

.ctn-search .search-ico{
    position: absolute;
    top:5px;
    left:5px;
    width:5px;
    height:30px;
    background: #00a04b;
    border-radius:10px 0px;
    z-index:0;
}
.ctn-search .search-back{
    position: absolute;
    top:5px;
    left:5px;
    width:30px;
    height:30px;
    background: #00a04b url('../img/icon-min/back-white.png') no-repeat center;
    background-size: 16px;
    border-radius:7px 0px;
    display:none;
    cursor:pointer;
    z-index:1;
}
.ctn-search .search-back:hover{
    background: #97d729 url('../img/icon-min/back-white.png') no-repeat center;
    background-size: 16px;
}

.ctn-menu{
    margin:0 auto;
    margin-top:10px;
    width:400px;
    height:90px;
}
.ctn-menu-provider{
    margin:0 auto;
    margin-top:10px;
    width:300px;
    height:90px;
}
.ctn-menu-rest{
    margin:0 auto;
    margin-top:10px;
    width:300px;
    height:90px;
}
.menu-option{
    position: relative;
    float:left;
    width:100px;
    height:90px;
    cursor:pointer;
}
.menu-option-sel{}
.option-ico{
    position: relative;
    margin:0 auto;
    width:60px;
    height:60px;
    background:#e1e7c5;
    border-radius:50%;
}
.option-name{
    margin-top:5px;
    font-family:Questrial;
    font-size:15px;
    color:rgba(0,0,0,0.7);
    line-height:20px;
    text-align: center;
}
.option-bar{
    position: absolute;
    bottom:0px;
    left:calc(50% - 25px);
    width:0px;
    height:3px;
    background: #97d729;
    border-radius:5px 5px 0px 0px;
    transition: all 0.4s;
    z-index:1;
}
.menu-option:hover .option-bar{
    width:50px;
}
.menu-option-sel .option-bar{
    position: absolute;
    bottom:0px;
    left:calc(50% - 25px);
    width:50px;
    height:3px;
    background: #00a04b;
    border-radius:5px 5px 0px 0px;
}

.btn-search{
    position: absolute;
    top:10px;
    right:60px;
    width:40px;
    height:40px;
    background:rgba(151,215,41,0.10);
    border-radius:20px;
    padding-left:15px;
    padding-right:15px;
    font-family:Questrial;
    font-size:15px;
    color:#ffffff;
    text-align: center;
    display:none;
    cursor:pointer;
}
.btn-search .ico{
    position: absolute;
    top:3px;
    right:3px;
    width:34px;
    height:34px;
    background:transparent url('../img/icon-min/search.png') no-repeat center;
    background-size:16px;
    border-radius: 50%;
}
.btn-search:hover .ico{
    background:#97d729 url('../img/icon-min/search-white.png') no-repeat center;
    background-size:18px;
}

.btn-menu{
    position: absolute;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    background:rgba(151,215,41,0.10);
    border-radius:20px;
    padding-left:15px;
    padding-right:15px;
    font-family:Questrial;
    font-size:15px;
    color:#ffffff;
    text-align: center;
    cursor:pointer;
}
.btn-menu .ico{
    position: absolute;
    top:3px;
    right:3px;
    width:34px;
    height:34px;
    background:transparent url('../img/icon-min/menu.png') no-repeat center;
    background-size:20px;
    border-radius: 50%;    
}
.btn-menu:hover .ico{
    background:#97d729 url('../img/icon-min/menu-white.png') no-repeat center;
    background-size:22px;
}

/** Page: Content **/
.wbt-content{
    position:fixed;
    top:160px;
    left:0px;
    width:100%;
    height:calc(100% - 160px);
    background: rgba(151,215,41,0.04) url('../img/bg.png') center;
    background-size: 200px;
    padding-bottom: 50px;
    overflow:auto;
    scrollbar-width:none;
    border-radius:20px 20px 0px 0px;
    z-index:0;
}
.wbt-bisel{
    position:fixed;
    top:160px;
    left:0px;
    width:100%;
    height:20px;
    overflow: hidden;
    z-index:1;
}
.wbt-bisel .bisel{
    position: absolute;
    left:-2px;
    width:calc(100% + 4px);
    height:40px;
    border-radius:20px 20px 0px 0px;
    box-shadow:0px 0px 4px rgba(0,0,0,0.2) inset;
}
.wbt-title{
    position: relative;
    margin:0px auto;
    margin-top:20px;
    margin-bottom:10px;
    font-family:WarungKopi;
    font-size:32px;
    color:#000000;
    line-height:40px;
    text-align: center;
}

/** Content : Blocks **/
.block{
    position: relative;
    margin:0 auto;
    width:1160px;
    min-height:200px;
    height:auto;
    padding:10px 0px 10px 0px;
}
.block-content{
    position: relative;
    width:100%;
    min-height:140px;
    height:auto;
    border-radius:10px 0px 10px 0px;
    padding:10px;
}
.verduras .block-content{
    height:320px;
    background:#ecfbd2 !important;
    overflow: hidden;
}
.frutas .block-content{
    height:320px;
    background:#fef5c7 !important;
    overflow: hidden;
}
.abarrote .block-content{
    height:320px;
    background:#feefd4 !important;
    overflow: hidden;
}
.indicadores .block-content{
    height:300px;
    background:#f4fbe9 !important;
    overflow: hidden;
}


.block-title{
    position: absolute;
    top:10px;
    width:auto;
    height:40px;
    font-family:WarungKopi;
    font-size:24px;
    color:#000000;
    line-height:40px;
    padding-right:10px;
}
.block-title .pipe{
    float:left;
    width:5px;
    height:40px;
    border-radius:5px 0px 5px 0px;
    margin-right:10px;
}
.verduras .pipe{
    background: #97d729;
}
.frutas .pipe{
    background: #fddb2c;
}
.abarrote .pipe{
    background: #fec560;
}
.indicadores .pipe{
    background: #97d729;
}


/** Content : Box Products **/
.ctn-box{
    position: relative;
    float:left;
    width:calc(100% / 4);
    height:150px;
    padding:10px;    
    margin-top:40px;
}

.viewer-verduras .ctn-box{
    width:calc(100% / 5) !important;
    height:245px !important;
    margin-top:55px !important;
}
.viewer-frutas .ctn-box{
    width:calc(100% / 5) !important;
    height:245px !important;
    margin-top:55px !important;
}
.viewer-abarrote .ctn-box{
    width:calc(100% / 5) !important;
    height:245px !important;
    margin-top:55px !important;
}

.box-product{
    position: relative;
    width:100%;
    height:100%;
    background:#ffffff;
    border-radius:10px 0px 10px 0px;
    padding-top:40px;
    transition: all 0.4s;
}
.box-product:hover{
    transform: scale(1.1);
}

.product-ico{
    position: absolute;
    top:-30px;
    left:calc(50% - 30px);
    width:60px;
    height:60px;
    border-radius:50%;
}
.product-ico img{
    margin-top:-4px;
    width:120px;
    opacity: 0;
}
.product-name{
    font-family:WarungKopi;
    font-weight:bold;
    font-size:19px;
    color:#000000;
    line-height:20px;
    text-align: center;
    letter-spacing: 0.4px;
}
.product-subtitle{
    margin-top:5px;
    font-family:Roboto;
    font-size:14px;
    color:#707070;
    line-height:15px;
    text-align: center;
}

.product-price{
    position: relative;
    margin-top:10px;
    font-family:Roboto;
    font-weight:bold;
    font-size:18px;
    color:#00a04b; /*88ab00*/
    line-height:20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.product-price span{
    color:#000000;
    font-size:15px;
}
.product-price-detail{
    margin-top:5px;
    font-family:Roboto;
    font-size:14px;
    color:#707070;
    line-height:15px;
    text-align: center;
}

.proveedor-data{
    position: relative;
    margin-top:10px;
    padding-left:15px;
    padding-right:10px;
}
.proveedor-name{
    float:left;
    width:100%;
    font-family:Roboto;
    font-size:15px;
    color:#000000;
    line-height:20px;
    text-align: left;
}
.proveedor-rating{
    float:left;
    font-family:Roboto;
    font-weight:bold;
    font-size:12px;
    color:rgba(0,0,0,0.8);
    line-height:20px;
    text-align: left;
    padding-right:17px;
    background:url('../img/icon-min/star.png') no-repeat;
    background-position: calc(100%) 3px;
    background-size: 12px;
}

.box-indicator{
    position: relative;
    width:100%;
    height:100%;
    background:#ffffff;
    border-radius:10px 0px 10px 0px;
    padding-top:40px;
    transition: all 0.4s;
}
.box-indicator:hover{
    transform: scale(1.1);
}

.indicator-ico{
    position: absolute;
    top:-30px;
    left:calc(50% - 30px);
    width:60px;
    height:60px;
    border-radius:50%;
}
.indicator-ico img{
    margin-top:-4px;
    width:120px;
    opacity: 0;
}
.indicator-ico .ico-text{
    position: absolute;
    top:25px;
    left:calc(50% - 15px);
    width:30px;
    height:20px;
    font-family:WarungKopi;
    font-size:17px;
    color:#000000;
    line-height:20px;
    text-align: center;
    letter-spacing: 0.4px;
    background: #f8f8f8;
    border-radius:5px;
}

.indicator-name{
    font-family:WarungKopi;
    font-weight:bold;
    font-size:19px;
    color:#000000;
    line-height:20px;
    text-align: center;
    letter-spacing: 0.4px;
}
.indicator-amount{
    position: relative;
    margin-top:10px;
    font-family:Roboto;
    font-weight:bold;
    font-size:18px;
    color:#00a04b; /*88ab00*/
    line-height:20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.indicator-amount span{
    color:#000000;
    font-size:15px;
}
.indicator-amount-detail{
    margin-top:5px;
    font-family:Roboto;
    font-size:14px;
    color:#707070;
    line-height:15px;
    text-align: center;
}

/** Provider **/
#list-days{
    position: relative;
    margin-top:20px;
    height:auto;
}
#list-days .ctn-box{
    width:calc(100% / 5);
    height:185px;
    /*margin-top:55px !important;*/
}

#list-products{
    position: relative;
    margin-top:20px;
    height:auto;
}
#list-products .ctn-box{
    width:calc(100% / 5);
    height:205px; /*185px;*/
    /*margin-top:55px !important;*/
}

/** Content : Btn-Add **/
.verduras .btn-add{
    position: absolute;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    height:30px;
    border:1px solid #97d729;
    background: #ffffff url('../img/icon-min/add-item-black.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 20px;
    border-radius: 10px 0px 10px 0px;
    font-family:WarungKopi;
    font-size:15px;
    color:#000000;
    line-height:30px;
    text-align: center;
    cursor:pointer;
    transition: all 0.4s;
    overflow: hidden;
}
.verduras .btn-add:hover{
    border:1px solid #ecfbd2;
    background: #97d729 url('../img/icon-min/add-item-white.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 20px;
    color:#ffffff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
    transition: all 0.4s;
}

.frutas .btn-add{
    position: absolute;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    height:30px;
    border:1px solid #fddb2c;
    background: #ffffff url('../img/icon-min/add-item-black.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 20px;
    border-radius: 10px 0px 10px 0px;
    font-family:WarungKopi;
    font-size:15px;
    color:#000000;
    line-height:30px;
    text-align: center;
    cursor:pointer;
    transition: all 0.4s;
    overflow: hidden;
}
.frutas .btn-add:hover{
    border:1px solid #fef5c7;
    background: #fddb2c url('../img/icon-min/add-item-white.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 20px;
    color:#ffffff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
    transition: all 0.4s;
}

.abarrote .btn-add{
    position: absolute;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    height:30px;
    border:1px solid #fec560;
    background: #ffffff url('../img/icon-min/add-item-black.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 20px;
    border-radius: 10px 0px 10px 0px;
    font-family:WarungKopi;
    font-size:15px;
    color:#000000;
    line-height:30px;
    text-align: center;
    cursor:pointer;
    transition: all 0.4s;
    overflow: hidden;
}
.abarrote .btn-add:hover{
    border:1px solid #feefd4;
    background: #fec560 url('../img/icon-min/add-item-white.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 20px;
    color:#ffffff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
    transition: all 0.4s;
}

/** Content : Btn-Edit **/
.verduras .btn-edit{
    position: absolute;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    height:30px;
    border:1px solid #97d729;
    background: #ffffff url('../img/icon-min/edit-black.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    border-radius: 10px 0px 10px 0px;
    font-family:WarungKopi;
    font-size:15px;
    color:#000000;
    line-height:30px;
    text-align: center;
    cursor:pointer;
    transition: all 0.4s;
    overflow: hidden;
}
.verduras .btn-edit:hover{
    border:1px solid #ecfbd2;
    background: #97d729 url('../img/icon-min/edit-white.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    color:#ffffff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
    transition: all 0.4s;
}

.frutas .btn-edit{
    position: absolute;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    height:30px;
    border:1px solid #fddb2c;
    background: #ffffff url('../img/icon-min/edit-black.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    border-radius: 10px 0px 10px 0px;
    font-family:WarungKopi;
    font-size:15px;
    color:#000000;
    line-height:30px;
    text-align: center;
    cursor:pointer;
    transition: all 0.4s;
    overflow: hidden;
}
.frutas .btn-edit:hover{
    border:1px solid #fef5c7;
    background: #fddb2c url('../img/icon-min/edit-white.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    color:#ffffff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
    transition: all 0.4s;
}

.abarrote .btn-edit{
    position: absolute;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    height:30px;
    border:1px solid #fec560;
    background: #ffffff url('../img/icon-min/edit-black.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    border-radius: 10px 0px 10px 0px;
    font-family:WarungKopi;
    font-size:15px;
    color:#000000;
    line-height:30px;
    text-align: center;
    cursor:pointer;
    transition: all 0.4s;
    overflow: hidden;
}
.abarrote .btn-edit:hover{
    border:1px solid #feefd4;
    background: #fec560 url('../img/icon-min/edit-white.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    color:#ffffff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
    transition: all 0.4s;
}

/** Content: Btn-View **/
.indicadores .btn-view{
    position: absolute;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    height:30px;
    border:1px solid #97d729;
    background: #ffffff url('../img/icon-min/view-black.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    border-radius: 10px 0px 10px 0px;
    font-family:WarungKopi;
    font-size:15px;
    color:#000000;
    line-height:30px;
    text-align: center;
    cursor:pointer;
    transition: all 0.4s;
    overflow: hidden;
}
.indicadores .btn-view:hover{
    border:1px solid #ecfbd2;
    background: #97d729 url('../img/icon-min/view-white.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    color:#ffffff;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
    transition: all 0.4s;
}

.pic-vendedor{
    position: relative;
    margin:0 auto;
    width:140px;
    height:140px;
    background: url('../img/vendedor.png') no-repeat center;
    background-size: 100%;
}
.pic-verduras{
    position: relative;
    margin:0 auto;
    margin-top:20px;
    width:140px;
    height:140px;
    background: url('../img/menu/verduras.png') no-repeat center;
    background-size: 100%;
}
.pic-frutas{
    position: relative;
    margin:0 auto;
    width:140px;
    height:140px;
    background: url('../img/menu/frutas.png') no-repeat center;
    background-size: 100%;
}
.pic-abarrote{
    position: relative;
    margin:0 auto;
    width:140px;
    height:140px;
    background: url('../img/menu/abarrote.png') no-repeat center;
    background-size: 100%;
}

.pic-pedidos-nuevos{
    position: relative;
    margin:0 auto;
    width:140px;
    height:140px;
    background: url('../img/menu-provider/pedidos-nuevos.png') no-repeat center;
    background-size: 100%;
}
.pic-pedidos-entregados{
    position: relative;
    margin:0 auto;
    width:140px;
    height:140px;
    background: url('../img/menu-provider/pedidos-entregados.png') no-repeat center;
    background-size: 100%;
}

.pic-valoraciones{
    position: relative;
    margin:0 auto;
    width:140px;
    height:140px;
    background: url('../img/menu-provider/valoracion.png') no-repeat center;
    background-size: 100%;
}
.pic-metas{
    position: relative;
    margin:0 auto;
    width:140px;
    height:140px;
    background: url('../img/menu-provider/metas.png') no-repeat center;
    background-size: 100%;
}

.box-msg{
    position: relative;
    margin:10px auto;
    width:500px;
    height:auto;
    padding:20px;
    border:1px solid #ecfbd2;
    background: #ffffff;
    border-radius: 10px 0px 10px 0px;
    
}
.box-msg-title{
    font-family:WarungKopi;
    font-size:24px;
    color:#000000;
    line-height:30px;
    margin-bottom:10px;
}
.box-msg-text{
    font-family:WarungKopi;
    font-size:17px;
    color:#000000;
    line-height:20px;
}
.box-msg-text span{
    color:#00a04b;
}

/* Content : Carousel */
.carousel{
    position:relative;
    margin: 0 auto;
    width:100%;
    height:auto;
    padding:0px;
}

.viewer-verduras:after {
  content: 'flickity';
  display: none;
}
.viewer-frutas:after {
  content: 'flickity';
  display: none;
}
.viewer-abarrote:after {
  content: 'flickity';
  display: none;
}

#viewer-main{
    height:100% !important;
}
#viewer-main .gallery-cell{
    position:relative;
    width:100%;
    height: 100%;
    overflow:auto;
    scrollbar-width:none;
}

.viewer-verduras .gallery-cell{
    overflow:inherit !important;
}
.viewer-frutas .gallery-cell{
    overflow:inherit !important;
}
.viewer-abarrote .gallery-cell{
    overflow:inherit !important;
}

.carousel .flickity-prev-next-button.previous {
    top:20px;
    left: inherit;
    right:30px;
    width:30px;
    height:30px;
    border-radius: 10px 0px 0px 10px;
}
.carousel .flickity-prev-next-button.next {
    top:20px;
    right:0px;
    width:30px;
    height:30px;
    border-radius: 0px 10px 10px 0px;
}

#viewer-main .flickity-prev-next-button.previous {
    display:none;
}
#viewer-main .flickity-prev-next-button.next {
    display:none;
}

/** Footer **/
.wbt-footer{
    position: fixed;
    bottom:0px;
    width:100%;
    height:50px;
    background: #ffffff;
    box-shadow:0px 0px 4px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index:5;
}
.wbt-menu-acount{
    margin:0 auto;
    width:300px;
    height:100%;
}
.wbt-menu-acount-item{
    position: relative;
    float:left;
    width:150px;
    height:50px;
    padding:5px 10px 5px 10px;
}

.wbt-menu-bottom{
    margin:0 auto;
    width:300px;
    height:100%;
}
.wbt-menu-bottom-item{
    position: relative;
    float:left;
    width:100px;
    height:50px;
    font-family:Questrial;
    font-size:15px;
    color:#000000;
    line-height:20px;
    text-align: center;
    padding-top:20px;
    cursor:pointer;
}
.wbt-menu-bottom-item .ico-submenu{
    position: absolute;
    top:-5px;
    left:calc(50% - 25px);
    width:50px;
    height:5px;
    background:#00a04b;
    border-radius:0px 0px 5px 5px;
    transition: all 0.4s;
}
.wbt-menu-bottom-item:hover{
        
}
.wbt-menu-bottom-item:hover .ico-submenu{
    top:0px;
    transition: all 0.4s;
}

.wbt-menu-bottom-item-sel .ico-submenu{
    top:0px !important;
}

/** Page: Panel lateral **/
.wbt-bg-panel{
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    /*backdrop-filter: blur(20px);
    backdrop-filter: sepia(90%);
    backdrop-filter: invert(80%);*/
    z-index:10;
    display:none;
}

.wbt-panel{
    position: fixed;
    top:0px;
    right:0px;
    width:380px;
    height:100%;
    background: #fefefe;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    z-index:20;
    display:none;
}
.wbt-panel-header{
    width:100%;
    height:200px;
    background: #f3fbe4 url('../img/logo.png') no-repeat;
    background-size: 140px;
    background-position: center 10px;
    border-bottom-left-radius: 250px 100px;
    border-bottom-right-radius: 250px 100px;
}


.wbt-toldo-sup{
    position: absolute;
    top:-17px;
    left: calc(50% - 200px);
    width:400px;
    height:100px;
    background: lightblue;
    transform-style: preserve-3d;
    transform: perspective(700px) rotateX(45deg) rotateY(0deg);
    border-radius:10px 10px 0px 0px;
    z-index:1;
}
.wbt-toldo-inf{
    position: absolute;
    top:70px;
    left: calc(50% - 210px);
    width:420px;
    height:100px;
    z-index:21;
}
.layer{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: rgba(255,255,255,0.4);
    z-index:2;
}
.franja{
    position: relative;
    float:left;
    width:80px;
    height:100px;
}
.wbt-toldo-inf .franja{
    width:calc(100% / 5);
    height:50px !important;
    border-radius:0px 0px 20px 20px;
}
.bg-franja-1{
    background: #00a04b;
}
.bg-franja-2{
    background: #97d729;
}

.wbt-panel-logo{
    position: absolute;
    top:130px;
    left:calc(50% - 75px);
    width:150px;
    height:100px;
    background:url('../img/logo.png') no-repeat;
    background-position: left top;
    background-size: 140px;
}

.wbt-panel-close{
    position: absolute;
    top:5px;
    left:20px;
    width:30px;
    height:40px;
    background: rgba(0,0,0,0.1) url('../img/icon-min/close-white.png') no-repeat center;
    background-size: 24px;
    border-radius:15px;
    cursor: pointer;
}
.wbt-panel-close:hover{
    background: #97d729 url('../img/icon-min/close-white.png') no-repeat center;
    background-size: 24px;
}
.wbt-panel-back{
    position: absolute;
    top:5px;
    right:20px;
    width:30px;
    height:40px;
    background: rgba(0,0,0,0.1) url('../img/icon-min/back-white.png') no-repeat center;
    background-size: 14px;
    border-radius:15px;
    cursor: pointer;
    display:none;
}
.wbt-panel-back:hover{
    background: #97d729 url('../img/icon-min/back-white.png') no-repeat center;
    background-size: 14px;
}

.wbt-welcome{
    position: relative;
    padding-top:225px;
    padding-left:30px;
}
.wbt-welcome-title{
    margin:0px auto;
    margin-top:20px;
    margin-bottom:5px;
    font-family:WarungKopi;
    font-size:24px;
    color:#00a04b;
    line-height:30px;
    text-align: left;
}
.wbt-welcome-subtitle{
    margin:0px auto;
    margin-top:5px;
    margin-bottom:10px;
    font-family:Roboto;
    font-size:16px;
    color:#000000;
    line-height:20px;
    text-align: left;
}

.wbt-panel-block{
    position: relative;
    margin:10px auto;
    width:320px;
    min-height:40px;
    height:auto;
    background: #ffffff;
    border-bottom: 3px solid rgba(0,0,0,0.1);
    border-radius: 20px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    padding:10px 20px 20px 20px;
    overflow:hidden;
}

/** Block Item: Menu **/
.panel-block-item{
    position: relative;
    width:100%;
    height:40px;
    background: rgba(151,215,41,0.04) url('../img/icon-min/item-go.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    padding-left: 40px;
    cursor:pointer;
}
.panel-block-item:hover{
    background: rgba(151,215,41,0.10) url('../img/icon-min/item-go.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
}

.panel-block-item:first-child{
    border-radius:14px 14px 0px 0px;
}
.panel-block-item:last-child{
    border-radius:0px 0px 14px 14px;
}

.panel-block-item-ico{
    position: absolute;
    top:5px;
    left:5px;
    width:30px;
    height:30px;
}
.panel-block-item-title{
    font-family:Questrial;
    font-size:16px;
    color:#000000;
    line-height:40px;
}

/** Block Item: Productos **/
.panel-block-item-product{
    position: relative;
    width:100%;
    height:60px;
    background: rgba(151,215,41,0.04) url('../img/icon-min/check.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
    padding-left: 60px;
    padding-top:10px;
    cursor:pointer;
}
.panel-block-item-product:hover{
    background: rgba(151,215,41,0.10) url('../img/icon-min/check-over.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 16px;
}

.panel-block-item-product:first-child{
    border-radius:14px 14px 0px 0px !important;
}
.panel-block-item-product:last-child{
    border-radius:0px 0px 14px 14px;
}

.panel-block-item-product-ico{
    position: absolute;
    top:5px;
    left:5px;
    width:50px;
    height:50px;
}
.panel-block-item-product-ico img{
    margin:5px;
    width:40px;
}
.panel-block-item-product-title{
    font-family:Questrial;
    font-weight:bold;
    font-size:16px;
    color:#000000;
    line-height:25px;
}
.panel-block-item-product-subtitle{
    font-family:Roboto;
    font-size:14px;
    color:#707070;
    line-height:15px;
}
.panel-block-item-product-amount{
    position: absolute;
    top:10px;
    right:10px;
    height:20px;
    font-family:Roboto;
    font-weight: bold;
    font-size:16px;
    color:#00a04b;
    line-height:20px;
}

.panel-block-item-product-btn-add{
    position: absolute;
    top:35px;
    right:10px;
    width:20px;
    height:20px;
    background: rgba(151,215,41,0.10) url('../img/add-black.png') no-repeat center;
    background-size: 10px;
    border-radius:0px 8px 8px 0px;
    cursor:pointer;
}
.panel-block-item-product-btn-add:hover{
    background: #97d729 url('../img/add-white.png') no-repeat center;
    background-size: 10px;
}

.panel-block-item-product-cant{
    position: absolute;
    top:35px;
    right:30px;
    width:20px;
    height:20px;
    background: rgba(151,215,41,0.10);
    font-family:Roboto;
    font-weight: bold;
    font-size:12px;
    color:#000000;
    line-height:20px;
    text-align: center;
}

.panel-block-item-product-btn-minus{
    position: absolute;
    top:35px;
    right:50px;
    width:20px;
    height:20px;
    background: rgba(151,215,41,0.10) url('../img/minus-black.png') no-repeat center;
    background-size: 10px;
    border-radius:8px 0px 0px 8px;
    cursor:pointer;
}
.panel-block-item-product-btn-minus:hover{
    background: #97d729 url('../img/minus-white.png') no-repeat center;
    background-size: 10px;
}

.item-product{}
.item-cart{
    background: rgba(151,215,41,0.04) !important;
}
.item-cart:hover{
    background: rgba(151,215,41,0.10) !important;
}

.wbt-panel-block-title{
    position: relative;
    margin:0px auto;
    margin-top:5px;
    margin-bottom:15px;
    font-family:WarungKopi;
    font-size:24px;
    color:#00a04b;
    line-height:30px;
    text-align: center;
}
.wbt-panel-block-text{
    position: relative;
    margin:0px auto;
    margin-top:5px;
    margin-bottom:15px;
    font-family:Roboto;
    font-size:16px;
    color:rgba(0,0,0,0.7);
    line-height:20px;
    text-align: left;
}

/** Buttons Actions Main**/
.add-product{
    position: fixed;
    bottom:70px;
    right:20px;
    width:60px;
    height:60px;
    background: #97d729 url('../img/add-white.png') no-repeat center;
    background-size: 30px;
    border-radius:50%;
    cursor:pointer;
    transition: all 0.4s;
    display:none;
}
.add-product:hover{
    background: #00a04b url('../img/add-white.png') no-repeat center;
    background-size: 30px;
}

.cart{
    position: fixed;
    bottom:50px;
    right:10px;
    width:80px;
    height:80px;
    background:url('../img/cart.png');/* #97d729;*/
    background-size: 100%;
    border-radius:5px;
    filter:drop-shadow(5px 5px 4px rgba(0,0,0,0.3));
    cursor:pointer;
}
.cart-data{
    position: relative;
    margin-top:40px;
    font-family:Questrial;
    font-weight:bold;
    font-size:16px;
    color:#00a04b;
    line-height:20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

/** Responsive Design **/
@media (max-width: 1240px) {
    .wbt-work{
        width:920px;
    }
    .block{
        width:920px;
    }
}

@media screen and ( min-width: 940px ) {
    #viewer:after {
        content: '';
    }
  
    .viewer-verduras:after {
        content: '';
    }
    .viewer-frutas:after {
        content: '';
    }
    .viewer-abarrote:after {
        content: '';
    }
}

@media (max-width: 940px) {
    .wbt-work{
        width:620px;
    }
    
    .wbt-logo{
        top:14px;
        left:20px;
        width:110px;
        height:27px;
        background:url('../img/logo.png') no-repeat;
        background-position: left top;
        background-size: 65px;
        overflow: hidden;
        z-index:5;
    }
    
    .ctn-search{
        left:calc(50% - 180px);
        width:360px;
    }
    
    .block{
        width:100%;
    }
    
    .verduras .ctn-box{
        width:200px !important;
    }
    .frutas .ctn-box{
        width:200px !important;
    }
    .abarrote .ctn-box{
        width:200px !important;
    }
    
    .indicadores .ctn-box{
        width:200px !important;
    }
    
    .viewer-verduras .gallery-cell{
        width:200px !important;
    }
    .viewer-frutas .gallery-cell{
        width:200px !important;
    }
    .viewer-abarrote .gallery-cell{
        width:200px !important;
    }
}

@media (max-width: 640px) {
    .wbt-logo{
        position:fixed;
        top:14px;
        left:20px;
        width:110px;
        height:27px;
        background:url('../img/logo.png') no-repeat;
        background-position: left top;
        background-size: 65px;
        overflow: hidden;
        z-index:5;
    }
        
    .wbt-work{
        width:480px;
    }
    
    .ctn-search{
        position: fixed;
        top:10px;
        left:10px;
        width:calc(100% - 20px);
        height:40px;
        background: #ffffff;
        display:none;
        z-index:5;
    }
    .ctn-search .search-ico{
        display:none;
    }
    .ctn-search .search-back{
        display:block;
    }
    .ctn-search input{
        padding-left:40px;    
    }
    
    .btn-search{
        position: fixed;
        right:70px;
        display:block;
    }
    .btn-menu{
        position: fixed;
        right:20px;
    }
    
    .verduras .ctn-box{
        width:230px !important;
    }
    .frutas .ctn-box{
        width:230px !important;
    }
    .abarrote .ctn-box{
        width:230px !important;
    }
    
    .indicadores .ctn-box{
        width:230px !important;
    }
    
    .viewer-verduras .gallery-cell{
        width:230px !important;
    }
    .viewer-frutas .gallery-cell{
        width:230px !important;
    }
    .viewer-abarrote .gallery-cell{
        width:230px !important;
    }
}

@media (max-width: 500px) {
    .wbt-work{
        width:100%;
        padding-left:10px;
        padding-right:10px;
    }
    .wbt-header .wbt-work{
        overflow:auto;
        scrollbar-width:none;
    }
    .wbt-content .wbt-work{
        padding-left:0px;
        padding-right:0px;
    }
            
    .ctn-menu{
        margin:0 auto;
        margin-top:10px;
        width:320px;
        height:90px;
        overflow:auto;
    }
    .ctn-menu .menu-option{
        width:80px;
    }
    
    .verduras .ctn-box{
        width:50% !important;
    }
    .frutas .ctn-box{
        width:50% !important;
    }
    .abarrote .ctn-box{
        width:50% !important;
    }
    
    .indicadores .ctn-box{
        width:50% !important;
    }
    
    .viewer-verduras .gallery-cell{
        width:50% !important;
    }
    .viewer-frutas .gallery-cell{
        width:50% !important;
    }
    .viewer-abarrote .gallery-cell{
        width:50% !important;
    }
    
    .wbt-welcome{
        display:none;
    }
    
    #frm-login{
        margin-top:250px;
    }
    
    .box-msg{
        width:calc(100% - 40px);
    }
}

@media (max-width: 380px) {
    .wbt-panel{
        width:100%;
    }
}