*{
    padding: 0px;
    margin: 0px
    
}

.cotent{
    width: 100%;
    height: 100%
}

.slider{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-position: center center;
    background-image: url(house-in-snow-mountains.jpg);
    z-index: -1;
}

.slider li{
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center center;
    
    animation: slider 40s linear infinite;
    -moz-animation: slider 40s linear infinite;
    -ms-animation: slider 40s linear infinite;
    -o-animation: slider 40s linear infinite;
    -webkit-animation: slider 40s linear infinite;
    
}

.slider .img1{
    background-image: url(new-jersey.jpg);
    animation-delay: 10s;
    
}

.slider .img2{
    background-image: url(rotterdam-netherlands-holland.jpg);
    animation-delay: 20s;
    
}

.slider .img3{
    background-image: url(england-glow-derbyshire-boats.jpg);
    animation-delay: 30s;
}

@keyframes slider {
    0%{opacity: 0;animation-timing-function: ease-in;}
    10%{opacity: 1;animation-timing-function:ease-out;}
    25%{opacity: 1;transform: scale(1);}
    50%{opacity: 0;transform:  scale(2);}
    100%{opacity: 0;}
}

@moz-keyframes slider {
    0%{opacity: 0;animation-timing-function: ease-in;}
    10%{opacity: 1;animation-timing-function:ease-out;}
    25%{opacity: 1;transform: scale(1);}
    50%{opacity: 0;transform:  scale(2);}
    100%{opacity: 0;}
}

@ms-keyframes slider {
    0%{opacity: 0;animation-timing-function: ease-in;}
    10%{opacity: 1;animation-timing-function:ease-out;}
    25%{opacity: 1;transform: scale(1);}
    50%{opacity: 0;transform:  scale(2);}
    100%{opacity: 0;}
}


@o-keyframes slider {
    0%{opacity: 0;animation-timing-function: ease-in;}
    10%{opacity: 1;animation-timing-function:ease-out;}
    25%{opacity: 1;transform: scale(1);}
    50%{opacity: 0;transform:  scale(2);}
    100%{opacity: 0;}
}

@webkit-keyframes slider {
    0%{opacity: 0;animation-timing-function: ease-in;}
    10%{opacity: 1;animation-timing-function:ease-out;}
    25%{opacity: 1;transform: scale(1);}
    50%{opacity: 0;transform:  scale(2);}
    100%{opacity: 0;}
}









































