/*********************************************
	STYLES FOR BROWSER
	1. Developer, this is the individual 
	   css file for a web browser
	2. Please keep your code CLEAN. 
	3. Bring over ANY custom tags. 
	4. Make SURE to test the "Big 5" Browsers:
		-- IE7, IE8 - A MUST! 
		-- Firefox
		-- Chrome
		-- Safari
		-- Opera
*********************************************/
html, body {
	margin:0;
	padding:0;
}
body { /* Use both the px/em variable */
	background: url("/images/bg.jpg") no-repeat scroll center top #100500;
    color: #000000;
    font-family: arial;
    font-size: 14px;
    line-height: 18px;
}
a { /* default link styles*/
	color:#458d1b;
	text-decoration: none;
}
a:hover {
	/*	text-decoration: underline;	*/
}
.wrapper { /* This is where you would change by default. A SAFE width is 320px */
	width: 1000px;
	margin:10px auto;
}
/*********************************************
	STANDARD TAGS:
	These are our standard tags. YOU MUST
	USE THESE TO HAVE THE SITE WORK PROPERLY
	WITH MOBILE AND DEFAULT CSS
	1) .header
	2) .main-nav -- located in nav.css
	3) h1, h2, h3, h4, h5
	4) .breadcrumbs
	5) .content
		-- .col-1
		-- .col-2 
		-- .col-3
		-- Make more if needed.
	6) .footer
*********************************************/

.header {
	height: 160px;
	z-index: 10;
	position: relative;
}
h1 { /* This will use the same admin controlled headers */
	background-repeat: no-repeat;
    color: #458d1b;
    display: block;
    float: left;
    font-family: knuckle;
    font-size: 23px;
	letter-spacing:1px;
    height: 20px;
    width: 400px;
	padding:5px 0 0;
	*padding: 15px 0 0;
}

h2, h3, h4, h5 { /* Format as you need, use em's */
}

h2 {
	color: #3d79d1;
    display: block;
    font-family: arial;
    font-size: 16px;
	line-height:1.2em;
    width: 400px;
	padding:5px 0 0;
}

.breadcrumbs { /* Format as you need with your a tags, etc. */
	color: #458d1b;
    float: right;
    margin: 0 0 0 10px;
}
.content { /* Format as you need. Use em's where you can to keep consistent */
	background: #fff;
	position: relative;
	z-index: 10;
	margin-bottom:15px;
	border: solid 4px #3d79d1;	
}

.inner-content {
	overflow:hidden; /* for equal height columns */
	padding:15px 15px 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-image: url(/images/content-gradient.jpg);
	background-position: bottom;
	background-repeat:repeat-x;
}

/*.inner-content p {
	line-height: 1.5em;
}*/

.slick-dots {
	bottom: -35px;
	padding: 0;
}

.content ul {margin:0 0 10px 0;}

.col {
	float:left;
	margin-bottom:-3000px;
	padding-bottom:3000px;
}
.col-1 {
	width: 675px;
	float: left;
}
.col-2 {
	width: 275px;
	padding:0 6px;
	float: left;
}
.col-3 {
	width: 100px;
	float: left;
}
.footer { /* Format as you need. */
	width: 970px;
	padding:15px;
	color:#fff;
}
.footer a {
	color: #fff;
	text-decoration: none;
}
.footer a:hover {
	color: yellow;
	text-decoration: none;
}
/* Use this for your footer nav to make it easier on spacing! */
	/* nav class inherited from core.css */
	
	.footer ul.nav {
	text-align:center;
	margin:0 auto 5px;
}
.footer ul.nav li {
	position:relative;
	display: inline;
	float:none;
	border-left: 1px solid #008c9a;
	padding:0 5px 0 10px;
}
.links ul {
	padding-left:0px;
}
.links ul li {
	background: url("/images/arrow.png") no-repeat scroll 0 4px transparent;
    list-style: none outside none;
    padding: 2px 0 2px 15px;
}
/*******************************************
	SITE SPECIFIC FORMATTING
	1. This is where you will test and put 
	   your site specific tags. 
********************************************/
.call {
	margin-top:20px;
}
.fb {
	margin: 30px 0 0 10px;
}
.fb img {
	border-radius: 5px;
}
.spills-title {
	color: #FFFFFF;
    display: block;
    font-family: spills;
    font-size: 30px;
    line-height: 45px;
}

.coupon .spills-title {
    font-size: 28px;
	line-height:1.1em;
	font-style:normal;
}

a div.coupon div.fine-print{
    color: #000;
}

a:hover div.coupon div.center{
    text-decoration: none;
}

