/*body
{
    background: #010101;
    font-size: 62.5%;
}
html, body
{
    overflow: hidden;
}
#message
{
    font-family: verdana, sans serif;
    color: #EEE;
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    text-align: right;
    padding-right: 10px;
}
#message a
{
    color: #EEE;
    padding-right: 10px;
}
#message a:hover
{
    color: #00f;
}
#attributions
{
    font-family: verdana;
    color: #EEE;
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 50%;
    text-align: left;
    padding-left: 10px;
    display: block;
}
#attributions a
{
    color: #eee;
    padding-left: 10px;
}
#attributions a:hover
{
    color: #00f;
}
.boxtext
{
    margin: 10px 3px;
    padding: 8px;
    color: white;
    font-weight: bold;
    font-family: arial;
}
#launch
{
    cursor: pointer;
    background: #67A4ED;
    -webkit-border-radius: 10px;
    border: 1px solid #3C75BA;
    margin: 10px 3px;
    padding: 8px;
    color: white;
    font-weight: bold;
}
input[type='text']
{
    border: 2px solid #3C75BA;
    padding: 5px;
    width: 300px;
    font-size: 18px;
    color: #3C75BA;
}
#form
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
    background: #569AEE;
    padding: 16px;
    -webkit-border-radius: 10px;
    border: #3C75BA;
    text-align: center;
    display: none;
}
#ad
{
    font-family: verdana, sans serif;
    position: absolute;
    right: 200px;
    bottom: 10px;
    width: 160px;
    text-align: right;
    padding-right: 10px;
}
h1
{
    position: absolute;
    left: -1000px;
}
#slider_framerate
{
    margin: 40px 10px 0 10px;
    position: absolute;
    left: 50px;
    bottom: 200px;
}
#slider_gravity
{
    margin: 15px;
    position: absolute;
    left: 10px;
    bottom: 200px;
}
#slider_firework_speed
{
    margin: 15px;
    position: absolute;
    right: 10px;
    bottom: 200px;
}
#slider_fragment_spread
{
    margin: 15px;
    position: absolute;
    right: 10px;
    bottom: 50px;
}
.ui-widget-content
{
    color: #666;
}

#svg-div
{
    width: 500px;
    height: 500px;
}
*/
/* ************************************* */
/* Animations
/* ************************************* */
@-webkit-keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@-webkit-keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-moz-keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@-moz-keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-moz-keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-ms-keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@-ms-keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-ms-keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
/* ************************************* */
/* CSS
/* ************************************* */
.banner {
  background: url(../../images/HariChampa/welcome.jpg);
  background-repeat:no-repeat;
  margin:auto;
  width:90%;  
  height:800px;  
  }

/* entire container, keeps perspective */
.flip-container {
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
  margin-top: -30px;
  margin-right: auto;
  margin-left: auto;
  -webkit-perspective: 1000;
  -moz-transform: perspective(1000px);
  perspective: 1000;
  -moz-transform-style: preserve-3d;
  -webkit-animation: allmoves 10s ease-in-out 5s infinite normal;
  -moz-animation: allmoves 10s ease-in-out 5s infinite normal;
  -ms-animation: allmoves 10s ease-in-out 5s infinite normal;
  -o-animation: allmoves 10s ease-in-out 5s infinite normal;
  animation: allmoves 10s ease-in-out 5s infinite normal;
  -webkit-transform-origin: 50% -80px 0;
  -ms-transform-origin: 50% -80px 0;
  transform-origin: 50% -80px 0;
}

.flip-container .flipper .front, .flip-container.hover .flipper .front {
  -webkit-animation: flip-front 10s ease-in-out 5s infinite normal;
  -moz-animation: flip-front 10s ease-in-out 5s infinite normal;
  -ms-animation: flip-front 10s ease-in-out 5s infinite normal;
  -o-animation: flip-front 10s ease-in-out 5s infinite normal;
  animation: flip-front 10s ease-in-out 5s infinite normal;
}

.flip-container .flipper .back, .flip-container.hover .flipper .back {
  -webkit-animation: flip-back 10s ease-in-out 5s infinite normal;
  -moz-animation: flip-back 10s ease-in-out 5s infinite normal;
  -ms-animation: flip-back 10s ease-in-out 5s infinite normal;
  -o-animation: flip-back 10s ease-in-out 5s infinite normal;
  animation: flip-back 10s ease-in-out 5s infinite normal;
}

.flip-container, .front, .back {
  width: 250px;
  height: 450px;
}
/* flip speed goes here */
.flipper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
/* front pane, placed above back */
.front {
  z-index: 2;
}
/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}