/* main container styles */
div.drum-wrapper {
    position: relative;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

div.drum-wrapper .inner {
    position: relative;
    overflow: hidden;
        padding-top: 25vh;
}

div.drum-wrapper div.container {
    position: absolute;
    width: 100%;
    left: 0px;
    -webkit-perspective: 1100px;
    -moz-perspective: 1100px;
    -o-perspective: 1100px;
    perspective: 1100px;
}

/* dail styles for mouse controls */
div.drum-wrapper .dial {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.7);
    display: none;
}

.outside div.drum-wrapper .dial {
    height: 58px;
}

div.drum-wrapper .dial div {
    width: 100%;
    height: 10vh;
    margin: 0 auto;
}

div.drum-wrapper .dial svg {
    position: absolute;
}

div.drum-wrapper .up {
    top: 0px; 
}

div.drum-wrapper .up svg {
    top: 2px
}

div.drum-wrapper .down {
    bottom: 0px;
}

div.drum-wrapper .down svg {
    bottom: 2px;
}

/* actual drum styles */
div.drum {
    width: 100%;
    height: 100%;
    position: inherit;
    top: 0px;
    left: 0px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

div.drum figure {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    /*line-height: 5em;*/
    margin: 0px;
    padding: 0px 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

div.drum-wrapper figure, #drum_drumAnswer1 figure { 
}

div.crgDrum {
/*    float:left;
    margin-left:5%;*/
}

div.drum-wrapper {
    margin-right: 3vw;
    border: solid 1px ;
    text-align: center;
}

#drum_crgWard  {
    margin-right: 50vw;
}

#drum_crgHospital  {
    margin-right: 90vw;
}


#drum_crgWard , #drum_crgWard  {
    height: 50vh;
}

#drum_crgHospital , #drum_crgHospital, #drum_crgBed, #drum_crgBed   {
    height: 50vh;
}

#drum_crgBed {
    border: solid 1px ;
    text-align: center;
      margin-right: 30vw;
}


#drum_crgBed .container {
    top: 23vh;
    margin-left:5%;
}


#drum_crgWard .container {
    top: 23vh;
    margin-left:5%;
}

#drum_crgHospital .container {
    top: 23vh;
    margin-left:5%;
}


div.drum-wrapper {
    width: 100%;
}

  div.drum-wrapper,
  div.drum-wrapper .inner {
      /*height: 120px;*/
      min-height: 100%;
  
  }
  
  .outside div.drum-wrapper {
      height: 140px;
  }
  .outside div.drum-wrapper .inner {
      top: 12px;
  }
  .outside div.drum-wrapper .container {
      top: 46px;
  }