html,body{font-family: 'Open Sans', sans-serif; font-size: 16px; color: #1c1c1c; line-height: 1.8; background-color: #1c1c1c;}
p{letter-spacing: 0.4px;}
.wrap-addmargin{width: 100%; max-width: 1400px; padding: 0 35px; margin: 0 auto; box-sizing: border-box;}
.tit-section{font-family: 'Praise', cursive; font-size: 66px; text-align: center; color: #dc4745;}
.tit-section > span{color: #1c1c1c;}
.txt-bco, .txt-bco .tit-section > span{color: #fff;}
#inicio{padding-top: 50px;width: 100%;}

.btn-whats{position: fixed; bottom: 110px; right: 10px; z-index: 11; height: 80px; width: 198px;}
.btn-whats img{width: 100%; height: auto; position: absolute; transition: all 300ms ease-in-out;}
.btn-whats > img:first-child{opacity: 1;}
.btn-whats > img:last-child{opacity:.0;}
.btn-whats:hover > img:first-child{opacity: .75;}
.btn-whats:hover > img:last-child{opacity: 1;}

/* ----------------------------------------------------------------------- MENU ------------------------------------------------------------------------*/
.navbar {border-radius: 0; box-shadow: 0 0 20px rgba(0,0,0,1); margin: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 5; transition: all ease-in-out .3s;}
.navbar-default {background-color: rgba(28, 28, 28, 1.0); border: none;}
.menu-sitio.navbar-default .navbar-nav > li > a{text-transform: uppercase; font-size: 14px; letter-spacing: 3px; transition: all ease-in-out .3s; padding:40px 28px;}
.menu-sitio.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus{color: #fff; background-color: #dc4745;}

.navbar-brand{height:100px; padding-top: 10px; padding-bottom: 10px; transition: all ease-in-out .3s;}
.navbar-brand img{height: 100%;}

.menu-top-cambio.menu-sitio.navbar-default{background-color: rgba(28, 28, 28, 0.98);}
.menu-top-cambio.menu-sitio.navbar-default .navbar-nav > li > a{padding: 25px 28px;}
.menu-top-cambio .navbar-brand {height: 70px;}
/* ----------------------------------------------------------------------- MENU ------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- BANNER -----------------------------------------------------------------------*/
.bk-banner{background: url(../img/bk/banner.webp) center/cover fixed; no-repeat; padding-top: 130px; padding-bottom: 130px; color: #FFF; position: relative; z-index: 4; margin-top: 48px;}
.bk-banner::before{content: ''; width: 100%; position: absolute; top: 0; height: 98px; background: url(../img/bk/adorno-01.webp) top center/auto 100% repeat-x; opacity: 0.4;}
.cont-banner{margin-left: 8.33333333%; text-align: center; text-shadow: 2px 2px rgba(0, 0, 0, 0.85);}
.cont-banner > img{display: block; margin: 0 auto; width: 100%; max-width: 360px; opacity: 0.9;} 
.cont-banner > h1{padding: 0 20px; position: relative; text-transform: uppercase; font-size: 18px; letter-spacing: 3px; width: 100%; max-width: 910px; margin: 10px auto; display: block; line-height: 1.8;}
.cont-banner > h1::before{content: ''; width: 120px; height: 2px; background-color:#dc4745; display:block; margin:  0 auto 24px;}
.cont-banner > a{background-color: rgba(220, 70, 69, 0.8); display: inline-block; padding: 8px 24px; color:  #fff; text-transform: uppercase; letter-spacing: 4px; margin-top: 20px; transition: all ease-in-out .3s;}
.cont-banner > a:focus, .cont-banner > a:hover{background-color: rgba(220, 70, 69, 1); text-decoration: none;}
.redes-sociales{top: 0; bottom: 0; position: absolute;}
.redes-sociales > div{display: table; width: 100%; height: 100%;}
.redes-sociales > div > span{display: table-cell; vertical-align: middle; width: 100%; height: 100%;}
.redes-sociales > div > span::before, .redes-sociales > div > span::after{content: ''; width: 2px; background-color: #dc4745; height: 25%; display: block; margin-left: calc(50% - 1px);}
.redes-sociales > div > span > a {margin: 20px auto; display: block; width: 24px; opacity:0.75; transition: all ease-in-out .3s; position: relative; z-index: 2; transition: all ease-in-out .3s;}
.redes-sociales > div > span > a:hover, .redes-sociales > div > span > a:focus{opacity: 1;}
.redes-sociales > div > span > a > img{width: 100%;}
/* ---------------------------------------------------------------------- BANNER -----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/
.bk-alfabeto-gourmet{background-color: #efeade; text-shadow: 1px 1px 0 #fff; padding: 100px 0; position: relative; overflow: hidden;}
.bk-alfabeto-gourmet::before{content:''; position: absolute; top: 0; bottom: 0; right: 0; left: 50%; background: url(../img/var/alfabeto.webp) left center/auto 100% no-repeat;}
.bk-alfabeto-gourmet::after{content:''; position: absolute; bottom: -60px; left: 50%; background: url(../img/bk/adorno-02.webp) center/auto 100% no-repeat; width: 344px; height: 260px; margin-left: -660px;}
.alfabeto{position: relative; padding: 40px 15px 30px; margin: 0 20px;}
.alfabeto::before{content: ''; background: url(../img/var/comilla1.webp) center/contain no-repeat; position: absolute; top: 0; left: 0; width: 70px; height: 70px;}
.alfabeto::after{content: ''; background: url(../img/var/comilla2.webp) center/contain no-repeat; position: absolute; bottom: 0; right: 0; width: 70px; height: 70px;}
.autor-alfabeto span{display: inline-block; vertical-align: middle; padding: 1px 10px 0;}
.autor-alfabeto::before, .autor-alfabeto::after{content: ''; display: inline-block; width: 50px; height: 2px; background-color: #dc4745; vertical-align: middle; box-shadow: 1px 1px 0 #fff;}
/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/
.platillos{padding-top: 100px; padding-bottom: 100px; position: relative; overflow: hidden;}
.platillos::before{position: absolute; content: ''; top: 0; bottom: 0; left: 0; right: 0; background:url(../img/bk/adorno-03.webp)center/50% fixed repeat; opacity: .15;}
.section-txt-platillo{padding-bottom: 30px;}
.platillo-row{margin-top: 50px; position: relative; background: url(../img/bk/sombra-platillo.webp) center center/contain no-repeat;}
/*.platillo-row::before{content: ''; position: absolute; top: 0; bottom: 0; width: 200px; background: url(../bk/);}*/
.platillo-info{width:50%; display: inline-block; vertical-align: middle;}
.platillo-info > a:last-child{margin-right: 0;}
.platillo-img{width: 56%; display: inline-block;}
.platillo-img > img{width: 100%;}
.img-left{margin-left: -6.5%; box-shadow: 12px 12px 20px rgba(0,0,0,0.8);}
.img-right{margin-right: -6.5%; box-shadow: -12px 12px 20px rgba(0,0,0,0.8);}
.txt-platillo{padding: 2px 20px; border-left: 4px solid #dc4745; margin-bottom: 34px;}
.txt-platillo h3{font-size: 26px; margin-top: 0; margin-bottom: 16px; font-weight: 400;}
.txt-platillo p{margin: 0;}
.info-left{padding-left: 40px;}
.info-right{padding-right: 40px;}
.precio-platillo{width:auto; min-width: 160px; text-shadow: 2px 2px 1px #000; margin-right: 14px; display: block; float: left; text-align: center; cursor: pointer; height: 80px; cursor: pointer; margin-bottom: 18px;}
.precio-platillo span{display: inline-block; padding: 8px 10px; width: 100%; border: 1px solid #fff; color: #fff; background-color: rgba(255, 255, 255, 0.0); transition: all ease-in-out .3s; box-shadow: 2px 2px 1px #000; position: relative; z-index: 1;}
.precio-platillo:hover span, .precio-platillo:focus span{color: #fff; text-decoration: none; background-color: rgba(255, 255, 255, 0.1);}
.precio-platillo span::before{content:'pedir a domicilio';position: absolute; left: -1px; right: -1px; bottom: -10px; padding: 4px; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; background-color: #dc4745; z-index: -1; transition: all ease-in-out .3s; opacity: 0;}
.precio-platillo:hover span::before,.precio-platillo:focus span::before{bottom: -32px; opacity: 1;}

.zoom-foto{position: relative;}
.zoom-foto::before{content: "\e003"; font-family: 'Glyphicons Halflings'; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.6); color: #fff; font-size: 3em; text-align: center; padding-top: 22%; opacity: 0; cursor: pointer; transition: all ease-in-out .3s; opacity: 0;}
.zoom-foto:hover::before, .zoom-foto:focus::before{opacity: 0.9;}
/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/
.bk-galeria{background-color: #efeade; text-shadow: 1px 1px 0 #fff; padding: 100px 0; position: relative; overflow: hidden;}
.bk-galeria::before{content: ''; width: 100%; position: absolute; top: 0; height: 98px; background: url(../img/bk/adorno-04.webp) top center/auto 100% repeat-x; opacity: 0.25;}
.gal-platillo{padding-top: 40px;}
.gal-platillo > .grid-item{width: 25%; overflow: hidden;}
.gal-platillo > .grid-item a {display: block; position: relative;}
.gal-platillo > .grid-item a > span img{width: 100%; transition: all ease-in-out 0.8s;}
.gal-platillo > .grid-item:hover a > span img{width: 112%; margin: -6% 0 0 -6%;}
.ampliar-foto{position: relative; display: block;}
.ampliar-foto::before{content: "\e003"; font-family: 'Glyphicons Halflings'; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.45); color: #fff; font-size: 2.4em; text-align: center; padding-top: 18%; opacity: 0; cursor: pointer; transition: all ease-in-out .3s; opacity: 0; text-shadow: none;}
.ampliar-foto:hover::before, .ampliar-foto:focus::before{opacity: 0.8;}
/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/
.bk-contacto{background-color: #fff; padding: 100px 0; position: relative; overflow: hidden;}
.bk-contacto::before{content: ''; width: 100%; position: absolute; top: 0; height: 98px; background: url(../img/bk/adorno-04.webp) top center/auto 100% repeat-x; opacity: 0.2;}
.dat-contacto{text-align: center;}
.dat-contacto > img{width: 60px; display: block; margin: 10px auto;}
.contacto{padding-top: 60px; float: left; width: 100%;}
.campo-form{position: relative; margin-bottom: 20px;}
.campo-form > label{position: absolute;top: 7px; left: 13px; font-size: 12px; text-transform: uppercase; color: #1c1c1c; opacity: .6;}
.campo-form > input, .campo-form > textarea{width: 100%; height: 60px; padding: 22px 13px 4px; font-family: 'Open Sans', sans-serif; border: 1px solid #919191; font-size: 18px; color: #1c1c1c; border-radius:4px;}
.campo-form > textarea{height: 220px;}
.enviar-form{background-color: #dc4745; color: #fff; text-align: center; letter-spacing: 3px; text-transform: uppercase; text-shadow: 1px 1px rgba(0,0,0,0.75); display: block; padding: 10px; border: none; width: 100%; border: none; border-radius: 4px; transition: all ease-in-out .3s;}
.enviar-form:hover, .enviar-form:focus{opacity: .9;}

.error{border-color: #c60000 !important; background-color: #fffad7;}
/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/
footer{color: #ccc; font-size: 13px; padding: 12px 0;}
footer span{float: right;}
footer span a{color: #ccc; text-decoration: underline; transition: all ease-in-out 0.4s;}
footer span a:hover, footer span a:focus{color: #fff;}
/* ---------------------------------------------------------------------- BLOQUE -----------------------------------------------------------------------*/


/* -------------------------------------------------------------------- MEDIA QUERY --------------------------------------------------------------------*/
@media  (max-width: 1199px){

	.platillo-img {width: 66%;}
	.img-left {margin-left: -16.5%;}
	.img-right{margin-right: -16.5%}
}


@media  (max-width: 991px){
	.wrap-addmargin{padding: 0 15px;}
	.btn-whats {width: 66px; height: 68px; bottom: 90px;}
	.bk-alfabeto-gourmet::before {background-position: 20% center;}

	.img-left, .img-right {margin-left: auto;margin-right: auto;display: block; margin-bottom: 30px;}
	.platillo-img {width: 100%; max-width: 660px;}
	.platillo-info {width: 100%; max-width: 660px; display: block; margin: 20px auto; padding-left: 10px;}

	.gal-platillo > .grid-item {width: 33.33333%;}

	.precio-platillo{height: 48px; min-width: 220px;}
	.precio-platillo span{padding-left: 64px;}
	.precio-platillo span::before{width: 48px; height: 48px; content: '\e116'; font-family: 'Glyphicons Halflings'; opacity: 1; top: -1px; left: -1px; font-size: 16px; padding-top: 10px;}

	footer{padding-top: 20px;  text-align: center;}
	footer span {float: none; display: block; padding: 10px 0;}
}

@media  (max-width: 767px){	
	.bk-banner{margin-top: 0; padding-top: 100px; padding-bottom: 100px;}
	.cont-banner {margin-left:0;}
	.bk-alfabeto-gourmet, .platillos, .bk-galeria, .bk-contacto {padding:54px 0 70px;}

	.bk-alfabeto-gourmet::before {left:0; opacity: 0.25;}
	.alfabeto {padding: 40px 0 30px; margin: 0;}

	.platillo-info{padding-left: 0;}

	.gal-platillo > .grid-item {width: 50%;}
	.ampliar-foto::before{font-size: 1.6em;}


	.redes-xs a{ display: inline-block; margin: 0 10px; width: 26px; opacity: .75;}
	.redes-xs a img{width: 100%;}
}
	
}