body { font-family: 'Roboto', sans-serif; background: #ffffff;}
a, a:hover, a:focus {color: inherit; text-decoration: none; transition: all 0.3s;}
.navbar {padding: 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 15px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);}
.navbar-btn {box-shadow: none; outline: none !important; border: none;}
.navbar-header{display: none;}
.btn{font-size:16px;}

/* ---------------------------------------------------SIDEBAR STYLE---------------------------------------------------- */
#sidebar {width: 250px; position: fixed; top: 0; left: 0; height: 100%; z-index: 999; background: #FF0000; color: #FFFFFF; transition: all 0.3s; font-weight: bolder; }
#sidebar.active {margin-left: -250px;}
#sidebar .sidebar-header {padding: 0px; text-align: center;}
#sidebar .sidebar-header img{max-width:100%; padding: 15px;}
#sidebarCollapse{ background: #FF0000;  color: #FFFFFF; float:left;}

#sidebar ul.components {padding: 5px 0;}
#sidebar ul p {color: #fff; padding: 10px;}
#sidebar ul li a {padding: 10px; font-size: 16px; display: block;}
#sidebar ul li a:hover {color: #FF0000; background: #fff;}

ul ul a {font-size: 0.9em !important; padding-left: 30px !important; background: #6d7fcc;}


/* ------------ CONTENT STYLE ------------  */
#content {width: 85%; width: -webkit-calc(100% - 250px); width: -moz-calc(100% - 250px); width: calc(100% - 250px); padding: 5px; min-height: 100%; transition: all 0.3s; position: absolute; top: 0; right: 0; }
#content.active {width: 100%;}


/*Search form css*/
#mobileLogoDiv, #search-form-div{width: 50%;}
#mobileLogo{display: none; max-width:50%; padding:10px;}
#search-form { margin:0; margin-top: 5px; padding: 0; width: 50%; float: right;}
#search-form .search-query {padding: 10px; margin-bottom: 0;border: 0; border-bottom: 2px solid #DDD; width: 100%;}
.inner-addon { position: relative; padding:0px;}
.inner-addon .glyphicon {  position: absolute;  padding: 10px;  pointer-events: none; font-size: 18px; color: #AAA;}
.right-addon .glyphicon { right: 0px;}
 /*Search form css ENDS*/

/*Offer listing css*/
.allOffers{margin: 10px;}
.offerCoupon{padding:10px;}
.offerOuter{border: none; box-shadow: 0 10px 13px -7px rgba(0, 0, 0, 0.25), 0 0 10px 0 rgba(0, 0, 0, 0.1); border-radius:10px; padding:5px; background-color: #fff; position: relative;}
.offerImage{max-width:100%; border-radius: 5px;}
.offerWebsite, .offerCode, .offerTerms, .offerLink{display: none;}
.offertitle{font-size: 16px; height: 40px; margin: 10px 0px;}
.offerbtn{color: #FFFFFF; background-color: #ed4223; border-radius: 5px; padding:10px; cursor:pointer; width:75%; font-size: 14px; font-weight: bolder; display: inline-block;}
.offerBy {color:#333333; font-size: 12px; margin: 5px 0px;}
/*Offer listing css ENDS*/

/*Offer modal css*/
.modal-header{background-color:#FF0000; color:#FFFFFF; text-align:center;}
.modal-title{font-size:18px; font-weight: bolder;}
.closebutton{font-size:18px; opacity:0.9;}
.modal-body{padding:0px}
.box{color:#000; text-align:center;}
.content{padding:15px;text-align: center;}
#offerModal-rewardimage{max-width:60%; border-radius:5px;}
#offerModal-title{font-size: 16px; font-weight: bolder; margin: 10px 0px;}
#offerModal-terms{text-align: left; font-size: 12px; color:#333333; margin-bottom:15px;}
#offerModal-terms ul{padding-left: 20px;} 
.redirect{color: #FF0000; margin:0; padding-top: 10px;}
#rhsCoupon {margin: 5px 0px; font-weight:bold; font-size: 16px;} 
.codeContainer {position: relative; padding: 10px; background-color: #f0f0f0; box-shadow: 0 2px 3px 0 rgba(0,0,0,.05); max-width: 450px; margin: 0 auto 10px; border: 1px dashed #979797; text-align: left; max-height: 55px;}
.codeContainer>a {position: absolute; right: 2px; height: calc(100% - 4px); top: 2px; width: 100%; max-width: 100px; text-align: center;background-color:#FF0000; color: #fff; line-height: 45px; cursor: pointer;}
.couponButton{margin-top:0px; width:75%; background-color:#ed4223; color: #FFFFFF; font-weight:bold;}
.couponButton:hover{color: #FFFFFF;}
/*Offer modal css ENDS*/

/*Scroll category menu for mobile*/
.scrollMenu, .scrollMobileBanner {padding: 7px; overflow: auto; white-space: nowrap; text-align: center; background-color: #FF0000; display:none; position: fixed; margin-top: 55px; z-index: 100;}
.scrollMenu a {color:#FFFFFF; text-align: center; padding: 7px;  text-decoration: none; font-weight: bold; font-size:12px;}
.scrollMenuClicked{border-bottom: 3px solid #FFFFFF !important;}
.scrollMobileBanner{background-color:#fff;}
/*Scroll category menu for mobile 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:#ed4223; font-weight:bold;}

/*powered by*/
.poweredBy{color: #FFFFFF; background-color: #FF0000; text-align: center; font-size: 10px; padding: 2px; position: fixed; bottom: 0; width: 100%;}
.poweredBy a{color: #FFFFFF; text-decoration: none;}
.poweredBy a:hover{color: #FFFFFF; text-decoration: none;}
/*ends*/



@media (max-width: 768px) {
    #mobileLogoDiv{display: block;}
    #mobileLogo{display: block; max-width:100%; padding:10px;}
    #search-form {width: 100%; float: right;}
    .search-query{background-color:#FF0000;}
    #search-form .search-query, .inner-addon .glyphicon { padding: 0px;}

    #content, #content.active{width:100%}
    #sidebar{margin-left:-250px}
    #sidebar.active{margin-left:0;border-right:.5px solid #FF0000}
    #content{padding:0}
    #sidebarCollapse span{display:none}
    .navbar-header{display:block;background-color:#FF0000;}
    .navbar{margin-bottom:0; padding:0;background-color:#FF0000; position: fixed; z-index: 100; width: 100%;}

    .allOffers {margin: 0px; margin-top: 100px;}
    .offerCoupon{padding: 7px;}
    .offertitle {font-size:10px; height:25px;}
    .offerbtn {font-size:12px; margin-bottom: 0; padding: 7px;}
    .offerBy {font-size:8px;}
    .scrollMenu, .scrollMobileBanner {display:block;}
    
    .modal{top: 0px;}
    .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}
    .content{padding: 0px;}
    .modal-content{background-color:transparent !important; border:none;}
    .modal-body {padding:10px; background-color: #FFFFFF;}
    #offerModal-rewardimage{max-width:75%; border-radius:5px;}
    #offerModal-terms { font-size: 10px; }
    .couponButton{width:100%;}
}