@import '//fonts.googleapis.com/css?family=Lobster';
/* cyrillic */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(//fonts.gstatic.com/s/lobster/v18/MeFZ5NpSE1j8mC06Jh1miFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(//fonts.gstatic.com/s/lobster/v18/UKmFXcLnvG78k2CT5LYRfFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(//fonts.gstatic.com/s/lobster/v18/MCZn_h27nLxWmTqnbmnb3lKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(//fonts.gstatic.com/s/lobster/v18/G6-OYdAAwU5fSlE7MlBvhQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

* { outline:0; }

html {
	height:100%;
	margin:0;
	padding:0;
}

body { 
	background:#7f928a;
	background:-moz-radial-gradient(center, #7f928a, #45504b);
	background:-webkit-gradient(radial, center center, 120, center center, 800, from(#0066cc), to(#45504b));
}

a, a:visited { 
	color:#eee;
	font-weight:bold;
}

a:hover { 
	color:#66CCFF;
}

a:active {
	position:relative;
	top:1px;
}

#content { 
	text-align:center;
	width:75%;
	height:400px;
	margin:15% auto 0;
	color:#eee;
}

h1 { 
	font:60px "Lobster", serif;
	text-shadow:#333399 4px 4px 0;
}


h1 span { 
	display:inline-block;
	position:relative;
	-webkit-transition:all 0.2s ease-out;
}

h1 span:hover {
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1); 
}

.description { 
	padding:10px 0 30px;
	font:13px "Molengo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-shadow:#666 1px 1px 0;
	display:block;
}

#logo { 
	margin:0 auto;
	text-indent:-9999px;
	display:block;
	width:50px;
	height:50px;
	background:transparent url(logo.png) 0 0 no-repeat;
	opacity:0.3;
}

#logo:hover {
	opacity:1.0;
}
.char12:hover {
	top: -15px;
	-webkit-transition-duration: 0.4s;
}
.char1 { font-size:120px; position:relative; top:10px; left:-10px; }
.char2 { position:relative; top:-15px; left:-8px; }
.char3 { position:relative; top:-20px; left:-6px; }
.char4 { position:relative; top:-25px; left:-4px; }
.char5 { position:relative; top:-30px; left:-2px; }
.char6 { font-size:120px; }
.char7 { position:relative; top:-15px; left:0px; }
.char8 { position:relative; top:-20px; left:4px; }
.char9 { position:relative; top:-25px; left:6px; }
.char10 { position:relative; top:-30px; left:8px; }
.char11 { position:relative; top:-35px; left:12px; }
.char12 { position:relative; top:-40px; left:14px; }
.char13 { position:relative; top:-15px; left:16px; }
.char14 { position:relative; top:-20px; left:18px; }
.char15 { position:relative; top:-30px; left:20px; }

@media only screen and (min-device-width: 315px) and (orientation: portrait) {

	.hero span, .char12:hover{
		font-size: 11.3vmin;
		top:10vmin; left:0;
	}
	#content {
		margin: 25% auto 0;
	}
}
@media only screen and (min-device-width: 315px) and (max-device-width: 500px)  and (orientation: landscape) {
	#content {
		margin: 3% auto;
		height: 97%;
	}
	.description {
		font-size: 1vmax;
	}
}