@import url(http://fonts.googleapis.com/css?family=Encode+Sans:600);


body {
   margin: 0;
   padding: 0;
   font-family: 'Encode Sans', Calibri, Arial, sans-serif;
	color: #b3b9bf;
	background: #525c64;
}

.nav-bar [rel="home"] {
    color: 
    #fff;
    text-decoration: none;
    font-size: 1.8rem;
	line-height: 2.5;
    display: inline-block;
	padding: 5px;

}

.logo {
	display: block;
	margin: 1rem 0;
}

.hamburger {
    color: #eee;
    margin: 1rem 0;
}




.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-navicon::before, .fa-reorder::before, .fa-bars::before {
    content: "\f0c9";
}

.fa-2x {
    font-size: 2em;
}



.wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
}

.box {
  aspect-ratio:1;
  position: relative;
  display: grid;
  align-items: flex-end;
  justify-items: center;
  overflow: hidden;
  
    transition: all 800ms cubic-bezier(0.000, 0.000, 0.070, 0.895);
}

.box img {
  object-fit: cover;
  max-height: 100%;
  width: 100%;
	    transition: all 800ms cubic-bezier(0.000, 0.000, 0.070, 0.895);

}

.titleBox { 
  position: absolute;
  color: transparent;
  margin: 10px;
  transition: all 500ms cubic-bezier(0.000, 0.000, 0.070, 0.895);
 
}

.box:hover img {
    filter: brightness(40%);
}

.box:hover .titleBox {
	color: #fff;

}