@media screen and (max-width: 700px),
        screen and (max-height: 700px){
  video#myCamVideo {
    width: 150px;
  }

  .sidebar {
    width: 20%;
    min-width: 200px;
    position: absolute;
    display: block;
    right: 0;
    height: 80%;

    &> div {
      max-height: 120px;
      min-width: 200px;
    }

    .video-container{
      min-width: 200px;
    }
  }

  .btn-cam-action {
    &:hover{
      transform: translateY(20px);
    }
    div {
      &:hover {
        background-color: #666;
      }

      bottom: 30px;

      &.btn-micro {
        right: 0;
      }

      &.btn-monitor {
        right: 130px;
      }

      &.btn-video {
        right: 65px;
      }
    }
  }

  .main-section {
    position: absolute;
    width: 100%;
    min-width: 400px;

    & > div {
      z-index: 2;
    }
  }
}

@media (max-aspect-ratio: 1/1) {

  #main-container {
    display: flex;
    flex-direction: column-reverse;
  }


  #cowebsite {
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column-reverse;

    &.loading {
      transform: translateY(-90%);
    }
    &.hidden {
      transform: translateY(-100%);
    }

    main {
      height: 100%;
    }


    aside {
      height: 30px;
      cursor: ns-resize;
      flex-direction: column;

      img {
        cursor: ns-resize;
      }
    }

    .top-right-btn {
      &#cowebsite-close {
        right: 0;
      }
      &#cowebsite-fullscreen {
        left: 0;
      }
    }
  }
}