/*
.kwadrat2
{ 
  width: 100%; 
  height: 170px; 
  border-top: 1px solid #000; 
  overflow: hidden; 
}

.trojkat2
{
  position: relative;
  overflow: hidden;
  transform: rotate(45deg) skew(10deg,10deg);
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  width: 200px;
  height: 200px;
  margin:-100px 0 0 43%;

}
.trojkat_bg2
{
  
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(../Sharaf.PNG);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}

.trojkat_bg2:hover{ background-size: 90%; }*/

ul .image-wrap {
  z-index: 1;
  display: block;
  margin: 0 auto;
  margin-bottom: .5em;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  width: auto;
  line-height: 0;
}

ul .image-wrap {
  border: 4px solid white;
  -moz-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
  display: inline-block;
}
ul .image-wrap img {
  max-width: 100%;
  height: auto;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

ul {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}
ul .image-wrap {
  background: grey;
}
ul .image-wrap img {
  opacity: 1;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
ul li {
  list-style: none;
  float: left;
  width: 22%;
  margin-right: 4%;
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}
ul li:nth-child(4) {
  margin-right: 0;
}
ul li:hover .school {
  left: 0;
  margin-left: 0;
}
ul li:hover .state {
  left: 0;
  margin-right: 0;
}
ul li:hover img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.info {
  text-align: center;
  font-size: .75em;
  color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 40%;
}

.school {
  font-weight: bold;
  display: block;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
  margin-left: -200%;
}

.state {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: block;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
  margin-right: -200%;
}

a {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  display: inline-block;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: light;
  font-size: .75rem;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
}
li:hover a {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}