@charset "UTF-8";

*{margin: 0;
	padding: 0;
	border: 0;
}

img {
	max-width: 150%;
	max-height: 150%;
	}

.anima {
	grid-area: an;
	height: auto;
	padding-right: 20px;
}

.segment {
	position: relative;
	height: 375px;
	width: 375px;
	}
.segment.piano {
	left: 70px;
	top: 30px;
	z-index: 1;
	width: 245px;
	height: 180px;
	position: absolute;
	}

.segment.accordion {
	left: 26px;
	top: 60px;
	z-index: 2;
	width: 200px;
	height: 210px;
	position: absolute;
	}

.segment.violin {
	left: 150px;
	top: 98px;
	z-index: 3;
	width: 200px;
	height: 200px;
	position: absolute;
	}
	
.segmentside {
	position: relative;
	height: 175px;
	width: 130px;
	}

.segmentside.multi {
	left: 260px;
	top: 220px;
	z-index: 4;
	width: 125px;
	height: 45px;
	position: absolute;
	}
	
.segmentside.soloist {
	left: 312px;
	top: 262px;
	z-index: 4;
	height: 40px;
	width: 125px;
	position: absolute;
	}
	
.segmentside.servmark {
	left: 419px;
	top: 259px;
	z-index: 4;
	height: 15px;
	width: 25px;
	position: absolute;
	}
	
.piano {
	-webkit-animation-name: fadeinpiano;
	-webkit-animation-duration: 4s;
	animation-name: fadeinpiano;
	animation-duration: 4s;
	transition-timing-function: linear;
	animation-fill-mode: forwards;
	}
	
@-webkit-keyframes fadeinpiano {
	from {transform: translate(70px, -200px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}
	
@-moz-keyframes fadeinpiano {
	from {transform: translate(70px, -200px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}
	
@keyframes fadeinpiano {
	from {transform: translate(70px, -200px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

.accordion {
	-webkit-animation-name: fadeinaccordion;
	-webkit-animation-duration: 5s;
	animation-name: fadeinaccordion;
	animation-duration: 5s;
	transition-timing-function: linear;
	animation-fill-mode: forwards;
	}
	
@-webkit-keyframes fadeinaccordion {
	from {transform: translate(-250px, -300px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
}

@-moz-keyframes fadeinaccordion {
	from {transform: translate(-250px, -300px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
}

@keyframes fadeinaccordion {
	from {transform: translate(-250px, -300px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
}

.violin {
	-webkit-animation-name: fadeinviolin;
	-webkit-animation-duration: 5.5s;
	animation-name: fadeinviolin;
	animation-duration: 5.5s;
	transition-timing-function: linear;
	animation-fill-mode: forwards;
	}

@-webkit-keyframes fadeinviolin {
	from {transform: translate(300px, -300px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

@-moz-keyframes fadeinviolin {
	from {transform: translate(300px, -300px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

@keyframes fadeinviolin {
	from {transform: translate(300px, -300px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}
	
.multi {
	-webkit-animation-name: fadeinmulti;
	-webkit-animation-duration: 4.5s;
	animation-name: fadeinmulti;
	animation-duration: 4.5s;
	transition-timing-function: linear;
	animation-fill-mode: forwards;
	}

@-webkit-keyframes fadeinmulti {
	from {transform: translate(1260px, 220px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

@-moz-keyframes fadeinmulti {
	from {transform: translate(1260px, 220px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

@keyframes fadeinmulti {
	from {transform: translate(1260px, 220px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}
	
.soloist {
	-webkit-animation-name: fadeinsoloist;
	-webkit-animation-duration: 4.55s;
	animation-name: fadeinsoloist;
	animation-duration: 4.55s;
	transition-timing-function: linear;
	animation-fill-mode: forwards;
	}

@-webkit-keyframes fadeinsoloist {
	from {transform: translate(1260px, 262px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

@-moz-keyframes fadeinsoloist {
	from {transform: translate(1260px, 262px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}
	
@keyframes fadeinsoloist {
	from {transform: translate(1260px, 262px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}
	
.servmark {
	-webkit-animation-name: fadeinservmark;
	-webkit-animation-duration: 4.7s;
	animation-name: fadeinservmark;
	animation-duration: 4.7s;
	transition-timing-function: linear;
	animation-fill-mode: forwards;
	}

@-webkit-keyframes fadeinservmark {
	from {transform: translate(1260px, 259px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

@-moz-keyframes fadeinservmark {
	from {transform: translate(1260px, 259px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}

@keyframes fadeinservmark {
	from {transform: translate(1260px, 259px);
	opacity: .25;
	}
	to {transform: translate(70px, 30px);
	opacity: 1;
	}
	}


/*---iPhone size--*/

@media only screen and (max-width: 480px) and (orientation: portrait) {
.anima {
	margin: 0;
	padding: 0;
	height: auto;
	width: 420px;
	}
.segment.piano  {
	left: -26px;
	}
.segment.accordion {
	left: -70px;	
	}
.segment.violin {
	left: 54px;
	}
.segmentside.multi {
	left: 164px;
	}
.segmentside.soloist {
	left: 216px;
	}
.segmentside.servmark {
	left: 323px;
	}
}

@media only screen and (max-width: 667px) and (orientation: landscape) {
.anima {
	margin: 0;
	padding: 0;
	height: 675px;
	width: 460px;
	}
.segment.piano  {
	left: -26px;
	}
.segment.accordion {
	left: -70px;	
	}
.segment.violin {
	left: 54px;
	}
.segmentside.multi {
	left: 164px;
	}
.segmentside.soloist {
	left: 216px;
	}
.segmentside.servmark {
	left: 323px;
	}
}

@media only screen and (min-width: 1680px) {
.segment.piano {
	height: auto;
	width: 400px;
	left: 49px;
	top: 22px;
	}
.segment.accordion {
	height: auto;
	width: 300px;
	left: -31px;
	top: 75px;
	}
.segment.violin {
	height: auto;
	width: 300px;
	left: 185px;
	top: 140px;
	}
.segment.piano img {
	height: 289px;
	width: 376px;
	}
.segment.accordion img, .segment.violin img {
	height: auto;
	width: 300px;
	}
.segmentside.multi {
	height: auto;
	width: 155px;
	left: 365px;
	top: 330px;
	}
.segmentside.soloist {
	height: auto;
	width: 155px;
	left: 435px;
	top: 385px;
	}
.segmentside.servmark {
	height: auto;
	width: 15px;
	left: 590px;
	top: 379px;
	}
.segmentside.multi img, .segmentside.soloist img {
	height: auto;
	width: 155px;
	}
.segmentside.servmark img {
	height: auto;
	width: 15px;
	}
}