Asking for assistance with CSS Menu for mobile for existing site

sacdman · Dec 25, 2022

Hi everyone. I am new here and just looking for assistance for my website. This site I built back in 2002 but this is also a site that is responsive and works even on tablets. The hard part is adapting it to the viewport for a cellphone. My current right side menu is far too large for a cellphone. I have used Media Queries so that this menu disappears when it is viewed on a cellphone, but now I need a menu that will work on a cellphone. My challenge is adding such a menu to this site. I have tried but without any real success. I am not sure if updating this is actually hard to do, or if it is something simple I am missing. Please let me know if I am not posting about this issue correctly. I am including the full coding for one HTML page and for the CSS which applies to every page on the site. I am also including pictures in those spots which I feel where the CSS and HTML for slideout menu would appear to be the best place to add that. I would prefer a slideout menu coming from the right side of the page. I know that the wall of code is not considered a good idea, but with photos you can see where I have marked to put in the code for a menu and the css. I am not sure just how to integrate a CSS menu into this site as it is. I have marked the image of the page where I think a hamburger button or something similar would go for a side menu. I have also marked the css section where I have an SSI for the current menu. Would be nice if the menu could switch from one to another when viewport changes. Any and all suggestions are appreciated and I hope I posted this correctly. Thanks again for viewing this thread.

Code:

<!DOCTYPE html>
<html lang= "en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The number one Benny Hill website, Benny's Place featuring Louise English and Hill's Angels">
<meta name="author" content="threerandot">
<link rel="icon" href="error.html">
<link rel="stylesheet" type="text/css" href="benny.css" media="screen">
<title>Benny's Place &bull; Original Series, Episodes 1 - 11</title>
</head>
<body>

<a name="top"></a>
<div id="header">
<div class="title">Benny's Place Featuring Louise English &amp; Hill's Angels</div>

<div id="holder">
<div id="content">
<div class="buttons">
<span class="home">
<a href="index.html">
<img src="home.gif" width="32" height="32" alt="Go to The Home Page" title="Go to The Home Page"></a></span>
<span class="map">
<a href="sitemap.html">
<img src="map.gif" width="32" height="32" alt="Go to The Site Map Page" title="Go to The Site Map Page"></a></span>
<span class="links">
<a href="links.html">
<img src="link.gif" width="32" height="32" alt="Go to The Links Page" title="Go to The Links Page"></a></span>
<span class="book">
<a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-15426-ca" title="Read or Leave A Message in The Guestbook" target="_blank"><img src="book.gif" width="32" height="32" alt="Read or Leave a Message in The Guestbook"></a></span>
<span class="search">
<a href="search.html" title="Go the Search Page" target="_blank"><img src="glass.gif" width="32" height="32" alt="Go the Search Page"></a></span>
</div>

<h1>The Benny Hill Show<br>
Original Series<br>
(1969-1971)</h1>

<p class="three">Navigation:&nbsp;
<a href="original01.html" title="Details for Episodes 1 - 11">1</a>&nbsp;
<a href="original02.html" title="Details for Episodes 12 - 21">2</a>&nbsp;
<a href="original03.html" title="Details for Episodes 22 - 31">3</a>&nbsp;
<a href="original04.html" title="Details for Episodes 32 - 41">4</a>&nbsp;
<a href="original05.html" title="Details for Episodes 42 - 50">5</a>&nbsp;
<a href="original06.html" title="Details for Episodes 51 - 58">6</a>&nbsp;
<a href="original02.html" title="Next Page">Next Page</a></p>

<div class="entry">
<p class="pic">
<img src="show01.jpg" width="140" height="140" alt="The Benny Hill Show" title="The Benny Hill Show"></p>
<h2>Page 1 (Episodes 1 - 11)</h2><p>The Benny Hill Show was not a weekly series, but was aired as specials several times a year. For syndication, all of these specials were put together as thirty minute shows. This page contains the sketches as they originally appeared on The Benny Hill Show from 1969-1971. You can also spot the Production Code Numbers and Recording Dates in the headings for the shows. Special Thanks to William Brown. The breaks for these episode were contributed by our associate contributor, David Hawkins, based on the <a href="annuals.html" title="Go to the Benny Hill Show Region 2 DVD Releases page">Region 2 DVD Releases</a>. We can now see how the shows were aired with their commercial spots. Thanks, David!</p>
</div>

<div class="episode">
<h2>Episode 1</h2>
<p>(Nov. 19, 1969)</p>
<p>Color [52:20]</p>
<p>VTR 2306 (recorded Oct. 12, 1969)</p>
</div>

