A Pen by NyaHo

Thumbnail
This awesome code was written by shinobinya, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shinobinya ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  NyaHo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Ubuntu">	
<script src="https://use.fontawesome.com/8d4eed7ef1.js"></script>

<nav role="navigation" class="navbar fixed-top menu menu--antonio navbar navbar-toggleable-md navbar-inverse bg-inverse navsiz" style="color:white;">
    <div class="container-fluid">
      <ul class="menu__list">
        <li class="menu__item menu__item--current">
          <a class="menu__link">Home</a>
        </li>
        <li class="menu__item">
          <a class="menu__link">Who am I</a>
        </li>
        <li class="menu__item">
          <a class="menu__link">What do I offer</a>
        </li>
        <li class="menu__item">
          <a class="menu__link">Our news</a>
        </li>
        <li class="menu__item">
          <a class="menu__link">Contact me</a>
        </li>
      </ul>	
    </div>
	</nav>
<section style="background-color:#D94F5C;">
   <div class="container-fluid firstp">
     <div class="row content">
      <p class="Center animated fadeIn">Welcome</p>
      <p class="uCenter animated fadeIn">I am programmer beginner and this is my first try on webpage</p>
      <p class="bCenter animated fadeIn"><i class="fa fa-arrow-circle-o-down"></i>
  Scroll Down</p>
    </div>
  </div>
</section>
  
<section>
  <div class="container-fluid">
    <div class="row">
      <h1 class="mx-auto fade">About Me</h1>
    </div>
      <hr style="height: 1px; background-color:white;" class="toStretch"/>    
  <div class="row">
    <img src="https://68.media.tumblr.com/d6fd262e2533fbf8e3bb2b86a53f9bc0/tumblr_npxwflD0TA1uxd15do1_540.png" class="img img-fluid col-md-6 fade" style="margin:20px 0px 20px 0px;" alt="Image"/>
    <ul class="pull-right mx-auto my-auto">
      <h2 class="display-4 fade">What I'm learning:</h2>
      <li class="litem fade">HTML/CSS/JS</li>
      <li class="litem fade">BootStrap</li>
      <li class="litem fade">C,Python</li>
      <h2 class="display-4 fade">What I wanna learn:</h2>
      <li class="litem fade">C++,C&#35;,Assembly</li>
      <li class="litem fade">Cybersecurity in general</li>
      <li class="litem fade">PHP</li>
    </ul>
  </div>
  </div>
</section>
  
<section>
  <div class="container-fluid">
    <div class="row">
      <h1 class="mx-auto fade">Some Other Stuff</h1>
    </div>
      <hr style="height: 1px; background-color:black;" class="toStretch"/>
    <div class="row">
      <div class="card col-md-4 fade">
        <img src="http://phgame.cz/wp-content/uploads/HTML5-logo.svg_.png" class="card-img-top" alt="kokot"/>
        <div class="card-block">
          <h3 class="card-title">HTML</h3>
          <p class="card-text">Lorem Ipsum Dolor Sit Amet.</p>
        </div>
      </div>
      <div class="card col-md-4 fade">
        <img src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-512.png" class="card-img-top" alt="kokot"/>
        <div class="card-block">
          <h3 class="card-title">CSS</h3>
          <p class="card-text">Lorem Ipsum Dolor Sit Amet.</p>
        </div>
      </div>
      <div class="card col-md-4 fade">
        <img src="http://www.webcodeacademy.com/wp-content/uploads/2016/05/javascript.png" class="card-img-top" alt="kokot"/>
        <div class="card-block">
          <h3 class="card-title">JavaScript</h3>
          <p class="card-text">Lorem Ipsum Dolor Sit Amet.</p>
        </div>
      </div>
       </div>
       <div class="row">
      <p class="mx-auto my-auto">Well, I basically 'hacked' few pieces of nice code together to create this. I'm gonna give this one few more shots.</p>
       </div>
  </div>  
</section>













<script>
  
  
  
  
  
  
  
  
  
(function() {
			[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
				var menuItems = menu.querySelectorAll('.menu__link'),
					setCurrent = function(ev) {
						ev.preventDefault();

						var item = ev.target.parentNode; // li

						// return if already current
						if (classie.has(item, 'menu__item--current')) {
							return false;
						}
						// remove current
						classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
						// set current
						classie.add(item, 'menu__item--current');
					};

				[].slice.call(menuItems).forEach(function(el) {
					el.addEventListener('click', setCurrent);
				});
			});

			[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
				link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
				new Clipboard(link);
				link.addEventListener('click', function() {
					classie.add(link, 'link-copy--animate');
					setTimeout(function() {
						classie.remove(link, 'link-copy--animate');
					}, 300);
				});
			});
		})(window);
  
  
  
  
  
  
  
  
  
 
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shinobinya/a-pen-by-nyaho-rmmMJN */
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: Ubuntu;
  background-color: #D94F5C;
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: white;
  /*height: 100vh;*/
}
section:nth-of-type(2n) {
  background-color: #2A282B;
  color: white;
}

.firstp {
  position: relative;
  height: 80vh;
  width: 100%;
}

.navsiz {
  position: relative;
  height: 10vh;
}

.Center {
  font-size: 600%;
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 0s;
}

.uCenter {
  font-size: 180%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 1s;
}

.bCenter {
  font-size: 180%;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 2s;
}

.fade {
  opacity: 0;
}

.toStretch {
  -webkit-transition: width 1s ease-out;
  transition: width 1s  ease-out;
  width: 0%;
}

.stretchNow {
  width: 100%;
}

