html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center; }

body {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../img/header-background.jpg");
  text-align: center; }
  @media screen and (min-width: 1400px) {
    body {
      background-attachment: fixed; } }

div {
  padding-top: 20px;
  padding-bottom: 0px; }

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif; }

h1 {
  color: #1dbbea;
  font-size: 1.6rem; }

h2 {
  font-size: 1.3em;
  font-weight: 650; }

h1.tetris::before {
  background-image: url("../img/tetris1.png");
  background-size: 30px 20px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 25px;
  content: " "; }

h1.tetris2::before {
  background-image: url("../img/tetris2.png"); }

h1.tetris3::before {
  background-image: url("../img/tetris3.png"); }

div#header {
  min-height: 100%;
  padding: 0 30px;
  background: transparent; }
  @media screen and (max-width: 786px) {
    div#header {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("../img/header-background.jpg");
      text-align: center; } }
  @media screen and (max-width: 786px) {
    div#header {
      min-height: 0; } }
  div#header div#distance {
    width: 100%;
    height: 50px;
    display: none; }
    @media screen and (min-width: 1080px) {
      div#header div#distance {
        display: block; } }
  div#header div#logo-wrapper {
    width: 1040px;
    margin: 0 auto;
    position: relative; }
    @media screen and (max-width: 1079px) {
      div#header div#logo-wrapper {
        width: 100%; } }
    @media screen and (min-width: 1080px) {
      div#header div#logo-wrapper {
        width: 1040px; } }
    div#header div#logo-wrapper svg {
      margin-bottom: 3em; }
      @media screen and (max-width: 103px) {
        div#header div#logo-wrapper svg {
          height: 83px; } }
      @media screen and (min-width: 104px) {
        div#header div#logo-wrapper svg {
          height: 83px; } }
      @media screen and (min-width: 208px) {
        div#header div#logo-wrapper svg {
          height: 166px; } }
      @media screen and (min-width: 312px) {
        div#header div#logo-wrapper svg {
          height: 249px; } }
      @media screen and (min-width: 416px) {
        div#header div#logo-wrapper svg {
          height: 332px; } }
      @media screen and (min-width: 520px) {
        div#header div#logo-wrapper svg {
          height: 415px; } }
      @media screen and (min-width: 624px) {
        div#header div#logo-wrapper svg {
          height: 498px; } }
      @media screen and (min-width: 728px) {
        div#header div#logo-wrapper svg {
          height: 581px; } }
      @media screen and (min-width: 832px) {
        div#header div#logo-wrapper svg {
          height: 664px; } }
      @media screen and (min-width: 936px) {
        div#header div#logo-wrapper svg {
          height: 747px; } }
      @media screen and (min-width: 1040px) {
        div#header div#logo-wrapper svg {
          height: 830px; } }
      @media screen and (max-width: 1079px) {
        div#header div#logo-wrapper svg {
          width: 90%; } }
      @media screen and (min-width: 1080px) {
        div#header div#logo-wrapper svg {
          width: 1040px; } }
    div#header div#logo-wrapper text {
      text-anchor: middle; }
    div#header div#logo-wrapper text.left-anchored {
      text-anchor: start; }
    div#header div#logo-wrapper #tetris1 rect {
      fill: #008fd0; }
    div#header div#logo-wrapper #tetris1 a:hover rect {
      fill: #0086c4; }
    div#header div#logo-wrapper #tetris1 .title {
      font-weight: bold; }
    div#header div#logo-wrapper #tetris1 a .title {
      font-weight: normal; }
    div#header div#logo-wrapper #tetris2 rect {
      fill: #1dbbea; }
    div#header div#logo-wrapper #tetris2 a:hover rect {
      fill: #1bb0de; }
    div#header div#logo-wrapper #tetris3 rect {
      fill: #1dbbea; }
    div#header div#logo-wrapper #tetris3 a:hover rect {
      fill: #1bb0de; }
    div#header div#logo-wrapper #tetris4 rect {
      fill: #dc342c; }
    div#header div#logo-wrapper #tetris4 a:hover rect {
      fill: #cf3229; }
    div#header div#logo-wrapper #tetris5 rect {
      fill: #008fd0; }
    div#header div#logo-wrapper #tetris5 text {
      font-size: 177px;
      font-weight: 900; }
    div#header div#logo-wrapper .tetris {
      position: absolute;
      padding: 0;
      color: #FFFFFF; }
      div#header div#logo-wrapper .tetris a {
        cursor: pointer; }
      div#header div#logo-wrapper .tetris a, div#header div#logo-wrapper .tetris a:active, div#header div#logo-wrapper .tetris a:hover, div#header div#logo-wrapper .tetris a:visited {
        color: #FFFFFF; }
      div#header div#logo-wrapper .tetris text {
        fill: #FFFFFF; }
      div#header div#logo-wrapper .tetris .title {
        font-size: 2rem;
        margin-bottom: 0; }
      div#header div#logo-wrapper .tetris .subtitle {
        font-size: 1.2rem; }