<ol>
<li>Benny Quickie: Ye Olde Wishing Well</li>
<li>Opening and Ballad: "Anna-Marie"</li>
<li>Benny's Bloopers</li>
<li>Sound Delay Interview</li>
<li>The Ladybirds: "Your Secret Love"</li>
<li>The Russian Zone<br>
<strong>Break</strong></li>
<li>Lower Tidmarsh Hospital Service</li>
<li>Mrs. Fripp: ITV's Most Loyal Viewer<br>
<strong>Break</strong></li>
<li>European Song Contest</li>
<li>Close: The Age Of Aquarius (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 2</h2>
<p>(Dec. 25, 1969)</p>
<p>Color [50:58]</p>
<p>VTR 2308 (recorded Nov. 30, 1969)</p>
</div>

<ol>
<li>Benny Quickie: Fishing</li>
<li>Opening and Ballad: "Juanita Bonita Delores"</li>
<li>Holiday Sports Spectacular<br>
<strong>Break</strong></li>
<li>Benny Quickie: Peeping Ben</li>
<li>The Ladybirds: "Can't Take My Eyes Off You"</li> 
<li>The Short Happy Life of Maurice Dribble<br>
<strong>Break</strong></li> 
<li>Benny's Bloopers</li> 
<li>Miss Eira Heath: "Wedding Cake"</li> 
<li>Is This Your Life?</li>
<li>Close: The Age Of Aquarius (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 3</h2>
<p>(Feb. 4, 1970)</p>
<p>Color [50:30]</p>
<p>VTR 2307 (recorded Nov. 9, 1969)</p>
</div>

<ol>
<li>Benny Quickie: Black Moor</li>
<li>Opening and Ballad: "Colleen"</li>
<li>Naked Audition</li>
<li>Luis Alberto del Parana and Los Paraguayos</li>
<li>Hotel Sordide<br>
<strong>Break</strong></li>
<li>Tour Guide</li>
<li>Ballet Company with Audience Commentary</li>
<li>Miss Eira Heath: "Carnival"</li>
<li>Making a Commercial<br>
<strong>Break</strong></li> 
<li>The Old Fiddler</li>
<li>Benny's Bloopers</li>
<li>Tommy Tupper in Tupper-Time</li>
<li>Benny's Ballad: "Girls of the Sousa Bar"</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 4</h2>
<p>(Mar. 11, 1970)</p>
<p>Color [51:26]</p>
<p>VTR 2309 (recorded Feb. 15, 1970)</p>
</div>

<ol>
<li>Benovite / Opening and Ballad: "My Garden of Love"</li> 
<li>The Hitch Hiker</li>
<li>Fred Scuttle: TV Audience Researcher</li>
<li>Rogue Nudist<br>
<strong>Break</strong></li>
<li>Benny's Bloopers</li>
<li>The Ladybirds: "The Girl is in Love with You"</li>
<li>Benny's Ballad: "Golden Days"<br>
<strong>Break</strong></li>
<li>Benny Quickie: One-Man Band Monk</li>
<li>Cotillion Dancing</li>
<li>The Birds and the Bees</li>
<li>The Sound of Frankenstein</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 5</h2>
<p>(Oct. 28, 1970)</p>
<p>Color [50:44]</p>
<p>VTR 3454 (recorded Oct. 22, 1970)</p>
</div>

<ol>
<li>Benny Quickie: Park Bench</li>
<li>Benny's Ballad: "Suitcase on the Train"</li>
<li>Benny Quickies: Comic Look No.7</li>
<li>Boutique Mask Dance</li>
<li>Los Zafiros</li>
<li>The Bill Stickers<br>
<strong>Break</strong></li>
<li>Benny Quickie: British Arms</li>
<li>Benny's Bloopers</li>
<li>Fred Scuttle: Mr. Show Business</li>
<li>The Underworld Water of Jacques Custard<br>
<strong>Break</strong></li>
<li>Wind of Change</li> 
<li>Two's Company: "September Song"</li>
<li>Chow-Mein: East Meets West</li>
<li>Ted</li>
<li>Benny's Ballad: "Jose's Cantina"</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 6</h2>
<p>(Dec. 23, 1970)</p>
<p><abbr title="Black and White">B&amp;W</abbr> [48:18]</p>
<p>VTR 3455 (recorded Nov. 19, 1970)</p>
</div>

<ol>
<li value="1">Benny Quickie: Rubber Balloons</li>
<li>Benny's Ballad: Broken-Hearted Lover's Stew</li>
<li>Benny Quickie: The Unexpected Look</li>
<li>Fred Scuttle: Scuttle Tours</li>
<li>"Grand Pappy Blueberry" and Benny's Ballad: "Rachel"<br>
<strong>Break</strong></li>
<li>Benny Quickie: Bank Robbery</li>
<li>Benny's Bloopers</li>
<li>Trisha Noble: "I'm Leaving on a Jet Plane"</li> 
<li>A Tribute to the Lower Tidmarsh Volunteer Fire Brigade<br>
<strong>Break</strong></li>
<li>Opportunity's Knocking</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 7</h2>
<p>(Jan. 27, 1971)</p>
<p><abbr title="Black and White">B&amp;W</abbr> [51:23]</p>
<p>VTR 3456 (recorded Dec. 17, 1970)</p>
</div>

<ol>
<li>Benny Quickie: Very Well, M'Lady</li>
<li>Benny's Ballad: "Flying South"</li> 
<li>Shameful Moments of Sport</li>
<li>Petticoat and Vine: "World of Love and Laughter"</li>
<li>Henry and Alice and Bob and Mary<br>
<strong>Break</strong></li>
<li>Benny's Bloopers</li> 
<li>Kiki Dee: "You Made Me So Very Happy"</li> 
<li>Crime Does Not Pay<br>
<strong>Break</strong></li> 
<li>Love Will Find A Way</li> 
<li>Top of the Tops</li>
<li>Close: The Age Of Aquarius (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 8</h2>
<p>(Feb. 24, 1971)</p>
<p><abbr title="Black and White">B&amp;W</abbr> [47:56]</p>
<p>VTR 3457 (recorded Jan. 28, 1971)</p>
</div>

<ol>
<li>Benny Quickie: Copy The Boss</li>
<li>Benny's Ballad: "Pretty Greek Girl"</li>
<li>Undercover Sanitary Inspector</li>
<li>Reverend Gray<br>
<strong>Break</strong></li>
<li>Benny's Bloopers</li> 
<li>Nanette: "Everybody's Singing, Like Now"</li>
<li>Learning All the Time!<br>
<strong>Break</strong></li>
<li>Benny Quickie: Night George!</li>
<li>Uplift with Humphrey Bumphrey</li>
<li>Benny's Ballads: "Pepys' Diary" &amp; "Lady Mary"</li>
<li>Close: "Lady Mary" &amp; Yakkety Sax (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 9</h2>
<p>(Mar. 24, 1971)</p>
<p>Color [50:24]</p>
<p>VTR 4000 (recorded March 4, 1971)</p>
</div>

<ol>
<li>Benny Quickie: Unfaithful Wife</li> 
<li>Benny's Ballad: "The Egg Marketing Board Tango"</li> 
<li>French For Starters</li>
<li>The Messenger</li>
<li>The Grass Is Greener<br>
<strong>Break</strong></li>
<li>Supermarket Dance</li>
<li>Benny Reveals All... about television!</li>
<li>The Ladybirds: "Close To You"</li>
<li>Cinema: The Vintage Years<br>
<strong>Break</strong></li>
<li>Benny's International Bloopers</li>
<li>The Westminister Funsters</li> 
<li>Chow-Mein and Cookie in the Restaurant</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 10</h2>
<p>(Nov. 24, 1971)</p>
<p>Color [50:22]</p>
<p>VTR 4882 (recorded Oct. 14, 1971)</p>
</div>

<ol>
<li>Benny Quickie: Hotel Lift</li>
<li>Benny's Ballad: "The Beach at St. Tropez"</li>
<li>Benny's Bloopers</li> 
<li>New England 1635</li> 
<li>Chow-Mein: At Home with Henry McGee<br>
<strong>Break</strong></li> 
<li>St. John Bossom: Poet</li>
<li>Cruising on the S.S. Rumpo</li>
<li>The Ladybirds: "River Deep, Mountain High"</li>
<li>Fun in the Kitchen with Johnny &amp; Cranny Faddock<br>
<strong>Break</strong></li>
<li>The Movie Shakers: Mervyn Cruddy</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>


<div class="episode">
<h2>Episode 11</h2>
<p>(Dec. 22, 1971)</p>
<p>Color [50:08]</p>
<p>VTR 4883 (recorded Nov. 4, 1971)</p>
</div>

<ol>
<li>Benny Quickie: Pub Bore</li>
<li>Benny's Ballad: "Gypsy Rock"</li>
<li>Fred Scuttle: Chief Drama Director and Dialogue Coach<br>
<strong>Break</strong></li>
<li>The Dimpton Drinking Club</li>
<li>The Ladybirds: "Say A Little Prayer"</li>
<li>News At Ten with Reginald Boozenquet<br>
<strong>Break</strong></li>
<li>The Great Pretender</li>
<li>Benny's International Bloopers</li>
<li>Close: Yakkety Sax (not in the menu)</li>
</ol>

<p class="three">Navigation:&nbsp;
<a href="original01.html" title="Details for Episodes 1 - 11">1</a>&nbsp;
<a href="original02.html" title="Details for Episodes 12 - 21">2</a>&nbsp;
<a href="original03.html" title="Details for Episodes 22 - 31">3</a>&nbsp;
<a href="original04.html" title="Details for Episodes 32 - 41">4</a>&nbsp;
<a href="original05.html" title="Details for Episodes 42 - 50">5</a>&nbsp;
<a href="original06.html" title="Details for Episodes 51 - 58">6</a>&nbsp;
<a href="original02.html" title="Next Page">Next Page</a></p>

<p class="footer"><a href="#top" title="Return to the Top of this page">Top Of Page</a><br>
<a href="mailto:[email protected]?Subject=&amp;body=Re_Benny_Hill" title="Send emails to [email protected] and please include Re Benny Hill in the body of the message. Thank You.">Contact William</a><br>&copy; April 06, 2002.</p>
</div></div></div>

<div id="right"><div id="menu"><!--#include virtual="navigation.html" --><div class="entry"><p>Webmaster: threerandot<br>Contributing Editor:<br>William Brown<br>Associate Editor:<br>David Hawkins</p></div><p>Printing pages:<br>All pages are now printable throughout the site, except for Photo Galleries. I cannot guarantee perfect results. Use 'Print Preview' to see how your browser renders a given page before printing.</p>
</div></div></body></html>

CSS:

body{background:#9cf url(tvworkoutbackground.jpg) top right no-repeat;color:#000;font-family:arial,verdana,serif;font-variant:small-caps;padding:0;margin:0;height:100%}#header{color:#000;background:url(decor.jpg) #9cf repeat-y;margin:0 240px 0 20px;padding:10px 10px 30px 70px;border:none;height:500%;font:small-caps bold 135% arial,verdana,serif}#holder{position:relative;background:#09c;color:#fff}#content{position:relative;color:#FFF;letter-spacing:1px;padding:15px;margin:15px 0 0 0; border:#0FC medium ridge;top:-10px;left:10px;height:100%;background:#069;font:normal bold 70% verdana,arial,serif}#right{position:absolute;top:220px;right:20px;padding:0;margin:0;width:200px;font:normal bold 80% verdana,arial,serif;background:#9cf;color:#000}
#menu{left:35px;right:35px;top:40px;width:200px;}#menu.ul{margin:0;padding:0;list-style:none;width:200px;border-left:1px solid #0CF;border-right:1px solid #0CF;border-bottom:1px solid #0CF}#menu ul li{position:relative;border-top:1px solid #0CF;border-left:1px solid #0CF;border-right:1px solid #0CF;min-width:200px}li ul{position:absolute;right:202px;top:0;display:none}#menu ul li a{display:block;text-decoration:none;padding:4px}#menu ul li{float:left}ul li a{display:block;height:1%}#menu ul{margin:0;padding:0;list-style:none;width:200px;border-bottom:1px solid #0CF}li:hover ul,li.over ul{display:block}#gallery{margin: 0 0 1em 0;font:normal bold 100% verdana,arial,serif;background:#069;color:#000;}.gallery{list-style:none;background:#069;color:#000;margin:0;padding:0}#gallery a{text-decoration:underline;color:#000;background:#069;}form{background:#069;color:#9cf;padding:4px;width:180px}input.text{width:100px;margin-right:0px}abbr,acronym,.help{border-bottom:#ff3 1px dotted;cursor:help;color:#ff3;background:#069}#right dl{background:#9CF;color:#000}#right dl a{text-decoration:underline;color:#000;background:#9CF;border:0;padding:0}#right dd a{text-decoration:underline;color:#000;background:#9cf;border:0;margin:0 0 0 -20px}#content{min-height:3500px}* html #content{height:2000px}div.entry{float:left;padding:0;margin:0 0 2em;width:100%}#content p.pic a{color:#069;background:#069;border:0;margin:0;padding:0}div.entry .pic{float:left;clear:left;margin:5px 5px 0 0;position:relative}div.entry hr{display:block;clear:left;margin:-0.001em;visibility:hidden}div.photo{margin:0 0 3em 30px}#content a:link img{border-style:solid;border-top-color:#069;border-right-color:#069;border-bottom-color:#069;border-left-color:#069;border-width:2px}#content a:visited img{border-style:solid;border-top-color:#069;border-right-color:#069;border-bottom-color:#069;border-left-color:#069;border-width:2px}#content a:active img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#content a:hover img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#content a:focus img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}div.episode{padding:0;margin:0 0 0 40px}#content p.date{color:#ff3;background:#069;margin-bottom:1em;font-size:medium}#right div.icon a{background:#9cf;color:#000}#right div.entry{float:left;padding:0;margin:0 0 0 0;width:100%}#right div.return{float:left;background:#9cf;color:#000}#right div.return a{background:#9cf;color:#000}#right a:link img{border-style:solid;border-top-color:#9CF;border-right-color:#9CF;border-bottom-color:#9cf;border-left-color:#9cf;border-width:2px}#right a:visited img{border-style:solid;border-top-color:#9CF;border-right-color:#9CF;border-bottom-color:#9cf;border-left-color:#9CF;border-width:2px}#right a:active img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#right a:hover img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-top-width:2px}#right a:focus img{border-style:solid;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;border-width:2px}#right div.icon p.par a:link{background:#9cf;color:#000}#right div.icon p.par a:visited{background:#9cf;color:#000}#right div.icon p.par a:active{background:#069;color:#ff3}#right div.icon p.par a:hover{background:#069;color:#ff3}#right div.icon p.par a:focus{background:#069;color:#ff3}#right p.par{background:#9cf;color:#000}#right p a{background:#9cf;color:#000}#right p.img{background:#9cf;padding:0;margin:0}#right p.dvd{margin:2em 0 2em 0;background:#069;color:#fff;border:#0fc medium ridge;padding:5px;width:180px;font-size:90%;line-height:150%}#right p.privacy a{font-size:100%;text-decoration:underline;padding:0px;}a:hover,a:active,#content a:hover,#content a:active,#content a:hover,#content a:active,#content a:focus{color:#ff0;background:#069;text-decoration:none}a:hover,a:active,#right a:hover,#right a:active,#right a:hover,#right a:active,#right a:focus{color:#fff;background:#9cf;}a:hover,a:active,#right ul.links a:hover,#right ul.links a:active,#right ul.links a:hover,#right ul.links a:active,#right ul.links a:focus{color:#ff0;background:#069;}a:hover,a:active,#right ol.links a:hover,#right ol.links a:active,#right ol.links a:hover,#right ol.links a:active,#right ol.links a:focus{color:#fff;background:#069;}a:link{text-decoration:underline;color:#0FC;background:#069}a:visited{text-decoration:none;color:#CCC;background:#069}a:active{text-decoration:none;color:#FFF;background:#069}a:hover{text-decoration:none;color:#FF0;background:#069}h1{clear:both;color:#FFF;line-height:120%;letter-spacing:1px;font-size:x-large;font-style:normal;font-weight:600;border-top:#0fc medium ridge;padding:1em 0 0 15px;margin:.25em -15px 1em;background:#069}h2{color:#FF3;font-size:medium;padding:0;margin:0;border:0;background:#069}#content h2 a:hover{background:#069;color:#ff3}#content div.entry h2 a{background:#069;color:#ff3}#content div.episode h2 a{background:#069;color:#ff3}h3{color:#FF3;font-size:medium;margin-bottom:-1em;background:#069;text-decoration:none}h4{font-size:medium;padding:0;margin:0;border:0}h5{font-size:medium;padding:0;margin:0 0 -1em 15px;border:0;color:#ff3;background:#069}h6{font-size:medium;padding:0;margin:0 0 -1em 0px;border:0;color:#ff3;background:#069}strong{color:#FF3;background:#069}p{padding:0;margin:0}p.par{padding:0;margin:0 0 2em}p.par2{padding:0;margin:2em 0 2em}#content p{line-height:128%}#content p.one{margin-top:5px;margin-bottom:5px;font-size:90%}#content p.two{margin-top:5px;margin-bottom:5px;font-size:75%;color:#FF3;background:#069}#content p.three{letter-spacing:-1px;margin:2em 0;font-size:95%;color:#FFF;background:#069}#content p.three a{text-decoration:none}#content p.four{letter-spacing:-1px;margin-bottom:1em;color:#FFF;background:#069}#right p.par{padding:0;margin:0 0 2em}#right p{padding:0;margin:1em 0 1em}p.footer{padding:0;margin:2em 0 0;font:normal bold 80% verdana,arial,serif;line-height:150%}p.footer a{text-decoration:underline}a:hover,a:active,#content p.footer a:hover,#content p.footer a:active,#content p.footer a:hover,#content p.footer a:active,#content p.footer a:focus{color:#ff0;background:#069;text-decoration:none}h3.com{margin-left:15px}#content ul{list-style-type:none;margin-bottom:3em}#content ol{margin-bottom:3em}#menu a{text-decoration:none}#menu ul li{float:left;height:1%;width:100%}#menu ul li a{height:1%}li ul{right:202px}p.footer{margin:0;height:1%}#underlinemenu{margin: 0;padding: 0;}
#underlinemenu,#underlinemenu ul{margin: 0;padding:0;float: left;font-variant:small-caps;}
#underlinemenu,#underlinemenu ul,#underlinemenu ul li a{float:left;}
#underlinemenu ul{margin-bottom:1em;}#underlinemenu ul,#underlinemenu ul li a{font-weight:bold;}* html #underlinemenu ul{margin-bottom:0;}#underlinemenu ul li{display:inline;}
#underlinemenu ul li a{color:#fff;padding:6px;text-decoration:none;background:#069;border-right:2px solid #0fc;background:#069;border-bottom:2px solid #069;}
#underlinemenu ul li a:hover{color:#ff3;background:#000;border-bottom:2px solid #ff3;padding:6px}
span.link a span{display:none}span.link a:hover{font-size:100%}span.link a:hover span{display:block;position:absolute;margin-top:50px;margin-left:-150px;width:200px;padding:5px;z-index:100;background:#000;color:#ff3;border-style:solid;border-width:1px;border-top-color:#ff3;border-right-color:#ff3;border-bottom-color:#ff3;border-left-color:#ff3;text-decoration:none}#content span.link a:hover span{margin-top:30px;margin-left:0px}div.search {width:100%;border:0}img {max-width: 100%; height: auto;}ul, li{ margin: 0; padding: 0;}
.gallery {display: flex;align-items: flex-start;justify-content: flex-start;font-size: 1.5em;background-color:#069;}   
.text { width: calc(100% - 150px);color: #fff;font-size: 14px; margin-left: 10px;background-color:#069;}
#content .gallery {background-color:#069;}
/*change the number below to scale to the appropriate size*/
.thumbnail:hover {transform: scale(1.40); } .thumbnail img {position:relative;}

@media screen and (max-width: 768px) {
    body {display: flex; background:#9cf;url:(display:none;)}
    #right {display: none;}
    #header {background:#9cf;url:(display:none;);}
      #holder {width: 160%; margin: 0 0 0 -65px;}

@media screen and (max-device-width : 640px) {
/* Styles */
    body { background:#9cf;url:(display:none;)}
    #right {display: none: padding: 1%}
    #header {display: block; background:#9cf;url:(display:none;);}
      #holder {}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS */
    body { -webkit-text-size-adjust: none; background:#9cf;url(display:none;)}
    #right {display: none;}
    #header {width: 50%;background:#9cf;url:(display:none;);}
      #holder {background: #9cf; url:(display:none;)}
    .title {font-size: 14px;}

sacdman · Dec 25, 2022

Oh, I forgot to include a link to my website at Benny's Place featuring Louise English and Hill's Angels

sacdman · Dec 26, 2022

Okay, so I do have a menu that I think may work with my site. Having issues with it. Links not coming up and it is messing up my page. Again, any help is always appreciated. Please note that I am attempting to incorporate this menu into the pre-existing page I have for mobile and/or regular usage. When I do click the hamburger icon, I get nothing but a black page. I don't know if this menu will accept nested <ul>. When I did attempt to put that button in the are where I want it to go, it hangs low and to the right. Thanks. I have left this page up live as is so I hope you can take a look. Thanks. http://bennysplace.ml/guffaws.html

CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Menucool Css Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="cssmenu.css" rel="stylesheet" />
    <style>
        body {
            margin:0;
            background:rgba(0,0,0,1);
        }
        #menuDemo { text-align:center; padding:30px 8px; }
    </style>
</head>
<body>
<div id="menuDemo">
<!--start CssMenu-->
<div class="menu-icon-wrapper">
    <div class="menu-icon" onclick="toggleCssMenu(this)">
        <div class="three-line">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<div id="cssmenu">
<li><a href="index.html" title="Home Page">Home</a></li>
<li><a href="sitemap.html" title="Site Map with News &amp; Updates">Site Map</a></li>
<li><a href="links.html" title="Other Benny Hill Places Around The Web">Links</a></li>
<li><a href="fanreviews01.html" title="Read Benny Hill Reviews Submitted by Fans">Fan Reviews</a></li>
<li><a href="podcasts.html" title="Go to the Podcasts Page">Podcasts</a></li>
<li><a href="after.html" title="Go to the Angels after The Benny Hill Show">Angels after Benny Hill</a></li>
<li><a href="references.html" title="Go to the References to The Benny Hill Show on Other Programs">Benny Hill References</a></li>
<li><a href="about.html" title="Learn about the webmaster and the site history">About Me</a></li>
<li><a href="original01.html" title="Guide To The Original Series">Original Series</a><ul>
<li><a href="original01.html" title="Details For Episodes 1 - 11">1969 - 1971</a></li>
<li><a href="original02.html" title="Details For Episodes 12 - 21">1972 - 1974</a></li>
<li><a href="original03.html" title="Details For Episodes 22 - 31">1975 - 1977</a></li>
<li><a href="original04.html" title="Details For Episodes 32 - 41">1978 - 1981</a></li>
<li><a href="original05.html" title="Details For Episodes 42 - 50">1982 - 1985</a></li>
<li><a href="original06.html" title="Details For Episodes 51 - 58">1986 - 1989</a></li>
</ul></li>
<li><a href="guide01.html" title="Guide To The Syndicated Series">Syndicated Series</a><ul>
<li><a href="guide01.html" title="Details For Shows 1 - 20">Shows #1 - #20</a></li>
<li><a href="guide02.html" title="Details For Shows 21 - 40">Shows #21 - #40</a></li>
<li><a href="guide03.html" title="Details For Shows 41 - 60">Shows #41 - #60</a></li>
<li><a href="guide04.html" title="Details For Shows 61 - 80">Shows #61 - #80</a></li>
<li><a href="guide05.html" title="Details For Shows 81 - 100">Shows #81 - #100</a></li>
<li><a href="guide06.html" title="Details For Shows 101 - 109">Shows #101 - #111</a></li>
</ul></li>
<li><a href="music01.html" title="The Music of The Benny Hill Show">New: The Music</a><ul>
<li><a href="music01.html" title="Episodes 1 - 11 (1969-1971)">Episodes 1 - 11</a></li>
<li><a href="music02.html" title="Episodes 12 - 21 (1972-1974)">Episodes 12 - 21</a></li>
<li><a href="music03.html" title="Episodes 22 - 31 (1975-1977)">Episodes 22 - 31</a></li>
<li><a href="music04.html" title="Episodes 32 - 41 (1978-1981)">Episodes 32 - 41</a></li>
<li><a href="music05.html" title="Episodes 42 - 50 (1982-1985)">Episodes 42 - 50</a></li>
<li><a href="music06.html" title="Episodes 51 - 58 (1986-1989)">Episodes 51 - 58</a></li>
<li><a href="music07.html" title="Essay on Stock Music of The Benny Hill Show">Essay on Stock Music</a></li>
<li><a href="music08.html" title="The Musicians of The Benny Hill Show by William Brown">The Musicians</a></li>
<li><a href="music09.html" title="Album Reviews of Benny Hill Recordings">Album Reviews</a></li>
</ul></li>
<li><a href="gossamer.html" title="Hill's Angels 1979-1981">Hill's Angels 1979-1981</a><ul>
<li><a href="gossamer.html" title="Hot Gossamer (March 14, 1979)">Hot Gossamer</a></li>
<li><a href="panspeople.html" title="Pan's People (April 25, 1979)">Pan's People</a></li>
<li><a href="chezben.html" title="Chez Ben Grand Gala (February 6, 1980)">Chez Ben Grand Gala</a></li>
<li><a href="madame.html" title="Madame Louise Summer Collection (March 5, 1980)">Madame Louise...</a></li>
<li><a href="newyork.html" title="New York, New York (April 16, 1980)">New York, New York</a></li>
<li><a href="tvworkout.html" title="TV Workout 'Runaway' (January 7, 1981)">TV Workout</a></li>
<li><a href="ease.html" title="Ease On Down The Road (February 11, 1981)">Ease On Down The Road</a></li>
<li><a href="young.html" title="Keep Young and Beautiful (February 11, 1981)">Keep Young and Beautiful</a></li>
<li><a href="occasional.html" title="An Occasional Man (February 11, 1981)">An Occasional Man</a></li>
<li><a href="streetdance.html" title="Street Dance (March 25, 1981)">Street Dance</a></li>
</ul></li>
<li><a href="splendide.html" title="Hill's Angels 1982-1985">Hill's Angels 1982-1985</a><ul>
<li><a href="splendide.html" title="Hotel Splendide (January 6, 1982)">Hotel Splendide</a></li>
<li><a href="streetparty.html" title="Street Party (February 10, 1982)">Street Party</a></li>
<li><a href="striptease.html" title="Strip Tease (February 10, 1982)">Strip Tease</a></li>
<li><a href="cruise.html" title="The Cruise (January 5, 1983)">The Cruise</a></li>
<li><a href="godiva.html" title="Lady Godiva (The Wild West) (March 16, 1983)">Lady Godiva</a></li>
<li><a href="bizarre.html" title="Club Bizarre (January 16, 1984)">Club Bizarre</a></li>
<li><a href="workout.html" title="The Workout (April 25, 1984)">The Workout</a></li>
<li><a href="benitos.html" title="Sauce At Benito's (January 2,1985)">Sauce At Benito's</a></li>
<li><a href="oddball.html" title="Oddball's Club Cabaret (April 8,1985)">Oddball's Club Cabaret</a></li>
</ul></li>
<li><a href="faces01.html" title="The Faces Of Benny Hill">The Faces Of Benny Hill</a><ul>
<li><a href="faces01.html" title="1969 - 1970">Page 1</a></li>
<li><a href="faces02.html" title="1971 - 1972">Page 2</a></li>
<li><a href="faces03.html" title="1973 - 1974">Page 3</a></li>
<li><a href="faces04.html" title="1975 - 1976">Page 4</a></li>
<li><a href="faces05.html" title="1977 - 1978">Page 5</a></li>
<li><a href="faces06.html" title="1979 - 1980">Page 6</a></li>
<li><a href="faces07.html" title="1981 - 1982">Page 7</a></li>
<li><a href="faces08.html" title="1983 - 1984">Page 8</a></li>
<li><a href="faces09.html" title="1985 - 1986">Page 9</a></li>
<li><a href="faces10.html" title="1988 - 1991">Page 10</a></li>
</ul></li>
<li><a href="cast01.html" title="The Cast Of The Benny Hill Show">The Cast</a><ul>
<li><a href="cast01.html" title="The Cast Of The Benny Hill Show">Page 1</a></li>
</ul></li>
<li><a href="who01.html" title="The Who's Who of Hill's Angels">Who's Who of Hill's Angels</a><ul>
<li><a href="who01.html" title="Adams - Critcher">Page 1</a></li>
<li><a href="who02.html" title="Daly - Holmes">Page 2</a></li>
<li><a href="who03.html" title="Jackman - Miles">Page 3</a></li>
<li><a href="who04.html" title="Mortimer - Smith">Page 4</a></li>
<li><a href="who05.html" title="Spencer-Lane - Young">Page 5</a></li>
</ul></li>
<li><a href="compendium.html" title="The Hill's Angels Compendium">Angels Compendium</a><ul>
<li><a href="compendium.html" title="Details For Hill's Angels Appearances On The Show">Page 1</a></li>
<li><a href="compendium01.html" title="Details For Hill's Angels Appearances On The Show">Page 2</a></li>
</ul></li>
<li><a href="benny01.html" title="A Tribute To Benny Hill">Benny Hill Tribute</a><ul>
<li><a href="benny01.html" title="A Tribute To Benny Hill, Page 1">Page 1</a></li>
<li><a href="benny02.html" title="A Tribute To Benny Hill, Page 2">Page 2</a></li>
<li><a href="benny03.html" title="A Tribute To Benny Hill, Page 3">Page 3</a></li>
<li><a href="benny04.html" title="A Tribute To Benny Hill, Page 4">Page 4</a></li>
</ul></li>
<li><a href="mcgee.html" title="A Tribute To Henry McGee">More Tributes</a><ul>
<li><a href="mcgee.html" title="A Tribute To Henry McGee">Henry McGee Tribute</a></li>
<li><a href="jwright.html" title="A Tribute to Jackie Wright">Jackie Wright Tribute</a></li>
<li><a href="kirkland.html" title="A Tribute To Dennis Kirkland">Dennis Kirkland Tribute</a></li>
<li><a href="machine.html" title="A Tribute to Love Machine">Love Machine Tribute</a></li>
<li><a href="darvey.html" title="A Tribute To Diana Darvey">Diana Darvey Tribute</a></li>
<li><a href="btodd.html" title="A Tribute To Bob Todd">Bob Todd Tribute</a></li>
<li><a href="randolph.html" title="A Tribute To Boots Randolph">Boots Randolph Tribute</a></li>
<li><a href="python.html" title="Monty Python Connections by William Brown">Monty Python Connections</a></li>
</ul></li>
<li><a href="whoshow01.html" title="Who's Who Pages A - L">Who's Who A - L</a><ul>
<li><a href="whoshow01.html" title="Adair - Black">Page 1</a></li>
<li><a href="whoshow02.html" title="Bond - Cartwright">Page 2</a></li>
<li><a href="whoshow03.html" title="Chisholm - Dane">Page 3</a></li>
<li><a href="whoshow04.html" title="Darlington - Design">Page 4</a></li>
<li><a href="whoshow05.html" title="Doyle - Finch">Page 5</a></li>
<li><a href="whoshow06.html" title="Foot - Gallant">Page 6</a></li>
<li><a href="whoshow07.html" title="Gaye - Hamilton">Page 7</a></li>
<li><a href="whoshow08.html" title="Hare - Jobling">Page 8</a></li>
<li><a href="whoshow09.html" title="Johnstone - Kominowski">Page 9</a></li>
<li><a href="whoshow10.html" title="Ladybirds - Logan">Page 10</a></li>
<li><a href="whoshow11.html" title="Los Zafiros - Lynley">Page 11</a></li>
</ul></li>
<li><a href="whoshow12.html" title="Who's Who Pages M - Z">Who's Who M - Z</a><ul>
<li><a href="whoshow12.html" title="Mahadervan - Mills">Page 12</a></li>
<li><a href="whoshow13.html" title="Moray - Nolan">Page 13</a></li>
<li><a href="whoshow14.html" title="O'Dell - Parry">Page 14</a></li>
<li><a href="whoshow15.html" title="Parsons - Price">Page 15</a></li>
<li><a href="whoshow16.html" title="Prowse - Rickard">Page 16</a></li>
<li><a href="whoshow17.html" title="Roberts - Seal">Page 17</a></li>
<li><a href="whoshow18.html" title="Sedd - Stapley">Page 18</a></li>
<li><a href="whoshow19.html" title="Stephenson - Two's Company">Page 19</a></li>
<li><a href="whoshow20.html" title="Tyson - Weston">Page 20</a></li>
<li><a href="whoshow21.html" title="Whatling - Wright">Page 21</a></li>
</ul></li>
<li><a href="set01a.html" title="A&amp;E DVD Review, Set 1 (1969-1971)">A&amp;E DVD Review, Set 1</a><ul>
<li><a href="set01a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set01b.html" title="Reviews of Episodes 5 - 8">Episodes 5 - 8</a></li>
<li><a href="set01c.html" title="Reviews of Episodes 9-11 &amp; Summary">Episodes 9 - 11 &amp; Summary</a></li>
</ul></li>
<li><a href="set02a.html" title="A&amp;E DVD Review, Set 2 (1972-1974)">A&amp;E DVD Review, Set 2</a><ul>
<li><a href="set02a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set02b.html" title="Reviews of Episodes 5 - 8">Episodes 5 - 8</a></li>
<li><a href="set02c.html" title="Reviews of Episodes 9-10 &amp; Summary">Episodes 9 - 10 &amp; Summary</a></li>
</ul></li>
<li><a href="set03a.html" title="A&amp;E DVD Review, Set 3 (1975-1977)">A&amp;E DVD Review, Set 3</a><ul>
<li><a href="set03a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set03b.html" title="Reviews of Episodes 5 - 8">Episodes 5 - 8</a></li>
<li><a href="set03c.html" title="Reviews of Episodes 9-10 &amp; Summary">Episodes 9 - 10 &amp; Summary</a></li>
</ul></li>
<li><a href="set04a.html" title="A&amp;E DVD Review, Set 4 (1978-1981)">A&amp;E DVD Review, Set 4</a><ul>
<li><a href="set04a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 4</a></li>
<li><a href="set04b.html" title="Reviews of Episodes 5 - 7">Episodes 5 - 7</a></li>
<li><a href="set04c.html" title="Reviews of Episodes 8-10 &amp; Summary">Episodes 8 - 10 &amp; Summary</a></li>
</ul></li>
<li><a href="set05a.html" title="A&amp;E DVD Review, Set 5 (1982-1985)">A&amp;E DVD Review, Set 5</a><ul>
<li><a href="set05a.html" title="Reviews of Episodes 1 - 4">Episodes 1 - 3</a></li>
<li><a href="set05b.html" title="Reviews of Episodes 5 - 6">Episodes 4 - 6</a></li>
<li><a href="set05c.html" title="Reviews of Episodes 7- 9 &amp; Summary">Episodes 7 - 9 &amp; Summary</a></li>
</ul></li>
<li><a href="set06a.html" title="A&amp;E DVD Review, Set 6 (1986-1989)">A&amp;E DVD Review, Set 6</a><ul>
<li><a href="set06a.html" title="Reviews of Episodes 1 - 3">Episodes 1 - 3</a></li>
<li><a href="set06b.html" title="Reviews of Episodes 4 - 6">Episodes 4 - 6</a></li>
<li><a href="set06c.html" title="Reviews of Episodes 7- 8 &amp; Summary">Episodes 7 - 8 &amp; Summary</a></li></ul></li>

<li><a href="worldtour.html" title="Go to the Benny Hill's World Tour: New York DVD Review by William Brown">World Tour DVD Review</a></li>
<li><a href="hillsangelsconnections.html" title="Hill's Angels Connections Article by David Hawkins">Hill's Angels Connection</a></li>
<li><a href="collection.html" title="Go to the Benny Hill Collection DVD Review">Benny Hill Collection</a></li>
<li><a href="lostyears01.html" title="Benny Hill: The Lost Years DVD">The Lost Years DVD </a><ul>
<li><a href="lostyears01.html" title="The Lost Years: Bennies From Heaven Review">Bennies From Heaven</a></li>
<li><a href="lostyears02.html" title="The Lost Years: Benny &amp; The Jests Review">Benny &amp; The Jests</a></li>
<li><a href="lostyears03.html" title="The Lost Years: The Good, The Bawd &amp; The Benny Review">The Good, The Bawd &amp; The Benny</a></li>
<li><a href="lostyears04.html" title="The Lost Years: Bonus Benny! Review">Bonus Benny!</a></li>
<li><a href="lostyears05.html" title="The Lost Years: DVD Guide by William Brown">The Lost Years DVD Guide</a></li>
</ul></li>
<li><a href="stand.html" title="Reviews of One Night Video Stand, Video Spotlight, Home Video Drive In &amp; Video Follies">Golden Classics Review</a><ul>
<li><a href="stand.html" title="One Night Video Stand Review">One Night Video Stand</a></li>
<li><a href="spotlight.html" title="Video Spotlight Review">Video Spotlight</a></li>
<li><a href="drivein.html" title="Home Video Drive In Review">Home Video Drive In</a></li>
<li><a href="follies.html" title="Video Follies Review">Video Follies</a></li>
<li><a href="classics.html" title="Bonus Features &amp; Summary">Bonus Features</a></li>
</ul></li>
<li><a href="smiles.html" title="Reviews of Golden Smiles, Yucks, Guffaws, Laughs, Sniggers &amp; Chuckles">Golden Greats Review</a><ul>
<li><a href="smiles.html" title="Golden Smiles Review">Golden Smiles</a></li>
<li><a href="yucks.html" title="Golden Yucks Review">Golden Yucks</a></li>
<li><a href="guffaws.html" title="Golden Guffaws Review">Golden Guffaws</a></li>
<li><a href="laughs.html" title="Golden Laughs Review">Golden Laughs</a></li>
<li><a href="sniggers.html" title="Golden Sniggers Review">Golden Sniggers</a></li>
<li><a href="chuckles.html" title="Golden Chuckles Review">Golden Chuckles</a></li>
<li><a href="greats.html" title="Bonus Features &amp; Summary">Bonus Features</a></li>
</ul></li>
<li><a href="annuals.html" title="Benny Hiil Annuals: Regions 2 Releases">Benny Hill Annuals: R2</a></li>
<li><a href="r2reviews01.html" title="Benny Hiil Region 2 DVD &amp; VHS Reviews">Region 2 Reviews</a></li>
<li><a href="ultimatedvd.html" title="Benny Hill on DVD">The Ultimate DVD</a></li>
<li><a href="vhs.html" title="Benny Hill on VHS by William Brown">Benny Hill on VHS</a></li>

<li><a href="doyle.html" title="Love Machine Interview">Love Machine Q&amp;A</a><ul>
<li><a href="colthorpe.html" title="An Interview with Jane Eve (Colthorpe)">Jane Eve (Colthorpe)</a></li>
<li><a href="doyle.html" title="An Interview with Lorraine Doyle (Greening)">Lorraine Doyle (Greening)</a></li>
<li><a href="lucas.html" title="An Interview with Teresa Lucas">Teresa Lucas</a></li>
<li><a href="lutter.html" title="An Interview with Claire Lutter">Claire Lutter</a></li>
</ul></li>
<li><a href="kendall.html" title="Famous Angels In Exclusive Interviews">Angels In The Spotlight</a><ul>
<li><a href="kendall.html" title="An Interview with Penny Kendall">Penny Kendall</a></li>
<li><a href="upton.html" title="An Interview with Sue Upton">Sue Upton</a></li>
<li><a href="facey.html" title="An Interview with Vicky Facey">Vicky Facey</a></li>
<li><a href="alisonthomas.html" title="An Interview with Alison Thomas">Alison Thomas</a></li>
</ul></li>
<li><a href="chat01.html" title="Celebrity Chats with Stars of The Benny Hill Show In Person">Celebrity Chats</a><ul>
<li><a href="chat01.html" title="Celebrity Chat: Coffee with Penny Kendall by David Hawkins">Penny Kendall</a></li>
</ul></li>
<li><a href="mandel.html" title="Interviews with Stars of The Benny Hill Show">Benny Hill Stars Q&amp;A</a><ul>
<li><a href="mandel.html" title="An Interview with Suzy Mandel">Suzy Mandel</a></li>
<li><a href="pilgrim.html" title="An Interview with Christine Pilgrim">Christine Pilgrim</a></li>
<li><a href="walker.html" title="An Interview with Louise Walker">Louise Walker</a></li>
<li><a href="wilde.html" title="An Interview with Dee Dee Wilde">Dee Dee Wilde</a></li>
<li><a href="jaynemarie.html" title="An Interview with Jayne-Marie">Jayne-Marie</a></li>
<li><a href="lebeau.html" title="An Interview with Bettine Le Beau">Bettine Le Beau</a></li>
<li><a href="jonjonkeefe.html" title="An Interview with Jon Jon Keefe">Jon Jon Keefe</a></li>
</ul></li>
<li><a href="sitemap01.html" title="News Archives">News Archives</a><ul>
<li><a href="sitemap11.html" title="Updates from September 3, 2007 to November 27, 2007.">Archive 11</a></li>
<li><a href="sitemap10.html" title="Updates from December 19, 2006 to August 19, 2007.">Archive 10</a></li>
<li><a href="sitemap09.html" title="Updates for October 13, 2006 to December 14, 2006">Archive 9</a></li>
<li><a href="sitemap08.html" title="Updates for February 19, 2006 to October 9, 2006">Archive 8</a></li>
<li><a href="sitemap07.html" title="Updates for September 20, 2005 to February 17, 2006">Archive 7</a></li>
<li><a href="sitemap06.html" title="Updates for July 27 - September 17, 2005">Archive 6</a></li>
<li><a href="sitemap05.html" title="Updates for June 2 - July 24, 2005">Archive 5</a></li>
<li><a href="sitemap04.html" title="Updates for March 22 - June 2005">Archive 4</a></li>
<li><a href="sitemap03.html" title="Updates for October 24, 2004 - March 22, 2005">Archive 3</a></li>
<li><a href="sitemap02.html" title="Updates for August 30, 2004 - October 18, 2004">Archive 2</a></li>
<li><a href="sitemap01.html" title="Updates for August, 2003 - August 26, 2004">Archive 1</a></li>
</ul></li>
<li><a href="awards.html" title="Website Awards Page">Website Awards</a></li>
<li><a href="competitions.html" title="Go to the Competitions Page">Competitions</a></li>
<li><a href="privacy.html" title="Important Information regarding the use of this site and information for parents">Privacy Policy</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&amp;i=g35-15360-60" title="Read or Leave A Message in The Guestbook" target="_blank">Guestbook</a></li>
<li><a href="oldgb01.html" title="Guestbook Archive">Guestbook Archive</a><ul>
<li><a href="oldgb01.html" title="Page 1">Page 1</a></li>
<li><a href="oldgb02.html" title="Page 2">Page 2</a></li>
<li><a href="oldgb03.html" title="Page 3">Page 3</a></li>
</ul></li>
<li><a href="http://bennyhillshotelsplendide.yuku.com/" title="Go To Benny Hill's Hotel Splendide ezboard" target="_blank">Hotel Splendide ezboard</a></li>
<li><a href="http://www.runstop.de/bennysplace/wands/index.html" title="Wayne &amp; Shuster Tribute" target="_blank">Wayne &amp; Shuster Tribute</a></li>
<li><a href="http://www.runstop.de/bennysplace/sctv/index.html" title="Go to the SCTV on DVD Campaign" target="_blank">SCTV on DVD Campaign</a></li>
<li><a href="http://www.bennyhill.net/" title="Benny Hill Links" target="_blank">Benny Hill Links</a><ul>
<li><a href="http://www.bennyhill.net/" title="www.bennyhill.net" target="_blank">Official Benny Hill Site</a></li>
<li><a href="http://www.tnsf.ca/bennyhill/" title="The Benny Hill Songbook" target="_blank">The Benny Hill Songbook</a></li>
<li><a href="http://www.geocities.com/ckcapck/ben.html" title="The One and Only Benny Hill" target="_blank">One and Only Benny Hill</a></li>
<li><a href="http://www.laughterlog.com/Personalities/per-bhill.HTM" title="Go to laughterlog.com for an interesting page on Benny Hill" target="_blank">www.laughterlog.com</a></li>
<li><a href="http://www.nicholasparsons.co.uk/" title="Official Site Of Nicholas Parsons" target="_blank">Nicholas Parsons Site</a></li>
</ul></li>
<li><a href="http://movies.groups.yahoo.com/group/hilldvd/" title="Benny Hill On DVD Campaign!" target="_blank">Benny Hill On DVD!</a></li></ul>
</div>
<script>
    function toggleCssMenu(icon) {
        var cssmenu = document.getElementById('cssmenu');
        if (icon.className.indexOf('active') == -1) {
            icon.className = 'menu-icon active';
            cssmenu.style.display = "block";
            setTimeout(function(){cssmenu.className = 'active';},0);          
        }
        else {
            icon.className = 'menu-icon';
            cssmenu.className = '';
            setTimeout(function(){cssmenu.style.display = "none";},411);
        }
    }
</script>
<!--end CssMenu-->
</div>
</body>
</html>
#cssmenu
{
    width:auto;
    display:block;
    text-align:center;
    font-family:Spectral;
    line-height:1.2;
}
#cssmenu ul
{
    width:auto;
    display:block;
    font-size:0;
    text-align:center;
    color:#FFFFFF;
    background-color: #000000;
    border: #000000;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    z-index:999999990;
    border-radius: 3px;
}

#cssmenu li
{
    display:inline-block;
    position:relative;  
    font-size:0;
    margin:0;
    padding:0;
}

/*Top level items
---------------------------------------*/

#cssmenu >ul>li>span, #cssmenu >ul>li>a
{  
    font-size:30px;
    color:inherit;
    text-decoration:none;
    padding:12px 20px;
    font-weight:700;
    text-transform:none;
    letter-spacing:normal;  
    display:block;  
    position:relative;
    transition:all 0.3s;
}
#cssmenu li:hover > span, #cssmenu li:hover > a
{
    color:#CCCCCC;
    background-color:#000000;
}

/*Sub level items
---------------------------------------*/
#cssmenu .dropdown
{
    text-align:left;
    left:0;
    font-family:inherit;
    color: #CCCCCC;
    background-color:#222222;
    border:none;
    position:absolute;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display:none;
    opacity:0;
    cursor:default;
}

#cssmenu .dropdown li {
    display: block;
}

#cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3
{
    font-size:18px;
    font-weight:400;
    font-family:inherit;
    margin:0;
    padding:12px 20px;
    display:block;
    color:inherit;
    text-decoration:none;
}
#cssmenu .clm h3 {
    font-size:20px;
    font-weight:700;
}
#cssmenu .sub-item {
    background-color:#222222;
    position:relative;      
    transition:all 0.3s;
}

#cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a
{

    color:#FFFFFF;
    background-color:#222222;
}

#cssmenu .clm a:hover
{
    color:#FFFFFF;
    transition:color 0.2s;
}

#cssmenu .dropdown.right0 {left:auto;right:0;}
#cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%;}
     
#cssmenu li.full-width{
    position:static;
}
#cssmenu li.full-width .dropdown{
    width:100%;
    left:0;
    box-sizing:border-box;
}

#cssmenu li:hover > .dropdown
{
    display:block;
    opacity:1;
    z-index:1;
}

#cssmenu .dropdown li > .dropdown
{
    left:100%; right:auto;
    top:0;
}

#cssmenu ul.dropdown
{
    min-width:240px; /* Sub level menu min width */
}

#cssmenu div.dropdown  {
    text-align:center;
}

/* each column */
#cssmenu .clm
{
    text-align:left;
    margin:20px;
    vertical-align:top;/*or middle*/
    width:auto;
    min-width:240px;
    display:inline-block;
    *display:inline;*zoom:1;
}

#cssmenu .clm a:hover
{
    color:#FFFFFF;
    text-decoration:underline;
}

/*-----------Arrows----------------*/
#cssmenu .arrow {
    color:inherit;
    border-style:solid; border-width:3px 3px 0 0; padding:8px; transform:rotate(135deg);margin-top:-15.5px;margin-left:8px;
    position:relative;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align:middle;
    overflow:hidden;/*for IE6*/
}
       
#cssmenu .dropdown .arrow {
    transform:rotate(45deg);
    top:50%;margin-top:-11px;
    position:relative;top:auto;
}

/*######## styles for mobile mode */

.menu-icon {
    display: none;
}

@media only screen and (max-width: 99999px) {

    .menu-icon {display:inline-block;}

    #cssmenu  {
        width:100%;
        max-width:100%;
        display:none;
        background-color:#000000;
        border:1px solid rgba(255,255,255,0.1);
        box-sizing:border-box;
        z-index:999999990;
    }

    /*--begin mark1--*/

    #cssmenu  {
        position:fixed;top:0;bottom:0;left:0;right:0;height:100%!important;
        top:-130%;
        bottom:auto; box-shadow:0 4px 18px rgba(0,0,0,0.3);
        transition:all 411ms cubic-bezier(.7, 0,1,.4);
    }

    #cssmenu.active {
        top:0;
        transition:all 411ms cubic-bezier(.16,.76,.45,1);
    }

    #mcmenu {z-index:1000000004;}
-fixed-bg {background:#000;z-index:1000000000;}
-fixed-bg.showing {display:block;opacity:0;}-fixed-bg.active {opacity:0.4;}
.menu-icon.active {position:fixed;top:12px;right:12px;z-index:1000000006;}

    /*--end mark1--*/

    #cssmenu ul  {
        background-color:transparent;
        transition:all 411ms ease;
        box-sizing:border-box;
        border:none;
        border-radius: 0;
    }

    #cssmenu .mobileHide {
        display:none;
    }

    #cssmenu li {
        text-align:center;
        display:block;
        position:static;
    }

    #cssmenu >ul>li>span, #cssmenu >ul>li>a
    {      
        font-size:52px;
    }
    /* #cssmenu li:hover span, #cssmenu li:hover a {
   
        color:#FFFFFF;
        background-color:#000000;
    }*/
}
/*----------- menu-icon ----------------*/
.menu-icon-wrapper {
    padding:5px;
    text-align:right;
}
.menu-icon {
    padding:6px;
    cursor: pointer;
    outline: none;
    background-color:transparent;
    border:1px solid transparent;
    border-radius:3px;
    transition: all 0.25s ease-out;
    user-select:none;
    box-sizing:content-box;
    font-size:0;
    position:relative;
}

