@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
.grids {
  height: 100%;
  width: 100%;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  padding-left: 0px;
  padding-right: 0px; 
}

@media(max-width: 480px) {
  .grids {
    padding-top: 15px;
    padding-bottom: 15px; } }
.height-1 {
  height: calc(100vw / 12 * 1 - 45px); }

.height-2 {
  height: calc(100vw / 12 * 2 - 45px); }

.height-3 {
  height: calc(100vw / 12 * 3 - 45px); }

.height-4 {
  height: calc(100vw / 12 * 4 - 45px); }

.height-5 {
  height: calc(100vw / 12 * 5 - 45px); }

.height-6 {
  height: calc(100vw / 12 * 6 - 45px); }

.height-7 {
  height: calc(100vw / 12 * 7 - 45px); }

.height-8 {
  height: calc(100vw / 12 * 8 - 45px); }

.height-9 {
  height: calc(100vw / 12 * 9 - 45px); }

.height-10 {
  height: calc(100vw / 12 * 10 - 45px); }

.height-11 {
  height: calc(100vw / 12 * 11 - 45px); }

.height-12 {
  height: calc(100vw - 45px); }

.squares {
   width: 264px;
   height: 358px;
   padding-bottom: 30px;
}

.squares > div {
  margin-top: 30px; }
  .squares > div:first-child {
    margin-top: 0; }
@media(max-width: 480px) {
  .squares > div {
    height: auto; } }
.squares > div > div {
  margin-top: 30px; }
@media(max-width: 480px) {
  .squares > div > div {
    height: auto; } }
.no-pad {
  padding-left: 0;
  padding-right: 0; }

.heading {
  justify-content: flex-start; }
  .heading h1 {
    letter-spacing: 2px;
    font-weight: 700; }
@media(max-width: 480px) {
  .heading h1 {
    line-height: 5vh; } }
.bottom {
  margin-bottom: 30px; }

.download div {
  transition: all 1s ease; }
.download:hover div {
  background: #3498db; }
  .download:hover div h1 {
    color: white; }