@font-face {
    font-family: Rustico;
    src: url("assets/font/Rustico-Regular.otf") format("opentype");
}

html{
  font-size: 62.5%;
  font-size: 1rem;
  overflow-x: hidden;
}

p{
  font-size: 1.3rem;
}

.u-center-text{text-align: center;}

.header{
  animation: fadeIn 1s ease;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  left:50%;
  top:45%;
  color:#fffff0;
  padding: 1rem;
}

.header-primary{
  font-family: Rustico;
  font-weight: 300;
  font-size: 4.8rem;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
}

.header-secondary{
  font-size: 2rem;
  margin-bottom: 2rem;
}

.entry-title{
  margin-bottom: 2rem;
}

.nyheter{
  border: 1px solid rgba(0,0,0, .1);
  padding:2rem;
  margin:1rem;
  width:50vw;
  border-radius: 10px;
}

.card {
    /* Set a specific height */
    height:40vh;

    /* Create the parallax scrolling effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card-front{
      /* Set a specific height */
      height:100vh;

      /* Create the parallax scrolling effect */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}

.opacity{
  background-color: rgba(0,0,0,0);
  border:none;
}


.nav-container{
  position: fixed !important;
  top:0 !important;
  padding:1rem;
  background-color: rgba(0,0,0,.5) !important;
  width:100%;
  color:white;
  z-index: 10;
  transition: .3s ease;
}

.nav-link{
  color:rgba(255,255,255,.85) !important;
  padding: .5rem .5rem !important;
}

.navBg{
  background-color: rgba(0,0,0,.85) !important;
  transition: .3s ease;
}

.content{
  margin: auto;
  padding:5rem;
  padding-top:3rem;
}


iframe{
  margin-top: 5rem;
  max-width: 900px;
  width:50vw;
  height:60vh;
}

.attachment-twentyseventeen-featured-image{
  max-width: 50vw;
  max-height: 50vh;
  object-fit: cover;
}

.pagination{
  display: block !important;
}

.foot{
  height:auto !important;
}

.primary-footer{
  padding:2rem;
  background-color: rgba(0,0,0,.5) !important;
}

.credittext{
  font-size: 1rem;
}

@media only screen and (max-width: 990px) {
  .content{
    margin:0;
    padding:1rem;
  }

  .entry-title{
    margin-bottom: 1rem;
  }

  .header-primary{
    font-size: 2.4rem;
  }
  .header-secondary{
    font-size: 2rem;
    margin:1rem;
  }

  p{
    font-size: 1rem;
  }

  .nyheter{
    border: none;
    padding:0;
    margin:1rem;
    width:100vw;
  }
  iframe{
    width:90vw;
    height:90vh;
  }
  .img-responsive{
    width: 30vw !important;
  }
}

@keyframes fadeIn{
  0%{
    opacity:0;
  }
  100%{
    opacity: 1;
  }
}