.menu-icon.active{
    background-color:transparent;
}
.three-line{
  width: 28px;
  height: 14px;
  position: relative;
  display: inline-block;
  font-size: 0;
}
.three-line span{
  background-color:#EEEEEE;
  position: absolute;
  border-radius: 2px;
  transition: transform .5s ease-in-out;
  width:100%;
  height: 4px;
  left: 0;
  transform: rotate(0);
}
.three-line span:nth-child(1){
  top:0;
}
.three-line span:nth-child(2){
  top:5px;
  visibility:hidden;
}
.three-line span:nth-child(3){
  bottom:0;
}
.menu-icon.active .three-line span:nth-child(1){
  transform: rotate(225deg);
  top: 5px;
}
.menu-icon.active .three-line span:nth-child(2){
  transform: rotate(180deg);
  visibility:hidden;
}
.menu-icon.active .three-line span:nth-child(3){
  transform: rotate(315deg);
  top: 5px;
}
/*End of styles for mobile mode ########*/

@keyframes topItemAnimation{
  from {opacity:0; transform:translate3d(0, -10vh, 0);}
  to {opacity:1; transform:translate3d(0, 0, 0);}
}
#cssmenu li a {animation:none;}
#cssmenu.active li a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.15s backwards;}
#cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.9s backwards;}
#cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.75s backwards;}
#cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.6s backwards;}
#cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.45s backwards;}
#cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.9s cubic-bezier(.16,.84,.44,1) 0.3s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}

