body
{
overflow-x:hidden;
width:100%;
font: 15px "Century Gothic", "Times Roman", sans-serif;
background:#eee;
min-height:550px;
background-attachment:fixed;
}
.bg
{min-height: 570px;}
.bg1
{
background:rgba(0,0,0,0.5);
min-height:535px;
animation: animateImg1 16s ease-in-out infinite;
}
@keyframes animateImg1
{
    
0%,100%
    {
        background-image:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url(../image/KG.jpg);
        background-size: 100% 100%;
    }
25%
    {
        background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/bg3.jpg);
        background-size: 100% 100%;
    }
50%
    {
        background-image:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url(../images/bg4.jpg);
        /*background-repeat: no-repeat;*/
        background-size: 100% 100%;
    }
75%
    {
        background-image:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url(../images/bg5.jpg);
        background-size: 100% 100%;
    }
}

@font-face {
   font-family: 'typo';
    src: url('../fonts/typo.ttf');
	}

@font-face {
   font-family: 'gothic';
    src: url('../fonts/gothics.ttf');
	}

.panel{
border-color:#eee;
margin:40px;
padding:20px;
font: 15px "Century Gothic", "Times Roman", sans-serif;
}

.title
{
font-family:'typo';
}

.header
{
height:70px;
background:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5));
animation: animateImg 16s ease-in-out infinite;
background-size:70px;
}
@keyframes animateImg
{
10%
    {
        background:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url(Background1.jpg);
        /*background-image:url(bg.jpg);*/
        background-size: 300px 100px;
    }
25%
    {
        background:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url(bg.jpg);
        /*background-image:url(bg.jpg);*/
        background-size: 300px 100px;
    }
50%
    {
        background:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url(Background4.jpg);
        /*background-repeat: no-repeat;*/
        /*background-image:url(Burger.jpg);*/
        background-size: 300px 100px;
    }
75%
    {
        background:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url(Background3.jpg);
        /*background-image:url(dog.png);*/
        /*width:100%;*/
        background-size: 300px 100px;
    }
}
.logo
{
font-family:'typo';
font-size:35px;
color:#ffbb33;
margin:15px;
animation: fadeInAnimation ease 3s infinite;
/*animation-iteration-count: 100;*/
animation-fill-mode: forwards;
}
 @keyframes fadeInAnimation {
    0% {
        opacity: 0;
       }
    100% {
        opacity: 1;
         }
}
.title1{
font: 16px "Century Gothic", "Times Roman", sans-serif;
}
.title2{
font-family: 'Ubuntu', sans-serif;
font-size:20px;
}


.sub1
{
width:90px;
color:#202020;
background:orange;
font-size:15px;
height:35px;
margin:20px;
padding:10px;
width:100px;
}


.sub
{
width:100%;
background-color:#9acd32;
font-size:20px;
padding:2px;
margin-top:15px;
margin-right:20px;
}
.sub:hover
{
color:#fff;
}

.footer
{
font-size:15px;
text-align:center;
border-top:1px solid;
border-color:#323232;
background-color:#202020;
position:relative;
bottom:0;
left:0;
}
.footer a
{
margin:25px;
color:orange;
text-decoration:none;
font: 15px "Century Gothic", "Times Roman", sans-serif;

}
.footer a:hover
{
text-decoration:none;
color:#9acd32;
border-top:2px solid;
border-color:orange;

}
.box
{
padding:9px;
}
hr{
color:#000000;
}
.top
{
margin-top:20px;
}
.log1
{
font: 15px 'Ubuntu', sans-serif;
color:orange;
margin-left:10px;
}
.log
{
margin:10px;
margin-right:60px;
margin-left:5px;
color:orange;
text-decoration:none;
font-size:20px;
font-size:15px;
animation: animate 3s linear infinite;
}
@keyframes animate
{
    0%
    {
        transform:rotate(0deg) skewX(0deg);
        background-position: 100%;
    }
    25%
    {
        transform:rotate(10deg) skewX(10deg);
    }
    75%
    {
        transform:rotate(-10deg) skewX(-10deg);
    }
    100%
    {
        transform:rotate(0deg) skewX(0deg);
        background-position: 200%;
    }
}
.log:hover
{
color:#9acd32;
border-top:2px solid;
border-color:orange;
text-decoration:none;
}
.test
{
margin:100px;
margin-right:60px;
margin-left:100px;
color:orange;
text-decoration:none;
font-size:20px;
font-size:15px;
animation: animate 3s linear infinite;
}
@keyframes animate
{
    0%
    {
        transform:rotate(0deg) skewX(0deg);
        background-position: 0%;
    }
    25%
    {
        transform:rotate(10deg) skewX(10deg);
    }
    75%
    {
        transform:rotate(-10deg) skewX(-10deg);
    }
    100%
    {
        transform:rotate(0deg) skewX(0deg);
        background-position: 0%;
    }
}

.test:hover
{
color:#9acd32;
border-top:2px solid;
border-color:orange;
text-decoration:none;
}