@import url('https://fonts.googleapis.com/css2?family=League+Gothic&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&display=swap');

html
{
 overflow-y: scroll;
 min-height: 100%;
}

body
{
 height: 100%;
 margin: 0;
 background-color: #483C32;
 color: #fff;
 font-family: 'Source Sans Pro', sans-serif;
}

.center
{
 text-align: center !important;
}

.r
{
 text-align: right !important;
}

.float-right
{
 float: right;
}

.float-left
{
 float: left;
}

.clr
{
 clear: both;
}

p, ul
{
 font-size: 16pt;
 line-height: 1.5em;
}

h1, h2, h3, h4
{
 font-family: 'League Gothic', sans-serif;
 font-weight: normal;
 margin-top: 0;
}

h1
{
 font-size: 40pt;
 letter-spacing: 2px;
}

h2
{
 font-size: 36pt;
 letter-spacing: 2px;
 max-width: 1000px;
 margin: 0 auto;
 text-align: center;
}

.parallax-window
{
 position: relative;
 background-size: 100%;
 background-repeat: no-repeat;
 height: 500px;
}



#empyre-lotsg
{
 background-image: url(../img/empyre2.jpg);
}

#empyre-dotff
{
 background-image: url(../img/empyre3.jpg);
}

#empyre-eotde
{
 background-image: url(../img/empyre5.jpg);
}

#parallax3
{
 background-image: url(../img/empyre4.jpg);
}

#parallax3 > img
{
 display: block;
 position: absolute;
 left: 50%;
 bottom: 10%;
 width: 60%;
 margin: 0 auto;
 transform: translateX(-50%);
}

.parallax-window > h2
{
 font-size: 90px;
 position: absolute;
 width: 100%;
 max-width: 100%;
 left: 0;
 bottom: 10%;
 padding: 0 5%;
 margin: 0 auto;
 text-shadow: 3px 3px #000;
 box-sizing: border-box;
}

h3
{
 font-size: 30pt;
 margin-bottom: .5em;
}

header
{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 text-align: center;
 z-index: 150;
 transition: all .5s ease-out;
}

header.scrolled
{
 background-color: rgb(0, 0, 0, .6);
 transition: all .5s ease-out;
}

nav#menu > ul
{
 display: block;
 margin: 0;
 padding: 10px 0;
 list-style: none;
 font-family: 'Source Sans Pro', sans-serif;
 text-transform: uppercase;
 letter-spacing: 2px;
}

nav#menu > ul > li
{
 font-size: 26px;
 display: inline-block;
 margin: 0 1em;
 text-shadow: 0 0 5px #000;
 text-rendering: optimizeLegibility;
}

nav#menu > ul > li > a
{
 text-decoration: none;
 text-rendering: optimizeLegibility;
 text-shadow: 0 0 5px #000;
 color: #fff;
 transition: all .5s ease-out;
 display: block;
}

nav#menu > ul > li > ul
{
 list-style: none;
 visibility: hidden;
 display: none;
 position: absolute;
 margin: 0 0 0 -20px;
 padding: 10px;
}

nav#menu > ul > li:hover > ul,
nav#menu > ul > li > ul:hover
{
 visibility: visible;
 display: block;
}

nav#menu > ul > li > ul > li
{
 display: block;
 text-align: left;
 padding: 0 10px;
 transition: all .5s ease-out;
}

header.scrolled nav#menu > ul > li > ul > li
{
 background-color: rgb(0, 0, 0, .6);
 transition: all .5s ease-out;
 padding: 0 10px;
}

nav#menu > ul > li > ul > li > a
{
 text-decoration: none;
 color: #fff;
 text-align: left;
 text-rendering: optimizeLegibility;
 text-shadow: 0 0 5px #000;
}


#menu-h
{
 display: none;
 cursor: pointer;
}

#menu-h > svg
{
 fill: #eee;
}

#menu-h > svg:hover
{
 fill: #fff;
}

#map
{
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 overflow: hidden;
 position: relative;
 margin-bottom: 20px;
}

.map
{
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
}

#map1
{
 background: url(../img/map1.jpg) center center no-repeat;
 background-size: cover;
}

#map2
{
 background: url(../img/map2.jpg) center center no-repeat;
 background-size: cover;
 display: none;
}

#logo
{
 position: absolute;
 top: 50%;
 left: 50%;
 width: 70%;
 max-width: 1000px;
 text-align: center;
 transform: translate(-50%, -50%);
}

#logo > img
{
 width: 100%;
}

#top-social
{
 position: absolute;
 top: 5px;
 right: 0;
 z-index: 160;
}

#top-social > ul
{
 list-style: none;
 margin: 0;
 padding: 10px;
 text-align: right;
}

