* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.topnav {
  overflow: visible;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #FFFFFF;
  border-bottom: 2px solid #E2ECF7;
  z-index: 1;
}

.topnav a {
  float: right;
  color: #3898EC;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  transition: background-color .2s ease, color .2s ease;
}

.topnav a.title {
  float: left;
  color: #3898EC;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}


.topnav a:hover {
  background-color: #3898EC;
  color: #F7F7F7FF;
}

.topnav a.active {
  background-color: #3898EC;
  color: #E2ECF7;
}

.nav-dropdown {
  float: right;
  position: relative;
  display: block;
}

.nav-dropdown .dropbtn {
  cursor: pointer;
}

/* Dropdown content (hidden by default) */
.nav-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #E2ECF7;
  min-width: 170px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top: 56px;
}

/* Links inside the dropdown */
.nav-dropdown-content a {
  color: #3898EC;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  float: none;
}

/* Change color on hover */
.nav-dropdown-content a:hover {
  background-color: #3898EC;
  color: #E2ECF7;
}

/* Show the dropdown menu on hover */
.nav-dropdown:hover .nav-dropdown-content {
  display: block;
}

.nav-dropdown:hover .dropbtn {
  background-color: #3898EC;
  color: #E2ECF7;
}

.menu {
  position: fixed;
  display: inline-block;
  top: 30px;
  right: 0px;
  z-index: 1;
}

.menu .dropdown {
  border: none;
  background-color: #FFFFFF;
  display: none;
}

.dropdownMenu {
  display: none;
  margin-top: 1px;
  margin-left: -48px;
  background-color: #E2ECF7;
  min-width: 3%;
  z-index: 0;
}

.dropdownMenu a {
  color: #3898EC;
  padding: 14px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
  display: block;
}

.dropdownMenu a.selected {
  background-color: #3898EC;
  color: #E2ECF7;
}

.dropdownMenu a:hover {
  background-color: #3898EC;
  color: #E2ECF7;
}

.menu:hover .dropdownMenu {
  display: block;
}

.menu:hover .dropdown {
  background-color: #f7f7f7ff;
}

.menu img {
  width: 60px;
  margin-top: -25px;
  margin-right: 6px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 60px;
  width: 100%;
  background-color: #FFFFFF;
  border-top: 2px solid #E2ECF7;
  text-align: center;
}

.audioPlayer {
  margin-left: 36%;
}

.button {
  display: block;
  float: left;
  margin-top: 15px;
  margin-left: 1%;
  width: 30px;
}

.button:hover {
  opacity: 0.6;
}

