@media screen {


  /* general */
#directory input[type="checkbox"]:hover,
#directory input[type="checkbox"] + label:hover {
  cursor: pointer;
}

  #directory h1{
    font-size: var(--wp--preset--font-size--xl);
    margin: 0 0 10px 0;
  }

  #directory .subtitle{
    margin-bottom: 20px;
  }

  #directory select{
    padding: 6px 8px;
    width: calc(100% - 20px);
    cursor:pointer;
    font-size:18px;
  }


  #directory{
    position:relative;
    z-index:2;
    padding:3%;
    padding-right:70px;
  }

  #directory #directory-search-bar{
    
  }

  #directory #directory-main{
    padding:50px 0;
  }



  /* main directory */
  #directory #directory-items{
    display:flex;
    flex-wrap:wrap;
    gap:30px;
  }

  #directory a.directory-item{
    flex: 1 1 250px;
    max-width:300px;
  }

  #directory a.directory-item:hover > .thumbs{
    border:1px solid #ccc;
  }

  #directory .thumbs img{
    display:block;
    
  }

  #directory .thumbs img, 
  #directory #main-image img, 
  #directory #thumbs img{
    border-radius:5px;
  }

  #directory .thumbs {
    position: relative;
  }

  #directory .thumbs .banner{
     position: absolute;
    z-index: 2;
    background-color: white;
    bottom: 5px;
    right: 5px;
    padding: 2px;
    color: black;
    font-size: 13px;

    line-height: 15px;
    text-align: center;
  }

  #directory .front-view{

  }

  #directory .back-view {
    position: absolute;
    top:0;
    left:0;
    transition-duration:600ms;
    opacity:0;
  }

  #directory .thumbs:hover .back-view {
    opacity:1;
  }

  #directory .info{
    color:black;
    margin-top: 5px;
  }

  #directory .info h6{
    margin:0;
    font-size: 20px;
    line-height: 22px;
    font-size: clamp(18px, 4vw, 20px);
    line-height: clamp(20px, 6vw, 22px);
  }

  #directory .info .extra-info{
   /* display: flex;
    justify-content: space-between;
    align-items: flex-start;*/
  }

  #directory .info .extra-info-box.supplier-collection{
    flex: 0 0 60%;
    font-weight:bold;
  }

  #directory .info .extra-info-box.supplier-collection, 
  #directory .info .extra-info-box.general-style{
    font-size: 13px;
  }

  #directory .info .extra-info-box.general-style span{

  }



  /* END main directory */




  /* single directory */
  #directory .directory-wrapper{
    
  }


  #directory #single{
    display:grid;
    grid-template-areas:
      "breadcrumbs breadcrumbs"
      "gallery description";
    grid-template-columns: 1fr 1fr; 
    gap:20px;
  }

  #directory #breadcrumbs{
    grid-area:breadcrumbs;
    padding:10px 0;
    border-bottom:1px solid #ccc;
    margin-bottom:20px;
  }

  #directory #gallery{
    grid-area: gallery;
    display:grid;
    grid-template-areas:"thumbs main-image";
    grid-template-columns:1fr 4fr;
    gap:15px;
  }

  #directory #gallery #thumbs{
    grid-area:thumbs;
    cursor:pointer;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  #directory #gallery #main-image{
    grid-area:main-image;
    overflow:hidden;
  }

  #directory #gallery #main-image:hover > img{

  }

  #directory #gallery #thumbs img{
    width:120px;
  }

  #directory #description{
    grid-area: description;
  }

  #directory #description .table-row{
    display:flex;
  }

  #directory #description .table-row span:first-child{
    flex:0 0 130px;
    font-weight:bold;
  }

  #directory #description .blurb{
    margin:10px 0;
  }



  #directory #item-navigation{
    display: flex;
    justify-content: space-between;
  }

  #directory #item-navigation.single-right {
    justify-content: flex-end; 
  }

  #directory #item-navigation.single-left {
    justify-content: flex-start; 
  }


  /* END single directory */



  /* Search and sidebar*/
  #filter-heading{
    padding:5px 15px;
    background-color:white;
    border:1px solid #fff;
    cursor:pointer;
    font-size:var(--wp--preset--font-size--l);
    display:flex;
    justify-content: space-between;
    align-items:center;
  }

   #filter-heading p{
    margin:0;
   }

   #filter-heading p#filter-heading-toggle{
    font-size: var(--wp--custom--mobile-font--xl);
   }


  #filter-form{
    background-color: #fafafa;
    padding: 20px;
    display:none;
  }


  #filter-form p.filter-title{
    font-size:var(--wp--preset--font-size--l);
    margin:0;
  }

  #directory .center{
    text-align:center;
  }

  #filter-form .filter-box-content{
    padding: 10px 0;
  }






  #filter-form #filter-boxes {
    display: grid;
    grid-template-areas:
      "supplier supplier supplier"
      "status style trend";
    grid-template-columns: 1fr 2fr 2fr;
    gap: 15px;
  }

  #filter-form #filter-boxes #filter-supplier{
    grid-area: supplier;
  }

  #filter-form #filter-boxes #filter-status{
    grid-area: status;
  }

  #filter-form #filter-boxes #filter-style{
    grid-area: style;
  }

  #filter-form #filter-boxes #filter-trend{
    grid-area: trend;
  }


  #filter-form #filter-boxes .filter-box{
    background-color: white;
    padding: 10px;
  }

  #directory .filter-box-content.checkbox-wrap{
    display:flex;
    flex-wrap: wrap;
    gap: 2px 15px;
  }

  #directory .filter-box-content .checkbox-box{
    flex: 0 0 148px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
  }

  #directory .filter-box-content .checkbox-box label{
    display:block;
    line-height:var(--wp--preset--font-size--normal)
  }





  #directory #suppliers{
    display:flex;
    justify-content: center;
    gap: 25px;
    background-color: #f6f6f6;
    padding: 19px;
  }

  #directory #suppliers .brands{
    flex:1;
  }

  #directory #suppliers .brand-search{
    flex:1;
  }

  #directory #suppliers .supplier-logo{
    display: flex;
    align-items: center;
    gap:7px;
    background-color:white;
    padding:5px;
    border:1px solid #fff;
  } 

  #directory #suppliers .supplier-logo:hover{
    border:1px solid #000;
  }

  #directory #suppliers .supplier-logo img{
    max-height:50px;
  } 




  #directory .collection-checkboxes{
    margin-top:15px;
  }

  #directory .collection-checkboxes .collections-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
  }

  #directory .collection-checkboxes label{
    line-height:var(--wp--preset--font-size--normal)
  }




  #directory #submit-box{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  #filter-form  input#filter-search{
    padding: 10px 25px;
    font-size:var(--wp--preset--font-size--m);
    border: 0;
    border-radius: 3px;
    background-color: white;
    cursor: pointer;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #ccc;
  }

  #filter-form  input#filter-search:hover{
    border:1px solid #000;
  }




} /* end media screen */