/* FILTERS*/

  ol , li{
    list-style: none;
  }

  input[type="radio"] {
    position: absolute;
    display: none;
  }
  
  .filters {
    text-align: right;
    width:90%;
    padding:2px;
  }

  
  .filters * {
    display: inline-block;
  }
  
  .filters li{
    min-width:60px;
    font-family: 'JF Flat Regular', sans-serif;
    margin: 3px;
    background-color: #fff;
    border-radius: 50px;
    color: #000;
    border:#2bc069 solid 2px;
 }
  .filters label {
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.1s;
    font-size: 14px;
    text-align: center;
    padding: 6px 14px;
  }
  
  .filters li:hover {
    background:#2bc069;
    color: #fff;
  }

  .filters li:focus {
    background:#2bc069;
    color: #fff;
  }

  .pro-right .btn {
    width: 32%;
  }

  
  
  /* FILTERED ELEMENTS (POSTS)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .posts {
    display: flex;
    flex-direction: column;
    width:70%;
    height: auto;   
    padding:0;
    margin: 0;
    list-style: none;
  }
  .post{
    padding:0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

  .project{
    width: 100%;
    height:320px;
    margin:14px 0px;
  }
  .pro-right .title{
    height:auto;
    padding: 12px 0px;
  }
  .pro-right .details{
    height:130px;
  }
  
  
  /* FILTERING RULES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  [value="waiting"]:checked ~ .filters [for="waiting"]{
    background: #2bc069;
    color: #fff;
  }
  [value="posted"]:checked ~ .filters [for="posted"]{
    background: #2bc069;
    color: #fff;
  }

  [value="finished"]:checked ~ .filters [for="finished"]{
    background: #2bc069;
    color: #fff;
  }
  
  [value="waiting"]:checked ~ .posts .post:not([data-category~="waiting"]),
  [value="posted"]:checked ~ .posts .post:not([data-category~="posted"]),
  [value="finished"]:checked ~ .posts .post:not([data-category~="finished"]){
    display: none;
  }

  /* Mobile
  –––––––––––––––––––––––––––––––––––––––––––––––––– */


  @media (max-width: 900px) {
    .posts {
      width:95%; 
    }

    .project{
      width: 96%;
      height:420px;
    }

    .filters li{
      margin: 6px;
    }
    .filters label {
      font-size: 14px;
      padding: 8px 18px;
    }

    .pro-right .title{
       padding:12px 0px;
       margin:0;
       height:auto;
    }

    .pro-right .details{
       height:220px;
    }

    .pro-right .icons{
      padding:0;
      margin:0;
   }

   .pro-right .btn {
    width: 70%;
    padding: 10px 20px;
    font-size:15px;
  }


  }