/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/oswald-v57-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html,body {
    padding:0;
    margin:0;
    height:100%;
}

body {
	font-size: 18px;
	font-family:  Oswald, Arial, Helvetica, sans-serif;
	color:#000;
	margin:0;
	background-color:#bbb;
	text-align:center;
}

@media only screen and (min-width: 901px) {		/* If screen is 901px or wider */
	#h1a { font-size:3em; }
	#menuinnerdiv { font-size:1.1em; border-top:2px solid #0c0; }
	#menumorespan1 { display:inline; }
	#menumorespan2 { display:none; }
	#footerlinksfullsize { font-size:1.05em; }
	.itembuttons { font-size:1.15em; width:100px; }
	.bottomnavbuttons { width:400px; max-width:60%; font-size:1.2em; }
	#lastlineitembuttons { white-space:nowrap; }
}

@media only screen and (min-width: 751px) and (max-width: 900px) {
	#h1a { font-size:2.7em; } 
	#menuinnerdiv { font-size:1em; border-top:2px solid #0c0; }
	#menumorespan1 { display:inline; }
	#menumorespan2 { display:none; }
	#footerlinksfullsize { font-size:1em; }
	.itembuttons { font-size:1.15em; width:100px; }
	.bottomnavbuttons { width:400px; max-width:60%; font-size:1.1em; }
	#lastlineitembuttons { white-space:nowrap; }
}

@media only screen and (min-width: 450px) and (max-width: 750px) {
	#h1a { font-size:2.7em; } 
	#menuinnerdiv { font-size:1em; border-top:2px solid #0c0; }
	#menumorespan1 { display:inline; }
	#menumorespan2 { display:none; }
	#footerlinksfullsize { font-size:0.95em; }
	.itembuttons { font-size:1.15em; width:100px; }
	.bottomnavbuttons { width:400px; max-width:60%; font-size:1.1em; }
}

@media only screen and (max-width: 449px) {		/* If screen is 499px or narrower */
	#h1a { font-size:1.9em; } 
	#menuinnerdiv { font-size:1em; border-top:none; }  
	#menumorespan1 { display:none; }
	#menumorespan2 { display:inline; }
	#footerlinksfullsize { font-size:0.85em; }
	.itembuttons { font-size:1em; width:85px; }
	.bottomnavbuttons { width:400px; max-width:60%; font-size:1em; }
}

#headerdiv {
	background-color:#000;
	text-align:center;
	margin:0;
	padding:0;
	font-weight:bold;
}

h1 { 
	margin:0;
	font-weight:bold;
	color:#fff;
	font-family: Oswald, Arial, Helvetica, sans-serif;
}

#h1a {
	white-space:nowrap;
	margin-bottom:-5px;
	text-transform:uppercase;
}

#menudiv {
	background-color:#000;
	text-align:center;
	padding:0; 
	width:100%;
	position: sticky;
	top: 0;
}

#menuinnerdiv {
	display:inline-block;
	background-color:#000;
	text-align:center;
	margin:0;
	padding:3px 0 11px 0;
	white-space:nowrap;
}

#menuinnerdiv a, #popmenuinnerdiv a {
	color:#0c0;
	margin:0 5px;
	text-decoration:none;
	border-bottom:1px solid #0f0;
}

#menuinnerdiv a:hover, #popmenuinnerdiv a:hover {
	color:#fff;
}

#introdiv {
	width:calc(100% - 60px);
	display:inline-block;
	font-size:1.05em;
	margin:8px auto 12px auto;
	line-height:150%;
}

.stickerdivs, .stickerdivssmlr, .stickerdivswide, .stickerdivstall {
	cursor:pointer;
	display:inline-block;
	text-align:center;
	vertical-align:middle;
	/* max-width: set in responsive */
	margin:0 2% 50px 2%;
	/* background-color:#f00; */
}

.stickerimgs {
	width:100%;
	display:block;
	max-width:700px;
	margin-bottom:5px;
	/* background-color:#050; */
}

.moreclass {
	font-size:0.9em;
	white-space:nowrap;
	margin-bottom:15px;
	display:inline-block;
	background-color:#777;
	color:#fff;
	font-weight:bold;
	padding:2px 4px;
	border-radius:5px;
}

.moreclass a {
	color:#fff;
	text-decoration:none;
}

#popmenu {
	z-index:5;
	display:none;
	width: 100%;
	position:fixed;
}

#popmenuinnerdiv {
	width:200px;
	max-width:90%;
	padding:10px;
	background-color:#000;
	color:#ccc;
	line-height:200%;
}

.bottomnavbuttons {
	margin:20px auto 30px auto;
	background-color:#000;
	color:#0c0;
	border-radius:15px;
	cursor:pointer;	
}

.bottomnavbuttons a {
	text-decoration:none;
	color:#0c0;
}

#footerlinksfullsize {
	margin:0 auto 0 auto;
	color:#555;
}

#footerlinksfullsize a {
	color:#333;
}

#stickerleftbuttondiv {
	position:absolute;
	left:0;
	top:130px;
	width:30px;
	height:40%;
	text-align:right;
	padding:50px 10px 0 0;
	color:#555;
	cursor:pointer;
}

#stickerrightbuttondiv {
	position:absolute;
	right:0;
	top:130px;
	width:30px;
	height:40%;
	text-align:left;
	padding:50px 0 0 10px;
	color:#555;
	cursor:pointer;
}

.stickerrightleftbuttonspans {
	background-color:rgba(100, 100, 100, 0.5);
	color:#0c0;
	padding:3px;
	font-size:2.4em;
	font-weight:bold;
}

#singleimage {
	flex-grow: 1; /* Is this needed? */
	height:auto;
	width:auto;
	max-height:60%;
	max-width:calc(100% - 60px); /* Was 95% */
	object-fit:contain;
	/* z-index:-1; Was to prevent #stickercontainer's relative display from covering #headerdiv */
}

.itembuttons {
	display:inline-block;
	background-color:#000;
	text-decoration:none;
	color:#0c0;
	padding:2px 5px;
	margin:15px 20px;
	border-radius:10px;
	white-space:nowrap;
}

#modalpopupouter {
	z-index:7;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:80%;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:none;
}

#modalpopupinner {
	z-index:10;
	width:500px;
	max-width:90%;
	color:#fff;
	background-color:#000;
	border:5px solid #ddd;
	border-radius:10px;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:5px;
	display:none;
}