/*
 * Copyright 2014 Luciduals
 * Author: Jay Palmer
 */


/* Global Settings */

@font-face {
    font-family: Motlow;
    src: url(/css/motlow/MotlowD.otf);
}

@font-face {
    font-family: Jasper;
    src: url(/css/jasper/JasperStandard.otf);
}

body {background-color: #000000;}

a {color: #8c704f;}
a:hover {color: #b29572;}

.center {margin-right: auto; margin-left: auto;}
.bold {font-weight: 700;}

#page-background {background-color: #000000; background: url(/img/jd/background_texture.png) no-repeat top left scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}


/* Logo & Slogan Layout */

.page-logo {text-align: left; margin: 0; padding: 0}

.page-slogan {text-align: left; margin:0; padding: 0;}

.page-slogan-alt p {color: #fff; text-align:left; font-size: 32px; font-weight: 700; font-family: 'Motlow', serif; text-transform: uppercase; }

.slogan-sub {font-size: 12px; vertical-align: middle; border-top: 1px solid; border-bottom: 1px solid; padding-top: 3px;}


p.promo-discount-alt {margin-top: -50px; text-align:center; font-size: 36px; font-weight: 700; color: #fff; font-family: 'Motlow', serif; margin-bottom: 15px; text-transform: uppercase;}
p.discount-amt {text-align:center; font-size: 150px; color:#8c704f; font-family: 'Motlow', serif; text-shadow: 5px 5px #70563c; text-transform: uppercase;}
/* Main Page Boxex */

div.page-main {margin-bottom: 30px;}

.page-main a:hover {text-decoration: none;}

.right-column-up {margin-top: -150px;}

.promo-discount img {max-width: 90%;}

.promo-discount-mobile {display: none;}

.promo-discount-mobile img {max-width: 90%;}

.shoutout-box {position: relative; background-color: rgba(226,226,226,1.0); border: 6px solid; border-radius: 4px; padding: 26px; max-width: 75%; margin: 40px auto; }

.shoutout-box p {color: #333;}

.box-alt {position: relative; background-color: rgba(226,226,226,0.8);}

.box-img-bottom {padding-bottom: 0px;}

.shoutout-box-right-space1 {padding-right: 100px; }

.shoutout-box-right-space2 {padding-right: 100px; }

img.shoutout-img-inside {max-width: 95%; display: block; margin: 0 auto;}

img.shoutout-img-inside-alt {max-width: 95%; display: block; margin: 0 auto; opacity: 0.9;}

.shoutout-phone-img {margin-top:-60px; margin-right: -10px;}

.shoutout-phone-img-alt {margin: -40px -10px 0px 5px; visibility: hidden;}

.shoutout-phone-img-alt2 {position: absolute; bottom: 0px; right: 10px;}

.shoutout-nbr {position: absolute; left: -25px; top: -25px; width: 50px; height: 50px; background-color: #70563c;}

p.shoutout-highlight {color: #ad0000; font-weight: 500; font-size: 120%;}

.right-box-1 {margin-left: -20px;}

.right-box-2 {margin-left: 25px;}

.right-box-3 {margin-left: 70px;}

.shoutout-nbr p {color: #f5f5f5; text-align:center; font-size: 36px; font-weight: 700; font-family: 'Motlow', serif; margin-top: 4px; }
/*.upsize p {font-size: 38px; }*/

.page-content {margin-bottom: 50px;}

.validate p {font-size: 12px; text-align: center; margin-top: 20px; color: #8c704f;}
.validate a {color: #8c704f;}
.validate a:hover {color: #b29572; text-decoration: none;}

.page-heading h1 {text-align:center; font-size: 80px; font-weight: 700; color: #999999; font-family: 'Motlow', sans-serif; margin-bottom: 15px; text-shadow: 2px 2px #000; font-variant: small-caps;}
.heading-upper {font-size:60%; display:inline-block;}
.heading-lower {font-size:160%;}
h1.heading-system {font-size:420%;}

.no-scroll-box-responsive {margin: 5px; background-color: rgba(226,226,226,0.8); font-size: 11px; color: #000000; padding: 15px; overflow-x: hidden;
 border: 5px solid; border-color: #b5b5b5; text-align: left;}

.scroll-box-responsive {margin: 5px; background-color: rgba(226,226,226,0.8); font-size: 11px; color: #000000; height:500px; padding: 15px; overflow-x: hidden;
overflow-y: scroll; border: 5px solid; border-color: #b5b5b5; text-align: left;}

.scroll-box-responsive p {font-size: 11px;}

.scroll-box-responsive h1 {font-size: 34px; margin: 5px 0 20px 0; text-align: center; text-transform: uppercase; font-weight: 600;}
.scroll-box-responsive h2 {font-size: 16px; margin: 0 0 20px 0; text-align: center; text-transform: uppercase; font-weight: 600;}
.scroll-box-responsive h3 {font-size: 14px; font-weight: 500;}
.scroll-box-responsive h4 {font-size: 13px; font-weight: 500; text-decoration: underline;}
.scroll-box-responsive h5 {font-size: 12px; font-weight: 500; margin-bottom: 5px; }

.contact-large p {font-size: 20px;}


.scroll-box-instructions {width: 140px; text-align: right; font-size: 30px; line-height: 36px; font-weight: 400; float: right; color: #70563c; font-family: 'Jasper', sans-serif;}

.col1 .col2 {position: relative; margin:0 4px;}
.scroll-box-responsive div.row {padding:0px 15px;}
.scroll-box-responsive div.question p {font-weight: 600; margin-bottom: 4px;}
.scroll-box-responsive .col1 {width:12%; float: left;}
.scroll-box-responsive .col2 {width:87%; float: left;}

.yn-labels {font-family: 'Motlow', sans-serif; font-size: 24px; font-weight: 500; padding: 0 40px;}

/* vCard Styling */

.card-background {
	width: 450px;
	height: 250px;
	-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
background-color: #116DBE;
color: #FFFFFF;
}

.card-value {
	/* padding: .6em 0 0 9.5em; */
	text-align: right;
	padding-right: 10px;
	font-size: 28px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.card-number {
	margin: 3em 0 .1em 0em;
	padding: .5em 0 .3em 1em;
	background-color: #C6D4ED;
	color: #000000;
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: .7em;
	text-align: left;
}

.card-type {
	color: #EC272B;
}

.card-number-smalltext {
	padding: 0 0 0 0;
	color: #000000;
	font-size: 8px;
	font-family: Arial, Helvetica, sans-serif;
}

.valid-thru-text {
	float:right;
	color: #000000;
	font-size: 15px;
	padding-right: 5px;
}

.card-verification {
	width: 75px;
	margin: 0 0 .1em 1em;
	padding: .4em .3em .2em .4em;
	background-color: #C6D4ED;
	color: #000000;
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: .7em;
}



.footer-container { display: block; float: none; margin: 0 auto; width: 100%; text-align: center;}

.navbar-nav > li {float: none; }

.nav > li {display: inline-block;}

.navbar-nav {width: 100%; margin: 0;}

.navbar {min-height: 100%; margin: 0 auto 30px; background-color: #70563c; text-align: center;}

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

.navbar-default .navbar-nav > li > a {color: #f5f5f5; line-height: 18px; padding: 10px 10px;}

.navbar-default .navbar-nav > li > a:hover {color: #c2c2c2;}

/* Meida Queries */

@media all and (min-width: 767px) and (max-width: 992px) {
	.shoutout-box-right-space1 {padding-right: 0px; }

	.shoutout-box-right-space2 {padding-right: 90px; }

	p.promo-discount-alt {font-size: 28px; margin-top: -40px;}
	p.discount-amt {font-size: 120px;}

	.heading-upper {font-size:50%; display:inline-block;}
	.heading-lower {font-size:140%;}
	h1.heading-system {font-size:320%;}

	.yn-labels {padding: 0 20px;}

}


@media all and (max-width: 767px) {

	.scroll-box-responsive {margin: 10px;}

	.page-heading h1 {font-size: 80px;}

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

  .page-header-button {text-align: center;}

	.page-slogan {text-align: center; margin-bottom: 10px;}

	.page-slogan img{width: 100%;}

	.page-slogan-alt p {text-align: center;}

	.scroll-box-instructions {width: 100%; text-align: center; font-size: 28px; line-height: 34px; margin: 2px 10px; color:#fff;}

    div.shoutout-box {margin: 40px auto;}

	div.promo-discount {display: none;}

	.promo-discount-mobile {display: block;}

	.promo-discount-mobile p {text-align: center;}

	p.promo-discount-alt {font-size: 28px; margin-top: -30px;}

	p.discount-amt {font-size: 100px; margin-top: 0px;}

	.right-column-up {margin-top: -36px;}

	.shoutout-phone-img-alt {margin-top: -10px;}

	.shoutout-phone-img-alt2 {max-width: 25%;}
}

@media all and (max-width: 480px) {

	.page-heading h1 {font-size: 56px;}

	.scroll-box-instructions {font-size: 20px; line-height: 24px; padding: 0 5px;}

    .nav > li {display: block;}

	.shoutout-box {max-width: 92%;}

	.shoutout-phone-img-alt2 {max-width: 30%;}

	.shoutout-box-right-space p.shoutout-highlight {padding-right: 0;}

	.scroll-box-responsive .col1 {width:18%; float: left;}
	.scroll-box-responsive .col2 {width:82%; float: left;}

	.card-background {width: 275px; height: 175px;}
	.card-value {font-size: 24px; margin-top: 5px;}
	.card-number {font-size: 14px; line-height: 18px;}
	.valid-thru-text {font-size: 10px;}
	.card-verification {font-size: 16px;}

}

@media all and (max-device-width: 480px) and (max-width: 320px) {
	.shoutout-box-right-space1 {padding-right: 0px; }

	.page-slogan-alt p {font-size: 26px;}

	.slogan-sub {font-size: 9px; padding-top: 1px;}

	p.promo-discount-alt {font-size: 22px;}

	h1.heading-system {font-size:36px;}


}

/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
select#soflow, select#soflow-color {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

select#soflow-color {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}

.big-number {
  color: #8c704f;
  font-size: 94px;
  margin: 0px;
  padding: 0px;
  font-weight: bold;
}

.copy-out-of {
  color: #8c704f;
  font-size: 20px;
  margin: 0px 7px 0px 0px;
}

.copy-below-big-numbers {
  color: #8c704f;
  font-size: 20px;
  padding: 0px;
  margin: -20px 0px 30px 0px;
}

.btn {
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  border-radius: 12px;
  font-family: Arial;
  color: #8c704f;
  font-size: 21px;
  padding: 10px 20px 10px 20px;
  border: solid #fff 2px;
  text-decoration: none;
  background-color: #fff;
}

.btn:hover {
  background: #ccc;
  background-image: -webkit-linear-gradient(top, #ccc, #ccc);
  background-image: -moz-linear-gradient(top, #ccc, #ccc);
  background-image: -ms-linear-gradient(top, #ccc, #ccc);
  background-image: -o-linear-gradient(top, #ccc, #ccc);
  background-image: linear-gradient(to bottom, #ccc, #ccc);
  text-decoration: none;
}