@charset "utf-8";
/* CSS Document */
html { scroll-behavior: smooth; }
body { background-color: #d91f26; color: white; font-family: Poppins, "Poppins", Roboto, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; margin: 0; padding: 0; height: 100%; }
a, a:visited { color: white; text-decoration: none; }
/* a:hover, a:active { color: antiquewhite; }
i:hover, i:active { color: antiquewhite; } */
header { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; align-content: flex-start; font-weight: 700; padding: 3%; background-color: #666666; background-image: linear-gradient(#a6a6a2, #555); }
logo { margin: 0 !important; }
#tagline { font-size: 1.5em; line-height: 1.2; color: #fcbf07; text-shadow: 1px 1px 1px black; margin-right: 5px; font-family: "Poppins", Poppins, Roboto, sans-serif; font-style: normal; }
header iframe { margin: 0; display: inline; width: 100%; max-width: 560px; }
.playerblurb { line-height: 1.1; font-weight: 400; margin: 5px auto 5% auto; text-align: left; font-size: 1em; padding: 0 1%; }
.playerblurb a { font-weight: 700; font-style: normal; }

.special-message { background-color: #fcbf07; color: black; margin: 0 !important; padding: 3% 5% 5%; text-align: left; font-size: 1.25em; }
.special-message p { max-width: 1200px; margin: 1% auto; line-height: 1.3; }
.special-message h2 { color: #d91f26; text-shadow: 1px 1px 1px black; line-height: 1.1; letter-spacing: 3px; }
.special-message h3 { color: black; font-weight: 400 !important; line-height: 1.1; }
.special-message a { color: #d91f26; font-weight: 700; }
.special-message a:hover { font-weight: 700; }
.special-message a:active { color: white !important; font-weight: 700; }
.special-message a:visited { color: #d91f26; font-weight: 700; }
.special-message img { display: block; width: 100%; margin: auto; border: 3px solid black; border-radius: 5px; max-width: 1200px; }
.special-message button { display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; background-color: #d01f26; width: 33%; font-size: 1em; color: white; }
.special-message button h3 { font-size: 1em; color: white; }
.special-message button:visited { background-color: #d01f26; }
.special-message button:hover, button:active { background-color: white; color: #d91f26; }
.special-message i:hover { color: #d91f26; }

footer { font-weight: 700; font-size: .75em; text-transform: uppercase; margin: 50px auto; text-align: center; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; align-content: center; }
footer a:hover, footer a:active { color: #fcbf07; }
ul { list-style: none; padding: 5px 0; }
li { display: inline; margin: 0 8px; }
i { margin: 0 8px; }
i:hover, i:active { color: #fcbf07; }
#socials { font-size: 1.5em; padding: 5px 0; margin-bottom: auto; display: flex; }
section { margin: auto 0; height: 100%; }
h1 { font-size: 2.5em; }
h2, h3 { text-align: center; font-family: "Bangers", Bangers, "Poppins", Poppins, cursive, sans-serif; font-size: 3em; text-shadow: 1px 1px 1px black; letter-spacing: 3px; line-height: 1 !important; }
.store h2 { font-size: 4em; line-height: 1.1; font-family: "Bangers", Bangers, "Poppins", Poppins, cursive, sans-serif; text-shadow: 1px 1px 1px black; letter-spacing: 3px; }

.store { background-color: #8E8E8E; padding: 2% 5%; }
.store button:hover, button:active, button i:hover,  button si:active { color: #d91f26; }
.storebox { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; padding: 3% 10%; }
.storebox iframe { margin: 1% 1% 1% auto; display: block; width: 500px; border: 3px solid black !important; border-radius: 5px; }
.storebox img { width: 100%; max-height: 300px; max-width: 500px; margin: 1% auto 1% 1%; display: block; }
#phoenixstore { background-color: #d91f26; margin: 0; background-image: linear-gradient(#d91f26, #a6a6a2); }
#glendalestore { background-color: #666666; margin: 0; background-image: linear-gradient(#555, #a6a6a2); }
#chandlerstore { background-color: #d91f26; margin: 0; background-image: linear-gradient(#d91f26, #a6a6a2); }
#mesastore { background-color: #666666; margin: 0; background-image: linear-gradient(#555, #a6a6a2); }
.contactinfo { margin: 0 auto; display: block; text-align: center; width: 100%; font-size: 1.25em; }
img.map { background: #FFFFFF; box-shadow: 0 0 15px 10px #FFFFFF !important; border-radius: 25px; }
img.photo { border: 3px solid black; border-radius: 5px; margin-top: 1%; }
a:hover .photo  { border: 3px solid #fcbf07; border-radius: 0;  }
a:hover img.map { box-shadow: 0 0 15px 10px #fcbf07 !important; }

button { border: 2px solid black; padding: 5px 10px; background-color: #fcbf07; color: black; font-weight: 700; border-radius: 5px; font-size: 1.5em; margin: 0 auto 2%; display: block; /*width: 250px; */ font-family: "Bangers", Bangers, cursive, "sans-serif"; letter-spacing: 1.5px; }
button:hover, button:active { background-color: #FCD14F; }

#videos, #videos2 { margin: 5% auto 0; display: block; width: 100%; }
iframe { margin: auto; display: block; }
#videos iframe, #videos2 iframe { max-width: 560px; }

#sellcomics { background-color: white; color: black; text-shaow: 2px 2px 15px #ccc; padding: 2% 5%; margin: 5% 10%; border-radius: 50px; box-shadow: 0 0 15px 10px #FFFFFF !important; }
#sellcomics a, #sellcomics a:visited { color: #BD0003; text-decoration: none; font-weight: 700; }
#sellcomics a:hover, #sellcomics a:active { background-color: none; border-radius: none; color: #BD0003; font-weight: 700; padding: none !important; }
#sellcomics a:visited { color: #BD0003; font-weight: 700; }
#sellcomics h2 { color: #d91f26; }
#sellcomics p { font-size: 1.25em; font-weight: 400; line-height: 1.3; text-align: left; }

aside#ada { width: 75%; margin: auto; display: block; text-align: center; }
aside#ada a { color: #fcbf07; font-weight: bold; }
aside#ada a:hover { color: #FCD14F; }

@media (max-width: 768px) {
	.showmob { display: block !important; }
	.hidemob { display: none !important; }
	header { display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; font-weight: 700; text-align: center; }
	.playerblurb { margin: 5%; text-align: center; font-size: smaller; }
	h1 { font-size: 1.75em !important; line-height: 1.1; text-align: center; }
	#tagline { font-size: 1.3em; line-height: 1.1; }
	.special-message { font-size: 1.1em; }
	.special-message p { margin: 3% auto; }
	.special-message button { width: 80%; }
	#logo { margin: -3% auto !important; }
	#menu { margin: -5% auto !important; }
	#socials { font-size: 2em; padding: 5px 0 15px; margin: -3% auto !important; display: block; }
	/* #locmenu { margin-bottom: 15px !important; }
	#locmenu2 { display: block !important; }
	#menu2 { display: block!important; }
	#socials2 { display: block !important; } */
	footer { padding-bottom: 15%; flex-flow: column wrap; justify-content: center; align-content: center; align-items: center; text-align: center; }
	#credits { margin-left: 0; }
	#sellcomics { margin: 0; border-radius: 0; /*height: 100vh !important;*/ }
	#sellcomics p { font-size: 1em; font-weight: 400; line-height: normal; }
	#sellcomics button a { margin: 5% !important; }
	button { margin-bottom: 5%; }
	#samevents { background-color: white; color: black; padding: 5%; }
	.store { padding: 25% 0 !important; }
	.store h2 { font-size: 2em; line-height: 1.1; }
	h2, h3 { font-size: 2em; text-shadow: 1px 1px 1px #fcbf07; }
	.storebox { display: block !important; padding: 3% 10%; text-align: center !important; margin: auto !important; width: 80%; }
	.storebox img { margin: 15px 0 !important; }
	article { margin: 0 10%; }
	address span .adr { display: block; }
	.phone-mail { font-size: smaller; }
	#sellcomics h2, #sellcomics h3, #samevents h2, #samevents h3 { color: black !important; }
	#videos h2, #videos h3, #videos2 h2, #videos2 h3 { color: black !important; text-shadow: 1px 1px 1px white !important; }
	.contactinfo { font-size: 1em; }
	.phone-mail { display: flex; flex-flow: column wrap; }
	.showmob h3 { font-size: 1em; display: inline !important; text-shadow: 1px 1px 1px #fcbf07 !important; margin: 0 auto; }
	.showmob button i:hover { color: #BD0003; text-shadow: 1px 1px 1px white; }
	#mesa, #phoenix, #chandler, #glendale, #sell, #about { margin-top: auto !important; }
}

@media (min-width: 768px) {
	.hidemob { display: block !important; }
	.showmob { display: none !important; }
	li a, li a:visited { color: white; text-decoration: none; }
	li a:hover, li a:active { color: #fcbf07; }
	#credits { margin-left: 15px; }
	#sellcomics { background-image: url("images/classic-comics-shade.jpg"); background-size: cover; }
	#menu { margin: 1% auto !important }
}

@media (min-width: 575px) and (max-width: 767px) {
	#videos iframe { width: 100% !important; max-width: 767px !important; display: block !important; margin: auto !important; }
	#menu { margin: 1% auto !important }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.playerblurb { font-size: .8em; }
}

@media (max-width: 376px) {
	#socials { font-size: 1.5em; }
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: 1px solid white;
  outline: none;
  background-color: #d91f26;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
  opacity: .75;
  width: 75px;
}

#myBtn:hover {
  background-color: #d91f26;
  color: #FFF !important;
}
#myBtn i:hover , #myBtn i:active {
  color: #fcbf07 !important;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}