#right_tile_close { 
   position:relative;
   float: right;
   width: 200px; 
   height: 514px; 
   margin:  1%  -3px 0 0;
   padding: 0px 0px 0px 0px;
   -webkit-transform-style: preserve-3d;
   transform-origin:  left;
   /* transform: rotateY(0);*/
   -webkit-perspective: 1000px;
   perspective: 1000px;
   z-index: 100; 
   background: transparent;
    object-fit: fill;
    transform: rotateY(180deg);        
}


#right_tile { 
   position:relative;
   float: right;
   width: 200px; /* was 187px until aug 16, 2024 real world inches  X  96 X 0.?? scaler  WAS 336px >0.70 */
   height: 514px; 
   margin:  1%  -5px 0 0;
   padding: 0px 0px 0px 0px;
   -webkit-transform-style: preserve-3d;
   transform-origin:  left;
   -webkit-perspective: 1000px;
   perspective: 1000px;
   z-index: 100; 
   background: transparent;
   object-fit: fill;
   transform: rotateY(180deg);   /* ADDED aug 16, 2024 */      
}



#right_tile_back{
   position:relative;
   float: right;
   width: 185px; /* was 187px until aug 16, 2024  real world inches  X  96 X 0.?? scaler  WAS 336px >0.70 */
   height: 514px; 
   margin-right: 12px;
   transform: rotateY(180deg);
}
  
#right_tile_front {
   position:absolute;
   float: right;
   width: 187px; 
   height: 514px;  
}
  

#left_tile { 
  position:relative;
  float: left;
  width: 200px; 
  height: 514px; 
  margin:  1% 0 0 -7px; 
  padding: 0px 0px 0px 0px;
  -webkit-transform-style: preserve-3d;
  transform-origin:  right;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  z-index: 100; 
  background: transparent; 
  object-fit: fill;
  transform: rotateY(180deg);   /* ADDED aug 16, 2024 */                   
                                            
}
  
  
#left_tile_close { 
    position:relative;
    float: left;
    width: 200px; 
    height: 514px; 
    margin:  1% 0 0 -5px; 
    padding: 0px 0px 0px 0px;
    -webkit-transform-style: preserve-3d;
    transform-origin:  right;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    z-index: 100; 
    background: transparent; 
      object-fit: fill;
    transform: rotateY(180deg);   /* ADDED aug 16, 2024 */                   
                                         
}
  
  
#left_cover { 
    position:relative;
    float: left;
    width: 376px; /*  real world inches  X  96 X 0.?? scaler  WAS 336px >0.70 */
    height: 461px; 
    margin:  1% 0 0 -25.1%;
    padding: 0px 0px 0px 0px;
    -webkit-transform-style: preserve-3d;
    transform-origin:  right;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    z-index: 100; 
    background: #FFFFFF;
    transition: transform 1.5s;
    
    animation:leftFlap 3s forwards;
    display: inline-block;
    
    -webkit-transition: transform 1.5s;
    
    -webkit-animation-name: leftFlap;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: forwards;
}
  
  
#left_tile_back{
    position:relative;
    float: left;
    width: 187px; 
    height: 461px; 
    margin:  0 0 0 13px;
    transform: rotateY(180deg);
}
  
#left_tile_front{
  position:absolute;
  float: left;
  width: 187px; 
  height: 461px; 
  margin:  0 0 0 13px;
}


#right_tile img{
    height:auto;  width:auto;
}

#left_tile img{
     height:auto;  width:auto;
}



#right_tile { 
    transition: transform 2s;
    animation: rightFlap 2s forwards;
    animation-delay:  1.2s;
    -webkit-animation-name: rightFlap;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: forwards;
    -webkit-animation-delay:  1.2s;
    
     user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}


#right_tile_close { 
    transition: transform .8s;
    animation: rightFlapClose .8s forwards;
    
    -webkit-animation-name: rightFlapClose;
    -webkit-animation-duration: .8s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: forwards;
}
                                                 
                                                 
#left_tile_close {
    transition: transform .8s;
    animation: leftFlapClose .8s forwards;
    -webkit-animation-name: leftFlapClose;
    -webkit-animation-duration: .8s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: forwards;
}
                                                 
                                                 


#left_tile { 
    transition: transform 2s;
    animation: leftFlap 2s forwards;
    animation-delay:  1.2s;
    
    -webkit-transition: transform 2s;
    
    -webkit-animation-name: leftFlap;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: forwards;
    -webkit-animation-delay:  1.2s;
    
    
     user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


@keyframes showInvite {
  from {
    transform: scale(1);/*transform: scale(0.3);*/
  }
  to {
    transform: scale(1);
  }
}


  
@keyframes rightFlap {
  from {
    transform:rotateY(180deg);
  }
  to {
    transform:rotateY(0deg);
  }  
}


@keyframes rightFlapClose {
  from {
    transform:rotateY(0deg);
  }
  to {
    transform:rotateY(-180deg);
  }  
}

  
@keyframes leftFlap {
  from {
    transform:rotateY(-180deg);
  }
  to {
    transform:rotateY(0deg);
  }
}


@keyframes leftFlapClose {
  from {
    transform:rotateY(0deg);
  }
  to {
    transform:rotateY(180deg);
  }
}



.tile_imaj_right {
  height: 514px;
  width: 374px;
  position: absolute;
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  object-fit:fill;
}

.tile_imaj_left {
  height: 514px;
  width: 374px;
  right: -1px;
  position: absolute;
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
   object-fit:fill;
}