.custom-col{
    margin-top: 40px;
}

.custom-text{
    font-size: 22px;
}

.custom-row{
    padding-top: 15px;
}

.custom-row-extra{
    font-size: 12px;
}

.col-sm-4, .col-sm-6{
    float: left;
}

.custom-img{
    width: 100%;
}

.custom-img-thumb{
    width: 100%;
}

/*.custom-img{
    background-size: cover;
    min-height: 392px;
    background-image: url(img/boxspring_1_thumb.jpg);
}*/


.custom-img:hover .custom-img-thumb {
  opacity: 0.3;
  cursor: pointer;
}

.custom-img:hover .middle {
  opacity: 1;
  cursor: pointer;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.text-middle {
  background-color: #222;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.custom-img-thumb:hover {
    cursor: pointer;
}





.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    /*cursor: pointer;*/
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(https://www.matrasatelier.nl/images/hassan.jpg);
     background-size: cover;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
    .hexagon-in99 {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: 50%;
        background-image: url(https://www.matrasatelier.nl/images/gerard.jpg);
         background-size: cover;
        visibility: visible;
        -webkit-transform: rotate(-60deg);
           -moz-transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
             -o-transform: rotate(-60deg);
                transform: rotate(-60deg);
        }
        .hexagon-in101 {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: 50%;
        background-image: url(https://www.matrasatelier.nl/images/kevin.jpg);
         background-size: cover;
        visibility: visible;
        -webkit-transform: rotate(-60deg);
           -moz-transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
             -o-transform: rotate(-60deg);
                transform: rotate(-60deg);
        }
.hexagon-in2:hover {
    /*background-image: url(http://placekitten.com/241/241);*/
    }

.hexagon1 {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
    }
.hexagon2 {
    width: 200px;
    height: 250px;
    /*margin: -80px 0 0 20px;*/
    }
.dodecagon {
    width: 200px;
    height: 200px;
    margin: -80px 0 0 20px;
    }

#bgvid video { 
    position: fixed;
    /*top: 50%;*/
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    /*transform: translateX(-50%) translateY(-10%);*/
/*    background: url('') no-repeat;*/
    /*background-size: cover;*/
    transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

.overlay{
    width: 100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.overlay h1{
    color: white;
}