* {
  position: relative; }

body, html {
  margin: 0; }

body {
  height: 100vh;
}

.title01{
position: absolute;	
top: 15%;
left:18%;
min-width:40px;
}
.title02{
position: absolute;	
top: 35%;
left:28%;	
width: 8%;	
min-width: 70px;	
}

.title03{
position: absolute;	
top: 50%;
left:10%;
width: 16%;	
min-width:250px;
}



@media (max-width: 575px){
	.title02{
	position: absolute;	
	top: 35%;
	left:20px;	
	}	
	.title03{
	position: absolute;	
	top: 70%;
	left:20px;	

	}

}
.disk {
  position: absolute;
  top: 20%;
  right: 0%;
  width: 60%;
  min-width:500px;
	
  }

@media (max-width: 991px){
	.title01{
		min-width:500px;
	}
	.title02{
	position: absolute;	
	top: 35%;
	left:20px;
	width:100px;
	}	
	.title03{
	position: absolute;	
	top: 70%;
	left:20px;	

	}
	.disk {
  position: absolute;
  top: 200px;
  }

}

@media (max-width: 767px){
	
	.title02{
	position: absolute;	
	top: 35%;
	left:20px;
	width:100px;
	}	
	.title03{
	position: absolute;	
	top: 70%;
	left:20px;	

	}
	.disk {
  position: absolute;
  top: 200px;
  }

}

@media (max-width: 575px){
	
	.title01{
		min-width:300px !important;
	}
	
	.disk {
	right: 0%;
	top: 200px;
 	min-width:350px;
	
  }

}


  .disk img {
    transform: translateY(3%);
    width: 100%; }

.rod {
  position: absolute;
  transform: translate(0%, -100%);
  width:20%;
  top: 35%;
  right: 0%; 
}
  .rod img {
    width: 100%; }

.guitar {
  position: absolute;
  width: 40%;
  top: 30%;
  right: 0; 
}
  .guitar img {
    width: 100%; }

.house {
  position: absolute;
  transform: translate(0, 0) scaleX(0.5);
  top: -50%;
  left: 100%;
  width: 150%; }
  .house img {
    width: 100%; }

.frog {
  position: absolute;
  transform: translate(0, 0) scaleX(0.5);
  top: 40%;
  left:-60%;
  width: 220%; }
  .frog img {
    width: 100%; }

.cello {
  position: absolute;
  transform: translate(0, 0) scaleX(0.5);
  top:-80%;
  left: 0%;
  width: 300%; }
  .cello img {
    width: 100%; }

.dog {
  position: absolute;
  transform: translate(-50%, -50%) scaleX(0.5);
  top: 50%;
  left: 40%;
  width: 100%; }
  .dog img {
    width: 100%; }

.note-1 {
  position: absolute;
  transform: translate(-50%, -50%) scaleX(0.5);
  top: 60%;
  left: 100%;
  width: 15%;
  transform: rotate(180deg); }
  .note-1 img {
    width: 100%; }

.note-2 {
  position: absolute;
  transform: translate(-50%, -50%) scaleX(0.5);
  top: 0%;
  left: 120%;
  width: 120%; }
  .note-2 img {
    width: 100%; }

.ondisk {
  position: absolute;
  transform: translate(-50%, -50%) scaleX(2);
  top: 45%;
  left: 50%;
  width: 50%;
  height: 60%; }

.rotate {
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation: circle 10s infinite linear; }

.counterrotate {
  width: 40%;
  height: 40%;
  -webkit-animation: ccircle 10s infinite linear; }

.rotate-house {
  animation-delay: -8s; }

.counterrotate-house {
  animation-delay: -8s;
  width: 40%;
  height: 40%; }

.rotate-frog {
  animation-delay: -3s; }

.counterrotate-frog {
  animation-delay: -3s;
  width: 50%;
  height: 50%; }

.rotate-cello {
  animation-delay: -7s; }

.counterrotate-cello {
  animation-delay: -7s;
  width: 30%;
  height: 30%; }

.rotate-note-1 {
  animation-delay: -4s; }

.counterrotate-note-1 {
  animation-delay: -4s;
  width: 60%;
  height: 60%; }

.rotate-note-2 {
  animation-delay: -8s; }

.counterrotate-note-2 {
  animation-delay: -8s;
  width: 10%;
  height: 10%; }

.rotate-dog {
  animation-delay: -5s; }

.counterrotate-dog {
  animation-delay: -5s;
  width: 50%;
  height: 50%; }

/*
@-webkit-keyframes circle {
  from {
    -webkit-transform: rotateZ(0deg); }
  to {
    -webkit-transform: rotateZ(360deg); } }

@-webkit-keyframes ccircle {
  from {
    -webkit-transform: rotateZ(360deg); }
  to {
    -webkit-transform: rotateZ(0deg); } }

*/