@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {font-family: Roboto, Helvectica, Arial;background: #0b0b0b;color:#fff;text-transform: uppercase;font-weight: 300;}

#top {top:0;position: absolute;width: 100%;text-align: center;margin-top:30px;}
#left {float:left;position: absolute;width:20%;height:100%;text-align: left;}
#center {top:45%;width:100%;text-align: center;float:left;position: absolute;}
#center .info {text-transform: none;font-size:20px;}
#right {right:0;float:right;position: absolute;width:20%;height:100%;text-align: right;}
#bottom {bottom: 10px;position: absolute;text-align: center;width:100%;margin-bottom: 20px;}
#bottom-mob {bottom: 10px;position: absolute;text-align: center;width:100%;margin-bottom: 20px;}


h1 {font-size: 5.5vw;font-weight: 700;font-family: Montserrat;}
h1 span {font-weight: 100;}
.righter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(90deg);
  right:-40px;
  transform-origin: right top 1;
  float:right;white-space:nowrap;}

.lefter {
  position: relative;
  top: 50%;
  left:-40px;
  text-align: left;
  transform: translateY(-50%);
  transform: rotate(-90deg);
  transform-origin: left top 1;
  float:left;white-space:nowrap;}
  
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
	opacity:0;  
	-webkit-animation:fadeIn ease-in 1;  
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
z-index:100;
}
 
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
font-size: 12px;
letter-spacing: 5px;
z-index:100;
}

.fade-in.three {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
font-size: 12px;
letter-spacing: 5px;
z-index:100;
}

.four {
font-size: 12px;
letter-spacing: 5px;
z-index:100;
}
.mob {display: none;}
#bottom-mob {display: none;}
#bubble-mob {display: none;}
.social {line-height: 3;}
a {color: #fff;text-decoration: none;}
.footer a:hover {color:#42ced7;}

	@media only screen and (max-device-width: 480px) {
		.fade-in.two {display:none;}
		h1 {font-size:30px;}
		#center {top:36%;}
		#bottom {width:230px;text-align: center;margin-left: auto;margin-right: auto;position:fixed;margin-left:75px;}
		.footer {font-size:10px;margin-left: auto;margin-right:auto;line-height: 1.9;}
		.mob {display: block;font-size:10px;line-height: 1.5;letter-spacing: 1px;}
		#bottom-mob {display:block;font-size:10px;line-height: 2;width:230px;text-align: center;margin-left: auto;margin-right: auto;position:fixed;margin-left:75px;display: none;}
		.bubble {display:none;}
		#bubble-mob {display: block;}
		.info {line-height: 1.2;}
		}
		
		
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
  z-index: 1;
}

.stars {
  background:#000 url(stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(clouds.png) repeat top center;
    z-index:3;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}

#bubble-mob {
text-align: center;
margin-left: auto;margin-right: auto;
width: 110px;
height: 27px;
padding: 0px;
background: transparent;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#fff;
border: 2px solid #fff;
padding-top:8px;	
}

.bubble 
{
text-align: center;
position: absolute;
right:25%;
top:-60px;
width: 110px;
height: 27px;
padding: 0px;
background: transparent;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#fff;
border: 2px solid #fff;
padding-top:8px;
}
.bubble span, #bubble-mob span {font-weight: 800;font-size:10px;}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 9px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 19px;
}