@charset "utf-8";
/* CSS Document */
/* this css handles pages with paralax */

/* html element style ====================== */

h1{
	/*
	font-family: "Lobster", cursive;
	*/
	font-weight:bold;
	font-size:40px;
}
h2{
	font-weight: bold;
	text-transform: uppercase;
	margin-top: 2px;
	margin-bottom: 8px;
}
 a[data-hs-anchor="true"] {   
   display: block; 
   position: relative; 
   visibility: hidden; 
   top: -200px;  
  }
  
/* unique elements (ids) ====================== */
#footer{
	/*background-color:aliceblue;*/
}
#header, #headerspacer{
	width:100%;
	height:99px;
	background-color:white;
}
#header{
	position:fixed;
	top:0;
	z-index: 10;
}

#parallax01{ height:600px; background-image: url("../imgs/mythica_homepage_bg01.jpg"); }
#parallax02{ height:600px; background-image: url("../imgs/mythica_homepage_bg02.jpg"); }
#parallax03{ height:600px; background-image: url("../imgs/mythica_homepage_bg03.jpg"); }
#parallax04{ height:600px; background-image: url("../imgs/mythica_homepage_bg04.jpg"); }
#parallax05{ height:600px; background-image: url("../imgs/mythica_homepage_bg05.jpg"); }

/*#parallax-draxia{ height:600px; background-image: url("../imgs/legends-of-draxia/lod_bg01.jpg"); }*/
#parallax-draxia{ height:650px; background-image: url("../imgs/legends-of-draxia/parallax_bg_01.jpg"); }
/*#parallax-corrupted{ height:600px; background-image: url("../imgs/legends-of-draxia/Legends-of-Draxia-Corrupted-Mana-6.jpg"); }*/
#parallax-corrupted{ height:650px; background-image: url("../imgs/legends-of-draxia/parallax_bg_03.jpg"); }
/*#parallax-nairu{ height:600px; background-image: url("../imgs/legends-of-draxia/lod_mon_bg01.jpg"); }*/
#parallax-nairu{ height:650px; background-image: url("../imgs/legends-of-draxia/parallax_bg_04.jpg"); }

#parallax-fates{ height:650px; background-image: url("../imgs/fates-of-madness/fom_bg01.jpg"); }
/*#parallax-trumps{ height:600px; background-image: url("../imgs/trumps-and-ladders/Trumps-Ladders_bg_1000.jpg"); }*/
#parallax-trumps{ height:650px; background-image: url("../imgs/trumps-and-ladders/tal_bg01.jpg"); }
#parallax-woo{ height:650px; background-image: url("../imgs/woo-the-princess/wtp_bg01.jpg"); }
#parallax-kymera{ height:650px; background-image: url("../imgs/kuddly-kymera/kk_bg01.jpg"); }
#parallax-dualing{ height:650px; background-image: url("../imgs/dualing-dice/dd_bg01.jpg"); }

#parallax-draxia-rpg{ height:650px; background-image: url("../imgs/legends-of-draxia/parallax_bg_05.jpg"); }

.parallax{
	/* Set a specific height */
	height:600px; /*fit-content; */
	width:100%;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding:0;
	
	position:relative;
	/*overflow:hidden;*/
	text-align:center;
}
.parallax img{
	max-width:800px;
	margin:0 auto;
}
#page{
	width:100%;
}

/* backgrounds ================ */
.bg-01{
	opacity:0.5;
	background-color:black;
	background-image: url("../imgs/legends-of-draxia/Legends-of-Draxia-Game-Mat-8.jpg");
}

/* menu styles ============== */

