.g_content{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: opacity 333ms ease-in;
    -moz-transition: opacity 333ms ease-in;
    -o-transition: opacity 333ms ease-in;
    transition: opacity 333ms ease-in;
    z-index: -1;
}

.g_content.g_active{
    opacity: 1;
    z-index: 0;
    -webkit-transition: opacity 333ms ease-out;
    -moz-transition: opacity 333ms ease-out;
    -o-transition: opacity 333ms ease-out;
    transition: opacity 333ms ease-out;
}

.g_button
{
    position: relative;
}

.g_button.g_active{
    background-color: #FFFFFF55
}

.gallery_button_left_back_blur{
    opacity: 0; transition: opacity 0.3s ease-out;
    mask-image: linear-gradient(90deg, black, transparent); 
       --myColor1: #7700cc00;
       --myColor2: #7700cc66;
       --myColor3: #7700ccff;
       --myColor4: #cc33ffff;
       background: radial-gradient(at -30% 50%, var(--myColor4) calc(-100% + var(--pos)),
                                               var(--myColor3) calc(-83% + var(--pos)),
                                               var(--myColor2) calc(-66% + var(--pos)),
                                               var(--myColor1) calc(-50% + var(--pos)),
                                               var(--myColor2) calc(-33% + var(--pos)),
                                               var(--myColor3) calc(-16% + var(--pos)),
                                               var(--myColor4) calc(0% + var(--pos)),
                                               var(--myColor3) calc(16% + var(--pos)),
                                               var(--myColor2) calc(33% + var(--pos)),
                                               var(--myColor1) calc(50% + var(--pos)),
                                               var(--myColor2) calc(66% + var(--pos)),
                                               var(--myColor3) calc(83% + var(--pos)),
                                               var(--myColor4) calc(100% + var(--pos)));
       display: flex; position: absolute; flex-direction: row; width: 30%;  height:  160%; left: -10%; top: -30%; bottom: -30%  
}

.gallery_button_right_back_blur{
    opacity: 0; transition: opacity 0.3s ease-out;
    mask-image: linear-gradient(-90deg, black, transparent); 
       --myColor1: #7700cc00;
       --myColor2: #7700cc66;
       --myColor3: #7700ccff;
       --myColor4: #cc33ffff;
       background: radial-gradient(at 130% 50%, var(--myColor4) calc(-100% + var(--pos)),
                                               var(--myColor3) calc(-83% + var(--pos)),
                                               var(--myColor2) calc(-66% + var(--pos)),
                                               var(--myColor1) calc(-50% + var(--pos)),
                                               var(--myColor2) calc(-33% + var(--pos)),
                                               var(--myColor3) calc(-16% + var(--pos)),
                                               var(--myColor4) calc(0% + var(--pos)),
                                               var(--myColor3) calc(16% + var(--pos)),
                                               var(--myColor2) calc(33% + var(--pos)),
                                               var(--myColor1) calc(50% + var(--pos)),
                                               var(--myColor2) calc(66% + var(--pos)),
                                               var(--myColor3) calc(83% + var(--pos)),
                                               var(--myColor4) calc(100% + var(--pos)));
       display: flex; position: absolute; flex-direction: row; width: 30%;  height:  160%; right: -10%; top: -30%; bottom: -30% 
}

.gallery_button_left_back
{
    opacity: 0;  transition: opacity 0.3s ease-out;
    --myColor1: #7700cc00;
    --myColor2: #7700cc66;
    --myColor3: #7700ccff;
    --myColor4: #cc33ffff;
    background: radial-gradient(at -30% 50%, var(--myColor4) calc(-100% + var(--pos)),
                                            var(--myColor3) calc(-83% + var(--pos)),
                                            var(--myColor2) calc(-66% + var(--pos)),
                                            var(--myColor1) calc(-50% + var(--pos)),
                                            var(--myColor2) calc(-33% + var(--pos)),
                                            var(--myColor3) calc(-16% + var(--pos)),
                                            var(--myColor4) calc(0% + var(--pos)),
                                            var(--myColor3) calc(16% + var(--pos)),
                                            var(--myColor2) calc(33% + var(--pos)),
                                            var(--myColor1) calc(50% + var(--pos)),
                                            var(--myColor2) calc(66% + var(--pos)),
                                            var(--myColor3) calc(83% + var(--pos)),
                                            var(--myColor4) calc(100% + var(--pos)));
    display: flex; position: absolute; flex-direction: row; width: 30%;  height:  160%; left: -10%; top: -30%; bottom: -30% 
}


