@charset "utf-8";
/* CSS Document */
a { text-decoration-color: red;}
.menb:hover { cursor: pointer; height:55px;font-size: 55px;transform:scale(2,2);background-color: #eda978;color:white;
      text-decoration: underline overline; text-decoration-thickness: 18px;
  text-decoration-color: red;
}
.spir1 {position:absolute;top:250px;left: 50px;}
.spir2 {font-size:25px; background-color: transparent;color:#ffffff}

.accordion {
display:inline; 
  background-color: #c8a070;
  cursor: pointer;
  border: none;
/*  text-align: left;
  width: 100%;
  font-size: 15px;
  transition: 0.4s;*/
}

.accordion:hover {
  background-color: #f9e2d2; 
}

.active {
  background-color: #eda978; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: #f9e2d2;
  overflow: hidden;
}



/*div {}*/
table, th, td {
  border-bottom:1px solid black;
  vertical-align: top;
}

.hors {
  z-index: 3;
  
  position: relative;

  animation-iteration-count: infinite;
}
.hors1 {  
  animation-name: wise;
  animation-duration: 13s;
  animation-delay: 0s;
}

@keyframes wise {
0% {transform: rotate(0deg);left:0; top:-175px;}
5% {transform: rotate(0deg);left:-500px; top:-175px;}
10% {transform: rotate(0deg);left:-400px; top:-175px;}
15% {transform: rotate(0deg);left:-300px; top:-175px;}
20% {transform: rotate(0deg);left:-200px; top:-175px;}
25% {transform: rotate(0deg);left:-100px; top:-175px;}
30% {transform: rotate(0deg);width:4em; left:0; top:-170px;}
35% {transform: rotate(-45deg);width:4em; left:65px; top:-205px;}
40% {transform: rotate(-90deg);width:4em; left:80px; top:-250px;}
45% {transform: rotate(-135deg);width:4em; left:65px; top:-295px;}
50% {transform: rotate(-180deg);width:4em; left:0; top:-325px;}
55% {transform: rotate(-225deg);width:4em; left:-65px; top:-295px;}
60% {transform: rotate(-270deg);width:4em; left:-80px; top:-250px;}
65% {transform: rotate(-315deg);width:4em; left:-65px; top:-205px;}
70% {transform: rotate(-360deg);width:4em; left:0; top:-175px;}
75% {transform: rotate(-360deg);left:100px; top:-175px;}
80% {transform: rotate(-360deg);left:200px; top:-175px;}
85% {transform: rotate(-360deg);left:300px; top:-175px;}
90% {transform: rotate(-360deg);left:400px; top:-175px;}
95% {transform: rotate(-360deg);left:500px; top:-175px;}
100% {transform: rotate(-360deg);left:600px; top:-175px;}
}
@keyframes whatever {
  0%   {transform: rotate(0deg);background-color:red; left:0; top:0;}
  15%  {transform: rotate(120deg);background-color:yellow; left:-100px; top:0;}
  30%  {transform: rotate(-120deg);background-color:transparent; left:0; top:0;}
  45%  {background-color:green; left:100px; top:0;}
  60%  {background-color:gold; left:0; top:0;}
  75%  {transform: rotate(360deg);background-color:silver; left:10px; top:0;}
  85%  {transform: rotate(720deg);background-color:green; left:-40px; top:0;}
  100% {transform: rotate(-360deg);background-color:red; left:0; top:0;}
}
.fani {
    height:55px;
    font-size:25px;
     animation-timing-function: linear;
  animation-duration: 40s;  
  position: relative;
  animation-iteration-count: infinite;
}
.fani1 {  
  animation-name: spirit;
  animation-delay: 4s;
}
.fani2 {  
  animation-name: spirit;
  animation-delay: 8s;
}
.fani3 {  
  animation-name: spirit;
  animation-delay: 12s;
}
.fani4 {  
  animation-name: spirit;
  animation-delay: 16s;
}
.fani5 {  
  animation-name: spirit;
  animation-delay: 20s;
}
.fani6 {  
  animation-name: spirit;
  animation-delay: 24s;
}
.fani7 {  
  animation-name: spirit;
  animation-delay:28s;
}
.fani8 {  
  animation-name: spirit;
  animation-delay: 32s;
}
.fani9 {  
  animation-name: spirit;
  animation-delay: 36s;
}
.fani0 {  
  animation-name: spirit;
  animation-delay: 0s;
}

@keyframes spirit {
0% {transform: rotate(-45deg);left:0; top:0px; background-color: #ff0000;color:#ffffff;}
5% {transform: rotate(-40deg);left:100px; top:-100px;color:black;}
10% {transform: rotate(-10deg);left:200px; top:-175px;color:black;}
11% {transform: rotate(0deg);left:210px; top:-170px;color:black;}
15% {transform: rotate(20deg);left:300px; top:-150px;color:black;}
20% {transform: rotate(40deg);left:400px; top:-75px;color:black;}
25% {transform: rotate(0deg);left:500px; top:200px;color:black;}
30% {transform: rotate(-30deg); left:600px; top:170px;background-color: #00ff0050;color:#ffffff;}
35% {transform: rotate(50deg); left:665px; top:205px;background-color: #ff000050;color:#ffffff;}
40% {transform: rotate(100deg); left:680px; top:250px;background-color: #ff000050;color:black;}
45% {transform: rotate(175deg); left:465px; top:295px;background-color: #ff000050;color:#ffffff;}
50% {transform: rotate(185deg); left:400px; top:325px;background-color: #ff000050;color:red;}
55% {transform: rotate(160deg); left:265px; top:250px;background-color: #ff000050;color:red;}
60% {transform: rotate(90deg); left:0px; top:250px;background-color: #ff000050;color:#ffffff;}
65% {transform: rotate(20deg); left:150px; top:305px;background-color: #00ff0050;color:#ffffff;}
70% {transform: rotate(-20deg); left:620px; top:0px;background-color: #00ff0050;color:#ffffff;}
70% {transform: rotate(0deg); left:620px; top:0px;background-color: #00ff0050;color:#ffffff;}
75% {transform: rotate(20deg);left:700px; top:100px;background-color: #00ff0050;color:#ffffff;}
80% {transform: rotate(-20deg);left:800px; top:-100px;background-color: #0000ff50;color:#ffffff;}
85% {transform: rotate(90deg);left:900px; top:175px;background-color: #0000ff50;color:black;}
86% {transform: rotate(-40deg);left:900px; top:175px;background-color: #0000ff50;color:#000000;}
87% {transform: rotate(-10deg);left:1000px; top:150px;background-color: #0000ff50;color:#000000;}
90% {transform: rotate(-10deg);left:1000px; top:150px;background-color: #0000ff50;color:#000000;}
95% {transform: rotate(30deg);left:1100px; top:50px;background-color: #ff000050;color:#000000;}
96% {transform: rotate(0deg);left:1100px; top:50px;background-color: #ff000050;color:#000000;}
97% {transform: rotate(-20deg);left:1100px; top:0px;background-color: #ff000050;color:#000000;}
100% {transform: rotate(0deg);left:1200px; top:0px;background-color: #ff000050;color:#000000;}
}