/*
--------------------------------------------------------------------------------------

	Creative
	components.creative.css

--------------------------------------------------------------------------------------
*/

.ou-creative {
  background-color: #e9eaea;
  position: relative;
}

.ou-creative__wrap {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
}

.ou-creative img,
.ou-creative img.ou-go3 {
  margin: 0 auto;
  display: block;
}

.ou-creative__wording {
  position: absolute;
  display: inline-block;
  background: #fff;
  background: rgb(255, 255, 255);
  padding: 20px 25px;
  top: 35%;
  left: 8%;
  max-width: 40%;
}

.ou-bg-black p,
.ou-bg-black h1 {
  color: #fff;
}

.ou-creative__wording--top {
  top: 10%;
}

.ou-creative__wording--bottom {
  top: auto;
  bottom: 10%;
}

.ou-creative__title {
  margin: 0;
  font-size: 1.8em;
  background-color: transparent;
}

.ou-creative__description {
  background-color: transparent;
  font-size: 1em;
  margin: 8px 0 0 0;
}

.ou-creative__description p:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 1180px),
  only screen and (max-device-width: 1180px) {
  .ou-creative__wording {
    max-width: 80%;
    left: 0;
    bottom: 0;
    top: auto;
  }
} /* end media query */

@media only screen and (max-width: 767px),
  only screen and (max-device-width: 767px) {
  .ou-creative__wording {
    max-width: 100%;
    width: 100%;
    display: block;
    position: static;
    background-color: #fff;
  }

  .ou-creative__title {
    font-size: 1.4em;
  }

  .ou-creative__wording--top {
    top: auto;
  }
  .ou-creative__wording--bottom {
    top: auto;
  }
} /* end media query */

@media only screen and (max-width: 400px),
  only screen and (max-device-width: 400px) {
  .ou-creative__wording {
    padding: 15px 20px;
  }
} /* end media query */