@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

body {

	overflow-x: hidden;

}

* { padding: 0; margin: 0; }





.wt {

	color: #FFFFFF;

}



#counter {

	position: absolute;

	bottom:   20px;

	left:     20px;

	text-shadow: -1px -1px 0 #FF6, 1px -1px 0 #FF6, -1px 1px 0 #FF6, 1px 1px 0 #FF6;

	color:   #000;

}



img {

    max-width: 100%;

    height:    auto;

}



#images {

    position: fixed;

    top:      20px;

    left:     20px;

    opacity: 0.6;

}



#tardis {

    position: absolute;

    top:      400px;

    right:     20px;

}



#dstar {

    position: absolute;

    top:      20px;

	left:     20px;

}



p#start {

	position: relative;

	width:       16em;

	font-size:   250%;

	font-weight: 600;

	margin: 20% auto;

	color: #4ee;

	opacity: 0;

	z-index: 1;

	-webkit-animation: intro 2.5s ease-out;

	-moz-animation:    intro 2.5s ease-out;

	-ms-animation:     intro 2.5s ease-out;

	-o-animation:      intro 2.5s ease-out;

	 animation:        intro 2.5s ease-out;

}

@-webkit-keyframes intro {

	0%   { opacity: 1; }

	90%  { opacity: 1; }

	100% { opacity: 0; }

}

@-moz-keyframes intro {

	0%   { opacity: 1; }

	90%  { opacity: 1; }

	100% { opacity: 0; }

}

@-ms-keyframes intro {

	0%   { opacity: 1; }

	90%  { opacity: 1; }

	100% { opacity: 0; }

}

@-o-keyframes intro {

	0%   { opacity: 1; }

	90%  { opacity: 1; }

	100% { opacity: 0; }

}

@keyframes intro {

	0%   { opacity: 1; }

	90%  { opacity: 1; }

	100% { opacity: 0; }

}



@-webkit-keyframes logo {

	0%   { -webkit-transform: scale(1); opacity: 1; }

	50%  { opacity: 1; }

	100% { -webkit-transform: scale(0.1); opacity: 0; }

}

@-moz-keyframes logo {

	0%   { -moz-transform: scale(1); opacity: 1; }

	50%  { opacity: 1; }

	100% { -moz-transform: scale(0.1); opacity: 0; }

}

@-ms-keyframes logo {

	0%   { -ms-transform: scale(1); opacity: 1; }

	50%  { opacity: 1; }

	100% { -ms-transform: scale(0.1); opacity: 0; }

}

@-o-keyframes logo {

	0%   { -o-transform: scale(1); opacity: 1; }

	50%  { opacity: 1; }

	100% { -o-transform: scale(0.1); opacity: 0; }

}

@keyframes logo {

	0%   { transform: scale(1); opacity: 1; }

	50%  { opacity: 1; }

	100% { transform: scale(0.1); opacity: 0; }

}



/* the interesting 3D scrolling stuff */

#titles {

	position: absolute;

	width: 18em;

	height: 50em;

	bottom: 0;

	left: 50%;

	margin-left: -9em;

	font-size: 350%;

	text-align: justify;

	overflow: hidden;

	-webkit-transform-origin: 50% 100%;

	-moz-transform-origin:    50% 100%;

	-ms-transform-origin:     50% 100%;

	-o-transform-origin:      50% 100%;

	 transform-origin:        50% 100%;

	-webkit-transform: perspective(300px) rotateX(25deg);

	-moz-transform:    perspective(300px) rotateX(25deg);

	-ms-transform:     perspective(300px) rotateX(25deg);

	-o-transform:      perspective(300px) rotateX(25deg);

	 transform:        perspective(300px) rotateX(25deg);

}



#titles:after {

	position: absolute;

	content: ' ';

	left: 0;

	right: 0;

	top: 0;

	bottom: 60%;

	background-image: transparent;

	pointer-events:    none;

}



#titles p {

	text-align: justify;

	margin: 0.8em 0;

}



#titles p.center {

	text-align: center;

}



#titles a {

	color: #ff6;

	text-decoration: underline;

}



#titlecontent {

	position: absolute;

	top: 100%;

	-webkit-animation: scroll 120s linear 4s infinite;

	-moz-animation:    scroll 120s linear 4s infinite;

	-ms-animation:     scroll 120s linear 4s infinite;

	-o-animation:      scroll 120s linear 4s infinite;

	 animation:        scroll 120s linear 4s infinite;

}



