/*AGRA | CSS*/

:root{
	--blanco: #fff;
	--negro: #000;
	--rojo: #a6272d;
	--rojo2: #641312;
	--amarillo: #ffa719;
	--rex: 'Rex';
	--urbanT: 'Urbanist-Thin';
	--urbanTI: 'Urbanist-ThinItalic';
	--urbanSBI: 'Urbanist-SemiBoldItalic';
	--urbanSB: 'Urbanist-SemiBold';
	--urbanMI: 'Urbanist-MediumItalic';
	--urbanM: 'Urbanist-Medium';
	--urbanBI: 'Urbanist-BoldItalic';
	--urbanB: 'Urbanist-Bold';
}

@font-face{
	font-family: 'Rex';
	src: url(../archivos/fonts/Rex-Bold.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-Thin';
	src: url(../archivos/fonts/Urbanist-Thin.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-ThinItalic';
	src: url(../archivos/fonts/Urbanist-ThinItalic.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-SemiBoldItalic';
	src: url(../archivos/fonts/Urbanist-SemiBoldItalic.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-SemiBold';
	src: url(../archivos/fonts/Urbanist-SemiBold.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-MediumItalic';
	src: url(../archivos/fonts/Urbanist-MediumItalic.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-Medium';
	src: url(../archivos/fonts/Urbanist-Medium.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-BoldItalic';
	src: url(../archivos/fonts/Urbanist-BoldItalic.ttf) format("truetype");
}
@font-face{
	font-family: 'Urbanist-Bold';
	src: url(../archivos/fonts/Urbanist-Bold.ttf) format("truetype");
}

body, p{
	font-family: var(--urbanM);
	line-height: normal;
}
h1, h2, h3, h4, h5, h6{
	font-family: var(--rex);
	line-height: normal;
}
/*Template
*********************************************/
.smalltitle{
	color: var(--amarillo);
	font-family: var(--urbanSB);
	letter-spacing: 0;
}
.smalltitle:before, .smalltitle:after{
	background: var(--amarillo);
}
.home-title{
	color: var(--rojo);
	margin-bottom: 40px;
}
.widgettitle{
	font-family: var(--urbanSB);
	letter-spacing: 0;
}
.post-subtitle{
	color: var(--amarillo);
	opacity: 1;
}
a:hover, p a:hover{
	color: var(--rojo);
}

/*Margin Paddings
*********************************************/
.mt-40{
	margin-top: 40px;
}
.mb5{
	margin-bottom: 5px;
}
/*Botones
*********************************************/
.btn-red{
	background: var(--rojo);
	border: 1px solid var(--rojo);
	color: #fff;
	padding: 15px 25px;
	display: inline-block;
	font-family: var(--urbanSB);
	transition: .5s ease-in-out
}
.btn-red:hover{
	background: transparent;
	border: 1px solid var(--rojo);
	color: var(--rojo);
}
.btn-red.hover-white:hover{
	background: transparent;
	border: 1px solid var(--rojo);
	color: #fff;
}
.btn-yellow{
	background: var(--amarillo);
	border: 1px solid var(--amarillo);
	color: #fff;
	padding: 15px 25px;
	display: inline-block;
	font-family: var(--urbanSB);
	transition: .5s ease-in-out
}
.btn-yellow:hover{
	background: transparent;
	border: 1px solid var(--amarillo);
	color: var(--amarillo);
}
/*Fuentes y estilos
*********************************************/
.w-600{
	font-weight: 600;
}
.urbanSB{
	font-family: var(--urbanSB);
}
.urbanB{
	font-family: var(--urbanB);
}
/*Header
*********************************************/

.logo .logoHeader{
	width: 160px;
	height: auto;
}
.menu-nav li{
	font-size: 15px;
}
.social-media li, .footer-social li{
	font-size: 18px;
	margin-left: 15px;
}
.menu-nav li a:hover, .menu-nav > li:hover > a, .menu-nav > li.current-menu-item > a{
	color: #fff;
}
.menu-nav > li:hover > a:before, .menu-nav li.current-menu-item > a:before{
	border-color: var(--amarillo);
}
a.social-instagram:hover, a.social-facebook:hover, a.social-tiktok:hover{
	color: var(--amarillo)!important;
}
.menu-title-section, .menu-title-section a{
	color: var(--rojo2);
	transition: .5s ease-in-out;
}
.menu-title-section:hover, .menu-title-section:hover a{
	color: var(--rojo);
}
.menu-title-section.active a, .menu-title-section:hover a, .menu-title-section:hover:before{
	color: var(--rojo);
}
.menu-title-section.active:before{
	color: var(--rojo);
}
.menu-title, .menu-price{
	font-family: var(--urbanSB);
}
.menu-text{
	font-family: var(--urbanSBI);
}

/*Footer
*********************************************/
footer{
	position: relative;
	z-index: 1;
}
footer .widgettitle{
	margin-bottom: 10px;
}
footer p a{
	border: 0;
}
.navigationFooter p{
	margin-bottom: 10px;
}
.navigationFooter p a{
	text-decoration: none;
}
footer .textwidget li{
	margin-bottom: 10px;
}
footer .textwidget li i{
	margin-right: 12px;
}
footer .watermarkDog{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 380px;
	z-index: -1;
}
.foo-block .widgettitle{
	color: var(--amarillo);
	font-family: var(--rex);
}
footer, footer a, .footer-social li a{
	color: #fff;
}
/*Home
*********************************************/
.headerHolder{
	padding-left: 100px;
	padding-right: 100px;
}
.home-slider{
	cursor: default;
}
/*.slide-1{
	background: url(../archivos/home/La-Cerveceria-De-Barrio-3.m4v);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}*/
.home-slider{
	width: 100%;
	object-fit: cover;
	height: 100vh;
	position: relative;
}
.home-slider:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	z-index: 1;
}
.videoSlide{
	object-fit: cover;
	width: 100%;
	height: 100vh;
}
.videoSlide.videoResponsive{
	display: none;
}

.callToAction1Home{
	background: url(../archivos/home/restaurantes-de-cdmx.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 70px 0;
}

.sectionMenuHome{

}
.sectionMenuHome .iconSvg{
	width: 80px;
	height: auto;
	margin: 0 auto 00px;
}

.callToAction2Home{
	background: url(../archivos/home/restaurantes-condesa.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 70px 0;
}

.callToAction3Home{
	background: url(../archivos/home/restaurantes-en-mexico-df.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 70px 0;
}

/*Promociones
*********************************************/
.promoBanner{
	height: 70vh;
}
.promoBanner .banner{
	background: url('../archivos/promociones/cerveceria-del-barrio.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.promoBanner .single-post-title{
	font-size: 50px;
}

.callToAction1Promo{
	background: url('../archivos/promociones/bizne.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 70px 0;
}

#stepsBizCoins .icon-img img{
	width: 80px;
	height: auto;
}

.contentApps{
	display: flex;
	justify-content: space-around;
}
.contentApps img{
	width: 300px;
}
.disclaimerPromo{
	white-space: pre-line;
	font-size: 12px;
}

/*Menú
*********************************************/
.menuBanner{
	height: 70vh;
}
.menuBanner .banner{
	background: url('../archivos/menu/restaurantes-en-la-condesa-para-comer.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.menuBanner .single-post-title{
	font-size: 50px;
}
.selectFilter .filter{
	display: flex;
	align-items: center;
	justify-content: center;
}
.selectFilter .filter .btn-filter{
	padding: 10px 30px;
	list-style: none;
	cursor: pointer;
	background: var(--rojo);
	color: #fff;
	margin: 0px 40px 20px;
	border: 1px solid var(--rojo);
	transition: .5s ease-in-out;
}
.selectFilter .filter .btn-filter.active{
	background: var(--amarillo);
	border: 1px solid var(--amarillo);
}
.selectFilter .filter .btn-filter:hover{
	background: var(--amarillo);
	border: 1px solid var(--amarillo);
}
.selectFilter .filter .btn-filter p{
	font-size: 25px;
	margin-bottom: 0;
}
.box-filter.hidden{
	display: none;
}
.disclaimerPlatillos{
	text-align: center;
	margin-top: 40px;
	font-size: 14px;
}
.disclaimerBebidas{
	text-align: center;
	margin-top: 40px;
	font-size: 14px;
}
.secondTitleCerveza,
.secondTitleBotellas{
	font-size: 20px;
	font-family: var(--urbanB);
}
.platillos .menu-carousel, .bebidas .menu-carousel{
	width: 1100px;
	margin: 0 auto 20px;
}
.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: "Font Awesome 5 Brands";

}

.menu-carousel .owl-nav{
	position: absolute;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    width: 100%;
    display: block;
    height: 100%;
}
.menu-carousel .owl-nav .owl-prev{
	position: absolute;
	left: -25px;
	top: 50%;
	transform: translateY(-50%);
}
.menu-carousel .owl-nav .owl-next{
	position: absolute;
	right: -25px;
	top: 50%;
	transform: translateY(-50%);
}
.menu-carousel .owl-nav i{
	font-size: 25px;
	color: var(--rojo);
}


/*Galería
*********************************************/
.galeriaBanner{
	height: 70vh;
}
.galeriaBanner .banner{
	background: url('../archivos/galeria/fotos-de-la-cerveceria-de-barrio.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.galeriaBanner .single-post-title{
	font-size: 50px;
}

/*Sucursales
*********************************************/
.sucursalesBanner{
	height: 70vh;
}
.sucursalesBanner .banner{
	background: url('../archivos/sucursales/restaurantes-napoles.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.sucursalesBanner .single-post-title{
	font-size: 50px;
}
.rowSucursal .col-bkg{
	padding: 24px 50px;
	background: #dbdbdb;
}
.rowSucursal .home-title{
	font-size: 30px;
	line-height: normal;
	text-transform: uppercase;
	/*white-space: pre-line;*/
}
.rowSucursal a{
	text-decoration: none;
	border: 0;
}
.rowSucursal a i{
	margin-right: 10px;
}
.rowSucursal .contTel{
	display: flex;
	justify-content: space-evenly;
	margin-top: 30px;
}
.rowSucursal .contApps{
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.rowSucursal .contApps img{
	margin: 0 15px;
}
.listSucursal ul{
	-moz-column-count: 4;
    -moz-column-gap: 50px;
    -webkit-column-count: 4;
    -webkit-column-gap: 50px;
	column-gap: 50px;
	column-count: 4;
	margin-bottom: 60px;
}
.listSucursal ul li{
	/*list-style: none;*/
	text-transform: uppercase;
	font-family: var(--urbanSB);
	margin-bottom: 5px;
}
.listSucursal ul li a{
	color: var(--rojo);
	font-size: 18px;
}
.listSucursal ul li a:hover{
	color: #000;
}
.separatorTel{
	padding: 0 5px;
}

@media (max-width: 800px){
	.mobile-menu-holder{width: 260px;}
	.mt-0-sm{margin-top: 0!important;}
	.hiddenMobile{display: none;}
	.headerHolder{padding: 15px;}
	.smalltitle{font-size: 14px;}
	.smalltitle13{font-size: 13px;}
	.topSingleBkg{margin-bottom: 60px;}
	.promoBanner, .menuBanner, .galeriaBanner, .sucursalesBanner{height: 50vh;}
	.promoBanner .single-post-title, .menuBanner .single-post-title, .galeriaBanner .single-post-title, .sucursalesBanner .single-post-title{font-size: 30px;}

	.videoSlide.videoDesktop{display: none;}
	.videoSlide.videoResponsive{display: block;}
	.sectionMenuHome .iconSvg{width: 50px;}

	.contentApps .android{margin-bottom: 25px;}
	.contentApps img{width: 230px;}

	.platillos .menu-carousel, .bebidas .menu-carousel{width: 300px;}
	.selectFilter .filter{margin: 0;justify-content: space-evenly;}
	.selectFilter .filter .btn-filter{margin: 0px 0px 20px; padding: 10px 20px;}
	.selectFilter .filter .btn-filter p{font-size: 20px;}
	.menu-section{padding: 0 5px 24px 5px;}
	.food-menu li h4{padding-right: 150px;}
	.menu-price{font-size: 15px; text-align: right;}
	.menu-title-section{display: flex;}
	.menu-title-section:before{margin-top: 10px;margin-right: 10px;}

	.titleSectionSuc{font-size: 27px;}
	.listSucursal ul{column-gap: 40px; column-count: 2;}
	.listSucursal ul li{margin-bottom: 10px; line-height: normal;}
	.rowSucursal{margin-bottom: 48px;}
	.rowSucursal .order-1-sm{order: 1;}
	.rowSucursal .order-2-sm{order: 2;}
	.rowSucursal .col-bkg{padding: 24px 15px;}
	.rowSucursal .contTel{display: block;}
	.rowSucursal .contTel a{margin: 10px 0; display: block;}
	.separorTel{display: none;}
}