#companylogo{	
	width:100%;
	height:50px;	
	font-size:30px;
	font-weight:bold;
	margin-top:5px;
	margin-bottom:5px;
}
#companylogo a{
	text-decoration:none;
	color:black;
}
#menu, #menu-page{	
	position:relative;
	width:100%;	
	height:100px;
	top:500px;
	z-index:3;
	
	color:white;
	font-size:40px;
	font-weight:bold;
	text-align:center;
	
	margin-right:10px;
	padding-top:10px;
	text-shadow:2px 2px 10px black;
}
 #menu-page{
	/*height:inherit;*/
	top:0;
}
#menu a, #menu-page a{
	text-decoration:none;
	font-size:40px;
	/*line-height:3em;*/
	padding-left:5px;
	padding-right:5px;
	color:white;
}
#menu-page a{
	/*color:gray;*/
}
#menufoot{
	text-align:center;
	width:100%;
	margin:0 auto;
	clear:both;
	line-height:4em;
	display:none;
}
#menufoot a{
	color:black;
	text-decoration:none;
	font-size:20px;
	padding-left:5px;
	padding-right:5px;		
}
#menufoot a:after{
	content:"\a";
	white-space:pre;
}
#menu a:hover, #menu-page a:hover, #menufoot a:hover{
	text-decoration:underline;
}
#siteheader{
	font-size:90px;
	color:white;
	/*text-shadow:2px 2px 5px black;*/
}
#sitetitle{
	/*z-index:-10;*/
	/*color:white;*/
	position: absolute;
	bottom:0;
	
	width:100%;
	/*height:100px;*/
	margin:0;
	padding:0;
	
	background-color: rgba(0,0,0,0.5);
}

.emaillink{
	display:inline-block;
	margin-left:10px;
}

/* font style ====================== */

.colorwhite{
	color:white;
}
.textcenter{
	text-align:center;
}
.headshot{
	display:inline-block;
	float:left;
	margin:10px;
}
.mythicaactionbutton, .boardgamegeeklink{
	display:block;
	margin:50px auto;
	text-align:center;
	color:white;
	font-size:20px;
	font-weight:bold;
	border-radius: 30px;
	background-color: red;
	width: 500px;
	height: 60px;
}
.boardgamegeeklink{
	background-color: #3f3a60;
}

.mythicaactionbutton a, .boardgamegeeklink a{
	display:block;
	width:100%;
	line-height:60px;
	text-decoration:none;
	color:white;
}
.productlogo{
	text-align:center;
}
.productlogo a{
	display:block;
	margin-bottom:25px;
	text-decoration:none;
}
.productlogo a:hover{
	text-decoration:underline;
}
.productlogo img{
	/*margin: 40px 0;*/
}
.producttitle{
	display:inline-block;
}

/* general purpose class styles ========== */

.accordion{
	width:100%;
	color:white;
	background-color:red;	
	margin:0 auto;
	text-align:center;
	font-size:36px;
	padding:10px;
	border:2px solid white;
}

.content{
	width:800px;
	/*width:50%;*/
	margin:0 auto;
	padding:25px 0;
}
.content p, .normalsize{
	/*text-indent:20px;*/
	font-size:24px;
}
.contenthalf{
	display:block;
	float:left;
	width:45%;
	margin-right:4%;
	
}

.errors{
	color:red;
	font-size:16px;
	font-weight:bold;
}
.faqquestion{
	font-style:italic;
	font-weight:bold;
}
.faqanswer{
	
}
.floatclear{
	clear:both;
}
.hangingindent{
	padding-left:50px;
	text-indent:-50px;
}


.img_mobile{
	visibility:hidden;
}

.img_center{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background-color:red;
	color:white;
	font-weight:bold;		
	font-size:36px;
	padding:10px;
}

.nomargincenter{
	margin:0 auto;
}

.partners{
	width:30%;
	margin-left:2%;
}

.quote-close, .quote-open{
	display:inline-block;
	width:40px;
	height:40px;
	background-image: url("pics/quote-close.png");
}
.quote-open{
	background-image: url("pics/quote-open.png");
}


.report{
	color:green;
	font-size:16px;
	font-weight:bold;
}
.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top:0;
}


