@font-face {
    font-family: 'atari';
    src: url('../fonts/atarist8x16systemfont-webfont.eot');
    src: url('../fonts/atarist8x16systemfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/atarist8x16systemfont-webfont.svg#atari') format('svg'),
         url('../fonts/atarist8x16systemfont-webfont.woff2') format('woff2'),
         url('../fonts/atarist8x16systemfont-webfont.woff') format('woff'),
         url('../fonts/atarist8x16systemfont-webfont.ttf') format('truetype');         
    font-weight: normal;
    font-style: normal;

}

body{font-family: 'Open Sans', sans-serif;font-size:20px;line-height:30px}
img{max-width:100%}
a{color:#22ee22;text-decoration:underline;}
a:hover{color:#22ee22;text-decoration:none}
.table-responsive{margin-top:80px}
h1,h2,h3{word-wrap:break-word;}
h1{text-transform:uppercase;color:#22ee22;font-size:80px;font-weight:700;text-align:center;margin:80px 0 0 0;}
h2{text-transform:uppercase;color:#22ee22;font-size:60px;font-weight:700;text-align:center;margin:80px 0 0 0;}
h2.subtitle{color:#fff;font-size:36px;margin:0}
h2::after{content:"";background-color:#363636;width:100px;height:10px;display:block;margin:20px auto 40px auto}
.clear{clear:both;}
.center{text-align:center !important}
.center ul,.center li{list-style:none;margin:0;padding:0;word-wrap:break-word;}

.black,.white{padding-bottom:80px}
.scrollcontainer{position:relative;text-align:center}
.scrollcontainer .row{text-align:left}
.black{background:url(../images/starss.png);background-position:0 0px;color:#fff}
.black h2::after{background-color:#fff}
.black.center{text-align:center;}
.grey{background-color:#fff;text-align:center}
.white{background-color:#fff;color:#252525}
.black table th{background-color:#fff;color:#000;text-align:center}
.black table td{text-align:center}

#matrix{height:600px;margin-top:80px}

.head{margin-top:240px;margin-bottom:120px}
.title{font-family:'atari';text-transform:uppercase;color:#22ee22;font-size:100px;line-height:100px}
.title {-webkit-animation: glow .5s infinite alternate;-moz-animation: glow .5s infinite alternate;animation: glow .5s infinite alternate;}
@-webkit-keyframes glow {
    to {
        text-shadow: 0 0 15px #22ee22;
    }
}

.start{font-family:'atari';text-transform:uppercase;font-size:24px;color:#fff;margin-top:40px}
@-webkit-keyframes invader {
	from {background-position:0;}
	to {background-position:-110px}
}
@-moz-keyframes invader {
	from {background-position:0;}
	to {background-position:-110px}
}
@keyframes invader {
	from {background-position:0;}
	to {background-position:-110px}
}
.spaceall{margin-top:40px}
.spacecontainer{position:relative;height:40px;display:none}
.spacemob{
	display:block;
	width:55px;
	height:40px;
	background-image:url(../images/spaceinvader-white.svg);
	margin:0 auto;
	-webkit-animation: invader .8s steps(2, end) infinite;
	-moz-animation: invader .8s steps(2, end) infinite;
	animation: invader .8s steps(2, end) infinite;
}
.space{
	position:absolute;
	width:55px;
	height:40px;
	background-image:url(../images/spaceinvader-white.svg);
	margin:0 auto;
	-webkit-animation: invader .8s steps(2, end) infinite;
	-moz-animation: invader .8s steps(2, end) infinite;
	animation: invader .8s steps(2, end) infinite;
}


.bar{margin-top:75px}
.bounce {
  position:relative;
  margin:0 auto;
  bottom:0;
  height:18px;
  width:30px;
  background:url(../images/arrow.svg);
  -webkit-animation:bounce 1s infinite;
  -moz-animation:bounce 1s infinite;
  animation:bounce 1s infinite;
}
@-webkit-keyframes bounce {
  0% {bottom:5px;}
  25%, 75% {bottom:15px;}
  50% {bottom:20px;}
  100% {bottom:0;}
}

.play{text-indent:-9999px;background:url(../images/mic.svg); display:inline-block;width:60px;height:60px}
.play:hover{cursor:pointer}

.block{background:url(../images/block.svg) #000;height:10px;width:100%}
.block.top{}
.block.bottom{}
.grey{padding:40px 0}
.grey h3{margin:0;font-size:36px;text-transform:uppercase;color:#22ee22;font-weight:700;margin-bottom:30px}
.grey ul,.grey ul li{list-style:none;margin:0;padding:0;}
.grey ul li{border-top:1px solid #f0f0f0}
.grey li a{background-color:#fff;color:#252525;text-decoration:none;padding:10px 0;display:block;
	-webkit-transition: background-color .2s ease-out, color .2s ease-out;
	-moz-transition: background-color .2s ease-out, color .2s ease-out;
	transition: background-color .2s ease-out, color .2s ease-out;}
.grey li a:hover{background-color:#22ee22;color:#fff}

.image{position:relative;text-align:center}
.image.hand,.image.pwnage,.image.pug,.image.leet,.image.caution{background-size:cover;background-attachment:fixed;background-position:center;background-repeat:no-repeat}
.hand{background:url(../images/hand.jpg);height:400px;}
.pwnage{background:url(../images/pwnage.jpg);height:400px;}
.pug{background:url(../images/pug-vs-cat.jpg);height:400px;}
.leet{background:url(../images/go-leet.jpg);height:400px}
.caution{background:url(../images/caution.png);height:400px}

.column{-webkit-columns:auto 1;-moz-columns:auto 1;columns:auto 1;}
div.column{margin-top:40px}
div.column p{margin-bottom:30px}
.column h3{font-weight:700;margin:0 0 10px 0}

.scroll{position:absolute;text-align:center;width:60px;height:60px;;margin-left:-30px;left:50%}
.scroll.top{top:-30px;}
.scroll.bottom{bottom:-30px}
.scroll.cblack{background:url(../images/scroll-black.svg) no-repeat scroll center top;}
.scroll.cwhite{background:url(../images/scroll-white.svg) no-repeat scroll center top;}

.alphabet{margin-top:80px;font-weight:700}
.alphabet .letter{text-align:center;margin-bottom:40px}
.alphabet .row{margin-bottom:40px}
.alphabet b{background:url(../images/square-circle.svg) no-repeat center center;width:100px;height:100px;display:inline-block;color:#fff;text-align:center;vertical-align:middle;font-size:48px;padding-top:33px;margin-bottom:20px}

.table-responsive div{text-align:center;margin-bottom:40px}
input.search{padding:10px;width:500px;border:1px solid #ddd;font-weight:400}
.form-group{margin-top:10px}
.form-group label{line-height:100%;font-size:18px}
#translator{margin-top:40px}

textarea{font-size:18px !important}
.vocabulary td:nth-child(3),.vocabulary th:nth-child(3){display:none;}
.image{background:none;height:auto;}
.gh{font-size:10px;text-transform:uppercase;font-weight:700}
.gh img{width:60px}


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.vocabulary td:nth-child(3),.vocabulary th:nth-child(3){display:table-cell;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.float{position:fixed;z-index:1;top:0;padding:0;text-align:center;width:100%;display:flex;box-shadow:0 0 10px #999}
	.float h3{display:none}
	.float ul{margin:0 auto}
	.float li{float:left;}
	.float li a{padding:10px;font-size:12px;border-bottom:3px solid #fff;-webkit-transition: .5s border-bottom ease-out;-moz-transition: .5s border-bottom ease-out;transition: .5s border-bottom ease-out;}
	.float li a:hover{border-bottom:3px solid #22ee22;background-color:#fff;color:#252525}
	.float li.active a{border-bottom:3px solid #22ee22;}
	.column{-webkit-columns:auto 2;-moz-columns:auto 2;columns:auto 2;}
	.spacemob{display:none}
	.spacecontainer{display:block}
}

@media (min-width:1080px){
	.image img{display:none;}
	.image{position:relative;text-align:center;}
	.image.hand,.image.pwnage,.image.pug,.image.leet,.image.caution{background-size:cover;background-attachment:fixed;background-position:center;}
	.hand{background:url(../images/hand.jpg);height:900px !important;}
	.pwnage{background:url(../images/pwnage.jpg);height:900px !important;}
	.pug{background:url(../images/pug-vs-cat.jpg);height:900px !important;}
	.leet{background:url(../images/go-leet.jpg);height:900px !important}
	.caution{background:url(../images/caution.png);height:900px !important}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.float li a{font-size:14px}
}

@media (min-width: 1400px) {
	.float li a{font-size:18px}	
}