@media print {
    body * {
      visibility: hidden;
    }
    .info, .info * {
      visibility: visible;
    }
    .info {
      position: absolute;
      left: 0;
      top: 0;
    }
    #back{
        visibility: hidden;
    }
    * img{
        width:50%;
    }
  }

  #image_404{
    width: 80%;
  }

/* 
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
*/
@media only screen and (min-width: 1281px) {
.info{
    background-color: white;
    width: 100%;
    text-align: center;
}

    .hero{
        top: 0;
        width: 100%;
        min-height: 350px;
        background-color:rgb(0, 77, 105);
        background: linear-gradient(160deg, rgb(0, 105, 144) 0, rgba(198,34,137,0.3) 110vw);
        pointer-events: none;
    }

        .hero span{
            position: absolute;
            font-size: 5vw;
            top: 60%;
            width: 100%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            display: block;
            opacity: .5;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
        }

    .projecten{
        width: 80%;
        display:inline-block;
        text-align: center;
        padding: 100px 0;
    }

        .project{
            display: inline-block;
            vertical-align: top;
            width:48%;
        }

            .project p{
                text-align: left;
                display: inline-block;
                width: 80%;
            }

            .project p img{
                width: 100% !important;
                max-height: 100% !important;
            }

        .post_media{
            display: inline-block;
            vertical-align: top;
            width: 48%;
        }

            .post_media video{
                margin-top: 100px;
                float: right;
                width: 80%;
            }

                .post_media video source{
                }

#back{
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
    text-align: center;
    color: rgb(48, 48, 48);
}

    #back:hover{
        color: rgb(13, 112, 161);
        cursor: pointer;
    }
}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
.info{
    background-color: white;
    width: 100%;
    text-align: center;
}

    .hero{
        top: 0;
        width: 100%;
        min-height: 350px;
        background-color: white;
        background: linear-gradient(165deg, rgba(16, 56, 75,.8) 0, rgba(198,34,137,0.3) 110vw);
        pointer-events: none;
    }

        .hero span{
            position: absolute;
            font-size: 5vw;
            top: 60%;
            width: 100%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            display: block;
            opacity: .5;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
        }

    .projecten{
        width: 80%;
        display:inline-block;
        text-align: center;
        padding: 100px 0;
    }

        .project{
            display: inline-block;
            vertical-align: top;
            width:48%;
        }

            .project *{
                text-align: left;
                display: inline-block;
                width: 80%;
            }

        .post_media{
            display: inline-block;
            vertical-align: top;
            width: 48%;
        }

            .post_media video{
                margin-top: 100px;
                float: right;
                width: 80%;
            }

#back{
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
    text-align: center;
    color: rgb(48, 48, 48);
}

    #back:hover{
        color: rgb(13, 112, 161);
        cursor: pointer;
    }
}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.info{
    background-color: white;
    width: 100%;
    text-align: center;
}

    .hero{
        top: 0;
        width: 100%;
        min-height: 350px;
        background-color: white;
        background: linear-gradient(165deg, rgba(16, 56, 75,.8) 0, rgba(198,34,137,0.3) 110vw);
        pointer-events: none;
    }

        .hero span{
            position: absolute;
            font-size: 5vw;
            top: 60%;
            width: 100%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            display: block;
            opacity: .5;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
        }

    .projecten{
        width: 90%;
        display:inline-block;
        text-align: center;
        padding: 100px 0;
    }

        .project{
            display: inline-block;
            vertical-align: top;
            width:40%;
        }

            .project *{
                text-align: left;
                display: inline-block;
                width: 90%;
            }

        .post_media{
            display: inline-block;
            vertical-align: top;
            width: 58%;
        }

            .post_media video{
                margin-top: 100px;
                float: right;
                width: 80%;
            }

