body#top {
	background-image: url("../img/back.gif");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	width:100%;
	overflow: hidden;
	background-color: #fff59d;
}

#result{
    position:fixed;
    top:0;
    right:0;
    z-index:65535;
    width:100%;
    display: none;
}

#card_base{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100vh;
	overflow: hidden;
    /*box-shadow:0px 3px 4px 3px rgba(256,256,256,0.6); */
    background-color:#fff;
    -webkit-animation: showcard 0.5s ease 0.15s;
    -moz-animation: showcard 0.5s ease 0.15s;
    -ms-animation: showcard 0.5s ease 0.15s;
    animation: showcard 0.5s ease 0.15s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

#card{
    height:0%;
    width:100%;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top left;

}

#resultStr{
    width:100%;
    height:100%;
	background-image: url("../img/bg_normal.jpg");
    background-repeat:no-repeat;
    background-size:cover; 
    background-position:center;
 }
#resultMsg{	height: 100%;
	width: calc(100%-20px);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
#close-card{
     position:absolute;
     top:15px;
     right:15px;
}

#apko_desc{
    position:absolute;
    top:0;
    /*right:37px;*/
    z-index:65535;
    width:100%;
	height: auto;
    display: none;
}

#apko_card_base{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100vh;
	box-sizing: border-box;
    /*box-shadow:0px 3px 4px 3px rgba(256,256,256,0.6); */
    /*margin-left:-165px;*/
    background-color:#fff;
    -webkit-animation: showcard 0.5s ease 0.15s;
    -moz-animation: showcard 0.5s ease 0.15s;
    animation: showcard 0.5s ease 0.15s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-origin: left;
    -o-transform-origin: left;
    -ms-transform-origin: left;
    -moz-transform-origin: left;
    -webkit-transform-origin: left;
	padding: 10px 0;
}
#apko_card{
    height:100%;
    width:100%;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size: contain;
    background-position:center;
}

#close-apko{
     position:absolute;
     top:15px;
     right:15px;
}

@-webkit-keyframes showsign {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1); } }
@-moz-keyframes showsign {
  0% {
    opacity: 0;
    -moz-transform: scale(0.1); }
  100% {
    opacity: 1;
    -moz-transform: scale(1); } }
@keyframes showsign {
  0% {
    opacity: 0;
    transform: scale(0.1);
    -o-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -webkit-transform: scale(0.1); }
  100% {
    opacity: 1;
    transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1); } }

@-webkit-keyframes showcard {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg) scale(0.2); }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg)  scale(1); } }
@-moz-keyframes showcard {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg) scale(0.2); }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) scale(1); } }
@keyframes showcard {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg) scale(0.2); }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) scale(1); } }

@-webkit-keyframes yurayura {
	0% { -webkit-transform: rotate(0deg); }
	25% { -webkit-transform: rotate(15deg); }
	50% { -webkit-transform: rotate(0deg); }
	75% { -webkit-transform: rotate(-15deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes yurayura {
	0% { -moz-transform: rotate(0deg); }
	25% { -moz-transform: rotate(15deg); }
	50% { -moz-transform: rotate(0deg); }
	75% { -moz-transform: rotate(-15deg); }
	100% { -moz-transform: rotate(0deg); }
}

#anim {
	-webkit-animation: yurayura 3s linear infinite;
	-moz-animation: yurayura 3s linear infinite;
}

@-webkit-keyframes rotation {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes rotation {
	0% { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(180deg); }
}

#animRotation {
	-webkit-animation: rotation 3s;
	-moz-animation: rotation 3s;
}

@-moz-keyframes swing {
    0% { -moz-transform: rotate(0deg) }
    25% { -moz-transform: rotate(5deg); }
    50% { -moz-transform: rotate(0deg); }
    75% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(5deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}

#swing {
    -moz-animation: swing linear 0.5s infinite;
    -moz-transform-origin: center -10px 0;
    -webkit-animation: swing linear 0.5s infinite;
    -webkit-transform-origin: center -10px 0;
    animation: swing linear 0.5s infinite;
    transform-origin: center -10px 0;
    display: block;
    float:left;
}

@-webkit-keyframes bounce {
  0% { -webkit-transform: scale(0.5) }
  25% { -webkit-transform: scale(0.8) }
  50% { -webkit-transform: scale(0.5) }
  75% { -webkit-transform: scale(0.8) }
  100% { -webkit-transform: scale(0.5) }
}

@-moz-keyframes bounce {
  0% { -moz-transform: scale(0.5) }
  25% { -moz-transform: scale(0.8) }
  50% { -moz-transform: scale(0.5) }
  75% { -moz-transform: scale(0.8) }
  100% { -moz-transform: scale(0.5) }
}

#cd {
  -webkit-animation: bounce 1.0s infinite ease-in-out;
  -moz-animation: bounce 1.0s infinite ease-in-out;
}
img#cd,
img#swing,
img#anim,
img#animRotation{
	max-width: 100%;
	width:100%
}

.red{
    color:#F44336;
}

.yellow{
    color:#FFEB3B;
    text-decoration: underline;
}