:root{
    --twidth: 200;
    --tborder: calc(var(--twidth) / 50);
    --tpadding: -2;
    --tzoom: 1.2;
}
@media only screen and (max-width: 700px) {
    :root{
        --twidth: 200;
    }
}
@media only screen and (max-width: 500px) {
    :root{
        --twidth: 150;
    }
}
@media only screen and (min-width: 700px) {
    :root{
        --twidth: 250;
    }
}

@media only screen and (min-width: 900px) {
    :root{
        --twidth: 300;
    }
}
@media only screen and (min-width: 1200px) {
    :root{
        --twidth: 350;
    }
}

@media (min-aspect-ratio: 5/3) {
    .gal-row-3{
        visibility: hidden;
    }
}
@media (min-aspect-ratio: 3/1) {
    .gal-row-2, .gal-row-3{
        visibility: hidden;
    }
}

:root{
    --tborder: calc(var(--twidth) / 100);
    --tborder: calc(var(--twidth) / 80);
    --tpadding: -2;
    --tspacing: 8px;
    --tzoom: 1.2;
    --tbordercolor: #0c082d;
    --tbordercolor: #040212;
}


body{
    overflow-x: hidden;
    width: 100%;
    overflow-x: hidden;
}
.gallery-wrapper{
    text-align: center;
    margin-top: calc(1px * var(--twidth) * (var(--tzoom) - 1) - 11px);
    margin-bottom: calc(1px * var(--twidth) * (var(--tzoom) - 1) - 11px);
}
.gallery {
    clear: both;
    /* height: 100%; */
    padding-right: calc(1px * var(--twidth) / 2 );
    /* margin-right: calc(1px * var(--twidth) / -1); */
    margin: 0px;
    margin-top: calc(-1px * var(--twidth)* (var(--tzoom) - 1) - 11px);
    margin-bottom: calc(-1px * var(--twidth) * (var(--tzoom) - 1) - 11px);
    padding-top: calc(1px * var(--twidth) * (var(--tzoom) - 1) / 2);
    padding-bottom: calc(1px * var(--twidth) * (var(--tzoom) - 1) / 2);
    width: calc(100% - 500) !important;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}
.gallery:before {
    content: "";
    margin-left: -100%;
}
.gallery:after {
    content: "";
    margin-right: -100%;
}
/*
.gallery::before{
    width: calc(vw);
    height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}*/
.wraptri{
    width: calc(1px * var(--twidth));
    height: calc(1px * var(--twidth) * .866);
    margin: calc(var(--tspacing) + 1px * var(--tpadding)) calc(var(--tspacing) + 1px * (var(--twidth) / -2 + 3*var(--tpadding))) auto auto;
    -webkit-backface-visibility: hidden;
    display:inline-block;
}
.triangle{
    width: calc(1px * var(--twidth));
    height: calc(1px * var(--twidth) * .866);
    background-color: var(--tbordercolor);
    background-position: center center;
    float: left;
    position: absolute;
    z-index: 0;
    -webkit-backface-visibility: hidden;
}

.triangle-before {
    content: '';
    width: calc(1px * (var(--twidth) - var(--tborder) * 2));
    height: calc(1px * (var(--twidth) * .866 - var(--tborder) * 2));
    display: block;
    position: absolute;
    background-size: cover;
    top: calc(var(--tborder) * 2));
    z-index: 1;
    background-color: var(--bgcolordark);
    background-image: url('/images/blank_t120.png');
    transition: background 1s ease-in .1s;
    -moz-transition: background 1s ease-in .1s;
    -o-transition: background 1s ease-in .1s;
    -webkit-transition: background 1s ease-in .1s;
    -webkit-backface-visibility: hidden;
}
.t-up-before{
    bottom: calc(1px * (var(--tborder) / 1.65));
    left:  calc(1px * (var(--tborder)));
}
.t-down-before{
    top: calc(1px * (var(--tborder) / 1.65));
    left:  calc(1px * (var(--tborder)));
}

.wraptri {
    position: relative;
    z-index: 2;
    transition: z-index 0.2s step-end, transform .2s ease-out;
}

.wraptri:hover {
    z-index: 5;
    transition: z-index 0.001s step-end, transform .15s ease-out .12s;
    transform: scale(var(--tzoom)); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.t-up, .t-up-before, .wraptri-up{
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.t-down, .t-down-before, .wraptri-down{
    clip-path: polygon(0 0, 100% 0, 50% 100% );
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100% );
}