/* 
    Created on : 11.02.2019, 17:30:11
    Author     : klaus
    Version    : 5 (13.3.2019)
    
*/

.flip-item
{
    cursor:pointer;
}

/**********************************************************************
*                                                                     *  
*  Styles for the flip version of photo-flip                          *
*                                                                     *
**********************************************************************/

/* entire container, keeps perspective */
.flip-container
{   
   display:flex;
   flex-direction:column;
   
   perspective: 1000px;
   height: 263px;
   width: 173px;   
   float:left;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper 
{
    transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper 
{
    /* flip duration */
    transition: 0.6s; 
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front  
{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
    top: 0;
    left: 0;

    transform: rotateY(0deg); /* for firefox 31 */
    position: absolute;    
    
    float:left;
    z-index: 2;

    width:95%;
}
   
/* hide back of pane during swap */
.back 
{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
    top: 0;
    left: 0;
    right: 0;
    max-width: 95%; 

    transform: rotateY(180deg);
    position: relative;    
}

.frontImage{
    opacity: 1;
}

.backImage{
    opacity: 0.2;
    filter: gray;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    visibility: visible;
    position: absolute;
}


/**********************************************************************
*                                                                     *  
*  Styles for the table inside photo-flip                             *
*                                                                     *
**********************************************************************/

.zPhotoFlipTable
{
    table-layout: fixed;
    position: absolute;
    max-width:140px !important;
    background-color: lightgray;
    top:10px;
    /*width:85% !important;*/
    padding: 1px !important;
    color: royalblue;
    font-weight: bolder;
}

.zPhotoFlipTr
{
    max-width:140px;
    height:20px !important;
}

.zPhotoFlipTh, .zPhotoFlipTd 
{
    max-width:140px;
    height: 20px !important;
    overflow-wrap:  break-word;
    font-size: small !important;
    font-weight: 20px !important;
    padding: 1px !important;
}


/**********************************
*                                 *  
*  Styles for the overlay window  *
*                                 *
***********************************/

.overlay {
  height: 100%;
  display:flex;
  float:left;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 20%;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

[aria-hidden="true"] { display:none;}
[aria-hidden="false"] { display:block;}

.overlay-content 
{
  display:flex;
  flex-direction:column;
   
  height: 450px;
  min-width: 300px;   
  float:left;
  position: relative;
  top: 15%;
  margin-left:50%;
  text-align: left;
  margin-top: 30px;
}

.overlay a 
{
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  transition: 0.3s;
}

.overlay .closebtn 
{
  position: absolute;
  top: 100px;
  right: 45px;
  font-size: 60px;
}

.overlay-image
{
  top:10px;
  width:320px; 
  left:170px; 
  position:absolute;
}


/*********************************
*                                *
*  Styles for the zoom version   *
*                                *
*********************************/
.zoom-container 
{   
   display:flex;
   flex-direction:column;
   
   perspective: 1000px;
   height: 263px;
   width: 173px;   
   float:left;
}

.zoom-container:hover .zoom-text 
{
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.zoom
{
   width:95%;
}

.zoom:hover 
{
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  
  -ms-transition: .3s ease;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.zoom-text
{
  position: absolute;
  bottom: 10%;
  overflow: hidden;
  width: 100%;
  height: 30%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -ms-transition: .4s ease;
  -webkit-transition: .4s ease;
  transition: .4s ease;
}

.text 
{
  color: white;
  position: absolute;
  
  top: 50%;
  font-size: x-large;
  font-weight: lighter;
  background-color: gray;
  text-align: center;
}


/****************************************
*                                       *
*  Styles for the smartphone version    *
*                                       *
****************************************/

@media screen and (max-device-width: 500px) {
    .overlay-content
    {
        top:5%;
        left:1%;
        width:30%;
        margin-left:0;
    }

    .overlay .closebtn 
    {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
    
    .overlay-image
    {
        left:140px;
    }
    
    .zPhotoFlipTable
    {
        max-width:120px !important;
    }
    
    .zPhotFlipTr, .zPhotoFlipTh, .zPhotoFlipTd
    {
        max-width: 140;
    }
    
    .flip-item
    {
        max-width:90%;
    }
    
    .flip-container, .zoom-container
    {
        width: 100%;
        min-height: 400px;
    }
    
    .front-image
    {
        left: 50px;    
    }
}