.content .spills-title {
	color:#3B7AD9;
	height:33px;
}
.sub-title {
	color: #134697;
    font-family: gotham;
    font-size: 19px;
	margin-left:15px;
	margin-bottom:10px;
}
ul.stars li {
	background:url(/images/star.jpg) no-repeat left top;
	list-style:none;
	padding-left:15px;
	margin-left:0px;
}
.share {
    height: 100%;
    padding-left: 29px;
}
.addthis_toolbox {
	padding-top:5px;
}
.round-box {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #fff;
}

.round-footer {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #3D79D1;
	position:relative;
	z-index:1;
}
.round-button {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: #3D79D1;
	color:#fff;
	cursor: pointer;
    padding: 3px 10px;
    text-transform: uppercase;
	position:relative;
	z-index:3;
}

.round-button:hover {
background:#4E9624;
	text-decoration:none;
	color:yellow;
}

a.round{display:inline-block;}
.welcome-title {
	color: #124693;
    display: block;
    font-family: arial;
    font-size: 19px;
    font-weight: bold;
    margin: 20px 0 15px;
}
.stars {
	padding-left:20px;
}

.discover-text{
	width:180px;
}

.coupon {
	width:300px;
	border: dashed 2px #3d79d1;
	margin: 20px 0 0 20px;
	background: #ffffff;
	font-size:10px;
	font-style:italic;
	line-height:12px;
	}

.offer {
	margin-top: 50px;
    padding-left: 20px;
}
.f-title {
	color: #FFFFFF;
    font-family: knuckle;
    font-size: 26px;
    line-height: 20px;
    padding-top: 10px;
}
.email {
	border-right: 1px solid #FFFFFF;
    height: 240px;
    padding-left: 25px;
    padding-right: 25px;
    width: 260px;
}
.links {
	border-right: 1px solid #FFFFFF;
    height: 240px;
    width: 210px;
}
.contact {
	padding-left:25px;
	width: 423px;
}
.f-pic {
	margin-left: 23px;
    margin-top: -30px;
    position: relative;
    width: 230px;
}
.footer .frm .frm-row {
    padding: 0 0 5px;
}
.footer a.round-button {
	background:#194898;
}
.footer a.round-button:hover {
	background:#4E9624;
}
.space_me {
	border-bottom: 1px solid #194898;
    margin: 2px 0 10px;
}

/********************
		FONTS
********************/
@font-face {
	font-family: 'knuckle';
	src: url('/fonts/knucklesandwich-webfont.eot');
	src: url('/fonts/knucklesandwich-webfont.eot?#iefix') format('embedded-opentype'),  url('/fonts/knucklesandwich-webfont.woff') format('woff'),  url('/fonts/knucklesandwich-webfont.ttf') format('truetype'),  url('/fonts/knucklesandwich-webfont.svg#KnuckleSandwichRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'spills';
	src: url('/fonts/ccspills-webfont.eot');
	src: url('/fonts/ccspills-webfont.eot?#iefix') format('embedded-opentype'),  url('/fonts/ccspills-webfont.woff') format('woff'),  url('/fonts/ccspills-webfont.ttf') format('truetype'),  url('/fonts/ccspills-webfont.svg#CCSpillsRoman') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'gotham';
	src: url('/fonts/gothamcondensed-bold-webfont.eot');
	src: url('/fonts/gothamcondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),  url('/fonts/gothamcondensed-bold-webfont.woff') format('woff'),  url('/fonts/gothamcondensed-bold-webfont.ttf') format('truetype'),  url('/fonts/gothamcondensed-bold-webfont.svg#GothamCondensedBold') format('svg');
	font-weight: normal;
	font-style: normal;
}


.silvertruck{
	background:url(/images/silvertruck.png) no-repeat top center;
	font-family:knuckle;
	width:300px;
	text-align:center;
	float:left;
	margin:5px;
	padding:122px 0 25px 0;
	font-size:25px;
	color:#fff;
}

.coupon_cont {
	margin:auto;
	width: 100%;
}

input, textarea {
	border:0;
	border-radius:10px;
	padding:5px 3px !important;
	box-sizing:border-box;
}

#mask {
    background: rgba(0, 0, 0, 0.8);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    display: none;
}
#mask .close {
    color: #ffffff;
    cursor: pointer;
    opacity: 1;
    font-size: 2rem;
    text-shadow: none;
    padding: 20px;
    text-align: right;
}
#opening-modal {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    height: 100%;
    text-align: center;
}
#opening-modal .modal-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 15px;
}
#opening-modal .modal-content img {
    max-width: 100%;
    height: auto;
}