#shirtsRow{
	display: flex;
	flex-wrap: wrap;
  	align-items: center;
}

#shirtsRow img{
	width: 28%;
	height: auto;
	margin-left: 4%;
	cursor: pointer;
}

#shirtsRow img, #currentPhoto{
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
}

#intro{
	margin: 3vw 0 2vw 0;
}

#outro{
	margin: 2vw 0 3vw 0;
}

#galleryShade {
    display: flex;
	visibility: hidden;
	background: #024072;
    position: fixed; 
    left: 0; 
    top: 0;
    width: 100%; 
    height: 100%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#photoModal {
	display: flex;
    visibility: hidden;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 4; 
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#currentPhoto{
	height: auto;
	margin: auto;
}

#controls{
	display: flex;
	visibility: hidden;
}

#prev{
	background: url(../grfx/prev.svg) no-repeat;
	background-size: 100% 100%;
	position: fixed;
	cursor: pointer;
	left: 0;
	top: 0;
	margin: auto;
	display: hidden;
	z-index: 5;
	opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#prev:hover{
	background: url(../grfx/prevhov.svg) no-repeat;
	background-size: 100% 100%;
}

#next{
	background: url(../grfx/next.svg) no-repeat;
	background-size: 100% 100%;
	position: fixed;
	cursor: pointer;
	right: 0;
	top: 0;
	margin: auto;
	display: hidden;
	z-index: 5;
	opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#next:hover{
	background: url(../grfx/nexthov.svg) no-repeat;
	background-size: 100% 100%;
}

@media all and (min-aspect-ratio: 1/1){
	p{
		font-size: calc(6px + (60 - 6) * ((100vw - 300px) / (3840 - 300)));
	}

	#prev, #next{
		height: 10vw;
		width: 5vw;
		bottom: 0;
	}
}

@media all and (max-aspect-ratio: 1/1){
	p{
		font-size: calc(16px + (100 - 16) * ((100vw - 300px) / (2160 - 300)));
	}

	#prev, #next{
		height: 24vw;
		width: 12vw;
	}
}