body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.bg {
    background-image: url("../images/wood.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.darkness{
    background-color: rgba(0,0,0,0.5);
    height: 100%;
}

.col-md-6 {
    color: black !important;
}

.col-md-6 h1 {
    text-align: center;
}

/*.parallax {*/
    /*!* The image used *!*/
    /*background-image: url("../images/girl.jpeg");*/

    /*!* Set a specific height *!*/
    /*height: 100%;*/

    /*!* Create the parallax scrolling effect *!*/
    /*background-attachment: fixed;*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
/*}*/
.hiden{
  visibility: hidden;
}

.container
{
    width:100%;
    height:110%;
    box-shadow:20px 20px 50px grey;
}
#slideshow {
    list-style: none;
    margin: 0;
    padding: 0;

    width:100%;
    height:110%;
    display: inline-block;


}
.elemnt,.elemnt1,.elemnt2,.elemnt3 {
    position: absolute;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 110%;
    display: inline-block;
    text-align: center;
}

.elemnt {
    animation: xfade 20s 15s infinite;
    background: url('../images/slide2.jpg');
    margin: 0;
    padding: 0;

    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;



}
.elemnt1 {
    animation: xfade 20s 10s infinite;
    background: url('../images/slide1.jpg');
    margin: 0;
    padding: 0;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.elemnt2 {
    animation: xfade 20s 5s infinite;
    background: url('../images/slide2.jpg');
    margin: 0;
    padding: 0;


    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.elemnt3 {
    animation: xfade 20s 0s infinite;
    background: url('../images/slide3.jpg');
    margin: 0;
    padding: 0;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
@keyframes xfade{
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
}
@keyframes xfade1{
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
}
@keyframes xfade2{
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
}
@keyframes xfade3{
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
}

.darknessslide{
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
}

.block1{
    background-color: white;
    z-index: 3;
    padding-bottom: 20px;


}

#slideshow h3{
    top: 55%;
    position: absolute;
    text-align: center;
    left: 10%;
    right: 10%;
    width: 80%;
    margin: 0 auto;
    color: white;
    font-size: 30pt;
    font-weight: bold;
}

@media (max-width:765px) {
    #slideshow h3{
        top: 15%;
        left: 6%;
        right: 6%;
        width: 88%;
    }
}

.parallax {
    /* The image used */
    background-image: url("../images/parallax.jpg");

    /* Set a specific height */
    height: 200px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.headerbg {
    background: url("../images/slide2.jpg") no-repeat top;
    background-size: cover;
    height: 300px;
    position: relative;
}
.headerDark {
    background-color: rgba(0,0,0,0.5);
    height: 300px;
}

.headerDark h1 {
    color: white;
    text-align: center;
    font-size: 50pt;
    position: absolute;
}
.headerDark h2 {
    color: #cccccc;
    text-align: center;
    font-size: 35pt;
    position: absolute;
}
#section1 {
    height: 90%;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}