Ahh Wow! Thanks Wayan, That appears to have solved this issue! Much Thanks to You & Eric.

Now, I have to remember this.. I'm going to do a little research on how this works. the main thing is... IT WORKS!

Thanks for the help to you and Eric.

It works because CSS if there are two CSS files with the same class name it loads the last one, which is the one in your page header, the instruction after "block" ( !important) tells it that BLOCK MUST BE OBEYED

the bug is that when a user switched from portrait to landscape as you discovered, the "display: block NONE was being retained until the user refreshed the browser
by adding the ! important instruction thingy tells it that it MUST BE BLOCK and overrides the other CSS in the foundation CSS file

there is a cautionary thingy about putting too many custom CSS or JS files in the header
if there are quite a few it will slightly slow down the loading speed, one or two no problem but I am talking quite a few (and especially if they have quite a few lines of code, so in that situation, it would be better to create a CUSTOM CSS or JS folder in your resources folder then point to that file from the header, and as long as the link is the last one in the list, then the same rule applies about CSS loading the last file applies.

Ok, Thank You Very Much Wayan! Your information will be very helpful to me and I am assuming any others that read this Post. I really appreciate your detailed explanation on explaining this.. Much Thanks to you for this.

AJ