
/*-*--*-*-*-*-*-**--*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*--*--**-*estilos generales-*-*--*-*-*-*-*-*-*-*-*-*---*-*-*-*-*-*-*-*-*-*-*-*-**/

body{
    font-family: 'Montserrat', sans-serif;
    font-size:1.5em;
    letter-spacing: 0.01em;
    color: #333;
}

.pt-container-ppal{
    padding-top:80px;
}

@media(max-width:768px){
    .pt-container-ppal {
        padding-top: 40px;
    }
}
@media(max-width:420px){
    .pt-container-ppal {
        padding-top: 10px;
    }
}

@media(min-width:900px)and (max-width:1024px){
    .pt-container-ppal {
        padding-top: 10px;
    }
}

@media(min-width:1280px)and (max-width:1368px){
    .pt-container-ppal {
        padding-top: 10px;
    }
}
@media(min-width:1370px)and (max-width:1441px){
    .pt-container-ppal {
        padding-top: 10px;
    }
}
@media (min-width: 1442px)and (max-width: 1600px) {
    .pt-container-ppal {
        padding-top: 10px;
    }
}
@media(min-width:2100px){
    .pt-container-ppal {
        padding-top: 10%;
    }

}



/*----------------------------------------------------*/
/*--------------COLORES CORPORATIVOS------------------*/
/*-------------------------------------------------------*/

