#banner,
#banner * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: normal;
}

#banner {
	width: 380px;
	border-width: 3px;
	border-style: solid;
	border-color: #a6cc37;
	position: relative;
	background-color: #a6cc37;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	margin: 40px auto;
	cursor: pointer;
}

#banner .banner-bg {
	position: absolute;
	top: 60px;
	left: 62px;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-animation: rotate 30s linear infinite;
	-moz-animation: rotate 30s linear infinite;
	animation: rotate 30s linear infinite;
	max-width: inherit;
}

#banner .kettlebell {
	position: absolute;
	top: 52px;
	left: 62px;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

#banner .slogan {
	position: relative;
	z-index: 30;
	background-color: #fff;
	color: #000;
	font-weight: bold;
	line-height: 30px;
}

#banner .slogan span {
	color: #d00;
	font-size: inherit;
	font-weight: inherit;
}

#banner .member {
	position: relative;
	z-index: 30;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
	line-height: 50px;
	padding-left: 45px;
}

#banner .member span {
	color: #fc0;
	font-size: inherit;
	font-weight: inherit;
}

@media screen and (max-width: 440px){
	#banner {
		width: 100%;
	}
	
	#banner .slogan {
		font-size: 11px;
		line-height: 1.2;
		padding: 5px 10px;
	}
	
	#banner .banner-bg {
		width: 700px;
		top: calc(60% + 6px);
	}
	
	#banner .kettlebell {
		top: 60%;
	}
	
	#banner .banner-bg,
	#banner .kettlebell {
		left: 30px;
	}
	
	#banner .member {
		font-size: 18px;
		line-height: 1.2;
		padding: 15px 15px 15px 48px;
	}
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
	to {
		-webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg);
	}
}

@-moz-keyframes rotate {
	from {
		-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
	to {
		-moz-transform: translateX(-50%) translateY(-50%) rotate(360deg);
	}
}

@keyframes rotate {
	from {
		-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
		-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
		-ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
		-o-transform: translateX(-50%) translateY(-50%) rotate(0deg);
		transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
	to {
		-webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg);
		-moz-transform: translateX(-50%) translateY(-50%) rotate(360deg);
		-ms-transform: translateX(-50%) translateY(-50%) rotate(360deg);
		-o-transform: translateX(-50%) translateY(-50%) rotate(360deg);
		transform: translateX(-50%) translateY(-50%) rotate(360deg);
	}
}