/**
*	Cart Styles
*	2019
*	Author: Wynonna Lui
**/


	@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

	html, body { 
		padding: 0;
		margin: 0; 
		background: url('../../../../assets/america.jpg') top left no-repeat; 
		background-size: cover; 
		-webkit-background-size: cover;
		font-family: 'Open Sans', sans-serif;
		line-height: 1.4em;
	}

/*	Utilities*/
	.imgRspsnv { max-width: 100%; height: auto; display: block;}
	.hideSmall { display: none; }
	.show-large { display: none; }
	.red { color: red; }
	.blue { color: #002aff }
	strong { font-weight: 700; }

/*	Header*/
	#headerWrap { width: 100%; height: auto; overflow: hidden;}
		#header { max-width: 960px; height: auto; overflow: auto; margin: 0px auto; }
			#brand { max-width: 200px; float: left; }
			/*#secure { max-width: 150px; height: auto; float: left; margin-right: 10px; margin-top: 10%;}*/


/*	Content Wrap */
	#wrap { max-width: 960px; margin: 0 auto; padding: 1rem; padding-top: 1.2rem; background-color: white; position: relative; overflow: auto;}
		#orderProgress { width: 95%; overflow: auto; margin: auto; border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid black; margin-bottom: 1rem;}
		.current { 
			width: 50%; 
			height: 30px;
			background-color: #00158c;
			color: white; 
			display: block; 
			text-align: center; 
			padding-top: .5rem; 
			font-size: 1rem; 
			font-weight: 700;
			position: relative;
			float: left;

		}
		
			.current:after {
				content: "";
				position: absolute;
				top: 0;
				left: 100%;
				height: 0;
				width: 0;
				border-width: 19px;
				border-style: solid;
				border-color: #00158c;
				border-top-color: transparent;
				border-bottom-color: transparent;
				border-right-color: transparent;
			}

		.next { 
			width: 50%; 
			float: right; 
			position: relative;
			display: block; 
			text-align: center; 
			padding-top: .5rem; 
			font-size: 1rem; 
			font-weight: 700;
		}



/*	Left Panel*/
	#leftPanel { max-width: 500px; padding: 15px; margin-left: -1rem;}
		#timer { line-height: 1.2em; text-transform: capitalize; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem;  padding-top: .5rem; padding-bottom: .5rem; text-align: center; font-size: 1.5rem; font-weight: 700; border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid black;}
			.countdown { color: red; }
			     #timer p {  margin-top: 0px; margin-bottom: 0px;}
		.sectionHeader {color: white; display: block; width: 100%; padding: .5rem; text-align: center; 
			background: blue;
			border-radius: 5px; }

		#confirmMsg { width: 100%; padding: 0.5rem; }
			#cmHeadlineSM { display: inline-block; font-size: 1rem; font-weight: 700; color: red; }
			#cmHeadlineLG { display: none; font-size: 2.5rem;  color: red; float: left; margin-right: 1rem; margin-top: 2rem;}

		#availability { width: 100%; margin-top: 1rem; padding: 0.5rem; border: 1px solid red; background-color: #fffde0; overflow: auto;}
			.aLeft  { width: 100%; margin-bottom: 0;}
				.aLeft h4 { font-size: 1rem; display: inline-block; float: left;}
				#aBar { overflow: auto; width: 15%; background: white; border: 1px solid black; display: inline-block; float: left; margin-top: 1.45rem; margin-left: 5px; margin-right: 5px;}
					.aStatus { display: block; width: 15%; padding-top: 1rem; background-color: red; float: left; }
			.aRight { width: 100%; }
				.aRight h4 { font-size: 1rem; display: inline-block; }

			.aStatusTxt { color: red; }

		#selection { width: 100%;}
			#selectButtons { margin-left: -2.5rem; width: 100%; list-style-type: none; margin-top: -1rem; margin-bottom: 1rem !important; overflow: auto;}
				#selectButtons li:first-child { margin-top: -1rem !important; }
				#selectButtons span { cursor: pointer; }
				.aboveBtn { max-width: 100%; height: auto; }
				.button { text-align: center;
					display: block; 
					padding: 0.5rem; 
					background-color: #5e5e5e; 
					border-radius: 5px; -webkit-border-radius: 5px; color: white; margin-bottom: 0.5rem;}
				
				.selected { 
					font-weight: 700;
					border: 1px solid #570700;
					background: rgba(255,38,0,1);
					background: -moz-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
					background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,38,0,1)), color-stop(65%, rgba(166,24,5,1)), color-stop(100%, rgba(87,7,0,1)));
					background: -webkit-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
					background: -o-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
					background: -ms-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
					background: linear-gradient(to bottom, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2600', endColorstr='#570700', GradientType=0 );
				}
		

		#productWrap { width: 100%; overflow: auto;}
			.productPanel { display: none; width: 100%; overflow: auto; padding-top: 0rem; padding-bottom: 1rem;}
				.heroShot { width: 99%; margin-bottom: 20px; }
				.prodDescription { width: 100%; text-align: center; }
					.prodDescription h2 { line-height: 1.1em; margin-top: 0.2rem; font-weight: 700;}
					.prodDescription h3 { font-weight: 400; margin-top: -0.2rem;}
					.prodDescription h4 { text-align: left; font-size: 1.1rem; margin-top: -0.5rem;}
					.prodDescription p { text-indent: 0.5rem; }
					.prodDescription ul { margin-left: -1rem;  margin-top: -1rem; margin-bottom: -1rem; font-size: 0.9rem; display: flex; flex-direction: column; align-items: flex-start; }
						.prodDescription li { padding: 0px; text-align: left;}
				.prodHeadline { display: none; }
				.prodHeadlineM { margin-bottom: -1rem; margin-top: -1rem;}
					.prodHeadlineM h3 { font-size: 1.5rem; line-height: 1.1em;}

		#cta { display: none; background-color: #0046bf; color: white; text-align: center; padding: 1rem; margin-top: 1rem; margin-bottom: 1rem;}
			#cta h1 { font-weight: 700; }
			#cta h4 { font-weight: 400; }

		#guaranteeLG { display: none; }
		#guaranteeSM { width: 100%; border-bottom: 2px solid red; background-color: #ededed; padding: 1rem; margin-top: 1rem; margin-bottom: 1rem;}
		.kform_spacer, .formfields { margin: 0; padding: 0; }
		#formWrap { padding: .5rem;}
			#formWrap input[type="text"] { margin: .4rem auto; padding: .5rem; width: 90%; font-size: 1rem; border: 1px solid #CCCCCC; border-radius: 5px; -webkit-border-radius: 5px;}
			#formWrap select { margin: .4rem auto; padding: .5rem; width: 100%; font-size: 1rem; border: 1px solid #CCCCCC; border-radius: 5px; -webkit-border-radius: 5px; }
			#formWrap input[type="button"] { 
				width: 100%; 
				border-radius: 5px; 
				webkit: border-radius: 5px;
				border: 1px solid #570700;
				background: rgba(255,38,0,1);
				background: -moz-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
				background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,38,0,1)), color-stop(65%, rgba(166,24,5,1)), color-stop(100%, rgba(87,7,0,1)));
				background: -webkit-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
				background: -o-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
				background: -ms-linear-gradient(top, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
				background: linear-gradient(to bottom, rgba(255,38,0,1) 0%, rgba(166,24,5,1) 65%, rgba(87,7,0,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2600', endColorstr='#570700', GradientType=0 );
			}

				#formWrap input[type="button"]:hover {
					background: red;
				}




/*	Right Panel*/
	#rightPanel { max-width: 400px; /*float: left;*/ border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #00158c; overflow: auto;}
		.formheader { 
			width: 100%; 
			display: block; 
			padding-top: .5rem; 
			padding-bottom: .5rem; 
			text-align: center;
			color: white; 
			margin-bottom: .5rem;
			background: rgba(38,74,255,1);
			background: -moz-linear-gradient(top, rgba(38,74,255,1) 0%, rgba(4,33,196,1) 51%, rgba(0,21,140,1) 100%);
			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(38,74,255,1)), color-stop(51%, rgba(4,33,196,1)), color-stop(100%, rgba(0,21,140,1)));
			background: -webkit-linear-gradient(top, rgba(38,74,255,1) 0%, rgba(4,33,196,1) 51%, rgba(0,21,140,1) 100%);
			background: -o-linear-gradient(top, rgba(38,74,255,1) 0%, rgba(4,33,196,1) 51%, rgba(0,21,140,1) 100%);
			background: -ms-linear-gradient(top, rgba(38,74,255,1) 0%, rgba(4,33,196,1) 51%, rgba(0,21,140,1) 100%);
			background: linear-gradient(to bottom, rgba(38,74,255,1) 0%, rgba(4,33,196,1) 51%, rgba(0,21,140,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264aff', endColorstr='#00158c', GradientType=0 );

		}
		
			.formheader img { margin-top: -.8rem; }
			.formheader h2 { line-height: 1.2em; }
		.gSeal { width: 151px; margin: 0px auto; }

		#rightPanel input[type='button']:hover { background-color: #9e0000; transition: all 0.8s linear; -webkit-transition: all 0.8s linear;}
			#sms { color: #a5a5a5; font-size: 0.6rem; line-height: 1.4em !important; text-align: center; display: block; clear: both; padding-top: 0.5rem; border-top: 1px solid grey;}
			#hr { border: 1px solid grey; } 

		.totals {margin-top: -1.5rem; width: 100%;}
		.kcartTotals { width: 100%; padding: 0px; color: #5b5b5b; font-size: 0.8rem;}
			.subTotals { font-weight: lighter;  width: 100%; padding: 0; overflow: auto; font-weight: lighter;}
				.totalLabel { float: left; }
				.totalPrice { float: right; }
			.divider { border-top: 1px dotted #5b5b5b !important; background: none; border-bottom: none; }
		#gSealLrgUp { display: none; }
		#gSealMdDown { width: 60%; margin-top: 1rem; }



		#secure2 {  margin-bottom: .5rem;  margin-top: 1rem;}

#footer {  clear: both;  width: 100%; text-align: center; padding-top: 1.5rem; font-size: 0.7rem; line-height: 1.3em;}

/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Tablet*/
@media (min-width: 700px) {
	#leftPanel { max-width: 380px;  margin-right: 20px; float: left; margin: 0px auto; }
		#timer { line-height: 1.2em; }
		.sectionHeader { text-align: left;}
		.prodDescription { width: 320px; margin: 0px auto; margin-top: -1rem;}
		.prodDescription ul { margin-left: -3rem; width: 100%;}
		.prodDescription h4 { text-align: left; margin-left: -1rem;}
		.prodHeadlineM { margin-top: -1rem; margin-bottom: -1rem; }
	#rightPanel { max-width: 300px; float: right; margin: 0px auto; }
	#brand { width: 250px !important; height: auto; float: left;}
	#secure { max-width: 213px; height: auto; float: right; margin-right: 10px; margin-top: 20px;}
	.aboveBtn { max-width: 200px; height: auto; display: block; margin: 0px auto; margin-bottom: -1rem;}
	#gSealMdDown { width: 40%; margin-top: 1rem; }
}

/* Larger than tablet */
@media (min-width: 960px) {
	.show-large { display: block; }
	.hideSmall { display: block !important; }
	.displaySmall { display: none; }
	#wrap { border-radius: 5px; -webkit-border-radius: 5px; }
		
		#leftPanel { float: left; max-width: 500px; padding: 0px; position: relative;}
			#timer { font-size: 2rem; line-height: 1.2em;}
			#cmHeadlineSM { display: none;}
			#cmHeadlineLG { display: block; }
		.aLeft { width: 60%; float: left; margin-left: 1rem; }
		.aRight { width: 30%; float: left; }
		
		#selection { padding: 0px; width: 100%; clear: all; position: relative;}
		#selectButtons { padding: 0px; width: 650px; clear: all; position: relative; margin-left: 0;}
		#selectButtons li:first-child { margin-top: 0 !important; margin-left: 0;}
		#selectButtons li { float: left; margin-left: 5px; font-size: 1rem; width: 175px;}
		.aboveBtn { max-width: 170px; height: auto; display: block; margin-bottom: -1rem;}
		
		#productWrap { padding-top: 0; margin-top: -1rem; }

		.productPanel { padding-top: 0; padding-bottom: 2rem; margin-top: 0; margin-left: -.5rem;}
			.heroShot { width: 55%; float: left; margin-left: 2%; margin-right: 2%; height: auto;}
			.prodDescription { width: 38%; float: left; text-align: left; padding-top: 3.5rem;}
				.prodDescription h2 { line-height: 1.1em; font-size: 1.5rem;}
				.prodDescription h4 { margin-left: 0; }
				.prodDescription p { font-size: 0.8rem; line-height: 1.3em;}
				.prodDescription ul { margin-left: -1.7rem; line-height: 1.2em; }
				.prodDescription ul li { padding-top: .5rem; }
			.prodHeadlineM {display: none;}
			.prodHeadline { width: 100%; height: auto; display: block; clear: all !important; float: left; margin-top: 0px;}
			.prodHeadline h3 { font-size: 2rem; line-height: 1.1em;}
		#cta { display: block; }

		

		
		#rightPanel { max-width: 400px; float: right; margin-right: 0px; padding: 0; }
			#gSealLrgUp { width: 30%; height: auto; float: right; display: block; margin-top: 1rem; }
			#gSealMdDown { display: none; }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}