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

	Images
	components.images.css

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

/*
-------------------------------------------
	Image + caption
-------------------------------------------
*/

.ou-img {
  padding: 15px;
  text-align: center;
}

.ou-img img {
  margin: 0 auto;
}

.ou-img.ou-pull-left,
.ou-img.ou-pull-right {
  width: 40%;
  padding: 0px;
}

.ou-img.ou-pull-centre {
  width: 80%;
}

.ou-img__caption,
.ou-img__credit {
  margin: 5px 0 0 0;
  color: #737373;
  background-color: transparent;
  font-size: 0.9em;
}

.ou-img__credit {
  font-style: italic;
  color: #737373;
}

.ou-bg-turquoise .ou-img__caption,
/*.ou-bg-green .ou-img__caption,
.ou-bg-red .ou-img__caption,
.ou-bg-burgundy .ou-img__caption,*/
.ou-bg-blue .ou-img__caption,
.ou-bg-dark-blue .ou-img__caption,
.ou-bg-dark-grey .ou-img__caption,
.ou-bg-purple .ou-img__caption,
.ou-bg-orange .ou-img__caption,
.ou-bg-black .ou-img__caption,
.ou-bg-pink .ou-img__caption
/*.ou-bg-dark-green .ou-img__caption*/ {
  color: #fff;
  background-color: transparent;
}

/*
-------------------------------------------
	Hero
-------------------------------------------
*/

.ou-hero {
  position: relative;
  margin: 0 auto 25px auto;
  max-width: 1180px;
}

.ou-hero__image {
  display: block;
  height: auto;
}

.ou-hero__link,
.ou-hero__link:hover {
  text-decoration: none;
  color: #fff;
  background-color: transparent;
}

.ou-hero__wording {
  display: block;
  position: absolute;
  width: 60%;
  right: 0;
  bottom: 0;
  color: #fff;
  background: #0e56a7;
  text-align: right;
  padding: 25px 20px;
  margin: 0;
}

/*.ou-hero:hover .ou-hero__wording {
  background: #0e56a7;
}
*/

.ou-hero__title {
  color: inherit;
  background-color: transparent;
  line-height: 120%;
  margin: 0;
  padding: 0;
  font-size: 1.8em;
}

.ou-hero__description {
  color: inherit;
  background-color: transparent;
  font-size: 1em;
  margin: 5px 0 0 0;
}

/* darker colours */

.ou-bg-black .ou-hero__wording,
.ou-bg-black:hover .ou-hero__wording {
  background: #000000 !important;
}

.ou-bg-dark-grey .ou-hero__wording,
.ou-bg-dark-grey:hover .ou-hero__wording {
  background: #262626 !important;
}

.ou-bg-pink .ou-hero__wording,
.ou-bg-pink:hover .ou-hero__wording {
  background: #e21481 !important;
}

.ou-bg-dark-blue .ou-hero__wording,
.ou-bg-dark-blue:hover .ou-hero__wording {
  background: #072b54 !important;
}


.ou-bg-orange .ou-hero__wording,
.ou-bg-orange:hover .ou-hero__wording {
  background: #d34616 !important;
}

.ou-bg-blue .ou-hero__wording,
.ou-bg-blue:hover .ou-hero__wording {
  background: #0e56a7 !important;
}

.ou-bg-black .ou-hero__wording {
  background: rgb(0, 0, 0) !important;
}
.ou-bg-dark-grey .ou-hero__wording {
  background: #262626 !important;
}

.ou-bg-pink .ou-hero__wording {
  background: rgb(232, 0, 116) !important;
}
.ou-bg-dark-blue .ou-hero__wording {
  background: rgb(0, 51, 102) !important;
}
.ou-bg-orange .ou-hero__wording {
  background: #d34616 !important;
}

.ou-bg-blue .ou-hero__wording {
  background: rgb(11, 85, 168) !important;
}

/* lighter colours */

.ou-bg-white .ou-hero__wording,
.ou-bg-white:hover .ou-hero__wording {
  background: #ffffff !important;
  color: #000;
}

.ou-bg-grey .ou-hero__wording,
.ou-bg-grey:hover .ou-hero__wording {
  background: #a7a9ac !important;
  color: #000;
}


.ou-bg-turquoise .ou-hero__wording,
.ou-bg-turquoise:hover .ou-hero__wording {
  background: #068293 !important;
}

.ou-bg-light-grey .ou-hero__wording,
.ou-bg-light-grey:hover .ou-hero__wording {
  background: rgb(231, 239, 247) !important;
  color: #000;
}

.ou-bg-white .ou-hero__wording {
  background: #ffffff !important;
}
.ou-bg-grey .ou-hero__wording {
  background: #a7a9ac !important;
}

.ou-bg-turquoise .ou-hero__wording {
  background: #068293 !important;
}

.ou-bg-light-grey .ou-hero__wording {
  background: rgb(231, 239, 247) !important;
}

@media only screen and (max-width: 850px),
  only screen and (max-device-width: 850px) {
  .ou-hero__wording {
    width: 70%;
  }

  .ou-hero__title {
    font-size: 1.6em;
  }
} /* end media query */

@media only screen and (max-width: 767px),
  only screen and (max-device-width: 767px) {
  /* image + caption */

  .ou-img.ou-pull-left,
  .ou-img.ou-pull-right,
  .ou-img.ou-pull-centre {
    max-width: 50%;
  }

  /* hero */

  .ou-hero__wording {
    width: 60%;
    padding: 15px 10px;
  }

  .ou-hero__title {
    font-size: 1.4em;
  }
} /* end media query */

@media only screen and (max-width: 640px),
  only screen and (max-device-width: 640px) {
  .ou-hero__wording {
    width: 70%;
  }
} /* end media query */

@media only screen and (max-width: 400px),
  only screen and (max-device-width: 400px) {
  /* image + caption */

  .ou-img.ou-pull-left,
  .ou-img.ou-pull-right,
  .ou-img.ou-pull-centre {
    max-width: none;
    width: 100%;
  }

  /* hero */

  .ou-hero__wording {
    width: 100%;
    position: static;
    text-align: left;
  }

  .ou-hero__title {
    font-size: 1.2em;
  }
} /* end media query */