/*
    Problem: $(window).width() != width in media queries
    http://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query
    Browsers and CSS capture width differently. These hidden DIVs are visible only
    when the threadhold is met. Thus, we can check if a certain DIV is visible
    in jQuery and have matching widthes.

*/

#width-992, #width-768 {
    display: none;
}

@media (min-width : 0) and (max-width : 992px)  {
    #width-992{
        display: block;
    }
}

@media (min-width: 0) and (max-width: 768px) {
    #width-768{
        display: block;
    }
}