html
{
  scroll-behavior: smooth;
  background-color: #212324;
}

::-webkit-scrollbar {
  width: 5px;
}
  ::-webkit-scrollbar-track {
  background: #212324;
}
  ::-webkit-scrollbar-thumb {
  background: #888;
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {

  background: #555;
}

/*.navbar-item:hover{
  background-color: #2123248f;
}*/

.contentDiv {
    position: relative;
}

@media only screen and (max-width: 1024px){
.navbar-menu{
  background-color: #19191a59;
}
}

.text-white:hover{
  color:green;
}

a.navbar-item:hover {
  background-color: #24242478;
}

@keyframes bouncing {
    0% {bottom: 0;}
    50% {bottom: 20px;}
    100% {bottom: 0;}
}

@media screen and (max-width: 1023px)
.navbar-menu {
  background-color: green;
}

.a
{
  color: white;
}
.arrow {
    animation: bouncing 2s infinite ease-in-out;
    bottom: 0;
    display: block;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
}

@media screen and (max-width: 768px) {
  li:not(.is-active) > a > span:not(.icon) {
    visibility: hidden;
    position:  absolute;
  }

  nav.tabs li:not(.is-active) {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .tabs .icon {
    margin-left: 0.5em;
  }
}

.tabs li {
  transition: flex-grow 1s ease;
}

.tabs ul {
	flex-shrink: 1;
	flex-wrap: wrap;
	border-bottom-color: transparent;
}
.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}


@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');

body{
  margin:0;
  padding:0;
  background-color: #212324;
}
h1{
  font-family: 'Montserrat', sans-serif;
  font-size:45px;
  font-weight:700;
  text-align:center;
  color:#2c3e50;
}
h2{
  font-family: 'Montserrat', sans-serif;
  font-size:25px;
  font-weight:400;
  text-align:center;
  color:#2c3e50;
}
.row{
  width:100%;
  height:80vh;
  padding:0;
  margin:0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
}

.header-main-image {
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),url("http://orig14.deviantart.net/7584/f/2015/181/2/7/flat_mountains_landscape_by_ggiuliafilippini-d8zdbco.jpg"); /*https://youtu.be/qx2dgw8lpRY*/
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #999;
}


.header-image {
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),url("https://img5.goodfon.com/wallpaper/nbig/d/22/yoan-agostini-by-yoan-agostini-flat-design-background-minima.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #999;
}

.link{
    color: #0066CC;
}

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
}

#myDiv {
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-word;
}


@keyframes image_blur {
  from{backdrop-filter : blur(0px);}
  to{backdrop-filter : blur(10px);}
}

@keyframes text_appear{
  from{opacity: 0}
  to{opacity: 1}
}



/*<ul class="content__container__list">
      <li class="content__container__list__item">world !</li>
      <li class="content__container__list__item">bob !</li>
      <li class="content__container__list__item">users !</li>
      <li class="content__container__list__item">everybody !</li>
    </ul>*/

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 160px;
  overflow:hidden;

  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  color: #ecf0f1;

  &__container {
    font-weight: 600;
    overflow: hidden;
    height: 40px;
    padding: 0 40px;

    &:before {
      content: '[';
      left: 0;
    }

    &:after {
      content: ']';
      position: absolute;
      right: 0;
    }

    &:after, &:before {
      position: absolute;
      top: 0;

      color: #16a085;
      font-size: 42px;
      line-height: 40px;

      -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }

    &__text {
      display: inline;
      float: left;
      margin: 0;
    }

    &__list {
      margin-top: 0;
      padding-left: 110px;
      text-align: left;
      list-style: none;

      -webkit-animation-name: change;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      animation-name: change;
      animation-duration: 10s;
      animation-iteration-count: infinite;

      &__item {
        line-height:40px;
        margin:0;
      }
    }
  }
}

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-webkit-keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-o-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-o-keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-moz-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-moz-keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
<<<<<<< HEAD
}


#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 3px;
    background: rgb(0, 0, 0);
    background: rgb(0 0 0 / 19%);
    width: 45px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

.messageEclate{
  position: relative;
  opacity: 0;
}

@keyframes slideApp{
  from{
    transform: translateX(-10px);
    opacity: 0;
  }
  to{
    transform: translateX(10px);
    opacity: 1;
  }
}

@keyframes slidePHW{
  from{
    transform: translateY(10px);
    opacity: 0;
  }
  to{
    transform: translateY(-10px);
    opacity: 1;
  }
}

.contentMessageEclate{
  position: relative;
}