/* Border-box laesst Innenränder zu */

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/* 20px Rand weiss um Bild  */
.imgborder20 {
  border-width:20px;
  border-color:#ffffff;
} 
/* News-Modul Infozeile ausschalten  */
.itemInfo {
display: none;
}

/* Startseite Image-Hover */
/* #imagehover damit Bilder sich verkleiner */

#imagehover {
  width:100%;
  max-width:500px;
}

/* css von image-hover */

.view .mask {
  max-width:500px;
  max-height:100%;
  width:100%;
  position:absolute;
  overflow:hidden;
  bottom:0;
  left:0;
}

.view-first h2 {
  -webkit-transform:translateY(-100px);
  -moz-transform:translateY(-100px);
  -o-transform:translateY(-100px);
  -ms-transform:translateY(-100px);
  transform:translateY(-100px);
  -ms-filter:"progid;
  filter:alpha(opacity=0);
  opacity:0;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.view-first a.info {
  -ms-filter:"progid;
  filter:alpha(opacity=0);
  opacity:0;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.view-first:hover img {
  -webkit-transform:scale(1.1,1.1);
  -moz-transform:scale(1.1,1.1);
  -o-transform:scale(1.1,1.1);
  -ms-transform:scale(1.1,1.1);
  transform:scale(1.1,1.1);
}

.view-first:hover h2 {
  -ms-filter:"progid;
  filter:alpha(opacity=100);
  opacity:1;
  -webkit-transform:translateY(0px);
  -moz-transform:translateY(0px);
  -o-transform:translateY(0px);
  -ms-transform:translateY(0px);
  transform:translateY(0px);
}

.view p {
  font-family:Georgia, serif;
  font-style:normal;
  font-size:12pt;
  position:relative;
  color:#4b4b4b;
  text-align:center;
  padding-top:7px;
  padding-right:0px;
  padding-bottom:0px;
  padding-left:7px;
}

.view-first img {
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  -o-transition:all 0.2s linear;
  -ms-transition:all 0.2s linear;
  transition:all 0.2s linear;
}

.view a.info: hover {
  -webkit-box-shadow:0 0 5px #000;
  -moz-box-shadow:0 0 5px #000;
  box-shadow:0 0 5px #000;
}

.view a.info {
  display:inline-block;
  font-family:Georgia, serif;
  font-size:12pt;
  text-decoration:none;
  background:#428bca;
  color:#fff;
  -webkit-box-shadow:0 0 1px #000;
  -moz-box-shadow:0 0 1px #000;
  box-shadow:0 0 1px #000;
  padding-top:5px;
  padding-right:20px;
  padding-bottom:5px;
  padding-left:20px;
}

.view-first:hover p {
  -ms-filter:"progid;
  filter:alpha(opacity=100);
  opacity:1;
  -webkit-transform:translateY(0px);
  -moz-transform:translateY(0px);
  -o-transform:translateY(0px);
  -ms-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition-delay:0.1s;
  -moz-transition-delay:0.1s;
  -o-transition-delay:0.1s;
  -ms-transition-delay:0.1s;
  transition-delay:0.1s;
}

.view-first .mask {
  -ms-filter:"progid;
  filter:alpha(opacity=0);
  opacity:0;
  background-color:rgba(230,230,230, 0.7);
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out;
  -ms-transition:all 0.4s ease-in-out;
  transition:all 0.4s ease-in-out;
}

.view .content {
  max-width:500px;
  width:100%;
  position:absolute;
  overflow:hidden;
  bottom:0;
  left:0;
}

.view h2 {
  color:#fff;
  text-align:center;
  position:relative;
  font-size:36px;
  font-family:'Tangerine', cursive;
  background:#428bca;
  margin-top:0;
  margin-right:0;
  margin-bottom:0;
  margin-left:0;
  padding-top:5px;
  padding-left:0px;
  padding-right:0px;
  padding-bottom:0px;
}

.view-first:hover .mask {
  -ms-filter:"progid;
  filter:alpha(opacity=100);
  opacity:1;
}

.view-first:hover a.info {
  -ms-filter:"progid;
  filter:alpha(opacity=100);
  opacity:1;
  -webkit-transform:translateY(0px);
  -moz-transform:translateY(0px);
  -o-transform:translateY(0px);
  -ms-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition-delay:0.2s;
  -moz-transition-delay:0.2s;
  -o-transition-delay:0.2s;
  -ms-transition-delay:0.2s;
  transition-delay:0.2s;
}
.view-first p {
  -webkit-transform:translateY(100px);
  -moz-transform:translateY(100px);
  -o-transform:translateY(100px);
  -ms-transform:translateY(100px);
  transform:translateY(100px);
  -ms-filter:"progid;
  filter:alpha(opacity=0);
  opacity:0;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  -o-transition:all 0.2s linear;
  -ms-transition:all 0.2s linear;
  transition:all 0.2s linear;
}

.view {
  max-width:500px;
  width:100%;
  float:left;
  border:20px solid #fff;
  overflow:hidden;
  position:relative;
  text-align:center;
  cursor:default;
  background:#fff url(../../../AAA-Seminar_Opstelten/Bibliotheken/Playground/Image%20Hover/images/bgimg.jpg) no-repeat center center;
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:0px;
}