@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');

.projects, .lead {
  max-width: 1000px;
}
.projects a {
  text-decoration: none;
}
/*
.projects .card:hover {
  border: 7px inset #FE9301;
  border-radius: 17px;
 /* background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 40s linear infinite;

}*/

.bg-sabandijers {
  background-color: #303950;
}

h1, h2, h3, h4, h5 {
  font-family: 'Nunito', sans-serif;
}
h1 {
  color: #ff9200;
  background: #FFFFFF;
  text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5;
  color: #ff9200;
  background: #FFFFFF;
}

.card {
    border: 2px solid #c9c9c9;
}

div.card-img { 
          background-repeat: repeat, no-repeat;
        background-color: #ededed;
        background-position: 50%;
        background-size: auto 100%;
        height: 160px;
        width: 100%;
        position: static;
        left: 0;
        top: 0;
        z-index: 1;
        filter: blur(1px);
}
.card-title {
    border: 2px solid #ff9200;
    background: #fff;
    padding: 14px 20px;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    white-space: nowrap;
    font-size: 22px;
    border-radius: 5px;
    display: flex;
    align-items: flex-end;
    z-index: 2;
    color: #ff9200!important;
}

div.card-img:hover { 
/* background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 40s linear infinite;*/

   -webkit-animation:background-move 30s linear infinite forwards;
   animation:background-move 30s linear infinite forwards

}
@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@-webkit-keyframes background-move {
        0% {
          background-position: 50%
        }

        to {
          background-position: -1000px
        }
      }

      @keyframes background-move {
        0% {
          background-position: 50%
        }

        to {
          background-position: -1000px
        }
      }


        /* only animate if the device supports hover */
        @media (hover: hover) {
            #creditcard {
                /*  set start position */
                transform: translateY(110px);
                transition: transform 0.1s ease-in-out;
                /*  set transition for mouse enter & exit */
            }

            #money {
                /*  set start position */
                transform: translateY(180px);
                transition: transform 0.1s ease-in-out;
                /*  set transition for mouse enter & exit */
            }

            button:hover #creditcard {
                transform: translateY(0px);
                transition: transform 0.2s ease-in-out;
                /*  overide transition for mouse enter */
            }

            button:hover #money {
                transform: translateY(0px);
                transition: transform 0.3s ease-in-out;
                /*  overide transition for mouse enter */
            }
        }

        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-0.25rem);
            }
            100% {
                transform: translateY(0);
            }
        }

        .button:hover .button__text span {
            transform: translateY(-0.25rem);
            transition: transform .2s ease-in-out;
        }

        .button {
            border: none;
            outline: none;
            padding: 1rem 90px 1rem 2rem;
            position: relative;
            border-radius: 8px;
            letter-spacing: 0.7px;
            background-color: #ff9200;
            color: #fff;
            font-size: 21px;
            font-family: "Lato", sans-serif;
            cursor: pointer;
            box-shadow: rgba(0, 9, 61, 0.2) 0px 4px 8px 0px;
        }

        .button:active {
            transform: translateY(1px);
        }

        .button:hover {
            box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px #ff9200;
        }

        .btn-monthly:hover {
            box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px #013370;
        }

        .button__svg {
            position: absolute;
            overflow: visible;
            bottom: 6px;
            right: 0.2rem;
            height: 140%;
        }