/*=======================================
 	COUPONS
========================================*/
#coupons { }
#coupons h1 { color:#1a1a1a; margin:0 0 40px; }

#coupons li { float: left; background: #fdfcf1; border: 1px solid #1a1a1a; box-sizing: border-box; width: 49%; overflow: hidden; position:relative; margin-bottom: 20px; }
#coupons li:nth-child(odd) { margin-right: 2%; }
#coupons li .coupon-num { background: #000; color: #fff; font-family: 'Bitter', serif; font-size: 1.3em; font-weight: 700; text-transform: uppercase; padding: 5px 0; text-align: center; }
#coupons li .coupon-num span { display: block; font-size: .8em; }

#coupons li .coupon-save-price { background: url('../images/coupons/save.png') center no-repeat; color: #fff; font-family: 'Bitter', serif; font-weight: 700; font-size: .9em; line-height: 1; position: absolute; top: 100px; left: 180px; width: 110px; height: 110px; padding: 25px 0; text-align: center; }
#coupons li .coupon-save-price b { display: block; font-size: 2em; }
#coupons li img, #coupons li .coupon-content { float: left; width: 50%; }
#coupons li img { margin-top:30px; }
#coupons li .coupon-content { box-sizing: border-box; padding: 30px 15px 15px 0; min-height:200px; }
#coupons li .coupon-content span { display: block; }
#coupons li .coupon-content .coupon-name, #coupons li .coupon-content .coupon-price, #coupons li .coupon-content .coupon-des b{ font-family: 'Bitter', serif; font-weight: 700; color: #000; }
#coupons li .coupon-content .coupon-name { font-size: 1.6em; line-height: 1.2; margin-bottom: 10px; }
#coupons li .coupon-content .coupon-price { margin-top: 20px; font-size: 2.8em; line-height: 1; }
#coupons li .coupon-content .coupon-price small { display: block; font-size: .4em; font-weight:700; text-transform: uppercase; } 
#coupons li .coupon-content .coupon-price b { color: #000; display: inline-block; margin-top: -2px; }
#coupons li .coupon-content .coupon-price sup { color: #000; font-size: .4em; font-weight: 400; }
#coupons li .disclaimer { display: block; float:left; padding: 15px; text-align: center; }
#coupons li .btn { padding: 5px 15px; font-size: .95em; margin-top: 10px;  }

#coupons li .coupon-content .btn { display: inline-block; }

#coupons .cancer-coupon { background: url('../images/coupons/help-fight-cancer.jpg') no-repeat #fff; background-size: contain; background-position: 0 40px; height: 300px; width: 100%; position: relative; }
#coupons .cancer-coupon .btn { position: absolute; right: 40px; left: 33%; bottom: 45px; width: 108px; }

.menu-title { display:flex; flex-direction:column; text-align:left; margin-top:55px; padding:0 70px; width:100%; }
.menu-title h1 { background:none; font-size:2em; padding:5px 0px; text-align:left; }


/*Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1430px) { 
	#coupons li .coupon-save-price { left:140px; }
}

@media (max-width: 1200px) {  
	#coupons li .coupon-save-price { left:25%; }
    .menu-title { padding:0; margin-top:55px; }
}

/*Large devices (desktops, 992px and up)*/
@media (max-width: 992px) { 
	#coupons li .coupon-save-price { left:15%; }
	#coupons .cancer-coupon { height:245px;  }
  .menu-title { padding:0; margin-top:15px; }
}

/*Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {  
	#coupons li { width: 100%; overflow: hidden; position:relative; margin-right:0; }
}

/*Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { 
	#coupons li .coupon-save-price { left:10%; }
}