@import url('https://fonts.googleapis.com/css2?family=Anton&family=Seymour+One&display=swap');

/* scrolling texts */
#ticker-holder {
    overflow:hidden;
    width: calc(max-content-2em);
    margin: auto;
    -webkit-mask:linear-gradient(90deg, transparent, white 20% white 80% transparent);
    mask:linear-gradient(90deg, transparent, white 20% white 80% transparent);
}

#ticker { 
    position: absolute;
    z-index: 1000;          /* at front of images */
	bottom: 0px;
    left: 0;
    width: max-content;
    height: 1.2em;
    color: #fff;
    opacity:70%;
    animation: scroll 20s linear infinite; 
}
#ticker {
    font-family: 'Anton', 'Arial Narrow', Arial, sans-serif;
	font-size: 240px;
    padding: 0;
    line-height: 1.2em;
}
/* Animation for the ticker */
@-webkit-keyframes scroll { 
    to {
       transform: translateX(-50%);
    }
}
/* @-moz-keyframes scroll { 
    to {
       transform: translateX(-50%);
    }
}
@-o-keyframes scroll { 
    to {
       transform: translateX(-140%);
    }
}
@-ms-keyframes scroll { 
    to {
       transform: translateX(-140%);
    }
}
@keyframes scroll { 
    to {
       transform: translateX(-140%);
    }
} */
.cover-image,
.cover-image:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
/* cover dots */
.cover-image:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
/* image animation using keyframes 'imageAnimation'*/
.cover-image > ul > li{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 35s linear infinite 0s;
    -moz-animation: imageAnimation 35s linear infinite 0s;
    -o-animation: imageAnimation 35s linear infinite 0s;
    -ms-animation: imageAnimation 35s linear infinite 0s;
    backface-visibility: hidden;
    animation: imageAnimation 35s linear infinite 0s; 
}
/* text overlay animation using keyframes 'titleAnimation' */
/*.cover-image li div --- use 'ticker instead*/
/* image fade in and out begins after 0,5,... seconds*/
.cover-image > ul > li:nth-child(1) { 
    background-image: url(../images/1.jpg) 
}
.cover-image > ul > li:nth-child(2) { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s; 
}
.cover-image > ul > li:nth-child(3) { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s; 
}
.cover-image > ul > li:nth-child(4) { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s; 
}
.cover-image > ul > li:nth-child(5) { 
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s; 
}
.cover-image > ul > li:nth-child(6) { 
    background-image: url(../images/6.jpg);
    -webkit-animation-delay: 25s;
    -moz-animation-delay: 25s;
    -o-animation-delay: 25s;
    -ms-animation-delay: 25s;
    animation-delay: 25s; 
}
.cover-image > ul > li:nth-child(7) { 
    background-image: url(../images/7.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cover-image li{
	opacity: 0.9;
}

@media screen and (max-width: 1920px) and (min-resolution:200dpi) { 
    #ticker { font-size: 2;line-height:1.2;}
}
@media screen and (max-width: 1140px), handheld and (max-width: 1140px) { 
    #ticker { font-size: 140px }
}
@media screen and (max-width: 740px),handheld and (max-width: 740px) { 
    #ticker { font-size: 80px }
}