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



* { padding: 0; margin: 0; }



html { 

    background: url(background.jpg) no-repeat center center fixed; 

   -webkit-background-size: cover;

   -moz-background-size:    cover;

   -o-background-size:      cover;

    background-size:        cover;

  	background-color:       #000;

}



body, html {

    width:  100%;

    height: 100%;

    font-family: "Droid Sans", arial, verdana, sans-serif;

	font-weight: 700;

	color:       #FF6;

	overflow:    hidden;

}



.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: relative;

}



#tardis {

    position: absolute;

    top:      400px;

    right:     20px;

}



#dstar {

    position: absolute;

  width: 300px;

  height: 300px;

  display: inline-block;

  margin: 20px;

  -webkit-perspective: 1200px;

  -moz-perspective: 1200px;

  -ms-perspective: 1200px;

  -o-perspective: 1200px;

  perspective: 1200px;

}



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-animation: move-map 30s infinite linear;

  -moz-animation: move-map 30s infinite linear;

  -o-animation: move-map 30s infinite linear;

  -ms-animation: move-map 30s infinite linear;

  animation: move-map 30s infinite linear;

}

@-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; }

}



h1 {

	position: absolute;

	width: 2.6em;

	left:  50%;

	top:   25%;

	font-size: 10em;

	text-align: center;

	margin-left: -1.3em;

	line-height: 0.8em;

	letter-spacing: -0.05em;

	color: #000;

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

	opacity: 0;

	z-index: 1;

	-webkit-animation: logo 5s ease-out 2.5s;

	-moz-animation:    logo 5s ease-out 2.5s;

	-ms-animation:     logo 5s ease-out 2.5s;

	-o-animation:      logo 5s ease-out 2.5s;

	 animation:        logo 5s ease-out 2.5s;

}



h1 sub {

	display:        block;

	font-size:      0.3em;

	letter-spacing: 0;

	line-height:    0.8em;

}



@-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: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);

	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);

	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);

	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);

	background-image:  linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);

	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%;

  margin: 0;

  border-radius: 50%;

  position: relative;

  -webkit-transform-style: preserve-3d;

  background: url('https://hop.ie/balls/images/world-map-one-color.png') repeat-x;

  opacity: 0.7;

  background-size: auto 100%;

  -webkit-animation: move-map 30s infinite linear;

  -moz-animation: move-map 30s infinite linear;

  -o-animation: move-map 30s infinite linear;

  -ms-animation: move-map 30s infinite linear;

  animation: move-map 30s infinite linear;

}



.ball:before {

  content: "";

  position: absolute;

  top: 0%;

  left: 0%;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;

  z-index: 2;

}



.ball:after {

  content: "";

  position: absolute;

  border-radius: 50%;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  -webkit-filter: blur(0);

  opacity: 0.3;

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

}



.ball .shadow {

  position: absolute;

  width: 100%;

  height: 100%;

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

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

  -moz-transform: rotateX(90deg) translateZ(-150px);

  -ms-transform: rotateX(90deg) translateZ(-150px);

  -o-transform: rotateX(90deg) translateZ(-150px);

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

  z-index: -1;

}

body {

  width: auto;

  background: transparent;

}



.stage {

  width: 300px;

  height: 300px;

  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%;

}



@-moz-keyframes move-map {

  0% {

    background-position: -849px 0; }



  100% {

    background-position: 0 0; } }



@-webkit-keyframes move-map {

  0% {

    background-position: 0 0; }

  100% {

    background-position: -849px 0; }

}





@-o-keyframes move-map {

  0% {

    background-position: -849px 0; }



  100% {

    background-position: 0 0; } }



@-ms-keyframes move-map {

  0% {

    background-position: -849px 0; }



  100% {

    background-position: 0 0; } }



@keyframes move-map {

  0% {

    background-position: -849px 0; }



  100% {

    background-position: 0 0; } }