.header .navbar {
    font-family: 'Staatliches', cursive;
        background-color: transparent;
        width:100%;
    font-size:15px;
    z-index:9999;
}

#skills {
    margin-top:10%;
}

#lottie{
    margin:auto;
    width:100%;
}

#myskills {
    font-family: 'Quicksand', sans-serif;
    text-align:center;

}


.banner-content{
    margin-top:7%;
}

.subtitle.is-small{
    color:#000;
}

#about-button{
    color:#e3e342;
    background-color:black;
}

@keyframes text-glitch {
    0% {
        text-shadow: none
    }

    25% {
        text-shadow: -2px -2px 0 #F43482,2px 2px 0 #3234FF
    }

    50% {
        text-shadow: 2px -2px 0 #F43482,-2px 2px 0 #3234FF
    }

    75% {
        text-shadow: -2px 2px 0 #F43482,2px -2px 0 #3234FF
    }

    100% {
        text-shadow: 2px 2px 0 #F43482,-2px -2px 0 #3234FF
    }
}

.hero .hero-body .container .columns .title:hover{
    text-align:center;
    -webkit-animation: text-glitch .65s cubic-bezier(.25,.46,.45,.94) both infinite;
    animation: text-glitch .65s cubic-bezier(.25,.46,.45,.94) both infinite; 
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    
}


.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
   
}


@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 9px); }
    to   { transform: translate(0, -0px); }    
}



#text-contact {
    -webkit-animation: text-glitch .65s cubic-bezier(.25,.46,.45,.94) both infinite;
    animation: text-glitch .65s cubic-bezier(.25,.46,.45,.94) both infinite; 
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    
}


#about-button:hover{
    color:white;
    background-color:black;
}

.container#container-button a{
    color:#e3e342;
    background-color:black;
    border-color:transparent
}


.container#container-button a:hover{
    color:white;
    background-color:black;
}

.header .navbar .navbar-menu{
    margin-right:2%;
}

.header .navbar .navbar-burger{
    margin-right:2%;
}

.container#container-button{
    padding:30px;
    background-color: black;

}

html{
    height:100%;
    background-position:cover no-repeat;
    background-size:100%;
    background-color:black;
}

.header .navbar a{
   color:#fff;
}

.header .navbar a:hover{
    color:#e3e342;
    background-color:transparent;
    text-align:center;
    -webkit-animation: text-glitch .65s cubic-bezier(.25,.46,.45,.94) both infinite;
    animation: text-glitch .65s cubic-bezier(.25,.46,.45,.94) both infinite;
    text-transform: uppercase;
    letter-spacing: 1px;
 }


 .header .animsition .navbar-item img:hover{
     width:15px;
 }

.banner-content{
    font-family: 'Quicksand', sans-serif;
    text-align:center;
    top:5%;
}


.banner-content h2{
   color:#fff;
}


.hero .banner img#space-banner{
    width:100%;
    position:absolute;
    top:0;
}



.banner-content .columns .button{
    background-color:transparent;
    background-image: none;
    border:none;
    margin-top:40px;
}

.banner-content .columns .column#message-main{
    width:20em;
    text-align:center;
}

.banner-content .columns .button i{
    color:#fff;
}


.hero .columns .column .title {
    font-family: 'Staatliches', cursive;
    font-size:30px;
    margin-top: 20px;
    
    
}


.hero .hero-body .container .title{
    font-family: 'Staatliches', cursive;
    color:#e3e342;
    text-align:center;
}

.hero .hero-body .container .title#text-contact{
    font-family: 'Staatliches', cursive;
    font-size:80px;
    text-align:center;
    margin-top:85px;
}

.hero .hero-body .container .title#text-contact:hover{
    color:#e3e342;
}



.section .h2 .subtitle {
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    text-align:left;
    color:#e3e342;
}


.hero-body{
    background-color:black;
}

footer p{ 
    font-family: 'Quicksand', sans-serif;
    font-size:10px;
    color:white;

}

/*GrayScale*/
#grayscale{
	-webkit-filter: grayscale(100%) brightness(90%) contrast(100%);
	filter: grayscale(100%) brightness(90%) contrast(100%);;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#grayscale:hover{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.container#texte-mention h1{ 
    margin-top:80px;
    color:#e3e342;
}

.container#texte-mention h2{ 
    font-family: 'Quicksand', sans-serif;
}

.footer{
    background-color:#000; 
}

