/* CSS Document */

.cd-container
{
    margin-left: auto;
    margin-right: auto;
    left: 290px;
    right: 0;
    width: 500px;
    height: 461px;
    position: absolute;
	animation: slide-up 35s;
	-webkit-transform: translate3d(0,0,0);
}

.cd-container2
{
    margin-left: auto;
    margin-right: auto;
    left: 290px;
    right: 0;
    width: 500px;
    height: 461px;
    position: absolute;
}

#cd-pos, #cd-pos2
{
 top: 1100px;	 
}

.gif_container
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 1080px;
	height: 480px;
}

#gif-pos
{
	top:1290px;
}

.cs_container
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 97px;
}

#cs_pos
{
    top: 1084px;
    left: 765px;
}

.show_container
{
	margin-left: auto;
    margin-right: auto;
    width: 700px;
	height: 525px;
	left: 265px;
	right: 0;
	position: absolute;
}

#show_pos
{
	top: 1080px;
}

.w3-animate-opacity
{
	animation:opac 30s;
}

@keyframes opac{from{opacity:0} to{opacity:1}}

.flip
{
  -webkit-animation:spin 20000ms linear infinite;
  animation: spin 20000ms linear infinite;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.front, .back
{
   backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
   position:absolute;
   top:0;
   left:0;
}

.front
{
  transform:rotateY(180deg);
}

.back
{
  transform:rotateY(0deg);
}

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

@keyframes spin 
{
  100% { transform: rotateY(360deg); }
}

@keyframes slide-up {
  from {
    margin-top: 50%;
  }

  to {
    margin-top: 0%;
  }
}

.plane-box
{
    margin-left: auto;
    margin-right: auto;
    left: 260px;
    right: 0;
    width: 803px;
    height: 191px;
    position: absolute;
}

#plane-pos
{
    top: 940px;
}