@charset "UTF-8";
/* CSS Document */
.metro {
  width: auto;
  height: auto;
}
.metro-row {
  width: 100%;
  padding: 0px;
  height: auto;
  display: table;
}
.tile {
  height: 200px;
  width: 24%;
  float: left;
  margin-right: 1%;
  margin-top: 12px;
  padding: 20px;
  background-size: cover;
}
.tile-lg {
  width: 49%;
  background-size: cover;
}
.metro a{
    text-decoration: none;
    color: aliceblue;
}
.metro a .alice{
    color: #1C1D21;
}
.bluegrey {
  background-color: #445878;
  background-color: rgba(68, 88, 120, 0.7);
}
.mint {
  background-color: #92cdcf;
  background-color: rgba(146, 205, 207, 0.7)
}
.grey {
  background-color: #31353d;
  background-color: rgba(49, 53, 61, 0.7);
}
.alice {
  background-color: aliceblue;
  background-color: rgba(240, 248, 255, 0.7);
  color: #1C1D21;
}
.tile i {
  font-size: 5vw;
  width: 100%;
  height: auto;
  padding-bottom: 0.5em;
}
.tile:hover, .tile-lg:hover {
  opacity: 0.9;
    transition: .3s;
}
.tile8:hover, .tile8:active {background-image: url(https://scontent-vie1-1.xx.fbcdn.net/v/t31.0-8/737540_440594382661104_1675368908_o.jpg?_nc_cat=105&_nc_ohc=OYsEqC84hYgAQmw5j5gv2HHYQgu_L4WFpY6MZscVaMJ6vqOr0KrltQakA&_nc_ht=scontent-vie1-1.xx&oh=f3f43056204c18d737b1855c25de7042&oe=5E8C7E25)
}

.tile-title {
  text-transform: uppercase;
  font-size: 1.5em;
}
.selection {
  background-color: white;
}
/*Tablet View*/
@media (min-width : 501px) and (max-width : 850px) {
  .tile {
    height: 150px;
    margin-top: 8px;
  }
  .tile-title {
    font-size: 1em;
  }
}
/*Mobile View*/
@media (max-width : 500px) {
  .tile {
    width: 49%;
    margin-top: 5px;
  }
  .tile-lg {
    width: 99%;
  }
  .tile-title {
    font-size: 5vw;
  }
}