/* Variables */

:root {
	--gray-offset: rgba(0, 0, 0, 0.03);
	--gray-border: rgba(0, 0, 0, 0.15);
	--body-font-family: Soleil, sans-serif, sans-serif;
	--radius: 6px;
	--form-width: 343px;
}

/* Base */

* {
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	font-family: Soleil, sans-serif;
	font-weight: 300;
	font-style: normal;
}

p {
	font-size: 17px;
	font-weight:300;
	line-height: 25px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 6px;
	line-height:1.4em;
	margin-bottom: 6px;
}

h1 {
	font-size: 35px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 25px;
    font-weight: 600;
    line-height: 1.4em;
}

h4 {
	font-weight: 600;
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

p strong {
	font-weight: 700;
}
li{
    line-height: 1.4em;
    margin-bottom: 10px;
}

.intro-p {
	font-size: 18px;
	line-height: 1.3em;
}

/* Payment button */

.sr-payment-form button {
	transition: all ease-in-out 0.2s;
}

/* Navbar */

nav {
	border-bottom: 1px solid rgb(241, 237, 237);
	width: 100%;
	text-align: right;
}

nav ul {
	list-style: none;
	padding: 0;
	margin: 0
}

nav ul li {
	display: inline-block;
	padding: 25px 15px;
	margin: 0;
}

nav ul li a {
	padding: 0 5px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

#responsive-nav {
	cursor: pointer;
	padding: 5px 0;
}


/* margins */

.mb-1 {
	margin-bottom: 30px;
}
.mt-1{
	margin-top:30px;
}
.mt-8{
	margin-top:80px;
}

/* centering */


.text-center{text-align:center;}


/* Plans */

.plans p {
	margin: 15px 0 30px 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.45em;
}
.box-plans{
	margin:10px;
	z-index:2;
	padding:10px 20px;
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.09);
	background-color: #fff;
}

/* Layout */
/*
.sr-root {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1170px;
	align-content: center;
	justify-content: center;
	height: auto;
	min-height: 100vh;
	margin: 0 auto;
}
*/

.sr-header {
	padding: 0 10px;
	max-width: 1170px;
	margin: 0 auto;
}

.sr-header .logo {
	padding-top: 25px;
    float: left;
    max-width: 260px;
}

.sr-payment-summary {
	margin-top: 20px;
	margin-bottom: 20px;
}

.sr-main,
.sr-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	align-self: center;
}

.sr-main {
	/* width: var(--form-width); */
}

.main-collumn {
	margin-top: 20px;
	padding:20px;
	z-index:2;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.09);
	background-color: #fff;
}

.img-responsive {
	max-width: 100%;
	margin: 0 auto;
}

.sr-content {
	padding-left: 48px;
}

.sr-header__logo {
	background-image: var(--logo-image);
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
}

.sr-legal-text {
	text-align: center;
	font-size: 13px;
	line-height: 17px;
	margin-top: 12px;
}

.sr-field-error {
	text-align: left;
	font-size: 13px;
	line-height: 17px;
	margin-top: 12px;
}


/* Form */

.sr-form-row {
	margin: 26px 0;
}

label {
	font-size: 17px;
	font-weight: 500;
	margin: 10px 0px;
	display: inline-block;
}
label.container{padding-left:0px;}


/* Inputs */

.sr-input,
.sr-select,
input,
select {
	border: 2px solid var(--gray-border);
	border-radius: var(--radius);
	padding: 5px 12px;
	height: 44px;
	width: 100%;
	transition: all 0.2s ease;
	background: white;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
textarea {
	border: 2px solid var(--gray-border);
	border-radius: var(--radius);
	padding: 5px 12px;
	height: 144px;
	width: 100%;
	transition: all 0.2s ease;
	background: white;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}


.sr-input:focus,
input[type='text']:focus,
textarea:focus,
select:focus,
input[type='email']:focus,
.focused {
	border: 2px solid;
	outline: none;
	z-index: 9;
}

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	line-height: 1.3;
	    border-radius: var(--radius);
    padding: 5px 12px;
    height: 44px;
	width:100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}


/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none!important;
}


/*Checkboxes styles*/

input[type="checkbox"] {
	display: none;
}

