/*MEDIA QUERIES*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 480px) {
    #logoHolder{
        background: url(../img/flatbush-garden-logo2.jpg) left top no-repeat;
        width: 320px;
        height: 161px;
    }

}


/* 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 */
}

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

/* Desktops and laptops ----------- */
@media only screen and (max-width : 921px) {
    #footerBox{
        width: 100%;
    }
    #footerBox #footerContent{
        width: 95%;
        margin: 0 auto;
    }
}
@media only screen and (max-width : 654px) {
    #navBox ul li{
        margin: 0 2%;
    }

}

@media only screen and (min-width : 200px) and (max-width : 603px) {
    #cm{
        display: block;
    }
    #navBox ul{
        display: none;
        position: absolute;
        background: #f7f7f7;
        border: 1px solid #b1bb1c;
        top: 12px;
        left: 34px;
        z-index: 10;

    }
    #navBox ul{
        text-align: left;
        margin:0;
        width: 133px;

    }
    #navBox ul li{
        display: block;
        margin: 2px 6px 13px 6px;
    }
    #navBox ul li a{
        display: block;
        font-size: 16px;
    }

}



/* Smartphones (portrait) ----------- */
@media only screen and (max-device-width : 320px) {
    #topSection{
        height: 147px;
    }
    #logoHolder{
        background: url(../img/flatbush-garden-logo3.jpg) left top no-repeat;
        width: 240px;
        height: 138px;
    }

}
@media only screen and (max-width : 366px) {
    #homeBanner{
        margin-top: 10px;
    }

}
@media only screen and (max-width : 503px) {
    #homeBanner{
        margin-top: 3px;
    }

}
@media only screen and (max-width : 380px) {
    #homeBanner{
        margin-top: 3px;
    }

}

@media only screen and (max-device-width : 352px) {
    #topSection{
        height: 147px;
    }

    #homeBanner{
        margin-top: 9px;
    }

}
@media only screen and (max-width : 352px){
    #topSection{
        height: 147px;
    }

    #homeBanner{
        margin-top: 9px;
    }
}

@media only screen and (max-width : 320px) {
    #topSection{
        height: 147px;
    }


    #footerBox #footerCopy {
        float: none;
        text-align: center;
    }

    #footerBox #footerMenu {
        float: none;
        margin-bottom: 10px;
        text-align: center;
    }

}