$( document ).ready(function() {

    let width = $('body').width();

    if (width < 575) {
        $('#mainnav').hide();
        $('#morenav').click( function () {
            $('#mainnav').toggle();
        });
    }

    $("div[id^='callout-']").hover( function() {
        let id = $(this).attr('id').substring(8);
        console.log('id = ' + id);

        $(".screenshot").removeClass('active');
        $("#screen-"+id).addClass('active');
    });

});

$(window).resize( function () {
    let width = $('body').width();

    if (width < 575) {
        $('#mainnav').hide();
        $('#morenav').click( function () {
            $('#mainnav').toggle();
        });
    }
    else {
        $('#mainnav').show();
    }
});