/*@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");*/

.ken-burns-slideshow {
    position: relative;
    z-index: -2;
    margin: 0;
    padding: 0;
    width: 100vw;
    /*height: calc(100vh - 100px);*/
    height: 100vh;
    overflow: hidden;
    list-style-type: none;
}
.ken-burns-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    /*transform: scale(1.2);*/
    /*animation: kenburns 24s linear infinite;*/
}
.ken-burns-slideshow .slide:nth-child(1) {
    animation-delay: 0s;
}
.ken-burns-slideshow .slide:nth-child(2) {
    animation-delay: 0s;
}
.ken-burns-slideshow .slide:nth-child(3) {
    animation-delay: 0s;
}

#slide1 {
    /*background-image: url("http://qiniu.warmseen.com/anim_h_n_bg_s.jpg");*/
}
#slide1 > img {
    position: absolute;
    left: 0;
    top: 0;
    animation: fadetop 108s ease-in-out 1;
    animation-fill-mode: forwards;
    opacity: 0;
}
#t_img {
    animation-delay: 0.5s;
}
#tm_img {
    animation-delay: 0.7s;
}
#bm_img {
    animation-delay: 0.9s;
}
#b_img {
    animation-delay: 1.1s;
}

#slide2{
    position: absolute;
    /*left: 0;*/
    /*top: 0;*/
    animation: scaledown 3s ease-in-out 1;
    animation-fill-mode: forwards;
}
#slide2 > img {
    position: absolute;
    /*left: 0;*/
    /*top: 0;*/
    animation: slideleft 158s ease-in-out 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

#slide2 {
    /*background-image: url("http://cdn.warmseen.com/banner_h_n_s.jpg");*/
}

#slide2 > img:nth-child(1) {
    animation-delay: 1.2s;
}
#slide2 > img:nth-child(2) {
    animation-delay: 1.2s;
}
#slide2 > img:nth-child(3) {
    animation-delay: 1.2s;
}
#slide2 > img:nth-child(4) {
    animation-delay: 1.2s;
}


#sl {
    position: absolute;
    /*left: 0;*/
    /*top: 0;*/
    animation-fill-mode: forwards;
    opacity: 0;
    transform-origin: center;
    animation: scaleanimright 108s ease-in-out 1;
}
#sr {
    position: absolute;
    /*left: 0;*/
    /*top: 0;*/
    animation-fill-mode: forwards;
    opacity: 0;
    transform-origin: center;
    animation: scaleanimleft 108s ease-in-out 1;
}
#slide3 > img:nth-child(1) {
    animation-delay: 0.5s;
}
#slide3 > img:nth-child(2) {
    animation-delay: 0.5s;
}

#slide3 {
    /*background-image: url("http://cdn.warmseen.com/people_h_n_s.jpg");*/
}

.bg-main {
    /*position: absolute;*/
    position: relative;
    top: 0;
    left: 0;
    /*height: calc(100vh - 100px);*/
    height: 100vh;
    /*height: 100vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Lora, serif;
    letter-spacing: 0.2rem;
    color: white;
    overflow: hidden;
}
.bg-main h1 {
    font-size: 250%;
    text-shadow: 0 2px 2px black;
}

@keyframes kenburns {
    10% {
        opacity: 1;
    }
    25% {
        opacity: 1;
        transform: scale(1);
    }
    36% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes fadetop {
    0% {
        opacity: .5;
        transform: translateY(75px);
    }
    1% {
        opacity: 1;
        transform: translateY(0);
    }
    /*85% {*/
    /*    opacity: 0;*/
    /*}*/
}

@keyframes scaleanimleft {
    0% {
        opacity: .5;
        transform: scale(1.4) translateX(100px);
    }
    1% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    /*85% {*/
    /*    opacity: 0;*/
    /*}*/
}
@keyframes scaleanimright {
    0% {
        opacity: .5;
        transform: scale(1.4) translateX(-100px);
    }
    1% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    /*85% {*/
    /*    opacity: 0;*/
    /*}*/
}
@keyframes slideleft {
    0% {
        opacity: .7;
        transform: translateX(-100px);
    }
    1% {
        opacity: 1;
        transform: translateX(0px);
    }
    /*85% {*/
    /*    opacity: 0;*/
    /*}*/
}
@keyframes scaledown {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
    /*85% {*/
    /*    opacity: 0;*/
    /*}*/
}
.lightimg:hover{
    -webkit-filter: brightness(150%);
    filter: brightness(150%);
}