* { /* margin: 0; padding: 0; box-sizing: border-box; */ font-family: 'Computer Modern Sans'; }
h1 { margin: 0px auto; font-family: 'Computer Modern Serif'; font-size: 3em}
h2 { font-family: 'Computer Modern Serif';}
hr {border-top: 1px solid #666;}
body { font: 18px Helvetica, Arial; background: #ddd; padding: 20px;}
#container {width: 100%; max-width: 800px; top: 10%;}
.inline {display: inline;}
ol,li {margin: 0; padding: 0;}
ol, table {counter-reset: foo; display: table;}
ol li, td.count {list-style: none; counter-increment: foo 1; display: table-row;}
ol li::before, td.count::before {
		content: counter(foo) ".";
		display: table-cell;
		text-align: right;
		padding-right: .3em;
}
ul {display: table;}
ul li {list-style: none; display: table-row;}
ul li::before {
		content: "•";
		display: table-cell;
		text-align: right;
		padding-right: .7em;
}
div.paypal-button-row.paypal-button-number-1,div.paypal-button-row.paypal-button-number-2,div.paypal-button-row.paypal-button-number-3 {
	display:none
}

body,
html {
	width: 100%;
	background: black;
	margin: 0;
	height: 100%;
	overflow: hidden;
	color: white;
}
.breathe-container {
	height: calc((100vw - 300px) * 0.5);
	width: calc((100vw - 300px) * 0.5);
	text-align: center

}
.breathe-container-left {
	position: absolute; left: 50px; bottom: 50px;
	animation: infinite calc(1.7143s * 4) linearrotate alternate;
}
.breathe-container-right {
	position: absolute; right: 50px; bottom: 50px; 
	animation: infinite calc(1.7143s * 4) linearrotate alternate-reverse;
}
.breathe {
	/* animation: infinite 3s slidein alternate; */
	animation: infinite 1.7143s rotate90then180 alternate;
	/* animation-duration: 3s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	animation-direction: alternate; */
    box-sizing: content-box;
	height: 100%;
}
.breathe-neg {
	animation: infinite 1.7143s  /*3.4286s*/ rotate90then180neg alternate;
	box-sizing: content-box;
	height: 100%;
}
.breathe1 {
	animation-delay: 0s;
	background:rgb(50,50,50);
}

.breathe2 {
	animation-delay: calc(0.428575s * (- 0.7));
	/* animation-delay: 0.6s; */
	background:rgb(100,100,100);
}
.breathe3 {
	animation-delay: calc(0.428575s * ( - 1.4));
	background:rgb(150,150,150);
	/* animation-delay: 1.2s; */

}
.breathe4 {
	animation-delay: calc(0.428575s * (-2.1));
	background:rgb(200,200,200);

	/* animation-delay: 1.2s; */
	/* animation-delay: 1.2s; */
}
.breathe5 {
	animation-delay: calc(0.428575s * (-2.8));
	background: black;

	/* animation-delay: 1.2s; */
	/* animation-delay: 1.2s; */
}
@keyframes linearrotate {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg)
	}
}
@keyframes rotate180 {
	from {
		padding: 0px;
		height: calc(100%)
	}
	25% {
		padding: 0px;
		height: calc(100%)
	}
	to {
		padding: 50px;
		height: calc(100% - 100px);
		transform: rotate(180deg);
	}
}
@keyframes rotate90then180 {
	from {
		padding: calc((100vw - 300px) * 0.5 * 0.1);
		height: calc(100% - ((100vw - 300px) * 0.5 * 0.1) * 2);
		/* background: white; */
		transform: rotate(90deg)/*  translate(0px, calc(-1*(100% - ((100vw - 300px) * 0.5 * 0.2) * 2)) */
	}
	50% {
		padding: 0px;
		height: calc(100%);
		transform: rotate(0deg)
	}
	/* 62.5% {
		padding: 0px;
		height: calc(100%)
	} */
	to {
		padding: 50px;
		height: calc(100% - 50px * 2);
		transform: rotate(-180deg) /* translate(0px, calc(100% - ((100vw - 300px) * 0.5 * 0.2) * 2) */ /* scale(1, 1.2, 1) */;
	}
}
@keyframes rotate90then180neg {
	from {
		padding: 50px;
		height: calc(100% - 50px * 2);
		transform: rotate(-90deg) /* scale(1, 0.8, 1) */;/* translate(0px, calc(-1 * (100% - ((100vw - 300px) * 0.5 * 0.2) * 2)) */
	}
	50% {
		padding: 0px;
		height: calc(100%);
		transform: rotate(0deg)
	}
	/* 62.5% {
		padding: 0px;
		height: calc(100%)
	} */
	to {
		padding: calc((100vw - 300px) * 0.5 * 0.1);
		height: calc(100% - ((100vw - 300px) * 0.5 * 0.1) * 2);
		transform: rotate(180deg)  /* scale(1, 1.2, 1) */; /* translate(0px, calc(100% - ((100vw - 300px) * 0.5 * 0.2) * 2) */
	}
}