@charset 'utf-8';

/*////////////// CUSTOM FONTS ///////////*/

/* Avenir */
@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=e4285d0a-3e89-47ee-8410-bd0bc8895cae");

@font-face{
    font-family:'Avenir';
    font-weight: 100;
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/3511a780-31ca-4ee1-9083-89b1b7185748.eot?#iefix');
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/3511a780-31ca-4ee1-9083-89b1b7185748.eot?#iefix') format('eot'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/4fb9056b-4ac3-488b-9bac-75741b0ff0bd.woff2') format('woff2'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/c4352a95-7a41-48c1-83ce-d8ffd2a3b118.woff') format('woff'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/3e419b5b-c789-488d-84cf-a64009cc308e.ttf') format('truetype'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/ca038835-1be3-4dc5-ba25-be1df6121499.svg#ca038835-1be3-4dc5-ba25-be1df6121499') format('svg');
}

@font-face{
    font-family:'Avenir';
    font-weight: 300;
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/2f5a6074-badc-4e08-83f1-ed67fe5c3d7c.eot?#iefix');
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/2f5a6074-badc-4e08-83f1-ed67fe5c3d7c.eot?#iefix') format('eot'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/75c84254-5125-412c-bc24-56769ae3b627.woff2') format('woff2'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/b9ebb19d-88c1-4cbd-9baf-cf51972422ec.woff') format('woff'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/5ed4f98e-9044-4810-88ff-74d412c1351f.ttf') format('truetype'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/4cb16859-16ca-4342-b89c-292dc83266af.svg#4cb16859-16ca-4342-b89c-292dc83266af') format('svg');
}

@font-face{
    font-family:'Avenir';
    font-weight: 500;
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/212ab03d-5db2-4d6a-b94c-171cc702aa51.eot?#iefix');
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/212ab03d-5db2-4d6a-b94c-171cc702aa51.eot?#iefix')format('eot'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/e4d36745-a861-4a49-aa17-6510e67429d3.woff2') format('woff2'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/2cac77ec-9bc0-4ee7-87e4-27650190744f.woff') format('woff'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/aaf11848-aac2-4d09-9a9c-aac5ff7b8ff4.ttf') format('truetype'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/294099f3-8d00-4676-afc5-5e9d8d43ad69.svg#294099f3-8d00-4676-afc5-5e9d8d43ad69') format('svg');
}

@font-face{
    font-family:'Avenir';
    font-weight: 700;
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/f61bf0f6-c193-4100-b940-12a1a01dcee5.eot?#iefix');
    src:url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/f61bf0f6-c193-4100-b940-12a1a01dcee5.eot?#iefix') format('eot'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/65cde95a-ac33-4c65-8198-e37857968d1a.woff2') format('woff2'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/7147ec3a-8ff8-4ec9-8c5c-bd1571dc6ae6.woff') format('woff'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/d1dc54b2-878d-4693-8d6e-b442e99fef68.ttf') format('truetype'),
url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/avenir/731dd4d3-64da-427d-ba61-01575b3cf3f7.svg#731dd4d3-64da-427d-ba61-01575b3cf3f7') format('svg');
}


