.highlight-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}

#cube {
  width: 100%;
  height: 196px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
}

#cube figure {
  width: 100%;
  display: block;
  position: absolute;
}

#cube .front  {
  -webkit-transform: translateZ( 200px );
     -moz-transform: translateZ( 200px );
       -o-transform: translateZ( 200px );
          transform: translateZ( 200px );
}
#cube .back   {
  -webkit-transform: rotateX( -180deg ) translateZ( 200px );
     -moz-transform: rotateX( -180deg ) translateZ( 200px );
       -o-transform: rotateX( -180deg ) translateZ( 200px );
          transform: rotateX( -180deg ) translateZ( 200px );
}
#cube .right {
  -webkit-transform: rotateY(   90deg ) translateZ( 200px );
     -moz-transform: rotateY(   90deg ) translateZ( 200px );
       -o-transform: rotateY(   90deg ) translateZ( 200px );
          transform: rotateY(   90deg ) translateZ( 200px );
}
#cube .left {
  -webkit-transform: rotateY(  -90deg ) translateZ( 200px );
     -moz-transform: rotateY(  -90deg ) translateZ( 200px );
       -o-transform: rotateY(  -90deg ) translateZ( 200px );
          transform: rotateY(  -90deg ) translateZ( 200px );
}
#cube .top {
  -webkit-transform: rotateX(   90deg ) translateZ( 200px );
     -moz-transform: rotateX(   90deg ) translateZ( 200px );
       -o-transform: rotateX(   90deg ) translateZ( 200px );
          transform: rotateX(   90deg ) translateZ( 200px );
}
#cube .bottom {
  -webkit-transform: rotateX(  -90deg ) translateZ( 200px );
     -moz-transform: rotateX(  -90deg ) translateZ( 200px );
       -o-transform: rotateX(  -90deg ) translateZ( 200px );
          transform: rotateX(  -90deg ) translateZ( 200px );
}

#cube.show-front {
  -webkit-transform: translateZ( -200px );
     -moz-transform: translateZ( -200px );
       -o-transform: translateZ( -200px );
          transform: translateZ( -200px );
}
#cube.show-back {
  -webkit-transform: translateZ( -200px ) rotateX( -180deg );
     -moz-transform: translateZ( -200px ) rotateX( -180deg );
       -o-transform: translateZ( -200px ) rotateX( -180deg );
          transform: translateZ( -200px ) rotateX( -180deg );
}
#cube.show-right {
  -webkit-transform: translateZ( -200px ) rotateY(  -90deg );
     -moz-transform: translateZ( -200px ) rotateY(  -90deg );
       -o-transform: translateZ( -200px ) rotateY(  -90deg );
          transform: translateZ( -200px ) rotateY(  -90deg );
}
#cube.show-left {
  -webkit-transform: translateZ( -200px ) rotateY(   90deg );
     -moz-transform: translateZ( -200px ) rotateY(   90deg );
       -o-transform: translateZ( -200px ) rotateY(   90deg );
          transform: translateZ( -200px ) rotateY(   90deg );
}
#cube.show-top {
  -webkit-transform: translateZ( -200px ) rotateX(  -90deg );
     -moz-transform: translateZ( -200px ) rotateX(  -90deg );
       -o-transform: translateZ( -200px ) rotateX(  -90deg );
          transform: translateZ( -200px ) rotateX(  -90deg );
}
#cube.show-bottom {
  -webkit-transform: translateZ( -200px ) rotateX(   90deg );
     -moz-transform: translateZ( -200px ) rotateX(   90deg );
       -o-transform: translateZ( -200px ) rotateX(   90deg );
          transform: translateZ( -200px ) rotateX(   90deg );
}


#show-buttons{ text-align: center; min-width: 400px; padding-top: 220px; }
button.flip-btn{ border-radius: 20px; width: 11px; height: 11px; background-color: grey; border-color: transparent; padding: 0; margin: 0; }
button.flip-btn:hover{ background-color: white; border-color: transparent; }
button.flip-btn.cube-selected{ background-color: white; border-color: transparent; }


