.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s; }

/**** Responsive list***/
.responsive {
  width: 100%;
  height: 100%; }

.content {
  float: left;
  /*margin-left: -10px;*/
  width: 100%;
  height: 100%; list-style:none; margin:0px !important; padding:0px !important; }
  .content img {
    width: 100%;
    height: 101%; }
  .content ul{ margin:0px !important; padding:0px !important;}
  .content li {
    float: left;
    
   /* width: 33.2%; */ width: 23%;
    height: 33%;
    position: relative; padding:1px 0 0 2px;
    /* Colors Hover */ }
    .content li:hover {
      cursor: pointer; }
      .content li:hover .card-front {
        -webkit-transform: rotateX(50deg);
        -moz-transform: rotateX(50deg);
        -ms-transform: rotateX(50deg);
        -o-transform: rotateX(50deg);
        transform: rotateX(50deg);
        -webkit-transform: perspective(1000) rotateX(50deg);
        -moz-transform: perspective(1000) rotateX(50deg);
        -ms-transform: perspective(1000) rotateX(50deg);
        -o-transform: perspective(1000) rotateX(50deg);
        transform: perspective(1000) rotateX(50deg); }
      .content li:hover .card-back {
        z-index:0;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform: perspective(1000) rotateX(0deg);
        -moz-transform: perspective(1000) rotateX(0deg);
        -ms-transform: perspective(1000) rotateX(0deg);
        -o-transform: perspective(1000) rotateX(0deg);
        transform: perspective(1000) rotateX(0deg); }
    .content li:nth-child(1) .card-back, .content li:nth-child(9) .card-back {
      background: #cedc00; }
    .content li:nth-child(2) .card-back {
      background: #008fd3; }
    .content li:nth-child(3) .card-back {
      background: #008fd3; }
    .content li:nth-child(4) .card-back {
      background: #c80f2e; }
    .content li:nth-child(5) .card-back {
      background: #d9d9d9; }
    .content li:nth-child(6) .card-back {
      background: #7381a8; }
    .content li:nth-child(7) .card-back {
      background: #da222b; }
    .content li:nth-child(8) .card-back {
      background: #f07938; }
    .content li:first-child, .content li:last-child {
       }
  .content .card-front,
  .content .card-back {
    text-align: right;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 400ms;
    -moz-transition: -moz-transform 400ms;
    -o-transition: -o-transform 400ms;
    transition: transform 400ms;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%; }
	
	.content .card-back img{ height: 90%;
    padding: 7px 17px 0 0;
    width: 93%;}
	
  .content .card-front {
    -webkit-transform: perspective(1000) rotateX(0);
    -moz-transform: perspective(1000) rotateX(0);
    -ms-transform: perspective(1000) rotateX(0);
    -o-transform: perspective(1000) rotateX(0);
    transform: perspective(1000) rotateX(0);
    /*z-index: 900;*/
}
  .content .card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    /*z-index: 800;*/ 
	}
 
  
.close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 20px; }
/*
.active {
  width: 100% !important;
  height: 100% !important; }
  .active .all-content {
    position: absolute;
    left: 10px;
    top: 20px; } */
	
.box-left-spc{ margin-left:30px;}	

.box-left-spc1{ margin-left:30px;}	
	
.box-left-spc1-1{ margin-left:5px;}	
    
@media (min-width: 440px) and (max-width: 750px) {
 
  .content li {
    width: 33.1%; } }
@media (max-width: 439px) {
  
  .content li {
    width:82%; } .seg{margin-left:4.5%;} .seg1{margin-left:7.5%;} }
@media (max-height: 450px) {
  
  .content li {
   /* width: 33%; */ width: 23%;  } }