input[type="checkbox"]+label {
	display: block;
	width:auto;
	position: relative;
	padding-left: 35px;
	font-weight: 600;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

input[type="checkbox"]+label:before {
	margin-top:-3px;
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 3px solid;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: all .12s, border-color .08s;
	transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked+label:before {
	width: 10px;
	top: -5px;
	left: 5px;
	border-radius: 0;
	opacity: 1;
	background: transparent;
	border-top-color: transparent;
	border-left-color: transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

input[type='text'].warn {
	border-color: red;
}

.sr-checkbox-label {
	position: relative;
	cursor: pointer;
}

.sr-checkbox-label input {
	opacity: 0;
	margin-right: 6px;
}

.sr-checkbox-label .sr-checkbox-check {
	position: absolute;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: white;
	border: 1px solid var(--gray-border);
	border-radius: 4px;
	transition: all 0.2s ease;
}

.sr-checkbox-label input:focus~.sr-checkbox-check {
	box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3);
	outline: none;
}

.sr-checkbox-label input:checked~.sr-checkbox-check {
	background-image: url('https://storage.googleapis.com/stripe-sample-images/icon-checkmark.svg');
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: -1px -1px;
}


/* Select */

.sr-select {
	display: block;
	height: 44px;
	margin: 0;
	background-image: url('https://storage.googleapis.com/stripe-sample-images/icon-chevron-down.svg');
	background-repeat: no-repeat, repeat;
	background-position: right 12px top 50%, 0 0;
	background-size: 0.65em auto, 100%;
}

.sr-select:after {}

.sr-select::-ms-expand {
	display: none;
}

.sr-select:hover {
	cursor: pointer;
}

.sr-select:focus {
	box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3);
	outline: none;
}

.sr-select option {
	font-weight: 400;
}

.sr-select:invalid {
	background-opacity: 0.4;
}


/* Combo inputs */

.sr-combo-inputs {
	display: flex;
	margin-top: 5px;
	flex-direction: column;
}

.sr-combo-inputs input,
.sr-combo-inputs .sr-select {
	border-radius: 0;
	border-bottom: 0;
}

.sr-combo-inputs>input:first-child,
.sr-combo-inputs>.sr-select:first-child {
	border-radius: var(--radius) var(--radius) 0 0;
}

.sr-combo-inputs>input:last-child,
.sr-combo-inputs>.sr-select:last-child {
	border-radius: 0 0 var(--radius) var(--radius);
	border-bottom: 1px solid var(--gray-border);
}

.sr-combo-inputs>.sr-combo-inputs-row:first-child input:first-child {
	border-radius: var(--radius) 0 0 0;
}

.sr-combo-inputs>.sr-combo-inputs-row:first-child input:last-child {
	border-radius: 0 var(--radius) 0 0;
}

.sr-combo-inputs-row {
	width: 100%;
	display: flex;
}

.sr-combo-inputs-row>input {
	width: 100%;
	border-radius: 0;
}

.sr-combo-inputs>.sr-combo-inputs-row:first-child input:last-child {
	border-radius: var(--radius) var(--radius) 0 0;
}

.sr-combo-inputs-row:last-of-type .sr-input {
	border-radius: 0 0 var(--radius) var(--radius);
}

.sr-combo-inputs-row .sr-input {
	height:50px;
}

/* Buttons and links */
.button {
	border-radius: var(--radius);
	color: white;
	border: 0;
	padding: 12px 16px;
	margin-top: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
    display: inline-block;
}
button {
	border-radius: var(--radius);
	color: white;
	border: 0;
	padding: 12px 16px;
	margin-top: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: block;
}

.button,button:hover {
	filter: contrast(115%);
}

.button,button:active {
	transform: translateY(0px) scale(0.98);
	filter: brightness(0.9);
}

button:disabled {
	opacity: 0.5;
	cursor: none;
}

.sr-payment-form button,
.fullwidth {
	width: 100%;
}

a {
	text-decoration: none;
	transition: all 0.2s ease;
}
/*

a:hover {
	filter: brightness(0.8);
}

a:active {
	filter: brightness(0.5);
}
*/


/* margin*/
.center-vert{margin-top:50px;}
/* Code block */

.sr-callout {
	background: var(--gray-offset);
	padding: 12px;
	border-radius: var(--radius);
	max-height: 400px;
	max-width: 600px;
	overflow: auto;
}

code,
pre {
	font-family: 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace;
	font-size: 14px;
	overflow-x: auto;
	white-space: pre-wrap;
}


/* Stripe Element placeholder */

.sr-card-element {
	padding-top: 14px;
}


/* alert */
.alert{
	background: rgb(255 0 0 / 14%);
    padding: 20px;
    font-weight: 600;
	border-radius:10px;
}
.success{
	border-radius:10px;
	background: #bbf5b6;
    padding: 20px;
    font-weight: 600;
}
/* Footer */

footer {
	margin-top:30px;
	text-align: center;
	padding: 20px;
	border-top: 1px solid #e8e5e5;
}

.footer-info p {
	font-size: 14px;
}
.skrollr-div{
    position:absolute;
}

/* Responsiveness */

@media (max-width: 720px) {
	.sr-root {
		flex-direction: column;
		justify-content: flex-start;
	}
	.sr-header__logo {
		background-position: center;
	}
	.sr-payment-summary {
		text-align: center;
	}
	.sr-content {
		display: none;
	}
	.sr-main {
		width: 100%;
	}
}


/* todo: spinner/processing state, errors, animations */


/* Animated form */

.sr-root {
	animation: 0.4s form-in;
	animation-fill-mode: both;
	animation-timing-function: ease;
}

.sr-payment-form .sr-form-row {
	animation: 0.4s field-in;
	animation-fill-mode: both;
	animation-timing-function: ease;
	transform-origin: 50% 0%;
}


/* need saas for loop :D  */

.sr-payment-form .sr-form-row:nth-child(1) {
	animation-delay: 0;
}

.sr-payment-form .sr-form-row:nth-child(2) {
	animation-delay: 60ms;
}

.sr-payment-form .sr-form-row:nth-child(3) {
	animation-delay: 120ms;
}

.sr-payment-form .sr-form-row:nth-child(4) {
	animation-delay: 180ms;
}

.sr-payment-form .sr-form-row:nth-child(5) {
	animation-delay: 240ms;
}

.sr-payment-form .sr-form-row:nth-child(6) {
	animation-delay: 300ms;
}

.hidden {
	display: none;
}

.loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}

