@charset "utf-8";
/* CSS Document */
body {
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif
}
header, main, footer {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px
}
p, li {
	font-size: 1rem
}
h1 {
	font-size: 1.5rem
}
h2 {
	font-size: 1.188rem
}
main {
	margin-top: 20px
}
		.logo{width: 220px;}
	
.container {
	height: 200px;
	width: 230px
}
.container .circle {
	position: absolute;
	height: 100px;
	width: 100px;
	background: #008E80;
	border-radius: 50%;
	-webkit-animation: rotate 6s linear infinite;
	animation: rotate 6s linear infinite
}
.container .circle:nth-child(1) {
	top: 100px;
	left: 10px;
	margin-left: 40%;
	margin-top: 20px
}
.container .circle:nth-child(2) {
	top: 175px;
	left: 110px;
	margin-left: 40%;
	margin-top: 20px;
	animation-direction: reverse
}
.container .circle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 50px;
	width: 50px;
	background: #fff;
	border-radius: 50%
}
.container .circle div {
	position: absolute;
	top: -10px;
	left: 30px;
	height: 120px;
	width: 40px
}
.container .circle div:nth-child(2) {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}
.container .circle div:nth-child(3) {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}
.container .circle div:nth-child(4) {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.container .circle div::after, .container .circle div::before {
	content: "";
	position: absolute;
	width: 40px;
	box-sizing: border-box
}
.container .circle div::before {
	border-bottom: 60px solid #008E80;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent
}
.container .circle div::after {
	top: 60px;
	border-top: 60px solid #008E80;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent
}
@-webkit-keyframes rotate {
100% {
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
@keyframes rotate {
100% {
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
.box {
	margin:0 auto!important
}
main > div img {
	width: 100%;
	text-align: center
}

@media only screen and (max-width: 600px) {
.container .circle:nth-child(1) {
	top: 100px;
	left: 10px;
	margin-left: 30%;
	margin-top: 20px
}
.container .circle:nth-child(2) {
	top: 175px;
	left: 110px;
	margin-left: 30%;
	margin-top: 20px;
	animation-direction: reverse
}
		.logo{width: 180px;}
	main{margin-top: 10px;}
}
a:link {
	color: #008E80;
	text-decoration: none;
	font-weight: 700
}
a:hover {
	color: #008E80;
	text-decoration: underline
}
a:visited {
	color: #008E80;
	text-decoration: none
}
a:active {
	color: #008E80;
	text-decoration: none
}
h1:last-of-type {
	margin-top: 2rem
}
@media only screen and (max-width: 480px) {
	.show-for-mobile{display:block;}
	.show-for-desktop{display:none;}
	}
	@media only screen and (min-width: 481px) {
	.show-for-desktop{display:block;}
		.show-for-mobile{display:none;}
	}