html, body { height: 100%; background: #FFFFFF;}
body { width: 100%; padding: 0; margin: 0; overflow-x: hidden; font-family: 'Shapiro'; font-size: 2em; color: #dbca4a; }

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

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

#content { overflow:auto; overflow-x: hidden;}

a { color: #000; text-decoration: none; border-bottom: 2px solid #000; }
a:hover { color: #DCCA4A; border-bottom-color: #DCCA4A; }
p { color: #000; font-size: 0.75em; padding: 1em; vertical-align: middle; }

section { width: 33.3333%; height: 33.3333vw; float: left; text-align: center; vertical-align: middle; overflow: hidden; position: relative; -webkit-animation: bounceInDown 1s; }

.one { background-color: #FFFFFF; }
.two { background-color: #FFFFFF; }
.three { background-color: #FFFFFF; }
.four { background-color: #FFFFFF; }
.five { background-color: #FFFFFF; }
.six { background-color: #FFFFFF; }
.seven { background-color: #FFFFFF; }
.eight { background-color: #FFFFFF; }
.nine { background-color: #FFFFFF; }
.ten { background-color: #FFFFFF; }

.freim { background: #D32C2C; }
.freim a { color: #FFF; }

.pone { background: url('img/restless/FB_Profiilipilt2.jpg') no-repeat; background-size: 100% 100%; }
.ptwo { background: url('img/restless/jonas3.png') no-repeat; background-size: 100% 100%; }
.pthree { background: url('img/restless/marie3.png') no-repeat; background-size: 100% 100%; }
.pfour { background: url('img/restless/jan3.png') no-repeat; background-size: 100% 100%; }

.ione {
  background-image: url('img/restless/falogo.png');
  background-position: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ithree {
  background-image: url('img/');
  background-position: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ieleven {
  background-image: url('img/restless/taust7.png');
  background-position: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ieight {
  background-image: url('img/restless/taust3.png');
  background-position: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.iseven {
  background-image: url('img/');
  background-position: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}



.ifour {
  background-image: url('img/');
  background-position: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ifive {
  background-image: url('img/restless/taust.png');
  background-position: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  }
.inine {
    background-image: url('img/restless/taust4.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: 100% 100%;
   }

   .iten {
       background-image: url('img/');
       background-position: right;
       background-repeat: no-repeat;
       background-size: 100% 100%;
      }
.name { height: 100%; width: 100%; background: #000; opacity: 0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out;  -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
.name:hover { opacity: 1; }

.entry {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  height: auto;
}

.name .entry { top: 45%; }

.logo {
  background-color: #FFFFFF;
}

.logo img,
.obsession img {
  max-width: 100%;
}

/*.logo img {
  position: relative;
  top: 10%;
  height: 550px;
  margin-top: -75px;
}

.obsession img {
  position: relative;
  top: 10%;
  height: 550px;
  margin-top: -75px;
}*/

.obsession a, .logo a { border-bottom: none; }

iframe { width: 100%; height: 100%; }

.randomer {
  position: absolute;
  cursor: move;
}

.bit-events {
  font-size: 14pt;
}

.tekstikast {
  height: 100%;
  width: 100%;
  font-size: 1em;
  display: table;
}

.tekstikast p { display: table-cell; vertical-align: middle; }

#bit-widget-0 { width: 90%; margin: 10px auto; }

.bit-header-overflow-fix, .bit-rsvp, .bit-description-links { display: none; }
.bit-track-artist-header { border-top: none; border-bottom: none; }

.contact { font-size: 0.6em; background: #D32C2C; }
.contact a { color: #FFF; }
.instagram { background: #FFF; }

.link-overlay {
  position: absolute;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
}

.instagram iframe {
  z-index: -1;
}

@media (max-width: 1550px) {
  p, .kava  { font-size: 0.6em; }
}

@media (max-width: 1179px) {
  p, .kava  { font-size: 0.53em; }
}

@media (max-width: 1100px) {
  section {
    width: 50%; height: 50vw;
  }
    p, .kava { font-size: 0.7em; }
}

@media (max-width: 940px) {
  p { font-size: 0.6em; }
}

@media (max-width: 812px) {
  p { font-size: 0.53em; }
}

@media (max-width: 700px) {
  section {
    width: 100vw; height: 100vw;
  }

  p { font-size: 0.8em; }
  .tekst { height: auto; overflow: auto; }
  .kava { height: 400px; }
}