#gallery_sec li {
  perspective: 393px;
}
.info {
  transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.in-top .info {
  transform-origin: 50% 0%;
  animation: in-top 300ms ease 0ms 1 forwards;
}
.in-right .info {
  transform-origin: 100% 0%;
  animation: in-right 300ms ease 0ms 1 forwards;
}
.in-bottom .info {
  transform-origin: 50% 100%;
  animation: in-bottom 300ms ease 0ms 1 forwards;
}
.in-left .info {
  transform-origin: 0% 0%;
  animation: in-left 300ms ease 0ms 1 forwards;
}
.out-top .info {
  transform-origin: 50% 0%;
  animation: out-top 300ms ease 0ms 1 forwards;
}
.out-right .info {
  transform-origin: 100% 50%;
  animation: out-right 300ms ease 0ms 1 forwards;
}
.out-bottom .info {
  transform-origin: 50% 100%;
  animation: out-bottom 300ms ease 0ms 1 forwards;
}
.out-left .info {
  transform-origin: 0% 0%;
  animation: out-left 300ms ease 0ms 1 forwards;
}
@keyframes in-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 105deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 114deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 105deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 113deg);
  }
}
/* you can ignore this ones */
#gallery_sec ul {
  padding: 0;
  margin: 0 0 50px;
}
#gallery_sec ul:after {
  content: "";
  display: table;
  clear: both;
}
#gallery_sec li {
  position: relative;
  float: left;
      width: 337px;
    height: 210px;
 /* margin: 5px;*/
  padding: 0;
  list-style: none;
}
#gallery_sec li a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
#gallery_sec li h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
#gallery_sec li p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
#gallery_sec li .normal {
  width: 100%;
  height: 100%;
  background-color: #ecf0f1;
  color: rgba(52, 73, 94, 0.6);
  box-shadow: inset 0 2px 20px #e6ebed;
  text-align: center;
  font-size: 50px;
  line-height: 200px;
}
#gallery_sec li .normal svg {
  pointer-events: none;
  width: 50px;
}
#gallery_sec li .normal svg path {
  fill: rgba(52, 73, 94, 0.2);
}
#gallery_sec .success_blk{  position: relative;
  float: left;
      width: 674px;
    height: 210px; text-align:center;  padding:30px 20px;}
#gallery_sec .success_blk h2{ text-transform:uppercase; font-size:34px; color:#52a600; font-weight:400; margin-bottom:15px;}
#gallery_sec .success_blk p{ color:#000;}
#gallery_sec .success_blk a span{ font-size:30px; color:#52a600}
@media only screen and (min-width: 1500px) {
#gallery_sec li {
	width: 25%;
	height: auto;
}
#gallery_sec .success_blk {width: 50%; height: auto; }
#gallery_sec li .normal {
	width: 100%;
	height: auto;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 110deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 122deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 110deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 122deg);
  }
}	
#gallery_sec .success_blk {
	padding: 75px 20px;
}
}

/*@media only screen and (min-width: 1600px) {
#gallery_sec li {
	width: 475px;
	height: 296px;
}
#gallery_sec .success_blk {width: 950px; height: 296px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 110deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 122deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 110deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 121deg);
  }
}	
#gallery_sec .success_blk {
	padding: 85px 20px;
}
.prod_blk{ margin-top:-5px;}
}*/
/*@media only screen and (min-width: 1500px) {
#gallery_sec li {
	width: 380px;
	height: 237px;
}
#gallery_sec .success_blk {width: 760px; height: 237px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 107deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 116deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 108deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 116deg);
  }
}	
}
*/

@media only screen and (max-width: 1600px) {
#gallery_sec li { width: 400px; height: 250px;}
#gallery_sec .success_blk {width: 800px; height: 250px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 107deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 117deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 108deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 117deg);
  }
}	
}


@media only screen and (max-width: 1500px) {
#gallery_sec li {
	width: 375px;
	height: 234px;
}
#gallery_sec .success_blk {width: 750px; height: 234px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 107deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 116deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 108deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 116deg);
  }
}	
}

