/*
Theme Name: URW-Bildergalerie 
Theme URI: iideenreich
Description: iFrame
Version: 1.0
Author: iieenreich
*/
@font-face {
  font-family: 'Flama Condensed Book';
  src: url(fonts/FlamaCondensed-Book.eot);
  src: url(../fonts/FlamaCondensed-Book.eot?#iefix) format("embedded-opentype"), url(fonts/FlamaCondensed-Book.woff) format("woff"), url(fonts/FlamaCondensed-Book.svg#FlamaCondensed-Book) format("svg");
  font-weight: 400;
  font-style: normal
}
@font-face {
  font-family: 'Flama Condensed Light';
  src: url(fonts/FlamaCondensed-Light.eot);
  src: url(fonts/FlamaCondensed-Light.eot?#iefix) format("embedded-opentype"), url(fonts/FlamaCondensed-Light.woff) format("woff"), url(fonts/FlamaCondensed-Light.svg#FlamaCondensed-Light) format("svg");
  font-weight: 400;
  font-style: normal
}
* {
  font-family: 'Flama Condensed Light';
}
#logoWestfield {
  margin: 0 auto !important;
  width: 200px;
}
.logoSponsor {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
  max-width: 54px;
  margin: 0em;
  padding: 0em !important;
  position: relative;
  top: -3px;
}
.countNumber {
  font-style: normal;
  font-weight: bold;
  color: #d42d26;
}
h2 {
  text-transform: uppercase;
  font-family: 'Flama Condensed Book';
  font-size: 2.8em !important;
}
h6 {
  font-family: 'Flama Condensed Light' !important;
  font-size: 1.4em !important;
  line-height: 1.5em !important;
}
html, body {
  width: 100%;
  height: 100%;
  /*  background: #f7f7f7 !important;*/
  background: #FFF;
}
dl {
  margin: 0em !important;
  text-align: center;
  background: #f7f7f7;
  display: block;
  line-height: 2.5em;
  border: 5px solid #FFF;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 2em;
}
dl dt {
  color: #da291c;
  font-weight: bold;
  font-family: 'Flama Condensed Book';
  font-size: 3em;
}
dl dd {
  display: block;
  padding: 0em;
  margin: 0em;
  font-size: 1.35em;
  text-transform: uppercase;
}
figcaption {
  background: #FFF;
}
img {
  max-width: 100%;
}
.galerieArea li {
  list-style: none;
}
.galerieArea li:hover .overlay {
  text-decoration: none;
  text-align: center;
  list-style: none;
}
.galerieArea figcaption h5 {
  font-size: 0.9em;
  color: #000;
}
.galerieArea figcaption h6 {
  line-height: 1em;
  font-size: 0.75em;
  font-style: normal;
  font-weight: normal;
  color: #000000;
  margin: 0 auto;
}
.galerieArea li .overlay {
  display: block;
  text-decoration: none;
  border: 5px solid #fff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.galerieArea li:hover h5 {
  color: #d42d26;
}
.galerieArea li:hover .overlay {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  border: 5px solid #fff;
}
.imageContainer {
  position: relative;
  width: 100%;
  cursor: pointer;
  max-width: 400px;
}
.imageContainer img {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border: 5px solid #fff;
  border-bottom: 0px none;
}
.imageContainer a:hover {
  color: #FFF;
}
.overlay {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: rgba(212, 45, 38, 0.9);
}
.imageContainer:hover .overlay {
  opacity: 1;
}
.icon {
  color: white;
  font-size: 80px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
#page_navigation .page-link {
  color: #000;
}
#page_navigation .page-link:focus {
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.1);
}
figcaption {
  background: #FFF;
  position: relative;
  z-index: 2;
}
figcaption em {
  display: block;
  background: #FFF;
}
#page_navigation .page-item.active .page-link {
  color: #FFF;
  background-color: rgba(212, 45, 38, 1) !important;
  border-color: rgba(212, 45, 38, 1) !important;
}
/* When you move the mouse over the icon, change color */
.fa-user:hover {
  color: #fff;
}