/* Glyphs */
@font-face {
  font-family: 'shopkick-glyphs';
  src:  url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/skglyphs/shopkick-glyphs.eot?mb2a7b');
  src:  url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/skglyphs/shopkick-glyphs.eot?mb2a7b#iefix') format('embedded-opentype'),
    url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/skglyphs/shopkick-glyphs.ttf?mb2a7b') format('truetype'),
    url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/skglyphs/shopkick-glyphs.woff?mb2a7b') format('woff'),
    url('https://s3-us-west-1.amazonaws.com/shopkick.webview.files/webfonts/skglyphs/shopkick-glyphs.svg?mb2a7b#shopkick-glyphs') format('svg');
  font-weight: normal;
  font-style: normal;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'shopkick-glyphs' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo:before {
  content: "\e901";
}
.logo-box:before {
  content: "\e902";
}
.icon:before {
  content: "\e903";
}
.icon-box:before {
  content: "\e904";
}
.walk-in:before {
  content: "\e905";
}
.scan:before {
  content: "\e906";
}
.qrcode:before {
  content: "\e909";
}
.purchase:before {
  content: "\e907";
}
.receipt:before {
  content: "\e908";
}
.basket:before {
  content: "\e914";
}
.deal:before {
  content: "\e911";
}
.gift:before {
  content: "\e90a";
}
.invite:before {
  content: "\e913";
}
.calendar:before {
  content: "\e90b";
}
.binoculars:before {
  content: "\e912";
}
.cart:before {
  content: "\e900";
}
.walk-in-btn:before {
  content: "\e915";
}
.plus:before {
  content: "\e916";
}
.facebook:before {
  content: "\e90c";
}
.instagram:before {
  content: "\e90d";
}
.twitter:before {
  content: "\e90e";
}
.pinterest:before {
  content: "\e90f";
}
.linkedin:before {
  content: "\e910";
}




/*///////////// STYLES BEGIN /////////////*/

html, body
	{
		padding:0;
		margin:0;
		width:100%;
	}

body
	{
		font-size:18px;
		font-family:"Avenir",Helvetica,Arial,sans-serif;
		background: #DCE1E6;
		color:#2D3237;
		text-align:left;
	}
.hide-for-desktop{display: none;}

#branding,header,main,footer
	{
		width:100%;
		max-width:45em; /*720px width at a 18px font-size*/
		padding: 0;
		margin: 0 auto;
	}

section
	{
		padding:1.5em;
		text-align: center;
		background: #FFF;
	}

header, section
	{
		margin-bottom: 1em;
	}

p
	{
		margin:0;
		padding: 1em 0;
	}

h1,h2,h3,h4,h5,h6
	{
		font-weight:400;
		margin: 0; padding: 0;
	}

a
	{
		text-decoration:none;
	}

.cta
	{
		display:block;
		text-align: center;
		text-decoration: none;
		margin: 0 auto;
		background: #0096D6;
		color: #FFF;
		border-radius: .65em;
		padding: 1em;
		width: auto;
		max-width: 12em;
		transition: .3s;
	}

.cta:hover{
	background: #57bbe4;
}




/* Shopkick Branding */
#branding
	{
		background: #FFF;
		height: 4.5em;
		text-align: center;
	}
#branding img {height:100%; width: auto;}
	
.logo, .logo-box
	{
		font-size:8.75em;
		line-height: .525em;

	}
	
.sk-blue
	{
		color:#0096D6; 
	}

.blue-headline{display: block; padding: 1.15em; color: #FFF; background:#57bbe4; text-align: center; font-size: 1.45em;}

/* Header Area */
.hero-desktop, .hero-mobile
	{
		width:100%; height:auto;
		display: block;
	}
	
.hero-mobile
	{
		display:none;	
	}


/* Main Area */
.headline
	{
		display:block;
		font-size: 1.2em;
		color: #0096D6;
		padding: 1.25em 1.25em 0;
	}

.headline i
	{
		font-size: 1.8em;
		line-height: .9em;
		vertical-align: middle;
		margin: .15em;
	}

.headline h1
	{
		font-weight: 700;
		display: inline-block;
		vertical-align: top;
		line-height: 1.1em;
	}

.grid
	{
		text-align: center;
		padding: 1em;
	}

.date
	{
		width: 95%; height: 10px;
		border-bottom: 1px solid #DCE1E6;
		text-align: center;
		margin:0 auto 1em;
		padding-top: 1.5em;
	}

.date span
	{
		font-size: 1.1em; line-height: 1em;
		background-color: #FFF; padding: 0 1em;
		display: inline-block; color:#2D3237;
	}

.item
	{
		display: inline-block;
		text-align: center;
		vertical-align: top;
		margin: .75em 0;
		font-size:1.25em;
	}

.item figure
	{

		width: 9em;
		margin: .5em .75em;
	}

.item figure img
	{
		width:100%;
		height: auto;
		display: block;
		border-radius: 100%;
		border: 1px solid #C6C9D0;
	}

.item figcaption .subline
	{
		font-size: .65em;
	}

.item figcaption .ott-logo img
	{
		height:1.5em;
		width: auto;
		margin-top:.5em;
	}

.group-last-item{margin-bottom: 2em;}


/* Footer Area */
.smallprint
	{
		width: 90%;
		margin: 0 auto;
		font-size: .65em;
		color: rgba(80,80,90,.65);
		text-align: left;
	}
	
footer
	{
		background: #0096D6;
		color: #FFF;
	}
	
#social
	{
		padding: 2em 0;
		margin:auto;
		list-style-type: none;
		text-align: center;
	}

#social li
	{
		display: inline-block;
	}

#social a
	{
		text-decoration: none;
		margin: 0 0.5em;
		color:#FFF;
	}

#social a i
	{
		font-size:2em;
	}

#how-to {text-align:center; color:#FFF; width: 100%; max-width: 23.75em; padding:0; margin: 0 auto; font-size:24px; font-weight: 300 !important;}
#how-to p{font-size:.9em; padding: .5em 0;}
#how-to  i {font-size:3em; display: block; margin-bottom: .5em;}
#how-to header {padding-top:3em;}
#how-to  h1 {font-size: 1.2em;}
#how-to  h2 {font-size: 1.1em; margin: 0; padding: 0;}
#how-to section{background: none; margin-bottom: 0; padding-bottom: 0;}
#how-to section .copy {width:13.3em; margin: 0 auto; text-align: left;}
#how-to section .text {text-align: left; display: inline-block; vertical-align: top; }
#how-to section .number {margin-right:.5em;}
#how-to section img{width:100%; padding-top:1.5em;}
	
/*///////// MEDIA QUERIES BEGIN ///////////*/

@media screen and (max-width: 520px)
	{
		#branding{height:3.5em;}
		.logo, .logo-box {font-size: 7em;}
		
		.hide-for-desktop{display:block;}
		.hide-for-mobile{display:none;}
		
		section
			{
				padding:2em .5em;
			}
		
		.item figure
			{
				width: 7.5em;
			}
		
		.hero-desktop
			{
				display: none;	
			}
		
		.hero-mobile
			{
				display: block;	
			}

		
		.headline{font-size:1.2em}

		.item figure
			{
				width:10em;
				margin: .5em .75em;
			}
		
		#how-to {font-size:22px;}
	}

@media screen and (max-width:420px)
	{
		section
			{
				padding:2em 0;
			}
		
		.item figure
			{
				width: 7em;
			}
		
		.item
			{
				font-size:17.5px
			}
	}

@media screen and (max-width:375px)
	{
		.item
			{
				font-size:16.5px
			}
		
		.item figure
			{
				width: 6.25em;
			}
		
		.headline
			{
				font-size:1.1em;
			}
		#how-to {font-size:18px;}
	}
/*///////// MEDIA QUERIES END ///////////*/
