/* style-000.css */

/*

	Colours

	Material Design
	Deep_Orange 200	#ffab91
	Deep_Orange 500	#ff5722
	Deep_Orange 800	#d84315
	Lime 700	#afb42b



*/

/* Keyframes */

/* changeFrom */

@-webkit-keyframes changeFrom {
	from {
		-webkit-transform: rotateY(0);
	}
	to {
		-webkit-transform: rotateY(-90deg);
	}
}

@keyframes changeFrom {
	from {
		transform: rotateY(0);
	}
	to {
		transform: rotateY(-90deg);
	}
}

/* changeTo */

@-webkit-keyframes changeTo {
	from {
		-webkit-transform: rotateY(90deg);
	}
	to {
		-webkit-transform: rotateY(0);
	}
}

@keyframes changeTo {
	from {
		transform: rotateY(90deg);
	}
	to {
		transform: rotateY(0);
	}
}

/* Generic */

h1 {
	text-align: center;
}

/* Elements */

/* Objects */

.site-header  { background-color: #ffab91; }
.site-content { background-color: #ff5722; }
.site-footer  { background-color: #d84315; }
.site-footer * { color: #fff; }

/* Components */

.anim-container {
	-webkit-perspective: 3000px;
	perspective: 3000px;
}

.payment-form {
	background-color: #ffab91;
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);
}

.payment-form header {
	box-shadow: none;
	border-bottom: 2px solid #ff5722;
}

.payment-form section {
	min-height: 7rem;
}

.payment-form header,
.payment-form section {
	border-bottom: 2px solid #ff5722;
}

.payment-form footer {
	margin-top: 0;
}

.fieldset {
	border: none;
}

@media screen and (min-width: 50rem) {
	.payment-form {
		max-width: 50rem;
		margin: 1rem auto 0;
	}
	
	.payment-form header {
		display: flex;
		justify-content: space-between;
	}
	
	.change {
		margin-top: 0;
	}
	
	.fieldsets {
		display: flex;
	}
	
	.fieldset {
		flex-basis: 50%;
		flex-shrink: 1;
		flex-grow: 1;
	}
} /* end @media */

.go,
.change { 
	background-color: #afb42b;
	/*box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);*/
	border: none;
}

.go {
	margin: 1rem
}

/* Trumps */

/* Animation */

.js-change-from {
	-webkit-animation: changeFrom .2s linear forwards;
	animation: changeFrom .2s ease-out forwards;
}

.js-change-to {
	-webkit-animation: changeTo .2s linear forwards;
	animation: changeTo .2s ease-in forwards;
}

.js-form-hidden {
	display: none;
}