.panel-text-container{ 
    /*background-color: rgba(0, 0, 0, 0.7);*/
    color: white;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.xl-show{ display: block; }
.md-show{ display: none;}
.xs-show{ display: none;}
.flexslider2 {margin: 0; padding: 0; position: relative; }
.flex-direction-nav{ display: none; }
.flex-control-nav{ bottom: -20px !important; }
.flex-control-nav li a{ background-color: grey !important; opacity: 1 !important; }
.flex-control-nav li a.flex-active{ background-color: white !important; }

.flex-caption {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;

}

@media(max-width: 850px){
    .highlight-container{ margin-bottom:50px; max-width: 440px; }
    #show-buttons{ padding-top: 295px; }
    
    .xl-show{ display: none; }
    .md-show{ display: block;}


    #cube .front  {
      -webkit-transform: translateZ( 216px );
         -moz-transform: translateZ( 216px );
           -o-transform: translateZ( 216px );
              transform: translateZ( 216px );
    }
    #cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 216px );
         -moz-transform: rotateX( -180deg ) translateZ( 216px );
           -o-transform: rotateX( -180deg ) translateZ( 216px );
              transform: rotateX( -180deg ) translateZ( 216px );
    }
    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 216px );
         -moz-transform: rotateY(   90deg ) translateZ( 216px );
           -o-transform: rotateY(   90deg ) translateZ( 216px );
              transform: rotateY(   90deg ) translateZ( 216px );
    }
    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 216px );
         -moz-transform: rotateY(  -90deg ) translateZ( 216px );
           -o-transform: rotateY(  -90deg ) translateZ( 216px );
              transform: rotateY(  -90deg ) translateZ( 216px );
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 216px );
         -moz-transform: rotateX(   90deg ) translateZ( 216px );
           -o-transform: rotateX(   90deg ) translateZ( 216px );
              transform: rotateX(   90deg ) translateZ( 216px );
    }
    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 216px );
         -moz-transform: rotateX(  -90deg ) translateZ( 216px );
           -o-transform: rotateX(  -90deg ) translateZ( 216px );
              transform: rotateX(  -90deg ) translateZ( 216px );
    }


}

@media(max-width: 480px){
    .md-show{ display: none;}
    .xs-show{ display: block;}

    #cube .front  {
      -webkit-transform: translateZ( 200px );
         -moz-transform: translateZ( 200px );
           -o-transform: translateZ( 200px );
              transform: translateZ( 200px );
    }
    #cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 200px );
         -moz-transform: rotateX( -180deg ) translateZ( 200px );
           -o-transform: rotateX( -180deg ) translateZ( 200px );
              transform: rotateX( -180deg ) translateZ( 200px );
    }
    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 200px );
         -moz-transform: rotateY(   90deg ) translateZ( 200px );
           -o-transform: rotateY(   90deg ) translateZ( 200px );
              transform: rotateY(   90deg ) translateZ( 200px );
    }
    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 200px );
         -moz-transform: rotateY(  -90deg ) translateZ( 200px );
           -o-transform: rotateY(  -90deg ) translateZ( 200px );
              transform: rotateY(  -90deg ) translateZ( 200px );
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 200px );
         -moz-transform: rotateX(   90deg ) translateZ( 200px );
           -o-transform: rotateX(   90deg ) translateZ( 200px );
              transform: rotateX(   90deg ) translateZ( 200px );
    }
    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 200px );
         -moz-transform: rotateX(  -90deg ) translateZ( 200px );
           -o-transform: rotateX(  -90deg ) translateZ( 200px );
              transform: rotateX(  -90deg ) translateZ( 200px );
    }

}

@media(max-width: 430px){
    .highlight-container{ margin-bottom:65px; }
    #show-buttons{ padding-top: 305px; max-width: 320px; min-width: 0; }
}

@media(max-width: 350px){
    .logo img{ height: 43px !important; }
}