/* INDEX

1. GLOBAL
2. COLOR STANDARDS
3. HEADER ELEMENTS
4. SECTIONS
5. TOP NAVIGATION
6. FOOTER ELEMENTS
7. LEFT COLUMN
8. RIGHT COLUMN
9. COUPON CARDS
10. EMAIL SECTION
11. INDEX
12. CATEGORY COLORS
13. MODAL

*/



/* -----------------------------------*/
/* ---------->>> 1. GLOBAL <<<--------*/
/* -----------------------------------*/
	* {
		margin:0px;
	}


	body{
		font-family: 'Raleway', sans-serif;
	    color: #838383;
	    background: url("../images/bg.png") #e1e1e1;
	    background-size: 100px 100px;
	}

	header{
		width: 100%;
	}

	header{
		-webkit-transform: translateZ(0);
		position: fixed;
		z-index: 99;
		top: 0;
	}

	a {
		color: #60a0cd;
	}

	p {
		font-size: 14px;
	}

	.wrapper{
		width: 960px;
		margin: 0 auto;
	}

	.left{
		float: left;
	}

	.text-right{
		text-align: right;
	}

	.text-center{
		text-align: center;
	}

	.inline{
		display: inline-block;
	}

	h2{
	text-align: center;
	font-size: 20px;
	}

	ul {
		list-style-type: none;
	}

	#item-list li{
		cursor: pointer;
	}

	.coupon-num-bg-shadow{
		background-color: rgba(1, 1, 1, .05) !important;
		padding: 4px 10px 0px 7px;
		text-align: center;
  		width: 70px;
  		float: right;
   		border-radius: 4px;
	}

	.email-coupon{
  		padding: 5px 13px;
  		background-color: white !important;
  		color: rgb(96, 160, 205) !important;
  		border-radius: 4px;
	}

	.email-coupon:hover{
		background-color: rgba(255, 255, 255, 0.87) !important;
  		color: rgb(57, 131, 182) !important
	}

	h1, h2, h3, h4, h5{
	margin: 0px;
	font-weight: 300;
	}

	.numbers{
		font-family: 'Lato';
	}

	.bold{
		font-weight: bold;
	}

	.one-third{
		width: 33.03%;
	}

	.one-half{
		  width: 49.7%;
	}
/* -----------------------------------*/
/* --->>> 2. COLOR STANDARDS <<<------*/
/* -----------------------------------*/
	
	.lightgrey{
		color: #e1e1e1;
	}

	.white{
		color: #fff;
	}

	.blue{
		border-left-color: #60a0cd;
	}

	.green {
		color: #60cdc4;
	}

	.darkgrey {
		color: #B7B6B6;
	}
/* -----------------------------------*/
/* ---->>> 3. HEADER ELEMENTS <<<-----*/
/* -----------------------------------*/

	.header-wrapper{
		background: #60a0cd;
		width: 100%;
		position: relative;
		-webkit-transform: translateZ(0);
	}

	header.your-coupons .header-wrapper{
		top:-2px;
	}

	header .wrapper{
		z-index:-1;
		top: -2px;
		padding: 8px 0;
	}

	header h1{
		font-size:20px;
	}

	header a, .left-column a{
		text-decoration: none;
	}

	.header-right-wrapper {
	padding: 4px 0px 0px 23px;
	}

/*	a .num-coupons{
		color: #fff;
	}*/

	header .coupon{
/*		background-image:url("../images/coupon-icon.png");
		background-repeat:no-repeat;
		background-size: 20px 20px;
  		background-position: 21px 3px;*/
		font-family: 'Raleway', sans-serif;
	    font-weight: 100 !important;
	}

	.inline{
		display: inline-block;
	}

	.block{
		display: block;
	}

	.top{
		vertical-align: top;
	}

	.four-pixels-top{
		 margin-top: 4px;
	}

	.coupon-image{
		width:20px;
		height: 20px;
	}

	.coupon-cat-icon{
		width: 35px;
	}

	header .header-nav{
		width: 80px;
	}

	.header-nav img, .nav-menu .wrapper img{
		width: 30px;
	}

	.header-wrapper .wrapper img.left{
		margin: 0;
	}

	header .monserrat h1, .monserrat{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	}


