.hop-aroma-wheel-container {
  position: relative;
  width: 700px;
  text-align: center;
  margin: auto !important;
}
.hop-aroma-wheel-outer {
  position: relative;
}
.hop-aroma-wheel-layer0 {
  position: relative;
  z-index: 0; /* maybe we have to change this later */
}
.hop-aroma-wheel-layer1 {
  position: absolute;
  top: 0;
  z-index: 1; /* maybe we have to change this later */
}
.hop-aroma-wheel-layer2 {
  position: absolute;
  top: 0;
  z-index: 2; /* maybe we have to change this later */
}
.hop-aroma-wheel-button-inactive,
.hop-aroma-wheel-button-active {
  position: absolute;
  top: 0;
  z-index: 3; /* maybe we have to change this later */
  cursor: pointer;
}

.clearfix.slick-slide {
  clear: unset !important;
}

.hop-aroma-wheel-scroll-container {
    background-color: #fff;
    padding: 25px 0 !important;
    -webkit-box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.75) !important;
    box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.75) !important;
}

.hop-aroma-wheel-scroll-container .sppb-addon-single-image-container {
  cursor: pointer;
}
.hop-aroma-wheel-scroll-container .sppb-addon-single-image-container::after {
    display: block;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0; left:0; right: 0; bottom: 0;
    content: "";
}
.hop-aroma-wheel-scroll-container .sppb-addon-single-image-container.active::after,
.hop-aroma-wheel-scroll-container .sppb-addon-single-image-container:hover::after{
  background: rgba(255, 255, 255, 0.0);
}


.hop-aroma-wheel-scroll-container .sppb-container{
  position: relative;
  max-width: 80%;
  margin: 0 auto;
}
.hop-aroma-wheel-scroll-container h1{
  max-width: 410px;
  margin: 0 auto;
  font-size: 27px !important;
}
.hop-aroma-wheel-scroll-container h1::before{
  content: " ";
  position: absolute;
  left: 0;
  background-color: #408927;
  height: 1px;
  width: 155px;
  top: 50%;
}
.hop-aroma-wheel-scroll-container h1::after {
    content: " ";
    position: absolute;
    right: 0;
    background-color: #408927;
    height: 1px;
    width: 155px;
    top: 50%;
}
.hop-aroma-wheel-scroll-container .slick-prev {
    background: url(../images/left.png) no-repeat;
    color: transparent;
    background-color: transparent;
    border: none;
    height: 24px;
    margin-top: 37px;
    left: 126px;
    background-size: contain;
    position: absolute;
    z-index: 9999;
}
.hop-aroma-wheel-scroll-container .slick-next {
    background: url(../images/right.png) no-repeat;
    color: transparent;
    background-color: transparent;
    border: none;
    height: 24px;
    top: 38px;
    right: 126px;
    background-size: contain;
    position: absolute;
    z-index: 9999;
    max-width: 0px;
}

.hop-aroma-wheel-scroll-container .slick-slide .sppb-addon.sppb-addon-single-image.sppb-text-center {
  position: relative;
  min-height: 110px;
}
.hop-aroma-wheel-scroll-container .sppb-addon-single-image h3{
  position: absolute;
  left: 0;
  right: 0;
  top: 65px;
  background-color: #408927;
  color: white;
  width: 97%;
  text-transform: uppercase;
  font-size: 15px;
  padding: 3px;
}
.hop-aroma-wheel-scroll-container .sppb-addon-single-image .sppb-addon-content{
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
}
.hop-aroma-wheel-scroll-container .slick-list {
    max-width: 660px ;
}


.hop-aroma-wheel-sidbar-container { background: #fff; width: 100%; max-width: 250px; padding-bottom: 10px;
    position: absolute !important;
    top: 400px;
    z-index: -1 !important;
}
.sidebar-element { background: none !important; outline: none !important; color: black !important; text-decoration: none !important; text-align: left !important;
				   line-height: 1.0 !important; border: 0 !important; padding-left: 20px !important; margin-right: 40px !important;
				   max-width: 220px; !important;}

.sidebar-element:hover { text-decoration: underline !important;}
.sidebar-element:active, .sidebar-element:focus {
 outline: none;
 box-shadow: none !important;
 ie-dummy: expression(this.hideFocus=true);
}

