body {
    background-color: #FAFAFA;
    height: 100%;
}

body { 
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
} 
  
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
} 


.jumbotron {
    background-image: url("https://static.bestille.no/cs2017/bladeskoyen/body/bg2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*padding: 5em inherit;
    min-height: 600px;*/
    min-height: 35%;
    max-height: 60%;
}


.myFooter {
    background-color: #737980;
}

h4,h1 {
    font-family: 'Raleway', sans-serif;
}


.myBtn {
    background-color:#13402F;
}

/*.navbar-trans {
    background-color: transparent;
}*/

.subheader {
    color: #EEEEEE;
}


.myCard {
    background-color: #292E33;
}



  :root {
    --jumbotron-padding-y: 3rem;
  }
  
  .jumbotron {
    padding-top: var(--jumbotron-padding-y);
    padding-bottom: var(--jumbotron-padding-y);
    margin-bottom: 0;
    background-color: #fff;
  }
  @media (min-width: 768px) {
    .jumbotron {
      padding-top: calc(var(--jumbotron-padding-y) * 3);
      padding-bottom: calc(var(--jumbotron-padding-y) * 3);
    }
  }
  
  .jumbotron p:last-child {
    margin-bottom: 0;
  }
  
  .jumbotron-heading {
    font-weight: 300;
    font-size: 6rem;
    /*text-shadow: 2px 2px 10px #3B3B3B;*/
  }
  
  .jumbotron .container {
    max-width: 40rem;
  }
  
  footer {
    position:"";
    bottom:0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 100%;
    background-color: #292E33;
  }
  

  /* Style all font awesome icons */
.myFa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }

  
  /* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #333333;
    color: white;
  }
  
  /* Twitter */
  .fa-instagram {
    background: #333333;
    color: white;
  }

  .myGrey {
    filter: grayscale(100%);
  }

  .myGrey:hover{
    filter: grayscale(0%);
  }

  .card:hover {
      cursor: pointer;
  }


  /* Add the below transitions to allow a smooth color change similar to lyft */
.navbar {
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    color: #212529;
    text-decoration: none;
}

.nav-item {
    color: #212529;
    text-decoration: none;
}

.navbar.scrolled {
    background: rgb(68, 68, 68); /* IE */
    background: rgba(0, 0, 0, 0.78); /* NON-IE */
}

.mySection3 {
  background-color: #727F8C;
}