:root {
    touch-action: manipulation;
    scroll-smooth;
    
    
}

.triangle-right {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-left: 30px solid #FFF;
	border-bottom: 15px solid transparent;
}

.triangle-left {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-right: 30px solid #FFF;
	border-bottom: 15px solid transparent;
}

.arrow {
  border: solid black;
  border-width: 0 2px 2px 0;
  /* display: inline-block; */
  padding: 2px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.hidden-scrollbar
{
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.hidden-scrollbar::-webkit-scrollbar
{
    display:none;
}

.system-bg-color
{
    background-color: #F0F8F8;
}

.system-bg-color-dark
{
    background-color: #1CBFCA;
}

.system-color
{
    color: #1CBFCA;
}

.swipe-up
{
    transition: height 0.5s ease-in-out;
    height: 80dvh;
}

.swipe-down
{
    transition: height 0.5s ease-in-out;
}

/* .index-swipe { */
   /* opacity: 1; */
   /* visibility: visible; */
   /* display: flex; */
   /* transition: visibility 2s ease-in; */
   /* -moz-transition: visibility 2s ease-in; */
   /* -webkit-transition: visibility 2s ease-in; */
/* } */

/* .index-swipe-hidden { */
   /* opacity: 0; */
   /* display: none; */
   /* visibility: hidden; */
/* } */



input:focus {outline:none;}




/* profile headshot gallery */


.gallery-container
{
    height: 100dvw;
    width: 100dvw;
    max-width: 428px;
    max-height: 428px;
}


.gallery-scroll
{
    margin-top: 0.1 em;
    width: 100dvw;
    max-width: 428px;
    display: grid;
    grid-auto-columns: calc(100dvw/3);
    grid-auto-flow: column;
    grid-gap: 0.1em;
    overflow-x: auto;
}

.gallery-scroll > div
{
    width: calc(var(--wused, 100dvw)/3);
    height: calc(var(--wused, 100dvw)/3);
    max-width: 428px;
}

.gallery-scroll > div > img
{
    object-position: left top;
    object-fit: fill;
    width: 100%;    
    height: 100%;
}

.gallery-common-multiple
{
    display: grid;
    margin-top:5dvh;
    height: calc(var(--w, 100dvw) - (var(--wused, 100dvw)/3));
    width: 100dvw;
    max-width: 428px;
    max-height: 428px;
    background-color: black;
    grid-template: repeat(4, 1fr)/repeat(6, 1fr);
    grid-gap: 0.1em;
}

.gallery-common
{
    display: grid;
    height: 100dvw;
    width: 100dvw;
    max-width: 428px;
    max-height: 428px;
    background-color: black;
    grid-template: repeat(4, 1fr) / repeat(6, 1fr);
    grid-gap: 0.1em;
}

.gallery1-h > div:nth-child(1) {
    grid-column: span 6;
    grid-row: span 4;
}

.gallery1-v > div:nth-child(1) {
    grid-column: 2 / 6;
    grid-row: span 4;
}


.gallery2-h > div:nth-child(2n+1) {
    grid-column: span 6;
    grid-row: span 2;
}
.gallery2-h > div:nth-child(2n+2) {
    grid-column: span 6;
    grid-row: span 2;
}

.gallery2-v > div:nth-child(2n+1) {
    grid-column: span 3;
    grid-row: span 4;
}
.gallery2-v > div:nth-child(2n+2) {
    grid-column: span 3;
    grid-row: span 4;
}

.gallery3-h > div:nth-child(3n+1)
{
    grid-column: span 6;
    grid-row: span 2;
}
.gallery3-h > div:nth-child(3n+2)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery3-h > div:nth-child(3n+3)
{
    grid-column: span 3;
    grid-row: span 2;
}

.gallery3-v > div:nth-child(3n+1)
{
    grid-column: span 3;
    grid-row: span 4;
}
.gallery3-v > div:nth-child(3n+2)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery3-v > div:nth-child(3n+3)
{
    grid-column: span 3;
    grid-row: span 2;
}

.gallery4-h > div:nth-child(4n+1)
{
    grid-column: span 4;
    grid-row: span 2;
}
.gallery4-h > div:nth-child(4n+2)
{
    grid-column: span 2;
    grid-row: span 2;
}
.gallery4-h > div:nth-child(4n+3)
{
    grid-column: span 2;
    grid-row: span 2;
}
.gallery4-h > div:nth-child(4n+4)
{
    grid-column: span 4;
    grid-row: span 2;
}

.gallery4-v > div:nth-child(4n+1)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery4-v > div:nth-child(4n+2)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery4-v > div:nth-child(4n+3)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery4-v > div:nth-child(4n+4)
{
    grid-column: span 3;
    grid-row: span 2;
}


.gallery5-h > div:nth-child(5n+1)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery5-h > div:nth-child(5n+2)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery5-h > div:nth-child(5n+3)
{
    grid-column: span 2;
    grid-row: span 2;
}
.gallery5-h > div:nth-child(5n+4)
{
    grid-column: span 2;
    grid-row: span 2;
}
.gallery5-h > div:nth-child(5n+5)
{
    grid-column: span 2;
    grid-row: span 2;
}


.gallery5-v > div:nth-child(5n+1)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery5-v > div:nth-child(5n+2)
{
    grid-column: span 3;
    grid-row: span 2;
}
.gallery5-v > div:nth-child(5n+3)
{
    grid-column: span 2;
    grid-row: span 2;
}
.gallery5-v > div:nth-child(5n+4)
{
    grid-column: span 2;
    grid-row: span 2;
}
.gallery5-v > div:nth-child(5n+5)
{
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-common-multiple > div > img,
.gallery-common > div > img 
{
    width: 100%;
    height: 100%;
    /* min-height: 100%; */
    object-fit: cover;
    transition: all ease 1s;
    object-position: left top;
}

.gallery-common-multiple > div:hover img,
.gallery-common > div:hover img
{
    filter: blur(4px);
}

.gallery-common-multiple > div,
.gallery-common > div
{
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
}

.gallery-common-multiple div,
.gallery-common div
{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}