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

    .hero{
        top: 0;
        position:fixed;
        width: 100%;
        min-height: 500px;
        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;
        z-index: 0;
    }

        .hero span{
            text-align:Center;
            position: absolute;
            font-size: 40vh;
            left: 50%;
            top: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            display: block;
            opacity: .3;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
            white-space: nowrap;
        }

        .hero h2{
            position: absolute;
            top:60%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align:center;
            font-size: 40px;
            color: white;
        }

.projecten{
    width: 100%;
    padding-top: 50px;
    text-align: center;
    margin-top: 500px;
    z-index: 0;
    background-color: white;
}

    .partners{
        display: inline-block;
        width: 13%;
        height: 13vw;
        margin: 3%;
        background-image: linear-gradient(to bottom,transparent 0%,  rgb(0,105,144)80%);
    }
    
        .partners a{
            display: block;
            left: -5%;
            top: -5%;
        }
    
        .partners_img{
            position: relative ;
            display: block;
            background-color: white;
            height: 90%;
            width: 90%;
            object-fit: scale-down;
            object-position: center;
            box-shadow: 0px 0px 10px rgb(200, 200, 200);
            padding: 5%;
            transition: .3s;
            -webkit-transition: .3s;
        }
    
            .partners img:hover{
                height: 95%;
                width: 95%;
            }

#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%;
}

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

        .hero span{
            text-align:Center;
            position: absolute;
            font-size: 25vw;
            left: 50%;
            top: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            display: block;
            opacity: .3;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
            white-space: nowrap;
        }

        .hero h2{
            position: absolute;
            top:60%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align:center;
            font-size: 40px;
            color: white;
        }

.projecten{
    width: 100%;
    padding-top: 50px;
    text-align: center;
    margin-top: 500px;
    z-index: 0;
    background-color: white;
}

    .partners{
        display: inline-block;
        width: 14%;
        height: 14vw;
        margin: 1.5%;
        background-image: linear-gradient(to bottom,transparent 0%,  rgb(0,105,144)80%);
    }
    
        .partners a{
            display: block;
            left: -5%;
            top: -5%;
        }
    
        .partners_img{
            position: relative ;
            display: block;
            background-color: white;
            height: 90%;
            width: 90%;
            object-fit: scale-down;
            object-position: center;
            box-shadow: 0px 0px 10px rgb(200, 200, 200);
            padding: 5%;
            transition: .3s;
            -webkit-transition: .3s;
        }
    
            .partners img:hover{
                height: 95%;
                width: 95%;
            }

#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%;
}

    .hero{
        top: 0;
        position:fixed;
        width: 100%;
        min-height: 400px;
        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;
        z-index: 0;
    }

        .hero span{
            text-align:Center;
            position: absolute;
            font-size: 25vw;
            left: 50%;
            top: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            display: block;
            opacity: .3;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
            white-space: nowrap;
        }

        .hero h2{
            position: absolute;
            top:65%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align:center;
            font-size: 30px !important;
            color: white;
        }

.projecten{
    width: 100%;
    padding-top: 50px;
    text-align: center;
    margin-top: 400px;
    z-index: 0;
    background-color: white;
}

    .partners{
        display: inline-block;
        width: 23%;
        height: 23vw;
        margin: 1.5%;
        background-image: linear-gradient(to bottom,transparent 0%,  rgb(0,105,144)80%);
    }
    
        .partners a{
            display: block;
            left: -5%;
            top: -5%;
        }
    
        .partners_img{
            position: relative ;
            display: block;
            background-color: white;
            height: 90%;
            width: 90%;
            object-fit: scale-down;
            object-position: center;
            box-shadow: 0px 0px 10px rgb(200, 200, 200);
            padding: 5%;
            transition: .3s;
            -webkit-transition: .3s;
        }
    
            .partners img:hover{
                height: 95%;
                width: 95%;
            }

