#thema-canvas {
text-align:center;
margin-bottom:40px;
margin-top:20px;
}
#thema-canvas .holder {
width:100%;
max-width:632px;  
display:inline-block;
position:relative;  
z-index:0;
}
#thema-canvas .img-middle {
position:absolute;
z-index:1;
left: 37%;
top: 22%;   
}
#thema-canvas img.bg {
width:inherit;
max-width:inherit;
}
#thema-canvas .item-holder {
position:absolute;
z-index:1;
}
#thema-canvas .item-holder-0 {
left:15%;
top:12%;
z-index:2;
}
#thema-canvas .item-holder-1 {
left: 38%;
top: 48%;
z-index:2;
}
#thema-canvas .item-holder-2 {
left: 64%;
top: 17%;
z-index:1;
}
#thema-canvas .item-holder-3 {
left: 83%;
top: 61%;
z-index:1;
}
#thema-canvas .item-hover {
}
#thema-canvas .holder-text-hover {
position:absolute;
right: -5px;
top: -5px;     
display:none;
text-align:left;
}
#thema-canvas .holder-text-hover.active {
display:block;
}
#thema-canvas .holder-text-hover a {
position: absolute;
z-index: 2;
bottom: -30px;
width: 295px;
height: 75px;
left: 36px;
color: #000;
font-size: 22px;
text-align: left;
line-height: 25px;     
}
#thema-canvas img.arrow {
padding-left:5px;
width: 22px;
height: 15px;
}
@media (max-width: 991px) {
#thema-canvas .img-middle {
width:90px;
} 
}
@media (max-width: 767px) {
#thema-canvas .img-middle {
width:60px;
} 
#thema-canvas img.item {
width:40px;
}
#thema-canvas img.item-hover-0 {
width:80px;
}  
#thema-canvas img.item-hover-1 {
width:170px;
}  
#thema-canvas img.item-hover-2 {
width:240px;
} 
#thema-canvas img.item-hover-3 {
width:270px;
}    
#thema-canvas .holder-text-hover a {
position: absolute;
z-index: 2;
bottom: -50px;
width: 205px;
height: 75px;
left: 22px;
color: #000;
font-size: 17px;
text-align: left;
line-height: 25px;
}    
}