.color-menu-personalizado {color:#c966cd;}
.color-menu-personalizado-light {color:#dea1e0;}
.color-perfil {color:#87cdde;}
.color-menus-saludables {color:#92bb00}
.color-menus-saludables-light {color:#cdde87}
.color-trivial {color:#b3b3b3;}
.color-other {color:#000!important;}

.bg-color-menu-personalizado{background-color:#c966cd; }
.bg-color-menu-personalizado-light{background-color:#dea1e0; }
.bg-color-perfil{background-color:#87cdde; }
.bg-color-menus-saludables{background-color:#92bb00;}
.bg-color-menus-saludables-light{background-color:#cdde87;}
.bg-color-trivial{background-color: #b3b3b3;}
.bg-color-other{background-color: #000;}
.bg-color-lista-compra{background-color: #ff7f2a;}

.bg-color-grey{background-color: #ccc;}



.border-menu-personalizado{border:2px solid #c966cd!important; }
.border-menu-personalizado-light{border:2px solid #dea1e0!important; }
.border-perfil{border:2px solid #87cdde!important; }
.border-menus-saludables{border:2px solid #92bb00!important; }
.border-menus-saludables-light{border:2px solid #cdde87!important; }
.border-trivial{border:2px solid #b3b3b3!important;}
.border-other{border:2px solid #000!important;}
.border-lista-compra{border:2px solid #ff7f2a!important;}



/*------------------------------------------------*/
/*---------------LISTADOS-------------------------*/
/*------------------------------------------------*/

.item-list-style{
    padding:20px 5px 20px 5px;
    border-bottom:1px solid #ccc;
    cursor:pointer;
    color:#333!important;

}
.item-list-style:hover, .item-list-style:active,.item-list-style:active {
    /*background-color: #ccc;*/
    background-color: #000;
    color:#fff!important;


}

.item-list-style-home{
    padding:20px 5px 20px 5px;
    border-bottom:1px solid #ccc;
    cursor:pointer;
    color:#333!important;
}

.item-list-style-home:hover, .item-list-style-home:active,.item-list-style-home:active {
    /*background-color: #ccc;*/
    background-color: #000;
    color:#fff!important;


}

@media(max-width:768px){
    .item-list-style-home{
        padding:10px 5px 10px 5px;

    }
}

/*-----------------------------------------------------*/
/*----------- DIVS, CAJAS , ESTILOS GENÉRICOS-----------*/
/*------------------------------------------------------*/


/*******************************TOGGLE SWITCHES STYLE*****************************/
.switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}
.switch input {
    display:none;
}
.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}
.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
}
input:checked + .slider {
    background-color: #66bb6a;
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.mt-label-switch{
    margin-top:10px;
}

/*switches small para filters recetario*/
.switch-small {
    display: inline-block;
    height: 20px;
    position: relative;
    width: 50px;
}

.switch-small input {
    display:none;
}

.slider-small:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 16px;
}
/*END TOGGLE SWITCHES STYLE
*/


/******************* ESTILOS DE CAJAS, CAJA SOLID AY CAJA CON BORDE Y TÍTULO EN CAJITA*******************************************/
.solid-box{
    padding:20px;
    color:#fff;
    margin-top:20px;
}

.border-box{
    position:relative;
    padding:20px;
    margin-top:40px;
}

.title-box-border-box{
    position:absolute;
    left:40px;
    top:-20px;
    padding:15px;
    color:#fff;

}
.container-box-border-box{
    margin-top:40px;
}

/*----------------------------------------------------*/
/*--------------BOTONES CORPORATIVOS------------------*/
/*-------------------------------------------------------*/
.btn-custom{
    color:#fff;
    width: 100%;
    font-size:20px;
    text-transform: uppercase;
}
.btn i{
    font-size:20px!important;
}
.btn-custom:hover{
    opacity:0.8;
    color:#fff;
    width: 100%;
}
.btn-menu-personalizado{background-color:#c966cd!important; }
.btn-menu-personalizado-light{background-color:#dea1e0!important; }
.btn-perfil{background-color:#87cdde; }
.btn-menus-saludables{background-color:#92bb00 }
.btn-menus-saludables-light{background-color:#cdde87 }
.btn-trivial{background-color: #b3b3b3}
.btn-other{background-color: #000}
.btn-lista-compra{background-color: #ff7f2a}
.btn-delete{background-color: #c83737}


/*----------------------------------------------------*/
/*------------TABS PERSONALIZADOS,  PARA MENÚS CON COLORES CORPORATIVOS. PARA LA TAB DEL MENÚ PERSONALIZADO Y PARA LAS DE LOS MENÚS SALUDABLES------------------*/
/*-------------------------------------------------------*/

.nav-tabs-menu-personalizado>li.active>a, .nav-tabs-menu-personalizado>li.active>a:focus, .nav-tabs-menu-personalizado>li.active>a:hover {
    color: #fff;
    cursor: default;
    background-color: #c966cd;
    border: 1px solid #c966cd;
    border-bottom-color: transparent;
}

.nav-tabs-menu-personalizado>li{
    float: left;
    margin-bottom: 5px;
    margin-left:5px;
    background-color: #e9afdd;
}
.nav-tabs-menu-personalizado>li a:hover, .nav-tabs-menu-personalizado>li a:focus, .nav-tabs-menu-personalizado>li a:active{
    background-color: #c966cd;
    border: 1px solid #c966cd;
}

.tab-content-menu-persoanlizado{
    border: 2px solid #c966cd;
    padding:20px;
}


.nav-tabs-menus-saludables>li.active>a, .nav-tabs-menus-saludables>li.active>a:focus, .nav-tabs-menus-saludables>li.active>a:hover {
    color: #fff;
    cursor: default;
    background-color: #92bb00;
    border: 1px solid #92bb00;
    border-bottom-color: transparent;
}
.nav-tabs-menus-saludables>li {
    float: left;
    margin-bottom: 5px;
    margin-left:5px;
    background-color: #cdde87;
}

.nav-tabs-menus-saludables>li a:hover, .nav-tabs-menus-saludables>li a:focus, .nav-tabs-menus-saludables>li a:active{
    color: #fff;
    cursor: default;
    background-color: #92bb00;
    border: 1px solid #92bb00;
    border-bottom-color: transparent;
}

.tab-content-menus-saludables{
    border: 2px solid #92bb00;
    padding:20px;
}



/*----------------------------------------------------*/
/*-------------TEXTOS, PADINGS, MARGINS------------------*/
/*-------------------------------------------------------*/

h1{
    font-size:2.5em!important;
}
.antirow{
    margin-left:0px;
    margin-right:0px;
}
.whitecolor{
    color:white;
}
.w100pc{
    width: 100%;
}
.img-responsive-custom{
    max-width: 100%;
    height: auto;
}
.line-height-80{
    line-height: 80px;
}
.line-height-60{
    line-height: 60px;
}
.mt80{
    margin-top: 80px;
}
.pt0{
    padding-top:0px;
}
.pt80{
    padding-top: 80px;
}
.mt20{
    margin-top:20px;
}

.mt30{
    margin-top:30px;
}
.p10{
    padding:10px;
}

.plr0{
    padding-left:0px;
    padding-right:0px;
}
.ptpb50{
    padding-bottom: 50px;
    padding-top: 50px;
}
.ptb120{
    padding-bottom: 120px;
    padding-top: 120px;
}
.ptb200{
    padding-bottom: 200px;
    padding-top: 200px;
}
.pb40{
    padding-bottom:40px;
}
.pb50{
    padding-bottom:50px;
}
.pb80{
    padding-bottom:80px;
}
.mt-50{
    margin-top:-50px;
}
.mt60{
    margin-top:60px;
}
.mt40{
    margin-top:40px;
}
.mb60{
    margin-bottom:60px;
}
.mt10{
     margin-top:10px;
 }
.mt0{
    margin-top:0px!important;
}
.mauto{
    margin:auto!important;
}
a{
    outline: 0!important;
    color: #ffffff!important;
    cursor:pointer!important;
}
a:hover{
    text-decoration: none!important;
    color: #4f2c1d!important;
    cursor:pointer!important;
    outline: 0!important;
}
a:active{
    text-decoration: none!important;
    outline: 0!important;
}
a:focus {
    text-decoration: none !important;

}
.a-black{
    color:#333;
}

.pointer{
    cursor:pointer;
}
.pointer:hover{
    opacity:0.7;
}
.small-text{
    font-size:0.7em;
    text-transform: lowercase;
}
/*****************************************************************************/
/**********************************CHECKBOX Y RADIOBUTTON CUSTOM*****************/
/***************************************************************************************/
.ac-custom {
    padding: 0 2em;
    max-width:100%;

}
.ac-custom label {
    display: inline-block;
    position: relative;
    font-size: 2em;
    padding: 0 0 0 80px;
    vertical-align: top;
    color: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
    width: 30px;
    height: 30px;
    top: 50%;
    left: 0;
    margin-top: -15px;
    position: absolute;
    cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}

.ac-custom label::before {
    content: '';
    border: 4px solid #CCC;
    transition: opacity 0.3s;
}

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
    color: #333;
}

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
    opacity: 0.8;
}
/*trazado radio button*/
.ac-custom svg path {
    stroke: #92bb00;
    stroke-width: 13px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.ac-custom label {
    display: inline-block;
    position: relative;
    font-size: 1em;
    padding: 0 0 0 50px;
    vertical-align: top;
    color: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: color 0.3s;
}

.ac-custom svg {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    margin-top: -10px;
    left: 5px;
    pointer-events: none;
}

.ac-custom li {
    margin: 0 auto;
    padding: 1em 0;
    position: relative;
}
@media (max-width:600px){
    .ac-custom {
        padding: 0 1em;
        max-width:100%;
        margin: 0 auto;
    }

}


/*********************************************LOGIN***********************************************************************************/
/*.box-login {*/
/*position: absolute;*/
/*left: 50%;*/
/*top: 50%;*/
/*transform: translate(-50%, -50%);*/
/*width: 30%;*/
/*height: 60%;*/
/*padding: 20px;*/
/*text-align: center;*/
/*box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);*/
/*}*/

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-MAIN MENU HORIZONTAL NAVBAR*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

.navbar-header{
    height: 80px;

}
.mt-menu-horizontal{
    margin-top:60px;
}

/************************************************DIV TITULO DE TODAS PAGINAS MENOS HOME**********************************************/
.div-title{
     padding:10px 20px 10px 20px;
     color:#fff;
     margin-top:40px;
     font-size:25px;
 }
.div-title i{
    cursor:pointer;
    font-size:25px;
    transition: all .2s ease-in-out;
}
.div-title i:hover{

    transform: scale(1.5);
}

@media(max-width:700px){
    .div-title{
        font-size:18px;
    }
}

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-DASHBOARD, HOME*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
.text-btn-home{
    color:#fff;
}
.p-text-btn-home{
    padding:10px 10px 10px 30px;
}

.btn-home:hover img{
   -webkit-animation: bounce 1s;
    animation: bounce 1s;
    /*transition: all 0.3s ease-in-out;*/
    /*transform: scale(0.8);*/

}

.btn-home:hover {
   opacity:0.8;
}
.border-box-home{
    border:10px solid #fff;
    position:relative;
    padding:20px 20px 10px 20px;
    /*margin-top:40px;*/
}

.mt-lista-home{
    margin-top:70px;
}

.mt-logout-home{
    margin-top:30%;
}

.mt-logobighome{
    margin-top:10px;
}
.text-welcome-home{
   margin-top:40px;
    margin-bottom:20px;
}
@media (max-width: 415px) {

    .text-btn-home{
        font-size:0.68em;
    }
}
@media (max-width: 768px) {
    .text-btn-home{
      margin-bottom:10px;
    }
    .p-text-btn-home{
        padding:15px 3px 0px 3px;
    }
    .border-box-home{
        padding:10px 5px 2px 5px;
        border:5px solid #fff;
    }
    .text-btn-home{
        text-align:center;
    }
    .icono-menu-saludable{
        width:40%;
    }
    .mt-lista-home{
        margin-top:10px;
    }
    .mt-logout-home{
        margin-top:10px;
    }
    .text-welcome-home{
        font-size:1.3em;
        margin-bottom:20px;
    }
}
@media(min-width:900px)and (max-width:1024px){
    .icono-menu-saludable{
        width:40%;
    }
    .mt-lista-home{
        margin-top:20px;
    }
    .mt-logout-home{
        margin-top:80px;
    }
}

@media (min-width: 1199px)and (max-width: 1367px) {
    .icono-menu-saludable{
        width:36%;
    }
    .mt-lista-home{
        margin-top:40px;
    }
    .border-box-home{
        padding:10px 5px 2px 5px;
        border:5px solid #fff;
    }
    .mt-logout-home{
        margin-top:60px;
    }
}

/*----------------------------------------*/
/*----------CUADRÍCULA CUADRADOS MISMA ALTURA  HOME--------------*/

.col-container {
    display: table;
    width: 100%;
}

.col {
    display: table-cell;
    cursor:pointer;
}



@media only screen and (max-width: 600px) {
    .col {
        display: block;
        width: 100%;
    }
}


/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-FILTROS RECETARIO*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

.mt-arrow-filters{
    margin-top:-40px;
}

.receta-and-articulo-item-list{
    background-size:cover;
    height:200px;
    width:100%;
    background-position:50% 50%;

}
.text-receta-and-articulo-item-list{
    color:#fff;
    position:absolute;
    bottom:20px;
    left:20px;
}

.black-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9;
}

/****************************************************LISTADO DE ARTICULOS***************************************************************/
.date-box{
    position:absolute;
    top:0;
    right:0;
}


/*-*-*-*---*-*-*--*-*-*--*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*RESPONSIVE-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*---*-*-*-*-*-*/


/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical iphone 3, 4, 5 **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
/*@media (width: 320px) {*/
@media (min-width: 318px) and (max-width: 329px) {

}

/*v**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical androids peques**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 330px) and (max-width: 374px) {

}

/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_horizontal iphone 3, 4, 5 **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 479px) and (max-width: 569px) {

}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical iphone 6 u 6plis **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 374px)  and (max-width: 639px) {

}

@media (max-width:639px){
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 60%;
        padding: 10px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }
}


/**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_horizontal iphone 6 y 6plus **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 640px) and (max-width: 736px) {
    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 60%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }

}

/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ Small devices (tablets, 768px and up) **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width:737px) and (max-width: 991px){
    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 60%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }

}

/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ ipad 3/4 horizontal  1024x 768**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media(min-width: 992px)and (max-width: 1199px){

    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 60%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }
}


/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ po típico 1366x768**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ */

@media (min-width: 1199px)and (max-width: 1367px) {
    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 60%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }
}

@media (min-width: 1368px)and (max-width: 1598px) {
    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 50%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }
}
@media (min-width: 1599px)and (max-width: 1599px) {
    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 60%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }
}

@media (min-width: 1600px)and (max-width: 1930px) {
    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height:45%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }
}


@media (min-width: 1935px) {
    /*********************************************LOGIN***********************************************************************************/
    .box-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        height: 40%;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    }
}