.intensity-hl h3{ background-color: #76B82A; color: #fff !important; margin: 20px 10px !important; padding: 4px 0 !important;
text-transform: uppercase !important; font-size: 20px;}

.taste-hl h2 { font-size: 18px !important; margin-bottom: 0 !important; padding-top: 20px !important; text-transform: initial;}


@media only screen and (max-width: 768px) {
  .hop-aroma-wheel-container {
   width: 100%;
  }
}
@media only screen and (max-width: 991px) {
  .hop-aroma-wheel-scroll-container .slick-prev {
    left: 15px;;
  }
  .hop-aroma-wheel-scroll-container .slick-next {
    right: 15px;;
  }
  .hop-aroma-wheel-scroll-container h1::before,
  .hop-aroma-wheel-scroll-container h1::after {
    width: 70px;
  }
}
@media only screen and (max-width: 640px) {
  .hop-aroma-wheel-scroll-container h1::before,
  .hop-aroma-wheel-scroll-container h1::after {
    display: none;
  }
}
.display-none{
  display: none !important;
}



/*COLORS*/
.slick-slider .item1 .sppb-addon-title,
.color-1, .color-1 *{
  background-color: #369134;
}
.slick-slider .item2 .sppb-addon-title{
  background-color: #E981B2;
}
.slick-slider .item3 .sppb-addon-title{
  background-color: #FAEF61;
}
.slick-slider .item4 .sppb-addon-title{
  background-color: #57A832;
}
.slick-slider .item5 .sppb-addon-title{
  background-color: #E0B073;
}
.slick-slider .item6 .sppb-addon-title{
  background-color: #2F9A62;
}
.slick-slider .item7 .sppb-addon-title{
  background-color: #E5D3AB;
}
.slick-slider .item8 .sppb-addon-title{
  background-color: #FAB62F;
}
.slick-slider .item9 .sppb-addon-title{
  background-color: #D7595D;
}
.slick-slider .item10 .sppb-addon-title{
  background-color: #BAD36D;
}
.slick-slider .item11 .sppb-addon-title{
  background-color: #AB84BA;
}
.slick-slider .item12 .sppb-addon-title{
  background-color: #964951;
}

.color-1, .color-1 *{
  color: #369134 !important;
}
.color-2, .color-2 *{
  color: #E981B2 !important;
}

.color-3, .color-3 *{
  color: #FAEF61 !important;
}

.color-4, .color-4 *{
  color: #57A832 !important;
}

.color-5, .color-5 *{
  color: #E0B073 !important;
}

.color-6, .color-6 *{
  color: #2F9A62 !important;
}

.color-7, .color-7 *{
  color: #E5D3AB !important;
}

.color-8, .color-8 *{
  color: #FAB62F !important;
}

.color-9, .color-9 *{
  color: #D7595D !important;
}

.color-10, .color-10 *{
  color: #BAD36D !important;
}

.color-11, .color-11 *{
  color: #AB84BA !important;
}

.color-12, .color-12 *{
  color: #964951 !important;
}
.zitrus h2 {
	color: #f9aa2b!important;
}
@media only screen and (max-width: 1999px) and (min-width: 992px)  {
  .hop-aroma-wheel-scroll-container .slick-prev {
    left: 102px;
  }
  .hop-aroma-wheel-scroll-container .slick-next {
    right: 102px;
  }
}

@media only screen and (max-width: 1199px) and (min-width: 992px)  {
  .hop-aroma-wheel-container {
    margin: unset !important;
    float: right;
    left: -25px;
  }
}
@media only screen and (max-width: 991px){
  .hop-aroma-wheel-sidbar-container{
    clear: both;
    position: relative !important;
    top: unset;
    margin: 0 auto;
  }
  .hop-aroma-wheel-container{
    float: unset;
    left: unset;
    clear: both;
  }
}

.wheel-plus {
  position: absolute;
  top: 180px;
  font-size: 23px;
  font-weight: 100;
  left: 206px;
}
.wheel-plus p {
  position: absolute;
  color: #76B82A;
}
.plus-2 {
  top: 14px;
}
.plus-3 {
  top: 29px;
}
.plus-4 {
  top: 130px;
}
.plus-5 {
  top: 145px;
}
.plus-6 {
  top: 262px;
}

@media (max-width: 600px){
  .page-23 {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }
  .hop-aroma-wheel-scroll-container .slick-list {
      left: 1.5%;
  }
}