@charset "utf-8";
/* CSS Document */


.s8bg {
background-size:cover;
background-repeat:no-repeat;
animation: bgchange 30s ease-in-out forwards;
}

@keyframes bgchange {
0% {background-image:url(../images/s8main_da.jpg);background-position: center top;}
40%, 55%{background-image:url(../images/s8main_db.jpg);background-position:20% bottom;}
100% {background-image:url(../images/s8main_da.jpg);background-position: center top;}
}


.navheight {
margin-top:40px;
}


.slogan {
max-height:450px;
filter: drop-shadow(5px 8px 2px rgba(0, 0, 0, 0.7));
animation: show 30s ease-in-out forwards;
}


@keyframes show {
0% {clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);backdrop-filter:blur(0px);}
10% {clip-path: polygon(0 0, 0 27%, 100% 27%, 100% 0);backdrop-filter:blur(0px);}
15% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);backdrop-filter:blur(0px);}
30% {clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);backdrop-filter:blur(0px);}
35% {clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);backdrop-filter:blur(0px);}
45% {clip-path: polygon(0 0, 0 27%, 100% 27%, 100% 0);backdrop-filter:blur(0px);}
50% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);backdrop-filter:blur(0px);}
65% {clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);backdrop-filter:blur(0px);}
70% {clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);backdrop-filter:blur(0px);}
85% {clip-path: polygon(0 0, 0 27%, 100% 27%, 100% 0);backdrop-filter:blur(0px);}
90% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);backdrop-filter:blur(0px);}
95%, 100% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);backdrop-filter:blur(5px);}
}



@media screen and (max-width:768px) { 
.s8bg {
background-image: url(../images/s8main_mobile.jpg);
background-position: center top;
animation: none;
}

.navheight {
margin-top:100px;
}

.slogan {
max-height:400px;
animation: showxs 7s ease-in-out forwards;
}

@keyframes showxs {
0% {clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);backdrop-filter:blur(0px);}
50% {clip-path: polygon(0 0, 0 27%, 100% 27%, 100% 0);backdrop-filter:blur(0px);}
90% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);backdrop-filter:blur(0px);}
100% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);backdrop-filter:blur(3px);}
}

}



footer {
 position:fixed;
 }