html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption 
{
	border: 0 none;
	margin: 0;
	padding: 0;
}

/*===================================
=            LIST STYLES            =
===================================*/

ul.disc{list-style-type:disc;margin-left:40px}
ul.circle{list-style-type:circle;margin-left:40px}
ol.decimal{list-style-type:decimal;margin-left:40px}
ol.upperRoman{list-style-type:upper-roman;margin-left:40px}
ol.upperAlpha{list-style-type:upper-alpha;margin-left:40px}

body {font-family: 'Open Sans', sans-serif;
	text-rendering: optimizeLegibility;
	 -webkit-font-smoothing: antialiased;
	 font-size: 14px;
	}

fieldset {
	border: none;
}
	 .clientbranding {
	 	font-size: 2em;
	 	font-weight: bold;
	 	margin: .5em auto;
	 	text-align: center;
	 }
	 .note {
		display: block;
		font-size: .85em;
	}
	.important {
		font-weight: bold;
		color: red;
	}
	.container {
		max-width: 1150px;
		width: 90%;
		margin: 0 auto;
	}

	.orderSummary {
		background-color: #EFEFEF;
		width: 80%;
		border: 1px solid #DDD;
		padding: .25em .5em;
		margin: 1em auto .5em auto;
		border-radius: 4px;
	}
	.orderSummary table {
		width: 100%;
		text-align: left;
	}
	.orderSummary table tr td:first-child {
		text-align: left;
	}
	.orderSummary table tr td:last-child {
		text-align: left;
	}
	.paymentNote {
		width: 80%;
		font-style: italic;
		margin: 0 auto;
		text-align: center;
	}

	.buttons {
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	button, input[type="submit"], input[type="button"] {
		border: none;
		color: #FFF;
		background-color: #0E4595;
		border-radius: 4px;
		transition: .5s all ease;
		padding: .5em .75em;
		margin: 1em auto;
		font-size: 1.1em;
		cursor: pointer;
	}

	form {
		width: 80%;
		margin: 0 auto;
	}

	.StripeElement {
	  background-color: white;
	  padding: 10px 12px;
	  
	  border-bottom: 1px solid #DDD;
	  box-shadow: none;
	}

	.StripeElement--focus {
	  border-bottom: 1px solid #555;
	   box-shadow: none;
	}

	.StripeElement--invalid {
	  border-color: #fa755a;
	}

	.StripeElement--webkit-autofill {
	  background-color: #fefde5 !important;
	}

	fieldset ul li {
		position: relative;
		display: flex;
		flex-direction: column-reverse;
		height: 70px;
	}
	
	fieldset ul li.expiration, fieldset ul li.types {
		display: flex;
		flex-direction: row !important;
		align-items: center;
		flex-wrap: wrap;
	}
	fieldset ul li.expiration > *, fieldset ul li.types > * {
		margin: 0 .25em;
	}
	input:placeholder-shown ~ label {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 8px;
		color: #9191A8;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: text;
		transition-property: all;
		transition-duration: 0.3s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	input:placeholder-shown:focus ~ label, input:not(:placeholder-shown) ~ label, input:active ~ label  {
		color: #0E4595;
 		font-size: .85em;
  		cursor: default;
  		top: 15px;
  		position: absolute;
	}
	input {
		padding: .25em .5em;
		font-size: 1em;
		border: none;
		border-bottom: 1px solid #DDD;
	}
	
	input:focus {
		border: none;
		border-bottom: 1px solid #555;
	}
	
	input::-webkit-input-placeholder {
	  color: transparent;
	  transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

	}

	input::-moz-placeholder {
	  color: transparent;
	  transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	}

	input:-ms-input-placeholder {
	  color: transparent;
	  transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	input:focus::-webkit-input-placeholder  {
		color: #9191A8;
	}
	input:focus::-moz-placeholder  {
		color: #9191A8;
	}
	input:focus:-ms-input-placeholder  {
		color: #9191A8;
	}

	label[for="purchase_ccdatemonth"] {
		color: #9191A8;
		display: block;
		width: 100%;
	}
.message {
    border-radius: 4px;
    padding: .25em .5em;
    margin: 1em 0;
    display: inline-block;
    width: auto;
border: 1px solid #000;
}
.message.error {
    background-color: #fcf3f3;
    border: 1px solid #dd0000;
    color: #dd0000;
}
.message.info {
 background-color: #BDE5F8;
color: #00529B;
border-color: #00529B;
}
.message.success {
 background-color: #DFF2BF;
color: #4F8A10;
border-color: #4F8A10;
}

@media only screen and (max-width: 480px) {
	.orderSummary { 
		width: 95%;
	}
	.paymentNote, form {
		width: 100%;
	}
}

.securityImgs {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.complete {
	margin: 1em 0;
}


.title {
	font-size: 1.2em;
}
.totalprice {
	font-weight: bold;
}

.title input[type="button"] {
	font-size: 1em;
	padding: .25em;
	margin: 0 .5em;
}