/* 1. Add your custom Css styles below
2. Place the this code in your template:
 <link href="css/custom.css" rel="stylesheet">*/
/* ----------------------------------------------------------------------
	VARIABLES
-------------------------------------------------------------------------*/
:root{
--white-color:#fff!important;
--pear-color:#d8f837!important;
--yellow-color:#FDDF4F!important;
--black-color:#000!important;
--smoky-color:#1d1d1d!important;
--poppins-regular:400;
--poppins-semi-bold:600;
--poppins-bold:700;
--poppins-black:900;
}
/* ----------------------------------------------------------------------
	SELECTION
-------------------------------------------------------------------------*/
::-moz-selection { /* Code for Firefox */
    color:var(--black-color);
    background:var(--pear-color);
  }

  ::selection {
    color:var(--black-color);
    background:var(--pear-color);
  }
/* ----------------------------------------------------------------------
	UTILIDADES
-------------------------------------------------------------------------*/
.space-evenly {
    justify-content: space-evenly;
}
/* ----------------------------------------------------------------------
	SECCIÓN VIDEO
-------------------------------------------------------------------------*/
.responsive-video-section{
    display: none;
}
section.main-home-content{
    padding:0 0 50px 0!important;
}

/* ----------------------------------------------------------------------
	HEADER
-------------------------------------------------------------------------*/
#mainMenu a{
    color:var(--pear-color)!important;
    font-weight: var(--poppins-black)!important;
}
.dark:not(.submenu-light) #mainMenu nav > ul > li .dropdown-menu > li > a:hover, #mainMenu .container.r-n nav > ul > li > ul > li > a:hover{
    color:var(--white-color)!important;
}
.logo-header {
    display: inline!important;
    max-width: 65%;
}
.dropdown i{
    color: var(--pear-color);
    font-size: var(--poppins-bold);
}
.dark #header .header-inner .lines,.dark #header .header-inner .lines:after,.dark #header .header-inner .lines:before,#header.dark .header-inner .lines, #header.dark .header-inner .lines:after,#header.dark .header-inner .lines:before{
    background-color:var(--pear-color);
}
.r-n{
    display: none !important;
}
.dark .header-extras a > i{
    color:var(--pear-color)!important;
}
.dark .header-extras a:hover > i{
    color:var(--white-color)!important;
}