.container {
  text-align: center; }

.row {
  margin: 0;
  padding: 0; }

.content-wrapper {
  background: #FFFFFF; }
  @media screen and (min-width: 786px) {
    .content-wrapper {
      background: rgba(255, 255, 255, 0.95); } }

.job-position {
  padding-top: 58px;
  padding-bottom: 20px; }
  .job-position h2 {
    margin-top: 3rem;
    font-size: 2rem;
    font-weight: normal; }
  .job-position h3 {
    margin-top: 2rem;
    font-size: 1.7rem;
    font-weight: bold; }
  .job-position ul {
    padding: 0;
    margin: 0;
    margin: 0 auto;
    margin-bottom: 20px; }
  .job-position ul li {
    list-style: none;
    padding-bottom: 2px; }
  .job-position p {
    max-width: 400px;
    margin: 0 auto; }

.job-position.iOS {
  padding-top: 36px; }

.iOS {
  background-color: #1dbbea;
  color: #FFFFFF; }

.dotNet {
  background-color: #dc342c;
  color: #FFFFFF; }

.QA {
  background-color: #008fd0;
  color: #FFFFFF; }

.job-benefit h2::before {
  background-image: url("../img/tetris4.png");
  background-size: 10px 15px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 10px;
  content: " "; }
@media screen and (min-width: 786px) {
  .job-benefit {
    padding-top: 30px; } }

#work-for-us-section {
  padding-bottom: 20px; }

div.row.contact {
  min-height: 100%;
  background-color: #FFFFFF; }
  @media screen and (max-width: 786px) {
    div.row.contact {
      min-height: 0; } }

#contact {
  background-color: #dc342c;
  color: #FFFFFF;
  padding-bottom: 250px;
  background-image: url("../img/contact-bg.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  text-align: left;
  padding-left: 3rem;
  padding-top: 3rem;
  padding-right: 0; }
  @media screen and (max-width: 400px) {
    #contact {
      padding-left: 0; } }
  #contact a, #contact a:hover, #contact a:active, #contact a:visited {
    color: #FFFFFF; }
  #contact h1 {
    color: #FFFFFF;
    margin-bottom: 40px; }
    @media screen and (max-width: 400px) {
      #contact h1 {
        text-align: center;
        margin-bottom: 20px; } }
  #contact div {
    padding: 0; }
  #contact .item-wrapper {
    margin-top: 20px; }
    @media screen and (min-width: 992px) {
      #contact .item-wrapper .train {
        font-size: 80%; } }
    @media screen and (min-width: 1200px) {
      #contact .item-wrapper .train {
        font-size: 100%; } }
  #contact .image-wrapper {
    width: 35px;
    text-align: center;
    float: left; }
    @media screen and (max-width: 400px) {
      #contact .image-wrapper {
        width: 100%;
        margin-top: 10px; } }
    @media screen and (min-width: 400px) {
      #contact .image-wrapper {
        height: 40px; } }
  @media screen and (min-width: 400px) {
    #contact .envelop {
      padding-top: 5px; } }
  #contact .info-wrapper {
    float: left;
    padding-top: 7px;
    margin-left: 30px; }
    @media screen and (max-width: 400px) {
      #contact .info-wrapper {
        width: 100%;
        text-align: center;
        margin-left: 0; } }

#map {
  padding: 0; }
  #map iframe {
    width: 100%;
    height: 100%; }

/*# sourceMappingURL=style.css.map */