#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%;
}

    .hero{
        top: 0;
        position:fixed;
        width: 100%;
        min-height: 400px;
        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;
        z-index: 0;
    }

        .hero span{
            text-align:Center;
            position: absolute;
            font-size: 25vw;
            left: 50%;
            top: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            display: block;
            opacity: .3;
            color:white;
            font-weight: bold;
            letter-spacing: 10px;
            white-space: nowrap;
        }

        .hero h2{
            position: absolute;
            top:65%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align:center;
            font-size: 30px !important;
            color: white;
        }

.projecten{
    width: 100%;
    padding-top: 50px;
    text-align: center;
    margin-top: 400px;
    z-index: 0;
    background-color: white;
}

    .partners{
        display: inline-block;
        width: 18%;
        height: 18vw;
        margin: 1.5%;
        background-image: linear-gradient(to bottom,transparent 0%,  rgb(0,105,144)80%);
    }
    
        .partners a{
            display: block;
            left: -5%;
            top: -5%;
        }
    
        .partners_img{
            position: relative ;
            display: block;
            background-color: white;
            height: 90%;
            width: 90%;
            object-fit: scale-down;
            object-position: center;
            box-shadow: 0px 0px 10px rgb(200, 200, 200);
            padding: 5%;
            transition: .3s;
            -webkit-transition: .3s;
        }
    
            .partners img:hover{
                height: 95%;
                width: 95%;
            }

#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%;
}

.hero{
    top: 0;
    position:fixed;
    width: 100vw;
    min-height: 300px;
    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;
    z-index: 0;
}

    .hero span{
        text-align:Center;
        position: absolute;
        font-size: 20vw;
        left: 50%;
        top: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        display: block;
        opacity: .3;
        color:white;
        font-weight: bold;
        letter-spacing: 10px;
        white-space: nowrap;
    }

    .hero h2 br{
        display:none;
    }

    .hero h2{
        width:95vw;
        position: absolute;
        top:75%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        text-align:center;
        font-size: 24px !important;
        color: white;
    }

.projecten{
    width: 100%;
    padding-top: 50px;
    text-align: center;
    margin-top: 300px;
    z-index: 0;
    background-color: white;
}

    .partners{
        display: inline-block;
        width: 26%;
        height: 25vw;
        margin: 3%;
        background-image: linear-gradient(to bottom,transparent 0%,  rgb(0,105,144)80%);
    }
    
        .partners a{
            display: block;
            left: -5%;
            top: -5%;
        }
    
        .partners_img{
            position: relative ;
            display: block;
            background-color: white;
            height: 90%;
            width: 90%;
            object-fit: scale-down;
            object-position: center;
            box-shadow: 0px 0px 10px rgb(200, 200, 200);
            padding: 5%;
            transition: .3s;
            -webkit-transition: .3s;
        }
    
            .partners img:hover{
                height: 95%;
                width: 95%;
            }

#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%;
}

.hero{
    top: 0;
    position:fixed;
    width: 100vw;
    min-height: 300px;
    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;
    z-index: 0;
}

    .hero span{
        text-align:Center;
        position: absolute;
        font-size: 20vw;
        left: 50%;
        top: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        display: block;
        opacity: .3;
        color:white;
        font-weight: bold;
        letter-spacing: 10px;
        white-space: nowrap;
    }

    .hero h2 br{
        display:none;
    }

    .hero h2{
        width:95vw;
        position: absolute;
        top:75%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        text-align:center;
        font-size: 24px !important;
        color: white;
    }

.projecten{
    width: 100%;
    padding-top: 50px;
    text-align: center;
    margin-top: 300px;
    z-index: 0;
    background-color: white;
}

    .partners{
        display: inline-block;
        width: 40%;
        height: 40vw;
        margin: 3%;
        background-image: linear-gradient(to bottom,transparent 0%,  rgb(0,105,144)80%);
    }
    
        .partners a{
            display: block;
            left: -5%;
            top: -5%;
        }
    
        .partners_img{
            position: relative ;
            display: block;
            background-color: white;
            height: 90%;
            width: 90%;
            object-fit: scale-down;
            object-position: center;
            box-shadow: 0px 0px 10px rgb(200, 200, 200);
            padding: 5%;
            transition: .3s;
            -webkit-transition: .3s;
        }
    
            .partners img:hover{
                height: 95%;
                width: 95%;
            }

#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;
    }
}