body {
	margin: 0px;
	padding: 0px;
	background: #336666 url(../img/beckground.png) no-repeat;
	background-size: cover;
}

#header-logo {
	margin-top: 70px;
	margin-left: 50px;
	position: absolute;
}

#content {
	margin-top: 50px;
	left: 110%;
	width: 800px;
	height: 600px;
	background-color: transparent;
	position: absolute;
}

div.teks {
	color: #000;
}

div.teks img {
    width: 150px;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {width: 0px;}
    25%  {width: 50px;}
    50%  {width: 100px;}
    100% {width: 150px;}
}

/* Standard syntax */
@keyframes example {
    0%   {width: 0px;}
    25%  {width: 50px;}
    50%  {width: 100px;}
    100% {width: 150px;}
}

div.teks:hover img {
   -webkit-animation:spin 4s linear infinite;
   -moz-animation:spin 4s linear infinite;
   animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.card-container {
  margin-bottom: 20px;
  cursor: pointer;
  height: 250px;
  perspective: 600;
  position: relative;
  width: 220px;
}
.modal-card-container {
  margin-bottom: 20px;
  cursor: pointer;
  height: 190px;
  perspective: 600;
  position: relative;
  width: 190px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.card .back {
  background: url(../gambar/back.png)no-repeat;
  color: #ff9933;
  font-weight: bold;
  font-size:16px;
  font-family:Geneva, Arial, Helvetica, sans-serif;
  line-height: 230px;
  text-align: center;
  transform: rotateY(180deg);
  background-size:200px;
  background-position: center;
  
}