@font-face {
  font-family: 'gill';
  src: url('../fonts/33535gillsansmt.eot');
  src: local('33535gillsansmt'), url('../fonts/33535gillsansmt.woff') format('woff'), url('../fonts/33535gillsansmt.ttf') format('truetype');
}

html {
  height: 100%;
}

body{
  font-family: gill, arial, sans-serif;
  background-color: #000000;
  padding: 0;
  margin: 0;
  text-align: center;
  height: 100%;
  position: relative;
  color: #ffffff;
  font-size: 18px;
  line-height: 120%;
}


a{
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.content{

  width: 90%;
  padding: 100px 5% 0 5%;
  text-align: left;
  position: relative;
}

.content.large{
  max-width: 810px;
}

  .content:after{
  content:"";display:block;clear:both;visibility:hidden;font-size:0;height:0
  }

img{
  display: inline-block;
}

.content a.back{
  position: absolute;
  bottom: 0;
  right: 0;
}


a:hover{
  color: #ff0000;
}

h1{
  line-height: 90%;
  font-weight: normal;
  font-size: 80px;
  white-space: normal;
  text-align: center;
}

.main-link{
  display: block;
  float: left;
  width: 100%;
  height: 150px;
  margin: 0 0 30px 0;
  text-align: center;
  font-size: 24px;
  line-height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.main-link:nth-child(3n){
  margin-right: 0;
}

.main-link span{
  position: relative;
  display: none;
}

.main-link:hover span{
  display: inline;
}

.main-link:hover{
  background: none;
}

.main-link.anzeigen{background-image: url("../img/anzeigen.gif")}
.main-link.logotypes{background-image: url("../img/logotypes.gif")}
.main-link.illustration{background-image: url("../img/illustration.gif")}
.main-link.kontakt{background-image: url("../img/kontakt.gif")}
.main-link.mail{background-image: url("../img/mail.gif")}
.main-link.person{background-image: url("../img/person.gif")}


 .main-link.anzeigen:hover, .main-link.logotypes:hover, .main-link.illustration:hover, .main-link.kontakt:hover, .main-link.mail:hover, .main-link.person:hover{
  background: none;
}



@media only screen and (min-width:768px){
  h1{
    font-size: 120px;
    white-space: nowrap;
  }

  .main-link{
    width: 30%;
    margin: 0 5% 90px 0;
  }
  .content{
    margin: auto;
    max-width: 620px;
    width: 90%;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
  }

  .main-link span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    display: none;
  }
}


.btn-play-pause{
    z-index: 9991002;
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.btn-play-pause.play{
    background-image: url(/themes/twyss/img/btn-play.png)
}

.btn-play-pause.pause{
    background-image: url(/themes/twyss/img/btn-pause.png)
}