/* animation */

@-webkit-keyframes scroll {

	0%   { top:  100%; }

	100% { top: -200%; }

}

@-moz-keyframes scroll {

	0%   { top:  100%; }

	100% { top: -200%; }

}

@-ms-keyframes scroll {

	0%   { top:  100%; }

	100% { top: -200%; }

}

@-o-keyframes scroll {

	0%   { top:  100%; }

	100% { top: -200%; }

}

@keyframes scroll {

	0%   { top:  100%; }

	100% { top: -200%; }

}











.ball {

  display: inline-block;

  width: 100%;

  height: 100%;

  border-radius: 100%;

  position: relative;

  background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); }

  .ball:before {

    content: (logo3.gif);

    position: absolute;

    top: 1%;

    left: 5%;

    width: 90%;

    height: 90%;

    border-radius: 100%;

    background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);

    -webkit-filter: blur(5px);

    filter: blur(5px);

    z-index: 2; }

  .ball:after {

    content: url(logo3.gif);

    position: absolute;

    display: none;

    top: 5%;

    left: 10%;

    width: 80%;

    height: 80%;

    border-radius: 100%;

    -webkit-filter: blur(1px);

    filter: blur(1px);

    z-index: 2;

    -webkit-transform: rotateZ(-30deg);

    transform: rotateZ(-30deg); }

  .ball .shadow {

    position: absolute;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);

    -webkit-transform: rotateX(90deg) translateZ(-160px);

    transform: rotateX(90deg) translateZ(-160px);

    z-index: 1; }

  .ball.plain {

    background: black; }

    .ball.plain:before, .ball.plain:after {

      display: none; }

  .ball.bubble {

    background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));

    -webkit-animation: bubble-anim 2s ease-out infinite;

    animation: bubble-anim 2s ease-out infinite; }

    .ball.bubble:before {

      -webkit-filter: blur(0);

      filter: blur(0);

      height: 80%;

      width: 40%;

      background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);

      -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);

      transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); }

    .ball.bubble:after {

      display: block;

      background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%); }



.stage {

  width: 240px;

  height: 240px;

  display: inline-block;

  margin: 20px;

  -webkit-perspective: 1200px;

  -moz-perspective: 1200px;

  -ms-perspective: 1200px;

  -o-perspective: 1200px;

  perspective: 1200px;

  -webkit-perspective-origin: 50% 50%;

  -moz-perspective-origin: 50% 50%;

  -ms-perspective-origin: 50% 50%;

  -o-perspective-origin: 50% 50%;

  perspective-origin: 50% 50%;

}



@-webkit-keyframes bubble-anim {

  0% {

    -webkit-transform: scale(1);

    transform: scale(1); }



  20% {

    -webkit-transform: scaleY(0.95) scaleX(1.05);

    transform: scaleY(0.95) scaleX(1.05); }



  48% {

    -webkit-transform: scaleY(1.1) scaleX(0.9);

    transform: scaleY(1.1) scaleX(0.9); }



  68% {

    -webkit-transform: scaleY(0.98) scaleX(1.02);

    transform: scaleY(0.98) scaleX(1.02); }



  80% {

    -webkit-transform: scaleY(1.02) scaleX(0.98);

    transform: scaleY(1.02) scaleX(0.98); }



  97%, 100% {

    -webkit-transform: scale(1);

    transform: scale(1); } }



@keyframes bubble-anim {

  0% {

    -webkit-transform: scale(1);

    transform: scale(1); }



  20% {

    -webkit-transform: scaleY(0.95) scaleX(1.05);

    transform: scaleY(0.95) scaleX(1.05); }



  48% {

    -webkit-transform: scaleY(1.1) scaleX(0.9);

    transform: scaleY(1.1) scaleX(0.9); }



  68% {

    -webkit-transform: scaleY(0.98) scaleX(1.02);

    transform: scaleY(0.98) scaleX(1.02); }



  80% {

    -webkit-transform: scaleY(1.02) scaleX(0.98);

    transform: scaleY(1.02) scaleX(0.98); }



  97%, 100% {

    -webkit-transform: scale(1);

    transform: scale(1); } }