html {
  scroll-behavior: smooth;
}

ol li {margin-bottom:20px;}
ol li h4 {font-weight:700;font-size:1rem; letter-spacing: 0.00938em;}
ol li p  {font-weight: 400;margin-bottom:20px;}


h1 {
  background: linear-gradient(45deg , #333 40%, #f0d8e8 ,#333 60%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate 7s 1 linear;
    line-height:1.2em;
    font-size:3.2rem;
}

.navbar-item img {max-height:3.75em;}
#nav .navbar-item {color:#444;transition: color .2s;}
#nav .navbar-item:hover, 
#nav.navbar-brand:focus {
  background-color: transparent;
  color:#222;
  transition: color .3s;
}
.navbar.has-shadow {box-shadow:0 0 12px 0 #37373733;}

.hero-body {
  padding-top:200px;padding-bottom:125px;
}
.features svg {max-width:140px;}
.features .cls-1, .features .cls-2 {fill:#C3CADF!important;}
.modal-content {750px;}
  
  
  .text {
    display: block;
    margin-top: 75px;
    margin-left: -30px;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .25;
    animation: pulse 2s linear alternate infinite;
  }
  
  @keyframes pulse {
    to {
      opacity: 1;
    }
  }

  #header-hero {max-width: 300px;
    overflow: visible;}
      .nexx {
        fill: url(#skyGradient);
        transform: rotate3d(111, 21, 21, 0deg);
        animation: rotation 3.5s 1 ease;
      }



  @media screen and (min-width: 1408px) {
  .container:not(.is-max-desktop):not(.is-max-widescreen) {
      max-width: 1200px!important;
  }
  }

  @media(max-width: 767px) {
    .reverse-columns {
      flex-direction: column-reverse;
      display: flex;
    }
    body {overflow-x: hidden;}
    .navbar-burger {margin-top:8px;}

    #btn-login {width:100%;}
    .modal-content {500px;}
    h1 {font-size:2.4rem;}

    .hero-body {
        padding-top:125px;padding-bottom:100px;
      }
    #header-hero {max-width: 200px;}
  }


   @media(min-width: 2000px) {
  .hero-body {
    padding-top:250px;padding-bottom:150px;
  }
  }

  @media screen and (min-width: 1921px) {
  .column.is-half-desktop {
    flex: none;
    width: 68.6666%;
}
}

@media screen and (min-width: 1700px) {
  .column.is-half-desktop {
    flex: none;
    width: 65%;
}
}


@keyframes animate{
    0%{
        background-position: 0 0;
    }
    65%{
        background-position: 0 0;
    }
    100%{
        background-position: -200% 0;
    }
}

@keyframes rotation {
  from {
    transform: rotate3d(111, 21, 21, 223deg);
  }
  to {
    transform: rotate3d(111, 21, 21, 0deg);
  }
}