OldMan · Dec 27, 2022

Line 21,
<div class="menu-icon" onclick="toggleCssMenu(this)"> does not pass anything. Change the "this" to what you want to pass.
FYI: "this" is a JS thing, not an HTML thing.
And I would add this to the head:
<base href="http://bennysplace.ml/"> before the link to your css file

sacdman · Dec 27, 2022

Thanks for the response. I appreciate your time. I am not sure what you are suggesting. do I add the <base href="http://bennysplace.ml/"> to the main page of my site or to the cssmenu.html page? I am also not sure what I would change for this or what goes into the <div class="menu-icon" onclick="toggleCssMenu(this)">. Thanks.

sacdman · Dec 27, 2022

I am also hoping to use Server Side Includes to call in the html to the guffaws.html page.

sacdman · Dec 27, 2022

I have tried different things to add this menu, but I am really getting nowehere fast and to be honest I do not understand what you are asking in your message. Again, thanks for your help.

Antero360 · Dec 28, 2022

sacdman said:
I have tried different things to add this menu, but I am really getting nowehere fast and to be honest I do not understand what you are asking in your message. Again, thanks for your help.

Hi there,
Quick question...is the image in the right directory?

sacdman · Dec 28, 2022

Thanks for the repsonse Antero360... Hi... I am very, very, very much the newbie when it comes to this type of CSS. I actually added a simple and attractive hamburger button, but as to how to use it with server side includes or PHP to call in links for a slideout menu I have no idea. This is the real challenge. I did not design my site with a cellphone in mind. It is an older site. I also have a large number of pages and I am not able to add the links to every page of the site. I need to call in the links for an alternate page or text file the way you would with server side includes. I basically need help every step of the way. I know I am asking a lot, but I have tried various types of CSS menus on the web, but they do not integreat of course without my CSS butting heads with their CSS. So any help or guidance is appreciate.

