#creation {
  height: 600px;
}

#ditto {
  /* Size of the viewer can be changed. */
  overflow: hidden;
  width: 640px;
  height: 480px;
}

.ditto-vtry iframe {
  height: 300px !important;
}

#mobile-360-link{
  /*height:50px !important;*/
  /*width:65px !important;*/
  background: none !important;
  display:none;
  color: #7d909e !important;
}

#mobile-360-image{
  height:40px !important;
  width:65px !important;
}

#product-single-image-container-fix.has-360-view a#mobile-360-link{
    display: block;
}

/* Rules both for mobiles and tablets. */
@media only screen and (max-width: 1024px)  {
  .ditto-mobile-api #creation {
    display: none;
  }
  #tryOn-mobile{
    display: block !important;
  }
  .tryOn-pc{
    display: none;
  }
  #product-single-image-container-fix.has-360-view div#pc-360-div{
    display: none;
  }
}

/* Rules for mobile devices except tablets. */
@media only screen and (max-width: 600px) {
  /* Make the Try On take the full screen on mobile. */
  .ditto-mobile-api #ditto {
    width: 100%;
    height: auto;
  }
  #tryOn-mobile{
    display: block !important;
  }
  .tryOn-pc{
    display: none;
  }
  #product-single-image-container-fix.has-360-view div#pc-360-div{
    display: none;
  }
}

@media only screen and (orientation: portrait) and (max-width: 600px) {
  .ditto-mobile-api #ditto iframe {
  /*
   * On iPhone 6 the width of the recorded video is 360px, while the width
   * of the screen is 375px. To avoid the small gap, we zoom the iframe by 5%,
   * so it becomes 672x504 instead of 640x480.
   *
   * Corresponding margin value (- @width / 2) and left help to center the
   * iframe within the parent object.
   *
   * If 504px height is too big, you can crop it by setting the height on
   * parent element (e.g. 450px) to make it smaller, and negative top on
   * this element (e.g. -27px) to crop it in the center. Cropping too much may
   * not look nice though.
   */
    position: relative;
    left: 50%;
    width: 672px;
    height: 504px;
    margin-left: -336px;
  }
  #tryOn-mobile{
    display: block !important;
  }
  .tryOn-pc{
    display: none;
  }
  #product-single-image-container-fix.has-360-view div#pc-360-div{
    display: none;
  }
}

/* Rules for iPhone-like devices in landscape mode. */
@media only screen and (orientation: landscape) and (max-width: 600px) {
  .ditto-mobile-api #ditto {
    height: 280px;
  }

  .ditto-mobile-api #ditto iframe {
    margin-top: -7%;
    height: 480px;
  }
  #tryOn-mobile{
    display: block !important;
  }
  .tryOn-pc{
    display: none;
  }
  #product-single-image-container-fix.has-360-view div#pc-360-div{
    display: none;
  }
}
#product-name-mobile-info{
  font-size: 1em !important;
}

.pointer-style {
  cursor: pointer;
}

#creation-section{
    padding-top: 30px;
}

.try-on-txt{
  text-transform: uppercase;
}
.view-image-txt{
  text-transform: uppercase;
}

#tryOn-mobile-div{
  padding: 0px
}

.tryOn-mobile-btn{
  font-size: 9px !important;
  word-spacing: 1px;
  padding-right: 8px;
  padding-left: 8px;
}

.tryOn-First{
    transition: none;
    border: none !important;
    background: white !important;
    font-weight: bold !important;
    color: #7d909e !important;
    font-size: 14px !important;
    margin-top: 10px !important;
}

.product-btn-list {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-btn-list li{
    margin-left: 7px;
    margin-right: 7px;
    width: 30%;
    display: inline;
}

.product-btn-list li a {
  text-align: center;
  text-decoration: none;
}

.product-btn-list :nth-child((3xn)+3) {
  float: right;
}