@font-face {
  font-family: 'Armata';
  src: url("fonts/Armata-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body { 
  font: 400 1em/1.5 "Roboto";
  background: #fff; 
  color: #999; 
  text-align: center; 
  margin: 0 
}

.container {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}

.title {
  margin: 10px 0;
  text-transform: uppercase;
  letter-spacing: .5em;
  display: inline-block;
  border-width: 4px 0;
  padding: 1.5em 20px;
  width: 1000px;
  border-bottom: solid 1px #dbdbdb;
}

.title span {
  font: 100 3em/1 "Armata", sans-serif;
  letter-spacing: 0;
  display: block;
  margin: 0 auto;
  text-align: left;
}

.title .subtitle {
  float: left;
  font-size:10px;
}

.title .subtitle a {
  color: #999;
}

span.main-title {
  font-family: 'Dosis';
}

.apps {
  padding: 0 20px;
}

.app {
  margin: 20px 0;
  float: left;
}

.app:hover {
  background: #f3f3f3;
  border-radius: 30px;
}

.app:hover .links{
  display: block!important;
}

.app .texts {
  height: 128px;
  float: left;
  margin-left: 40px;
  width: 615px;
  margin: 25px 30px 0 30px;
}

.app-title {
  font: 400 1em/1.5 "Roboto";
  font-size: 30px;
  color: black;
  text-align: left;
  width: 100%;
  letter-spacing: 4px;
}

.app-text {
  font-family: "Roboto";
  font-weight: 100;
  text-align: left;
  color: #6b6969;
}

.app .screenshot {
  width: 250px;
  height: 250px;
  float: left;
  border-radius: 20px;
}

.app .icon {
  width: 64px;
  height: 64px;
  float: left;
  margin-left: -32px;
  margin-top: 170px;
}

.app:nth-child(even) .screenshot,
.app:nth-child(even) .icon,
.app:nth-child(even) .text {
  float:right;
}

.app:nth-child(even) .icon {
  margin-right: -32px;
}

.nomlog .screenshot {
  background: url(images/nomlog_screen.png) no-repeat;
}
.nomlog .icon {
  background: url(images/nomlog_icon.png) no-repeat;
}

.misbiit .screenshot {
  background: url(images/misbiit_screen.png) no-repeat;
}
.misbiit .icon {
  background: url(images/misbiit_icon.png) no-repeat;
}

.fruityfingers .screenshot {
  background: url(images/fruityfingers_screen.png) no-repeat;
}
.fruityfingers .icon {
  background: url(images/fruityfingers_icon.png) no-repeat;
  border: 1px solid #fdfdfd;
  border-radius: 10px;
}

.triggerreflex .screenshot {
  background: url(images/triggerreflex_screen.png) no-repeat;
}
.triggerreflex .icon {
  background: url(images/triggerreflex_icon.png) no-repeat;
  border: 1px solid #fdfdfd;
  border-radius: 10px;
}

.presidendijooks .screenshot {
  background: url(images/presidendijooks_screen.png) no-repeat;
}
.presidendijooks .icon {
  background: url(images/presidendijooks_icon.png) no-repeat;
  border: 1px solid #fdfdfd;
  border-radius: 10px;
}

/* Small width */
@media (max-width: 1002px) {
  .container, .container .title {
    width: 98%;
    padding: 0 1%;
  }

  .container .title {
    padding: 0;
  }

  .app .screenshot, .app .texts {
    display: table-cell;
    float: none;
  }

  .app .screenshot {
    width: 250px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -125px;
  }

  .app .icon {
    position: absolute;
    left: 50%;
    margin-left: -157px;
  }

  .app {
    padding: 20px;
  }

  .app .texts {
    width: auto;
    padding-top: 280px;
  }
}