@font-face {
    font-family: 'the_handextrablack';
    src: url('thehandextrablack-webfont.woff2') format('woff2'),
         url('thehandextrablack-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'the_handblack';
    src: url('thehandblack-webfont.woff2') format('woff2'),
         url('thehandblack-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
    background-color: #607486;
    font-family: 'the_handextrablack';
}

button{
    background-color: #FFF;
}

@media screen and (min-width: 992px) {

    .marge-top-deskop{
        margin-top: 100px;
    }
    
    h1{
    margin-bottom: 60px;
    }

  }

@media (max-width: 767px) {
    
    h1{
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    span{
        font-size: 28px;
    }
    
  }

/*--------------------------------------------------------------
## Animations
--------------------------------------------------------------*/
.animated {
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
}

.delay_025s {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.delay_05s {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.delay_075s {
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.delay_1s {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.delay_1_25s {
  -webkit-animation-delay: 1.25s;
  -moz-animation-delay: 1.25s;
  animation-delay: 1.25s;
}

.delay_1_5s {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.delay_1_75s {
  -webkit-animation-delay: 1.75s;
  -moz-animation-delay: 1.75s;
  animation-delay: 1.75s;
}

.delay_2s {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.box{
    
}