.DOH--johnny-wardrobe,
.i_eyes {
  position: absolute;
  transform: scale(0.525) rotate(-15deg);
  -webkit-transform: scale(0.525) rotate(-15deg);
}

.DOH--johnny-head {
  left: -57px;
  top: -66px;
}

.DOH--johnny-blink {
  display: none;
  left: -57px;
  top: -66px;
  z-index: 6;
}

.DOH--johnny-blink.blink {
  display: block;
}

.DOH--johnny-beards {
  left: -56.5px;
  top: -66px;
  z-index: 5;
}

.DOH--johnny-extras {
  left: -57px;
  top: -65px;
  z-index: 8;
}

.DOH--johnny-eyewear {
  left: -57px;
  top: -67px;
  z-index: 10;
}

.DOH--johnny-hats {
  left: -114px;
  top: -75px;
  z-index: 9;
}

.DOH--johnny-moustaches {
  left: -56px;
  top: -67px;
  z-index: 7;
}

.DOH--johnny-sideburns {
  left: -57px;
  top: -66px;
  z-index: 4;
}

.DOH--johnny-wardrobe:not(.DOH--johnny-head) {
  pointer-events: none;
}

/* Johnny */
.DOH--johnny-content {
  margin: 50px auto;
  width: 994px;
}

.DOH--johnny-container {
  height: 399px;
  margin: auto;
  position: relative;
  width: 646px;
}

.DOH--johnny-content #johnny,
.DOH--johnny-content .accessories,
.DOH--johnny-content #frame,
.DOH--johnny-content #menu,
.DOH--johnny-content #menuBackground,
.DOH--johnny-content #menuItems,
.DOH--johnny-content #fashions {
  position: absolute;
}

.DOH--johnny-content #johnny {
  top: 68px;
  left: 367px;
}

.DOH--johnny-content #menuBackground {
  top: 170px;
  left: 130px;
}

.DOH--johnny-content #menuItems {
  top: 160px;
  left: 25px;
  text-align: left;
}

.DOH--johnny-content #menuItems ul {
  list-style: none;

  margin: 0;

  padding: 0;
}

.DOH--johnny-content #menuItems li {
  padding: 0px 0;
  margin: 5px 0;
}

.DOH--johnny-content #menuItems li a,
.DOH--johnny-content #clear a {
  color: #fff;
  cursor: pointer;
  font: bold 12px arial, helvetica, sans-serif;
  left: 15px;
  text-decoration: none;
  top: 10px;
}

.DOH--johnny-content #menuItems a:hover {
  color: orange;
}

.DOH--johnny-content #hats {
  left: 312px;
  top: 4px;
  z-index: 10;
}

.DOH--johnny-content #eyewear {
  left: 363px;
  top: 61px;
  z-index: 6;
}

.DOH--johnny-content #sideburns {
  left: 393px;
  top: 146px;
  z-index: 4;
}

.DOH--johnny-content #moustaches {
  left: 425px;
  top: 180px;
}

.DOH--johnny-content #beards {
  left: 393px;
  top: 140px;
  z-index: 5;
}

.DOH--johnny-content #johnnyHead {
  left: 380px;
  top: 69px;
}

.DOH--johnny-content #shirts {
  left: 364px;
  top: 193px;
}

.DOH--johnny-content #pants {
  left: 380px;
  top: 267px;
}

.DOH--johnny-content #extras {
  left: 415px;
  top: 134px;
}

.DOH--johnny-content #clear {
  width: 100px;
}

.DOH--johnny-content #frame {
  left: 0px;
  top: 0px;
}

.bannerExtras {
  left: -31px;
  position: absolute;
  top: -18px;
}

.DOH--johnny-content-talkbubble {
  background-color: #fff;
  border: 5px solid #ccc;
  border-radius: 50px;
  color: #333;
  display: inline-block;
  margin-top: 100px;
  margin-left: 600px;
  opacity: 0;
  position: relative;
  padding: 15px;
  text-align: center;
  width: 300px;
}

.DOH--johnny-content-talkbubble p {
  line-height: 1.5;
}

.DOH--johnny-content-talkbubble-arrow-bg {
  border-color: transparent #ccc;
  border-style: solid;
  border-width: 15px 30px 15px 0;
  left: -30px;
  position: absolute;
  top: 34%;
}

.DOH--johnny-content-talkbubble-arrow-fg {
  border-color: transparent #fff;
  border-style: solid;
  border-width: 9px 21px 9px 0;
  left: 10px;
  position: absolute;
  top: -9px;
}

/* eye tracking */
.DOH--global-header-details {
  position: relative;

  .i_eyes {
    height: 37px;
    left: 14px;
    overflow: hidden;
    position: absolute;
    top: 42px;
    width: 75px;
    z-index: 1;
  }

  .i_eye {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    height: 36px;
    position: absolute;
    top: 0;
    width: 50%;
  }

  .i_eye.i_left-eye {
    left: 0;

    .i_pupil {
      transform: translate(-40%, -170%) translate(10px, 10px);
    }
  }

  .i_eye.i_right-eye {
    left: 50%;

    .i_pupil {
      transform: translate(-325%, -170%) translate(10px, 10px);
    }
  }

  .i_pupil {
    background-color: #000;
    border-radius: 50%;
    height: 8px;
    left: 50%;
    outline: 4px solid #fff;
    position: absolute;
    top: 50%;
    transition: transform 0.75s cubic-bezier(0.075, 0.82, 0.165, 1);
    width: 8px;
  }

  .hidden {
    display: none;
  }
}