.twin {
	position: relative;
	margin-top:40%;
	display: inline-block;
	width: 30%;
	height: 300px;
	background: #111;
}


.twin.second {
	background: #111;
			}



.marubox {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100px;
				height: 100px;
				margin: auto 2px;

			}
			.marubox a {
				position: relative;
				display: block;
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				background: #111;
				color: #fff;
				font-size: 12px;
			}
			.marubox.second a {
				border-radius: 50%;
				background: rgba(0,0,0,1);
			}

			.marubox a:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100px;
				height: 100px;
				box-shadow: none;
			}
			.marubox a:hover:after {
				-webkit-animation: ripple 1.5s ease;
				animation: ripple 1.5s ease;
			}

			.marubox.second a:after {
				border-radius: 50%;
				box-shadow: none;
			}
			.marubox.second a:hover:after {
				-webkit-animation: rippleSecond 1.5s ease;
				animation: rippleSecond 1.5s ease;
			}

			.marubox.double a:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100px;
				height: 100px;
				box-shadow: none;
			}
			.marubox.double a:hover:before {
				-webkit-animation: ripple 1.5s ease .3s;
				animation: ripple 1.5s ease .3s;
			}

			.marubox.double.second a:before {
				border-radius: 50%;
				box-shadow: none;
			}
			.marubox.double.second a:hover:before {
				-webkit-animation: rippleSecond 1.5s ease .3s;
				animation: rippleSecond 1.5s ease .3s;
			}

			@-webkit-keyframes ripple {
				0%{opacity: 1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(204,204,204, 0);}
				100%{opacity: 0;-webkit-transform: scale(2);transform: scale(2);box-shadow: 0 0 0 2px rgba(204,204,204, 1);}
			}
			@keyframes ripple {
				0%{opacity: 1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(204,204,204, 0);}
				100%{opacity: 0;-webkit-transform: scale(2);transform: scale(2);box-shadow: 0 0 0 2px rgba(204,204,204, 1);}
			}
			@-webkit-keyframes rippleSecond {
				0%{opacity: 1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(204,204,204, 0);}
				100%{opacity: 0;-webkit-transform: scale(2);transform: scale(2);box-shadow: 0 0 0 2px rgba(204,204,204, 1);}
			}
			@keyframes rippleSecond {
				0%{opacity: 1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(204,204,204, 0);}
				100%{opacity: 0;-webkit-transform: scale(2);transform: scale(2);box-shadow: 0 0 0 2px rgba(204,204,204, 1);}
			}
			.footer {
				margin: 100px 0;
				text-align: center;
			}