/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 * {
    box-sizing: border-box
  } 
  
  .dressFit_modal-dialog {
      overflow-y: initial !important;
      max-width: 100% !important;
  }
  
  .dressFit_modal-content {
      overflow-y: auto;
  }
  
  .rect {
      border: 2px solid #a64ceb;
      left: -1000px;
      position: absolute !important;
      top: -1000px;
  }
  
  #TryOnModal {}
  
  
  
  .fixed_images {
      max-width: 100%;
      max-height: 100%;
  }
  
  .tshirtimagediv {
      position: absolute !important;
      z-index: 3;
      left: 32.9%;
      top: 13.7%;
      width: 34%;
      cursor: all-scroll;
      background-color: transparent;
      border: 0px;
  }
  .jeansimagediv {
    position: absolute !important;
    z-index: 3;
    left: 38.9%;
    top: 44%;
    width: 24%;
    cursor: all-scroll;
    background-color: transparent;
    border: 0px;
}
  
  #galssimage {
      background: transparent;
      border: 0px;
  }
  
  @media (min-width: 1000px) {
      #imageCanvas {
        width: 100%;
        max-width: 523px;
        max-height: 612px;
      }
      #rotate_div{
        display: none !important;
      }
      #desktop-action-row{
        display: block !important;
        padding-right: 0px !important;
      }
      #dressFit_img_div{
        padding-left: 0px !important;
      }
      #mobile-action-row{
        display: none !important;
      }
      #plus_div{
        display: none !important;
      }
      #minus_div{
        display: none !important;
      }
      .try_on_popup {
      }
      .camera_popup {
          width: 32% !important;
          position: fixed !important;
          right: 5% !important;
      }
      .fa_btns{
          padding: 15% !important;
          width: 100%;
          border-bottom: black;
          border-style: solid;
      }
      .fa {
          font-size: 200% !important;
      }
      .fa-camera{
          font-size: 222% !important;
      }
      .fa-expand{
          font-size: 270% !important;
          display: none !important;
      }
      .fa-compress{
          font-size: 270% !important;
          display: none !important;
      }
      .fa-repeat{
          font-size: 270% !important;
      }
      .fa-rotate-left{
          font-size: 270% !important;
      }
      .fa-refresh{
          font-size: 249% !important;
      }
      .fa-download{
          font-size: 270% !important;
      }
      .fa-times-circle-o{
        font-size: 270% !important;
      }
  }
  @media (max-width: 900px) {
      #imageCanvas {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
      }
      #desktop-action-row{
        display: none !important;
      }
      #mobile-action-row{
        display: block !important;
      }
      #camera_div{
        display: none !important;
      }
      .fa {
        font-size: 150% !important;
        color: black;
        margin: 3%;
      }
      .fa-camera{
        display: none !important;
      }
  }
  
  .row {
      margin-left: 0px;
  }
  
  .picture {
      position: relative;
      height: 26px;
      font-size: 33px;
      cursor: pointer;
  }
  
  #imageLoader {
      display: none;
      width: 26px;
      height: 26px;
      margin-right: 100px;
      opacity: 0;
      filter: alpha(opacity=0);
      /* IE 5-7 */
  }
  
  .rotate-gly {
      transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
  }
  
  .cart_button {
      display: block;
      width: 115px;
      height: 25px;
      background: #191212;
      text-align: center;
      border-radius: 5px;
      color: white;
      font-weight: bold;
  }
  
  .cart_button :hover {
      color: white;
  }
  
  .side_view_btn {
      text-decoration: none;
      position: absolute !important;
      bottom: 4px;
      right: 20px;
      padding: 1px 10px 2px 6px;
      font: 14px Verdana, sans-serif;
      cursor: pointer;
  }
  
  .side_view_btn:hover {
      color: #333;
      background-color: rgba(255, 255, 255, 0.02);
      text-decoration: none;
  }
  
  .savendownload {
      position: absolute !important;
      top: 5px;
      right: 42px
  }
  /*
  .trans:active {
      font-size: xx-large;
      background: #7a8ace;
      color: #b10e0e;
      width: 32px;
      height: 32px;
      margin: 2px 2px;
      border-radius: 10px;
      cursor: pointer;
  }
  */
  
  
  
  .carousel-control-prev {
      opacity: 0.5;
      background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%);
  }
  
  .carousel-control-next {
      opacity: 0.5;
      background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%);
  }
  
  
    
    /* Tooltip text */
    #upload_div .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #upload_div:hover .tooltiptext {
      visibility: visible;
    }
  
    #upload_div .tooltiptext::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  /* Tooltip text */
    #camera_div .tooltiptextcamera {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #camera_div:hover .tooltiptextcamera {
      visibility: visible;
    }
  
    #camera_div .tooltiptextcamera::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  
  /* Tooltip text */
  #plus_div .tooltiptextplus {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #plus_div:hover .tooltiptextplus {
      visibility: visible;
    }
  
    #plus_div .tooltiptextplus::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  
  /* Tooltip text */
  #minus_div .tooltiptextminus {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #minus_div:hover .tooltiptextminus {
      visibility: visible;
    }
  
    #minus_div .tooltiptextminus::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  
  /* Tooltip text */
  #right_div .tooltiptextright {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #right_div:hover .tooltiptextright {
      visibility: visible;
    }
  
    #right_div .tooltiptextright::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  
  /* Tooltip text */
  #left_div .tooltiptextleft {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #left_div:hover .tooltiptextleft {
      visibility: visible;
    }
  
    #left_div .tooltiptextleft::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  
  /* Tooltip text */
  #fa_360_div .tooltiptextfa360 {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #fa_360_div:hover .tooltiptextfa360 {
      visibility: visible;
    }
  
    #fa_360_div .tooltiptextfa360::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  
  /* Tooltip text */
  #close_div .tooltiptextclose {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      top: -5px;
      left: 150%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #close_div:hover .tooltiptextclose {
      visibility: visible;
    }
  
    #close_div .tooltiptextclose::after {
      content: " ";
      position: absolute !important;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
  /* Tooltip text */
  #tryonimagediv .tooltiptextdrag {
      visibility: hidden;
      width: 232px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute !important;
      z-index: 1;
      left: 33%;
      bottom: 3%;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    #tryonimagediv:hover .tooltiptextdrag {
      visibility: visible;
    }
  
    #tryonimagediv .tooltiptextdrag::after {
      content: " ";
      position: absolute !important;
      top: 100%;  /* At the top of the tooltip */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }
  /* Tooltip text */
  #download_div .tooltiptextfadownload {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute !important;
    z-index: 1;
    top: -5px;
    left: 150%;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  #download_div:hover .tooltiptextfadownload {
    visibility: visible;
  }
  
  #download_div .tooltiptextfadownload::after {
    content: " ";
    position: absolute !important;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }
    .tooltipdiv{
        position: relative;
    }
  
    .blinking {
      -webkit-animation: 1s blink ease infinite;
      -moz-animation: 1s blink ease infinite;
      -ms-animation: 1s blink ease infinite;
      -o-animation: 1s blink ease infinite;
      animation: 1s blink ease infinite;
      
    }
    
    @keyframes "blink" {
      from, to {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    
    @-moz-keyframes blink {
      from, to {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    
    @-webkit-keyframes "blink" {
      from, to {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    
    @-ms-keyframes "blink" {
      from, to {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    
    @-o-keyframes "blink" {
      from, to {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
  
  
  
    .dressFit_loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid black;
      border-bottom: 16px solid black;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  
    .dressFit_quotes {
      padding: 3rem 1rem 0;
      text-align: center;
      line-height: 1.3;
      letter-spacing: 2px;
      font-size: 1.125em;
    }
    
    /******************************
     * FLEXBOX STYLES
     * ******************************/
    .dice {
      display: flex;
      margin-top: 4rem;
      justify-content: center;
    }
    
    .face {
      display: flex;
      width: 6rem;
      height: 6rem;
      margin: 0 0.7rem;
      padding: 1.5rem;
      border-radius: 5px;
      opacity: 0;
    }
    .face .dot {
      width: 0.8rem;
      height: 0.8rem;
      background: #F44336;
      border-radius: 50%;
    }
    .face:nth-child(1) {
      border: 2px solid #F44336;
      -webkit-animation: waves 5s linear infinite;
              animation: waves 5s linear infinite;
    }
    .face:nth-child(1) .dot {
      background: #F44336;
    }
    .face:nth-child(2) {
      border: 2px solid #E91E63;
      -webkit-animation: waves 5s 0.2s linear infinite;
              animation: waves 5s 0.2s linear infinite;
    }
    .face:nth-child(2) .dot {
      background: #E91E63;
    }
    .face:nth-child(3) {
      border: 2px solid #9C27B0;
      -webkit-animation: waves 5s 0.4s linear infinite;
              animation: waves 5s 0.4s linear infinite;
    }
    .face:nth-child(3) .dot {
      background: #9C27B0;
    }
    .face:nth-child(4) {
      border: 2px solid #673AB7;
      -webkit-animation: waves 5s 0.6s linear infinite;
              animation: waves 5s 0.6s linear infinite;
    }
    .face:nth-child(4) .dot {
      background: #673AB7;
    }
    .face:nth-child(5) {
      border: 2px solid #3F51B5;
      -webkit-animation: waves 5s 0.8s linear infinite;
              animation: waves 5s 0.8s linear infinite;
    }
    .face:nth-child(5) .dot {
      background: #3F51B5;
    }
    .face:nth-child(6) {
      border: 2px solid #2196F3;
      -webkit-animation: waves 5s 1s linear infinite;
              animation: waves 5s 1s linear infinite;
    }
    .face:nth-child(6) .dot {
      background: #2196F3;
    }
    
    .first-face {
      justify-content: center;
      align-items: center;
    }
    
    .second-face {
      justify-content: space-between;
    }
    .second-face .dot:last-of-type {
      align-self: flex-end;
    }
    
    .third-face {
      justify-content: space-between;
    }
    .third-face .dot:nth-child(2) {
      align-self: center;
    }
    .third-face .dot:last-of-type {
      align-self: flex-end;
    }
    
    .fourth-face {
      justify-content: space-between;
    }
    .fourth-face .column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .fifth-face {
      justify-content: space-between;
    }
    .fifth-face .column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .fifth-face .column:nth-child(2) {
      justify-content: center;
    }
    
    .sixth-face {
      justify-content: space-between;
    }
    .sixth-face .column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    /*******************************************************/
    @-webkit-keyframes waves {
      0% {
        transform: translateY(0);
        opacity: 0;
      }
      4% {
        transform: translateY(-25px);
        opacity: 1;
      }
      8% {
        transform: translateY(0);
        opacity: 1;
      }
      70% {
        opacity: 0;
      }
    }
    @keyframes waves {
      0% {
        transform: translateY(0);
        opacity: 0;
      }
      4% {
        transform: translateY(-25px);
        opacity: 1;
      }
      8% {
        transform: translateY(0);
        opacity: 1;
      }
      70% {
        opacity: 0;
      }
    }