#orderPage {
	width: 100%;
	margin: 50px auto 0;
	padding: 25px 0;
}

#checkoutPage {
	display: none;
	width: 100%;
        max-width: 640px;
        margin: 0 auto;
        padding: 25px 0;
}

#checkoutPage.active { display: flex; }

#orderForm {
	padding: 20px;
//	width: 440px;
}

#footer, footer {
        background-color: #FFF;
        margin-bottom: 20px;
        height: 210px;
}

#footerPush {
        height: 0;
        display: none;
}


/* Superheader */

#superheader {
        min-width: 640px;
        width: 100%;
        max-width: 100%;
        background-color: #0862bf;
        height: 60px;
        color: #FFF;
        position: fixed;
        top: 0;
        z-index: 3;
}

#superheaderInner {
        width: 50px;
        min-width: 500px;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
}

#superheader h2 {
        width: 400px;
        font-size: 20px;
        padding: 0;
        padding-top: 6px;
        line-height: 22px;
        font-weight: bold;
}

#superheader h1 {
        width: 400px;
        font-size: 22px;
        padding: 0;
        line-height: 30px;
        font-weight: bold;
}

#superheadGuarantee {
        position: absolute;
        top: 2px;
        right: 5px;
        width: 81px;
}
/* End Superheader */


/* Claim Button */
#claimButtonWrapper {
        width: 100%;
        margin: 0;
        background-color: #0862BF;
        padding: 15px 20px 20px;
        position: fixed;
        bottom: 0;
        z-index: 2;
}

#claimButton {
        max-width: 350px;
}

#ctaText {
        min-width: 100%;
        font-size: 17px;
        text-align: center;
        color: #FFF;
        margin-top: 5px;
        margin-bottom: 10px;
}

#ctaText .ctaTextYellow {
	color: #ffe759;
}

.cartTimer {
        min-width: 340px;
        line-height: 24px;
        margin-top: 20px;
        text-align: center;
        font-size: 14px;
        color: #121212;
}
.cartTimer .ctaTextRed {
        color: #CC0000;
}
/* End Claim Button */


/* Cart Button */
.cartButton {
        cursor: pointer;
        width: 350px;
        height: 70px;
        margin: 0 auto;
        color: #004fca;
        border-radius: 8px;
        background-image: linear-gradient(to top, #fac71d 3%, #fcdd68);
        border: solid 1px #0f1d4c;
        padding: 10px 0;
        font-size: 22px;
        line-height: 45px;
        position: relative;
        text-align: center;
        display: none;
}
.cartButtonShine {
        width: 100%;
        height: 35px;
        opacity: 0.6;
        border-radius: 6px;
        background-image: linear-gradient(to bottom, #F7B61B, #FAD625);
        display: block;
        position: absolute;
        bottom: 0;
}
.cartButtonText {
        position: relative;
        z-index: 2;
}
.cartButtonTriangle {
        position: absolute;
        right: 20px;
        top: 15px;
        width: 0;
        height: 0;
        border-left: 8px solid #004fca;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
}
.cartButton.active {
        display: block;
}

.cartButton:hover {
        background-image: linear-gradient(to top, #ffe799 3%, #ffe799);
        cursor: pointer;
}
.cartButton:hover .cartButtonShine {
        opacity: 0.4;
}
.cartButton:focus {
        outline: none;
}

/* End Cart Button */

/* Summary */
#topCopy {
	margin: 0 auto;
	width: 100%;
	max-width: 628px;
	height: 100px;
}

#topCopy h1 {
	width: 95px;
	height: 77px;
	font-size: 64px;
	font-weight: bold;
	color: #50e3c2;
	float: left;
	padding-top: 18px;
	padding-left: 50px;
}

#topCopyRight {
	float: left;
	margin-left: 160px;
	margin-top: 23px;
}

#topCopy h2 {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.17;
}

#topCopy h3 {
	font-size: 17px;
	line-height: 1.29;
	margin-top: 4px;
}

#cartCopy h1.subHead {
	margin: 30px auto;
        width: 100%;
        max-width: 628px;
	padding: 0 50px;
	font-size: 26px;
	font-weight: bold;
	line-height: 34px;
}

.bullets {
	width: 100%;
	max-width: 600px;
	margin: 20px auto 20px;
}

.bullets .bullet {
	background-image: url(/assets/images/SS_bullet.png);
    	background-position: top 5px left;
	background-repeat: no-repeat;
	position: relative;
	padding: 15px;
	padding-left: 50px;
	padding-top: 0;
}

.bullets .bullet h2 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	color: #0862bf;
}
/* End Summary */

/* Guarantee */

#guarantee {
	width: 100%;
	max-width: 640px;
	margin: 80px auto;
	position: relative;
}

