@font-face
{
  font-family: 'happytimes';
  src: url('happy-times-at-the-ikob.ttf');
}

html
{
  font-family: 'happytimes';
}

body
{
  width: 100%;
  height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
  color: #fff;
}

.down {
  position: absolute;
  bottom:10px;
  left:50%;
  margin-left: -25px;
  width:100px;
  height:100px;
}

#fullscreenContent
{
  position: fixed;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 0;
  left: 50%;
  background: url(http://espacemoss2.ddns.net:5001/?action=stream);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}

#fullscreenContent2
{
  position: fixed;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: url(http://espacemoss2.ddns.net:5000/?action=stream);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}

#first , #second , #third{
  position: relative;
  min-height:100vh;
  height:auto;
}

.content{
    z-index: 20000;
}

a
{
  color: blue;
}

#liveView
{
  position: fixed;
  z-index:1000;
  top: 10px;
  left: 15px;
  color: blue;
}

#liveView.active
{
  color: #ff0000;
}

#liveView i
{
    font-size: 40px;
}

@media only screen and (max-width: 900px)

{

   #first .content{
    padding:40px 20px !important;
    font-size: 20px;
    font-size: 5vw!important;
   }


  #second h2 {
    font-size: 5vw!important;
  }

   #second .content{
    padding:40px 20px !important;
    font-size: 5vw!important;

   }

  #third h2 {
    font-size:5vw!important;
  }

   #third .content{
    padding:40px 20px !important;
    font-size: 5vw!important;

   }


  #fullscreenContent
  {
    width: 100%;
    height: 51%;
    left: 0%;
  }

  #fullscreenContent2
  {
    width: 100%;
    height: 50%;
    top: 50%;
  }

}