body {
    margin: 0;
    padding: 0;
    background-color: #f4eee0;
    height: 100%;
}

.projek {
	height: 1500px;
    padding: 30px 0;
    box-sizing: border-box;
    width: 100%;
	    }

ul {
	        list-style: none;
	        margin-left: -40px;
	    }
	    
ul li {
	        display: inline-block;
    margin: 0 5px;
	    }
	    
ul li a {
	        font-family: 'Karla';
	        font-size: 12px;
	        text-transform: uppercase;
	        margin-right: 8px;
	        color: black;
	        -webkit-transition-duration: 0.5s;
	        -moz-transition-duration: 0.5s;
	        -o-transition-duration: 0.5s;
	        -ms-transition-duration: 0.5s;
	        transition-duration: 0.5s;
	    }
	    
ul li a:hover {
	        -webkit-transform: scaleY(0);
	        -moz-transform: scaleY(0);
	        -o-transform: scaleY(0);
	        -ms-transform: scaleY(0);
	        transform: scaleY(0);
	        -webkit-transition: all .6s;
	        -moz-transition: all .6s;
	        -o-transition: all .6s;
	        -ms-transition: all .6s;
	        transition: all .6s;
	        letter-spacing: 1.5;
	    }
	    
 ul li a.selected {
	        padding: 3px 5px;
	        background-color: black;
	        color: #ffcccc;
	        border-radius: 3px;
	    }
	    
	    section {
	        width:calc((.col-10 + 30px) * 3);
	        box-sizing:border-box;
	        transform:translate(0px,0px);
	    }

.item a {
    text-decoration: none;
}
.category {
    font-family: 'Karla';
    font-size: 12px;
    color: black;
    margin-top: 50px;
    text-transform: uppercase;
}
.title {
    font-family: 'Ogg';
    color: black;
    font-size: 17px;
} 
.item {
    position: absolute;
    width:280px;
    height:200px;
    box-sizing:border-box;
    overflow-y: hidden;
    
    margin:12px 20px 0px 0px;
}

.boxu {
    width:280px;
    height:140px;
    padding:12px 10px 8px 10px;
    border-radius:5px;
    
    box-sizing:border-box;
    text-decoration:none;
    background-color:#efd3c5; 
    display:inline-block;
    box-shadow:inset 0px 0px #efd3c5; 
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    
}

.boxu:hover {
box-shadow:inset -280px 0px #000000;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}

.year {
    text-align:center;
margin-top:-85px;
font-weight:400;
font-family: 'Ogg';
color: black;
font-size:36px;
text-decoration:none;
display:block;
    opacity:0;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
transition: all .6s;
} 

.year:hover {
    opacity: 0.9;
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
   section {
       width:calc((.col-10 + 15px) * 3);
   }
   .projek {
	height: 2000px;
   }
    .item {
    width:220px;
    height:200px;
  }
    .boxu {
    width:220px;
    height:140px;
  }  
    .item img {
    max-width:98%;
    object-fit:cover;
}}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
   section {
       width:calc((.col-10 + 15px) * 3);
   }
   
   .projek {
	height: 2000px;
   }
   .item {
    width:220px;
    height:200px;
  }
    .boxu {
    width:220px;
    height:140px;
  }  
    .item img {
    max-width:98%;
    object-fit:cover;
}}

@media screen and (max-width: 920px) {
  section {
       width:calc((.col-10 + 15px) * 3);
   }
   .projek {
	height: 2000px;
   }
  .item {
    width:220px;
    height:200px;
  }
    .boxu {
    width:220px;
    height:140px;
  }  
    .item img {
    max-width:98%;
    object-fit:cover;
}
}

.item img {
    border-radius:7px;
    margin-top:-2px;
    width:260px;
    height:120px;
    object-fit:cover;
    -webkit-transition: all .6s;
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
transition: all .6s;
}

.item img:hover {
    filter: blur(5px);
}