.gallery_button_right_back{
    
    opacity: 0; transition: opacity 0.3s ease-out;
    --myColor1: #7700cc00;
    --myColor2: #7700cc66;
    --myColor3: #7700ccff;
    --myColor4: #cc33ffff;
    background: radial-gradient(at 130% 50%, var(--myColor4) calc(-100% + var(--pos)),
                                            var(--myColor3) calc(-83% + var(--pos)),
                                            var(--myColor2) calc(-66% + var(--pos)),
                                            var(--myColor1) calc(-50% + var(--pos)),
                                            var(--myColor2) calc(-33% + var(--pos)),
                                            var(--myColor3) calc(-16% + var(--pos)),
                                            var(--myColor4) calc(0% + var(--pos)),
                                            var(--myColor3) calc(16% + var(--pos)),
                                            var(--myColor2) calc(33% + var(--pos)),
                                            var(--myColor1) calc(50% + var(--pos)),
                                            var(--myColor2) calc(66% + var(--pos)),
                                            var(--myColor3) calc(83% + var(--pos)),
                                            var(--myColor4) calc(100% + var(--pos)));
    display: flex; position: absolute; flex-direction: row; width: 30%;  height:  160%; right: -10%; top: -30%; bottom: -30% 
}

.gallery_button_right_1{
    --myColor3: #7700cc00;
    --myColor4: #7700ccff;
    background: linear-gradient(90deg,      var(--myColor3) calc(-100% + var(--pos)),
                                            var(--myColor3) calc(-66% + var(--pos)),
                                            var(--myColor4) calc(-33% + var(--pos)),
                                            var(--myColor3) calc(0% + var(--pos)),
                                            var(--myColor3) calc(33% + var(--pos)),
                                            var(--myColor4) calc(66% + var(--pos)),
                                            var(--myColor3) calc(100% + var(--pos)),
                                            var(--myColor3) calc(133% + var(--pos)));
    mask-image: url('../../content/img/arrow.svg'); 
    mask-repeat: no-repeat;
    mask-size: content;
    mask-position: calc(50% + var(--posoffset)) 50%;
    display: flex; flex-direction: row; width: 100%;  height:  100%; right: 0%; top: 0%; bottom: 0% 
}

.gallery_button_right_2{
    --myColor2: #7700ccff;
    --myColor3: #8806d3ff;
    --myColor4: #cc33ffff;
    background: linear-gradient(90deg,      var(--myColor3) calc(-100% + var(--pos)),
                                            var(--myColor2) calc(-84% + var(--pos)),
                                            var(--myColor3) calc(-66% + var(--pos)),
                                            var(--myColor4) calc(-33% + var(--pos)),
                                            var(--myColor3) calc(0% + var(--pos)),
                                            var(--myColor2) calc(16% + var(--pos)),
                                            var(--myColor3) calc(33% + var(--pos)),
                                            var(--myColor4) calc(66% + var(--pos)),
                                            var(--myColor3) calc(100% + var(--pos)),
                                            var(--myColor2) calc(116% + var(--pos)),
                                            var(--myColor3) calc(133% + var(--pos)));
mask-image: url('../../content/img/arrow.svg'); 
mask-repeat: no-repeat;
mask-size: content;
mask-position: calc(50% + var(--posoffset)) 50%;
display: flex; position: absolute; flex-direction: row; width: 100%;  height:  100%; right: 0%; top: 0%; bottom: 0% 
}

.gallery_button_left_1
{
    transform: rotate(180deg);
    --myColor3: #7700cc00;
    --myColor4: #cc33ffff;
    background: linear-gradient(90deg,      var(--myColor3) calc(-100% + var(--pos)),
                                            var(--myColor3) calc(-66% + var(--pos)),
                                            var(--myColor4) calc(-33% + var(--pos)),
                                            var(--myColor3) calc(0% + var(--pos)),
                                            var(--myColor3) calc(33% + var(--pos)),
                                            var(--myColor4) calc(66% + var(--pos)),
                                            var(--myColor3) calc(100% + var(--pos)),
                                            var(--myColor3) calc(133% + var(--pos)));
mask-image: url('../../content/img/arrow.svg'); 
mask-repeat: no-repeat;
mask-size: content;
mask-position: calc(50% + var(--posoffset)) 50%;
display: flex; flex-direction: row; width: 100%;  height:  100%; right: 0%; top: 0%; bottom: 0% 
}


.gallery_button_left_2{
    transform: rotate(180deg);
    --myColor2: #7700ccff;
    --myColor3: #8806d3ff;
    --myColor4: #cc33ffff;
    background: linear-gradient(90deg,      var(--myColor3) calc(-100% + var(--pos)),
                                            var(--myColor2) calc(-84% + var(--pos)),
                                            var(--myColor3) calc(-66% + var(--pos)),
                                            var(--myColor4) calc(-33% + var(--pos)),
                                            var(--myColor3) calc(0% + var(--pos)),
                                            var(--myColor2) calc(16% + var(--pos)),
                                            var(--myColor3) calc(33% + var(--pos)),
                                            var(--myColor4) calc(66% + var(--pos)),
                                            var(--myColor3) calc(100% + var(--pos)),
                                            var(--myColor2) calc(116% + var(--pos)),
                                            var(--myColor3) calc(133% + var(--pos)));
mask-image: url('../../content/img/arrow.svg'); 
mask-repeat: no-repeat;
mask-size: content;
mask-position: calc(50% + var(--posoffset)) 50%;
display: flex; position: absolute; flex-direction: row; width: 100%;  height:  100%; right: 0%; top: 0%; bottom: 0% 
}