OldMan · Dec 28, 2022

sacdman I did not ask anything. I told you what to do and it looks like you didn't do it.
So again

And I would add this to the head:
<base href="http://bennysplace.ml/"> before the link to your css file

That looks like this:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Menucool Css Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="http://bennysplace.ml/">
    <link href="cssmenu.css" rel="stylesheet" />
    <style>
        body {
            margin:0;
            background:rgba(0,0,0,1);
        }
        #menuDemo { text-align:center; padding:30px 8px; }
    </style>
</head>

This changes your relative addresses to absolute file paths. Read about it here https://www.w3schools.com/html/html_filepaths.asp. You can also search for <base> tag on this site.

Next: "<div class="menu-icon" onclick="toggleCssMenu(this)">" does not work. Put what you want to pass to the function in place of the word "this", because it passes nothing and that is probably why you get a black screen.

sacdman · Dec 28, 2022

Thanks for helping, Oldman. I did try to add it, but the links are not in the same page as the button. I have a lot of links and I would like to have to only change one page to update the menu. I did try putting in an .html link, but that doesn't work. I am not sure if I need to use a text file or some other method to call in the links.

sacdman · Dec 28, 2022

Currently, I use server side and that is an .html page. I could change that to something else if needed. Using a pre-made css menu just isn't playing nicely with my current page.

