Multi Column Fancy Navigation

<div class="upper fade-out"> <div onclick="movePanels('block-one')" class="upper-container column-one"> <div class="overlay"><h2>Title One</h2></div> </div> <div onclick="movePanels('block-two')" class="upper-container column-two"> <div class="overlay"><h2>Title Two</h2></div> </div> <div onclick="movePanels('block-three')" class="upper-container column-three"> <div class="overlay"><h2>Title Three</h2></div> </div> <div onclick="movePanels('block-four')" class="upper-container column-four"> <div class="overlay"><h2>Title Four</h2></div> </div> </div> <div id="block-one" class="lower"> <div class="top-image" style="background-image: url(https://images.unsplash.com/photo-1626187777040-ffb7cb2c5450?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80)"> <div class="overlay"> <div> <h2>Title One</h2> <div class="fancy-div"></div> <div class="summary">My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards. Oh sure! Blame the wizards!</div> <div class="bottom-arrow"> <svg onclick="scrollUp('block-one-copy')" x="0px" y="0px" viewBox="0 0 44 19.4" style="enable-background:new 0 0 44 19.4;" xml:space="preserve"> <polygon points="22,17.4 4.6,3.3 5.9,1.7 22,14.8 38.1,1.7 39.4,3.3 "/> </svg> </div> </div> </div> </div> <div id="block-one-copy" class="lower-copy"> <div class="main-container"> <div class="flex-container"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> <div class="flex-container flex-reverse"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> </div> </div> </div> <div id="block-two" class="lower show"> <div class="top-image" style="background-image: url(https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80)"> <div class="overlay"> <div> <h2>Title Two</h2> <div class="fancy-div"></div> <div class="summary">My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards. Oh sure! Blame the wizards!</div> <div class="bottom-arrow"> <svg onclick="scrollUp('block-two-copy')" x="0px" y="0px" viewBox="0 0 44 19.4" style="enable-background:new 0 0 44 19.4;" xml:space="preserve"> <polygon points="22,17.4 4.6,3.3 5.9,1.7 22,14.8 38.1,1.7 39.4,3.3 "/> </svg> </div> </div> </div> </div> <div id="block-two-copy" class="lower-copy"> <div class="main-container"> <div class="flex-container"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> <div class="flex-container flex-reverse"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> </div> </div> </div> <div id="block-three" class="lower"> <div class="top-image" style="background-image: url(https://images.unsplash.com/photo-1623177623442-979c1e42c255?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fG1vZGVybiUyMG9mZmljZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60)"> <div class="overlay"> <div> <h2>Title Three</h2> <div class="fancy-div"></div> <div class="summary">My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards. Oh sure! Blame the wizards!</div> <div class="bottom-arrow"> <svg onclick="scrollUp('block-three-copy')" x="0px" y="0px" viewBox="0 0 44 19.4" style="enable-background:new 0 0 44 19.4;" xml:space="preserve"> <polygon points="22,17.4 4.6,3.3 5.9,1.7 22,14.8 38.1,1.7 39.4,3.3 "/> </svg> </div> </div> </div> </div> <div id="block-three-copy" class="lower-copy"> <div class="main-container"> <div class="flex-container"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> <div class="flex-container flex-reverse"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> </div> </div> </div> <div id="block-four" class="lower"> <div class="top-image" style="background-image: url(https://images.unsplash.com/photo-1610960245237-cfab0dea6be4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80);"> <div class="overlay"> <div> <h2>Title Four</h2> <div class="fancy-div"></div> <div class="summary">My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards. Oh sure! Blame the wizards!</div> <div class="bottom-arrow"> <svg onclick="scrollUp('block-four-copy')" x="0px" y="0px" viewBox="0 0 44 19.4" style="enable-background:new 0 0 44 19.4;" xml:space="preserve"> <polygon points="22,17.4 4.6,3.3 5.9,1.7 22,14.8 38.1,1.7 39.4,3.3 "/> </svg> </div> </div> </div> </div> <div id="block-four-copy" class="lower-copy"> <div class="main-container"> <div class="flex-container"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> <div class="flex-container flex-reverse"> <div class="flex-column"> <p><img src="https://s3.amazonaws.com/imglibs/fiat.jpeg"></p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> <div class="flex-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper augue nunc, vitae gravida tellus posuere ultricies. In suscipit magna id quam malesuada convallis. Maecenas et augue maximus, facilisis leo sed, ultrices tortor. Praesent varius eleifend porta. Nulla eget lorem id lectus placerat luctus. Curabitur ultricies turpis velit, imperdiet ultricies augue ullamcorper varius. Vivamus malesuada rutrum fermentum. Pellentesque tincidunt sapien cursus ante efficitur, vitae tincidunt ante sodales. Duis odio est, congue at nibh et, commodo efficitur massa. Morbi porttitor elit ac sem rhoncus ornare. Curabitur commodo aliquam auctor.</p> <p>Donec erat leo, maximus vitae sodales vitae, egestas et orci. Sed scelerisque aliquam mi, et imperdiet quam scelerisque sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, nisl eget dictum consectetur, augue diam sodales leo, at mollis augue ipsum et tortor. Mauris scelerisque augue id mi congue, eu vestibulum tortor vestibulum. Maecenas lobortis feugiat velit, et dignissim leo suscipit ac. Nam iaculis vitae arcu quis facilisis. Donec at urna odio. Maecenas id orci sit amet ipsum tempor lacinia. Vestibulum semper luctus nibh ac rutrum. Etiam convallis dolor et justo congue, eu consectetur lectus ultrices. Nullam eu massa hendrerit, tristique nunc et, vestibulum dolor.</p> </div> </div> </div> </div> </div> <div class="menu-button" onclick="showPanels();"> <div> <span></span> <span></span> <span></span> </div> </div>