html, body{height:100%;}
body{font-family: 'Lato', sans-serif !important; padding-top: 90px;}
.navbar{background: #011E29 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #9D9D9D29; opacity: 1; height: 70px;}
.logo{max-width:100%; text-align:center; display: block; margin: auto;}

.backLink{text-align: left; font: normal normal bold 16px/19px Lato; letter-spacing: 0px; color: #333333; text-transform: capitalize; opacity: 1; text-decoration: none;}
.backLink span{font-weight: bolder; font-size: 24px;}
.latestDealsTitle{text-align: center;font: normal normal 900 40px/53px Lato;letter-spacing: 0px;color: #212121;text-transform: capitalize; opacity: 1;  position:relative;}
.latestDealsTitle:before {content: ""; display: block; border-top: solid 1px #707070; width: 55%; position: absolute; top: 40%; z-index: 0; left: 0; right: 0; margin: 0 auto;}
.latestDealsTitle:after {content: ""; display: block; border-top: solid 1px #707070; width: 40%; position: absolute; bottom: 30%; z-index: 0; left: 0; right: 0; margin: 0 auto;}
.latestDealsTitle span {background: #fff; padding: 0 30px; position: relative; z-index: 1;}

.categoryTitle{text-align: center;font: normal normal bold 20px/38px Lato;letter-spacing: 6px;color: #424242;text-transform: uppercase;opacity: 1; margin: 25px 0px;}

.row{margin: 1% 10%;}
.rewardCols{padding: 25px; margin: 0 auto;}
.rewardCards{background: #FFFFFF 0% 0% no-repeat padding-box;box-shadow: 0px 3px 10px #8B8B8B40;border-radius: 4px;opacity: 1; border:none; width: 18rem; margin: 0 auto;}
.card-title{text-align: left;font: normal normal 900 16px/22px Lato;letter-spacing: 0px;color: #212121;opacity: 1;}
.card-text{text-align: left;font: normal normal bold 14px/22px Lato;letter-spacing: 0px;color: #424242; min-height: 45px;}
.tileButton{background: #00B1CD 0% 0% no-repeat padding-box;border-radius: 4px;opacity: 1; color: #FFFFFF; text-align:center; cursor:pointer; border: none; width: 55%; font: normal normal bold 14px/17px Lato; padding: 10px;}
.tileButton:hover, .tileButton:focus{background: #00B1CD 0% 0% no-repeat padding-box;}

.offerDetails{display:none;}

/*Offer modal css*/
.modal{top: 75px;}
.modal-dialog {max-width: 576px;}
.modal-header{background: #E5F4FA 0% 0% no-repeat padding-box; text-align:center;}
.modal-title{font: normal normal 900 20px/26px Lato; letter-spacing: 0px; color: #001E28; text-align:center;}
.btn-close{color:#001E28; font: normal normal 900 14px Lato; opacity:1; border:none;}
.modal-body{padding:0px;}
.box{text-align:center;}
.content{padding:15px;text-align: center;}
#offerModal-title{font: normal normal normal 18px/18px Lato;letter-spacing: 0px;color: #424242;opacity: 1;padding: 2px;}
#orSection{text-align: center;font: normal normal normal 13px/13px Lato; letter-spacing: 0px; color: #424242; opacity: 1; padding: 15px;}
#orSection span {letter-spacing: -3px; padding: 5px;}

#offerModal-terms-title{text-align: left;font: normal normal bold 14px/18px Lato;letter-spacing: 0px;color: #424242;opacity: 1; margin-top: 5%;}
#offerModal-terms{text-align: left; font: normal normal normal 14px/20px Lato; letter-spacing: 0px; color: #757575;opacity: 1;overflow-y: auto;}

.codeContainer {position: relative; text-align: left; width:85%; margin: 0 auto; margin-top: 20px;}
#rhsCoupon {width:75%; border: 1px dashed #757575; text-align: left; font: normal normal bold 14px/24px Lato; letter-spacing: 0px; color: #333333;opacity: 1; border-radius: 4px; padding: 7px; height: 40px} 
.codeContainer>a {position: absolute; right: 2px; top: 0px; width: 100%; max-width: 100px; text-align: center; cursor: pointer; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #00B1CD; border-radius: 4px; font: normal normal bold 14px/17px Lato; letter-spacing: 0px; color: #00B1CD; text-transform: capitalize; opacity: 1; padding: 10px; height: 40px}

#couponButtonLink{background: #00B1CD 0% 0% no-repeat padding-box; text-align: center; font: normal normal bold 16px/19px Lato; letter-spacing: 0px; color: #FFFFFF;text-transform: capitalize; opacity: 1; width:85%; padding: 10px;}
/*Offer modal css ENDS*/


#landscapeError{width:100%; height:100%; padding: 15px; display:none; position: fixed; top: 0; align-items:center; justify-content:center; z-index:10000; text-align:center; background-color:#EEE;}
.landscapeImage{max-width: 100%; margin-top:5%;}
#landscapeError > h3{color:#f44336; font-weight:bold;}

.inputStyle{text-align: center; border:1px solid #DDDDDD; height:35px; border-radius:5px; background-color:#f9f9f9; color:#7c7c7c; width: 95%;}
.rcsubmitButton{background:linear-gradient(to right, #FF512F 0%, #DD2476 100%); color:#fff; font-size:18px;}

#footer{display:block; position: fixed; bottom: 0; width: 100%; padding:3px; background-color:#EEEEEE; color: #424242 !important; text-align:center; font: normal normal bold 14px/22px Lato; letter-spacing: 0px;}
#footer a{color: #424242 !important; text-decoration: none; }

@media only screen and (max-width: 640px){
	.latestDealsTitle{font: normal normal 900 22px/30px Lato;}
    .latestDealsTitle:before {width: 85%;}
    .latestDealsTitle:after {width: 60%;}
    .latestDealsTitle span {padding: 0 15px;}
    
    .rewardBlock{overflow-x: scroll;}
    .row{margin: 0%; width:max-content;}
	.rewardCols{padding: 10px;}
	.categoryTitle{margin:25px 0px; text-align: left;}

    .modal{top: 0px;}
    .modal-title{font: normal normal 900 20px/26px Lato;}
    .codeContainer, #couponButtonLink {width:100%;}
    #rhsCoupon {width:70%;} 
 
	.modal.fade .modal-dialog {
		-webkit-transform: translate(0, 0) !important;
		transform: translate(0, 0) !important;
	}

	.modal-dialog{position: fixed; top: auto; right: auto; left: auto; bottom: 0px; margin:0; border:0;}
	.modal-content{border:0}
	
}