#parallax-home {

    #footer {
        width: 100%;
        position: fixed;
        z-index: 1000;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 0.7rem;
        line-height: 1.1rem;
        padding: 0.5rem;
    }

    #footer a {
        color: white;
    }

    #footer a:hover, a:focus {
        color: #f37000;
    }

    #about,
    #statistics {
        background-color: #ff8800;
        color: white;
        border-top: 6px solid #EFEFEF;
        border-bottom: 6px solid #EFEFEF;
        position: relative;
    }

    //Fonts weights and sizes - h1,h2,h3,h4 decoupled from html tags for SEO


    .parallax--h {
        font-size: 4.25rem;
        font-weight: bolder;
        text-align: center;
        line-height: 4.92rem;
        color: white;
        text-shadow: 0 0 3px rgba(0,0,0,0.4);
        letter-spacing: 0.15rem;
        font-family: Signika;
    }

    .parallax--a {
      color: #f37000;
    }

    .parallax--subh {
        font-size: 2.75rem;
        font-weight: bold;
        text-align: center;
        color: white;
        text-shadow: 0 0 3px rgba(0,0,0,0.4);
        letter-spacing: 0.1rem;
        font-family: Signika;
    }

    .parallax--numsubh {
        color: white;
        font-size: 1.2rem;
        line-height: 1.7rem;
        font-weight: normal;
        text-align: center;
        text-shadow: 0 0 3px rgba(0,0,0,0.4);
        font-weight: 600;
        font-family: Signika;
    }

    .parallax--smallsubh {
        color: white;
        font-size: 1.7rem;
        text-align: center;
        text-shadow: 0 0 3px rgba(0,0,0,0.4);
        font-family: Signika;
    }

    .fa-start {
        text-shadow: 0 0 3px rgba(0,0,0,0.4);
    }

    .home-button-shadow {
      box-shadow: 0 0 10px 1px rgba(0,0,0,0.6);
    }

    .home-button-center {
      max-width:690px;
      position: relative;
      left: 50%;
      transform: translateX(-50%)
    }

    .form-control,
    .o-input {
      // Affect the main menu
      border: none;
      font-family: Signika;
      font-weight: 300;
    }

    .parallax .form-control,
    .parallax .o-input {
      // Doesn't affect the main menu
      height: 3rem;
      background-color: rgba(255,255,255,0.98);
      flex: 1 1 auto;
      width: 1%;
      min-width: 0;
      border-radius: initial;
    }

    .input-group {
      box-shadow: 0 0 10px 2px #545454;
      width: 50%;
    }

    .input-group-text {
      padding: 0.5rem 1rem;
      border: none;
    }

    .input-group-text:before {
      font-weight: 900;
    }

    .input-group button {
      width: 3rem;
      box-shadow: -3px 0 5px -1px #d4d4d4;
    }

    .parallax--fixed-enter .input-group {
      animation: 1s growInput 0.5s ease-in;
      animation-fill-mode: forwards;
    }

    @include media-breakpoint-down(sm) {
        .fa-start {
            font-size: 8rem;
        }
    }

    @include media-breakpoint-down(md) {
        .fa-start {
            font-size: 8rem;
        }
        .parallax--h {
            font-size: 3rem;
            line-height: 3.5rem;
        }
    }

    @include media-breakpoint-up(lg) {
        .fa-start {
            font-size: 8rem;
        }
    }

    .parallax {
        position: relative;
        z-index: 0;
        height:150vh;
    }

    .parallax > .parallax--img {
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .parallax--shadow {
      width: 100%;
      height: 100%;
      animation: background-in 6s ease;
      animation-delay:1s;
      background-color: rgba(0,0,0,0);
      animation-fill-mode: both;
    }

    .parallax--fixed {
      padding: 104px 0;
      position: fixed;
      width:100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      opacity:0;
      transition: opacity 0.8s;
      visibility: hidden;
      margin: initial;
    }

    @include media-breakpoint-down(sm){

      .parallax--fixed {
        padding: 104px 0;
      }

      .parallax--fixed-abovethefold {
        padding-top: 52px;
      }

    }

    .parallax--fixed-abovethefold,
    .parallax--fixed-enter,
    .parallax--fixed-leave {
      opacity: 1;
      transition: opacity 0.8s;
      visibility: visible;
    }

    .parallax--fixed--letteranim {
      animation: textblur 6s ease;
      animation-delay:1s;
      opacity:0;
      animation-fill-mode: both;
    }

    .parallax--fixed--buttonanim {
      animation: button-fadein 6s ease;
      animation-delay:1s;
      opacity:0;
      animation-fill-mode: both;
    }

    .parallax--fixed--linkanim {
      animation: link-fadein 6s ease;
      animation-delay:1s;
      opacity:0;
      animation-fill-mode: both;
    }

    .parallax--fixed-enter .parallax--fixed--letteranim {
      animation: 1s textblur ease;
      animation-fill-mode: forwards;
    }

    .parallax--fixed-enter .parallax--fixed--linkanim {
      animation: 1s link-fadein ease;
      animation-fill-mode: forwards;
    }

    .parallax--fixed-enter .parallax--fixed--buttonanim {
      animation: 1s button-fadein ease;
      animation-fill-mode: forwards;
    }

    .parallax--fixed-leave .parallax--fixed--letteranim {
      animation: 1s textblur-out ease;
      animation-fill-mode: forwards;
    }

    .parallax--fixed-leave .parallax--fixed--linkanim {
      animation: 1s link-fadeout ease;
      animation-fill-mode: forwards;
    }

    .parallax--fixed-leave .parallax--fixed--buttonanim {
      animation: 1s button-fadeout ease;
      animation-fill-mode: forwards;
    }

    #icon-animation-1.icon-animation-start i,
    #icon-animation-2.icon-animation-start i {
      animation: 1s iconAnimation 0.5s ease;
      animation-fill-mode: forwards;
    }

