.scroll-container {
    overflow: hidden;
    width: 50vw;
    height: 30vw;
    position:relative;
    bottom: 10vw;
    right: 10.5VW;
    transform: rotate(70deg)
  }


  .marqueeStyle {
    display:inline-block;
    /* Apply animation to this element */
    animation: scrolling-left1 30s linear infinite;
  }

  /* scrolling-left is continuous/repeatly text */
  @keyframes scrolling-left1 {
      0% {transform: translateX(-10%);
}
        100% {transform: translateX(-112%);
}
  }


  .marqueeStyle2 {
    display:inline-block;
    /* Apply animation to this element */
    animation: scrolling-left2 40s linear infinite;
  }

  /* scrolling-left is continuous/repeatly text */
  @keyframes scrolling-left2 {
      0% {transform: translateX(-112%);
}
        100% {transform: translateX(-10%);
}
  }

  .marqueeStyle3 {
    display:inline-block;
    /* Apply animation to this element */
    animation: scrolling-left3 60s linear infinite;
  }

  /* scrolling-left is continuous/repeatly text */
  @keyframes scrolling-left3 {
      0% {transform: translateX(-10%);
}
        100% {transform: translateX(-112%);
}
  }

  .marqueeStyle4 {
    display:inline-block;
    /* Apply animation to this element */
    animation: scrolling-left4 50s linear infinite;
  }

  /* scrolling-left is continuous/repeatly text */
  @keyframes scrolling-left4 {
      0% {transform: translateX(-112%);
}
        100% {transform: translateX(-10%);
}
  }


  .text {
    font-weight:300;
    letter-spacing: 0.2vw;
    text-transform: uppercase;
    font-family: 'Raleway';
    font-size: 1.17vw;

  }

  #rotatingText {
    animation-name: rotate-circle;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  @keyframes rotate-circle {
    to {
      transform: rotate(1turn);
    }
  }

  .main {
    display: grid;
    align-items: center;
    justify-items: center;
    transition: 1s ease;
    transform: scale(0.8);
  }

  .main:hover {
    transform: scale(1);
  }

  .main .oi  {
    position: absolute;
  }

  .main .oi svg {
    width: 3vw;
    height: 3vw;
  }

  .uku {
 width: 15vw;
  }


  .b6 a {
    box-shadow: inset 0 0 0 0 #212529;
    color: #212529;
    padding: 0 .25rem;
    margin: 0 -.25rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  }
  .b6 a:hover {
    color: #fff;
    box-shadow: inset 30vw 0 0 0 #212529;;
  }

  /* Presentational styles */
  .b6 a {
    color: #212529;
    font-family: 'Montserrat';
    font-size: 7vw;
    font-weight: 1000;
    text-decoration: none;
    margin: 0;
  }


  /*---------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:600px) {

    .scroll-container {
        overflow: hidden;
        width: 68vw;
        height: 40vw;
        position:relative;
        bottom: 5vw;
        right: 20VW;
        transform: rotate(70deg)
      }


      .marqueeStyle {
        display:inline-block;
        /* Apply animation to this element */
        animation: scrolling-left1 30s linear infinite;
      }

      /* scrolling-left is continuous/repeatly text */
      @keyframes scrolling-left1 {
          0% {transform: translateX(-10%);
    }
            100% {transform: translateX(-112%);
    }
      }


      .marqueeStyle2 {
        display:inline-block;
        /* Apply animation to this element */
        animation: scrolling-left2 40s linear infinite;
      }

      /* scrolling-left is continuous/repeatly text */
      @keyframes scrolling-left2 {
          0% {transform: translateX(-112%);
    }
            100% {transform: translateX(-10%);
    }
      }

      .marqueeStyle3 {
        display:inline-block;
        /* Apply animation to this element */
        animation: scrolling-left3 60s linear infinite;
      }

      /* scrolling-left is continuous/repeatly text */
      @keyframes scrolling-left3 {
          0% {transform: translateX(-10%);
    }
            100% {transform: translateX(-112%);
    }
      }

      .marqueeStyle4 {
        display:inline-block;
        /* Apply animation to this element */
        animation: scrolling-left4 50s linear infinite;
      }

      /* scrolling-left is continuous/repeatly text */
      @keyframes scrolling-left4 {
          0% {transform: translateX(-112%);
    }
            100% {transform: translateX(-10%);
    }
      }


      .text {
        font-weight:300;
        letter-spacing: 0.2vw;
        text-transform: uppercase;
        font-family: 'Raleway';
        font-size: 4.9vw;

      }

      #rotatingText {
        animation-name: rotate-circle;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }

      @keyframes rotate-circle {
        to {
          transform: rotate(1turn);
        }
      }

      .main {
        display: grid;
        align-items: center;
        justify-items: center;
        transition: 1s ease;
        transform: scale(0.8);
      }

      .main:hover {
        transform: scale(1);
      }

      .main .oi  {
        position: absolute;
      }

      .main .oi svg {
        width: 6vw;
        height: 6vw;
      }

      .uku {
     width: 40vw;
      }


      .b6 a {
        box-shadow: inset 0 0 0 0 #212529;
        color: #212529;
        padding: 0 .25rem;
        margin: 0 -.25rem;
        transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
      }
      .b6 a:hover {
        color: #fff;
        box-shadow: inset 30vw 0 0 0 #212529;;
      }

      /* Presentational styles */
      .b6 a {
        color: #212529;
        font-family: 'Montserrat';
        font-size: 8vw;
        font-weight: 1000;
        text-decoration: none;
        margin: 0;
      }


}