.examples{
  width: 980px;
  margin:  0 auto;
  
}
.demo {
  padding: 10px; }
  .demo h3 {
    font-size: 1.4em;
    line-height: 1.4em; }
.demo p{
font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}

[class^='imghvr-'], [class*=' imghvr-'] {
  position: relative;
  display: inline-block;
  margin: 0px;
  max-width: 100%;
  background-color: #211f1f;
  
  color: #fff;
  overflow:inherit!important ;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0); }
  [class^='imghvr-'] > img, [class*=' imghvr-'] > img {
    vertical-align: top;
    max-width: 100%; }
  [class^='imghvr-'] figcaption, [class*=' imghvr-'] figcaption {
  
-webkit-opacity:0.8;
/*    position: absolute;*/
    /*padding:0 30px;*/
   padding:0 15%;
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  [class^='imghvr-'] h3,[class*=' imghvr-'] h3 {
  	width: 100%;height: 17%;
    color: #fff;
    padding: 0;
    line-height:80% !important;
    margin:28% auto 0;
    padding-bottom: 0;
}
  [class^='imghvr-'] p,[class*=' imghvr-'] p{
  	width: 100%;height: 65%;
    color: #fff;
        font-size: 16px;
    /*line-height:80% !important;*/
    padding: 0;
/*    margin-top:35px;*/
    margin-top: 0 auto;
}
  [class^='imghvr-'] > a, [class*=' imghvr-'] > a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1; }

[class^='imghvr-'], [class*=' imghvr-'], [class^='imghvr-']:before,
[class^='imghvr-']:after, [class*=' imghvr-']:before, [class*=' imghvr-']:after,
[class^='imghvr-'] *, [class*=' imghvr-'] *, [class^='imghvr-'] *:before,
[class^='imghvr-'] *:after, [class*=' imghvr-'] *:before, [class*=' imghvr-'] *:after {
	/*width: 100%; height: 100%;*/
  display: block;width: 380px;
/*	width: inherit;height: inherit;*/
	 margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  transition: all 0.35s ease; }



/* imghvr-dive-*
  ----------------------------- */
[class^='imghvr-dive'] figcaption, [class*=' imghvr-dive'] figcaption {
	width: 100%;height: 100%;
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s; }
[class^='imghvr-dive']:hover > img, [class*=' imghvr-dive']:hover > img {
  /*opacity: 0;透明度*/  
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s; }
[class^='imghvr-dive']:hover figcaption, [class*=' imghvr-dive']:hover figcaption {
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  -webkit-transition-delay: 0.175s;
  -moz-transition-delay: 0.175s;
  transition-delay: 0.175s; }

/* imghvr-dive-cc
  ----------------------------- */
 /*
.imghvr-dive-cc figcaption {
	
  -webkit-transform: rotate(-45deg) scale(5);
  -moz-transform: rotate(-45deg) scale(5);
  -ms-transform: rotate(-45deg) scale(5);
  -o-transform: rotate(-45deg) scale(5);
  transform: rotate(-45deg) scale(5); }
.imghvr-dive-cc:hover > img {
  -webkit-transform: rotate(45deg) scale(5);
  -moz-transform: rotate(45deg) scale(5);
  -ms-transform: rotate(45deg) scale(5);
  -o-transform: rotate(45deg) scale(5);
  transform: rotate(45deg) scale(5); } */
.imghvr-dive-cc:hover figcaption {
	background-color: #2ED1B5;
  -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1);
  -ms-transform: rotate(0deg) scale(1);
  -o-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1); }

.imghvr-center figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center; }

[class^='imghvr-']:hover .ih-delay-xs, [class*=' imghvr-']:hover .ih-delay-xs {
  -webkit-transition-delay: 0.175s;
  -moz-transition-delay: 0.175s;
  transition-delay: 0.175s; }
[class^='imghvr-']:hover .ih-delay-sm, [class*=' imghvr-']:hover .ih-delay-sm {
  -webkit-transition-delay: 0.35s;
  -moz-transition-delay: 0.35s;
  transition-delay: 0.35s; }
[class^='imghvr-']:hover .ih-delay-md, [class*=' imghvr-']:hover .ih-delay-md {
  -webkit-transition-delay: 0.525s;
  -moz-transition-delay: 0.525s;
  transition-delay: 0.525s; }
[class^='imghvr-']:hover .ih-delay-lg, [class*=' imghvr-']:hover .ih-delay-lg {
  -webkit-transition-delay: 0.7s;
  -moz-transition-delay: 0.7s;
  transition-delay: 0.7s; }
