@font-face {
    font-family: 'saxmono';
    src: url('../fonts/saxmono-webfont.woff2') format('woff2'),
         url('../fonts/saxmono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bankgothic';
    src: url('../fonts/bankgothic-lt-bt-webfont.woff2') format('woff2'),
         url('../fonts/bankgothic-lt-bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #000000;
    font-family:'saxmono';
    font-weight: 300;
    font-size: 18px;
    color:#ffffff;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

 .social {
     -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
     -o-transform: scale(0.8);
     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;
 }

h1, h2 {font-family: 'bankgothic'; font-weight: 300; color: #ffffff}
h1 {font-size:35px}
h2 {font-size:30px; margin-bottom:40px}
h2.p_h3 {margin-bottom:0}
h3 {font-family:'saxmono'}

.p_h3 {font-family: 'bankgothic'!important; color:#ffffff; font-weight:400; font-size:24px}

.p_h4 {color:#ffffff; font-weight: 400; font-size: 20px}

.hyp:before{content:"- ";}
.hyp:after{content:" -";}

.centered {text-align: center;}

a {
    word-wrap: break-word;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #7b7b7b;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

.nav a{text-transform:uppercase; font-family:'bankgothic'}
.navbar-brand{font-family:'bankgothic'}

.navbar-default, .navbar-nav {background-color:#000000; border-color:transparent;}

.navbar-default .navbar-nav > li > a{color:#ffffff;}

#translate{padding:5px; margin:9px; border:solid 1px #ffffff; width:40px;}

.mt {margin-top: 40px; margin-bottom: 40px;}

.form-control {height:42px; font-size:18px; width:280px}

i {margin: 8px; color: #428bca}

#headerwrap {
	margin-top: 0px;
	text-align:center;
	width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#screenshots img{max-width:412px}

.svg-container img{width:90%}

.blur_c{width:192px; margin:15px auto; position:relative}
.blur{width:192px; height:192px; position:absolute; 
-moz-box-shadow: inset 0px 0px 10px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px 10px #000000;
-o-box-shadow: inset 0px 0px 10px 10px #000000;
box-shadow: inset 0px 0px 10px 10px #000000;
}

.cta img{display:block; margin:20px auto}
.cta img:first-of-type{margin-top:30px}
.cta img:last-of-type{margin-bottom:10px}

#features ul{text-align:left; width:80%; max-width:400px; margin:auto; margin-bottom:20px; padding:0; color:#ffffff; font-weight: 400; font-size:18px;}
#features li{margin-top:20px; list-style: none;}
#features li:before{content:""; display:block; width:10px; height:10px; position:absolute; margin-top:8px; margin-left:-20px; background:#428bca}
#features p, #subscribe p{padding:0 10px}

footer{text-align:center; padding-bottom:10px;}

#piwik_i{width:100%; border:0; height:215px;}
@media screen and (min-width: 0px) and (max-width: 360px) {#piwik_i{height:350px!important}}
@media screen and (min-width: 361px) and (max-width: 420px) {#piwik_i{height:310px!important}}
@media screen and (min-width: 421px) and (max-width: 520px) {#piwik_i{height:245px!important}}
@media screen and (min-width: 521px) and (max-width: 640px) {#piwik_i{height:225px!important}}

@media screen and (min-width: 0px) and (max-width: 412px) {.col-lg-6 img{width:90%}}

@media screen and (min-width: 0px) and (max-width:1000px) {
  h1 {margin-top:-20px;}
  .mt {margin-bottom:20px;}
}

@media screen and (min-width: 0px) and (max-width:780px) {
  .form-control {margin:auto}
}