.item00 {  overflow: hidden;    background: #e9e9e9;      width: 110px;      height: 110px;    }
    .item11 {  overflow: hidden;    background: #e9e9e9;      width: 220px;      height: 220px;    }
    .item21 {  overflow: hidden;    background: #e9e9e9;      width: 500px;      height: 250px;    }
    .item12 {  overflow: hidden;    background: #e9e9e9;      width: 250px;      height: 500px;    }
    .item22 {  overflow: hidden;    background: #e9e9e9;      width: 500px;      height: 500px;    }

.item img{     width:100%; max-height: 600px;}

.fade-in-2 {
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}


.fade-in {
  animation: fadeIn ease 7s;
  -webkit-animation: fadeIn ease 7s;
  -moz-animation: fadeIn ease 7s;
  -o-animation: fadeIn ease 7s;
  -ms-animation: fadeIn ease 7s;
}

.center-image{ display:flex;   justify-content:center;   align-items:center;      height:100%; }
.center-image img{  max-width:100%;  max-height:100%;}


.image { 	position: relative; 	width: 100%; /* for IE 6 */}
h2 {    color: white; 	position: absolute; 	top: 200px; 	left: 0; }

h2 span { 	font-size: 18px;
	font-family: 'Bahnschrift Regular';font-weight:normal;
	letter-spacing: -1px;  
	padding: 12px; 
	color: white; 
	background: rgba(90, 90, 90, 0.7);
}


[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}