#back{
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
    text-align: center;
    color: rgb(48, 48, 48);
}

    #back:hover{
        color: rgb(13, 112, 161);
        cursor: pointer;
    }

}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.info{
    background-color: white;
    width: 100%;
    text-align: center;
}

    .hero{
        top: 0;
        width: 100%;
        min-height: 350px;
        background-color: white;
        background: linear-gradient(165deg, rgba(16, 56, 75,.8) 0, rgba(198,34,137,0.3) 110vw);
        pointer-events: none;
    }

        .hero span{
            position: absolute;
            font-size: 5vw;
            top: 60%;
            width: 100%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            display: block;
            opacity: .5;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
        }

    .projecten{
        width: 90%;
        display:inline-block;
        text-align: center;
        padding: 100px 0;
    }

        .project{
            display: inline-block;
            vertical-align: top;
            width:40%;
        }

            .project *{
                text-align: left;
                display: inline-block;
                width: 80%;
            }

        .post_media{
            display: inline-block;
            vertical-align: top;
            width: 58%;
        }

            .post_media video{
                margin-top: 100px;
                float: right;
                width: 80%;
            }

#back{
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
    text-align: center;
    color: rgb(48, 48, 48);
}

    #back:hover{
        color: rgb(13, 112, 161);
        cursor: pointer;
    }
}

/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media only screen and (min-width: 481px) and (max-width: 767px) {    
.info{
    background-color: white;
    width: 100%;
    text-align: center;
}

    .hero{
        top: 0;
        width: 100%;
        min-height: 300px;
        background-color: white;
        background: linear-gradient(165deg, rgba(16, 56, 75,.8) 0, rgba(198,34,137,0.3) 110vw);
        pointer-events: none;
    }

        .hero span{
            position: absolute;
            font-size: 5vh;
            top: 60%;
            width: 100%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            display: block;
            opacity: .5;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
        }

    .projecten{
        width: 100%;
        display:inline-block;
        text-align: center;
        padding: 100px 0;
    }

        .project{
            display: inline-block;
            text-align: left;
            vertical-align: top;
            width:80%;
        }

            .project *{
                display: inline-block;
                width: 100%;
            }

        .post_media{
            padding-top: 80px;
            text-align: left;
            display: inline-block;
            vertical-align: top;
            width: 100%;
        }

            .sp-thumbs{
                width: 100%;
            }

                .sp-thumbs a{
                    width: 45% !important;
                    margin: 10px 2% !important;
                }

                .post_media video{
                    display: inline-block;
                    margin-top: 100px;
                    width: 100%;
                }

#back{
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
    text-align: center;
    color: rgb(48, 48, 48);
}

    #back:hover{
        color: rgb(13, 112, 161);
        cursor: pointer;
    }
}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media only screen and /*(min-width: 320px) and */(max-width: 480px) {    
.info{
    background-color: white;
    width: 100%;
    text-align: center;
}

    .hero{
        top: 0;
        width: 100%;
        min-height: 300px;
        background-color: white;
        background: linear-gradient(165deg, rgba(16, 56, 75,.8) 0, rgba(198,34,137,0.3) 110vw);
        pointer-events: none;
    }

        .hero span{
            position: absolute;
            font-size: 5vh;
            top: 60%;
            width: 100%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            display: block;
            opacity: .5;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
        }

    .projecten{
        width: 100%;
        display:inline-block;
        text-align: center;
        padding: 100px 0;
    }

        .project{
            display: inline-block;
            text-align: left;
            vertical-align: top;
            width:80%;
        }

            .project *{
                display: inline-block;
                width: 100%;
            }

        .post_media{
            padding-top: 80px;
            text-align: left;
            display: inline-block;
            vertical-align: top;
            width: 100%;
        }

            .sp-thumbs{
                width: 100%;
            }

                .sp-thumbs a{
                    width: 45% !important;
                    margin: 10px 2% !important;
                }

                .post_media video{
                    display: inline-block;
                    margin-top: 100px;
                    width: 100%;
                }

#back{
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
    text-align: center;
    color: rgb(48, 48, 48);
}

    #back:hover{
        color: rgb(13, 112, 161);
        cursor: pointer;
    }

}