/*
  .bodybg { 
position: relative; 
overflow: hidden; 
width: 100%; 
height: 100vh; 
} 
.bodybg img {
/* These properties make sure that the "background image" covers all available space. */


/*
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
min-width: 100%; 
min-height: 100%; 
left: 50%; 
transform: translateX(-50%);

overflow-x: hidden; 
}
*/

body {
    /*    background-image: url("images/chongie.jpg") no-repeat; */
    background: url('images/chongie.jpg') no-repeat;
    background-size: cover;
    background-color: black;
    filter: alpha(opacity=40);
    /* For IE8 and earlier */
}

body,
html {
    height: 100%;
}

* {
    box-sizing: border-box;
}

.bg-image {
    /* The image used */
    background-image: url("images/chongie.jpg");
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Position text in the middle of the page/image */

.bg-text {
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
}