/*/////////////////////////////////////////////
// ggExpandableOptions Cell JS/CSS PlugIn V4 //
//  Developed by: Ing.Gerardo Garita J.      //
//                FullStack Developer        //
//  email:  info@ggaritaj.com                //
//  date:       friday, 2018-07-27           //
//  last date:  friday, 2018-07-27           //
/////////////////////////////////////////////*/

.expandableContainer {
    position: relative;
}
.expandableContainer img {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, width 0.3s, height 0.3s;
    transition: transform 0.3s, opacity 0.3s, width 0.3s, height 0.3s;
}
.expandableContainer img.menu {
    z-index: 100;
    opacity: 1;
    margin-left: -9px;
    margin-top: -9px;
    padding: 1px;
    background: #fff;
    border-radius: 25px;
}
.expandableContainer img.menu.active {
    opacity: 0.8;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
}
.expandableContainer img.menu.active + .menuConverted img.option {
    z-index: 110;
}
.expandableContainer img.menu.active + .menuConverted img {
    z-index: 1000;
    height: 32px;
    width: 32px;
}
.expandableContainer img.menu.active + .menuConverted img:hover {
    opacity: 0.9;
    height: 37px !important;
    width: 37px !important;
}

div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -66px, 0);
    transform: translate3d(0px, -66px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(35px, -50px, 0);
    transform: translate3d(35px, -50px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(60px, -21px, 0);
    transform: translate3d(60px, -21px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(60px, 20px, 0);
    transform: translate3d(60px, 20px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(35px, 50px, 0);
    transform: translate3d(35px, 50px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(0px, 65px, 0);
    transform: translate3d(0px, 65px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-35px, 50px, 0);
    transform: translate3d(-35px, 50px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(8) {
    -webkit-transform: translate3d(-60px, 20px, 0);
    transform: translate3d(-60px, 20px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(9) {
    -webkit-transform: translate3d(-60px, -21px, 0);
    transform: translate3d(-60px, -21px, 0);
}
div.expandableContainer.ten img.menu.active + .menuConverted img.option:nth-child(10) {
    -webkit-transform: translate3d(-35px, -51px, 0);
    transform: translate3d(-35px, -51px, 0);
}

div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -55px, 0);
    transform: translate3d(0px, -55px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(35px, -40px, 0);
    transform: translate3d(35px, -40px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(55px, -5px, 0);
    transform: translate3d(55px, -5px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(45px, 32px, 0);
    transform: translate3d(45px, 32px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(20px, 55px, 0);
    transform: translate3d(20px, 55px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-20px, 55px, 0);
    transform: translate3d(-20px, 55px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-45px, 32px, 0);
    transform: translate3d(-45px, 32px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(8) {
    -webkit-transform: translate3d(-55px, -5px, 0);
    transform: translate3d(-55px, -5px, 0);
}
div.expandableContainer.nine img.menu.active + .menuConverted img.option:nth-child(9) {
    -webkit-transform: translate3d(-35px, -40px, 0);
    transform: translate3d(-35px, -40px, 0);
}

div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(23px, -45px, 0);
    transform: translate3d(23px, -45px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(50px, -20px, 0);
    transform: translate3d(50px, -20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(50px, 20px, 0);
    transform: translate3d(50px, 20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(23px, 45px, 0);
    transform: translate3d(23px, 45px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-23px, 45px, 0);
    transform: translate3d(-23px, 45px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-50px, 20px, 0);
    transform: translate3d(-50px, 20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-50px, -20px, 0);
    transform: translate3d(-50px, -20px, 0);
}
div.expandableContainer.eight img.menu.active + .menuConverted img.option:nth-child(8) {
    -webkit-transform: translate3d(-23px, -45px, 0);
    transform: translate3d(-23px, -45px, 0);
}

div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(40px, -30px, 0);
    transform: translate3d(40px, -30px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(45px, 10px, 0);
    transform: translate3d(45px, 10px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(25px, 45px, 0);
    transform: translate3d(25px, 45px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-25px, 45px, 0);
    transform: translate3d(-25px, 45px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-45px, 10px, 0);
    transform: translate3d(-45px, 10px, 0);
}
div.expandableContainer.seven img.menu.active + .menuConverted img.option:nth-child(7) {
    -webkit-transform: translate3d(-40px, -30px, 0);
    transform: translate3d(-40px, -30px, 0);
}

div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(45px, -20px, 0);
    transform: translate3d(45px, -20px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(45px, 25px, 0);
    transform: translate3d(45px, 25px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(0px, 50px, 0);
    transform: translate3d(0px, 50px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-45px, 25px, 0);
    transform: translate3d(-45px, 25px, 0);
}
div.expandableContainer.six img.menu.active + .menuConverted img.option:nth-child(6) {
    -webkit-transform: translate3d(-45px, -20px, 0);
    transform: translate3d(-45px, -20px, 0);
}

div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(50px, -20px, 0);
    transform: translate3d(50px, -20px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(35px, 40px, 0);
    transform: translate3d(35px, 40px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(-35px, 40px, 0);
    transform: translate3d(-35px, 40px, 0);
}
div.expandableContainer.five img.menu.active + .menuConverted img.option:nth-child(5) {
    -webkit-transform: translate3d(-50px, -20px, 0);
    transform: translate3d(-50px, -20px, 0);
}

div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(40px, -35px, 0);
    transform: translate3d(40px, -35px, 0);
}
div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(40px, 35px, 0);
    transform: translate3d(40px, 35px, 0);
}
div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(-40px, 35px, 0);
    transform: translate3d(-40px, 35px, 0);
}
div.expandableContainer.four img.menu.active + .menuConverted img.option:nth-child(4) {
    -webkit-transform: translate3d(-40px, -35px, 0);
    transform: translate3d(-40px, -35px, 0);
}

div.expandableContainer.three img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(0px, -50px, 0);
    transform: translate3d(0px, -50px, 0);
}
div.expandableContainer.three img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(45px, 25px, 0);
    transform: translate3d(45px, 25px, 0);
}
div.expandableContainer.three img.menu.active + .menuConverted img.option:nth-child(3) {
    -webkit-transform: translate3d(-45px, 25px, 0);
    transform: translate3d(-45px, 25px, 0);
}

div.expandableContainer.two img.menu.active + .menuConverted img.option:nth-child(1) {
    -webkit-transform: translate3d(-55px, 1px, 0);
    transform: translate3d(-55px, 1px, 0);
}
div.expandableContainer.two img.menu.active + .menuConverted img.option:nth-child(2) {
    -webkit-transform: translate3d(55px, 1px, 0);
    transform: translate3d(55px, 1px, 0);
}