#top-social a
{
 display: block;
 margin: 0 0 10px 0;
 width: 40px;
 height: 40px;
}

#top-social a > img
{
 width: 100%;
 height: 100%;
}

.content
{
 position: relative;
 padding: 20px 0;
}

.content-wrapper
{
 max-width: 800px;
 margin: 0 auto;
 position: relative;
 padding: 0 20px;
}

.no-pe
{
 pointer-events: none;
}

.content ul
{
 padding-left: 1em;
}

#gallery
{
 text-align: center;
}

#gallery > div
{
 overflow: hidden;
 width: 600px;
 border: 3px solid #fff;
 box-sizing: content-box;
 margin: 7px;
}

#gallery > div > img
{
 width: 100%;
 display: inline-block;
 vertical-align: top;
}

.buy
{
 position: absolute;
 right: 0;
 font-size: 1.5em;
 font-weight: bold;
 top: 45px;
 color: #000;
 background-color: #fa1;
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
 box-shadow: 0 0 20px #000;
 z-index: 60;
}

.buy > a,
#buy-top > a
{
 display: block;
 text-decoration: none;
 color: #000;
}

.buy > a:hover,
#buy-top > a:hover
{
 background-color: #fb1;
}

.buy > a
{
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
 padding: 1em 2em;
}

#buy-top
{
 display: inline-block;
 margin-top: 20px;
 font-size: 1.5em;
 font-weight: bold;
 color: #000;
 background-color: #fa1;
 border-radius: 5px;
 box-shadow: 0 0 20px #000;
 z-index: 60;
}

#buy-top > a
{
 padding: .5em 2em;
 border-radius: 5px;
}

footer
{
 margin-top: 40px;
}

#footer-social
{
 text-align: center;
}

#footer-social > a
{
 display: inline-block;
 margin: 10px;
 width: 80px;
 height: 80px;
 box-shadow: 2px 2px transparent;
}

#footer-social > a > img
{
 width: 100%;
 height: 100%;
}

#footer-social > a:hover
{
 border-radius: 50%;
 background-color: #fff;
}

.character
{
 margin-left: 20px;
 float: right;
 width: 160px;
}

.character-earls
{
 width: 220px;
}

.character > img
{
 width: 100%;
}

/* MQ */

@media screen and (max-width: 1200px)
{
 .buy {position: static; float: right; margin: 10px 0 10px 20px;}
}

@media screen and (max-width: 800px)
{
 .parallax-window > h2 {font-size: 60px; bottom: 5%;}
 #map {padding-bottom: 75%;}
 #map1 {background: url(../img/map1-800.jpg) center center no-repeat; background-size: cover;}
 #map2 {background: url(../img/map2-800.jpg) center center no-repeat; background-size: cover;}

 #empyre-lotsg {background-image: url(../img/empyre2-800.jpg);}
 #empyre-dotff {background-image: url(../img/empyre3-800.jpg);}
 #empyre-eotde {background-image: url(../img/empyre5-800.jpg);}
 #parallax3 {background-image: url(../img/empyre4-800.jpg);}
 #parallax3 > img {width: 80%;}
}

@media screen and (max-width: 600px)
{
 p, ul {font-size: 14pt;}
 h1 {font-size: 28pt;}
 h2 {font-size: 24pt;}
 h3 {font-size: 20pt;}
 .parallax-window {height: 400px;}
 .parallax-window > h2 {font-size: 60px;}

 nav#menu {display: none; position: fixed; width: 100%; top: 55px; right: 0; background-color: rgb(0, 0, 0, .7); padding: 10px; box-sizing: border-box; z-index: 110;}
 nav#menu > ul > li {display: block; text-align: right; padding: 0; margin: 0;}
 nav#menu > ul > li > ul {display: block; visibility: visible; position: static; padding: 0; margin: 5px 0 10px 0;}
 nav#menu > ul > li > ul > li {text-align: right; padding: 5px 0;}
 header.scrolled nav#menu > ul > li > ul > li {background-color: transparent; padding: 5px 0;}

 header {height: 0; padding: 0;}
 #menu-h {display: block; width: 36px; height: 36px; position: absolute; top: 10px; right: 12px;}
 #buy-top {font-size: 1.3em;}
 #buy-top > a {padding: .25em 1em;}
 .buy {font-size: 1.2em;}
 .character {width: 140px;}
 .character-earls {width: 180px;}

 #footer-social > a {width: 50px; height: 50px;}
 #top-social {top: 0px; left: 0; right: auto;}
 #top-social > ul > li {display: inline-block;}
 #top-social a {width: 30px; height: 30px; margin: 0 10px 10px 0;}
}

@media screen and (max-width: 400px)
{
 .parallax-window {height: 300px;}
 p, ul {font-size: 14pt;}
 .character {width: 100px;}
}