/* ==========================================
   Google Map
========================================== */

.map-container{

    width:600px;
    max-width:100%;

    margin:4rem auto;

}

.map-container iframe{

    width:100%;
    height:350px;

    display:block;

    border:none;
    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

/* ==========================================
   Hover
========================================== */

.map-container iframe:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25);

}

/* ==========================================
   MOBILE PORTRAIT
========================================== */

@media only screen and (min-width:240px) and (max-width:600px) and (orientation:portrait){

    .map-container{

        width:70%;

        margin:2rem auto;

        padding:0 1rem;

        box-sizing:border-box;

    }

    .map-container iframe{

        height:250px;

        border-radius:16px;

    }

}


/* ==========================================
   MOBILE LANDSCAPE
========================================== */

@media only screen and (min-width:481px) and (max-width:950px) and (orientation:landscape){

    .map-container{

        width:70%;

        padding:0 1rem;

    }

    .map-container iframe{

        height:280px;

    }

}


/* ==========================================
   TABLET PORTRAIT
========================================== */

@media only screen and (min-width:601px) and (max-width:1024px) and (orientation:portrait){

    .map-container{

        width:70%;

        padding:0 1rem;

    }

    .map-container iframe{

        height:320px;

    }

}


/* ==========================================
   TABLET LANDSCAPE
========================================== */

@media only screen and (min-width:951px) and (max-width:1366px) and (orientation:landscape){

    .map-container{

        width:700px;

    }

    .map-container iframe{

        height:350px;

    }

}


/* ==========================================
   LAPTOP
========================================== */

@media only screen and (min-width:1367px) and (max-width:1599px) and (orientation:landscape){

    .map-container{

        width:750px;

    }

    .map-container iframe{

        height:380px;

    }

}


/* ==========================================
   DESKTOP
========================================== */

@media only screen and (min-width:1600px) and (max-width:1920px) and (orientation:landscape){

    .map-container{

        width:850px;

    }

    .map-container iframe{

        height:420px;

    }

}


/* ==========================================
   LARGE SCREENS
========================================== */

@media only screen and (min-width:1921px){

    .map-container{

        width:1000px;

    }

    .map-container iframe{

        height:500px;

    }

}