.button{
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    font-family: neometricmedium, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.125rem;
    cursor: pointer;
    //animation OUT
    transition: all 300ms ease-in-out;
}
.button.button--negative {
     background-color: white;
     color: lime;
 }

.button.button--negative:hover,
.button.button--negative:active,
.button.button--negative:focus{
    background-color: lime;
    color: white;
    //animation IN
    transition: all 300ms ease-in-out;
}





&.button--positive{
     background-color: lime;
     color: white;
    &:hover, &:active, &:focus{
        background-color: white;
        color: lime;
        //animation IN
        transition: all 300ms ease-in-out;
    }
}
}



@keyframes pulseHotspot {
    0% { transform: scale(0.9); opacity: 0.9}
    50% { transform: scale(1.1); opacity: 0.7}
    70% { transform: scale(1.1); opacity: 0.7}
    100% { transform: scale(0.9); opacity: 0.9}
}

@keyframes pulsate {
    0% { transform: scale(0.1); opacity: 0; border-width: 1px}
    40% { transform: scale(1); opacity: 1; border-width: 1px}
    70% { transform: scale(1.1); opacity: 1; border-width: 1px}
    100% { transform: scale(1.5); opacity: 0 ; border-width: 0px}
}
@keyframes pulsate2 {
    0% { width: 0px; height: 0px; left: 8px; top: 8px; opacity: 0}
    85% { width: 22px; height: 22px; left: -2px; top: -2px;opacity: 1}
    100% { width: 34px; height: 34px; left: -7px; top: -7px; opacity: 0}
}
@keyframes pulsate3 {
    0% { width: 0px; height: 0px; left: 0px; top: 0px; opacity: 1}
    50% { width: 200px; height: 200px; left: -100px; top: -100px;opacity: 1}
    100% { width: 300px; height: 300px; left: -50px; top: -50px; opacity: 0}
}

.kr__hotspot{
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    opacity: 0.9;
    transition: opacity 0.2s;
    cursor: pointer;
}
.kr__hotspot .dot{
    display: block;
    width: 100px;
    height: 100px;
    background-color: white;
    background-image: url("../skin/buttons/nano.hotspot.purple.png") !important;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    animation: pulseHotspot 1.5s  ;
    animation-iteration-count: infinite;
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.28);
}


.kr__hotspot .pulse{
    border: 1px solid #ffffff !important;
    height: 100px;
    width: 100px;
    position: absolute;
    left: -1px;
    top: -1px;
    border-radius: 50%;
    animation: pulsate 1.5s ease-out;
    animation-iteration-count: infinite;
    transform-origin: center center;
}


.kr__hotspot--small{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    opacity: 0.9;
    transition: opacity 0.2s;
    cursor: pointer;
}
.kr__hotspot--small .dot{
    display: block;
    width: 50px;
    height: 50px;
    background-color: white;
    background-image: url("../skin/buttons/nano.hotspot.purple.png") !important;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    animation: pulseHotspot 1.5s  ;
    animation-iteration-count: infinite;
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.28);
}


.kr__hotspot--small .pulse{
    border: 1px solid #ffffff !important;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 50%;
    animation: pulsate 1.5s ease-out;
    animation-iteration-count: infinite;
    transform-origin: center center;
}


/*.dotaudio{*/
/*    display: block;*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    background-color: lime;*/
/*    background-image: url("../pano/hotspot.audio.png");*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*    border-radius: 50%;*/
/*    animation: pulseHotspot 1.5s  ;*/
/*    animation-iteration-count: infinite;*/
/*    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.28);*/
/*}*/


/*.dotendoftour{*/
/*    display: block;*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    background-color: lime;*/
/*    background-image: url("../pano/hotspot.endoftour.png");*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*    border-radius: 50%;*/
/*    animation: pulseHotspot 1.5s  ;*/
/*    animation-iteration-count: infinite;*/
/*    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.28);*/
/*}*/

/*.dotclean{*/
/*    display: block;*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    background-color: lime;*/
/*    border-radius: 50%;*/
/*    animation: pulseHotspot 1.5s  ;*/
/*    animation-iteration-count: infinite;*/
/*    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.28);*/
/*}*/