@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@media only screen and (max-width: 600px) {
  .mobonly {
    display: block;
  }
  
  .home-title {
  position: relative;
  font-size: 7rem !important;
  color: white;
  font-family: 'Anton', sans-serif;
  z-index: 10;
}


  .join {
    flex-direction: column;
  }

  .join-art {
    width: 98%;
  }

  .comp-img {
    display: none;
  }

  .logo-spacer {
    display: none;
  }

  #title {
    display: none;
  }

  .mob-bar {
    z-index: 1 !important;
    cursor: pointer;
    position: absolute;
    top:10px;
  }

  .mob-bar-home{

      top:20px !important;
  }

  .title {
    text-indent: 60px;
    font-size: 1.25rem;
  }

  nav {
    position: relative;
  }

  .home-nav-container,
  .nav-dock {
    font-size: 1rem;
    box-shadow: none !important;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(31,31,31,1) 100%);
    z-index: 1100 !important;
    display: flex !important;
    position: fixed !important;
    top: 0px !important;
    bottom: 0px !important;
    left: -200px;
    width: 200px !important;
    background-color: #000 !important;
    height: auto !important;
    margin: 0px !important;
    border-right: 1px solid var(--grey);
  }

  .home-nav,
  .nav-main {
    flex-direction: column;
    border: none;
    margin-top:20px;
    /* z-index: 1100; */
  }

  .mobtitle{
    position: absolute !important;
    bottom: 10px !important;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
  }

  .navclose{
    position: relative;
    text-align: right;
    align-self: flex-end;
    margin-top: -12px;
    margin-right: 10px;
    width:30px;
    cursor: pointer;
  }

  nav>div>a {
    display: block;
    text-decoration: none;
    font-size: 1.1em;
    font-family: 'Rubik', sans-serif;
    color: white;
    justify-content: flex-start;
    width: 100% !important;
  }

  nav>div>a:hover {
    text-decoration: none;
    color: var(--white);
    font-size: 1.1em;
    font-family: 'Rubik', sans-serif;
    background-color: var(--grey);
    width: 100% !important;
  }

  nav>div {
    /* height: auto; */
    display: flex;
    justify-content: flex-start;
    font-family: sans-serif;
    align-items: center;
    width: 90%;

  }
  .home-container{
      margin-top:80px;
      flex-direction:column;
  }

  .nomob {
    display: none !important;
  }
  .mobtext{
    font-size: .5em !important;
  }

  .ban-dundee, .ban-westray {
    background-position: center -100px;
  }

  .ban-drums {
    background-position: -100 -210px;
  }
  
  footer {
    flex-direction:column;
    padding: 5px;
  }
  
  footer>div{
      margin-left:10px !important;
  }
  
  footer>div>blockquote{
      margin-left:0px !important;
  }
  
  .home-footer{
      position:absolute;
      bottom:0px;
      left:0px;
      right:0px;
      height:30px;
  }
  
  .boldtitle{
        position: relative;
  font-size: 4rem !important;
  color: white;
  font-family: 'Anton', sans-serif;
  flex-grow:1;
  justify-content: flex-end;
    }

    .card-container{
      margin-bottom:15px;
    }

.media-container {
    display:flex;
    max-width: 70%;
    align-self: center;
    justify-self: center;
    flex-wrap: wrap;
}

.media-cointainer-vid {
    overflow-x: hidden;
    width:400px;
    margin-left: 0px;
}
.media-cointainer-img {
    overflow-x: hidden;
    width:400px;
    margin-left: 0px;
}

.kavs{
    display:inline-block;
    margin-left:75px;
}
    
}