html, body {
	width:100%; 
	height:100%; 
	padding:0px; 
	margin:0px;
	overflow: hidden;
	background: #191d1e; /* Old browsers */
	background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
	background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-attachment: fixed
}

img {
  position: absolute;	
  top: 10%;
  padding-left: 33%;
  display: block;
  max-width: 100%;
  max-height: 400px;
}

h1 {
  font-family: "Open Sans", -apple-syxxxxxxxxstem, "Segoe UI", sans-serif;
  font-size: 50px;
  font-weight: bold;
  color: #ffffff;
  box-sizing: border-box;
  text-align: center;
  margin-top: 50%;
  position: relative;
}

#projector {
  position: absolute; 
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
} 

.center-div {
	width:580px;
    height:500px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: -290px;
    margin-top:  -187px;
}

#preloaderDiv
{
	position:absolute;
	left:50%;
    top:50%;
    margin-left: -27px;
    margin-top:  -27px;
}

#logo{
	opacity:0;
    filter: alpha(opacity=0);
}

#date2014
{
	position:absolute;
	padding-left: 210px;
	padding-top:15px;
	opacity:0;
	top:303px;
	left:0;
    filter: alpha(opacity=0);
}

.dots {
  display: inline-flex;
}
.dots--animate .dot.z {
  -webkit-animation: scale 0.8s 0.2s forwards;
          animation: scale 0.8s 0.2s forwards;
}
.dots--animate .dot.f, .dots--animate .dot.s {
  -webkit-animation: right 0.5s forwards;
          animation: right 0.5s forwards;
}
.dots--animate .dot.l {
  -webkit-animation: rightDown 0.4s 0.1s forwards linear, drop 2s 0.4s forwards linear;
          animation: rightDown 0.4s 0.1s forwards linear, drop 2s 0.4s forwards linear;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 10px;
  position: relative;
  margin-left: 6px;
}
.dot.z {
  position: absolute;
  transform: scale(0);
}
@-webkit-keyframes scale {
  100% {
    transform: scale(1);
  }
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}
.dot.f, .dot.s {
  transform: translateX(0px);
}
@-webkit-keyframes right {
  100% {
    transform: translateX(16px);
  }
}
@keyframes right {
  100% {
    transform: translateX(16px);
  }
}
.dot.t {
  background: transparent;
}
.dot .l {
  margin-left: 0;
  position: absolute;
  top: 0;
  left: 0;
}
@-webkit-keyframes rightDown {
  50% {
    top: 4px;
    left: 16px;
  }
  100% {
    top: 12px;
    left: 24px;
  }
}
@keyframes rightDown {
  50% {
    top: 4px;
    left: 16px;
  }
  100% {
    top: 12px;
    left: 24px;
  }
}
@-webkit-keyframes drop {
  100% {
    transform: translate(70px, calc(35px + (100vh/2)));
  }
}
@keyframes drop {
  100% {
    transform: translate(70px, calc(35px + (100vh/2)));
  }
}