/* --- CHOOSER --- */

.interactive-element .chooser {
  position: relative;
  width: 500px;
  margin: 0 auto;
  text-align: left;
}

.chooser ul {
  background: #fe495a;
  position: absolute;
  top: 40px;
  width: 500px;
  z-index: 100;
  font-size: 14px;
  line-height: 14px;
  display: none;
}

.interactive-element .chooser .toggle {
  background: #eaf4fb;
  width: 500px;
  height: 40px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
}

.chooser .toggle .icon {
  background: url(../../images/iconsprite.png) no-repeat;
  background-size: 425px 1000px;
  background-position: 0 -900px;
  display: block;
  float: right;
  width: 16px;
  height: 9px;
  margin: 6px 4px 0 0;
}

.chooser .toggle.open .icon {
  background-position: -50px -900px;
}

.chooser .toggle:hover {
  background: #dae8f2;
}

.chooser ul li {
  background: #eaf4fb;
  display: block;
  padding: 10px;
  cursor: pointer;
}

.chooser li:hover {
  background: #dae8f2;
}

.chooser .on {
  background: #fe495a;
  display: block;
  color: #fff;
  font-weight: 600;
}

.chooser .on:hover {
  background: #de3344;
}

.chooser .select {
  font-weight: 400;
}

.chooser:hover li {
  display: block;
}

/* --- MAP --- */

.map {
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
}

/* text */

.text-placeholder {
  text-align: center;
  opacity: 0;
}

/* ------ MEDIA QUERIES ------ */

/* iPhone landscape */
@media screen and (max-width: 600px) {
  .interactive-element .chooser {
    width: 440px;
  }
  
  .chooser ul {
    width: 440px;
    font-size: 10px;
  }
  
  .interactive-element .chooser .toggle {
    width: 440px;
    font-size: 10px;
  }
}

/* iPhone portrait */
@media screen and (max-width: 400px) {
  .interactive-element .chooser {
    width: 280px;
  }
  
  .chooser ul {
    width: 280px;
    font-size: 10px;
  }
  
  .interactive-element .chooser .toggle {
    width: 280px;
    font-size: 10px;
  }
}