@media only screen and (max-width: 1400px) {
#gallery_sec li {
	width: 350px;
	height: 219px;
}
#gallery_sec .success_blk {width: 700px; height: 219px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 105deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 115deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 108deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 114deg);
  }
}	

}
@media only screen and (max-width: 1380px) {
#gallery_sec li {
    width: 334px;
    height: 208px;
}
#gallery_sec .success_blk {width: 668px; height: 208px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 105deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 113deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 105deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 113deg);
  }
}	

}
@media only screen and (max-width: 1300px) {
#gallery_sec li {
	width: 325px;
	height: 203px;
}
#gallery_sec .success_blk {width: 650px; height: 203px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 105deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 119deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 105deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 112deg);
  }
}	

}
@media only screen and (max-width: 1280px) {
#gallery_sec li {
	width: 320px;
	height: 200px;
}
#gallery_sec .success_blk {width: 640px; height: 200px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 105deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 112deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 105deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 112deg);
  }
}	

}
@media only screen and (max-width: 1199px) {
#gallery_sec li {
	width: 299px;
	height: 187px;
}
#gallery_sec .success_blk {width: 598px; height: 187px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 105deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 111deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 103deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 111deg);
  }
}
#gallery_sec .success_blk h2{ font-size:24px;}

}
@media only screen and (max-width: 1099px) {
#gallery_sec li {
	width: 274px;
	height: 171px;
}
#gallery_sec .success_blk {width: 548px; height: 171px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 103deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 113deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 103deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 109deg);
  }
}
}
@media only screen and (max-width: 991px) {
#gallery_sec li {
	width: 247px;
	height: 155px;
}
#gallery_sec .success_blk {width: 494px; height: 155px; }
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 101deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 108deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 101deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 108deg);
  }
}
#gallery_sec .success_blk h2 {
	font-size: 22px;
}
#gallery_sec .success_blk p{ height:60px; overflow:hidden; margin:0;}
#gallery_sec .success_blk {padding: 20px;}

}
@media only screen and (max-width: 900px) {
#gallery_sec li {
	width: 225px;
	height: 141px;
}
#gallery_sec .success_blk {width: 450px; height: 141px; }
#gallery_sec .success_blk p {
	height: 35px;
	overflow: hidden;
	margin: 0;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 100deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 106deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 101deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 106deg);
  }
}
#gallery_sec .success_blk h2 {
	font-size: 20px;
}

}
@media only screen and (max-width: 800px) {
#gallery_sec li {
	width: 200px;
	height: 125px;
}
#gallery_sec .success_blk {width: 400px; height: 125px; }
#gallery_sec .success_blk p {
	height: 35px;
	overflow: hidden;
	margin: 0;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 99deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 99deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 104deg);
  }
}


}
@media only screen and (max-width: 767px) {
#gallery_sec li {
	width: 191px;
	height: 120px;
}
#gallery_sec .success_blk {width: 382px; height: 120px; }
#gallery_sec .success_blk p {
	height: 35px;
	overflow: hidden;
	margin: 0;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 99deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 99deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 104deg);
  }
}


}
@media only screen and (max-width: 700px) {
#gallery_sec li {
	width: 175px;
	height: 110px;
}
#gallery_sec .success_blk {width: 350px; height: 110px; }
#gallery_sec .success_blk h2 {
	margin-bottom: 7px;
}
#gallery_sec .success_blk p {
	height: 25px;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 98deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 103deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 98deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 103deg);
  }
}


}

@media only screen and (max-width: 600px) {
#gallery_sec li {
	width: 300px;
	height: 187px;
}

@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 110deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 112deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 120deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 112deg);
  }
}

}
@media only screen and (max-width: 500px) {
#gallery_sec li {
	width: 250px;
	height: 155px;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 100deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 112deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 120deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 108deg);
  }
}
}
@media only screen and (max-width: 400px) {
#gallery_sec li {
	width: 100%;
	height: 250px;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 108deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 118deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 120deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 118deg);
  }
}
}
@media only screen and (max-width: 320px) {
#gallery_sec li {
	width: 100%;
	height: 190px;
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 105deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 118deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 118deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 118deg);
  }
}
}