<style type="text/css">      

           
/*************************************      
Build the scene and rotate on hover      
**************************************/      

.scene {      
      width: 260px;      
      height: 370px;      
      margin: 30px;      
      float: left;      
      -webkit-perspective: 1000px;      
      -moz-perspective: 1000px;      
      perspective: 1000px;      
}      

.movie {      
      width: 260px;      
      height: 370px;      
      -webkit-transform-style: preserve-3d;      
      -moz-transform-style: preserve-3d;      
      transform-style: preserve-3d;      
      -webkit-transform: translateZ(-130px);      
      -moz-transform: translateZ(-130px);      
      transform: translateZ(-130px);      
      -webkit-transition: -webkit-transform 350ms;      
      -moz-transition: -moz-transform 350ms;      
      transition: transform 350ms;      
}      

.movie:hover {      
      -webkit-transform: rotateY(-78deg) translateZ(20px);      
      -moz-transform: rotateY(-78deg) translateZ(20px);      
      transform: rotateY(-78deg) translateZ(20px);      
}      

/*************************************      
Transform and style the two planes      
**************************************/      

.movie .poster,      
.movie .info {      
      position: absolute;      
      width: 260px;      
      height: 370px;      
      background-color: #fff;      
      -webkit-backface-visibility: hidden;      
      -moz-backface-visibility: hidden;      
      backface-visibility: hidden;      
}      

.movie .poster {      
      -webkit-transform: translateZ(130px);      
      -moz-transform: translateZ(130px);      
      transform: translateZ(130px);      
      background-size: cover;      
      background-repeat: no-repeat;      
}      

.movie .info {      
      -webkit-transform: rotateY(90deg) translateZ(130px);      
      -moz-transform: rotateY(90deg) translateZ(130px);      
      transform: rotateY(90deg) translateZ(130px);      
      border: 1px solid #B8B5B5;      
      font-size: 0.8em;      
      text-align: justify;      
      font-family: Tahoma, Geneva, sans-serif;      
}      

/*************************************      
Shadow beneath the 3D object      
**************************************/      

.csstransforms3d .movie::after {      
      content: '';      
      width: 260px;      
      height: 260px;      
      position: absolute;      
      bottom: 0;      
      box-shadow: 0 30px 50px rgba(0,0,0,0.3);      
      -webkit-transform-origin: 100% 100%;      
      -moz-transform-origin: 100% 100%;      
      transform-origin: 100% 100%;      
      -webkit-transform: rotateX(90deg) translateY(130px);      
      -moz-transform: rotateX(90deg) translateY(130px);      
      transform: rotateX(90deg) translateY(130px);      
      -webkit-transition: box-shadow 350ms;      
      -moz-transition: box-shadow 350ms;      
      transition: box-shadow 350ms;      
}      

.csstransforms3d .movie:hover::after {      
      box-shadow: 20px -5px 50px rgba(0,0,0,0.3);      
}      

/*************************************      
Movie information      
**************************************/      

.info header {      
      color: #FFF;      
      padding: 7px 10px;      
      font-weight: bold;      
      height: 165px;      
      background-size: contain;      
      background-repeat: no-repeat;      
      text-shadow: 0px 1px 1px rgba(0,0,0,1);      
}      

.info header h1 {      
      margin: 0 0 2px;      
      font-size: 1.4em;      
}      

.info header .rating {      
      border: 1px solid #FFF;      
      padding: 0px 3px;      
}      

.info p {      
      padding: 1.2em 1.4em;      
      margin: 2px 0 0;      
      font-weight: 400;      
      color: #666;      
      line-height: 1.4em;      
      border-top: 10px solid #555;      
}      

/*************************************      
Generate "lighting" using box shadows      
**************************************/      

.movie .poster,      
.movie .info,      
.movie .info header {      
      -webkit-transition: box-shadow 350ms;      
      -moz-transition: box-shadow 350ms;      
      transition: box-shadow 350ms;      
}      

.csstransforms3d .movie .poster {      
      box-shadow: inset 0px 0px 40px rgba(255,255,255,0);      
}      

.csstransforms3d .movie:hover .poster {      
      box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);      
}      

.csstransforms3d .movie .info,      
.csstransforms3d .movie .info header {      
      box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);      
}      

.csstransforms3d .movie:hover .info,      
.csstransforms3d .movie:hover .info header {      
      box-shadow: inset 0px 0px 40px rgba(0,0,0,0);      
}      

/*************************************      
Posters and still images      
**************************************/      
.info {      
      background-repeat: no-repeat;      
      background-size: 260px 185px !important;      
}      

.poster {      
      background-repeat: no-repeat;      
      background-size: 260px 370px !important;      
}      

/*************************************      
Fallback      
**************************************/      
.no-csstransforms3d .movie .poster,      
.no-csstransforms3d .movie .info {      
      position: relative;      
}      

/*************************************      
Media Queries      
**************************************/      
@media screen and (max-width: 60.75em){      
      .scene {      
      float: none;      
      margin: 30px auto 60px;      
      }      
}      
           
</style>      
<div class="scene">      
<div class="movie" onclick="return true">      
      <div class="poster" style="background-image: url($IMG_URL1$);"></div>      
      <div class="info" style="background-image: url($IMG_URL2$);">      
      <header>      
          <h1>$TITLE$ </h1><br>      
          <span class="1">Kategorija : $CATEGORY_NAME$</span><br>      
          <span class="2">Gads : $OTHER1$</span>      
      </header>      
      <p>      
               
          <a href="$ENTRY_URL$"><?if(len($MESSAGE$)>395)?><?substr($MESSAGE$,0,353)?> ... <span style="color:red">Lasīt tālāk »</span><?else?>$MESSAGE$ <?endif?>
               
               
      </a>      
      </p>      
      </div>      
      </div>      
      </div>

<span class="2">Gads : $OTHER1$</span>

<span class="2">Gads : $OTHER1$</span>

<span class="3">Režisors : $OTHER2$</span>

<span class="4">Aktieri : $OTHER3$</span>