@import url('https://fonts.googleapis.com/css?family=Comfortaa:300,400,500,600,700&display=swap');

	.sezzle-container {
		text-align: center;
		font-family: 'Comfortaa', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', cursive, sans-serif;
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}

	.sezzle-container p {
		font-weight: 300;
		color: #272727;
		font-size: 16px;
		line-height: 1.47;
	}

	.sezzle-container .sezzle-logo {
		margin: 80px auto;
	}

	.sezzle-container .sezzle-logo svg {
		width: 250px;
		height: auto;
	}

	.sezzle-container section .sezzle-hiw-pie-bg {
		height: 151px;
		width: 507px;
		margin: 0 auto 40px;
		border-radius: 23px;
		background-color: #FFFFFF;
		box-shadow: 0 2px 20px 4px rgba(0, 0, 0, 0.06);
		position: relative;
	}

	.sezzle-payment-pie-graph {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 15%;
	}

	.sezzle-container .sezzle-row {
		box-sizing: border-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: flex;
		-ms-flex: 0 1 auto;
		-webkit-box-flex: 0;
		flex: 0 1 auto;
		-ms-flex-direction: row;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.sezzle-container section .breakdown-row {
		text-align: center;
		max-width: 390px;
		min-width: 390px;
		justify-content: space-between;
		margin: auto 60px;
		position: absolute;
		top: 60%;
	}

	.sezzle-container section .breakdown-row .breakdown {
		color: #382757;
		font-size: 28px;
		font-weight: bold;
		line-height: 20px;
	}

	.sezzle-container section .breakdown-row span {
		color: #382757;
		font-size: 18px;
		line-height: 35px;
		margin: 0;
	}

	.sezzle-container section {
		max-width: 860px;
	}

	.sezzle-container h4 {
		font-size: 18px;
	}

	.sezzle-container h2.sezzle-header-2 {
		margin: 0 0 12px;
		color: #382757;
		font-family: Comfortaa;
		font-size: 60px;
		font-weight: bold;
		line-height: 1.5;
		text-align: center;
	}

	.sezzle-container p.sezzle-description {
		margin: 0 auto 40px;
		max-width: 600px;
	}

	.sezzle-container .sezzle-hr {
		width: 78px;
		height: 3px;
		margin: 10px auto 40px;
		background-color: #29D3A2;
		border: 1px solid #29D3A2;
		display: block;
		border-radius: 63px;
		opacity: 1;
	}

	.sezzle-container h3.sezzle-header-3,
	h2.sezzle-header-3 {
		margin: 20px 0 12px;
		color: #382757;
		font-family: Comfortaa;
		font-size: 30px;
		font-weight: bold;
		line-height: 60px;
		text-align: center;
	}

	.sezzle-container p.sezzle-note {
		color: #382757;
		font-family: Comfortaa;
		font-size: 12px;
		text-align: center;
	}

	.sezzle-container .how-to-sezzle .sezzle-column {
		width: 33.33%;
		float: left;
		margin-bottom: 40px;
	}

	.sezzle-container section {
		margin: 50px 0;
	}

	.sezzle-container .how-to-sezzle .sezzle-hiw-bg {
		height: 150px;
		width: 150px;
		background: #FCD7B6;
		border-radius: 50%;
		position: relative;
		margin: 0 auto;
	}

	.sezzle-container .how-to-sezzle img.sezzle-hiw-image {
		position: absolute;
		margin: auto;
		display: inherit;
		bottom: 0
	}

	.sezzle-container .how-to-sezzle img.sezzle-hiw-sezzle-it {
		min-width: 198px;
		max-width: 198px;
		left: -15%;
		right: -15%;
		top: 5%;
		bottom: 0;
	}

	.sezzle-container .how-to-sezzle .sezzle-column img.sezzle-hiw-checkout {
		min-height: 145px;
		max-height: 145px;
		top: 25%;
		left: -20%;
		right: -20%;
	}

	.sezzle-container .how-to-sezzle .sezzle-column img.sezzle-hiw-shop {
		min-width: 175px;
		max-width: 175px;
		top: 20%;
		left: 5%;
		right: 0;
		bottom: 0;
	}

	.sezzle-container .how-to-sezzle .sezzle-column .sezzle-steps-header {
		text-transform: uppercase;
		font-size: 21px;
		font-weight: bold;
		letter-spacing: 2.04px;
		line-height: 22px;
		color: #D14507;
		margin-top: 30px;
	}

	.sezzle-container .how-to-sezzle .sezzle-column .sezzle-steps-copy {
		font-size: 16px;
		width: 80%;
		margin: auto;
	}

	/* clears the float */
	.sezzle-container .how-to-sezzle:after {
		content: "";
		display: table;
		clear: both;
	}

	.sezzle-container .sezzle-app {
		flex: 1;
		padding: 8px;
	}

	.sezzle-container .sezzle-app .sezzle-row {
		justify-content: center;
	}

	.sezzle-container .sezzle-app .sezzle-row img {
		flex: 1;
		padding: 8px;
		min-height: 60px;
		max-height: 60px;
		width: auto;
	}

	.sezzle-container section .subtitle-small {
		color: #272727;
		font-family: Comfortaa;
		font-size: 18px;
		font-weight: 300;
		line-height: 52px;
		text-align: center;
	}

	@media screen and (min-width: 1200px) {
		.sezzle-container {
			width: 1170px;
		}
	}

	@media screen and (min-width: 992px) {
		.sezzle-container {
			width: 970px;
		}
	}

	@media screen and (min-width: 768px) {
		.sezzle-container {
			width: 750px;
		}
	}

	@media screen and (max-width: 786px) {
		.sezzle-container .how-to-sezzle {
			margin-top: 0px;
		}
	}

	@media screen and (max-width: 767px) {
		.sezzle-container .sezzle-logo {
			margin: 80px auto 40px;
		}

		.sezzle-container section .sezzle-hiw-pie-bg {
			height: 97px;
			width: 300px;
			margin-bottom: 40px;
		}

		.sezzle-container section .sezzle-hiw-pie-bg .sezzle-payment-pie-graph {
			width: 72%;
			height: auto;
		}

		.sezzle-container section .breakdown-row {
			min-width: 230px;
			max-width: 230px;
			margin: auto 39px;
			top: 50%;
		}

		.sezzle-container section .breakdown-row span {
			font-size: 12px;
			line-height: 16px;
		}

		.sezzle-container section .breakdown-row .breakdown {
			font-size: 16px;
			line-height: 16px;
		}

		.sezzle-container h3.sezzle-header-3,
		h2.sezzle-header-3 {
			margin-top: 10px;
			font-size: 25px;
		}

		.sezzle-container .how-to-sezzle .sezzle-column {
			width: 100%;
			float: left;
			margin-bottom: 40px;
		}

		.sezzle-container .how-to-sezzle .sezzle-column .sezzle-steps-header {
			font-size: 19px;
		}
	}

	@media screen and (max-width: 350px) {
		.sezzle-container section .sezzle-hiw-pie-bg {
			height: 97px;
			width: 275px;
			margin-bottom: 40px;
		}

		.sezzle-container section .breakdown-row {
			min-width: 220px;
			max-width: 220px;
			margin: auto 30px;
		}
	}

	.modal {
  display: none;
  position: fixed; 
  padding-top: 50px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative; 
  background-color: white;
  padding: 20px; 
  margin: auto; 
  width: 75%;  
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.close-btn {
  float: right; 
  color: lightgray; 
  font-size: 24px;  
  font-weight: bold;
}
.close-btn:hover {
  color: darkgray;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}