body{
    font-family:sans-serif;
	background-color: #37384e;
	margin: 0;
}

.navigation-bar {
    width: 100%;  /* i'm assuming full width */
    height: 130px; /* change it to desired width */
    background-color: #2c2d3f; /* change to desired color */
}
.logo {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
	margin-left: 20px;
    margin-right: 40px;
  !  margin-top: 15px;    /* if you want it vertically middle of the navbar. */
}
.navigation-bar > a {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    height: 100px;        /* if you want it to take the full height of the bar */
    line-height: 100px;    /* if you want it vertically middle of the navbar */
	margin-top: 15px;
	color: #FFFFFFA0;
	text-decoration: none;
	font-size: large;
}

.navigation-bar > a:hover {
   color: #FFFFFF;
} 

.breadcrumb{
   margin: 20px;
   color: #FFFFFFA0;
} 

.breadcrumb a{
   color: #FFFFFFA0;
   text-decoration: none;
} 
 
.breadcrumb a:hover{
   color: #FFFFFF;
}

.row{
  display:flex;
  flex-wrap:wrap;
}
div.shelf {
  background-color: #FFFFFF;
  margin: 5px;
  border: 1px solid #ccc;
  flex-basis: calc(25% - 15px);
 /* float: left;
  width: 180px;*/
}

div.shelf img {
  width: 100%;
  height: auto;
}

div.shelf img:hover {
  opacity: 0.5;
}

div.desc {
  padding: 15px;
  text-align: center;
}

/* Hiding the second picture right away */
.change-photos .change-photo:nth-of-type(2) {
  display: none;
}

/* When you hover your cursor over the parent change-photos class, the first picture is hidden, and the second is shown */

div.change-photos img:hover {
  opacity: 1;
}

.change-photos:hover .change-photo:nth-of-type(1) {
  display: none;
}

.change-photos:hover .change-photo:nth-of-type(2) {
  display: block;
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
}

.change-photos:hover {
  cursor: pointer;
 
}