:root {--dgreen: #007550; --lgreen: #c4d600;}
.lealtad, .comercios, .comercios *, .lealtad * {box-sizing: border-box;}
.lealtad .flex {display: flex;}
.flex-col {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.fGrow2 {flex-grow: 2;}
.vCenter {align-items: center;}
.hCenter {justify-content: center;}

/* Principal page */
.lealtad {
	width: 100%; padding: 20px 35px 35px;
	background: #fff !important;
	.lealtad-tit {
		padding: 20px 25px 0; text-align: center;
		img {width: 100%; max-width: 330px}
		h2.titFedepuntos {font-size: 16px; margin: 15px 0 5px; color: #006341;}
		span {display: block; font-size: 22px; color: var(--lgreen);}
	}
}

ul.categorias {
	padding: 15px 0;
	.botones {
		list-style-type: none; padding: 20px 10px;
	 	a {
			width: 164px; height: 154px; border-radius: 8px;
			border: 1px solid var(--dgreen);
			overflow: hidden; text-decoration: none;
			transition: all ease .3s;
			.imgbtn {
				width: 96px; height: 85px;
				background: var(--icolealtad) no-repeat center top;
				align-items: center; font-size: 50px;
				color: var(--lgreen); transition: all ease .3s;
			}
			p {
				text-transform: uppercase; font-size: 14px;
				padding: 0 5px 15px 5px; width: 100%;
				font-weight: bold;  margin: 0;
				color: var(--dgreen); text-align: center;
			}
			&:hover {background-color: var(--dgreen);}			
			&:hover .imgbtn {background-position: center bottom;}
			&:hover p {color: #fff;}
		}
	}
}

/* ecommerce pages */
.comercios {
	width: 100%; margin: 0 auto; font-size: 13px;
	background: #fff; padding: 20px;
	.titlecommerce {
		width: 220px; padding: 5px 10px; color: #fff; font-size: 14px;
		background-color: #93C41B; margin-bottom: 20px
	}
	.table {
		width: 100%; border: 1px solid #ccc;
		border-collapse: collapse; margin: 0px 0px 1em 0px;
		td {
			padding: 10px; border-collapse: collapse;
			h3 {
				color: #9BB748; font-size: 15px;
				text-transform: uppercase;
			}
			p {margin: 5px 0px 8px 0px;}
		}
		td.logo {width: 150px; text-align: center;}
		ul {padding-left: 10px;}
	}
}

/* go back button */
.bot1 {
	margin: 15px 0; text-align: right; padding: 0 20px;
	a {
		display: inline-block; color: #fff; text-align: center;
		background: #006341;
		font-weight: bold; padding: 10px 25px;
		&:hover {color: #006341; background: #93C41B;}
	}
} 

/* Program rules */
#reglamento-lealtad {
	display: inline-block; padding: 15px 35px;
  border: 1px solid #1a6524; border-radius: 5px;
  cursor: pointer; transition: all ease .2s;
  text-align: center;
  &:hover {background: #1a6524; color: #fff;}
}


/* mobile */
@media screen and (max-width: 768px)  {
	.lealtad {
	  .lealtad-tit {padding: 20px 0 0;}
	}
	.comercios {padding: 20px 0;}
} 

@media screen and (max-width: 640px) {
	li.botones {padding: 25px 10px;}
}

@media screen and (max-width: 480px) {
	.lealtad-tit, .lealtad-tit p {padding: 0;}
	.lealtad-tit p {padding: 15px 0 0; line-height: 1.3;}
	li.botones {padding: 15px 10px;}
	.lealtad {font-size: 14px; margin-bottom: 30px; padding: 0;}
	.comercios {
	  .table {
	  	td {display: block; padding: 10px 20px;}
	    td.logo {width: 100%;}
	  }
	}
	.footBar {margin-bottom: 44px;}
	.bot1 {
		margin: 0;
		a {
			position: fixed; width: 100%;
			left: 0; bottom: 0; border-radius: 0;
			font-size: 16px; text-transform: uppercase;
			line-height: 1.8;
		}
	}
}

/* MODAL CSS */
:root {
  --lightgray: #efefef;
  --white: #fff;
  --black: rgba(0, 0, 0, 0.8);
  --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.00);
}
.reglamento ol {
	padding: 10px 0 25px 25px;
	li {margin: 5px 0}
	&:marker {color: #c4d600;}
}
.titleblock {margin-bottom: 20px;}

.modal {
  position: fixed; z-index: 2000;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center;
  justify-content: center; padding: 1rem;
  background: var(--black); cursor: pointer;
  visibility: hidden; opacity: 0;
  transition: all 0.35s ease-in;
  button {
    cursor: pointer; background: transparent;
    border: none; outline: none;
    position: fixed; top: 0;
    padding: 20px; right: 0;
    color: #fff; font-size: 24px;
  }
}
.modal.is-visible {
  visibility: visible; opacity: 1;
}
.modal-dialog {
  position: relative; max-width: 65%;
  max-height: 90vh; border-radius: 5px;
  background: var(--white); overflow: auto;
  cursor: default; padding: 30px 35px 50px;
}
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .modal-dialog {opacity: 0; transition: all 0.3s var(--bounceEasing);}
[data-animation].is-visible .modal-dialog {opacity: 1; transition-delay: 0.2s;}
[data-animation="slideInOutDown"] .modal-dialog {transform: translateY(100%);}
[data-animation="slideInOutTop"] .modal-dialog {transform: translateY(-100%);}
[data-animation="slideInOutLeft"] .modal-dialog {transform: translateX(-100%);}
[data-animation="slideInOutRight"] .modal-dialog {transform: translateX(100%);}
[data-animation="zoomInOut"] .modal-dialog {transform: scale(0.2);}
[data-animation="rotateInOutDown"] .modal-dialog {transform-origin: top left; transform: rotate(-1turn);}
[data-animation="slideInOutDown"].is-visible .modal-dialog,
[data-animation="slideInOutTop"].is-visible .modal-dialog,
[data-animation="slideInOutLeft"].is-visible .modal-dialog,
[data-animation="slideInOutRight"].is-visible .modal-dialog,
[data-animation="zoomInOut"].is-visible .modal-dialog,
[data-animation="rotateInOutDown"].is-visible .modal-dialog {
  transform: none;
}

@media screen and (max-width: 980px) {
  .modal-dialog {
    max-width: 95%; margin-top: 30px;
    max-height: 90vh; padding: 10px 25px 30px;
  }
}