@import 'https://fonts.googleapis.com/css?family=Archivo+Black|Arimo:400,700';

:root {
	--primary-color: #bf311b;
	--primary-hover: #992715;
	--primary-color-rgb: 191, 49, 27;
}

body {
	color: #000;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: 1.5;
	font-size: 16px;
}
a {
	color: var(--primary-color);
}
a:hover,
a:focus {
	text-decoration: none;
	color: var(--primary-hover);
}
.form-control:focus {
	border-color: var(--primary-color);
	box-shadow:
		0 1px 1px rgba(0, 0, 0, 0.075) inset,
		0 0 8px rgba(var(--primary-color-rgb), 0.6);
	outline: 0 none;
}
article {
	margin: 0 0 64px;
}
h2,
h3 {
	font-weight: 600;
}
h1 {
	margin-bottom: 50px;
	font-weight: 600;
}

fieldset {
	border: medium none !important;
	margin: 18px 0;
	padding: 20px;
}
.form-control {
	border: 1px solid #e2e2e2;
	border-radius: 0;
}
.form-group label {
	line-height: 51px;
	font-size: 14px;
}
.prefix,
.postfix,
select,
input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='month'],
input[type='week'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='time'],
input[type='url'],
input[type='color'] {
	height: 38px !important;
}

.padding-10 {
	padding-bottom: 10px;
	padding-top: 10px;
}
.padding-20 {
	padding-bottom: 20px;
	padding-top: 20px;
}
.padding-30 {
	padding-bottom: 30px;
	padding-top: 30px;
}
.padding-40 {
	padding-bottom: 40px;
	padding-top: 40px;
}
.padding-50 {
	padding-bottom: 50px;
	padding-top: 50px;
}

.margin-0 {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}
.margin-10 {
	margin-bottom: 10px;
	margin-top: 10px;
}
.margin-20 {
	margin-bottom: 20px;
	margin-top: 20px;
}
.margin-30 {
	margin-bottom: 30px;
	margin-top: 30px;
}
.margin-40 {
	margin-bottom: 40px;
	margin-top: 40px;
}
.margin-50 {
	margin-bottom: 50px;
	margin-top: 50px;
}
.margin-60 {
	margin-bottom: 60px;
	margin-top: 60px;
}

body .btn,
body input[type='submit'] {
	border: medium none;
	border-radius: 0;
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 16px;
	padding: 12px 16px;
}
@media screen and (min-width: 480px) and (max-width: 992px) {
	body .btn,
	body input[type='submit'] {
		font-size: 16px;
		padding: 14px;
	}
}
body .btn.btn-default,
body input[type='submit'] {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}
body .btn.btn-default:hover,
body input[type='submit']:hover {
	background-color: var(--primary-hover) !important;
}
body .btn.btn-secondary {
	background-color: white;
	color: var(--primary-color) !important;
}
body .btn.btn-secondary:hover {
	background-color: #e5e5e5;
}
body .btn.btn-grey {
	background-color: #495057;
	color: white !important;
}
body .btn.btn-grey:hover {
	background-color: var(--primary-color);
}
body .btn .glyphicon {
	top: 3px;
}
#templateLogo {
	display: block;
	max-width: 142px;
	height: auto;
	margin: 0 auto 20px;
}
@media (min-width: 768px) {
	#templateLogo {
		margin: 0 0 20px;
	}
}
#boxTitle {
	text-align: center;
}
@media (min-width: 768px) {
	#boxTitle {
		text-align: left;
	}
}
#boxTitle h2 {
	display: inline-block;
	margin: 0 0 20px;
	padding: 10px;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 200%;
	text-transform: uppercase;
}
@media (min-width: 768px) {
	#boxTitle h2 {
		margin: 0 0 40px;
	}
}
#boxDetails {
	margin-bottom: 40px;
	text-align: center;
}
@media (min-width: 768px) {
	#boxDetails {
		text-align: left;
	}
}
table.table-a tr {
	border-bottom: solid 1px #6c757e;
}
table.table-a tr td {
	padding: 5px 0;
}
table tr.thickline {
	border-bottom: solid 2px #6c757e;
}
tr.thickline th {
	vertical-align: bottom;
}
#invoiceLines tr td:nth-child(4) {
	padding-left: 5px;
}
.order-totals .order-totals-table,
#paymentForm .tab-content {
	background: white;
	color: #6c757e;
	padding: 20px;
}