.plans {
	margin-top: 10px;
}

.plan label {
	margin-top: 10px;
}

.sr-plans {
	display: flex;
	width: 600px;
}

.sr-plan {
	border: 1px solid rgb(232, 232, 232);
	border-radius: 6px;
	margin-right: 25px;
	height: 226px;
	width: 257px;
}

.sr-plan-inner {
	margin: 28px;
}

.sr-plan-name {
	color: rgb(166, 166, 166);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0px;
}

.sr-plan-text {
	color: rgb(153, 153, 153);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0px;
	line-height: 14px;
}

.sr-plan-button {
	border: 2px solid rgb(237, 95, 116);
	border-radius: 7px;
}

@keyframes field-in {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: translateY(0px) scale(1);
	}
}

@keyframes form-in {
	0% {
		opacity: 0;
		transform: scale(0.98);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

p.order-status {
	font-size: 22px;
	font-weight: 700;
}

/* Colors for IE support */

/* dark blue */

input[type="checkbox"]+label:before
{border-color: #0755b3;}
	
a,p.order-status,h1,h2,.price,nav ul li:hover a,nav ul li.active a
{color: #0755b3;}

.button,button,#responsive-nav img
{background-color: #0755b3;}

.sr-input:focus,
input[type='text']:focus,
textarea:focus,
select:focus,
input[type='email']:focus,
button:focus,
.focused 
{border-color: #0755b3;}


/* dark gray */
body {color:#4a4949;}

/* other dark gray */
h2,
h3,
h4,
h5,
h6
{color: #0c0c0c}

/* mid gray */
#responsive-nav img:hover,button:hover,.button:hover
{background-color:rgba(0, 0, 0, 0.7);}

/* light gray */
body{background-color: #f9f9f9;}

/* very  light gray */
.sr-legal-text,
.sr-select:invalid,
.sr-input::placeholder,
input[type='text']::placeholder {
	color: rgba(0, 0, 0, 0.4);
}
/* body color */
body,h4,nav ul li a,input[type="checkbox"]+label
{color: #4a4949;}

/* red for error messages*/
.sr-field-error {
    color: red;
}

/* Responsive */

@media only screen and (min-width: 991px) {
	.collumn {
		text-align: center;
		width: 60%;
	}
	.collumn.text-left {
		text-align: left;
	}
	/*
	.main-collumn {
		height: 100%;
		padding: 30px;
		
	}*/
	.sr-payment-form button:hover {
	   transform: scale(1.1);
    }
	.p-5{padding:20px 50px!important;}
	
}

@media only screen and (max-width: 991px) {

	/*.collumn,
	.main-collumn {
		width: 100%;
	}*/
	.skrollr-img{
		display:none;
	}
	.sr-root { 
	 padding: 20px;
	 display: table!important;
	}
	
	.collumn{
		    margin-bottom: 50px;
		    text-align: center;
	}
	.collumn.text-left{
		    text-align: left;
	}
	
}
@media only screen and (min-width: 768px) {
	#responsive-nav img {
		display:none;
	}
	nav ul {
		display: inline-block!important;
	}
	
}
@media only screen and (max-width: 768px) {
	.mt-8 {
    margin-top: 30px;
}
	#responsive-nav {
		display: block;
		min-height:55px;
		text-align: center;
	}
	#responsive-nav img {
		float: right;
		padding: 8px;
		transition: all ease-in-out 0.2s;
	}
	nav ul li{
		display: inline-block;
        width: 100%;
	}
	nav ul {
		display: none;
		text-align: center;
		width: 100%;
	}
	.sr-header .logo {
		float: left;
		padding-top:12px;
		margin: 0 auto;
		display: block;
		max-width: 230px;
	}
	h1 {
		font-size: 25px;
		line-height:1.2em;
	}
	.img-intro {
		max-width:250px;
	}
	label.container {
		font-size:16px;
    }
	span.price{
		display:block;
    padding-top: 5px;
    }

	nav ul li {
		padding: 15px;
     }
	
}
@media only screen and (max-width: 300px){
	.sr-header .logo {
	max-width: 180px;
	padding-top:15px;
	}
	.sr-root {
	padding: 10px;
	}
	.price {
		font-size:15px;
		padding-top:5px;
		display: block;
	}
}