OldMan · Dec 28, 2022

I am sorry, I don't know what you're talking about. You should post code to explain.

sacdman · Dec 28, 2022

Currently, my site has well over 100 pages. Instead of having to update the links for every page on the site, I use virtual includes to import the links from a separate HTML page to that menu I am using.

sacdman · Dec 28, 2022

Next up I would like to have a nice slide in menu using CSS for mobile phones. I would like to have the standard "hamburger button". When clicking on said hamburger button, I would like to be able to access a separate document, just like my virtual includes acceses an html page with all the links for my website. However, I don't know if there is a way for a hamburger button to "call in" the html from a separate file and display the links in a slide in or drop down menu when you click on it. I don't know if that requires anything like PHP or My SQL or some other coding language. I do not have any experience with PHP or anything like that and wouldn't know how to implement it. Currently, my right side menu is too big for a cellphone to accomodate it and the content of the webpages. As far as posting code, I have my server side code at the bottom of the page.
 navigation.html is the page where I have all of the links to every page of my website.
I really don't know how to get a hamburger button to access the page or file with the unordered list I have in HTML. I think most people use a hambuger button links that are already included in the webpage it is added to, not to access a separate HTML or text file to import it from with the onClick. Is there even a way to do that?

sacdman · Dec 29, 2022

