body
{
	margin-top:5%;
	margin-bottom:5%;
	margin-left:5%;
	margin-right:5%;
}

a 
{
	text-decoration: none;/* menghilangkan garis bawah*/
	color: grey;
	/*font-size: 1vw;
	font-family: Arial;*/
}

a:hover /*sesudah disorot mouse*/
{
	text-decoration: none; /* menghilangkan garis bawah*/
	color: green;
	/*font-size: 2vw;
	font-family: Comic Sans ms;*/
}

.perbesar
{
	transition: transform 1s; /*durasi animasi*/
}

.perbesar:hover /*memperbesar objek saat disorot mouse*/
{
	transform: scale(1.5); /*Objek akan memperbesar 1.2x*/
	/*transform: scaleX(1.2); /*Objek akan memperbesar 1.2x*/
	/*transform: scaleY(1.2); /*Objek akan memperbesar 1.2x*/
}

.perkecil
{
	transition: transform 2s; /*durasi animasi*/
}

.perkecil:hover /*memperbesar objek saat disorot mouse*/
{
	transform: scale(0.6); /*Objek akan memperbesar 1.2x*/
	/*transform: scaleX(0.6); /*Objek akan memperbesar 1.2x*/
	/*transform: scaleY(0.6); /*Objek akan memperbesar 1.2x*/
}

.rotasi /*class rotasi*/
{
	transition: transform 2s; 
}
.rotasi:hover
{
	/*transform: rotateX(360deg); 
	transform: rotateY(360deg); */
	transform: rotate(360deg);
}

#rotasi /*id Rotasi*/
{
	transition: transform 2s; 
}
#rotasi:hover
{
	/*transform: rotateX(360deg); 
	transform: rotateY(360deg); */
	transform: rotate(360deg); 
}
.translasi
{
		transition: transform 2s; 
}

.translasi:hover
{
		transform: translateX(10%); 
		transform: translateY(-10%); 
		/*transform: translateZ(0);
		transform: translate3d(10%);
		/*transform: translate(-10%);*/
}

.kecerahan
{
	opacity: 1; /*rentang kecerahan antara 0 s.d 1*/
}
.kecerahan:hover
{
	opacity: 0.5;
}

#campuran
{
	transition: transform 2s;
}
#campuran:hover
{
	transform: rotate(360deg) opacity:0.5;
}

.monokrom
{
	-webkit-filter:grayscale(1);
}
.monokrom:hover
{
	-webkit-filter:grayscale(0);
}

.sephia
{
	-webkit-filter:sepia(1);
}
.sephia:hover
{
	-webkit-filter:sepia(0);
}

.saturasi
{
	-webkit-filter:saturate(0.8)
}
.saturasi:hover
{
	-webkit-filter:saturate(0.5)
}

.kontras
{
	-webkit-filter:contrast(0.9)
}
.kontras:hover
{
	-webkit-filter:contrast(0.1)
}

.klise
{
	-webkit-filter:invert(0.2)
}
.klise:hover
{
	-webkit-filter:invert(0.9)
}

/*Animasi Dinamis pada website tanpa interupsi dari user*/
#kotak
{
	position: relative;
}

#pertama, #kedua, #ketiga
{
	position: absolute;top: 30%;left: 25%; font-family: arial;
	opacity: 0; color: black;font-size: 4vw;
	animation: hilang ease 30s infinite;
}

#pertama {animation-delay: 0s;}
#kedua {animation-delay: 10s;}
#ketiga {animation-delay: 20s;}

@keyframes hilang
{
	0% { opacity: 0; transform: scale(0); } /*Starting Point*/
	33% { opacity: 1; transform: scale(1); } /*PEAK*/
	66% {opacity: 0; transform: scale(0);} /*Ending Point*/
}

#kotakbesar
{
	margin: 4% auto;
	width: 140px;
	height: 105px;
	position: relative;
	perspective: 750px;
}

#kotakkecil
{
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	animation: putar 20s infinite linear;
}

#kotakkecil:hover
{
	animation-play-state: paused;
}

figure
{
	display: block;
	position: absolute;
	width: 90%; height: 78%;
	left: 10px; top: 10px;
	background: white;
	overflow: hidden;
	border: solid 2px white;
}

figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
figure:nth-child(2) {transform: rotateY(30deg) translateZ(288px);}
figure:nth-child(3) {transform: rotateY(60deg) translateZ(288px);}
figure:nth-child(4) {transform: rotateY(90deg) translateZ(288px);}
figure:nth-child(5) {transform: rotateY(120deg) translateZ(288px);}
figure:nth-child(6) {transform: rotateY(150deg) translateZ(288px);}
figure:nth-child(7) {transform: rotateY(180deg) translateZ(288px);}
figure:nth-child(8) {transform: rotateY(210deg) translateZ(288px);}
figure:nth-child(9) {transform: rotateY(240deg) translateZ(288px);}
figure:nth-child(10) {transform: rotateY(270deg) translateZ(288px);}
figure:nth-child(11) {transform: rotateY(300deg) translateZ(288px);}
figure:nth-child(12) {transform: rotateY(330deg) translateZ(288px);}
figure:nth-child(13) {transform: rotateY(360deg) translateZ(288px);}

#kotakkecil img
{
	-webkit-filter: grayscale(1);
	cursor: pointer;
	transition: all 0.7s ease;
	width: 100%;
}
#kotakkecil img:hover
{
	-webkit-filter: grayscale(0);
	transform: scale(1.1);
}

@keyframes putar
{
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}

#lengkung /*Membuat image border melengkung*/
{
	border-radius: 10%;
}