@media (min-width: 12in) {
  .migration .cl-effect .branch li {
    box-shadow: #aaaaaa 5px 5px 5px;
    -moz-box-shadow: #aaaaaa 5px 5px 5px;
    -webkit-box-shadow: #aaaaaa 5px 5px 5px;
  }
  .cl-effect *,
  .cl-effect *:after,
  .cl-effect *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  /* Effect 1: Brackets */
  .cl-effect-1 a:not(.menu-picture-link)::before,
  .cl-effect-1 a:not(.menu-picture-link)::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
  }

  .cl-effect-1 a:not(.menu-picture-link)::before {
    margin-right: 0.625em; /* 10px */
    content: '[';
    -webkit-transform: translateX(1.25em); /* 20px */
    -moz-transform: translateX(1.25em);
    transform: translateX(1.25em);
  }

  .cl-effect-1 a:not(.menu-picture-link)::after {
    margin-left: 0.625em;
    content: ']';
    -webkit-transform: translateX(-1.25em);
    -moz-transform: translateX(-1.25em);
    transform: translateX(-1.25em);
  }

  .cl-effect-1 a:not(.menu-picture-link):hover::before,
  .cl-effect-1 a:not(.menu-picture-link):hover::after,
  .cl-effect-1 a:not(.menu-picture-link):focus::before,
  .cl-effect-1 a:not(.menu-picture-link):focus::after {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  /* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
  .cl-effect-2 a:not(.menu-picture-link) {
    line-height: 2.75em; /* 44/16 */
  }

  .cl-effect-2 a:not(.menu-picture-link) span {
    position: relative;
    display: inline-block;
    padding: 0 0.875em; /* 14/16 */
    background: inherit;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .cl-effect-2 a:not(.menu-picture-link) span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 1em;
    background: inherit;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
  }

  .cl-effect-2 a:not(.menu-picture-link):hover span,
  .cl-effect-2 a:not(.menu-picture-link):focus span {
    -webkit-transform: rotateX(90deg) translateY(-1.375em); /* -22/16 */
    -moz-transform: rotateX(90deg) translateY(-1.375em); /* -22/16 */
    transform: rotateX(90deg) translateY(-1.375em); /* -22/16 */
  }

  .cl-effect-2 a:not(.menu-picture-link):hover span::before,
  .cl-effect-2 a:not(.menu-picture-link):focus span::before {
    background: inherit;
  }

  /* Effect 3: bottom line slides/fades in */
  .cl-effect-3 a:not(.menu-picture-link)::after {
    position: absolute;
    top: calc(100% - 0.25em);
    left: 0;
    width: 100%;
    height: 0.25em; /* 4/16 */
    background: rgba(0, 0, 0, 0.1);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(0.625em); /* 10/16 */
    -moz-transform: translateY(0.625em);
    transform: translateY(0.625em);
  }

  .cl-effect-3 a:not(.menu-picture-link):hover::after,
  .cl-effect-3 a:not(.menu-picture-link):focus::after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  /* Effect 4: bottom border enlarge */
  .cl-effect-4 a:not(.menu-picture-link)::after {
    position: absolute;
    top: calc(100% - 0.063em);
    left: 0;
    width: 100%;
    height: 0.063em; /* 1/16 */
    background: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-0.625em); /* -10/16 */
    -moz-transform: translateY(-0.625em); /* -10/16 */
    transform: translateY(-0.625em); /* -10/16 */
  }

  .cl-effect-4 a:not(.menu-picture-link):hover::after,
  .cl-effect-4 a:not(.menu-picture-link):focus::after {
    height: 0.313em; /* 5/16 */
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  /* Effect 6: same word slide in and border bottom */
  .cl-effect-6 a:not(.menu-picture-link) {
    margin: 0 0.625em; /* 10/16 */
  }

  .cl-effect-6 a:not(.menu-picture-link)::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.125em; /* 2/16 */
    background: #fff;
    content: '';
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    transition: top 0.3s;
  }

  .cl-effect-6 a:not(.menu-picture-link)::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.125em; /* 2/16 */
    height: 0.125em; /* 2/16 */
    background: #fff;
    content: '';
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
  }

  .cl-effect-6 a:not(.menu-picture-link):hover::before {
    top: calc(100% - 0.125em);
    opacity: 1;
  }

  .cl-effect-6 a:not(.menu-picture-link):hover::after {
    height: 100%;
  }

  /* Effect 7: second border slides up */
  .cl-effect-7 a:not(.menu-picture-link) {
    color: #566473;
    text-shadow: none;
    font-weight: 700;
  }

  .cl-effect-7 a:not(.menu-picture-link)::before,
  .cl-effect-7 a:not(.menu-picture-link)::after {
    position: absolute;
    top: calc(100% - 0.188em);
    left: 0;
    width: 100%;
    height: 0.188em; /* 3/16 */
    background: #566473;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
  }

  .cl-effect-7 a:not(.menu-picture-link)::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
  }

  .cl-effect-7 a:not(.menu-picture-link):hover::before,
  .cl-effect-7 a:not(.menu-picture-link):hover::after,
  .cl-effect-7 a:not(.menu-picture-link):focus::before,
  .cl-effect-7 a:not(.menu-picture-link):focus::after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }

  .cl-effect-7 a:not(.menu-picture-link):hover::after,
  .cl-effect-7 a:not(.menu-picture-link):focus::after {
    top: 0%;
    opacity: 1;
  }

  /* Effect 8: border slight translate */
  .cl-effect-8 a:not(.menu-picture-link)::before,
  .cl-effect-8 a:not(.menu-picture-link)::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0.188em solid #354856; /* 3/16 */
    content: '';
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
  }

  .cl-effect-8 a:not(.menu-picture-link)::after {
    border-color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-0.438em) translateX(0.375em); /* -7/16, 6/16 */
    -moz-transform: translateY(-0.438em) translateX(0.375em); /* -7/16, 6/16 */
    transform: translateY(-0.438em) translateX(0.375em); /* -7/16, 6/16 */
  }

  .cl-effect-8 a:not(.menu-picture-link):hover::before,
  .cl-effect-8 a:not(.menu-picture-link):focus::before {
    opacity: 0;
    -webkit-transform: translateY(0.313em) translateX(-0.313em); /* 5/16, -5/16 */
    -moz-transform: translateY(0.313em) translateX(-0.313em); /* 5/16, -5/16 */
    transform: translateY(0.313em) translateX(-0.313em); /* 5/16, -5/16 */
  }

  .cl-effect-8 a:not(.menu-picture-link):hover::after,
  .cl-effect-8 a:not(.menu-picture-link):focus::after {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0);
    -moz-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }

  /* Effect 12: circle */
  .cl-effect-12 a:not(.menu-picture-link)::before,
  .cl-effect-12 a:not(.menu-picture-link)::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.813em; /* 45/16 */
    height: 2.813em; /* 45/16 */
    border: 0.125em solid; /* 2/16 */
    border-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
  }

  .cl-effect-12 a:not(.menu-picture-link)::after {
    width: 2.188em; /* 35/16 */
    height: 2.188em; /* 35/16 */
    border-width: 0.375em; /* 6/16 */
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8);
  }

  .cl-effect-12 a:not(.menu-picture-link):hover::before,
  .cl-effect-12 a:not(.menu-picture-link):hover::after,
  .cl-effect-12 a:not(.menu-picture-link):focus::before,
  .cl-effect-12 a:not(.menu-picture-link):focus::after {
    opacity: 0.5;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
  }

  /* Effect 13: three circles */
  .cl-effect-13 a:not(.menu-picture-link) {
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
  }

  .cl-effect-13 a:not(.menu-picture-link)::before {
    position: absolute;
    top: 60%;
    left: 50%;
    color: transparent;
    content: '•';
    text-shadow: 0 0 transparent;
    font-size: 1.2em;
    -webkit-transition: text-shadow 0.3s, color 0.3s;
    -moz-transition: text-shadow 0.3s, color 0.3s;
    transition: text-shadow 0.3s, color 0.3s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .cl-effect-13 a:not(.menu-picture-link):hover::before,
  .cl-effect-13 a:not(.menu-picture-link):focus::before {
    color: #fff;
    text-shadow: 0.625em 0 #fff, -0.625em 0 #fff; /* 10/16, -10/16 */
  }

  /* Effect 14: border switch */
  .cl-effect-14 a:not(.menu-picture-link)::before,
  .cl-effect-14 a:not(.menu-picture-link)::after {
    position: absolute;
    width: 2.813em; /* 45/16 */
    height: 0.125em; /* 2/16 */
    background: #fff;
    content: '';
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events: none;
  }

  .cl-effect-14 a:not(.menu-picture-link)::before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .cl-effect-14 a:not(.menu-picture-link)::after {
    right: 0;
    bottom: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }

  .cl-effect-14 a:not(.menu-picture-link):hover::before,
  .cl-effect-14 a:not(.menu-picture-link):hover::after,
  .cl-effect-14 a:not(.menu-picture-link):focus::before,
  .cl-effect-14 a:not(.menu-picture-link):focus::after {
    opacity: 1;
  }

  .cl-effect-14 a:not(.menu-picture-link):hover::before,
  .cl-effect-14 a:not(.menu-picture-link):focus::before {
    left: 50%;
    -webkit-transform: rotate(0deg) translateX(-50%);
    -moz-transform: rotate(0deg) translateX(-50%);
    transform: rotate(0deg) translateX(-50%);
  }

  .cl-effect-14 a:not(.menu-picture-link):hover::after,
  .cl-effect-14 a:not(.menu-picture-link):focus::after {
    right: 50%;
    -webkit-transform: rotate(0deg) translateX(50%);
    -moz-transform: rotate(0deg) translateX(50%);
    transform: rotate(0deg) translateX(50%);
  }

  /* Effect 17: move up fade out, push border */
  .cl-effect-17 a:not(.menu-picture-link) {
    color: #10649b;
    text-shadow: none;
  }

  .cl-effect-17 a:not(.menu-picture-link)::before {
    color: #fff;
    text-shadow: 0 0 0.063em rgba(255, 255, 255, 0.3); /* 1/16 */
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
  }

  .cl-effect-17 a:not(.menu-picture-link)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.125em; /* 2/16 */
    background: #fff;
    opacity: 0;
    -webkit-transform: translateY(0.313em); /* 5/16 */
    -moz-transform: translateY(0.313em); /* 5/16 */
    transform: translateY(0.313em); /* 5/16 */
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
  }

  .cl-effect-17 a:not(.menu-picture-link):hover::before,
  .cl-effect-17 a:not(.menu-picture-link):focus::before {
    opacity: 0;
    -webkit-transform: translateY(-0.125em); /* -2/16 */
    -moz-transform: translateY(-0.125em); /* -2/16 */
    transform: translateY(-0.125em); /* -2/16 */
  }

  .cl-effect-17 a:not(.menu-picture-link):hover::after,
  .cl-effect-17 a:not(.menu-picture-link):focus::after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  /* Effect 19: 3D side */
  .cl-effect-19 a:not(.menu-picture-link) {
    width: 12.5em; /* 200/16 */
  }

  .cl-effect-19 a:not(.menu-picture-link) span {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 0.875em; /* 14/16 */
    background: #e35041;
    -webkit-transition: -webkit-transform 0.4s, background 0.4s;
    -moz-transition: -moz-transform 0.4s, background 0.4s;
    transition: transform 0.4s, background 0.4s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -3.65em; /* -100/16 */
    -moz-transform-origin: 50% 50% -3.65em; /* -100/16 */
    transform-origin: 50% 50% -3.65em; /* -100/16 */
  }

  .cl-effect-19 a:not(.menu-picture-link) span::before {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    padding: 0 0.875em; /* 14/16 */
    background: #b53a2d;
    content: attr(data-hover);
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    transition: background 0.4s;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    transform-origin: 0 50%;
    pointer-events: none;
  }

  .cl-effect-19 a:not(.menu-picture-link):hover span,
  .cl-effect-19 a:not(.menu-picture-link):focus span {
    background: #b53a2d;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }

  .cl-effect-19 a:not(.menu-picture-link):hover span::before,
  .cl-effect-19 a:not(.menu-picture-link):focus span::before {
    background: #ef5e50;
  }

  /* Effect 20: 3D side */
  .cl-effect-20 a:not(.menu-picture-link) {
    line-height: 2em;
  }

  .cl-effect-20 a:not(.menu-picture-link) span {
    position: relative;
    display: inline-block;
    padding: 0.188em 0.938em 0; /* 3/16, 15/16 */
    background: #587285;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    transition: background 0.6s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
  }

  .cl-effect-20 a:not(.menu-picture-link) span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0.188em 0.938em 0; /* 3/16, 15/16 */
    background: rgba(255, 255, 255, 0.5);
    content: attr(data-hover);
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    transform: rotateX(270deg);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
  }

  .cl-effect-20 a:not(.menu-picture-link):hover span::before,
  .cl-effect-20 a:not(.menu-picture-link):focus span::before {
    -webkit-transform: rotateX(10deg);
    -moz-transform: rotateX(10deg);
    transform: rotateX(10deg);
  }

  /* Effect 21: borders slight translate */
  .cl-effect-21 a:not(.menu-picture-link) {
    padding: 0.625em; /* 10/16 */
    color: #237546;
    font-weight: 700;
    text-shadow: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
  }

  .cl-effect-21 a:not(.menu-picture-link)::before,
  .cl-effect-21 a:not(.menu-picture-link)::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.125em; /* 2/16 */
    background: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-0.625em); /* -10/16 */
    -moz-transform: translateY(-0.625em); /* -10/16 */
    transform: translateY(-0.625em); /* -10/16 */
  }

  .cl-effect-21 a:not(.menu-picture-link)::before {
    top: 0;
    -webkit-transform: translateY(-0.625em); /* -10/16 */
    -moz-transform: translateY(-0.625em); /* -10/16 */
    transform: translateY(-0.625em); /* -10/16 */
  }

  .cl-effect-21 a:not(.menu-picture-link)::after {
    bottom: 0;
    -webkit-transform: translateY(0.625em); /* 10/16 */
    -moz-transform: translateY(0.625em); /* 10/16 */
    transform: translateY(0.625em); /* 10/16 */
  }

  .cl-effect-21 a:not(.menu-picture-link):hover,
  .cl-effect-21 a:not(.menu-picture-link):focus {
    color: #fff;
  }

  .cl-effect-21 a:not(.menu-picture-link):hover::before,
  .cl-effect-21 a:not(.menu-picture-link):focus::before,
  .cl-effect-21 a:not(.menu-picture-link):hover::after,
  .cl-effect-21 a:not(.menu-picture-link):focus::after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}