.videocontainer{
  width: 100%;
  display: inline-block;
  position: relative;
}
.videocontainer::after {
  padding-top: 56.25%; /* 16:9 ratio - divide height by width and multiply by 100 */
  display: block;
  content: '';
}
.videocontainer>iframe{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

/* form elements ========== */
.formholder{	
	/*text-align:center;*/
	width:60%;
	margin:0 auto;
}
.formlabel{
	/*
	float:left;
	width:45%;
	text-align:right;
	display:inline-block;
	*/	
	font-size:20px;
}
.formlabelmath, .forminputmath{
	float:left;
	width:50%;
	text-align:right;
}
.forminputmath{
	text-align:left;
}
.forminputmath select{
	width:50px;
	height:30px;
	/*
	color:white;
	background-color:navy;
	*/
	border:1px solid gray;
	font-size:larger;
}

.forminput{
	/*
	float:left;
	width:45%;
	text-align:left;
	padding-left:10px;
	display:inline-block;
	*/
	margin-bottom:20px;
}
.forminput input{
	width:100%;
	height:30px;
	background-color:aliceblue;
	border:1px solid gray;
	font-size:larger;
}
.formcheckbox{
	margin:0 auto;
	width:450px;
	height:30px;
	font-size:larger;
 }
.formcheckbox input{
	width:50px;
	height:30px;
	float:left;
	font-size:larger;
}
.forminput input[type=checkbox]{
	background-color:aliceblue;
	width: 100px;
}
.formcheckbox p{
	/*width:450px;*/
	float:left;
	text-align:left;
}
.forminput select{
	height:30px;
	font-size:larger;
	background-color:aliceblue;
}
.forminput textarea{
	width:400px;
	/*
	color:white;
	background-color:navy;
	*/
	border:1px solid gray;
	font-size:larger;
}
.forminput button, .forminput input[type=submit]{
	height:50px;
	width:100%;
	font-size:larger;
	margin-top:10px;
}
.formselect{	
	width:400px;
	font-size:larger;
}
.width50, .width50 input, .width50 button, .width50 select{ width:50%; float:left;}
.width33, .width33 input, .width33 button, .width33 select{ width:33%; float:left;}
.width25, .width25 input, .width25 button, .width25 select{ width:25%; float:left;}
.width20, .width20 input, .width20 button, .width20 select{ width:20%; float:left;}
.width10, .width10 input, .width10 button, .width10 select{ width:10%; float:left;}

input[type=submit]{
	background-color:lightgray;
}
*:required {
	/*background-color: aliceblue!important;*/
}


@media only screen and (max-width: 1200px){
	/*#parallax01{	height:600px; }*/
	.formholder{	
		width:80%;
	}
}
@media only screen and (max-width: 1000px){
	#menu{
		top:25%;
	}
	#menu a{
		display:block;
	}
	
		
	#menu-page {
		font-size:25px;
	}
	#menu-page a{
		display:block;
		font-size:30px;
	}
}
@media only screen and (max-width: 800px){
	#parallax01, 
	#parallax02, 
	#parallax03, 
	#parallax04, 
	#parallax05, 
	#parallax-draxia, 
	#parallax-corrupted, 
	#parallax-nairu,
	#parallax-fates,
	#parallax-trumps,
	#parallax-woo,
	#parallax-kymera,
	#parallax-draxia-rpg,
	#parallax-dualing{ 
		/*width:800px;*/
		/*height:400px;*/
	}
	
	.parallax{
		/*background-size: contain;*/
		/*background-position: top;*/
	}
	
	#header{
		position:static;
	}
	#headerspacer{
		height:0px;
		display:none;
	}
	
	.content{
		width:80%;
	}
	.content p {
		font-size:20px;
		line-height:1.8em;
	}
	.formholder{
		width:100%;
	}
	.headshot{
		display:block;
		width:100%;
		margin:0 auto;
		text-align:center;		
	}
	.img_mobile{
		visibility:visible;
		width:100%;
	}	
	
	/*
	#menu{
		height:auto;
		line-height:2.5em;
		width:45%;
		overflow: visible;
	}
	#menu a, .normalsize{
		font-size:20px;
	}
	*/
	
	.mythicaactionbutton{
		width:80%;
		height:inherit;
		border-radius:10px;
	}
	.mythicaactionbutton a{
		line-height:30px;
	}	
	#companylogo{
		width:100%;
	}
	
	#siteheader	{
		font-size:40px;
	}
	#sitetitle{
		position:relative;
		background-color: rgba(0,0,0,1);
	}
	.textfooter{
		font-size:16px;
	}
	
	.width50, .width50 input, .width50 button, .width50 select,
	.width33, .width33 input, .width33 button, .width33 select,
	.width25, .width25 input, .width25 button, .width25 select,
	.width20, .width20 input, .width20 button, .width20 select,
	.width10, .width10 input, .width10 button, .width10 select{ 
		width:100%; 
	}
}

@media only screen and (max-width: 480px){
	#menu{ 
		/*display:none;*/
	}
	#menu a{
		/*font-size:18px;*/
	}
	#companylogo a{
		font-size:18px;
	}
	#menumobile{
		display:block;
	}
	#menufoot{
		display:block;
	}
	
	ul.checkmark li{
		padding: 8px 0;
	}
	
}