[class^='imghvr-']:hover .ih-delay-xl, [class*=' imghvr-']:hover .ih-delay-xl {
  -webkit-transition-delay: 0.875s;
  -moz-transition-delay: 0.875s;
  transition-delay: 0.875s; }
[class^='imghvr-']:hover .ih-delay-xxl, [class*=' imghvr-']:hover .ih-delay-xxl {
  -webkit-transition-delay: 1.05s;
  -moz-transition-delay: 1.05s;
  transition-delay: 1.05s; }
[class^='imghvr-'] [class^='ih-'], [class^='imghvr-'] [class*=' ih-'], [class*=' imghvr-'] [class^='ih-'], [class*=' imghvr-'] [class*=' ih-'] {
  opacity: 0; }
[class^='imghvr-'] .ih-fade-up, [class*=' imghvr-'] .ih-fade-up {
  -webkit-transform: translate(0, 25px);
  -moz-transform: translate(0, 25px);
  -ms-transform: translate(0, 25px);
  -o-transform: translate(0, 25px);
  transform: translate(0, 25px); }
[class^='imghvr-'] .ih-fade-down, [class*=' imghvr-'] .ih-fade-down {
  -webkit-transform: translate(0, -25px);
  -moz-transform: translate(0, -25px);
  -ms-transform: translate(0, -25px);
  -o-transform: translate(0, -25px);
  transform: translate(0, -25px); }
[class^='imghvr-'] .ih-fade-left, [class*=' imghvr-'] .ih-fade-left {
  -webkit-transform: translate(25px, 0);
  -moz-transform: translate(25px, 0);
  -ms-transform: translate(25px, 0);
  -o-transform: translate(25px, 0);
  transform: translate(25px, 0); }
[class^='imghvr-'] .ih-fade-right, [class*=' imghvr-'] .ih-fade-right {
  -webkit-transform: translate(-25px, 0);
  -moz-transform: translate(-25px, 0);
  -ms-transform: translate(-25px, 0);
  -o-transform: translate(-25px, 0);
  transform: translate(-25px, 0); }
[class^='imghvr-'] .ih-fade-up-big, [class*=' imghvr-'] .ih-fade-up-big {
  -webkit-transform: translate(0, 300%);
  -moz-transform: translate(0, 300%);
  -ms-transform: translate(0, 300%);
  -o-transform: translate(0, 300%);
  transform: translate(0, 300%); }
[class^='imghvr-'] .ih-fade-down-big, [class*=' imghvr-'] .ih-fade-down-big {
  -webkit-transform: translate(0, -300%);
  -moz-transform: translate(0, -300%);
  -ms-transform: translate(0, -300%);
  -o-transform: translate(0, -300%);
  transform: translate(0, -300%); }
[class^='imghvr-'] .ih-fade-left-big, [class*=' imghvr-'] .ih-fade-left-big {
  -webkit-transform: translate(150%, 0);
  -moz-transform: translate(150%, 0);
  -ms-transform: translate(150%, 0);
  -o-transform: translate(150%, 0);
  transform: translate(150%, 0); }
[class^='imghvr-'] .ih-fade-right-big, [class*=' imghvr-'] .ih-fade-right-big {
  -webkit-transform: translate(-150%, 0);
  -moz-transform: translate(-150%, 0);
  -ms-transform: translate(-150%, 0);
  -o-transform: translate(-150%, 0);
  transform: translate(-150%, 0); }
[class^='imghvr-'] .ih-zoom-in, [class*=' imghvr-'] .ih-zoom-in {
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transform: scale(0.1); }
[class^='imghvr-'] .ih-zoom-out, [class*=' imghvr-'] .ih-zoom-out {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5); }
[class^='imghvr-'] .ih-flip-x, [class*=' imghvr-'] .ih-flip-x {
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg); }
[class^='imghvr-'] .ih-flip-y, [class*=' imghvr-'] .ih-flip-y {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg); }
[class^='imghvr-']:hover [class^='ih-'], [class^='imghvr-']:hover [class*=' ih-'], [class*=' imghvr-']:hover [class^='ih-'], [class*=' imghvr-']:hover [class*=' ih-'] {
  -webkit-transform: translate(0, 0) scale(1) rotate(0);
  -moz-transform: translate(0, 0) scale(1) rotate(0);
  -ms-transform: translate(0, 0) scale(1) rotate(0);
  -o-transform: translate(0, 0) scale(1) rotate(0);
  transform: translate(0, 0) scale(1) rotate(0);
  opacity: 1; }

/*.modular .modular-row.showcase .button.primary {
background-color: #9C3636;
}
.modular .modular-row.showcase .button.primary:hover {
background-color: #6d2222;
}*/