Okay, after much digging around the web, I do seem to have found a menu that integrates pretty well. However, it does need some tweaks. The menu has no scrollbar currently and the UL items don't pop out with extra links when they should. Also, I would prefer to reposition the button to open the menu. Again and as always thanks for any help. The good news here is that the Virtual includes works with this menu. That is a relief!!

HTML:

This is the HTML for the off-canvas menu
<div class="pure-container" data-effect="pure-effect-push">
<input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left">
<label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left"><span class="pure-toggle-icon"></span></label>
<nav class="pure-drawer" data-position="left">
<p style="padding: 25px 20px; margin: 0;"><!--#include virtual="navigation.html" --></p>
</nav></div>

Here is the CSS for the new slide out menu....

CSS:

/**************
## Animation ##
**************/
/************
## Toggler ##
************/
/***********
## Drawer ##
***********/
/***********
## Pusher ##
***********/
/*******************
## Pusher Overlay ##
*******************/
/**************
## Variables ##
**************/
/*************
## Required ##
*************/
html, body {
  height: 100%;
}

body {
  margin: 0;

}

/**************
## Container ##
**************/
.pure-container {
  -webkit-overflow-scrolling: touch;
overflow:auto

}

/************
## Toggler ##
************/
.pure-toggle {
  left: -9999px;
  position: absolute;
  top: -9999px;
}

.pure-toggle:focus ~ .pure-toggle-label {
  border-color: #FFF;
  color: #FFF;
}

.pure-toggle-label {
  display: none;
  cursor: pointer;
  display: block;
  position: fixed;
  top: 45px;
  z-index: 99;
  color: #FFF;
  width: 50px;
  height: 50px;
  -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  border: 2px solid #FFF;
  border-radius: 50%;
  background-color:#069;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pure-toggle-label:hover {
  border-color: #1fc08e;
  color: #FFF;
}

.pure-toggle-label:hover .pure-toggle-icon,
.pure-toggle-label:hover .pure-toggle-icon:before,
.pure-toggle-label:hover .pure-toggle-icon:after {
  background-color: #1fc08e;
}

.pure-toggle-label:active {
  -webkit-tap-highlight-color: transparent;
}

.pure-toggle-label .pure-toggle-icon,
.pure-toggle-label .pure-toggle-icon:before,
.pure-toggle-label .pure-toggle-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 4px;
  width: 35px;
  cursor: pointer;
  background: #FFF;
  display: block;
  content: '';
  -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
}

.pure-toggle-label .pure-toggle-icon {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}

.pure-toggle-label .pure-toggle-icon:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}

.pure-toggle-label .pure-toggle-icon:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}

.pure-toggle-label[data-toggle-label='left'] {
  left: 15px;
  right: auto;
}

.pure-toggle-label[data-toggle-label='right'] {
  right: 28px;
  left: auto;
}

.pure-toggle-label[data-toggle-label='top'] {
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label:not([data-toggle-label='left']),
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label:not([data-toggle-label='right']),
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label:not([data-toggle-label='top']) {
  opacity: 0;
  z-index: -1;
}

.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'],
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'],
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] {
  border-color: #1fc08e;
  color: #1fc08e;
}

.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon {
  background-color: transparent;
}

.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:before, .pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:after {
  top: 0;
}

.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:before {
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
}

.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:after {
  transform: translateX(-50%) translateY(-10px) rotate(-45deg);
  -webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
  top: 10px;
}

/***********
## Drawer ##
***********/
.pure-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  visibility: hidden;
  background-color: #374c5d;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  width: 100%;
}

@media only screen and (min-width: 40.063em) {
  .pure-drawer {
    width: 300px;
  }
}

@media only screen and (min-width: 64.063em) {
  .pure-drawer {
    width: 300px;
  }
}

.pure-drawer[data-position='right'] {
  left: auto;
  right: 0;
}

.pure-drawer[data-position='top'] {
  height: 100%;
  width: 100%;
}

@media only screen and (min-width: 40.063em) {
  .pure-drawer[data-position='top'] {
    height: 100%;
  }
}

@media only screen and (min-width: 64.063em) {
  .pure-drawer[data-position='top'] {
    height: 100px;
  }
}

/*********************
## Pusher Container ##
*********************/
.pure-pusher-container {
  position: relative;
  height: 100%;

}

/***********
## Pusher ##
***********/
.pure-pusher {
  position: relative;
  height: 100%;
  overflow-y: auto;
  left: 0;
  z-index: 2;
  background-color: #fff;
  -webkit-transition-property: -webkit-transform;
          transition-property: transform;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

/*******************
## Pusher Overlay ##
*******************/
.pure-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition-property: opacity;
          transition-property: opacity;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

.pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'] {
  left: 100%;
}

@media only screen and (min-width: 40.063em) {
  .pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'] {
    left: 300px;
  }
}

@media only screen and (min-width: 64.063em) {
  .pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'] {
    left: 300px;
  }
}

.pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'] {
  right: 100%;
}

@media only screen and (min-width: 40.063em) {
  .pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'] {
    right: 300px;
  }
}

@media only screen and (min-width: 64.063em) {
  .pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'] {
    right: 300px;
  }
}

.pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
  top: 100%;
}

@media only screen and (min-width: 40.063em) {
  .pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
    top: 100%;
  }
}

@media only screen and (min-width: 64.063em) {
  .pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
    top: 100px;
  }
}

.pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'],
.pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'],
.pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
}

/********************************
## Fallback for older browsers ##
********************************/
.no-csstransforms3d .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  left: 100%;
}

@media only screen and (min-width: 40.063em) {
  .no-csstransforms3d .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    left: 300px;
  }
}

@media only screen and (min-width: 64.063em) {
  .no-csstransforms3d .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    left: 300px;
  }
}

.no-csstransforms3d .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  left: -100%;
}

@media only screen and (min-width: 40.063em) {
  .no-csstransforms3d .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    left: -300px;
  }
}

@media only screen and (min-width: 64.063em) {
  .no-csstransforms3d .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    left: -300px;
  }
}

.no-csstransforms3d .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  top: 100%;
}

@media only screen and (min-width: 40.063em) {
  .no-csstransforms3d .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    top: 100%;
  }
}

@media only screen and (min-width: 64.063em) {
  .no-csstransforms3d .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    top: 100px;
  }
}

