[data-switch-on] {
  opacity: 0;
  position: relative;
}

div.seealso {
  margin-left: -0.9em;
  margin-bottom: 1.3em;
}
.seealso span.active_menu {
  background-color: #eeead5;
}
.seealso span.menu {
  z-index: 1;
  font: normal 11px Verdana;
  line-height: 16px;
  color: #000000;
  padding: 3px 16px 3px 1.08em;
  position: relative;
}
.image-link {
  display: block;
  border: 0;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.image-holder {
  position: relative;
}

.image-holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.factoid-anchor {position: relative; margin-bottom: 1em; padding-bottom: 143%; background-color: #f4f5ef;}
.factoid {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0 !important;
  opacity: 0;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}
.factoid.active {
  opacity: 1;
  -webkit-transition: opacity .7s ease;
  transition: opacity .7s ease;
}

.footnote {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 11px;
  line-height: 14px;
}

.line {
  position: absolute;
  border-bottom: 1px solid rgba(0,0,0,.2);
  z-index: 1000;
}

.hanger {
  position: absolute;
  bottom: -3em;
  left: 14%;
  right: 6%;
  height: 418px;
  background: url(../images/hanger-center.png) repeat-x 0 23px / 100% 4px;
}

.hanger-left,
.hanger-right {
  position: absolute;
  top: 0;
  height: 418px;
}

.hanger-left {
  left: 0;
  width: 290px;
  background: url(../images/hanger-left.png) no-repeat 0 100% / 100%;
}
.hanger-right {
  right: -58px;
  width: 143px;
  background: url(../images/hanger-right.png) no-repeat 0 100% / 100%;
}

.girl {
  bottom: 0;
  left: -14%;
  width: 128px;
  height: 402px;
  background: url(../images/girl.png) no-repeat 0 0 / 100%;
  z-index: 10;
}

.dress, .girl {position: absolute;}
.dress1 {
  top: 17px;
  left: 29%;
  width: 90px;
  height: 339px;
  background: url(../images/dress1.png) no-repeat 0 0 / 100%;
  z-index: 1;
}
.dress2 {
  top: 18px;
  left: 20%;
  width: 93px;
  height: 311px;
  background: url(../images/dress2.png) no-repeat 0 0 / 100%;
  z-index: 2;
}
.dress3 {
  top: 17px;
  left: 39%;
  width: 110px;
  height: 332px;
  background: url(../images/dress3.png) no-repeat 0 0 / 100%;
  z-index: 3;
}
.dress4 {
  top: 17px;
  left: 46%;
  width: 210px;
  height: 331px;
  background: url(../images/dress4.png) no-repeat 0 0 / 100%;
  z-index: 4;
}
.dress5 {
  top: 17px;
  left: 55%;
  width: 263px;
  height: 343px;
  background: url(../images/dress5.png) no-repeat 0 0 / 100%;
  z-index: 5;
}
.dress6 {
  top: 17px;
  left: 71%;
  width: 119px;
  height: 199px;
  background: url(../images/dress6.png) no-repeat 0 0 / 100%;
  z-index: 6;
}
.dress7 {
  top: 17px;
  left: 80%;
  width: 128px;
  height: 330px;
  background: url(../images/dress7.png) no-repeat 0 0 / 100%;
  z-index: 7;
}
.dress8 {
  top: 17px;
  left: 87%;
  width: 110px;
  height: 332px;
  background: url(../images/dress3.png) no-repeat 0 0 / 100%;
  z-index: 8;
}

@media only screen and (max-width: 1100px) {
  .dress2, .dress6, .dress7 {display: none;}
  .dress1 {left: 27%;}
  .dress8 {left: 82%;}
}
@media only screen and (min-width: 1101px) and (max-width: 1300px) {
  .dress2, .dress7 {display: none;}
  .dress6 {left: 74%;} 
}
@media only screen and (min-width: 1301px) {
  .dress8 {left: 89%;} 
}
@media only screen and (min-width: 1169px) and (max-width: 1418px) {
}
@media only screen and (min-width: 1419px) {
}