* {
  font-family: 'Roboto', 'Helvetica', 'sans-serif';
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ------------  Text still  ------------- */

p {
  width: 94%;
  max-width: 40rem;
  margin: 2rem auto;
  font-weight: 300;
}

h1 {
  width: 94%;
  max-width: 40rem;
  margin: 2rem auto;
  font-size: 40px;
}

h2 {
  width: 94%;
  max-width: 40rem;
  margin: 2rem auto;
  font-size: 30px;
}

h3 {
  width: 94%;
  max-width: 40rem;
  margin: 2rem auto;
  font-size: 20px;
}

.quote {
  width: 94%;
  max-width: 42rem;
  margin: 2rem auto;
  border-left: 6px solid rgb(0, 76, 163);
  padding: 1rem;
}

.hoverText:hover  {
  text-decoration: underline;
}

figcaption {
  font-size: 12px;
  font-family: 'Roboto', 'Helvetica', 'sans-serif';
  font-weight: 300;
  padding-top: 2px;
}

.list {
  width: 94%;
  max-width: 40rem;
  margin: 2rem auto;
  font-weight: 300;
}

/* ------------------------- */




body {
  background-color: rgb(47, 49, 54);
  margin: 0;
  padding: 0;
}

.alink {
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin: 1vh;
}

.mainPgImg {
  width: 100%;
}



ol li a {
  color: white;
  text-decoration: none;
  display: flex;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  padding: 10px 13px;
}

ol li a:hover {
  color: rgb(179, 179, 179);
}

.active {
  background-color: rgb(27, 45, 42);
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row: auto auto auto auto;
  grid-template-areas:
  "header header header header"
  "para para para para"
  "textpart textpart textpart textpart"
  "footer footer footer footer";
}

header {
  padding: 0px;
  margin: 0px;
  grid-area: header;
}

nav {
  background: rgba(0, 0, 0, 0.384);
}

ol {
  display: flex;
  justify-content: center;
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.textpart {
  background-color: rgb(235, 235, 235);
  width: 100%;
  max-width: 2400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  grid-area: textpart;
}


.Italic {
  font-style: italic;
}
.bold {
  font-weight: bold;
}

.paddingTop {
  padding-top: 20px;
}

.TextSection {
  background-color: white;
  margin: 0 auto 20px auto;
  padding-bottom: 20px;
  width: auto;
  max-width: 2400px;
}

.sectionWPM {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

footer {
  background-color: rgb(18, 19, 14);
  padding: 2%;
  color: white;
  text-align: center;
  grid-area: footer;
}

.paddingBot {
  padding-bottom: 10px;
}

.smallImg {
  margin: 2rem auto;
  width: 94%;
  max-width: 40rem;
}

.smallImg img {
  width: 100%;
}

.mediumImg {
  margin: 2rem auto;
  width: 94%;
  max-width: 60rem;
}

.mediumImg img {
  width: 100%;
}

.largeImg {
  margin: 2rem auto;
  width: 94%;
  max-width: 100rem;
}

.largeImg img {
  width: 100%;
}

.vector {
  margin: 2rem auto;
  width: 94%;
  max-width: 65rem;
}

.bigMap {
  margin: 2rem auto;
  width: 94%;
  max-width: 80rem;
}


 .tracking-in-contract {
	-webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.shadow-drop-br:hover {
	-webkit-animation: shadow-drop-br 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-br 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.shadow-drop-br {
	-webkit-animation: shadow-drop-brOut 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
	        animation: shadow-drop-brOut 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
}

.slide-in-bottom {-webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both}

/* -------------------------
Bruker parallax effecten av Keith Clark som base
https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
---------------------------*/

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
  grid-area: para;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__group {
  position: relative;
  height: 140vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__not {
  position: relative;
  height: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
  position: relative;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
  overflow: hidden;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
  background-attachment: relative;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden; 
}

.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
  background-attachment: relative;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden; 
}

#nr1 {
  z-index: 2;
}
#nr1 .parallax__layer--deep {
  background-image: url("Img/Long/luddeB.png");
}

#nr1 .parallax__layer--back {
  background-image: url("Img/Long/ludde.png");
}


#nr2 {
  z-index: 4;
}

#nr2 .parallax__layer--deep {
  background-image: url("Img/Long/ludde_etterB.png");
}

#nr2 .parallax__layer--back {
  background-image: url("Img/Long/ludde_etter.png");
}


#header {
  z-index: 10;
}

#main {
  z-index: 10;
}

#footer {
  z-index: 10;
}

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.parallax h1 {
  background: rgba(255, 255, 255, 0.8);
  padding: 1rem;
  margin: 0 auto;
  text-align: center;
}

.static_content {
  margin-top:90%;
  height: 300px;
  background-color: black;
}

.VideoPlayer {
  margin: 0 auto;
  display: block;
  width: 100%;
}

#img1 {
  background-image: url("Img/Nav2.jpg");
}


#img2 {
  background-image: url("Img/Nav3.jpg");
}

#img3 {
  background-image: url("Img/Nav3.jpg");
}


/* ----------------------------------------------
 * Generated by Animista on 2021-9-2 16:22:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes tracking-in-contract{0%{letter-spacing:1em;opacity:0}40%{opacity:.6}100%{letter-spacing:normal;opacity:1}}@keyframes tracking-in-contract{0%{letter-spacing:1em;opacity:0}40%{opacity:.6}100%{letter-spacing:normal;opacity:1}}
@-webkit-keyframes focus-in-expand{0%{letter-spacing:-.5em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes focus-in-expand{0%{letter-spacing:-.5em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@-webkit-keyframes shadow-drop-br{0%{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}100%{-webkit-box-shadow:12px 12px 20px -12px rgba(0,0,0,.35);box-shadow:12px 12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-br{0%{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}100%{-webkit-box-shadow:12px 12px 20px -12px rgba(0,0,0,.35);box-shadow:12px 12px 20px -12px rgba(0,0,0,.35)}}
@-webkit-keyframes shadow-drop-brOut{0%{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}100%{-webkit-box-shadow:12px 12px 20px -12px rgba(0,0,0,.35);box-shadow:12px 12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-br{0%{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}100%{-webkit-box-shadow:12px 12px 20px -12px rgba(0,0,0,.35);box-shadow:12px 12px 20px -12px rgba(0,0,0,.35)}}
@-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}


@media only screen and (max-width: 1220px) {
  .grid {
    display: grid;
    grid-template-columns: 0fr 2fr 1fr 0fr;
    grid-row: auto auto auto auto;
    }
  .gridHome {
    display: grid;
    grid-template-columns: 0fr 2fr 1fr 0fr;
    grid-row: auto auto auto auto;
    }
}
  @media only screen and (max-width: 768px) {
    .gridHome {
      display: grid;
      grid-template-columns: auto;
      grid-row: auto auto auto auto auto;
      grid-template-areas:
      "header"
      "textpart"
      "footer";
    }
  
    ol li a {
      flex-direction: column;
    }
    ol {
      flex-direction: column;
    }
    p {
      font-size: 16px;
    }
}