#paymentForm input,
#paymentForm submit {
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	margin: 0 auto;
}

#paymentForm .tab-content input,
#paymentForm .tab-content submit {
	-webkit-box-shadow: none;
	box-shadow: none;
	border: solid 1px #b5b5b5;
}
#paymentForm.red {
	background-color: var(--primary-color) !important;
	color: white;
}
#paymentForm.donGradient {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3)));
	background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
	overflow: hidden;
	min-height: 200px;
	margin: 0 auto;
}
#paymentForm .form-control {
	height: 38px !important;
	padding: 0.375rem 0.75rem !important;
	font-weight: 600;
	line-height: 1.5 !important;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}
#paymentForm .form-control.StripeElement {
	padding: 0.9rem 0.75rem !important;
}
#paymentForm h2 {
	font-weight: 300;
	font-size: 250%;
	margin-bottom: 40px;
}
.help-block {
	background-color: #fff;
	padding: 2px;
	border-radius: 2px;
	display: none;
}
#paymentForm .nav-tabs > li.active > a {
	color: var(--primary-color);
	background: white;
}
#paymentForm .nav-tabs > li > a {
	border: 1px solid transparent !important;
	font-size: 150%;
	color: white;
	background: #495057;
}
#paymentForm .btn-group button {
	margin-right: 10px;
}
.activeIcon {
	color: var(--primary-color);
}
svg {
	width: 100px;
	height: 100px;
	margin: 20px;
	display: inline-block;
}
.ui-success,
.ui-error {
	width: 100px;
	height: 100px;
	margin: 0 auto;
}
.ui-error {
	&-circle {
		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
		stroke-dashoffset: 260.75219024795285px;
		animation: ani-error-circle 1.2s linear;
	}
	&-line1 {
		stroke-dasharray: 54px 55px;
		stroke-dashoffset: 55px;
		stroke-linecap: round;
		animation: ani-error-line 0.15s 1.2s linear both;
	}
	&-line2 {
		stroke-dasharray: 54px 55px;
		stroke-dashoffset: 55px;
		stroke-linecap: round;
		animation: ani-error-line 0.2s 0.9s linear both;
	}
}

@keyframes ani-error-line {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ani-error-circle {
	0% {
		stroke-dasharray: 0, 260.75219024795285px;
		stroke-dashoffset: 0;
	}
	35% {
		stroke-dasharray: 120px, 120px;
		stroke-dashoffset: -120px;
	}
	70% {
		stroke-dasharray: 0, 260.75219024795285px;
		stroke-dashoffset: -260.75219024795285px;
	}
	100% {
		stroke-dasharray: 260.75219024795285px, 0;
		stroke-dashoffset: -260.75219024795285px;
	}
}
.ui-success {
	&-circle {
		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
		stroke-dashoffset: 260.75219024795285px;
		transform: rotate(220deg);
		transform-origin: center center;
		stroke-linecap: round;
		animation: ani-success-circle 1s ease-in both;
	}
	&-path {
		stroke-dasharray: 60px 64px;
		stroke-dashoffset: 62px;
		stroke-linecap: round;
		animation: ani-success-path 0.4s 1s ease-in both;
	}
}

@keyframes ani-success-circle {
	to {
		stroke-dashoffset: 782.2565707438586px;
	}
}

@keyframes ani-success-path {
	0% {
		stroke-dashoffset: 62px;
	}
	65% {
		stroke-dashoffset: -5px;
	}
	84% {
		stroke-dashoffset: 4px;
	}
	100% {
		stroke-dashoffset: -2px;
	}
}