/* ----------------------------------------------------------------------
	MANKA
-------------------------------------------------------------------------*/
.about-mk p{
    color:var(--white-color);
    font-weight: var(--poppins-regular);
}
.about-mk span{
    font-weight: var(--poppins-bold);
}
.about-mk img{
    max-width: 177px;
    margin-bottom: 2rem;
}
.papas {
    position: absolute;
    right: -8rem;
    bottom: 4rem;
    z-index: -1;
}
.pollo {
    position: absolute;
    bottom: -3rem;
    left: -3rem;
    z-index: -1;
}
/* ----------------------------------------------------------------------
	APP
-------------------------------------------------------------------------*/
.bg-app-manka {
    background-image: url(../images/home/bg-app.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    padding-bottom: 0;
    padding-top:10px;
}
.stores-width {
    max-width:30%;
}
.app-responsive{
    display: none;
}
.app-manka h3{
    color: var(--white-color);
    font-weight: var(--poppins-bold);
    line-height: 2.75rem;
    font-size: 1.78571429em;
}
.app-manka span{
    color: var(--yellow-color);
}
.app-manka p{
    font-size: 1.13rem;
    line-height: 1.95rem;
    font-weight: var(--poppins-regular)
}
/* ----------------------------------------------------------------------
	PRODUCTOS - MARCAS
-------------------------------------------------------------------------*/
/* TITULOS DE SECCIÓN */
.order-fav h3, .mp h3, .tit-mnk h3{
    font-weight: 700;
    color: var(--pear-color);
    line-height: 2.75rem;
    font-size: 1.78571429em;
}
/* TARJETAS */
.card-mk.center{
    padding: 5rem 1rem 2.5rem 1rem;
}
.card-mk.right{
    padding: 5rem 1rem 2.5rem 1.8rem;
}
.card-mk.left{
    padding: 5rem 1.8rem 2.5rem 1rem;
}
.card-mk.minoru, .card-mk.beats{
    padding:3.5rem 2rem 3.5rem 2rem;
}
.card-mk p{
    font-size: 14px!important;
    font-weight: 700!important;
    line-height: 1.5!important;
    margin-top: 2.2rem!important;
    height: 65px;
}

/* .card-mk.minoru p{
    width: 35%;
    height:84px
} */
/* CUSTOM GUTTER TARJETAS */
.custom-gutter > [class*='col-'] {
    padding:3px;
}
/* TARJETAS FONDOS */
.brownburg {
    background-image: url(../images/home/bg-brands/browns-burger-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
.tuttoapos {
    background-image: url(../images/home/bg-brands/tutto-apposto-pizza-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
.omalleysw {
    background-image: url(../images/home/bg-brands/omalleys-wings-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
.freshguru {
    background-image: url(../images/home/bg-brands/fresh-guru-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
.rosti262 {
    background-image: url(../images/home/bg-brands/rosti-262-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
.gaijinram {
    background-image: url(../images/home/bg-tarjetas/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
.minoru{
    background-image: url(../images/home/bg-brands/minoru-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
.beats{
    background-image: url(../images/home/bg-brands/papa-beats-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
}
/* LOGOS PRODUCTOS */
.brownburg img, .tuttoapos img, .omalleysw img, .freshguru img, .gaijinram img, .rosti262 img, .minoru img{
    height: 120px;
}
.beats img{
    height: 90px;
    margin-bottom:30px;
}
.product-title a{
    color:var(--white-color)!important;
    font-weight: var(--poppins-bold);
    font-size: 15px;
}
.product-title a:hover{
    color:var(--pear-color)!important;
}
.food-title {
    color: var(--white-color);
    opacity: 1!important;
    line-height: 1rem!important;
    font-size: 13px!important;
}
.order-btn a{
    color: var(--pear-color)!important;
    background-color: var(--black-color);
    padding: 1px 4px;
    border-radius: 4px;
    border-style: solid;
    border-color: var(--pear-color);
    border-width: .5px;
}
.order-btn a:hover{
    color:var(--black-color)!important;
    background-color: var(--pear-color);
}
.product-text{
    width:80%;
}
.nav-custom {
    position: absolute;
    right: 0;
    top: -45px;
}
.customPrevBtn,.customNextBtn{
    color: var(--black-color);
    background-color: var(--pear-color);
    padding: 2px 5px 1px 5px;
    border-style: solid;
    border-color: var(--pear-color);
    border-width: .5px;
}
.customPrevBtn:hover,.customNextBtn:hover{
    color: var(--pearl-color);
    background-color: var(--black-color);
}
/* ----------------------------------------------------------------------
	ORDENAR
-------------------------------------------------------------------------*/
.h-90{
    height: 90px;
}
.padd-ordenar {
    padding-top: 2rem;
    padding-bottom: 0;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
/* ----------------------------------------------------------------------
	MAPA
-------------------------------------------------------------------------*/
.p-alt p{
    font-size: 1.4rem;
    line-height: 2rem
}
/* ----------------------------------------------------------------------
	SUCURSALES
-------------------------------------------------------------------------*/
.cs{
    visibility: hidden;
}
.coming-soon > h4 {
    color: var(--pear-color);
    font-weight: 700;
    animation:1.5s blinker linear infinite;
    -webkit-animation:1.5s blinker linear infinite;
    -moz-animation:1.5s blinker linear infinite;
}
@-moz-keyframes blinker
{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker
{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker
{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
 }
.suc{
    z-index: 10;
    padding-top: 50px;
}
.card-suc{
    background-color: var(--pear-color);
    border-radius: 7px;
    padding: 20px 10px 20px 20px;
}
.c-r{
    z-index: 1;
}
.card-suc p{
    color: var(--black-color);
    font-size: 12px!important;
}
.card-suc h5{
    font-weight: 800;
    color: var(--black-color);
}
.card-suc h5 a{
    font-weight: 800;
    color: var(--black-color)!important;
}
.card-suc h5 a:hover{
    text-decoration: underline!important;
    color: var(--smoky-color)!important;
}
.card-suc i{
    color:var(--black-color);
    font-size: 1.5rem;
    margin-right: 1rem;
    padding-top: 3px;
}
.hamb {
    position: absolute;
    right: 0;
    bottom: -2rem;
}
/* ----------------------------------------------------------------------
	FOOTER
-------------------------------------------------------------------------*/
#footer{
    background-color: var(--smoky-color)!important;
}
#footer hr{
    padding: 5px;
    border-color: var(--white-color)!important;
    margin: 0;
}
#footer a{
    color: var(--white-color)!important;
    line-height: 17px;
}
#footer a:hover{
    color: var(--pear-color)!important;
}
#footer i{
    color:var(--pear-color)!important;
    font-size: 18px;
}
#footer i:hover{
    color:var(--white-color)!important;
}
#legales p{
    font-size: 12px;
    color: var(--white-color)!important;
}
/* ----------------------------------------------------------------------
	BOTONES
-------------------------------------------------------------------------*/
.btn-ordenar {
    text-transform: inherit!important;
    font-weight: var(--poppins-bold);
    font-size: 13px!important;
    letter-spacing: 0!important;
    background-color: var(--yellow-color);
    padding: 10px 23px!important;
    color: var(--black-color)!important;
    border-radius: 10px!important;
    border-width: 1px;
    border-color: var(--yellow-color);
    border-style:solid;
}
.btn-ordenar:hover {
    background-color: var(--black-color);
    color: var(--yellow-color)!important;
}
.btn-vermenu {
    text-transform: inherit!important;
    font-weight: var(--poppins-bold);
    font-size: 13px!important;
    letter-spacing: 0!important;
    background-color: var(--white-color);
    padding: 10px 23px!important;
    border-radius: 10px!important;
    color: var(--black-color)!important;
    border-width: 1px;
    border-color: var(--white-color);
    border-style:solid;
}
.btn-vermenu:hover{
    background-color: var(--black-color);
    color: var(--white-color)!important;
}
.whats-cta{
    position: fixed;
    right: 0;
    bottom: 5%;
    right: 3%;
    z-index: 500;
}
.whats-cta img {
    width: 50px;
    height: auto;
}
/* ----------------------------------------------------------------------
	RESPONSIVO
-------------------------------------------------------------------------*/
@media (max-width: 1183px){
    .card-mk p{
        height:84px
    }
}

@media (min-width: 1024px){
    .ins {
        margin-right: 3rem;
    }
    .fb {
        margin-right: .7rem;
        margin-left: 4rem;
    }
    .header-extras > ul > li > a > i {
        font-weight: 300;
        margin-top: 22px;
    }
}
@media (max-width: 1024px){
    #header.header-mini .header-inner #mainMenu > .container nav > ul > li > a{
        color:var(--white-color)!important;
        font-size:1.2em;
    }
    .chevron-display {
        display: none;
    }
    .d-n{
        display: none!important;
    }
    .r-n{
        display: block!important;;
    }
}
@media (max-width: 991px){
    /* .card-mk.minoru p{
        width: 50%;
        height:84px;
    } */
    .app-desktop{
        display: none;
    }
    .app-responsive{
        display: block;
    }
    .app-manka{
        padding-top: 60px;
    }
    .bg-app-manka{
        background-position: top left;
    }
    section.main-home-content {
        padding-bottom: 0!important;
    }
}
@media (max-width:800px){
    /* .card-mk.minoru p{
        height:103px;
    } */
    .card-mk.minoru p, .card-mk.beats p{
        height: 105px;
    }
}
@media (max-width: 767px){
    .papas{
        right:-12rem;
    }
    .pollo{
        left:-9rem;
    }
    .img-rm-2{
        margin-top: 2rem;
    }
    .card-mk p, .card-mk.minoru p, .card-mk.beats p{
        width: 100%;
        height: 100%;
    }
    .card-mk.right,.card-mk.left,.card-mk.center,.card-mk.minoru{
        padding:5rem 2rem 2.5rem 2rem;
    }
    .c-r{
        margin-top: 20px;
    }
}
@media (max-width: 575px){
    .papas, .pollo, .hamb{
        display: none;
    }
    .responsive-video-section{
        display: block;
        padding-top: 0px!important;
    }
    .video-section{
        display: none;
    }
    #apple-badge{
        margin-top: 30px;
    }
    #footer i{
        font-size: 28px!important;
    }
}
/* ----------------------------------------------------------------------
	MODAL MANKA
-------------------------------------------------------------------------*/
.dark .modal-header{
    border-bottom-color:var(--pear-color)!important;
    height: 51.16px;
}
.close{
    color:var(--pear-color)!important;
    opacity: 1!important;
    text-shadow: none!important;
}
.modal{
    background-color: rgba(0,0,0,0.75);
}
.modal-body p{
    color:var(--pear-color);
    margin:0;
}

/* ----------------------------------------------------------------------
	NUEVO DE MANKA
-------------------------------------------------------------------------*/
@font-face {
    font-family: "sharp-grotesk-book";
    src: url("../fonts/SharpGroteskBook25.woff");
}
@font-face {
    font-family: "sharp-grotesk-bold";
    src: url("../fonts/SharpGroteskBold25.ttf");
}
@font-face {
    font-family: "sharp-grotesk-book20";
    src: url("../fonts/SharpGroteskBook20.woff");
}
.text-nuevo {
    font-family: "sharp-grotesk-book";
    font-size: 30px;
    line-height: 41px;
    color: #f8f8f8;
    box-sizing: border-box;
}
.text-nuevo2 {
    font-family: "sharp-grotesk-bold";
    font-size: 28px;
    line-height: 41px;
    color: #f6f6f6;
    box-sizing: border-box;
}
.txt-banner {
    font-family: serif;
    font-size: 40px;
    color: #f6f6f6;
    font-weight:bold;
}
.banner-principal {
    display: flex;
    width: 100%;
    height: 590px;
    background-image: url("../images/nuevo/manka1.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 500px; */
    overflow: hidden;
    /* filter: brightness(50%); */
}
.img-banner {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 590px;
    filter: brightness(50%);
}
.img-banner2 {
    width: 100%;
    height: 100%;
}
.contenedor-banner {
    position: relative;
    width: 87%;
    top: 45%;
    margin: 0 auto;
    margin-bottom: 20px;
    /* filter: brightness(100%); */
    /* background-color: rgba(0,0,0,0.25); */
}
.contenedor-botones-banner {
    display: flex;
}
.boton-correcto {
    padding: 10px 25px !important;
    background-color: var(--yellow-color);
    border-style: solid;
    border-color: var(--yellow-color);
    color: #000;
}
.boton-banner1 {
    padding: 10px 25px !important;
    background-color: var(--yellow-color);
    border-style: solid;
    border-color: var(--yellow-color);
    color: #000;
    border-radius: 7px;
    margin-right: 25px;
    font-size: 18px;
    font-family: "sharp-grotesk-book20";
}
.boton-banner1:hover {
    background-color: #fef2b9;
    border-color: #fef2b9;
    color: #f6f6f6 !important;
}
.boton-banner1:visited {
    color: #000 !important;
}
.boton-banner2 {
    padding: 10px 25px;
    background-color: transparent;
    color: #f6f6f6 !important;
    border-style: solid;
    border-radius: 7px;
    border-color: #f6f6f6;
    /* margin-right: 25px; */
    font-size: 18px;
    font-family: "sharp-grotesk-book20";
}
.boton-banner2:hover {
    background-color: #f6f6f6 !important;
    color: #000 !important;
}
.boton-banner2:visited {
    color: #000;
}
.salto {
    display: none;
}
.banner-app {
    display: flex !important;
    width: 100%;
    height: 70%;
}
.ba1 {
    width: 50%;
    display: block;
    /* background-image: url("../images/nuevo/manka2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; */
}
.ba2 {
    display: flex;
    width: 50%;
    /* background-color: #F5F1E7; */
    background-color: #F5F1E7;
}
.contenedor-ba2 {
    vertical-align: middle;
    margin: auto 0;
    padding: 10% 17%;
}
.texto-app {
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
}
.textoa1 {
    color: #9b9b9b;
    font-size: 18px;
    font-family: "sharp-grotesk-book";
}
.textoa2 {
    color: #4B6A1E;
    font-size: 25px;
    /* line-height: 41px; */
    font-weight: bold;
    font-family: "sharp-grotesk-book";
}
.textoa3 {
    color: #9b9b9b;
    font-size: 18px;
    /* font-weight: 400; */
    font-family: "sharp-grotesk-book";
}
.textoa4 {
    color: #9b9b9b;
    font-size: 12px;
    /* font-weight: 400; */
    font-family: "sharp-grotesk-book";
}
.contenedor-link-app {
    display: flex;
    align-items: center;
    margin-top: 40px !important;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.centrar-link {
    display: flex;
    margin: 0 auto;
}
.contenedor-boton-link {
    display: block;
    /* margin-bottom: 50px; */
}
.boton-banner-l {
    /* padding: 10px 35px; */
    /* background-color: var(--yellow-color); */
    /* border-style: solid;
    border-color: var(--yellow-color); */
    color: #000 !important;
    border-radius: 7px;
    margin-right: 10px !important;
    font-size: 18px;
    padding: 0 !important;
}
/* .boton-banner-l:hover {
    background-color: #c7b145;
    border-color: #c7b145;
    color: #000 !important;
} */
.boton-banner-l:visited {
    color: #000 !important;
}
.banner-app2 {
    display: none !important;
    z-index: 4 !important;
}
.bapp {
    width: 100%;
    background-color: #F5F1E7;
}
.contenedor-link-app2 {
    display: flex;
    margin-top: 40px !important;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}
.color-manka {
    color: #FDDF4F !important;
}
.color-manka:hover {
    color: #FDDF4F !important;
}
#footer a:hover {
    color: var(--yellow-color) !important;
    margin-right: 10px;
}
#footer i {
    color: var(--yellow-color) !important;
}
#footer a {
    margin-right: 10px;
}
.dark .header-extras a > i {
    color: var(--yellow-color) !important;
}
.img-estrella {
    width: 55px;
    height: 55px;
}
#btn2 {
    display: none !important;
}
#legales p {
    color: var(--yellow-color) !important;
}
#legales a {
    color: var(--yellow-color) !important;
}
.margin1 {
    margin-left: 0px;
}
#apple-badge {
    margin: 0;
}
/* TARJETAS */
.margen-tarjetas {
    border-radius: 10px;
}
.margen-portfolio {
    margin: 10px;
}
/* @media(max-width: 767px) */
@media(max-width: 860px) {
    .boton-banner-1 {
        max-width: 50px !important;
        padding: 0 !important;
    }
    .contenedor-botones-banner {
        display: block !important;
    }
    .contenedor-link-app {
        display: block !important;
    }
    .contenedor-link-app2 {
        display: block;
    }
    .salto {
        display: block;
    }
    .banner-app {
        display: none !important;
    }
    .banner-app2 {
        display: block !important;
    }
    .contenedor-banner {
        top: 0%;
        background-color: rgba(0,0,0,0.50);
        width: 100%;
        height: 100%;
        padding: 10% 10%;
    }
    #btn1 {
        display: none !important;
    }
    #btn2 {
        display: block !important;
    }
    .margin1 {
        margin-right: 9px;
    }
    .textoa1 {
        font-size: 15px;
    }
    .textoa2 {
        font-size: 17px;
    }
    .textoa3 {
        font-size: 15px;
    }
    .textoa4 {
        font-size: 10px;
    }
    .text-nuevo {
        font-size: 25px;
    }
    .text-nuevo2 {
        font-size: 23px;
    }
    .banner-principal {
        background-image: url("../images/nuevo/manka_banner_responsive.png");
    }
}
/* ----------------------------------------------------------------------
	FIN MANKA
-------------------------------------------------------------------------*/