@import url('https://fonts.googleapis.com/css?family=Almarai:400,600&display=swap');
body{padding:0; margin:0}
*{box-sizing: border-box; font-family:"Almarai"; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


.container{width: 100%; padding:0px }
.header{width: 100%; background-color: #F4F4E6; padding-bottom: 12px; box-shadow: 0 5px 5px 2px rgba(0,0,0,.1); }
@keyframes gradient{0%{background-position:17% 0%}50%{background-position:84% 100%}100%{background-position:17% 0%}}

.header .logoHeader{float: left; width: 50%; text-align: center}
.header h5{float: left; width: 40%; font-size: 20px; text-align: center; margin:10px 0 10px 0}
.header .leyendaHeader{float: left; width: 40%; text-align: center; margin-top:0px; font-size: 20px; font-weight: 600; background:linear-gradient(121deg, #3790e6, #268910, #e43096, #3539ea); animation:gradient 10s ease infinite; background-size:800% 800%; border-radius:10px; color: white}
.header .leyendaHeader a{text-decoration: none; color: white; display: block; padding: 12px}
.header .leyendaHeader a:active, .header .leyendaHeader a:hover{text-decoration: underline}
.header .logoHeader img{max-height: 100px}
.productos{width: 100%; padding:20px }

.itemProd{width: 24%; background-color: #F4F4E6; padding:3px; box-shadow: 0 2px 15px 2px rgba(0,0,0,.1); float: left; border-radius: 5px; margin: 20px .5%; background-image: linear-gradient(to top, #9cbefd85 30%, #fdde98 80%); min-height: 700px; position: relative}


.separadorHorario{
	margin-top: 10px;
	border-top: 1px solid #bbb;
	clear: both;
	padding-bottom: 10px;
}

.columnaRight {
    position: relative;
	padding-bottom: 50px;
}

.deliveryProd{background-image: linear-gradient(to bottom, #ca7a41 0%, #880909 100%); border-radius: 100px; width: 40px; height: 40px; position: absolute; left: 44%; top: 180px; z-index: 45454545}
.deliveryProd .delivery2{font-size: 13px; color: white; position: absolute; top: 6px; left: 37px;}
.deliveryProd .delivery1 img{width: 27px; height: 27px; position: absolute; top: 5px; left: 5px;}
.deliveryProd .delivery1{width: 38px; height: 38px; border-radius: 100%; position: absolute; top: 1px; left: 1px;}

.shareLabel{font-size: 13px; color: #333; position: absolute; bottom: 10px; right: 120px;}
.shareProd{background-image: linear-gradient(to top, #15672e 0%, #06bf7b 100%); border-radius: 100px;
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: -1px;
    right: 8px;}
.shareProd img{width: 26px;
    height: 26px;
    position: absolute;
    top: 7px;
    left: 7px;}
.shareFProd{background-image: linear-gradient(to top, #01448a 0%, #248cd6 100%); right:70px }

.logoProd{width: 100%; height: 200px; position: relative; text-align: center; background-color: transparent}
.logoProd img{max-width: 100%; max-height: 200px; object-fit: cover; border-radius: 5px 5px 0 0}
.nombreProd{font-size: 24px; color: #333; padding:7px 12px 0; font-weight: 600; margin-top: 20px;}
.categoriaProd{font-size: 14px; color:#777; padding:0 12px 12px; font-weight: 600}
.direccionProd{font-size: 16px; color:#555; padding:0px 12px}
a.direccionProd{color: #1e479b; padding: 0px 12px; text-decoration: none;}
.horarioProd{font-size: 18px; color:#555; padding:7px 12px; word-break: break-word; }
.pagosProd{padding:7px 12px; }
.pagosProd span{font-size: 13px; color:#555; padding:5px 12px; border-radius: 50px; background-color: #fff;  margin: 3px; white-space: pre; display: inline-block;}
.contactoProd{padding: 7px; background-image: linear-gradient(to top, #1E479B 0%, #4681C7 100%); width: 90%; margin: 17px 5% 9px 5%; border-radius: 7px; text-align: center;}
.contactoProd a{font-size: 18px; color:#fff; display: block; text-decoration: none;}
.contactoProd a img{width:15px; height: 15px; vertical-align: text-top; margin-right: 10px; margin-top: 5px;}

b, h1, h2, h3, h4, h5, h6{font-weight:500}

input,textarea, select{ border-radius:3px; outline:none; border:solid 1px #E4DADA; box-shadow:0 2px 2px 0 rgba(0,40,0,.4); padding:12px 10px; width:100%; margin:10px 0; color:#555; font-size:15px; display:inline-block; background-color:white}
input[type="checkbox"]{width: auto; margin-right: 10px;}
input:focus,textarea:focus, select:focus{border:solid 1px #D8A2A2; box-shadow:0 4px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.12);}
textarea{box-sizing: border-box; resize:none;}
input::placeholder,textarea::placeholder, select::placeholder{color:#ccc}
.formData{width:50%; margin:0 25%; padding: 30px}
#loading, #loadingModal{display: none; text-align: center; padding:40px 0}
.toast{color:white; padding:20px 25px; display:none; position:fixed; bottom:20px; box-shadow:0 5px 10px 5px rgba(0,0,0,.4); width:300px; left:50%; margin-left:-150px; z-index:9300544; text-align: center; border-radius: 7px; text-transform: uppercase}
.divInput{ position:relative; padding:10px 7px; float: left; width:100%}
#DivBotonOk{width:100% !important}
.divInput>label{color:#1F3F6C; position:absolute; top:5px; left:20px; font-size:12px}
.divInput>div>label{color:#1F3F6C; font-size:12px; display: block}

.divInput .btnMas{position: absolute; right:25px; top:28px; width: 35px; height: 35px; background-color: white}
.divInput .btnMas img{width: 30px; height: 30px; filter: grayscale(100%); cursor: pointer; user-select: none; transition: .2s; border-radius: 100%;}
.divInput .btnMas img:hover{filter: grayscale(0%); box-shadow: 0 2px 4px 2px rgba(0,0,0,.17)}

.btnEnviar{background-color:#1F3F6C; color: white; box-shadow: 0 2px 4px 2px rgba(0,0,0,.1); padding:17px 14px; font-size:17px; text-align:center; text-transform: uppercase; border-radius:5px; cursor: pointer; user-select: none !important; width:40%; float: right}

.ContainerImg{width:90%; margin:10px 5% 30px 5%; display:block; position:relative}
.ContainerImg>img{width:60%; border-radius:5px; margin:10px 20%}
.containerButtonImg{ position:absolute; left:50%; margin-left:-28px; bottom:-28px;}
.labelButtonImg{background-color:#1F3F6C; border-radius:50%; height:56px; margin:auto; min-width:56px; width:56px; padding:0; overflow:hidden; box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24); position:relative; outline:none; cursor:pointer; text-decoration:none; text-align:center; font-weight:500; display:inline-block; border:none;}

.labelButtonImg .material-icons{vertical-align:middle; position:absolute; top:50%; left:50%; transform: translate(-12px,-12px); line-height:24px; width:24px; font-style:normal; font-size:24px; display:inline-block; direction:ltr;}

.NombreFile{margin:10px 5%; width: 90%; background-color:#e5e5e5; border-radius:3px; padding:3px 9px; display:none; word-wrap: break-word}

.divCheckbox{margin-top: 5px}
.divCheckbox > label{font-size: 16px !important}


.registroAdmin{width: 50%; margin: 40px 25%}

.btnNuevo{background-color:#1F3F6C; color: white; box-shadow: 0 2px 4px 2px rgba(0,0,0,.1); padding:10px 14px; font-size:15px; text-align: center; position:absolute; z-index:9; text-transform: uppercase; top: 130px; right: 5%; border-radius:5px; cursor: pointer; user-select: none}

.buscar{width:100%; display:block; margin:7px 0}

.containerLista{width: 90%; margin: 20px 5%}

.divBuscarIndex{padding: 0 30px; margin-bottom: -35px; margin-top: 30px;}

.itemListaHead{background-color:#1F3F6C;}
.itemListaHead>div{color:white}
.itemLista{border-top: solid 1px #1F3F6C; cursor:pointer; display: block; transition: .4s}
.itemLista:last-child{border-bottom: solid 1px #1F3F6C}
.itemLista:hover{background-color: #DCE6F4}
.col5,.col10,.col15,.col20,.col25,.col30,.col35,.col40,.col45,.col50{padding: 10px 5px; float: left; color: #333; text-align: left; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.col5{width:5%}
.col10{width:10%}
.col15{width:15%}
.col20{width:20%}
.col25{width:25%}
.col30{width:30%}
.col35{width:35%}
.col40{width:40%}
.col45{width:45%}
.col50{width:50%}
.iconLista{width:28px; height:28px; position: absolute; top:6px; left:40%}

.infoProd{display: none}
.divHidden{display: block}

.flechaArriba{transform: rotate(-180deg);}



.categorias{
	margin-top: 50px;
	padding: 20px 20px 0 20px;
}

.itemCategoria{
	
}



.categoriasHidden{display:none}

.arrowMenuCategorias{width:60%;
    background-color: antiquewhite;
    text-align: center;
    padding: 5px;
    margin-top: 50px;
    margin-left:20%;
    border-radius: 20px;}

.flechaMenuCategoria{width:40px; height: 40px; transition:.3s}

.itemCategoria:active , .itemCategoria:hover {background-image: linear-gradient(to bottom, #1E479B 0%, #4681C7 100%);}

.itemCategoria {
	text-decoration: none;
	display: block;
    color: white;
    box-shadow: 0 2px 10px 2px #ffaf88;
    text-align: left;
    font-size: 18px;
    background-image: linear-gradient(to top, #1E479B 0%, #4681C7 100%);
    float: left;
	position: relative;
      padding: 12px 5px 14px 20px;
      width: 19%;
      border-radius: 20px;
      margin: 8px .5%;
}


.itemCategoria .flechaCategoria{transform: rotate(-90deg); vertical-align: middle; margin-top: 0px; filter: brightness(5.5); position: absolute; top: 13px; right: 10px;}


.titleCategorias{
    text-align: center;
    margin-top: 40px;
    font-size: 30px;
    text-decoration: underline;
    color: #1e479b;
}


.itemProdIndex {
    min-height: 175px;
    margin: 9px 0.5%;
    background-image: none;
    border-bottom: 3px solid #248cd6;
    background-color: #efefef;
}

.itemProdIndex .logoProd{display:none}
.itemProdIndex .logoProd img{}
.itemProdIndex .deliveryProd{display:none}
.itemProdIndex .columnaRight{min-height: 0; padding-bottom: 0; width:100%;}
.itemProdIndex .nombreProd{margin-bottom: 5px;}
.itemProdIndex .categoriaProd{max-height: 60px; overflow: hidden}
.itemProdIndex .shareProd{display:none}
.itemProdIndex .shareLabel{display:none}
.itemProdIndex .separadorHorario{display:none}
.itemProdIndex .horarioProd{display:none}
.itemProdIndex .contactoProd{display:none}
.itemProdIndex .infoProd{display:none}
.itemProdIndex .divHidden{display:none}
.itemProdIndex .pagosProd{}
.itemProdIndex .direccionProd{}


/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/


@media (max-width: 750px) {

.productos {
    width: 100%;
    padding: 10px;
	margin-top: 20px;
}


.divBuscarIndex{
	padding: 0;
	margin-bottom: -35px;
	margin-top:10px;
	position: sticky;
    top: 0;
    z-index: 111111;
    background-color: white;
}

.divBuscarIndex .inputSearch{
	width: 100%;
    margin-left: 0%;
	padding: 20px 16px;
	border:none;
	box-shadow: 0 2px 8px 1px #d2d2d2;
    font-size: 18px;
}


.header .logoHeader {
    width: 100%;
}
.header .logoHeader img {
    max-height: 200px;
}

.header h5{
	width:100%; font-size: 15px; margin:15px 0 10px 0;
}

.header .leyendaHeader {
    width: 90%;
    margin-left: 5%;
    font-size: 17px;
}

.header .leyendaHeader a {
    padding: 15px
}

.itemProd {
    width: 100%;
    margin:18px 0;
	min-height: 100px;
	border-radius: 15px;
	box-shadow: 0 4px 6px 1px rgba(0,0,0,.15);
}

.logoProd {
    height: 100px;
    float: left;
    width: 25%;
}

.logoProd img {
    height: auto;
	max-height: 100px;
	max-width: 100%;
	border-radius: 12px;
}


.columnaRight{
	float: right;
	width: 75%;
	min-height: 100px;
	padding-bottom:50px
}

.nombreProd {
    font-size: 21px;
    color: #333;
    padding: 7px 12px 0;
    font-weight: 600;
    margin-top: 0;
    width: 100%;
	line-height: 23px;
}

.deliveryProd{
	margin-left: 10px;
    margin-top: 10px;
    top: -5px;
    right: 5px;
	left: auto;
	bottom: auto;
}

.categoriaProd {
    font-size: 14px;
    color: #555;
    font-weight: 600;
    width: 100%;
	padding: 8px 12px 12px 12px;
}


.horarioProd {
	height: auto;
	font-size: 16px;
	padding-top: 22px;
}

.pagosProd {
	height: auto;
	padding: 0 12px 7px 12px;
}

.formData {
    width: 100%;
    margin: 0;
    padding: 7px;
}

.containerButtonImg {
    right: 10%; left: auto
}

.btnEnviar {
    padding:14px;
    font-size: 15px;
    width: 100%;
}


.contactoProd {
    padding:0px;
    width:51%;
	float: left;
    margin: 17px 2% 9px 3%;
}

.contactoProd a {
	padding:8px 7px 10px 7px;
	font-size: 20px;
	letter-spacing: 1px; 
	user-select: none
}

.contactoProd a img {
    width: 23px;
    height: 23px;
	margin-top: 1px;
}

.infoProd{
	display: block;
	padding: 14px 7px 0px 7px;
	width: 41%;
    margin: 17px 3% 9px 0%;
	border-radius: 7px;
	text-align: center;
	float: left;
	user-select: none;
}

.infoProd a{
	font-size: 16px;
    font-weight: 600;
	user-select: none;
	color: #333;
}

.infoProd img{
	vertical-align: middle;
	margin-top: -4px;
	transition: .3s
}

.divHidden{
	padding: 3px 0 10px 0;
	display: none
}

.direccionProd {
	padding: 7px 12px;
}


.direccionProd img{
	vertical-align: middle;
	margin-top: -2px;
    margin-right: 5px;
}

.btnNuevo {
    top: 180px;
}


.clearMovil{
	clear: both
}


.categorias{
	margin-top: 50px;
	padding: 20px 20px 0 20px;
}

.itemCategoria {
    padding: 14px 5px 16px 20px;
    width: 48%;
    border-radius: 25px;
    margin: 11px 1%;
}

.itemCategoria .flechaCategoria{top: 15px; }



.superContainer{
	overflow-x: scroll; width: 800px;
}


.titleCategorias{
    font-size: 35px;
}

.itemProdIndex{min-height: 80px; margin: 9px 0; background-image: none; border-bottom: 3px solid #248cd6; background-color: #efefef;
}





}