#cards {
    text-align:center;
    width:100%;
    top:40%;
    bottom:0%;
    position:absolute;
    z-index:1;
    overflow:auto;
    -webkit-box-shadow: 0 3px 6px #000;
   -moz-box-shadow: 0 3px 6px #000;
   -ms-box-shadow: 0 3px 6px #000;
   -o-box-shadow: 0 3px 6px #000;
    box-shadow: 0 3px 6px #000;
   }
   
   .zoomImage {
    box-sizing:border-box;  
    background:#fff;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.35);
   -moz-box-shadow: 0 3px 6px rgba(0,0,0,.35);
   -ms-box-shadow: 0 3px 6px rgba(0,0,0,.35);
   -o-box-shadow: 0 3px 6px rgba(0,0,0,.35);
    box-shadow: 0 3px 6px rgba(0,0,0,.35);
    border-radius:1em;
    max-width:314px;
    margin:auto;
    overflow: hidden; 
    position:relative;
    border:1px solid #999;
    height: 35%;
    top:2.5%; 
    cursor:pointer;
   }
   .zoomBack{
     position:absolute;
     left:10px;
     color:black;
     text-shadow: 0 0px 3px white,0 0px 3px white,0 0px 3px white,0 0px 3px white;
   }
   
   #zoomImg {
       position:absolute;
       display:block;
       margin-bottom:10px;
   }
   
   .closeBtn {
    right:166px;
   }
   .closeBtn:hover {
    background-color: #aaaaaa;
    color:white;
   }
   
   .selectBtn {
    color:#46b5fb;
    right:16px;
   }
   .selectBtn:hover {
    background-color: #46b5fb;
    color:white;
   }
   
   .largeButton {
    display:inline-block;
    width:150px;
    text-align:center;
    cursor:pointer;
    padding-top:0.3em;
    padding-bottom:0.3em;
    box-sizing:border-box;  
    margin:1em;
    border:1px solid #46b5fb;
   }
   
   .card.highlight {
     background-color: #CEF !important;
   }
   .card.usedItem {
     background-color: #EEE;
   }
   
   .card {
    vertical-align:top;
    text-align:center;
    padding:10px; /* script sets this in pixels */
    background:#fff;
    margin:5px;
    position:relative;
    cursor:pointer;
    box-sizing:border-box;  
    line-height:0em;
    z-index : 0;
   
   -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.35);
   -moz-box-shadow: 0 3px 6px rgba(0,0,0,.35);
   -ms-box-shadow: 0 3px 6px rgba(0,0,0,.35);
   -o-box-shadow: 0 3px 6px rgba(0,0,0,.35);
    box-shadow: 0 3px 6px rgba(0,0,0,.35);
    border-radius:1em;
   
    display:inline-block;
    width:150px;
    height:95px;
    overflow:hidden;
   }
   
   .card .cardInner {
    padding:5px;
    display:table-cell;
    vertical-align:middle;
   }
   .verticalCenterBox {
    display:table;
    width: 100%;
    height: 100%;
   }
   .verticalCenterBoxInner {
     display:table-cell;
     vertical-align:middle;
   }
   
   .card img {
    max-width:130px;
    max-height:75px;
   }
   
   .card .infoicon {
    background: white;
    border-radius: 20px;
   }
   
   .card .hintbtn {
    position:absolute;
    right:5px;
    top:5px;
    padding:0px;
    color:#666; 
    cursor:pointer;
    text-shadow:
       -1px -1px 0 #fff,
       1px -1px 0 #fff,
       -1px 1px 0 #fff,
       1px 1px 0 #fff;
   }
   
   .card .hintbtn_audio,.card .hintbtn_video,.card .hintbtn_speech   {
    margin-top:0.2em;
   }
   
   .card .hintbtn_image {
    /* place i icon on top of image */
    position:absolute;
    top:0.2em;
    right:0.2em;
   }
   
   .card .playVideoBtn {
    position:absolute;
    left:50%;
    margin-left:-0.5em;
    margin-top:0.1em;
    font-size:5em;
    color:#f3f3f3;
   }
   
   .card .playVideoBtn:hover {
    color:white;
    cursor:pointer;
   }
   
   .card .playMediaBtn {
    position:relative;
    text-align:center;
    color:#333;
   
    display:inline-block;
    padding:0.5em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    background:#f3f3f3;
    border-radius:10px;
   }
   
   .card .playMediaBtn:hover {
    color:#1177b2;
    cursor:pointer;
   }
   
   .card .videoThumb {
    cursor:pointer;
    margin-top:3px;
   }
   .modal-dialog .videoThumb {
    display:none;
   }
   
   /* Play Speech Button in Dialog */
   #modalContentInner > a {
    display:inline-block;
    padding:1em;
    padding-top:0.5em;
    padding-bottom:0.5em;
    background:#3197d2;
    cursor:pointer;
    color:white;
    border-radius:10px;
    margin-top:1em;
   }
   #modalContentInner > a:hover {
    background:#51B7F2;
   }
   
   #modalContentInner {
    margin-top:5px;
   }
   
   #scrollPanel {
     position:absolute;
     width:100%;
     height:100%;
     top:0;
     left:0;
     overflow:auto;
     background: transparent center center no-repeat;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
   #wrapper {
     box-sizing:border-box;
     position:absolute;
     width:100%;
     height:100%;
     top:0%;
     left:0%;
     z-index:1;
     display:table;
     table-layout: fixed;
   }
   
   #mainimage {
     display:table-cell;
     vertical-align:middle;
     text-align:center;
     position:relative;
   }
   
   #baseimg {
   /*  max-width:100%; */
   }
   .resizeText {
     overflow-wrap: normal;
   }
   
   .borderFrame{
    -webkit-box-shadow:0px 0px 10px #000;
    -moz-box-shadow:0px 0px 10px #000;
    box-shadow:0px 0px 10px #000;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px 5px 5px 5px;
    background:white;
    border:1px solid gray;
   }
   
    
   #solutionPanel {
       background:#fff;
       display:none;
       position:absolute;
       z-index:5001;
       min-height:100%;
       height:100%;
       width:100%;
       top:0px;
       overflow:auto;
     background-image:url("back.jpg");
   }
   
   .solutions {
       float:left;
       border:1px solid #999;
       margin-left:20px;
       margin-bottom:20px;
       background-color:#eee;
       padding-top:2px;
       padding-bottom:2px;
       cursor:pointer;
   }
   
   .solutions:hover {
       background:#ffc;
   }
   
   #solutionMarker {
       position:absolute;
   }
   
   #markerLayer {
       position:absolute;
       left:0px;
       top:0px;
       visibility:hidden;
   }
   .markInner {
         position: absolute;
       top: 0;
       left: 0;
   }
   .marker_inner {
       font-size:14px;
       position:absolute;
       border:1px solid #999;
       padding:3px;
       top:22px;
       background:#FFF;
       border-radius:5px;
       white-space: nowrap;
   }
   .marker_inner.left {
       left:4px;
   }
   .marker_inner.right {
       right:4px;
   }
   
   .marker_inner img {
       max-width:150px;
       max-height:120px;
       padding:0px !important;
   }
   .marker{
       position:absolute;
       cursor:pointer;
   }
   .marker svg {
       width:32px;
       height:32px;
         top: -8px;
       left: -4px;
         position: relative;
       border-radius: 100%;
   }
   #solutionMarker.marker svg {
         top: 0px;
       left: 0px;
   }
   
   .marker:hover  {
       z-index:100;
   }
   .marker_inner:hover {
       top:23px;
       z-index:100;
       background:#ffc;
   }
   
   #feedback {
     display: block; 
     position: absolute; 
     left: 50%; 
     margin-left: -180px; 
     top: 20%; 
     max-height: 60%; 
     width: 360px; 
     padding: 2%; 
     overflow: auto;
     
     webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     box-shadow: 0 3px 6px rgba(0,0,0,.5);
     -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     -ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     -o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     border: 10px solid #ddd;
     background: white;
     z-index: 100000;
   }