.stevesters, #currentPhoto{
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
}

.stevesters{
	cursor: pointer;
}

#firststevester{
	margin-top: 3%;
	height: auto;
}

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

.morestevesters{
	height: auto;
	margin-left: 5%;
	margin-right: 5%;
}

.btn{
	position: relative;
	z-index: 1;
	color: #e9f5ff;
	font-family: 'nintender';
	background-color: #046abf;
	padding: 1% 2% 1% 2%;
	margin-bottom: 3%;
	border: none;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}

.btn:hover{
	background-color: #0580e6;
}

#showStevester{
	margin-bottom: 3%;
	height: auto;
}

#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;
    z-index: 4;
    position: fixed;
    width: 100%;
    height: 100%;   
    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;
	margin: auto;
	display: hidden;
	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;
	margin: auto;
	display: hidden;
	opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

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

#resultsContainer{
	width: 100%;
	position: fixed;
    color: #e9f5ff; 
    transition: bottom .3s ease-in-out, height 0.3s ease-in-out;
    z-index: 5;
}

#order{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}

.circle{
	background: url(../grfx/circle.svg) no-repeat;
	background-size: 100% 100%;
}

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

#currentScore{
	width: 100%;
	border-bottom: solid #058bf9 .2vw;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #046abf;
    align-items: center;
	justify-content: center;
}

#results{
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

#showStats{
	background: url(../grfx/statsbtn.svg) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
}

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

#close{
	background: url(../grfx/close.svg) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}

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

.box{
	flex: 1;
}

#tableHeadWrap{
	margin-top: 2vw;
	text-align: center;
}

#tableHead{
	display: inline;
	border-bottom: solid #058bf9 .1vw;
}

/* Variables
================================== */
/* Tables
================================== */
.Rtable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  margin-bottom: 0;
}
.Rtable-cell {
  box-sizing: border-box;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
  list-style: none;
  border: solid .1vw #e9f5ff;
  background: rgba(112, 128, 144, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.Rtable-cell > h1,
.Rtable-cell > h2,
.Rtable-cell > h3,
.Rtable-cell > h4,
.Rtable-cell > h5,
.Rtable-cell > h6 {
  margin: 0;
}
/* Table column sizing
================================== */
.Rtable--2cols > .Rtable-cell {
  width: 50%;
}
.Rtable--3cols > .Rtable-cell {
  width: 33.3%;
}
.Rtable--4cols > .Rtable-cell {
  width: 25%;
}
.Rtable--5cols > .Rtable-cell {
  width: 20%;
}
.Rtable--6cols > .Rtable-cell {
  width: 16.6%;
}

#padding{
	width: 20%;
}

.tabStevester{
	width: 90%;
	height: auto;
	margin: 1vw 0 1vw 0;
}

.cellStevester{
	border: none;
}

#tableContainer{
	overflow: auto;
	height: 100%;
	background-color: #046abf;
}

#noSpinDisclaimer{
	margin-top: 1vw;
	order: 6;
	width: 100%;
	text-align: center;
	color: #e9f5ff;
	font-style: italic;
}

@media all and (min-aspect-ratio: 1/1){
	#firststevester, #showStevester{
		width: 40%;
	}

	#secondrow{
		margin: 3% 0 3% 0;
	}

	.morestevesters{
		width: 30%;
	}

	#welcome{
		width: 20%;
	}

	#welcome, .btn{
		font-size: calc(4px + (60 - 4) * ((100vw - 300px) / (3840 - 300)));
	}

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

	#resultsContainer{
		bottom: -10vw;
		height: 10vw;
	}

	#currentPhoto{
		width: 60vw;
	}

	.circle, #circlefill{
		height: 4vw;
		width: 4vw;
		margin: 1vw;
	}

	#currentScore{
		height: 4vw;
	}

	#results{
   		font-size: 2vw;
   	}

   	.col{
		height: 2vw;
	}

	#showStats{
		margin-left: 10%;
		margin-right: auto;
	}

	#close{
		margin-left: auto;
		margin-right: 10%;
	}

	#showStats, #close{
		height: 4vw;
		width: 4vw;
	}

	#tableHead{
		font-size: calc(8px + (120 - 8) * ((100vw - 300px) / (3840 - 300)));
	}

	.Rtable{
		margin: 2vw 5vw 12vw 5vw;
	}

	.Rtable-cell{
		font-size: calc(4px + (60 - 4) * ((100vw - 300px) / (3840 - 300)));
	}

	#noSpinDisclaimer{
		font-size: calc(6px + (50 - 6) * ((100vw - 300px) / (3840 - 300)));
	}
}

@media all and (max-aspect-ratio: 1/1){
	#firststevester, #showStevester{
		width: 80%;
	}

	.morestevesters{
		margin: 3% auto 3% auto;
		order: 2;
		width: 40%;
	}

	#welcome{
		margin: 3% auto 3% auto;
		order: 1;
		width: 90%;
	}

	#welcome, .btn{
		font-size: calc(10px + (120 - 10) * ((100vw - 300px) / (2160 - 300)));
	}

	.btn{
		margin-top: 3%;
	}

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

	#resultsContainer{
		bottom: -30vw;
		height: 30vw;
		margin: 0; padding: 0;
	}

	#currentPhoto{
		width: 95vw;
	}

	.circle, #circlefill{
		height: 10vw;
		width: 10vw;
		margin: 2vw;
	}

	#currentScore{
		height: 16vw;
	}

	#results{
   		font-size: 6vw;
   		margin-left: 4vw;
   	}

   	.col{
		height: 6vw;
	}

	#showStats, #close{
		height: 16vw;
		width: 16vw;
		margin: auto;
	}

	#box1, #box2{
		display: none;
	}

	#tableHead{
		font-size: calc(16px + (160 - 16) * ((100vw - 300px) / (2160 - 300)));
	}

	.Rtable{
		margin: 5vw 1vw 15vw 1vw;
	}

	.Rtable-cell, #noSpinDisclaimer{
		font-size: calc(10px + (100 - 10) * ((100vw - 300px) / (3840 - 300)));
	}
}