.center {
    margin: 5% auto auto;
    
  }
  .mouse-down {
    width:15px;
    height:30px;
    border:2px solid #e3e342;
    border-radius:20px;
    
  }
  .bullet {
    width:5px;
    height:5px;
    background:#e3e342;
    margin: auto auto;
    border-radius:8px;
    position:relative;
    
    -webkit-animation: scrollDownUp 3s infinite; /* Chrome, Safari, Opera */
      animation: scrollDownUp 3s infinite;
  }
  /* Chrome, Safari, Opera */ 
  @-webkit-keyframes scrollDownUp {
      0% {top: 5px;}
      50% {top: 20px;}
      100% {top: 5px;}
  } 
  
  /* Standard syntax */ 
  @keyframes scrollDownUp {
      0% {top: 5px;}
      50% {top: 20px;}
      100% {top: 5px;}
  }

  /*Arrow*/
  
  .arrowCta {
    display: block;
    height: 13px;
    width: 13px;
    border: 11px solid transparent;
    transform: rotate(45deg);
    position: relative;
    margin: 25px auto;
  }
  
  .arrowCta:after,
  .arrowCta:before {
    content: "";
    display: block;
    height: inherit;
    width: inherit;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .arrowCta:after {
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    top: 0;
    left: 0;
    opacity: 1;
    animation: bottom-arrow 1.65s infinite;
  }
  
  @keyframes bottom-arrow {
    0% {
      opacity: 1;
      transform: translate(0, 0);
    }
    45% {
      opacity: 0;
      transform: translate(12px, 12px);
    }
    46% {
      opacity: 0;
      transform: translate(-16px, -16px);
    }
    90% {
      opacity: 1;
      transform: translate(-6px, -6px);
    }
    100% {
      opacity: 1;
      transform: translate(-6px, -6px);
    }
  }
  
  .arrowCta:before {
    top: 0;
    left: 0;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    animation: top-arrow 1.65s infinite;
  }
  
  @keyframes top-arrow {
    0% {
      transform: translate(-6px, -6px);
    }
    35% {
      transform: translate(0, 0);
    }
    90% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }


.container#menu-02{
    background-color:black;
}
.container#menu-02 ul li{
    display:inline;
    padding:15px;
    font-family: 'Staatliches', cursive;
    color:white;
    font-size:15px;
}

.container#menu-02 ul li:hover{
    padding:15px;
    font-family: 'Staatliches', cursive;
    color:#e3e342;
}






/* glitch*/




/*footer*/
footer .container .image {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    padding:20px;
}

footer#hero-color{
    background-color:black;
}


  
  /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
  
  @media (min-width: 1025px) and (max-width: 1280px) {
    
    .banner-content .columns .column#message-main{
        width:9em;
        text-align:center;
        margin-right:auto;
        margin-left:0%;
    }


    .container#menu-02 ul li{
        display:block;
    }

    .hero .banner img#space-banner{
        height:30em;
    }

     .navbar-burger {
        color:#e3e342;
     }

     #lottie{
        height:10%;
        margin-bottom:0%;
    }
     
}

    
  
  
  /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) {
    
    .banner-content .columns .column#message-main{
        width:9em;
        text-align:center;
        margin-right:auto;
        margin-left:0%;
    }

    .container#menu-02 ul li{
        display:block;
    }

    .hero .banner img#space-banner{
        height:30em;
    }

    .header .navbar-menu {
        background-color:#000;
        font-size:20px;
        text-align:center;
     }


     .navbar-burger {
        color:#e3e342;
     }

    .hero .banner .banner-content .columns .column h1 img{
        width:100%;
        margin-left:13%;
    }

  }

    

  
  /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    
    .banner-content .columns .column#message-main{
        width:9em;
        text-align:center;
        margin-right:auto;
        margin-left:0%;
    }

    .container#menu-02 ul li{
        display:block;
    }

    .hero .banner img#space-banner{
        height:30em;
    }

    .header .navbar-menu {
        background-color:#000;
        font-size:20px;
        text-align:center;
     }

     .navbar-burger {
        color:#e3e342;
     }

    .hero .banner .banner-content .columns .column h1 img{
        width:100%;
        margin-left:13%;
    }

  }

    
  
  
  /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) {
    
    .banner-content .columns .column#message-main{
        width:9em;
        text-align:center;
        margin-right:auto;
        margin-left:0%;
    }


    .container#menu-02 ul li{
        display:block;
    }

    .hero .banner img#space-banner{
        height:30em;
    }

    .header .navbar-menu {
        background-color:#000;
        font-size:20px;
        text-align:center;
     }

     .navbar-burger {
        color:#e3e342;
     }

    .hero .banner .banner-content .columns .column h1 img{
        width:100%;
        margin-left:13%;
    }

  }

    
  
  
  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
  
  @media (min-width: 320px) and (max-width: 480px) {
    
    .banner-content .columns .column#message-main{
        width:9em;
        text-align:center;
        margin-right:auto;
        margin-left:0%;
    }


    .container#menu-02 ul li{
        display:block;
    }

    .hero .banner img#space-banner{
        height:30em;
    }

    .header .navbar-menu {
        background-color:#000;
        font-size:20px;
        text-align:center;
     }

     .navbar-burger {
        color:#e3e342;
     }

    .hero .banner .banner-content .columns .column h1 img{
        width:100%;
        margin-left:13%;
    }
}