@charset "utf-8";
/* CSS Document */
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-weight: lighter;
  font-family: 'Roboto Condensed', sans-serif;
  box-sizing: border-box;
}
html, body {
  overflow: hidden;
  background-color: #070327;
  color: ghostwhite;
  padding: 0;
  margin: 0;
}
/*navigation*/
#nav {
  display: inline-flex;
  width: 100vw;
  /*  position: absolute;*/
  /*  top: 3%;*/
  /*  right: 5%;*/
}
#nav ul {
  margin: 20px auto;
  list-style-type: none;
}
#nav li {
  font-size: 150%;
  float: left;
  text-shadow: 1px 1px 1px gray;
}
#nav li:not(:first-child) {
  padding-left: 25px;
}
#nav li a {
  color: white;
}
/*services page*/
#services {
  display: inline-flex;
  text-align: center;
  text-transform: capitalize;
}
/* Masonry grid */
.masonry {
  column-gap: 10px;
  column-fill: initial;
  column-count: 1;
}
/* Masonry item */
.masonry .brick {
  font-size: 6vw;
  white-space: nowrap;
  width: 50vw;
  padding: 1vh;
  margin-bottom: 12px;
  display: inline-block;
  border: .75vw solid ghostwhite;
  /* Fix the misalignment of items */
  vertical-align: top;
  /* Keep the item on the very top */
}
.masonry .brick {
  color: ghostwhite;
}
.masonry .brick:hover {
  color: #080639;
  background-color: white;
  transition: all .5s ease;
}
@media (min-width: 740px) and (max-width: 900px) and (orientation: landscape) {
  .masonry {
    column-count: 3;
    column-gap: 1vw;
  }
  .masonry .brick {
    width: 30vw;
    font-size: 3.5vw;
    border: .25vw solid ghostwhite;
    margin-bottom: 10px;
  }
  #nav {
    width: 40%;
    float: right;
  }
  #nav ul {
    margin: 15px;
    float: right;
  }
}
@media (min-width: 768px) and (orientation: portrait) {
  .masonry {
    column-count: 1;
    column-gap: 1vw;
  }
  .masonry .brick {
    width: 40vw;
    font-size: 5vw;
    border: .25vw solid ghostwhite;
    margin-bottom: 15px;
  }
  #nav li {
    font-size: 3vw;
  }
}
@media (min-width: 901px) and (orientation: landscape) {
  .masonry {
    column-count: 2;
    column-gap: 2vw;
	  width: 70%;
	  margin: 10px auto;
  }
  .masonry .brick {
    width: 30vw;
    font-size: 3vw;
    border: .25vw solid ghostwhite;
    margin-bottom: 25px;
  }
  #nav li {
    font-size: 25px;
  }
	  #nav {
    width: 50%;
    float: right;
  }
  #nav ul {
    margin: 35px;
    float: right;
  }
}