.aside {
    background-color: rgba(41, 75, 178, .3);
    padding: 10rem 2rem 2rem;
  }
  .aside .category{
    position: fixed;
    width: calc(25vw - 2rem);
  }
  .myvideo{
    width: 100%;
    position: fixed;
    width: calc(24.15% - 1rem);
    left: 1rem;
    bottom: 16px;
  }
  .myvideo .carousel-indicators li{
    width: .75rem;
    height: .75rem;
    margin-bottom: -1rem;
  }
  .myvideo .carousel-control-next,
  .myvideo .carousel-control-prev{
    width: 30px;
    background-color: #0006;
    top: 37.5%;
    bottom: 37.5%;
  }
  .myvideo .carousel-control-next{
    border-radius: .3rem 0 0 .3rem;
  }
  .myvideo .carousel-control-prev{
    border-radius: 0 .3rem .3rem 0;
  }
  .myvideo .carousel-control-next:hover,
  .myvideo .carousel-control-prev:hover{
    background-color: #000A;
  }
  @media (min-width:768px) and (max-width:1200px) {
    .aside {
        padding: 1rem;
        padding-top: calc(144px + 1rem);
    }
    .aside .category{
        width: calc(25vw - 2rem);
    }
    .myvideo{
        width: 100%;
        position: fixed;
        width: calc(25% - 2rem);
        left: 1rem;
        bottom: 1rem;
    }
    .myvideo .carousel-control-next,
    .myvideo .carousel-control-prev{
        width: 30px;
        background-color: #0006;
        top: 30% !important;
        bottom: 30% !important;
    }
  }
  @media (min-width:576px) and (max-width:767px) {
    .aside {
        padding: calc(144px + 1rem) 1rem 0;
    }
    .aside .category{
        width: calc(30vw - 1rem);
        top:calc(54px + 1rem);
    }
     .myvideo{
        width: 100%;
        position: fixed;
        width: calc(33% - 2rem);
        left: 1rem;
        bottom: 1rem;
    }
    .myvideo .carousel-control-next,
    .myvideo .carousel-control-prev{
        width: 30px;
        background-color: #0006;
        top: 30% !important;
        bottom: 30% !important;
    }
  }
  @media (max-width:575px) {
    .aside .category{
        margin-top: 56px;
        position: unset;
        width: 100%;
    }
     .myvideo{
        position:unset;
        width: 100%;
    }
  }
  /* test start */
  
  /* Clear floats after rows */ 
  .main .container{
    margin: 10rem auto 1rem;
  }
  .main .container .waterfall:after {
      content: "";
      /* display: table; */
      clear: both;
    }
    .main .container .waterfall>.mycard {
        display: none !important;
    }
    .main .container .waterfall .mycard.show,
    .main .container .waterfall>.mycard.show {
      /* display: block; */
      display: flex !important;
    }
    .aside.waterfal>.mycard{
        /* display: inline-block; */
        display: inline-flex;
    }
    .aside.waterfal>.mycard>button.brand.mycard {
      display: none;
    }
    /* Style the buttons */
    .brand,
    .btn {
      border: none;
      outline: none;
      padding: .25rem 1rem;
      margin: .5rem .25rem;
      background-color: white;
      cursor: pointer;
    }
    .brand:hover,
    .btn:hover {
      background-color: rgba(41, 75, 178, .4);
      color: #FFF;
    }
    /* a:active, */
    .brand.active,
    .btn.active {
      background-color: rgba(41, 75, 178, 1);
      color: white;
    }
  
  /* test end */
  
  .main{
      padding-left: 0;
      padding-left: 0;
      padding-right: 0;
  }
  
  @media (max-width:575px) {
      body>.row{
          width: 100vw;
      }
      .aside{
          padding: 1rem;
          height: max-content;
      }
      .main {
          padding-left: 0;
          padding-right: 0;
      }
  }

  .videobox {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.videobox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}