.simpleContainer > .expose > article { max-width: 250px; }

/*..............................*/

.focusContainer {
  align-items: center;
  background: lightseagreen;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100vh;
  user-select: none;
  width: 100%;
}

.focusContainer > div {
  color: white;
  display: flex;
  flex-direction: column;
  transform: translateX(17%);
  text-shadow: 0 0 15px black;
}

.focusContainer > div > h1 {
  display: block;
  font-family: 'Spartan', sans-serif;
  font-size: 5.7em;
  text-transform: uppercase;
}

.focusContainer > div > p {
  display: block;
  font-size: 2.2em;
  font-family: 'Quicksand', sans-serif;
  max-width: 520px;
}

#slider .focusContainer:nth-child(1) {
  background-image: url('/img/magic.jpg');
  background-position: left;
}
#slider .focusContainer:nth-child(2) {
  background-image: url('/img/brushes.jpg');
  background-position: left;
}
#slider .focusContainer:nth-child(3) {
  background-image: url('/img/light_buld.jpg');
  background-position: center;
}


.simpleContainer > .expose { flex-wrap: wrap; }

/*..............................*/

@media screen and (max-width: 1150px) {
  .focusContainer { background-position: center !important; }
}

@media screen and (max-width: 720px) {
  .focusContainer { justify-content: center; }
  .focusContainer > div { align-items: center; transform: translateX(0) !important; }
  .focusContainer > div > p { text-align: center; max-width: 95%; }
}

@media screen and (max-width: 500px) {
  .focusContainer > div > h1 { font-size: 4em; }
  .focusContainer > div > p { font-size: 2em; }
}