h1.logo.left{
	width: 857px;
}
/* -----------------------------------*/
/* ---------->>> 4. SECTIONS <<<------*/
/* -----------------------------------*/


	section.wrapper.selected-coupons, section.wrapper.your-coupons{
		overflow:auto;
		position:relative;
		margin-top: 130px;
	}


/* -----------------------------------*/
/* ----->>> 5. TOP NAVIGATION <<<-----*/
/* -----------------------------------*/

	.nav-menu, .md-overlay{
		height:34px;
		 background-color: #fff;
		position:relative;
		font-size: 12px;
		text-align: center;
	}

	.nav-menu .wrapper, .no-padding{
		padding: 0px !important;
	}

	.sml-bar-top-padding{
		padding-top:7px !important;
	}

	.nav-cat {
		height: 28px;
	}

	.nav-sml-bar{
		height: 2px;
		width: 100%;
	}

	#current-coupon h2{
		margin-top: 75px;
	}

	.nav-menu-text {
		padding: 9px 8px 0 8px;
	}

	.nav-email-coupon{
		font-size: 18px;
		font-weight: 600;
		line-height: 34px;
	}


/* -----------------------------------*/
/* ---->>> 6. FOOTER ELEMENTS <<<-----*/
/* -----------------------------------*/


	.footer-wrapper{
		height:100%;
		width:960px;
		margin: 0 auto;
	}

	.footer-section{
		width: 230px;
		padding-right:10px;
		height:100%;
	}
	
	.email-coupon{
	background-color:#60a0cd;
	}

/* -----------------------------------*/
/* ------->>> 7. LEFT COLUMN <<<------*/
/* -----------------------------------*/


	.left-column a{
		color: #838383 !important;
	}

	.left-column{
	width: 198px;
	margin: 10px;
	 border-left-style: solid;
	 border-left-width: 2px;
	}


	ul#item-list{
		margin: 0px !important;
	}


	ul#item-list li{
		margin-left: 10px;
	}

	.left-column li{
		line-height: 22px;
		font-size: 13px;
	}


/* -----------------------------------*/
/* ------>>> 8. RIGHT COLUMN <<<-------*/
/* -----------------------------------*/

	.right-column{
		width: 720px;
		margin: 10px;
		overflow:hidden;
		min-height:100px;
	}

	.item-list-number{
		font-style: italic;
		color: #B5B5B5;
	}


/* -----------------------------------*/
/* ------->>> 9. COUPON CARDS <<<-----*/
/* -----------------------------------*/

	.wrapper-added h1, .wrapper-added h2, .wrapper-added h3{
		text-align: center
	}

	.wrapper-added h1{
		font-weight: 500;
		margin-top:10px;
		font-size: 36px;
		line-height: 40px;
	}

	.wrapper-added h2{
		font-weight: 300;
		font-size: 30px;
		margin-top: 10px;
		
	}

	.wrapper-added h3{
		font-weight: 300;
		font-size: 14px;
	}

	.wrapper-added{
	  vertical-align:top;
	  width: 350px;
	  margin-bottom: 20px;
	}

	.color-bar{
	  height: 4px;
	}

	.info{
	  	/*background-color: #fff;*/
		padding: 14px 15px 20px 15px;
		z-index:10;
		position: relative;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	}

	.shadow-bottom, .your-coupons .shadow{
		top: -2px;
	}

	.shadow, .shadow-bottom{
	  height: 2px;
	  background-color: rgba(0, 0, 0, .1);
	  z-index:3;
	  position: relative;
	}


	.coupon-status-wrapper{
		line-height: 40px;
		height: 40px;
		cursor: pointer;
	 	position:relative;
	  	margin-top: -2px; /*For Shadow*/
	  	width: 350px;
	  	overflow: hidden;
	  	font-size: 12px;
	  	font-weight: normal;
	  	text-align: center;
	    font-family: 'Montserrat', sans-serif;
	    text-transform: uppercase;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
    	-khtml-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
	}


	.remove-coupon{
		bottom: 0px;
	  	color: #fff;
	 	background-color: #60cdc4;
	 	position:relative;
	 	width:350px;
	 	color: #fff;
	 	-webkit-transition: background .15s ease-in;
		-moz-transition: background .15s ease-in;
		-ms-transition: background .15s ease-in;
		-o-transition: background .15s ease-in;
		transition: background .15s ease-in;
	}

	.remove-coupon:hover{
		background-color: #5AC5BC;
		-webkit-transition: background .15s ease-in;
		-moz-transition: background .15s ease-in;
		-ms-transition: background .15s ease-in;
		-o-transition: background .15s ease-in;
		transition: background .15s ease-in;
	}

	.add-coupon{
		bottom: 0px;
		position: relative;
		background-color: #f1f1f1;
	    width:350px;
	  	color: #ccc8c8;
	  	 -webkit-transition: background .15s ease-in;
		-moz-transition: background .15s ease-in;
		-ms-transition: background .15s ease-in;
		-o-transition: background .15s ease-in;
		transition: background .15s ease-in;
	}

	.add-coupon:hover{
		background-color: #EBEAEA;
	  	color: #ccc8c8;
	  	 -webkit-transition: background .15s ease-in;
		-moz-transition: background .15s ease-in;
		-ms-transition: background .15s ease-in;
		-o-transition: background .15s ease-in;
		transition: background .15s ease-in;
	}


