*   {
    margin:0;
    padding:0;
}
body {
    background:#181818;
    font-size:20px;
}
p {
    margin:20px 0;
}
h1, h3 {
    background: -webkit-linear-gradient(#fff, #FFE8AE);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h1 {
    font-size: 45px;
    margin-bottom: 20px !important;
    
}
.ss-heading > div { 
    display: inline-block;
    line-height: 54px;
    background: url('/wp-content/themes/soulstonesurvivors/assets/images/box-part.png');
    height: 58px;
    padding: 0 15px;
    margin: 0 35px;
}
.ss-heading > div::after, .ss-heading > div::before  {
    content:"";
    background: url('/wp-content/themes/soulstonesurvivors/assets/images/box-end.png');
    height: 58px;
    width: 51px;
    position: absolute;
}
.ss-heading > div::before  {
    margin-left: -51px;
    transform:scaleX(-1);
}
h2 {
    color:white !important;
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size: 23px;
    text-align:center;
}
.no-p-margin p {
    margin:0;
}
a {
    color:#FFE8AE;
    text-decoration: none;
}
a:hover {
    color:red;
}
@media(max-width:979px){
    h2{
        font-size:17px;
    }
}

/* 
**  Navigation
*/

#site-header {
    background-image: linear-gradient(#3E434A, #19191A);
    box-shadow: 0px 0px 5px 0px black inset;
    position: sticky;
    top: 0px;
    z-index: 2;
}
#site-header-inner {
    max-width:1200px;
    margin:auto;
}
#site-header-inner > div{
    display:inline-block;
    vertical-align: top;
}
.site-header-logo {
    width:10%;
}
.menu-main-menu-container {
    width:70%;
}
.site-header-right {
    width:15%;
    text-align:right;
}
.site-header-logo img {
    height:55px;
}
#site-header ul {
    list-style: none;
    padding: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 17px;
}
#site-header ul > li { 
    display: inline-block;
    line-height: 54px;
    background: url('/wp-content/themes/soulstonesurvivors/assets/images/box-part.png');
    height: 58px;
    padding: 0 15px;
    margin: 0 35px;
}
#site-header ul > li::before, #site-header ul > li::after {
    content:"";
    background: url('/wp-content/themes/soulstonesurvivors/assets/images/box-end.png');
    height: 58px;
    width: 51px;
    position: absolute;
}
#site-header ul > li::before {
    margin-left: -51px;
    transform:scaleX(-1);
}
#site-header ul > li > a {
    text-decoration: none;
    color:white;
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
}
#site-header ul > li:hover a {
    color:#E4B548;
}
#site-header ul > li > a::before {
    content: "";
    width: 2px;
    height: calc(100% - 17px);
    position: absolute;
    background: rgba(255,255,255,0.4);
    left: -15%;
    top: 8px;
    opacity:0;
}
#site-header ul > li > a:hover::before  {
    animation:menuHover .8s ease-in;
}
@keyframes menuHover {
    25%   {opacity:1;}
    75%  {left:115%; background: rgba(228,181,72,0.4);}
    100% {opacity:0;}
}
.site-header-right a{
    color:white;
    font-size:20px;
    line-height: 60px;
}
.site-header-right a:hover{ 
    color:#E4B548;
}
@media(max-width:979px){
    .menu-main-menu-container{
        width: 100%;
        position: absolute;
        left: -100%;
        background: rgba(0,0,0,0.3);
    }
    #site-header ul > li {
        display: block;
    }
    .site-header-right, .site-header-logo {
        width: 49%;
    }
    .site-header-logo img {
        padding-left: 30px;
    }
}
/*
** Page
*/

.content-container {
    margin-top:70px;
    color:white;
}
.entry-content {
    /*max-width:1000px;
    margin:auto;*/
    padding:0 15px;
}

/*
** Page
*/

.banner {
    width: 100%;
    height: 800px;
    background-size: cover;
    position: relative;
    box-shadow: 0px 0px 15px 5px black inset;
}

/*
** Frontpage
*/

#frontbanner {
    background: url('/wp-content/themes/soulstonesurvivors/assets/images/soulstone-survivors-key-art.jpg');
    background-size: cover;
   
}
.banner-logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 205%);
    width: 500px;
}
.banner-logo img {
    width:100%;
}

@media(max-width:979px){
    #frontbanner {
        height:200px;
    }
    .banner-logo  {
        transform: translate(-50%, 50%);
        width: 300px;
    }
}

/*
** Footer
*/

footer {
    max-width:1200px;
    margin:auto;
}

#footer {
    /*border-top:2px solid white;
    text-align:center;*/
    color: white;
    padding: 15px;
    background-image: linear-gradient( #19191A, #3E434A);
box-shadow: 0px 0px 5px 0px black inset;
}
#footer > div {
    max-width:1200px;
    margin:auto;
}
#footer > div  > div {
    display:inline-block;
    width:33%;
}