/**,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
}
*/
.close {
    position: fixed;
    background-image: url("../img/closeX.svg");
    top: calc(0% + 20px);
    left: calc(50% - 20px);
    width: 56px;
    height: 56px;
    z-index: 4; 
    cursor: pointer;
}
.wrapper {
    position: fixed;
    top:  calc(0% + 50px);
    left: 5px;
    height: 100%;
    width: calc(50% - 0px);
    /*max-width: 75rem;*/
    padding: 1rem 0rem 0rem 0rem;
    margin: 0 auto;
    z-index: 3;
    overflow-y: auto;
	border-top: thin solid #25D1D0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none; 
}

.wrapper::-webkit-scrollbar {
	display: none;
}
.gallery__link:hover .gallery__image {
    transform: scale(1.2);
}
.highlighteditem {
    filter: grayscale(100%) sepia(3%) brightness(80%) contrast(110%);
    }


.gallery {
    display: block;
    padding-bottom: 200px;
   gap: .25rem;
    }
.gallery__item {
   margin: 0.70rem;
    }

.gallery__link {
    position: relative;
    display: block;
    width: 100%;
    height: 225px;
    overflow: hidden;
    will-change: filter;
    }
.gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: 
    transform .5s,
    filter .5s;
}


@media screen and (min-width: 580px){
.close {
    top: calc(10% - 40px);
    left: calc(50% + -8px);
    width: 56px;
    height: 56px;
}
.wrapper {
    position: fixed;
    top:  calc(10% - 10px);
    left: 45px;
    height: 100%;
    width: calc(50% - 20px);
    /*max-width: 75rem;*/
    padding: 0.5rem 0rem 0.0rem 0rem;
    margin: 0 auto;
    z-index: 3;
    overflow-y: auto;
	border-top: thin solid #25D1D0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none; 
}
.gallery__link {
    position: relative;
    display: block;
    width: 100%;
    height: 310px;
    overflow: hidden;
    } 
 
}





@media screen and (min-width: 580px) and (min-height: 600px) {
.close {
    top: calc(10% - 44px);
    left: calc(50% + 60px);
    width: 44px;
    height: 44px;
}
.wrapper {
    position: fixed;
    top:  calc(10% - 20px);
    left: 10px;
    height: 100%;
    width: calc(50% + 75px);
    padding: 1.25rem 0rem 0rem 0rem;
    margin: 0 auto;
    z-index: 3;
    overflow-y: auto;
	border-top: thin solid #25D1D0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none; 
}
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(14, 12.5rem);
    gap: .10rem;
}

/* Gallery Link */
.gallery__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.gallery__item {
    /*  margin: 0.33rem;*/
    margin: 0.25rem;
    }


    
    
 .gallery__item--1 {
    grid-column: 1 / span 2;
     grid-row: 1 / span 1;
    }
.gallery__item--2 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    }
.gallery__item--3 {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    }
.gallery__item--4 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 2;
    }
.gallery__item--5 {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    }
.gallery__item--6 {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
    }
.gallery__item--7 {
    grid-column: 1 / span 2;
    grid-row: 5 / span 1;
    }
.gallery__item--8 {
    grid-column: 1 / span 1;
    grid-row: 6 / span 2;
    }
 .gallery__item--9 {
    grid-column: 2 / span 1;
    grid-row: 6 / span 1;
    }   
     

.gallery__item--10 {
    grid-column: 2 / span 1;
    grid-row: 7 / span 1;
    }   
    
.gallery__item--11 {
    grid-column: 1 / span 1;
    grid-row: 8 / span 1;
    }    
.gallery__item--12 {
    grid-column: 2 / span 1;
    grid-row: 8 / span 1;
    }   
    
.gallery__item--13 {
    grid-column: 1 / span 2;
    grid-row: 9 / span 1;
    }   
.gallery__item--14 {
    grid-column: 1 / span 1;
    grid-row: 10 / span 1;
    }   
