/* 
    ##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: .4;
            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;
    }

        .world_map{
            width: 100%;
            text-align: center;
        }

            .world_map img{
                width:40%;
                display: inline-block;
            }

        .project{
            display: inline-block;
            width: 18%;
            margin: 80px 2.4vw;
            vertical-align: top;
            text-align: left;
            color: black;
        }

            .project h3::first-letter{
                text-transform: uppercase;
            }

            .project:hover > h3{
                color: rgb(139, 36, 101);
            }

            .project:hover > p{
                color: grey;
            }

            .project:hover > b{
                color: grey;
            }

            .project:hover > img{
                opacity: .7;
            }

            .project img{
                width: 100%;
                height: 200px;
                object-fit: cover;
            }

            .project h3{
                font-size: 24px;
                margin: 20px 0px;
            }

        .project *{
            transition: .3s;
            -webkit-transition: .3s;
        }
}

/* 
##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: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{
            position: absolute;
            width: 80%;
            top:75%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align:center;
            font-size: 35px;
            color: white;
        }

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

        .world_map{
            width: 100%;
            text-align: center;
        }

            .world_map img{
                width:40%;
                display: inline-block;
            }

        .project{
            display: inline-block;
            width: 18%;
            margin: 80px 2.4vw;
            vertical-align: top;
            text-align: left;
            color: black;
        }

            .project h3::first-letter{
                text-transform: uppercase;
            }

            .project:hover > h3{
                color: rgb(139, 36, 101);
            }

            .project:hover > p{
                color: grey;
            }

            .project:hover > b{
                color: grey;
            }

            .project:hover > img{
                opacity: .7;
            }

            .project img{
                width: 100%;
                height: 200px;
                object-fit: cover;
            }

            .project h3{
                font-size: 24px;
                margin: 20px 0px;
            }

        .project *{
            transition: .3s;
            -webkit-transition: .3s;
        }
}

/* 
##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: 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: 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{
            position: absolute;
            top:70%;
            left: 50%;
            width: 90%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align:center;
            font-size: 35px !important;
            color: white;
        }

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

        .world_map{
            width: 100%;
            text-align: center;
        }

            .world_map img{
                width:40%;
                display: inline-block;
            }

        .project{
            display: inline-block;
            width: 28%;
            margin: 80px 1.5vw;
            vertical-align: top;
            text-align: left;
            color: black;
        }

            .project h3::first-letter{
                text-transform: uppercase;
            }

            .project:hover > h3{
                color: rgb(139, 36, 101);
            }

            .project:hover > p{
                color: grey;
            }

            .project:hover > b{
                color: grey;
            }

            .project:hover > img{
                opacity: .7;
            }

            .project img{
                width: 100%;
                height: 200px;
                object-fit: cover;
            }

            .project h3{
                font-size: 24px;
                margin: 20px 0px;
            }

        .project *{
            transition: .3s;
            -webkit-transition: .3s;
        }
}

/* 
##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: 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: 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{
            position: absolute;
            top:65%;
            width:90%;
            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;
    }

        .world_map{
            width: 100%;
            text-align: center;
        }

            .world_map img{
                width:40%;
                display: inline-block;
            }

        .project{
            display: inline-block;
            width: 28%;
            margin: 80px 1.5vw;
            vertical-align: top;
            text-align: left;
            color: black;
        }

            .project h3::first-letter{
                text-transform: uppercase;
            }

            .project:hover > h3{
                color: rgb(139, 36, 101);
            }

            .project:hover > p{
                color: grey;
            }

            .project:hover > b{
                color: grey;
            }

            .project:hover > img{
                opacity: .7;
            }

            .project img{
                width: 100%;
                height: 200px;
                object-fit: cover;
            }

            .project h3{
                font-size: 24px;
                margin: 20px 0px;
            }

        .project *{
            transition: .3s;
            -webkit-transition: .3s;
        }
}

/* 
##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: 100%;
        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{
            position: absolute;
            width: 100%;
            top:70%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            text-align:center;
            font-size: 28px !important;
            color: white;
        }

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

        .world_map{
            width: 100%;
            text-align: center;
        }

            .world_map img{
                width:80%;
                display: inline-block;
            }

        .project{
            display: inline-block;
            width: 28%;
            margin: 80px 1.5vw;
            vertical-align: top;
            text-align: left;
            color: black;
        }

            .project h3::first-letter{
                text-transform: uppercase;
            }

            .project:hover > h3{
                color: rgb(139, 36, 101);
            }

            .project:hover > p{
                color: grey;
            }

            .project:hover > b{
                color: grey;
            }

            .project:hover > img{
                opacity: .7;
            }

            .project img{
                width: 100%;
                height: 180px;
                object-fit: cover;
            }

            .project h3{
                font-size: 20px;
                margin: 20px 0px;
            }

        .project *{
            transition: .3s;
            -webkit-transition: .3s;
        }
}

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

@media only screen and /*(min-width: 320px) and */(max-width: 480px) {
    body{
        overflow-x:hidden !important;
    }

    .info{
        background-color: white;
        width: 100%;
        overflow:hidden;
    }

        .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: 17vw;
                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:98vw;
                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;
        }

        .world_map{
            width: 100%;
            text-align: center;
        }

            .world_map img{
                width:95%;
                display: inline-block;
            }
    
            .project{
                display: inline-block;
                width: 80%;
                margin: 40px 0;
                vertical-align: top;
                text-align: left;
                color: black;
            }

             .project h3::first-letter{
                 text-transform: uppercase;
             }

                .project:hover > h3{
                    color: rgb(139, 36, 101);
                }

                .project:hover > p{
                    color: grey;
                }

                .project:hover > b{
                    color: grey;
                }

                .project:hover > img{
                    opacity: .7;
                }

                .project img{
                    width: 100%;
                    height: 200px;
                    object-fit: cover;
                }

                .project h3{
                    font-size: 24px;
                    margin: 20px 0px;
                }

            .project *{
                transition: .3s;
                -webkit-transition: .3s;
            }
}