#logowrapper {
	position:absolute;
	width:90%;
	height:90%;
	left:5%;
	top:5%;
	z-index:5;
}
.transition {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#logosecond:hover + #logofirst > #logowrapper, #logofirst:hover > #logowrapper {
	width:50%;
	height:50%;
	left:25%;
	top:25%;
}
#logosecond:hover + #logofirst > #logowrapper > .one, #logofirst:hover > #logowrapper > .one {
	width:35%;
}

#logo:hover #logosecondcontent {
	bottom:0;
}
#logosecondcontent {
	position:absolute;
	bottom:-185px;
	left:0;
	width:185px;
	height:185px;
}
#logosecondcontent > img {
	width:100%;
	height:100%;
}
.one {
	width:45%;
	position:absolute;
}
#one {
	transform: rotate(0deg);
	left:3.58%;
	top:5.37%;
}
#two {
	transform: rotate(45deg);
	left:32.85%;
	top:-1.14%;
}
#three {
	transform: rotate(90deg);
	left:58.05%;
	top:14.31%;
}
#four {
	transform: rotate(135deg);
	left:64.39%;
	top:43.58%;
}
#five {
	transform: rotate(180deg);
	left:48.13%;
	top:68.29%;
}
#six {
	transform: rotate(225deg);
	left:19.84%;
	top:74.8%;
}
#seven {
	transform: rotate(270deg);
	left:-4.88%;
	top:58.54%;
}
#eight {
	transform: rotate(315deg);
	left:-11.87%;
	top:30.08%;
}