/*    #icon-animation-1.icon-animation-start i.animation-2,
    #icon-animation-2.icon-animation-start i.animation-2 {
      animation-delay: 0.5s;
    }

    #icon-animation-1.icon-animation-start i.animation-3,
    #icon-animation-2.icon-animation-start i.animation-3 {
      animation-delay: 1s;
    }

    #icon-animation-1.icon-animation-start i.animation-4,
    #icon-animation-2.icon-animation-start i.animation-4 {
      animation-delay: 1.5s;
    }

    #icon-animation-1.icon-animation-start i.animation-5,
    #icon-animation-2.icon-animation-start i.animation-5 {
      animation-delay: 2s;
    }*/

    @include media-breakpoint-down(md) {
        .parallax--h {
            font-size: 3rem;
            line-height: 3.5rem;
        }
        .parallax--shadow {
          min-height: 100vh;
        }
        .parallax--fixed {
          position: relative;
          top: initial;
          left: initial;
          transform: none;
          visibility: visible;
          opacity: 1;
        }
        .parallax {
          height: initial;
          min-height: 100vh;
        }

        .parallax-fixed-enter .parallax--fixed--letteranim,
        .parallax-fixed-leave .parallax--fixed--letteranim,
        .parallax--fixed-leave .parallax--fixed--button  {
          animation: none;
        }
    }

    //Animations

    @-webkit-keyframes background-in {
      0% {
        background-color: rgba(0,0,0,0);
      }
      100% {
        background-color: rgba(0,0,0,0.4);
      }
    }

    @keyframes background-in {
      0% {
        background-color: rgba(0,0,0,0);
      }
      100% {
        background-color: rgba(0,0,0,0.4);
      }
    }

    @-webkit-keyframes link-fadein {
      0% {
        color:rgba(255,255,255,0);
        opacity: 0;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0);
      }
      100% {
        color:rgba(243,112,0,1);
        opacity: 1;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
      }
    }

    @keyframes link-fadein {
      0% {
         color:rgba(255,255,255,0);
        opacity: 0;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0);
      }
      100% {
        color:rgba(243,112,0,1);
        opacity: 1;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
      }
    }


    @-webkit-keyframes link-fadeout {
      0% {
        color: rgba(243,112,0,1);
        opacity: 1;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
      }
      100% {
        color:rgba(255,255,255,0);
        opacity: 0;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0);
      }
    }

    @keyframes link-fadeout {
      0% {
        color: rgba(243,112,0,1);
        opacity: 1;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
      }
      100% {
        color:rgba(255,255,255,0);
        opacity: 0;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0);
      }
    }

    @-webkit-keyframes button-fadein {
      0% {
        opacity: 0;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0);
      }
      50% {
        opacity: 1;
        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 1);
      }
      100% {
        opacity: 1;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.6);
      }
    }

    @keyframes button-fadein {
       0% {
        opacity: 0;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0);
      }
      50% {
        opacity: 1;
        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 1);
      }
      100% {
        opacity: 1;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.6);
      }
    }

    @-webkit-keyframes button-fadeout {
      0% {
        opacity: 1;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.6);
      }
      100% {
        opacity: 0;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0);
      }
    }

    @keyframes button-fadeout {
      0% {
        opacity: 1;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.6);
      }
      100% {
        opacity: 0;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0);
      }
    }

    @-webkit-keyframes textblur {
     0% {
      color:rgba(255,255,255,0);
      text-shadow: 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 0px 0px 5px rgba(255,255,255,0);
      opacity:0.7;
    }
    33% {
      color:rgba(255,255,255,0);
      text-shadow:3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 0px 0px 2px rgba(255,255,255,0.25);
      opacity:0.8;
    }
    66% {
      color:rgba(255,255,255,0);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    80% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5);
      opacity:0.8;
    }
    90% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    100% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 3px rgba(0,0,0,0.4), 0px 0px 2px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 0px rgba(255,255,255,0.1);
      opacity:1;
    }
  }
  @keyframes textblur {
    0% {
      color:rgba(255,255,255,0);
      text-shadow: 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 0px 0px 5px rgba(255,255,255,0);
      opacity:0.7;
    }
    30% {
      color:rgba(255,255,255,0);
      text-shadow:3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 0px 0px 2px rgba(255,255,255,0.25);
      opacity:0.8;
    }
    66% {
      color:rgba(255,255,255,0);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    80% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5);
      opacity:0.8;
    }
    90% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    100% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 3px rgba(0,0,0,0.4), 0px 0px 2px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 0px rgba(255,255,255,0.1);
      opacity:1;
    }
  }

  @-webkit-keyframes textblur-out {
     0% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 3px rgba(0,0,0,0.4), 0px 0px 2px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 0px rgba(255,255,255,0.1);
      opacity:1;
    }
    10% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    20% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5);
      opacity:0.8;
    }
    33% {
      color:rgba(255,255,255,0);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    66% {
      color:rgba(255,255,255,0);
      text-shadow:3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 0px 0px 2px rgba(255,255,255,0.25);
      opacity:0.8;
    }
    100% {
      color:rgba(255,255,255,0);
      text-shadow: 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 0px 0px 5px rgba(255,255,255,0);
      opacity:0;
    }
  }

  @keyframes textblur-out {
     0% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 3px rgba(0,0,0,0.4), 0px 0px 2px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 0px rgba(255,255,255,0.1);
      opacity:1;
    }
    10% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    20% {
      color:rgba(255,255,255,1);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5);
      opacity:0.8;
    }
    44% {
      color:rgba(255,255,255,0);
      text-shadow:0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px rgba(255,255,255,0.4);
      opacity:0.9;
    }
    70% {
      color:rgba(255,255,255,0);
      text-shadow:3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 3px 1px 5px rgba(255,255,255,0.25), -3px -1px 5px rgba(255,255,255,0.25), 0px 0px 2px rgba(255,255,255,0.25);
      opacity:0.8;
    }
    100% {
      color:rgba(255,255,255,0);
      text-shadow: 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 6px 3px 10px rgba(255,255,255,0), -6px -3px 10px rgba(255,255,255,0), 0px 0px 5px rgba(255,255,255,0);
      opacity:0;
    }
  }
  @-webkit-keyframes fadeOut {
    0% {
      opacity:1
    }
    to {
      opacity:0
    }
  }
  @keyframes fadeOut {
    0% {
      opacity:1
    }
    to {
      opacity:0
    }
  }

  @-webkit-keyframes iconAnimation {
    0% {
      transform:rotate(0deg);
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }
    25% {
      transform:rotate(-5deg);
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    }
    50% {
      transform:rotate(15deg);
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    }
    100% {
      transform:rotate(0deg);
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }
  }
  @keyframes iconAnimation {
    0% {
      transform:rotate(0deg);
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }
    25% {
      transform:rotate(-5deg);
      text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    }
    50% {
      transform:rotate(15deg);
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }
    100% {
      transform:rotate(0deg);
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }
  }

  @-webkit-keyframes growInput {
    0% {
      width:50%
    }
    to {
      width:100%
    }
  }

  @keyframes growInput {
    0% {
      width:50%
    }
    to {
      width:100%
    }
  }
}
