/*=== Style panel ===*/
.style-panel {
  position: fixed;
  width: 253px;
  left: -253px;
  top: 295px;
  padding: 45px 30px 40px 45px;
  background: #f1f1f1;
  z-index: 15;
}
@media (max-height: 535px) {
  .style-panel {
    top: 60px;
  }
}
.style-panel__button {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  margin-right: -55px;
  background: #f1f1f1;
  color: #ff6868;
  font-size: 26px;
  cursor: pointer;
  border-radius: 0 40px 40px 0;
}
.style-panel__button i {
  margin-top: -12px;
  margin-left: -8px;
  position: absolute;
  top: 50%;
  left: 50%;
}
.style-panel__title {
  margin-bottom: 25px;
  color: #3f3f3f;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 700;
}
.style-panel__color {
  display: inline-block;
  width: 45px;
  overflow: hidden;
  margin-right: 8px;
  margin-bottom: 8px;
  border: 2px solid #f1f1f1;
  -webkit-transition: all 0s ease-in-out;
  -moz-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
}
.style-panel__color:hover {
  border: 2px solid #f1f1f1;
}
.style-panel__color:before,
.style-panel__color:after {
  content: ' ';
  display: block;
  width: 50%;
  float: left;
  height: 40px;
}
.style-panel__color.active {
  border-radius: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.style-panel__info {
  text-align: center;
  color: #3f3f3f;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  font-weight: 400;
}
.style-panel__reset {
  text-align: center;
}
.btn-reset {
  display: none;
  margin-top: 15px;
  padding: 5px 20px;
  font-size: 12px;
}
@media (max-width: 480px) {
  .style-panel {
    display: none;
  }
}
/*=== end Style panel ===*/
.style-panel__color--style1:before {
  background-color: #776b80;
}
.style-panel__color--style1:after {
  background-color: #f2d830;
}
.style-panel__color--style2:before {
  background-color: #776b80;
}
.style-panel__color--style2:after {
  background-color: #ffa640;
}
.style-panel__color--style3:before {
  background-color: #776b80;
}
.style-panel__color--style3:after {
  background-color: #ff94a6;
}
.style-panel__color--style4:before {
  background-color: #555c70;
}
.style-panel__color--style4:after {
  background-color: #ff8a8a;
}
.style-panel__color--style5:before {
  background-color: #555c70;
}
.style-panel__color--style5:after {
  background-color: #00d4d4;
}
.style-panel__color--style6:before {
  background-color: #555c70;
}
.style-panel__color--style6:after {
  background-color: #8ed979;
}