/* Used in Splash Component*/
.splashLogo{
  background-image: url(treering.png);
  background-size: cover;
  width: 130px;
  height: 110px;
}
/* Used in Header Component*/
.brand-button {
  display: block;
  width: 117px;
  height: 63px;
}

.headerIso, .headerLogo {
  width: 117px;
  height: auto;
}

.headerIso{
background: url(iso.png);
background-size: cover;
}
.headerLogo{
background: url(logo.png);
background-size: cover;
}

/* Used in Login Component. NOT Clock-Login. In here just in case that component is used for some reason. */
.loginAppLogo{
background-image: url(app-logo.png);
background-size: cover;
position: relative;
width: 280px;
height: 77px;
top: 20px;
}
.loginCompanyLogo{
background-image: url(logo-TreeRing.png);
background-size: cover;
width: 280px;
height: 100px;
}

/* Used in Header Component*/

@media screen and (min-width: 768px) {
  .brand-button {
    display: flex;
    width: 228px;
    height: 62px;
  }

  .headerIso, .headerLogo {
    width: 114px;
  }
}

@media screen and (min-width: 1024px) {
  .brand-button {
    height: 50px;
  }
  .headerIso, .headerLogo {
	width: 115px;
    height: 32.7px;
  }
}