/*USE LISTBOX1 TO INFINITY TO ADD LISTING BACKGROUND*/
#listBox1{
  background: url(../img/munster.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#listBox2{
  background: url(../img/hs1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#listBox3{
  background: url(../img/hs2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#listBox4{
  background: url(../img/hs3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#listBox5{
  background: url(../img/hs4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#listBox6{
  background: url(../img/hs5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
/*LIST BACKGROUND END*/






body{
      padding: 2px;
}
.alignLeft{
            text-align: left;
      }
      #listBodyContainer{
            background: transparent;
            display: flex;
            padding: 24px;
      }
      aside{
            width: 290px;
            height: 100%;
            position: sticky;
            top: 0;
            transition: 2.5s;
            background: black;
            color: white;
      }
      .displayNone{
            display: none;
      }
      #view{
            width: 100%;
            background: white;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
      }
      ul{
            background: transparent;
      }
      #filterCloseBtn{
            font-size: 18px;
            float: left;
            margin-left: 2px;
            cursor: pointer;
      }
      #filterSearchBtn{
            font-size: 24px;
            height: 34px;
            display: block;
            justify-content: left;
            margin-left: 4px;
            cursor: pointer;
      }
      #filterSearchBtnImage{
            width: 34px;
            margin-bottom: -14px;
      }
      .listBox{
            max-width: 500px;
            //height: 300px;
            border-radius: 4px;
            margin: 8px;
      }
      .propertyMenu{
            display: flex;
            flex-flow: row wrap;
            gap: 12px;
            max-width: 100%;
      }
      .listBoxTextsBox{
            background: rgba(255, 255, 255, 0.7);
            padding: 14px;
            max-width: 280px;
            height: fit-content;
      }
      .forSaleTag{
            color: red;
            padding-left: 4px;
      }
      .listBoxTexts{
            font-size: 14px;
            margin: 8px;
      }
      .listNumber{
            color: black;
      }
      .priseTag{
            background: black;
            color: white;
            padding: 4px;
            border-radius: 4px;
            font-size: 24px;
            max-width: fit-content;
            margin: 8px;
      }
      .propertyActionLink{
            background: white;
            font-size: 24x;
            padding: 4px;
            transition: 0.5s;
            border-radius: 4px;
      }
      .propertyActionLink:hover{
            background: gold;
            transition: 0.5s;
            cursor: pointer;
      }
      .downloadPDF{
            text-align: center;
            max-width: fit-content;
            margin: auto;
      }
      .DownloadBrochure{
            background: white;
            padding: 0.5px;
            border-radius: 2px;
      }
      .filterSearchMenuLink{ 
           transition: 0.5s;
           padding: 4px;
      }
      .filterSearchMenuLink:hover{
           background: lightskyblue;
           color: black; 
           border-radius: 4px;
           transition: 0.5s;
           padding: 4px;
           cursor: pointer;
      }

      .filterForSale{
            color: red;
      }


#listContact{
      background: white;
      position: fixed;
      top: 10%;
      right: 0px;
      z-index: 9;
      width: fit-content;
      justify-content: right;
      border-radius: 2px 0px 0px 2px;
      padding: 24px;
      margin: auto;
}

#listContactCloseBtn{
      float: right;
}

#listContactMenuOpenBtn{
      background: white;
      position: fixed;
      font-size: 24px;
      right: 0px;
      bottom: 0px;
      padding-right: 12px;
      padding-bottom: 12px;
      border: none;
      border-radius: 2px 2px 0px 0px;
      transition: 0.5s;
     border-bottom: 15px solid black;
}
#listContactMenuOpenBtn:hover{
      background: seagreen;
      color: white;
      transition: 1.5s;
      cursor: pointer;
}

.bInstructionH2{
            background: seagreen;
            color: black;
            max-width: 800px;
            margin: auto;
            border-radius: 4px 4px 0px 0px;
            font-size: 34px;
            margin-top: 124px;
      }
      .addSpaceContainer{
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 12px;
       max-width: 1120px;
       margin: auto;
       margin-top: 0px;
       //margin-bottom: 200px;
      }
      .addSpace{
       background: transparent;
       color: black;
       text-align: left;
       padding: 24px;
       border-radius: 0px 0px 4px 4px;
       border: 5px solid seagreen;
      }
      .addSpace h1{
       color: black;
      }
      .addSpace p{
       font-size: 24px;
      }
      .addSpaceSmall{
       font-size: 18px;
       padding: 12px;
       font-style: italic;
       color: grey;
      }
      #notice{
            background: seagreen;
            max-width: 800px;
            margin: auto;
            margin-bottom: 200px;
            font-size: 24px;
            border-radius: 4px;
            padding-bottom: 24px;
      }

      
@media only screen and (max-width: 600px) {
      #view{
            display: block;
      }
      aside{
            width: 100%;
            position: fixed;
            height: fit-content;
      }
      body{
           padding: 0px;
      }
      #listBodyContainer{
            background: transparent;
            display: flex;
            padding: 0px;
      }
}