.gallery__item--15 {
    grid-column: 2 / span 1;
    grid-row: 10 / span 2;
    }   
.gallery__item--16 {
    grid-column: 1 / span 1;
    grid-row: 11 / span 1;
    }   
    
    
    
    
 .gallery__item--b1 {
    grid-column: 1 / span 1;
     grid-row: 1 / span 1;
    }
.gallery__item--b2 {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    }
.gallery__item--b3 {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    }
.gallery__item--b4 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 2;
    }
.gallery__item--b5 {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    }
.gallery__item--b6 {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
    }
.gallery__item--b7 {
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
    }
.gallery__item--b8 {
    grid-column: 2 / span 1;
    grid-row: 5 / span 2;
    }
.gallery__item--b9 {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
    }
	.gallery__item--b10 {
    grid-column: 1 / span 2;
    grid-row: 7 / span 2;
    }
}/*@media screen and (min-width: 580px) and (min-height: 600px)*/











@media screen and (min-width: 1024px) and (min-height: 600px) {

.close {
     top: calc(10% - 44px);
    left: calc(50% + 60px);
    width: 44px;
    height: 44px;
}
.wrapper {
    position: fixed;
    top:  calc(10% - 20px);
    left: calc(5% - 10px);
    height: 100%;
    width: calc(45% + 90px);
    padding: 1.25rem 0rem 0rem 0rem;
    margin: 0 auto;
    z-index: 3;
    overflow-y: auto;
	border-top: thin solid #25D1D0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none; 
}

/* Gallery Link */
.gallery__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(8, 12.5rem);
    gap: .25rem;
}
/* Gallery Layout */
.gallery__item--1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}
.gallery__item--2 {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}
.gallery__item--3 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 2;
}
.gallery__item--4 {
    grid-column: 2 / span 2;
    grid-row: 2 / span 1;
}
.gallery__item--5 {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
}
.gallery__item--6 {
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
}
.gallery__item--7 {
    grid-column: 1 / span 3;
    grid-row: 4 / span 1;
    }
.gallery__item--8 {
    grid-column: 1 / span 1;
    grid-row: 5 / span 2;
    }
.gallery__item--9 {
    grid-column: 2 / span 2;
    grid-row: 5 / span 2;
    }    
 .gallery__item--10 {
    grid-column: 1 / span 2;
    grid-row: 7 / span 1;
    }    
  .gallery__item--11 {
    grid-column: 3 / span 1;
    grid-row: 7 / span 1;
    }    
         
  .gallery__item--12 {
    grid-column: 1 / span 1;
    grid-row: 8 / span 1;
    }   
.gallery__item--13 {
    grid-column: 2 / span 2;
    grid-row: 8 / span 1;
    }   
.gallery__item--14 {
    grid-column: 1 / span 1;
    grid-row: 9 / span 1;
    }   
.gallery__item--15 {
    grid-column: 2 / span 2;
    grid-row: 9 / span 2;
    }   
.gallery__item--16 {
    grid-column: 1 / span 1;
    grid-row: 10 / span 1;
    }   
        
    
    
    
    
    
    /* Gallery Layout */
.gallery__item--b1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}
.gallery__item--b2 {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}
.gallery__item--b3 {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}
.gallery__item--b4 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
}
.gallery__item--b5 {
    grid-column: 2 / span 2;
    grid-row: 3 / span 1;
}
.gallery__item--b6 {
    grid-column: 1 / span 1;
    grid-row: 4 / span 2;
}
.gallery__item--b7 {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
    }
.gallery__item--b8 {
    grid-column: 3 / span 1;
    grid-row: 4 / span 1;
    }
.gallery__item--b9 {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
    }
.gallery__item--b10 {
    grid-column: 2 / span 2;
    grid-row: 5 / span 2;
    }
}/* (min-width: 1024px) and (min-height: 600px)*/