/* -----------------------------------*/
/* ------->>> 10. EMAIL SECTION <<<---*/
/* -----------------------------------*/

	#email{
		height: 100px;
		background-color: rgba(0, 0, 0, 0.05);
		position: relative;
		top: 100px;
	}

	.button{
		background: #60a0cd;
		padding: 5px;
	}

	

/* -----------------------------------*/
/* ------>>> 11. INDEX PAGE <<<-------*/
/* -----------------------------------*/


/* ----------> TITLE <--------- */

	#choose-cat h1.monserrat{
		text-shadow: 1px 1px 1px #F2F2F2;
	}

	#choose-cat h1{
		font-size:25px;
		text-align: center;
		margin-top: 150px;
		margin-bottom: 75px;
	}

/* ----------> MENU <--------- */


	ul, .header-nav ul {
		padding: 0px !important;
	}

	.header-nav ul {
		margin: 0px !important;
	}



	.kwicks {
		width: 960px;
		height: 60px;
	}

	.kwicks > li {
		overflow:hidden;
		height: 60px;
		/* overridden by kwicks but good for when JavaScript is disabled */
		width: 125px;
		float: left;
	}

	.kwicks > li:before{
		margin-left: 50px;
	}

	li img,  .wrapper img.left{
		margin: 14px;
		height: 33px;
	}

	.cat{
		padding:5px 8px;
		background-color: rgba(1, 1, 1, .05);
		margin: 3px 0 0 0 !important;
	}

	p.cat-title{
		margin: 8px 5px 0 0 !important;
	}

	.cat-title{
		width: 132px;
	}

	.panel-wrapper{
		margin-top: 12px;
		opacity:0;
	}