/*****************************
## Effect - Slide in on top ##
*****************************/
/* DRAWER */
[data-effect='pure-effect-slide'] .pure-drawer {
  z-index: 3;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-slide'] .pure-drawer[data-position='left'] {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

[data-effect='pure-effect-slide'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

[data-effect='pure-effect-slide'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

[data-effect='pure-effect-slide'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-slide'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-slide'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* OVERLAY */
[data-effect='pure-effect-slide'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/********************
## Effect - Reveal ##
********************/
/* DRAWER */
[data-effect='pure-effect-reveal'] .pure-drawer {
  visibility: visible;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

/* PUSHER */
[data-effect='pure-effect-reveal'] .pure-pusher-container .pure-pusher {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

/* OVERLAY */
[data-effect='pure-effect-reveal'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/*************************
## Effect - Slide along ##
*************************/
/* DRAWER */
[data-effect='pure-effect-slideAlong'] .pure-drawer {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-slideAlong'] .pure-drawer[data-position='left'] {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

[data-effect='pure-effect-slideAlong'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}

[data-effect='pure-effect-slideAlong'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* PUSHER */
[data-effect='pure-effect-slideAlong'] .pure-pusher-container .pure-pusher {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

/* OVERLAY */
[data-effect='pure-effect-slideAlong'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/*******************************
## Effect - Reverse slide out ##
*******************************/
/* DRAWER */
[data-effect='pure-effect-reverseSlide'] .pure-drawer {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-reverseSlide'] .pure-drawer[data-position='left'] {
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}

[data-effect='pure-effect-reverseSlide'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

[data-effect='pure-effect-reverseSlide'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(0, 50%, 0);
  transform: translate3d(0, 50%, 0);
}

[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* PUSHER */
[data-effect='pure-effect-reverseSlide'] .pure-pusher-container .pure-pusher {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

/* OVERLAY */
[data-effect='pure-effect-reverseSlide'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

/*********************************
## Effect 5 - Scale Down Pusher ##
*********************************/
/* DRAWER */
[data-effect='pure-effect-scaleDown'] .pure-drawer {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-scaleDown'] .pure-drawer[data-position='left'] {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

[data-effect='pure-effect-scaleDown'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

[data-effect='pure-effect-scaleDown'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

[data-effect='pure-effect-scaleDown'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-scaleDown'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-scaleDown'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* PUSHER CONTAINER */
[data-effect='pure-effect-scaleDown'] .pure-pusher-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

/* PUSHER */
/* Needed for Firefox */
[data-effect='pure-effect-scaleDown'] .pure-pusher-container .pure-pusher {
  z-index: 1;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-scaleDown'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 0, -300px);
  transform: translate3d(0, 0, -300px);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-scaleDown'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 0, -300px);
    transform: translate3d(0, 0, -300px);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-scaleDown'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 0, -300px);
    transform: translate3d(0, 0, -300px);
  }
}

/* OVERLAY */
[data-effect='pure-effect-scaleDown'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/*************************
## Effect - Scale Up ##
*************************/
/* CONTAINER */
[data-effect='pure-effect-scaleUp'] {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

[data-effect='pure-effect-scaleUp'][data-position='left'] {
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

[data-effect='pure-effect-scaleUp'][data-position='right'] {
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

[data-effect='pure-effect-scaleUp'][data-position='top'] {
  -webkit-perspective-origin: 50% 0;
  perspective-origin: 50% 0;
}

/* DRAWER */
[data-effect='pure-effect-scaleUp'] .pure-drawer {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='left'] {
  -webkit-transform: translate3d(0, 0, -100%);
  transform: translate3d(0, 0, -100%);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='left'] {
    -webkit-transform: translate3d(0, 0, -300px);
    transform: translate3d(0, 0, -300px);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='left'] {
    -webkit-transform: translate3d(0, 0, -300px);
    transform: translate3d(0, 0, -300px);
  }
}

[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(100%, 0, -100%);
  transform: translate3d(100%, 0, -100%);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='right'] {
    -webkit-transform: translate3d(300px, 0, -300px);
    transform: translate3d(300px, 0, -300px);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='right'] {
    -webkit-transform: translate3d(300px, 0, -300px);
    transform: translate3d(300px, 0, -300px);
  }
}

[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(0, 0, -100%);
  transform: translate3d(0, 0, -100%);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='top'] {
    -webkit-transform: translate3d(0, 0, -100%);
    transform: translate3d(0, 0, -100%);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='top'] {
    -webkit-transform: translate3d(0, 0, -100px);
    transform: translate3d(0, 0, -100px);
  }
}

[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* PUSHER */
[data-effect='pure-effect-scaleUp'] .pure-pusher-container .pure-pusher {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

/* OVERLAY */
[data-effect='pure-effect-scaleUp'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/****************************************
## Effect - Scale and Rotate Pusher ##
****************************************/
/* DRAWER */
[data-effect='pure-effect-scaleRotate'] .pure-drawer {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-scaleRotate'] .pure-drawer[data-position='left'] {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

[data-effect='pure-effect-scaleRotate'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

[data-effect='pure-effect-scaleRotate'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* PUSHER CONTAINER */
[data-effect='pure-effect-scaleRotate'] .pure-pusher-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

/* PUSHER */
[data-effect='pure-effect-scaleRotate'] .pure-pusher-container .pure-pusher {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(20deg);
  transform: translate3d(100px, 0, -600px) rotateY(20deg);
}

[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 0, -100px) rotateX(20deg);
  transform: translate3d(0, 0, -100px) rotateX(20deg);
}

/* OVERLAY */
[data-effect='pure-effect-scaleRotate'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/**************************
## Effect - Fall in ##
**************************/
/* DRAWER */
[data-effect='pure-effect-fall'] .pure-drawer {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-fall'] .pure-drawer[data-position='left'],
[data-effect='pure-effect-fall'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

[data-effect='pure-effect-fall'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* PUSHER */
[data-effect='pure-effect-fall'] .pure-pusher-container .pure-pusher {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

/* OVERLAY */
[data-effect='pure-effect-fall'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/*********************
## Effect - Push ##
*********************/
/* DRAWER */
[data-effect='pure-effect-push'] .pure-drawer {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-push'] .pure-drawer[data-position='left'] {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

[data-effect='pure-effect-push'] .pure-drawer[data-position='right'] {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

[data-effect='pure-effect-push'] .pure-drawer[data-position='top'] {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

[data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* PUSHER */
[data-effect='pure-effect-push'] .pure-pusher-container .pure-pusher {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}

[data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
}

[data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
}

[data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

@media only screen and (min-width: 40.063em) {
  [data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@media only screen and (min-width: 64.063em) {
  [data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

/* OVERLAY */
[data-effect='pure-effect-push'] .pure-overlay {
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
}

/********************
## Effect - Bounce ##
********************/
/* DRAWER */
[data-effect="pure-effect-bounce"] .pure-drawer {
  z-index: 3;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

[data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
}

/* OVERLAY */
[data-effect="pure-effect-bounce"] .pure-overlay {
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

/******************
## Effect - Fade ##
******************/
/* DRAWER */
[data-effect="pure-effect-fade"] .pure-drawer {
  z-index: 3;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

[data-effect="pure-effect-fade"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-fade"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-fade"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
}

/* OVERLAY */
[data-effect="pure-effect-fade"] .pure-overlay {
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

/*******************
## Effect - FlipX ##
*******************/
/* DRAWER */
[data-effect="pure-effect-flipX"] .pure-drawer {
  z-index: 3;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

[data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
}

/* OVERLAY */
[data-effect="pure-effect-flipX"] .pure-overlay {
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

/*******************
## Effect - FlipY ##
*******************/
/* DRAWER */
[data-effect="pure-effect-flipY"] .pure-drawer {
  z-index: 3;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

[data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
}

/* OVERLAY */
[data-effect="pure-effect-flipY"] .pure-overlay {
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

/******************
## Effect - Zoom ##
******************/
/* DRAWER */
[data-effect="pure-effect-zoom"] .pure-drawer {
  z-index: 3;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

[data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  visibility: visible;
}

/* OVERLAY */
[data-effect="pure-effect-zoom"] .pure-overlay {
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown, [data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft, [data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'] {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight, [data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'] {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft, [data-effect="pure-effect-bounce"] .pure-drawer[data-position='left'] {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight, [data-effect="pure-effect-bounce"] .pure-drawer[data-position='right'] {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp, [data-effect="pure-effect-bounce"] .pure-drawer[data-position='top'] {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown, [data-effect="pure-effect-fade"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft, [data-effect="pure-effect-fade"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'] {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight, [data-effect="pure-effect-fade"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'] {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft, [data-effect="pure-effect-fade"] .pure-drawer[data-position='left'] {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight, [data-effect="pure-effect-fade"] .pure-drawer[data-position='right'] {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp, [data-effect="pure-effect-fade"] .pure-drawer[data-position='top'] {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX, [data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'], [data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'], [data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY, [data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'], [data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'], [data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX, [data-effect="pure-effect-flipX"] .pure-drawer[data-position='left'], [data-effect="pure-effect-flipX"] .pure-drawer[data-position='right'], [data-effect="pure-effect-flipX"] .pure-drawer[data-position='top'] {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY, [data-effect="pure-effect-flipY"] .pure-drawer[data-position='left'], [data-effect="pure-effect-flipY"] .pure-drawer[data-position='right'], [data-effect="pure-effect-flipY"] .pure-drawer[data-position='top'] {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown, [data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft, [data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'] {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight, [data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'] {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft, [data-effect="pure-effect-zoom"] .pure-drawer[data-position='left'] {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight, [data-effect="pure-effect-zoom"] .pure-drawer[data-position='right'] {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp, [data-effect="pure-effect-zoom"] .pure-drawer[data-position='top'] {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

Asking for assistance with CSS Menu for mobile for existing site

sacdman

Coder

sacdman

Coder

sacdman

Coder

OldMan

King Coder

sacdman

Coder

sacdman

Coder

sacdman

Coder

Antero360

King Coder

sacdman

Coder

OldMan

King Coder

sacdman

Coder

sacdman

Coder

OldMan

King Coder

sacdman

Coder

sacdman

Coder

sacdman

Coder

We value your privacy