/* Hermetic room Buttons */

input.hr1 {
    cursor:pointer;font-size:12pt;
    background: #BDBDBD;
    border: 1px solid #BDBDBD !important;
    border-radius: 3px;
    color: #000000;  
    margin: 3px;
}

 input.hr1:hover{
    background: #FFFFFF;
    border: 1px solid #BDBDBD !important;
    color: #000000; 
 }

input.hr2 {
    cursor:pointer;font-size:12pt;
    background: #151515;
    border: 1px solid #BDBDBD !important;
    border-radius: 3px;
    color: #FFFFFF; 
    margin: 3px;
}

 input.hr2:hover{
    background: #FFFFFF;
    border: 1px solid #BDBDBD !important;
    color: #000000; 
 }

 table.hr{
background: #2e2e2e;
background-image: url('../hermeticroom/animations/img/kacheln/tile-1_81x100px.png');
transition: transform 2s;
    animation-timing-function: linear;
    position: relative;
    -webkit-animation-name: tile-color; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    animation-name: tile-color;
    animation-duration: 10s;
    animation-iteration-count: infinite;
 }

table.hr:hover {

      transform:
    perspective( 442px )  /* 342 */        
    rotateY( 35deg );          
  transform-origin: right center;
}

div.hr_text {
    background: #151515;
    background-image: url('../hermeticroom/animations/img/kacheln/tile-1_81x100px.png');
    border: 1px solid #BDBDBD !important;
    border-color: #000000;
    padding: 3px;
    /* background-size: 100% 100%; */
    background-position: 0px 0px;
    background-repeat: repeat; 
    position: relative;
    /*
    animation-timing-function: linear;
    position: relative;
    -webkit-animation-name: tile-color2; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: 3; 
    animation-name: tile-color2;
    animation-duration: 10s;
    animation-iteration-count: infinite; */    
    
    animation-name: tile-color2;
    animation-duration: 16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    -webkit-animation-name: tile-color2; 
    -webkit-animation-duration: 16s; 
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;   
      
}

div.hr_text:hover {

}

img.hr {
transition: filter 5s;
}

img.hr:hover {
filter: invert(1);
-webkit-filter: invert(1);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes tile-float {
    0%   {background-position: 0px 0px;}
    100% {background-position: 81px 100px;}
}

/* Standard syntax */
@keyframes tile-float {
    0%   {background-position: 0px 0px;}
    100% {background-position: 81px 100px;}
}

@-webkit-keyframes tile-color {
    0%   {background-color: #151515;}
    50% {background-color: #414141;}
    100%   {background-color: #151515;}
}

@keyframes tile-color {
    0%   {background-color: #151515;}
    50% {background-color: #414141;}
    100%   {background-color: #151515;}
}

@-webkit-keyframes tile-color2 {
    0%   {background-color: #151515;}
    50% {background-color: #000000;}
    100%   {background-color: #151515;}
}

@keyframes tile-color2 {
    0%   {background-color: #151515;}
    50% {background-color: #000000;}
    100%   {background-color: #151515;}
}