body {
    overflow-x: hidden;
    margin: 0;
}

* {
    font-family: 'Poppins', sans-serif !important;
}

.x-header {
    background-color: #171717;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100px;
}

.infoteksti {
    width: 700px;
    padding: 10px;
    color: #fff;
}

.keske {
    width: 100%;
    display: flex;
    justify-content: center;
}

@keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

div#slider { overflow: hidden; }
div#slider figure div { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite; 
}

.parallax {
  background-image: url("../images/1.jpg");
  min-height: 800px; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
    background-image: url("../images/2.jpg");
    min-height: 800px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax3 {
    background-image: url("../images/3.jpg");
    min-height: 800px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax4 {
    background-image: url("../images/4.jpg");
    min-height: 800px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax5 {
    background-image: url("../images/kuvaz.jpg");
    min-height: 600px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slider-logo {
    position: static;
    font-size: 50px;
    color: #fff;
    font-weight: bold;
    margin: 0 !important;
    padding-left: 30px !important;
    text-shadow: .1em .1em 0 rgb(0, 0, 0);
}

.x-content {
    width: 70%;
    background-color: #171717;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    padding: 3px;
    font-family: 'Roboto', sans-serif;
    margin: 30px;
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.x-footer {
    width: 100%;
    margin-top: 50px;
    text-align: center;
    color: #fff;
    background-color: #171717;
    text-align: center;
    padding: 25px;
}

.nonii {
    width: 23rem !important;
}

@media screen and (max-width: 1px), 
       screen and (max-height: 850px) {
            .parallax {
                min-height: 400px; 
            }
            .parallax2 {
                min-height: 400px; 
            }
            .parallax3 {
                min-height: 400px; 
            }
            .parallax4 {
                min-height: 400px; 
            }
            .parallax5 {
                min-height: 400px; 
            }
       }

@media screen and (max-width: 511px) {
	.slider-logo {
		font-size: 30px;
	}
}

@media screen and (max-width: 750px) {
    
    .nonii {
        width: 12em !important;
    }
}

@media screen and (max-width: 386px) {
    .infoteksti {
        font-size: 15px;
    }

    .nonii {
        width: 9em !important;
    }

    .x-content h1 {
        font-size: 30px;
    }

    .x-content p {
        font-size: 15px;
    }
}