.litem {
  font-size: 200%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active, a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code, kbd, pre, samp {
  font-family: monospace,serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Common styles for all menus */
.menu {
  line-height: 1;
  margin: 0 auto 3em;
}

.menu__list {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  display: block;
  margin: 1em 0;
}

.menu__link {
  font-size: 1.05em;
  font-weight: bold;
  display: block;
  padding: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.menu__link:hover,
.menu__link:focus {
  outline: none;
}

/* Individual styles */
/* Alonso */
.menu--alonso .menu__item {
  margin: 0;
}

.menu--alonso .menu__link {
  width: 120px;
  height: 3em;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--alonso .menu__link:hover,
.menu--alonso .menu__link:focus {
  color: #929292;
}

.menu--alonso .menu__item--current .menu__link {
  color: #d94f5c;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}

.menu--alonso .menu__line {
  position: absolute;
  top: 100%;
  left: 0;
  width: 120px;
  height: 2px;
  pointer-events: none;
  border: 1px solid #fff;
  border-width: 0 45px;
  background: #d94f5c;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
  transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}

.menu--alonso .menu__item:nth-child(1).menu__item--current ~ .menu__line {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.menu--alonso .menu__item:nth-child(2).menu__item--current ~ .menu__line {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.menu--alonso .menu__item:nth-child(3).menu__item--current ~ .menu__line {
  -webkit-transform: translate3d(200%, 0, 0);
  transform: translate3d(200%, 0, 0);
}

.menu--alonso .menu__item:nth-child(4).menu__item--current ~ .menu__line {
  -webkit-transform: translate3d(300%, 0, 0);
  transform: translate3d(300%, 0, 0);
}

.menu--alonso .menu__item:nth-child(5).menu__item--current ~ .menu__line {
  -webkit-transform: translate3d(400%, 0, 0);
  transform: translate3d(400%, 0, 0);
}

@media screen and (max-width: 55em) {
  .menu--alonso .menu__line {
    top: 3em;
  }

  .menu--alonso .menu__item:nth-child(1).menu__item--current ~ .menu__line {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .menu--alonso .menu__item:nth-child(2).menu__item--current ~ .menu__line {
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
  }

  .menu--alonso .menu__item:nth-child(3).menu__item--current ~ .menu__line {
    -webkit-transform: translate3d(0, 6em, 0);
    transform: translate3d(0, 6em, 0);
  }

  .menu--alonso .menu__item:nth-child(4).menu__item--current ~ .menu__line {
    -webkit-transform: translate3d(0, 9em, 0);
    transform: translate3d(0, 9em, 0);
  }

  .menu--alonso .menu__item:nth-child(5).menu__item--current ~ .menu__line {
    -webkit-transform: translate3d(0, 12em, 0);
    transform: translate3d(0, 12em, 0);
  }
}
/* Sebastian */
.menu--sebastian .menu__link {
  position: relative;
  display: block;
  margin: 0 1em;
  text-align: center;
  color: #929292;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.menu--sebastian .menu__link:hover,
.menu--sebastian .menu__link:focus {
  color: #fff;
}

.menu--sebastian .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--sebastian .menu__link::before,
.menu--sebastian .menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d94f5c;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.menu--sebastian .menu__link::before {
  top: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.menu--sebastian .menu__link::after {
  bottom: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.menu--sebastian .menu__item--current .menu__link::before,
.menu--sebastian .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

/* Prospero */
.menu--prospero .menu__link {
  position: relative;
  display: block;
  margin: 0 1.5em;
  padding: 0.75em 0;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--prospero .menu__link:hover,
.menu--prospero .menu__link:focus {
  color: #929292;
}

.menu--prospero .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--prospero .menu__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #d94f5c;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
}

.menu--prospero .menu__item--current .menu__link::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

/* Viola */
.menu--viola .menu__item {
  position: relative;
  margin: 0 1em;
}

.menu--viola .menu__link {
  position: relative;
  display: block;
  text-align: center;
  color: #929292;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.menu--viola .menu__link:hover,
.menu--viola .menu__link:focus {
  color: #fff;
}

.menu--viola .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--viola .menu__item::before,
.menu--viola .menu__item::after,
.menu--viola .menu__link::before,
.menu--viola .menu__link::after {
  content: '';
  position: absolute;
  background: #d94f5c;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.menu--viola .menu__item::before,
.menu--viola .menu__item::after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

.menu--viola .menu__item::before {
  left: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.menu--viola .menu__item::after {
  right: 0;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.menu--viola .menu__link::before,
.menu--viola .menu__link::after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
}

.menu--viola .menu__link::before {
  top: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.menu--viola .menu__link::after {
  bottom: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.menu--viola .menu__item--current::before,
.menu--viola .menu__item--current::after,
.menu--viola .menu__item--current .menu__link::before,
.menu--viola .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

/* Antonio */
.menu--antonio .menu__item {
  position: relative;
  margin: 1em;
}

.menu--antonio .menu__link {
  position: relative;
  display: block;
  min-width: 110px;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.menu--antonio .menu__link:hover,
.menu--antonio .menu__link:focus {
  color: #929292;
}

.menu--antonio .menu__item--current .menu__link {
  color: #d94f5c;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.menu--antonio .menu__item::before,
.menu--antonio .menu__item::after,
.menu--antonio .menu__link::before,
.menu--antonio .menu__link::after {
  content: '';
  position: absolute;
  background: #d94f5c;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.menu--antonio .menu__item::before,
.menu--antonio .menu__item::after {
  top: 0;
  width: 4px;
  height: 100%;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

.menu--antonio .menu__item::before {
  left: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.menu--antonio .menu__item::after {
  right: 0;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.menu--antonio .menu__link::before,
.menu--antonio .menu__link::after {
  left: 0;
  width: 100%;
  height: 4px;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
}

.menu--antonio .menu__link::before {
  top: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.menu--antonio .menu__link::after {
  bottom: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.menu--antonio .menu__item--current::before,
.menu--antonio .menu__item--current::after,
.menu--antonio .menu__item--current .menu__link::before,
.menu--antonio .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.menu--antonio .menu__item--current::after {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.menu--antonio .menu__item--current .menu__link::before {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.menu--antonio .menu__item--current .menu__link::after {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/* Miranda */
.menu--miranda .menu__item {
  position: relative;
  margin: 1em;
}

.menu--miranda .menu__link {
  position: relative;
  display: block;
  min-width: 120px;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--miranda .menu__link:hover,
.menu--miranda .menu__link:focus {
  color: #929292;
}

.menu--miranda .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--miranda .menu__item::before,
.menu--miranda .menu__item::after,
.menu--miranda .menu__link::before,
.menu--miranda .menu__link::after {
  content: '';
  position: absolute;
  background: #d94f5c;
  -webkit-transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
  transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}

/* left and right line */
.menu--miranda .menu__item::before,
.menu--miranda .menu__item::after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

/* left line */
.menu--miranda .menu__item::before {
  left: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

/* right line */
.menu--miranda .menu__item::after {
  right: 0;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

/* top and bottom line */
.menu--miranda .menu__link::before,
.menu--miranda .menu__link::after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
}

/* top line */
.menu--miranda .menu__link::before {
  top: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

/* bottom line */
.menu--miranda .menu__link::after {
  bottom: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

/* Delays (first reverse, then current) */
/* These rules can be simplified, but let's keep it for better readability */
/* bottom line */
.menu--miranda .menu__item .menu__link::after {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.menu--miranda .menu__item--current .menu__link::after {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

/* left line */
.menu--miranda .menu__item::before {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.menu--miranda .menu__item--current::before {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/* top line */
.menu--miranda .menu__item .menu__link::before {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.menu--miranda .menu__item--current .menu__link::before {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/* right line */
.menu--miranda .menu__item--current::after {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.menu--miranda .menu__item--current::before,
.menu--miranda .menu__item--current::after,
.menu--miranda .menu__item--current .menu__link::before,
.menu--miranda .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

/* Ariel */
.menu--ariel .menu__item {
  position: relative;
  margin: 0.5em 1em;
}

.menu--ariel .menu__link {
  line-height: 1.15;
  position: relative;
  display: block;
  min-width: 110px;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--ariel .menu__link:hover,
.menu--ariel .menu__link:focus {
  color: #929292;
}

.menu--ariel .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--ariel .menu__item::before,
.menu--ariel .menu__item::after,
.menu--ariel .menu__link::before,
.menu--ariel .menu__link::after {
  content: '';
  position: absolute;
  background: #d94f5c;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);
  transition-timing-function: cubic-bezier(0.44, 0.05, 0.55, 0.95);
}

.menu--ariel .menu__item::before,
.menu--ariel .menu__item::after {
  top: 0;
  width: 4px;
  height: 100%;
  -webkit-transform: scale3d(0.1, 0, 1);
  transform: scale3d(0.1, 0, 1);
}

/* left line */
.menu--ariel .menu__item::before {
  left: 0;
}

/* right line */
.menu--ariel .menu__item::after {
  right: 0;
}

.menu--ariel .menu__link::before,
.menu--ariel .menu__link::after {
  left: 0;
  width: 100%;
  height: 4px;
  -webkit-transform: scale3d(0, 0.1, 1);
  transform: scale3d(0, 0.1, 1);
}

/* top line */
.menu--ariel .menu__link::before {
  top: 0;
}

/* bottom line */
.menu--ariel .menu__link::after {
  bottom: 0;
}

.menu--ariel .menu__item--current::before,
.menu--ariel .menu__item--current::after,
.menu--ariel .menu__item--current .menu__link::before,
.menu--ariel .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

/* Caliban */
.menu--caliban .menu__item {
  margin: 0.5em 0;
}

.menu--caliban .menu__link {
  position: relative;
  display: block;
  width: 140px;
  margin: 0 1em;
  color: #b5b5b5;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.menu--caliban .menu__link:hover,
.menu--caliban .menu__link:focus {
  color: #929292;
}

.menu--caliban .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--caliban .menu__link::before,
.menu--caliban .menu__link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #d94f5c;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.menu--caliban .menu__link::before {
  border-width: 0 2px;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.menu--caliban .menu__link::after {
  border-width: 2px 0;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.menu--caliban .menu__item--current .menu__link::before,
.menu--caliban .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

/* Ferdinand */
.menu--ferdinand .menu__link {
  position: relative;
  display: block;
  margin: 0 1.5em;
  padding: 0.65em 0;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
}

.menu--ferdinand .menu__link:hover,
.menu--ferdinand .menu__link:focus {
  color: #929292;
}

.menu--ferdinand .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--ferdinand .menu__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d94f5c;
  -webkit-transform: scale3d(0, 5, 1);
  transform: scale3d(0, 5, 1);
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
  transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}

.menu--ferdinand .menu__item--current .menu__link::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

/* Adrian */
.menu--adrian .menu__item {
  margin: 0 1em;
}

.menu--adrian .menu__link {
  position: relative;
  overflow: hidden;
  width: 130px;
  padding: 1em 0;
  color: #b5b5b5;
}

.menu--adrian .menu__link:hover,
.menu--adrian .menu__link:focus {
  color: #929292;
}

.menu--adrian .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--adrian .menu__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300%;
  height: 50px;
  opacity: 0;
  background: url(../img/line.svg) no-repeat top left;
  -webkit-transform: translate3d(130px, 0, 0);
  transform: translate3d(130px, 0, 0);
  -webkit-transition: -webkit-transform 0s 0.3s, opacity 0.3s;
  transition: transform 0s 0.3s, opacity 0.3s;
}

.menu--adrian .menu__item--current .menu__link::before {
  opacity: 1;
  -webkit-transform: translate3d(-260px, 0, 0);
  transform: translate3d(-260px, 0, 0);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.menu--adrian .menu__helper {
  display: block;
  pointer-events: none;
}

.menu--adrian .menu__item--current .menu__helper {
  -webkit-animation: anim-adrian 0.3s forwards;
  animation: anim-adrian 0.3s forwards;
}

@-webkit-keyframes anim-adrian {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes anim-adrian {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* Francisco */
.menu--francisco .menu__item {
  margin: 0 1.5em;
}

.menu--francisco .menu__link {
  position: relative;
  overflow: hidden;
  height: 3em;
  padding: 1em 0;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--francisco .menu__link:hover,
.menu--francisco .menu__link:focus {
  color: #929292;
}

.menu--francisco .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--francisco .menu__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  opacity: 0;
  background: #d94f5c;
  -webkit-transform: translate3d(0, -3em, 0);
  transform: translate3d(0, -3em, 0);
  -webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;
  transition: transform 0s 0.3s, opacity 0.2s;
}

.menu--francisco .menu__item--current .menu__link::before {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.1s;
  transition: transform 0.3s, opacity 0.1s;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.menu--francisco .menu__helper {
  display: block;
  pointer-events: none;
}

.menu--francisco .menu__item--current .menu__helper {
  -webkit-animation: anim-francisco 0.3s forwards;
  animation: anim-francisco 0.3s forwards;
}

@-webkit-keyframes anim-francisco {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes anim-francisco {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* Trinculo */
.menu--trinculo .menu__item {
  margin: 0 1.75em;
}

.menu--trinculo .menu__link {
  position: relative;
  padding: 1em 0.1em;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--trinculo .menu__link:hover,
.menu--trinculo .menu__link:focus {
  color: #929292;
}

.menu--trinculo .menu__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  opacity: 0;
  background: #d94f5c;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition: -webkit-transform 0s 0.2s, opacity 0.2s;
  transition: transform 0s 0.2s, opacity 0.2s;
}

.menu--trinculo .menu__item--current .menu__link::before {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.2s, opacity 0.1s;
  transition: transform 0.2s, opacity 0.1s;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.menu--trinculo .menu__helper {
  display: block;
  pointer-events: none;
}

.menu--trinculo .menu__item--current .menu__helper {
  -webkit-animation: anim-trinculo 0.6s forwards;
  animation: anim-trinculo 0.6s forwards;
}

@-webkit-keyframes anim-trinculo {
  50% {
    opacity: 0;
    color: #929292;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  51% {
    opacity: 0;
    color: #d94f5c;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  75% {
    opacity: 1;
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    opacity: 1;
    color: #d94f5c;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes anim-trinculo {
  50% {
    opacity: 0;
    color: #929292;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  51% {
    opacity: 0;
    color: #d94f5c;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  75% {
    opacity: 1;
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    opacity: 1;
    color: #d94f5c;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* Stephano */
.menu--stephano .menu__item {
  position: relative;
  margin: 0 1em;
}

.menu--stephano .menu__link {
  position: relative;
  min-width: 105px;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--stephano .menu__link:hover,
.menu--stephano .menu__link:focus {
  color: #929292;
}

.menu--stephano .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--stephano .menu__item::before,
.menu--stephano .menu__link::before,
.menu--stephano .menu__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 2px;
  opacity: 0;
  background: #d94f5c;
}

/* flipped sides */
.menu--stephano .menu__link::before,
.menu--stephano .menu__link::after {
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}

.menu--stephano .menu__item--current .menu__link::before,
.menu--stephano .menu__item--current .menu__link::after {
  opacity: 1;
}

/* left flip */
.menu--stephano .menu__link::before {
  left: 0;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.menu--stephano .menu__item--current .menu__link::before {
  -webkit-transform: rotate3d(0, 0, 1, -90deg);
  transform: rotate3d(0, 0, 1, -90deg);
}

/* right flip */
.menu--stephano .menu__link::after {
  right: 0;
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}

.menu--stephano .menu__item--current .menu__link::after {
  -webkit-transform: rotate3d(0, 0, 1, 90deg);
  transform: rotate3d(0, 0, 1, 90deg);
}

/* bottom line */
.menu--stephano .menu__item::before {
  left: 0;
  width: 100%;
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}

.menu--stephano .menu__item--current::before {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.1s;
  transition: transform 0.3s, opacity 0.1s;
}

/* Iris */
.menu--iris .menu__item {
  margin: 0 1em;
}

.menu--iris .menu__link {
  position: relative;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--iris .menu__link:hover,
.menu--iris .menu__link:focus {
  color: #929292;
}

.menu--iris .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--iris .menu__link::before,
.menu--iris .menu__link::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  border: 2px solid #d94f5c;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
  transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
}

.menu--iris .menu__link::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
  -webkit-transform: translate3d(10px, 10px, 0);
  transform: translate3d(10px, 10px, 0);
}

.menu--iris .menu__link::after {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
  -webkit-transform: translate3d(-10px, -10px, 0);
  transform: translate3d(-10px, -10px, 0);
}

.menu--iris .menu__item--current .menu__link::before,
.menu--iris .menu__item--current .menu__link::after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Ceres */
.menu--ceres .menu__item {
  position: relative;
}

.menu--ceres .menu__link {
  position: relative;
  min-width: 115px;
  height: 50px;
  padding: 1em 1.5em;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--ceres .menu__link:hover,
.menu--ceres .menu__link:focus {
  color: #929292;
}

.menu--ceres .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--ceres .menu__item::before,
.menu--ceres .menu__item::after,
.menu--ceres .menu__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  background: #d94f5c;
}

.menu--ceres .menu__item::before,
.menu--ceres .menu__item::after {
  width: 2px;
  height: 100%;
  opacity: 0;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transition: -webkit-transform 0s 0.1s, opacity 0.1s;
  transition: transform 0s 0.1s, opacity 0.1s;
}

.menu--ceres .menu__item::before {
  left: 0;
}

.menu--ceres .menu__item::after {
  right: 0;
}

.menu--ceres .menu__item--current::before,
.menu--ceres .menu__item--current::after {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

/* bottom line */
.menu--ceres .menu__link::after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.menu--ceres .menu__item--current .menu__link::after {
  -webkit-transform: translate3d(0, -48px, 0);
  transform: translate3d(0, -48px, 0);
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

/* Juno */
.menu--juno .menu__item {
  position: relative;
  overflow: hidden;
  margin: 0.5em;
}

.menu--juno .menu__link {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--juno .menu__link:hover,
.menu--juno .menu__link:focus {
  color: #929292;
}

.menu--juno .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--juno .menu__item::before,
.menu--juno .menu__item::after,
.menu--juno .menu__link::before,
.menu--juno .menu__link::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background: #d94f5c;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* top and bottom line */
.menu--juno .menu__item::before,
.menu--juno .menu__item::after {
  left: 0;
  width: 100%;
  height: 2px;
}

.menu--juno .menu__item::before {
  top: 0;
  -webkit-transform: translate3d(0, 15px, 0);
  transform: translate3d(0, 15px, 0);
}

.menu--juno .menu__item::after {
  bottom: 0;
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
}

/* left and right line */
.menu--juno .menu__link::before,
.menu--juno .menu__link::after {
  top: 0;
  width: 2px;
  height: 100%;
}

.menu--juno .menu__link::before {
  left: 0;
  -webkit-transform: translate3d(15px, 0, 0);
  transform: translate3d(15px, 0, 0);
}

.menu--juno .menu__link::after {
  right: 0;
  -webkit-transform: translate3d(-15px, 0, 0);
  transform: translate3d(-15px, 0, 0);
}

.menu--juno .menu__item--current::before,
.menu--juno .menu__item--current::after,
.menu--juno .menu__item--current .menu__link::before,
.menu--juno .menu__item--current .menu__link::after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Maria */
.menu--maria .menu__item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin: 0 1.25em;
  text-align: center;
}

.menu--maria .menu__item::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 140%;
  height: 4px;
  background: #d94f5c;
  -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0, 1, 1);
  transform: rotate3d(0, 0, 1, -45deg) scale3d(0, 1, 1);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
}

.menu--maria .menu__item.menu__item--current::before {
  -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
  transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
}

.menu--maria .menu__link {
  position: relative;
  color: #929292;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.menu--maria .menu__link:hover,
.menu--maria .menu__link:focus {
  color: #d94f5c;
}

.menu--maria .menu__item.menu__item--current .menu__link {
  color: #333;
}

/* Valentine */
.menu--valentine .menu__item {
  position: relative;
  margin: 0 1em;
}

.menu--valentine .menu__link {
  position: relative;
  display: block;
  min-width: 105px;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--valentine .menu__link:hover,
.menu--valentine .menu__link:focus {
  color: #929292;
}

.menu--valentine .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--valentine .menu__item::before,
.menu--valentine .menu__item::after,
.menu--valentine .menu__link::before,
.menu--valentine .menu__link::after {
  content: '';
  position: absolute;
  background: #d94f5c;
  -webkit-transform-origin: 350% 350%;
  transform-origin: 350% 350%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.menu--valentine .menu__item::before,
.menu--valentine .menu__item::after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

/* left line */
.menu--valentine .menu__item::before {
  left: 0;
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

/* right line */
.menu--valentine .menu__item::after {
  right: 0;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.menu--valentine .menu__link::before,
.menu--valentine .menu__link::after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
}

/* top line */
.menu--valentine .menu__link::before {
  top: 0;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/* bottom line */
.menu--valentine .menu__link::after {
  bottom: 0;
}

.menu--valentine .menu__item--current::before,
.menu--valentine .menu__item--current::after,
.menu--valentine .menu__item--current .menu__link::before,
.menu--valentine .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

/* Puck (by @eden_sg) */
.menu--puck .menu__link {
  position: relative;
  display: block;
  margin: 0 1em;
  text-align: center;
  color: #929292;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.menu--puck .menu__link:hover,
.menu--puck .menu__link:focus {
  color: #828282;
}

.menu--puck .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--puck .menu__link::before,
.menu--puck .menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 7px;
  background: #d94f5c;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.menu--puck .menu__link::before {
  bottom: -5px;
  height: 2px;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.menu--puck .menu__link::after {
  bottom: 0;
}

.menu--puck .menu__item--current .menu__link::before,
.menu--puck .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-timing-function: cubic-bezier(0, 1.54, 0.34, 1);
  transition-timing-function: cubic-bezier(0, 1.54, 0.34, 1);
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

/* Titania (by @rileyjshaw) */
.menu--titania .menu__item {
  margin: 0;
}

.menu--titania .menu__link {
  width: 120px;
  height: 3em;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.3s 0.2s;
  transition: color 0.3s 0.2s;
}

.menu--titania .menu__link:hover,
.menu--titania .menu__link:focus {
  color: #929292;
}

.menu--titania .menu__item--current .menu__link {
  color: #d94f5c;
  -webkit-transition: color 0.7s 0.2s;
  transition: color 0.7s 0.2s;
}

.menu--titania .menu__lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  border: 2px solid #d94f5c;
  border-width: 2px 0;
  -webkit-transition: -webkit-transform 0.5s 0.2s;
  transition: transform 0.5s 0.2s;
  -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
  transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}

/* vertical lines */
.menu--titania .menu__lines::before,
.menu--titania .menu__lines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #d94f5c;
  border-width: 0 2px;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

/* animates out at transition start */
.menu--titania .menu__lines::before {
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

/* animates back in at transition end */
.menu--titania .menu__lines::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.2s ease 0.7s;
  transition: transform 0.2s ease 0.7s;
}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::before,
.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {
  -webkit-transition: -webkit-transform 0s;
  transition: transform 0s;
}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

.menu--titania .menu__item:nth-child(1).menu__item--current ~ .menu__lines {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.menu--titania .menu__item:nth-child(2).menu__item--current ~ .menu__lines {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.menu--titania .menu__item:nth-child(3).menu__item--current ~ .menu__lines {
  -webkit-transform: translate3d(200%, 0, 0);
  transform: translate3d(200%, 0, 0);
}

.menu--titania .menu__item:nth-child(4).menu__item--current ~ .menu__lines {
  -webkit-transform: translate3d(300%, 0, 0);
  transform: translate3d(300%, 0, 0);
}

.menu--titania .menu__item:nth-child(5).menu__item--current ~ .menu__lines {
  -webkit-transform: translate3d(400%, 0, 0);
  transform: translate3d(400%, 0, 0);
}

@media screen and (max-width: 55em) {
  .menu--titania .menu__lines {
    height: 20%;
    border-width: 0 2px;
  }

  /* horizontal lines */
  .menu--titania .menu__lines::before,
  .menu--titania .menu__lines::after {
    border-width: 2px 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }

  .menu--titania .menu__lines::before {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }

  .menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }

  .menu--titania .menu__item:nth-child(1).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .menu--titania .menu__item:nth-child(2).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  .menu--titania .menu__item:nth-child(3).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }

  .menu--titania .menu__item:nth-child(4).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(0, 300%, 0);
    transform: translate3d(0, 300%, 0);
  }

  .menu--titania .menu__item:nth-child(5).menu__item--current ~ .menu__lines {
    -webkit-transform: translate3d(0, 400%, 0);
    transform: translate3d(0, 400%, 0);
  }
}
/* bagot (by @RplusTW) */
.menu--bagot .menu__item {
  position: relative;
}

.menu--bagot .menu__link {
  position: relative;
  min-width: 7rem;
  height: 50px;
  padding: 1em 1.5em;
  text-align: center;
  opacity: 0.7;
  color: #929292;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.menu--bagot .menu__item::before,
.menu--bagot .menu__item::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #d94f5c;
  border-style: solid;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(1, 0.6, 0, 1);
  transition: transform 0.2s cubic-bezier(1, 0.6, 0, 1);
}

.menu--bagot .menu__item::before {
  border-width: 2px 0 0;
  -webkit-transform: translateY(calc(100% - 2px));
  transform: translateY(calc(100% - 2px));
}

.menu--bagot .menu__item::after {
  right: -1px;
  left: -1px;
  /* for border-collapse */
  border-width: 0 2px;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.menu--bagot .menu__item.menu__item--current::before {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
  transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
}

.menu--bagot .menu__item.menu__item--current::after {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
  transition-timing-function: cubic-bezier(1, 0.6, 0, 1.22);
}

.menu--bagot .menu__item--current .menu__link,
.menu--bagot .menu__link:hover,
.menu--bagot .menu__link:focus {
  opacity: 1;
}

.menu--bagot .menu__item--current .menu__link {
  color: #d94f5c;
}

@media screen and (max-width: 55em) {
  .menu--bagot .menu__item {
    margin: 0;
  }

  .menu--bagot .menu__item::before {
    border-width: 0 2px 0 0;
    -webkit-transform: translateX(calc(2px - 100%));
    transform: translateX(calc(2px - 100%));
  }

  .menu--bagot .menu__item::after {
    top: -1px;
    right: 0;
    bottom: -1px;
    left: 0;
    border-width: 2px 0;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
  }
}
/* Shylock (by @benhanks040888) */
.menu--shylock .menu__link {
  position: relative;
  margin: 0 1em;
  padding-right: 0;
  padding-left: 0;
  color: #b5b5b5;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.menu--shylock .menu__item--current .menu__link,
.menu--shylock .menu__item--current .menu__link:hover,
.menu--shylock .menu__item--current .menu__link:focus {
  color: #d94f5c;
}

.menu--shylock .menu__item--current .menu__link::after,
.menu--shylock .menu__item--current .menu__link::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.menu--shylock .menu__item--current .menu__link::before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.menu--shylock .menu__link:hover,
.menu--shylock .menu__link:focus {
  color: #b5b5b5;
}

.menu--shylock .menu__link:hover::before,
.menu--shylock .menu__link:focus::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.menu--shylock .menu__link::before,
.menu--shylock .menu__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: center left;
  transform-origin: center left;
  -webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu--shylock .menu__link::before {
  background: #b5b5b5;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.menu--shylock .menu__link::after {
  background: #d94f5c;
}

/* Cordelia (by @vivien_le_neez) */
.menu--cordelia .menu__item {
  position: relative;
}

.menu--cordelia .menu__link {
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.menu--cordelia .menu__item--current .menu__link {
  color: #d94f5c;
  -webkit-transition: color 0.6s;
  transition: color 0.6s;
}

.menu--cordelia .menu__item::before,
.menu--cordelia .menu__item::after {
  content: '';
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 2px;
  background: #d94f5c;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-animation-fill-mode: initial;
  animation-fill-mode: initial;
}

.menu--cordelia .menu__item::before {
  top: 0;
  right: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.menu--cordelia .menu__item::after {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.menu--cordelia .menu__item--current::before {
  -webkit-animation: anim-cordelia-top 0.6s linear both;
  animation: anim-cordelia-top 0.6s linear both;
}

.menu--cordelia .menu__item--current::after {
  -webkit-animation: anim-cordelia-bottom 0.6s linear both;
  animation: anim-cordelia-bottom 0.6s linear both;
}

@-webkit-keyframes anim-cordelia-top {
  0% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
  10% {
    -webkit-transform: scale3d(0.05, 1, 1);
    transform: scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
    transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes anim-cordelia-top {
  0% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
  10% {
    -webkit-transform: scale3d(0.05, 1, 1);
    transform: scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
    transform: translate3d(-95%, 0, 0) scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@-webkit-keyframes anim-cordelia-bottom {
  0% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
  10% {
    -webkit-transform: scale3d(0.05, 1, 1);
    transform: scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
    transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes anim-cordelia-bottom {
  0% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
  10% {
    -webkit-transform: scale3d(0.05, 1, 1);
    transform: scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
    transform: translate3d(95%, 0, 0) scale3d(0.05, 1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
/* Horatio Styles */
.menu--horatio .menu__item {
  margin-left: 3px;
  margin-right: 3px;
  color: #4e3c3e;
}

.menu--horatio .menu__item {
  position: relative;
  -webkit-transition: color .25s;
  transition: color .25s;
}

.menu--horatio .menu__item a {
  position: relative;
  color: inherit;
}

.menu--horatio .menu__item--current {
  color: #b5b5b5;
}

.menu--horatio .menu__item:hover {
  color: #d94f5c;
}

.menu--horatio .menu__item::before,
.menu--horatio .menu__item::after,
.menu--horatio .menu__item a::before,
.menu--horatio .menu__item a::after {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid currentColor;
}

.menu--horatio .menu__item::before {
  border-width: 0 0 0 2px;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

.menu--horatio .menu__item::after {
  border-width: 0 2px 0 0;
  -webkit-transform-origin: right top;
  transform-origin: right top;
}

.menu--horatio .menu__item a::before,
.menu--horatio .menu__item a::after {
  z-index: 2;
}

.menu--horatio .menu__item a::before {
  border-width: 2px 0 0;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.menu--horatio .menu__item a::after {
  border-width: 0 0 2px;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

.menu--horatio .menu__item--current::before,
.menu--horatio .menu__item--current::after,
.menu--horatio .menu__item:hover::before,
.menu--horatio .menu__item:hover::after,
.menu--horatio .menu__item--current a::before,
.menu--horatio .menu__item--current a::after,
.menu--horatio .menu__item:hover a::before,
.menu--horatio .menu__item:hover a::after {
  content: '';
}

.menu--horatio .menu__item:not(.menu__item--current):hover::before,
.menu--horatio .menu__item:not(.menu__item--current):hover::after,
.menu--horatio .menu__item:not(.menu__item--current):hover a::before,
.menu--horatio .menu__item:not(.menu__item--current):hover a::after {
  -webkit-animation: horatio-anim .6s ease-in-out;
  animation: horatio-anim .6s ease-in-out;
}

.menu--horatio .menu__item:not(.menu__item--current):hover::before {
  -webkit-animation-delay: -.45s;
  animation-delay: -.45s;
}

.menu--horatio .menu__item:not(.menu__item--current):hover a::before {
  -webkit-animation-delay: -.3s;
  animation-delay: -.3s;
}

.menu--horatio .menu__item:not(.menu__item--current):hover::after {
  -webkit-animation-delay: -.15s;
  animation-delay: -.15s;
}

.menu--horatio .menu__item:not(.menu__item--current):hover a::after {
  -webkit-animation-delay: 0;
  animation-delay: 0;
}

@-webkit-keyframes horatio-anim {
  0%, 33% {
    opacity: 0;
    -webkit-transform: rotate(45deg) scale(1.5);
    transform: rotate(45deg) scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes horatio-anim {
  0%, 33% {
    opacity: 0;
    -webkit-transform: rotate(45deg) scale(1.5);
    transform: rotate(45deg) scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/* End: Horatio Styles */
/* Luce (by @ryjohnson) */
.menu--luce .menu__item {
  position: relative;
  margin: 1em;
}

.menu--luce .menu__link {
  position: relative;
  display: block;
  min-width: 120px;
  text-align: center;
  color: #b5b5b5;
  -webkit-transition: color 0.6s;
  transition: color 0.6s;
}

.menu--luce .menu__link:hover,
.menu--luce .menu__link:focus {
  color: #929292;
}

.menu--luce .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--luce .menu__item::before,
.menu--luce .menu__item::after,
.menu--luce .menu__link::before,
.menu--luce .menu__link::after {
  content: '';
  position: absolute;
  background: #b5b5b5;
  -webkit-transition: -webkit-transform 0.25s, background .75s;
  transition: transform 0.25s, background .75s;
  -webkit-transition-timing-function: cubic-bezier(1, 0.53, 0.79, 0.68);
  transition-timing-function: cubic-bezier(1, 0.53, 0.79, 0.68);
}

/* left and right line */
.menu--luce .menu__item::before,
.menu--luce .menu__item::after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

/* left line */
.menu--luce .menu__item::before {
  left: 0;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

/* right line */
.menu--luce .menu__item::after {
  right: 0;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

/* top and bottom line */
.menu--luce .menu__link::before,
.menu--luce .menu__link::after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
}

/* top line */
.menu--luce .menu__link::before {
  top: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

/* bottom line */
.menu--luce .menu__link::after {
  bottom: 0;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

/* Delays (first reverse, then current) */
/* These rules can be simplified, but let's keep it for better readability */
/* bottom line */
.menu--luce .menu__item .menu__link::after {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.menu--luce .menu__item--current .menu__link::after {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

/* left line */
.menu--luce .menu__item::before {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.menu--luce .menu__item--current::before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

/* top line */
.menu--luce .menu__item .menu__link::before {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.menu--luce .menu__item--current .menu__link::before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

/* right line */
.menu--luce .menu__item--current::after {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.menu--luce .menu__item--current::before,
.menu--luce .menu__item--current::after,
.menu--luce .menu__item--current .menu__link::before,
.menu--luce .menu__item--current .menu__link::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  background: #d94f5c;
}

/* End: Luce Styles */
/* Juliet Styles */
.menu--juliet .menu__item {
  position: relative;
  -webkit-transition: color .25s;
  transition: color .25s;
}

.menu--juliet .menu__item::before,
.menu--juliet .menu__item::after,
.menu--juliet .menu__item--current::before,
.menu--juliet .menu__item--current::after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border: solid transparent;
  content: '';
  pointer-events: none;
}

.menu--juliet .menu__item::before,
.menu--juliet .menu__item::after {
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: left left;
  transform-origin: left left;
  -webkit-transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu--juliet .menu__item--current::before,
.menu--juliet .menu__item--current::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu--juliet .menu__item:hover::before,
.menu--juliet .menu__item:hover::after {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu--juliet .menu__item::before {
  top: 95%;
  margin-left: -9px;
  border-width: 10px;
  border-top-color: #b5b5b5;
}

.menu--juliet .menu__item--current::before {
  margin-left: -9px;
  border-width: 10px;
  border-top-color: #d94f5c;
}

.menu--juliet .menu__item::after,
.menu--juliet .menu__item--current::after {
  top: 94%;
  margin-left: -5px;
  border-width: 6px;
  border-top-color: #2a282b;
}

.menu--juliet .menu__link {
  position: relative;
  margin: 0 1em;
  padding-right: 0;
  padding-left: 0;
  color: #b5b5b5;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.menu--juliet .menu__item--current .menu__link,
.menu--juliet .menu__item--current .menu__link:hover,
.menu--juliet .menu__item--current .menu__link:focus {
  color: #d94f5c;
}

.menu--juliet .menu__item--current .menu__link::after,
.menu--juliet .menu__item--current .menu__link::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.menu--juliet .menu__item--current .menu__link::before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.menu--juliet .menu__link:hover,
.menu--juliet .menu__link:focus {
  color: #b5b5b5;
}

.menu--juliet .menu__item:hover .menu__link::before,
.menu--juliet .menu__item:focus .menu__link::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.menu--juliet .menu__link::before,
.menu--juliet .menu__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: center left;
  transform-origin: center left;
  -webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu--juliet .menu__link::before {
  background: #b5b5b5;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.menu--juliet .menu__link::after {
  background: #d94f5c;
}

/* End: Juliet Styles */
/* Invulner Styles */
.menu--invulner .menu__link {
  position: relative;
  -webkit-transition: color .4s ease-in;
  transition: color .4s ease-in;
}

.menu--invulner .menu__item--current .menu__link {
  color: #d94f5c;
}

.menu--invulner .menu__link::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 100%;
  border: 2px solid #d94f5c;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.27, 0.4, 1.52);
  transition: all 0.5s cubic-bezier(0.52, 0.27, 0.4, 1.52);
  opacity: 0;
}

.menu--invulner .menu__item--current .menu__link::before {
  left: 0;
  top: 0;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  opacity: 1;
}

/* End: Invulner Styles */
/* tantalid Styles */
.menu--tantalid .menu__link {
  color: #929292;
  position: relative;
  overflow: hidden;
  -webkit-transition: color .4s ease-in;
  transition: color .4s ease-in;
}

.menu--tantalid .menu__link:hover {
  color: #fff;
}

.menu--tantalid .menu__item--current .menu__link {
  color: #d94f5c;
  overflow: visible;
}

.menu--tantalid .menu__link::before,
.menu--tantalid .menu__link::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0;
  border: 2px solid #d94f5c;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.3s, width 0.4s;
  transition: transform .4s, opacity 0.3s, width .4s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.menu--tantalid .menu__link::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
  -webkit-transform: translate3d(-150%, 70%, 0) rotate(-30deg);
  transform: translate3d(-150%, 70%, 0) rotate(-30deg);
}

.menu--tantalid .menu__link::after {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
  -webkit-transform: translate3d(150%, -70%, 0) rotate(-30deg);
  transform: translate3d(150%, -70%, 0) rotate(-30deg);
}

.menu--tantalid .menu__item--current .menu__link::before,
.menu--tantalid .menu__item--current .menu__link::after {
  width: 80%;
  height: 80%;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
  transform: translate3d(0, 0, 0) rotate(0deg);
}

/* End: tantalid Styles */
/* YOUR STYLE (Shakespeare character name) see README.md for details */
/* (Please copy these two lines and insert after your custom styles) */
/* Name (by @you) */
/* [Your styles here]*/
/* End: Name Styles */
/* Media queries */
/* Stack items for smaller screens */
@media screen and (max-width: 55em) {
  .menu__list {
    display: block;
    margin: 0 auto;
  }
}


/*Downloaded from https://www.codeseek.co/shinobinya/a-pen-by-nyaho-rmmMJN */
//#D94F5C

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      
      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity")==0){             
          $(this).removeClass("fadeOut").addClass("animated fadeIn");}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).removeClass("fadeIn").addClass("fadeOut");}
      }
    });
   $(".toStretch").each(function(){
     var objectBottom = $(this).offset().top + $(this).outerHeight();
     if (objectBottom < windowBottom) { 
        $(this).addClass("stretchNow");  
     }
   }) 
  }).scroll(); //invoke scroll-handler on page-load
});
  







( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );


















/*!
 * clipboard.js v1.5.5
 * https://zenorocha.github.io/clipboard.js
 *
 * Licensed MIT © Zeno Rocha
 */
!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}}(function(){var t,e,n;return function t(e,n,r){function o(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var l=n[a]={exports:{}};e[a][0].call(l.exports,function(t){var n=e[a][1][t];return o(n?n:t)},l,l.exports,t,e,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(t,e,n){var r=t("matches-selector");e.exports=function(t,e,n){for(var o=n?t:t.parentNode;o&&o!==document;){if(r(o,e))return o;o=o.parentNode}}},{"matches-selector":2}],2:[function(t,e,n){function r(t,e){if(i)return i.call(t,e);for(var n=t.parentNode.querySelectorAll(e),r=0;r<n.length;++r)if(n[r]==t)return!0;return!1}var o=Element.prototype,i=o.matchesSelector||o.webkitMatchesSelector||o.mozMatchesSelector||o.msMatchesSelector||o.oMatchesSelector;e.exports=r},{}],3:[function(t,e,n){function r(t,e,n,r){var i=o.apply(this,arguments);return t.addEventListener(n,i),{destroy:function(){t.removeEventListener(n,i)}}}function o(t,e,n,r){return function(n){n.delegateTarget=i(n.target,e,!0),n.delegateTarget&&r.call(t,n)}}var i=t("closest");e.exports=r},{closest:1}],4:[function(t,e,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.function=function(t){var e=Object.prototype.toString.call(t);return"[object Function]"===e}},{}],5:[function(t,e,n){function r(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!c.string(e))throw new TypeError("Second argument must be a String");if(!c.function(n))throw new TypeError("Third argument must be a Function");if(c.node(t))return o(t,e,n);if(c.nodeList(t))return i(t,e,n);if(c.string(t))return a(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function o(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}function i(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}function a(t,e,n){return s(document.body,t,e,n)}var c=t("./is"),s=t("delegate");e.exports=r},{"./is":4,delegate:3}],6:[function(t,e,n){function r(t){var e;if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName)t.focus(),t.setSelectionRange(0,t.value.length),e=t.value;else{t.hasAttribute("contenteditable")&&t.focus();var n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),n.removeAllRanges(),n.addRange(r),e=n.toString()}return e}e.exports=r},{}],7:[function(t,e,n){function r(){}r.prototype={on:function(t,e,n){var r=this.e||(this.e={});return(r[t]||(r[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function r(){o.off(t,r),e.apply(n,arguments)}var o=this;return r._=e,this.on(t,r,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),r=0,o=n.length;for(r;o>r;r++)n[r].fn.apply(n[r].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),r=n[t],o=[];if(r&&e)for(var i=0,a=r.length;a>i;i++)r[i].fn!==e&&r[i].fn._!==e&&o.push(r[i]);return o.length?n[t]=o:delete n[t],this}},e.exports=r},{}],8:[function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}n.__esModule=!0;var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),a=t("select"),c=r(a),s=function(){function t(e){o(this,t),this.resolveOptions(e),this.initSelection()}return t.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action=e.action,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""},t.prototype.initSelection=function t(){if(this.text&&this.target)throw new Error('Multiple attributes declared, use either "target" or "text"');if(this.text)this.selectFake();else{if(!this.target)throw new Error('Missing required attributes, use either "target" or "text"');this.selectTarget()}},t.prototype.selectFake=function t(){var e=this;this.removeFake(),this.fakeHandler=document.body.addEventListener("click",function(){return e.removeFake()}),this.fakeElem=document.createElement("textarea"),this.fakeElem.style.position="absolute",this.fakeElem.style.left="-9999px",this.fakeElem.style.top=(window.pageYOffset||document.documentElement.scrollTop)+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=c.default(this.fakeElem),this.copyText()},t.prototype.removeFake=function t(){this.fakeHandler&&(document.body.removeEventListener("click"),this.fakeHandler=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)},t.prototype.selectTarget=function t(){this.selectedText=c.default(this.target),this.copyText()},t.prototype.copyText=function t(){var e=void 0;try{e=document.execCommand(this.action)}catch(n){e=!1}this.handleResult(e)},t.prototype.handleResult=function t(e){e?this.emitter.emit("success",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)}):this.emitter.emit("error",{action:this.action,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})},t.prototype.clearSelection=function t(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()},t.prototype.destroy=function t(){this.removeFake()},i(t,[{key:"action",set:function t(){var e=arguments.length<=0||void 0===arguments[0]?"copy":arguments[0];if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function t(){return this._action}},{key:"target",set:function t(e){if(void 0!==e){if(!e||"object"!=typeof e||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');this._target=e}},get:function t(){return this._target}}]),t}();n.default=s,e.exports=n.default},{select:6}],9:[function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}n.__esModule=!0;var c=t("./clipboard-action"),s=r(c),u=t("tiny-emitter"),l=r(u),f=t("good-listener"),d=r(f),h=function(t){function e(n,r){o(this,e),t.call(this),this.resolveOptions(r),this.listenClick(n)}return i(e,t),e.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText},e.prototype.listenClick=function t(e){var n=this;this.listener=d.default(e,"click",function(t){return n.onClick(t)})},e.prototype.onClick=function t(e){var n=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new s.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})},e.prototype.defaultAction=function t(e){return a("action",e)},e.prototype.defaultTarget=function t(e){var n=a("target",e);return n?document.querySelector(n):void 0},e.prototype.defaultText=function t(e){return a("text",e)},e.prototype.destroy=function t(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)},e}(l.default);n.default=h,e.exports=n.default},{"./clipboard-action":8,"good-listener":5,"tiny-emitter":7}]},{},[9])(9)});































(function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){var u={duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},r="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),y,f={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<
Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||f.svg(a)},num:function(a){return!isNaN(parseInt(a))},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},nul:function(a){return"null"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},
col:function(a){return f.hex(a)||f.rgb(a)||f.hsl(a)}},D=function(){var a={},b={Sine:function(a){return 1-Math.cos(a*Math.PI/2)},Circ:function(a){return 1-Math.sqrt(1-a*a)},Elastic:function(a,b){if(0===a||1===a)return a;var d=1-Math.min(b,998)/1E3,g=a/1-1;return-(Math.pow(2,10*g)*Math.sin(2*(g-d/(2*Math.PI)*Math.asin(1))*Math.PI/d))},Back:function(a){return a*a*(3*a-2)},Bounce:function(a){for(var b,d=4;a<((b=Math.pow(2,--d))-1)/11;);return 1/Math.pow(4,3-d)-7.5625*Math.pow((3*b-2)/22-a,2)}};["Quad",
"Cubic","Quart","Quint","Expo"].forEach(function(a,e){b[a]=function(a){return Math.pow(a,e+2)}});Object.keys(b).forEach(function(c){var e=b[c];a["easeIn"+c]=e;a["easeOut"+c]=function(a,b){return 1-e(1-a,b)};a["easeInOut"+c]=function(a,b){return.5>a?e(2*a,b)/2:1-e(-2*a+2,b)/2};a["easeOutIn"+c]=function(a,b){return.5>a?(1-e(1-2*a,b))/2:(e(2*a-1,b)+1)/2}});a.linear=function(a){return a};return a}(),z=function(a){return f.str(a)?a:a+""},E=function(a){return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()},
F=function(a){if(f.col(a))return!1;try{return document.querySelectorAll(a)}catch(b){return!1}},A=function(a){return a.reduce(function(a,c){return a.concat(f.arr(c)?A(c):c)},[])},t=function(a){if(f.arr(a))return a;f.str(a)&&(a=F(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]},G=function(a,b){return a.some(function(a){return a===b})},R=function(a,b){var c={};a.forEach(function(a){var d=JSON.stringify(b.map(function(b){return a[b]}));c[d]=c[d]||[];c[d].push(a)});
return Object.keys(c).map(function(a){return c[a]})},H=function(a){return a.filter(function(a,c,e){return e.indexOf(a)===c})},B=function(a){var b={},c;for(c in a)b[c]=a[c];return b},v=function(a,b){for(var c in b)a[c]=f.und(a[c])?b[c]:a[c];return a},S=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,m){return b+b+c+c+m+m});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"},
T=function(a){a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);var b=parseInt(a[1])/360,c=parseInt(a[2])/100,e=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=e=b=e;else var d=.5>e?e*(1+c):e+c-e*c,g=2*e-d,c=a(g,d,b+1/3),e=a(g,d,b),b=a(g,d,b-1/3);return"rgb("+255*c+","+255*e+","+255*b+")"},p=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},I=function(a,b,c){return p(b)?
b:-1<a.indexOf("translate")?p(c)?b+p(c):b+"px":-1<a.indexOf("rotate")||-1<a.indexOf("skew")?b+"deg":b},w=function(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(E(b))||"0"},U=function(a,b){var c=-1<b.indexOf("scale")?1:0,e=a.style.transform;if(!e)return c;for(var d=/(\w+)\((.+?)\)/g,g=[],m=[],f=[];g=d.exec(e);)m.push(g[1]),f.push(g[2]);e=f.filter(function(a,c){return m[c]===b});return e.length?e[0]:c},J=function(a,b){if(f.dom(a)&&G(r,b))return"transform";if(f.dom(a)&&(a.getAttribute(b)||
f.svg(a)&&a[b]))return"attribute";if(f.dom(a)&&"transform"!==b&&w(a,b))return"css";if(!f.nul(a[b])&&!f.und(a[b]))return"object"},K=function(a,b){switch(J(a,b)){case "transform":return U(a,b);case "css":return w(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0},L=function(a,b,c){if(f.col(b))return b=f.rgb(b)?b:f.hex(b)?S(b):f.hsl(b)?T(b):void 0,b;if(p(b))return b;a=p(a.to)?p(a.to):p(a.from);!a&&c&&(a=p(c));return a?b+a:b},M=function(a){var b=/-?\d*\.?\d+/g;return{original:a,numbers:z(a).match(b)?
z(a).match(b).map(Number):[0],strings:z(a).split(b)}},V=function(a,b,c){return b.reduce(function(b,d,g){d=d?d:c[g-1];return b+a[g-1]+d})},W=function(a){a=a?A(f.arr(a)?a.map(t):t(a)):[];return a.map(function(a,c){return{target:a,id:c}})},N=function(a,b,c,e){"transform"===c?(c=a+"("+I(a,b.from,b.to)+")",b=a+"("+I(a,b.to)+")"):(a="css"===c?w(e,a):void 0,c=L(b,b.from,a),b=L(b,b.to,a));return{from:M(c),to:M(b)}},X=function(a,b){var c=[];a.forEach(function(e,d){var g=e.target;return b.forEach(function(b){var l=
J(g,b.name);if(l){var q;q=b.name;var h=b.value,h=t(f.fnc(h)?h(g,d):h);q={from:1<h.length?h[0]:K(g,q),to:1<h.length?h[1]:h[0]};h=B(b);h.animatables=e;h.type=l;h.from=N(b.name,q,h.type,g).from;h.to=N(b.name,q,h.type,g).to;h.round=f.col(q.from)||h.round?1:0;h.delay=(f.fnc(h.delay)?h.delay(g,d,a.length):h.delay)/k.speed;h.duration=(f.fnc(h.duration)?h.duration(g,d,a.length):h.duration)/k.speed;c.push(h)}})});return c},Y=function(a,b){var c=X(a,b);return R(c,["name","from","to","delay","duration"]).map(function(a){var b=
B(a[0]);b.animatables=a.map(function(a){return a.animatables});b.totalDuration=b.delay+b.duration;return b})},C=function(a,b){a.tweens.forEach(function(c){var e=c.from,d=a.duration-(c.delay+c.duration);c.from=c.to;c.to=e;b&&(c.delay=d)});a.reversed=a.reversed?!1:!0},Z=function(a){if(a.length)return Math.max.apply(Math,a.map(function(a){return a.totalDuration}))},O=function(a){var b=[],c=[];a.tweens.forEach(function(a){if("css"===a.type||"transform"===a.type)b.push("css"===a.type?E(a.name):"transform"),
a.animatables.forEach(function(a){c.push(a.target)})});return{properties:H(b).join(", "),elements:H(c)}},aa=function(a){var b=O(a);b.elements.forEach(function(a){a.style.willChange=b.properties})},ba=function(a){O(a).elements.forEach(function(a){a.style.removeProperty("will-change")})},ca=function(a,b){var c=a.path,e=a.value*b,d=function(d){d=d||0;return c.getPointAtLength(1<b?a.value+d:e+d)},g=d(),f=d(-1),d=d(1);switch(a.name){case "translateX":return g.x;case "translateY":return g.y;case "rotate":return 180*
Math.atan2(d.y-f.y,d.x-f.x)/Math.PI}},da=function(a,b){var c=Math.min(Math.max(b-a.delay,0),a.duration)/a.duration,e=a.to.numbers.map(function(b,e){var f=a.from.numbers[e],l=D[a.easing](c,a.elasticity),f=a.path?ca(a,l):f+l*(b-f);return f=a.round?Math.round(f*a.round)/a.round:f});return V(e,a.to.strings,a.from.strings)},P=function(a,b){var c;a.currentTime=b;a.progress=b/a.duration*100;for(var e=0;e<a.tweens.length;e++){var d=a.tweens[e];d.currentValue=da(d,b);for(var f=d.currentValue,m=0;m<d.animatables.length;m++){var l=
d.animatables[m],k=l.id,l=l.target,h=d.name;switch(d.type){case "css":l.style[h]=f;break;case "attribute":l.setAttribute(h,f);break;case "object":l[h]=f;break;case "transform":c||(c={}),c[k]||(c[k]=[]),c[k].push(f)}}}if(c)for(e in y||(y=(w(document.body,"transform")?"":"-webkit-")+"transform"),c)a.animatables[e].target.style[y]=c[e].join(" ");a.settings.update&&a.settings.update(a)},Q=function(a){var b={};b.animatables=W(a.targets);b.settings=v(a,u);var c=b.settings,e=[],d;for(d in a)if(!u.hasOwnProperty(d)&&
"targets"!==d){var g=f.obj(a[d])?B(a[d]):{value:a[d]};g.name=d;e.push(v(g,c))}b.properties=e;b.tweens=Y(b.animatables,b.properties);b.duration=Z(b.tweens)||a.duration;b.currentTime=0;b.progress=0;b.ended=!1;return b},n=[],x=0,ea=function(){var a=function(){x=requestAnimationFrame(b)},b=function(b){if(n.length){for(var e=0;e<n.length;e++)n[e].tick(b);a()}else cancelAnimationFrame(x),x=0};return a}(),k=function(a){var b=Q(a),c={};b.tick=function(a){b.ended=!1;c.start||(c.start=a);c.current=Math.min(Math.max(c.last+
a-c.start,0),b.duration);P(b,c.current);var d=b.settings;d.begin&&c.current>=d.delay&&(d.begin(b),d.begin=void 0);c.current>=b.duration&&(d.loop?(c.start=a,"alternate"===d.direction&&C(b,!0),f.num(d.loop)&&d.loop--):(b.ended=!0,b.pause(),d.complete&&d.complete(b)),c.last=0)};b.seek=function(a){P(b,a/100*b.duration)};b.pause=function(){ba(b);var a=n.indexOf(b);-1<a&&n.splice(a,1)};b.play=function(a){b.pause();a&&(b=v(Q(v(a,b.settings)),b));c.start=0;c.last=b.ended?0:b.currentTime;a=b.settings;"reverse"===
a.direction&&C(b);"alternate"!==a.direction||a.loop||(a.loop=1);aa(b);n.push(b);x||ea()};b.restart=function(){b.reversed&&C(b);b.pause();b.seek(0);b.play()};b.settings.autoplay&&b.play();return b};k.version="1.1.1";k.speed=1;k.list=n;k.remove=function(a){a=A(f.arr(a)?a.map(t):t(a));for(var b=n.length-1;0<=b;b--)for(var c=n[b],e=c.tweens,d=e.length-1;0<=d;d--)for(var g=e[d].animatables,k=g.length-1;0<=k;k--)G(a,g[k].target)&&(g.splice(k,1),g.length||e.splice(d,1),e.length||c.pause())};k.easings=D;
k.getValue=K;k.path=function(a){a=f.str(a)?F(a)[0]:a;return{path:a,value:a.getTotalLength()}};k.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return k});

Comments