.map{
    height:100vh;
    width:100%;
    background:#eee;
}

.map #mapcanvas{
    height:100vh;
    width:100%;
    position:relative;
    z-index:100;
}

.biggerMapLink{
    display:inline-block;
    margin-top:3em;
}

.biggerMapLink img{
    width:24em;
}

.contactwrapper{
    height:100vh;
    width:100%;
    margin-top:-100vh;
    position:relative;
    z-index:200;
}

.contactwrapper > div,
.contactwrapper > div > div{
    height:100vh;
}


.contactwrapper .contact-box{
    background:#fff;
    padding:4em 4em 2em 4em;;
    text-align:center;
}

.contactwrapper .contact-box .logo{
    margin-bottom:3em;
}


.contactwrapper .contact-box .contactinfo{
    list-style:none;
    padding-left:0;
}

.contactwrapper .contact-box .contactinfo li{
    font-size:1.1em;
    margin-bottom: 1.8em;
    line-height:1.9em;
    color: #4e4e4e;
}

.contactwrapper .contact-box .contactinfo li span{
    font-size:1em;
    display:inline-block;
    color:#a5a5a5;
}


.contactwrapper .contact-box .contactinfo li a{
    color:#4e4e4e;
    text-decoration:none;
}




/* OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */
/* ============================== MEDIA QUERIES ================================== */



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/*  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}


/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {


}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    .contactwrapper > div,
    .contactwrapper > div > div{
        height:auto;
    }

    .contactwrapper .contact-box {
        padding: 2em 2em 2em 2em;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    .map{
        height:auto;
    }

    .biggerMapLink{
        margin-bottom:2em;
    }

    .biggerMapLink img {
        width:19em;
    }

    main{
        padding-top:6em;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}