//@import "_animations";

#mainPage.mobile .contentImage {
  height: 10ex; // It's a good idea to make these smaller on mobile.
}

.contentImage {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 25ex;   // size in ex guarantees the image will look about the same size on every screen
  &:hover {
    cursor: pointer;

    &:active {
      opacity: 0.7;
    }
  }
}

#imageViewer {
  display: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1000000;
  top: 0px;
  left: 0px;
  margin: 0px;
  background-color: rgba(0,0,0,.8);

  &:hover {
    cursor: pointer;
  }
}

.image001 {
  &.contentImage {
    // define height for content image
    height: 3em;
  }
  //background-image: inline-image("001.png");
  background-image: url("https://i.imgur.com/EvUe1bv.png");
}

.introLogo {
  background-image: inline-image("IntroLogo.svg");
}