.trackInfo {
  display: block;
  float: left;
  margin-top: 21px;
  margin-left: 3%;
  margin-right: 3%;
  width: 150px;
  color: black;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.container {
  padding-top: 45px;
  padding-bottom: 8.1%;
  margin: 1.5%;
	display: grid;
	grid-column-gap: 1.5%;
  grid-row-gap: 1.8%;
	grid-auto-flow: dense;
	grid-template-columns: repeat(4, 23.91%);
  grid-template-rows: repeat(4, 24%);
}

.container img {
opacity: 1;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}

.item {
  display: grid;
  position: relative;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 24px;
  font-weight: 600;
  opacity: 0;
  transition: .5s ease;
  text-align: center;
  width: 100%;
  pointer-events: none;
}

.item:hover img {
  opacity: 0.15;
}

.item:hover .middle {
  opacity: 1;
}

.item001, .item002, .item003, .item004, .item005,
.item006, .item007, .item008, .item009, .item010, 
.item011, .item012, .item013, .item014, .item015, .item016, .item017 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item001 { grid-column: 1 / 3; grid-row: 1 / 2; }
.item002 { grid-column: 3 / 5; grid-row: 1 / 2; }
.item003 { grid-column: 1 / 2; grid-row: 2 / 3; }
.item004 { grid-column: 2 / 4; grid-row: 2 / 3; }
.item005 { grid-column: 4 / 5; grid-row: 2 / 3; }
.item006 { grid-column: 1 / 3; grid-row: 3 / 4; }
.item007 { grid-column: 3 / 5; grid-row: 3 / 4; }
.item008 { grid-column: 1 / 2; grid-row: 4 / 5; }
.item009 { grid-column: 2 / 4; grid-row: 4 / 5; }
.item010 { grid-column: 4 / 5; grid-row: 4 / 5; }
.item011 { grid-column: 1 / 3; grid-row: 5 / 6; }
.item012 { grid-column: 3 / 5; grid-row: 5 / 6; }
.item013 { grid-column: 1 / 2; grid-row: 6 / 7; }
.item014 { grid-column: 2 / 4; grid-row: 6 / 7; }
.item015 { grid-column: 4 / 5; grid-row: 6 / 7; }
.item016 { grid-column: 1 / 3; grid-row: 7 / 8; }
.item017 { grid-column: 3 / 5; grid-row: 7 / 8; }

@media screen and (max-width: 1200px){
  .audioPlayer {
    margin-left: 30%;
  }

  .container {
    padding-top: 63px;
    padding-bottom: 105px;
    margin: 1.5%;
    bottom: 0px;
  	display: grid;
  	grid-column-gap: 1.5%;
    grid-row-gap: 1.8%;
  	grid-auto-flow: dense;
  }
}

@media screen and (max-width: 666px){
  .topnav a.page {
    display: none;
  }
  
  .nav-dropdown {
    display: none;
  }

  .menu .dropdown {
    /* display: contents; */
  }

  .dropdown:hover img {
    /* display: inline-block; */
  }

  .audioPlayer {
    margin-left: 24%;
  }

  .middle {
    font-size: 18px;
  }

  .container {
    padding-top: 63px;
    padding-bottom: 87px;
    margin: 1.5%;
    bottom: 0px;
  	display: grid;
  	grid-column-gap: 1.5%;
    grid-row-gap: 1.8%;
  	grid-auto-flow: dense;
  }
}

@media screen and (max-width: 600px) {
  .audioPlayer {
    margin-left: 18%;
  }

  .middle {
    font-size: 24px;
  }
  .container {
    padding-top: 60px;
    padding-bottom: 144px;
    margin: 1.5%;
  	display: grid;
  	grid-gap: 3%;
  	grid-auto-flow: dense;
  	grid-template-columns: repeat(4, 22.8%);
  }
}

@media screen and (max-width: 666px) {
  .container { padding-bottom: 80px; } /* clears fixed footer on mobile */
}

@media screen and (max-width: 510px) {
  .audioPlayer {
    margin-left: 9%;
  }

  .container {
    padding-top: 75px;
    padding-bottom: 220px;
  	display: grid;
  	grid-gap: 3%;
  	grid-auto-flow: dense;
  	grid-template-columns: repeat(4, 22.8%);
    grid-template-rows: repeat(9, 11%);
  }

  .item001 { grid-column: 1 / 5; grid-row: 1 / 2; }
  .item002 { grid-column: 1 / 5; grid-row: 2 / 3; }
  .item003 { grid-column: 1 / 3; grid-row: 4 / 5; }
  .item004 { grid-column: 1 / 5; grid-row: 3 / 4; }
  .item005 { grid-column: 3 / 5; grid-row: 4 / 5; }
  .item006 { grid-column: 1 / 5; grid-row: 5 / 6; }
  .item007 { grid-column: 1 / 5; grid-row: 6 / 7; }
  .item008 { grid-column: 1 / 3; grid-row: 8 / 9; }
  .item009 { grid-column: 1 / 5; grid-row: 7 / 8; }
  .item010 { grid-column: 3 / 5; grid-row: 8 / 9; }
  .item011 { grid-column: 1 / 5; grid-row: 9 / 10; }
  .item012 { grid-column: 1 / 5; grid-row: 10 / 11; }
  .item013 { grid-column: 1 / 3; grid-row: 12 / 13; }
  .item014 { grid-column: 1 / 5; grid-row: 11 / 12; }
  .item015 { grid-column: 3 / 5; grid-row: 12 / 13; }
  .item016 { grid-column: 1 / 5; grid-row: 13 / 14; }
  .item017 { grid-column: 1 / 5; grid-row: 14 / 15; }
}

@media screen and (max-width: 330px) {
  .trackInfo {
    margin-left: 1%;
    margin-right: 1%;
  }

  .audioPlayer {
    margin-left: 6%;
  }

  .container {
    padding-top: 78px;
    padding-bottom: 165px;
  	display: grid;
  	grid-gap: 3%;
  	grid-auto-flow: dense;
  	grid-template-columns: repeat(4, 22.8%);
  }
}