#guaranteeInner {
	position: relative;
	border: 2px solid #73aae9;
	border-radius: 10px;
	background-color: #deefff;
	padding: 42px 42px 42px;
	text-align: center;
}

#guaranteeInner img#guaranteeSeal {
	position: absolute;
    	top: 42px;
    	left: 40px;
    	display: block;
    	float: left;
}

#guaranteeInner img#foxxSig {
	float: right;
}

#guaranteeInner h1 {
	    text-align: left;
    color: #05167c;
    font-size: 55px;
    line-height: 55px;
    text-transform: uppercase;
    font-family: roboto;
    font-weight: 500;
    padding-top: 0;
    margin: 0 auto;
    padding-left: 150px;
}

#guaranteeInner h2 {
	text-align: left;
    color: #05167c;
    font-size: 38px;
    line-height: 38px;
    text-transform: uppercase;
    font-family: roboto;
    font-weight: 500;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 4px;
    padding-left: 150px;
}

#guaranteeInner p {
	text-align: left;
	color: #1b1b1b;
	font-size: 15px;
	line-height: 25px;
	max-width: 625px;
	margin: 30px auto;
}
/* End Guarantee */


/* Cart Summary */
#cartSummary {
	max-width: 640px;
	width: 100%;
	margin: 30px auto;
}
#cartSummary table {
	border: 1px solid #CCC;
	width: 100%;
}
#cartSummary tr {
	color: #2b3558;
	border-bottom: 1px solid #CCC;
}
#cartSummary tr td {
	padding: 15px;
}
#cartSummary tr td:last-of-type {
	text-align: right;
	width: 75px;
}
/* End Cart Summary */


/* Overlays */
#placeOrderShade {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.75);
        min-height: 100%;
        min-width: 100%;
        z-index: 10;
}

#placeOrderCopy {
        width: 300px;
        position: absolute;
        top: 200px;
        left: 50%;
        margin-left: -150px;
}

#placeOrderHeader {
        background-color: #4a90e2;
        color: #FFF;
        height: 50px;
        line-height: 50px;
        font-size: 22px;
}

#placeOrderBody {
        background-color: #FFF;
        color: #000;
        padding: 20px;
}

#placeOrderBody p {
        margin: 15px 0;
}

/* End Overlays */


@media (max-width:900px) {

#orderPage { }
#cartCopy h1.subHead { padding: 0; text-align: center; }
}

@media (max-width: 900px) {
#checkoutPage.active { display: block; }
}

@media (max-width:700px) {
#guaranteeInner h1 { font-size: 40px }
}


@media (max-width:640px) {

#orderPage { padding-top: 0;}
.bullets { padding: 20px; width: 100%; max-width: 100%;}
#topCopy { border-radius: 0; width: 100%; }
#topCopy h1 { width: 100%; text-align: center; float: none; margin-bottom: 20px;}
#topCopyRight { width: 100%; text-align: center; float: none; }
#superheader { width: 100%; height: 53px; min-width: auto; }
#superheaderInner { width: 375px; min-width: auto; }
#superheader h2 { width: 290px; text-align: center; font-size: 16px; padding-top: 3px; }
#superheader h1 { width: 290px; text-align: center; font-size: 16px; }
#superheadGuarantee { width: 75px; }
#checkoutPage { padding-top: 50px; }
#guaranteeInner { border-left: none; border-right: none; border-radius: 0; }
#guaranteeInner img#guaranteeSeal { position: relative; top: 20px; top: auto; left: 50%; margin-left: -53px; float: none; margin-bottom: 30px; }
#guaranteeInner h2,
#guaranteeInner h1 { padding-left: 0; text-align: center; }

}


@media (max-width: 600px) {
#topCopy h1 { padding-left: 25px; }
#topCopyRight { margin-left: 20px; }
}

@media (max-width: 540px) {
#topCopy { height: auto; padding-bottom:15px; }
#topCopy h1 { font-size: 54px; padding-left: 20px; width: auto; }
#topCopyRight { margin-left: 15px; }
#topCopy h2 { font-size: 18px; }
#cartCopy h1.subHead { font-size: 20px; }
}

@media (max-width: 450px) {
#topCopy { padding-bottom: 0; }
#topCopy h1 { font-size: 38px; padding-left: 10px;}
#topCopy h2 { font-size: 16px; }
#topCopy h3 { font-size: 13px; }
#topCopyRight { margin-left: 10px; margin-top: 21px; }
#cartCopy h1.subHead { font-size: 16px; margin: 20px auto 0; line-height: 22px; }
.bullets { margin-top: 0; }
}


@media (max-width: 320px) {

#superheaderInner { width: 320px; padding-left: 5px; }
#superheader h2 { text-align: left; padding-top: 4px; }
#superheader h1 { text-align: left; font-size: 15px; font-weight: bold; }
#superheadGuarantee { right: 0; }

}

