body{
    background: url("http://www.drea.com.sg/web/sg-property/img/landingpage.jpg");
    background-size: cover;
    background-position: center center;
    margin: 0px;
    font-family: 'CenturyGothic', 'Helvetica', Open Sans, Arial, Tahoma, sans-serif;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden; 
}
div#video{
    display: inline-block;
    width: 100%;
}
div#buttons{
    display: inline-block;
    width: 100%;
}

div#top-row{
    height: 10vh;
    width: 100%;
    display: block;
    background-color: #FFFFFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

img#drea-logo{
    height: 8vh;
    margin: 1vh;
}

iframe#fb-embed-video{
        width: 80%;
        height: 40vh;
        margin-bottom: 5vh;
        margin-left: 10%;
}

h1{
    font-size: 4vw;
    text-shadow: 1px 1px RGBA(256,256,256,1);
    color: #2489CE;
    text-align: center;
}
 
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px)
and (orientation: landscape){
/* Styles */
    div#container{
        width: 100vw;
        min-height: 100vh;
        padding: 10vh 0vw;
        border: 0px;
        margin: 0px;
    }
    
    div#video{
        width: 35vw;
        min-height: 80vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 5vw 0px 0px;
        vertical-align: top;
    }
    
    div#buttons{
        width: 35vw;
        min-height: 90vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 0px 0px 5vw;
        vertical-align: top;
    }

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px)
and (orientation: portrait){
/* Styles */
    div#container{
        width: 100vw;
        min-height: 100vh;
        padding: 10vh 0vw;
        border: 0px;
        margin: 0px;
    }
    
    div#video{
        display: block;
        width: 100%;
        min-height: 40vh;
        height: 40vh;
        padding: 0px;
        border: 0px;
        margin: 0px;
        vertical-align: top;
    }
    
    div#buttons{
        display: block;
        width: 100%;
        min-height: 40vh;
        height: 40vh;
        padding: 0px;
        border: 0px;
        margin: 0px;
        vertical-align: top;
    }

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */

    div#container{
        width: 100vw;
        height: auto;
        padding: 10vh 0vw;
        border: 0px;
        margin: 0px;
    }
    
    div#video{
        width: 50vw;
        height: 80vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 5vw 0px 0px;
        vertical-align: top;
    }
    
    div#buttons{
        width: 35vw;
        height: 80vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 0px 0px 5vw;
        vertical-align: top;
    }

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
    div#container{
        width: 100vw;
        min-height: 100vh;
        padding: 10vh 0vw;
        border: 0px;
        margin: 0px;
    }
    
    div#video{
        display: block;
        width: 100%;
        min-height: 40vh;
        height: 40vh;
        padding: 0px;
        border: 0px;
        margin: 0px;
        vertical-align: top;
    }
    
    div#buttons{
        display: block;
        width: 100%;
        min-height: 40vh;
        height: 40vh;
        padding: 0px;
        border: 0px;
        margin: 0px;
        vertical-align: top;
    }

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */

    div#container{
        width: 100vw;
        min-height: 100vh;
        padding: 0vh 0vw;
        border: 0px;
        margin: 0px;
    }
    
    div#video{
        width: 35vw;
        min-height: 80vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 5vw 0px 0px;
        vertical-align: top;
    }
    
    div#buttons{
        width: 35vw;
        min-height: 90vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 0px 0px 5vw;
        vertical-align: top;
    }

}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */

    div#container{
        width: 100vw;
        min-height: 100vh;
        padding: 10vh 0vw;
        border: 0px;
        margin: 0px;
    }
    
    div#video{
        width: 35vw;
        min-height: 80vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 5vw 0px 0px;
        vertical-align: top;
    }
    
    div#buttons{
        width: 35vw;
        min-height: 90vh;
        padding: 5vh 0vw;
        border: 0px;
        margin: 0px 0px 0px 5vw;
        vertical-align: top;
    }

}

@media only screen 
and (orientation : landscape)
{
    iframe#fb-embed-video{
        width: 100%;
        height: 50%;
        margin-top: 5vh;
    }

    button{
        display: inline-block;
        margin: 5vh auto 2.5vh auto;
        width: 80%;
        height: auto;
        background-color: #2489CE; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 2.5vh;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }    
}
@media only screen 
and (orientation : portrait)
{
    iframe#fb-embed-video{
        min-width: 80vw;
        min-height: 35vh;
        height: 35vh;
        margin-top: 5vh;
        
    }

    button{
        display: inline-block;
        margin: 2vh auto 2vh auto;
        width: 80%;
        height: auto;
        background-color: #2489CE; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 2.5vh;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }    
}