/* -----------------------------------*/
/* ----->>> 12. CATEGORY COLORS <<<---*/
/* -----------------------------------*/
	
	.color-1, .color-1 a {
		background-color: #84312b;
		color: #fff;
	}

	.color-2, .color-2 a{
		background-color: #b74740;
		color: #fff;
	}

	.color-3, .color-3 a{
		background-color: #dc6f5d;
		color: #fff;
	}

	.color-4, .color-4 a{
		background-color: #e69d46;
		color: #fff;
	}

	.color-5, .color-5 a{
		background-color: #f0c868;
		color: #fff;
	}

	.color-6, .color-6 a{
		background-color: #e8e980;
		color: #414141;
	}

	.color-7, .color-7 a{
		background-color: #b9e077;
		color: #414141;
	}

	.color-8, .color-8 a{
		background-color: #76cb7a;
		color: #fff;
	}

	.color-9, .color-9 a{
		background-color: #40917d;
		color: #fff;
	}

	.color-10, .color-10 a {
		background-color: #499f9f;
		color: #fff;
	}

	.color-11, .color-11 a{
		background-color: #6cb6c9;
		color: #fff;
	}

	.color-12, .color-12 a{
		background-color: #618dc9;
		color: #fff;
	}

	.color-13, .color-13 a{
		background-color: #5f59b9;
		color: #fff;
	}

	.color-14, .color-14 a{
		background-color: #7a4a88;
		color: #fff;
	}

	.font-color-1{
		color: #84312b;
	}

	.font-color-2{
		color: #b74740;
	}

	.font-color-3{
		color: #dc6f5d;
	}

	.font-color-4{
		color: #e69d46;
	}

	.font-color-5{
		color: #f0c868;
	}

	.font-color-6{
		color: #CFD066;
	}

	.font-color-7{
		color: #A5CE5F;
	}

	.font-color-8{
		color: #76cb7a;
	}

	.font-color-9{
		color: #40917d;
	}

	.font-color-10{
		color: #499f9f;
	}

	.font-color-11{
		color: #6cb6c9;
	}

	.font-color-12{
		color: #618dc9;
	}

	.font-color-13{
		color: #5f59b9;
	}

	.font-color-14{
		color: #7a4a88;
	}

	.font-color-white{
		color: white;
	}

	.left-column-color-1{
		border-left-color: #84312b;
	}

	.left-column-color-2{
		border-left-color: #b74740;
	}

	.left-column-color-3{
		border-left-color: #dc6f5d;
	}

	.left-column-color-4{
		border-left-color: #e69d46;
	}

	.left-column-color-5{
		border-left-color: #f0c868;
	}

	.left-column-color-6{
		border-left-color: #F3F48A;
	}

	.left-column-color-7{
		border-left-color: #A7D062;
	}

	.left-column-color-8{
		border-left-color: #76cb7a;
	}

	.left-column-color-9{
		border-left-color: #40917d;
	}

	.left-column-color-10{
		border-left-color: #499f9f;
	}

	.left-column-color-11{
		border-left-color: #6cb6c9;
	}

	.left-column-color-12{
		border-left-color: #618dc9;
	}

	.left-column-color-13{
		border-left-color: #5f59b9;
	}

	.left-column-color-14{
		border-left-color: #7a4a88;
	}


/* -----------------------------------*/
/* --------->>> 13. MODAL <<<---------*/
/* -----------------------------------*/

	form {
		margin-top: 13px;
	}

	input{
		color: #60cdc4;
		margin: 15px 0;
		text-align:center;
		border: 0px; 
		height: 50px;
		width: 460px;
		background-color: #f1f1f1;
		font-family: "Raleway", sans-serif;
	}

	input:focus {
    	outline-width: 0;
	}

	#modal .contents{
		padding:20px;
		color: #60a0cd;
	}

	#modal .contents h1, input.send{
		font-size: 18px;
		text-transform: uppercase;
		text-align: center;
		font-family: "Montserrat"
	}

	.send h1{
		padding-top: 7px;
	}

	#dialog .color-bar{
		background-color: #60a0cd;
	}

	.blind{
		opacity: 0.7;
		background-color: #000000 !important;
		position: fixed;
		z-index: 9999;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	#modal .window{
		position:fixed;
		z-index:10000;
		width: 500px;
		height: 312px;
		margin-left: -250px;
		margin-top: -156px;
		left:-1000px;
		top: -1000px;
		background-color: #fff;
	}

	#dialog .bottom{
		background-color: #60cdc4;
		top: -2px;
		position: relative;
		height: 40px;
	}

	input.send{
		width:100%;
		color: #fff !important;
		height: 40px;
		margin: 1px !important;
		background-color: transparent;
	}

.md-overlay {
	width:300px;
	margin: 0 auto;
	padding: 5px 0;

}

.md-overlay a{
text-align: none;
text-decoration: none;
}

a.close{
	text-decoration: none;
}

	#warning.header-wrapper{
		background-color:#b74740;
	}

	#warning .wrapper{
		height: 15px;
	}

	#warning h2{
		font-size:12px;
	}

.coupon-image-wrapper > img {
	width:350px;
}

.coupon-image-wrapper{
height: 100%;
position: absolute;
overflow: hidden
}

.info-wrapper{
	position: relative;
	z-index: 10;
	background-position: top center;
	background-size: cover;
}

.fade-out{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.18))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.18) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.18) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.18) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.18) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1a000000',GradientType=0 ); /* IE6-9 */
	position: absolute;
	height: 100%;
	width: 100%;
}


.active{
	font-weight: bold;
  	color: rgb(82, 82, 82);
}