.g1,
.g2,
.g3,
.g4,
.g5,
.g6,
.g7 {
    /*transition: all linear 0.5s;*/
    transition: all 0.5s ease-in;
    color: #8a6d3b;
    border-color: #faebcc;
    border: thin;
    border-width: 0.5px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    padding: 10px;
    
}

.g5b,
.g6b,
.g7b,
.g8,
.g9,
.g10 {
    transition: all linear 0.5s;
    width: 100%;
    position: relative;
    top: 10px;
    left: 0;
    padding: 10px;
    /*top: 0;
    left: 0;*/
}
g9b {
    transition: all ease-in-out 0.5s;
    width: 100%;
    position: relative;
    background-color: whitesmoke;
    top: 0;
    left: 0;
    z-index: -1;
}
.g83b, .g83a, .g82, .g81 {
    /*transition: all linear 0.5s;*/
    transition: all 0.5s ease-in;
    color: #8a6d3b;
    border-color: #faebcc;
    border: thin;
    border-width: 0.5px;
    width: 100%;
    position: relative;
    /*top: 0;
    left: 0;*/
}

.smallSpaceOnBothSides {
    padding-left: 10px;
    padding-right: 10px;
    width: 100px;
}

.ng-hide, .ng-show {
    height: 0;
    width: 0;
    background-color: whitesmoke;
    top: -100px;
    left: 100%;
    position: relative;
    z-index: -1;
}