.photon-holder{
    position: fixed;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 1s;
    background: #ffff79;
    touch-action: manipulation;
}

.photon-holder .layers{
    position: absolute;
    right: 20px;
    top: 105px;
}

.photon-holder .layers .layer{
    width: 35px;
    height: 35px;
    background: white;
    margin: 10px;
}

.layer[data-type=arc] {
    border-radius: 100px;
}

.photon-open{
    /*overflow: hidden;*/
}

.photon-open .photon-holder{
    bottom: 0;
}

.photon-open .navbar .backbar{
    transform: rotate(-16deg);
    background: #008044;
}

.photon-holder .tools{
    position: absolute;
    bottom: 5px;
    z-index: 10000;
    width: 100%;
    text-align: center;
}

.photon-holder .tools .tool{
    width: 40px;
    height: 40px;
    margin: 2px;
    /*background: yellow;*/
    display: inline-block;
}

.photon-holder .tools .tool.selected{
    border: 2px solid magenta;
}

.photon-holder .tools .tool{
    background-color: yellow;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.tool[name=form]{
    background-image: url(/img/photon/form-rect.png);
}

.tool[name=form][data-sub=arc]{
    background-image: url(/img/photon/form-arc.png);
}

.tool[name=pincel]{
    /*background-image: url(/img/photon/pincel.jpg);*/
}

.tool[name=salvar]{
    background-image: url(/img/photon/save.png);
}

.tool[name=transf]{
    background-image: url(/img/photon/transf-move.png);
}

.tool[name=transf][data-sub=rotate]{
    background-image: url(/img/photon/transf-rotate.png);
}