/*
Theme Name: Gamebuilders Theme
Author: Björn Pollmeyer
Author URI: https://coscreen.net
Description: A theme for The Gamebuilders
Version: 0.9
Text Domain: gamebuilders
*/

@font-face{
    font-family:"PaperJohnny";
    src: url('fonts/paperjohnnyeinhalb-regular-webfont.woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family:"PTSans";
    src: url('fonts/PTS75F-webfont.woff');
    font-weight: bold;
    font-style: normal;
}
@font-face{
    font-family:"PTSans";
    src: url('fonts/PTS76F-webfont.woff');
    font-weight:bold;
    font-style:italic;
}
@font-face{
    font-family:"PTSans";
    src: url('fonts/PTS55F-webfont.woff');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"PTSans";
    src: url('fonts/PTS56F-webfont.woff');
    font-weight:normal;
    font-style:italic;
}
@font-face{
    font-family:"PTSerif";
    src: url('fonts/PTF75F-webfont.woff');
    font-weight: bold;
    font-style: normal;
}
@font-face{
    font-family:"PTSerif";
    src: url('fonts/PTF76F-webfont.woff');
    font-weight:bold;
    font-style:italic;
}
@font-face{
    font-family:"PTSerif";
    src: url('fonts/PTF55F-webfont.woff');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"PTSerif";
    src: url('fonts/PTF56F-webfont.woff');
    font-weight:normal;
    font-style:italic;
}

@-ms-viewport{
  width: device-width;
}

body {
    font-family:"PTSans", sans-serif;
    font-weight:normal;
}

/* Extra small devices (portrait phones, less than 576px), Standard */

* {
    text-decoration: none;
    list-style-type: none;
}

p, li {
    font-size:1rem;
    line-height:1.725rem;
}


a {
    color:var(--maincolordark);
}
p a {
    font-family: "PaperJohnny", sans-serif;
    transition: all .2s ease;
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

a:hover {
    color:var(--secondcolor);
    transition: all .2s ease;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "PaperJohnny", sans-serif;
    font-weight:normal;
    text-transform: uppercase;
}
h1 {
    color:var(--maincolordark);

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
h1, a {
    hyphens: auto; 
}
h2,h3,h4,h5,h6 {
    color:#000;
}

h1 {font-size: 1.6rem;}
h2 {font-size: 1.3rem;}
h3 {font-size: 1.2rem;}
h4 {font-size: 1.1rem;}
h5 {font-size: 1.1rem;}
h6 {font-size: 1.1rem;}

.page-layout h2, .page-layout h3, .page-layout h4 {
    margin-top: 3rem;
}
h1 + h2, h2 + h3, h3 + h4 {
    margin-top: 0;
}

.divider {
    display: block;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

s, strike, del {
    text-decoration: line-through !important;
}

small, label, .game-top-service-widget p {font-size: 0.85rem;}

button, input, a.button, p.button a, a.more-link {
    font-family: "PaperJohnny", sans-serif;
    border:2px solid var(--maincolordark);
    padding:.25rem .5rem;
    font-size:1rem;
    transition: all .4s cubic-bezier(.36,3,.45,.26);
    line-height: 1.725rem;
    display:inline-block;
}
button,input[type=submit], a.button, p.button a, a.more-link {
    background-color: var(--maincolordark);
    color:#fff !important;
    cursor: pointer;
    display: table;
    margin: auto;
}
button:hover,input[type=submit]:hover, a.button:hover, p.button:hover a, a.more-link:hover {
    background-color: var(--secondcolor);
    border:2px solid var(--secondcolor);
    transform: rotate(-1deg);
    transition: all .1s ease;
}
p.button.order a {
    background-color: var(--maincolor);
    border:2px solid var(--maincolor);
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding-bottom: 0;
}
p.button.order:hover a {
    background-color: var(--secondcolor);
    border:2px solid var(--secondcolor);
}
a.button.checkout, a.button.big-button, p.button.big-button a {
    background-color: var(--secondcolor);
    border:2px solid var(--secondcolor);
    font-weight: bold;
    text-transform: uppercase;
}
a.button.checkout:hover, a.button.big-button:hover {
    background-color: var(--maincolordark);
    border:2px solid var(--maincolordark);
}
a.button.big-button, p.button.big-button a {
    font-size: 1.5rem;
    padding: .5rem;
    font-weight: normal;
}

label {
    display: block;
    font-size: .8rem;
}
.required {
    color:var(--maincolor);
}  
ul {
    padding:0;
}
figcaption {
    color:var(--maincolor);
    padding-top: 1.5rem;
    text-align: center;
    font-size: .8rem;
    font-style: italic;
}
.blog-content img {
    border-radius: 3px !important;
}

.site {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    background:#fff;
    box-shadow: 5px 5px 30px #333;
}
.site p {
}

.game-top-service-widget {
    width:100%;
    display:table;
    color:#fff;
    background-color:var(--secondcolorlight);
    height:auto;
    text-align: center;
    position: relative;
}
.game-top-service-widget .textwidget {
    padding:0 1rem;
}
.game-top-service-widget p {
    font-family: "PTSans",sans-serif;
    width:100%;
    margin:0;
    position:relative;
    font-size: .6rem;
    letter-spacing: .03rem;
}
.game-top-service-widget p:first-of-type {
    margin-left:0rem;
}
.game-top-service-widget p:first-of-type:before {
    display:inline-block;
    content:url(images/package_heart.svg);
    height:1.2rem;
    width:1.7rem;
    padding-right:0rem;
    padding-top:.2rem;
    vertical-align: text-bottom;
}
.game-top-service-widget p:last-of-type {
    text-align:right;
    display:none;
}
.game-top-service-widget a, .game-top-service-widget a:hover {
    color:#fff;
}

.site-header {
    line-height: 0;
    position: sticky;
    top: 0;
    background-color: rgba(255,255,255,0.95);
    z-index: 5;
    padding-top: 1rem;
}

header, .site-content, .home.page .site-content, .page-template-page-game.page .site-content {
    /* padding:0 1rem 3rem; */
    padding:0 1rem 0;
    width:100%;
}
.page-template-page-game.page .page-layout h1:first-of-type {
    display:none;
}
header {
    position:relative;
    display:table;
    margin:0;
} 
header .logo {
    height:3.2rem;
    width:auto;
}

header .shopicons {
    padding:1.2rem 0 1rem;
    float:right;
}
header .shopicons a {
    padding-left:15px;
    display: inline-block;
    line-height: 0;
    position: relative;
}
header .shopicons svg {
    height:1.7rem;
    width:1.7rem;
    fill:var(--maincolor);
    transition:all .3s ease;
}
header #search svg {
    height:1.1rem;
    width:1.1rem;
    fill:var(--maincolor);
    transition:all .3s ease;
}
header .shopicons .account svg path.smile {
    opacity: 0;
    transition:all .3s ease;
}
header .shopicons .account svg:hover path.smile {
    opacity: 1;
    transition:all .3s ease;
}
header .shopicons svg:hover {
    fill:var(--secondcolor);
}
header .shopicons .wishlist svg {
    transition: all .4s cubic-bezier(.36,3,.45,.26);
}
header .shopicons .wishlist svg:hover {
    fill:#c51c22;
    transform: scale(1.1,1.1);
    transition: all .1s ease;
}
header #search svg path.pageleft {
    opacity: 0;
    fill:var(--maincolor);
    transition:all .3s ease;
}
header #search svg path.pageright {
    opacity: 0;
    fill:var(--maincolordark);
    transition:all .3s ease;
}
header #search svg:hover path.pageleft, header #search svg:hover path.pageright {
    opacity: 1;
    transition:all .3s ease;
}
header .shopicons .game-product-count {
    position:absolute;
    top:-10px;
    left:20px;
    color:#fff;
    background-color: var(--maincolordark);
    height:1rem;
    width:1rem;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    transition:all .3s;
    font-family:"PTSans",sans-serif;
    font-size:.55rem;
    font-weight: bold;
    padding-top:.45rem;
    border: 1px dotted #fff;
}
header .divider {
    border-top: unset;
    margin-bottom: 2.5rem;
    padding-bottom: 0;
}
header .divider:after {
    display: block;
    background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.20), transparent);
    content: "";
    height: 5px;
    width: calc(100% - 5rem);
    margin: auto;
    position: absolute;
    bottom: -4px;
}
.search .page-title span {
    font-weight: bold;
} 

#search {
    position: absolute;
    float: none;
    width: calc(100% - 1rem);
    left: 0;
    top: 4.75rem;
}
#search input[type=search] {
    background-color:unset;
    border: 0px;
    margin-right: 2rem;
    width: 85%;
}
#search button {
    background-color:unset;
    border: 0px;
    position: absolute;
    top:.3rem;
    right: 0;
}
#searchform, .woocommerce-product-search {
    position: relative;
    border-radius: 5px;
    background-color: #f0f0f0;
    margin-top: -.55rem;
    margin-left: 1rem;
    padding: .25rem 0;
}

.site-content {
    margin: 2rem auto 2rem auto;
}

.home h1 {
    display: none;
}
.tile.vierzudrei {
    width: 100%;
    padding-top: 66%;
}
.tile.small-teaser, .tile.blog-teaser {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: inset 1px 1px 3px #444;
}
.small-teaser p {
    position:absolute;
    top:2rem;
    right:3rem;
    border-radius: 5px;
    background-color:var(--secondcolorlight);
    transform:rotate(-5deg);
    box-shadow: 3px 3px 5px #333;
    color:#fff;
    padding:1.2rem 1rem 1rem;
    text-align: center;
    font-family: "PaperJohnny", sans-serif;
    font-size: 1.2rem;
    opacity:.9;
}
.small-teaser p.unten {
    top: unset;
    bottom:2rem;
}
.blog-teaser p {
    position:absolute;
    left: 0;
    right: 0;
    top: 40%;
    margin:auto;
    transform: translateY(-25%);
    width:95%;
    text-shadow: 3px 3px 5px #333;
    color:#fff;
    text-align: center;
    font-family: "PaperJohnny", sans-serif;
    font-size: 1.75rem;
}
.blog-teaser p span {
    background-color:var(--maincolor);
    padding: .25rem .5rem 0;
    box-shadow: 3px 3px 5px #333;
    border-radius: 5px;
    line-height:5rem;
    font-size: 3rem;
    opacity: .9;
}
.small-teaser a, .blog-teaser a {
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 1;
}
.home .teaser h2 {
    color: var(--maincolordark);
    font-size: 1.4rem;
}
.home .teaser p {
    font-size: 1.2rem;
}

.hero {
    position: relative;
}
.hero figure {
    margin-bottom: 0;
}
.hero img { 
    width: 100%;
    height: auto;
    border-radius: 5px !important;
}

.hero-text img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter: drop-shadow(2px 2px 3px #333);
    filter: drop-shadow(2px 2px 3px #333);
    transform-origin: 50% 75%;
}
.hero-text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 1px 1px 3px #444;
    width: 100%;
    padding-top: 45.4545%;
    border-radius: 5px;
}

/* Animations */
.zoom img {
    animation-delay: 2s;
    animation: zoomin 10s ease-out;
}
@keyframes zoomin {
    0% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}
/* Blocks */
.wp-block-group {
    position: relative;
    padding-bottom: 2rem;
}
.wp-block-group.english p {
    color: var(--maincolordark);
}
.wp-block-group.english:before {
    display: block;
    background: radial-gradient(ellipse farthest-side at bottom center, rgba(0,0,0,0.20), transparent);
    content: "";
    height:5px;
    width: 100%;
    margin: 1.5rem auto 4rem auto;    
}
.english .wp-block-group__inner-container:before {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-30px);
    content: url(images/flag_english.png);    
    -webkit-filter: drop-shadow(2px 2px 3px #333);
    filter: drop-shadow(2px 2px 3px #333);
    transform-origin: 50% 75%;
}
.wp-block-group.is-nowrap {
    flex-wrap: wrap !important;
}

.wp-block-columns {
    margin-top: 4rem;
}
.wp-block-column:first-of-type {
    margin-bottom: 3rem;
}

.wp-block-image img {
    height: auto;
}
.wp-block-latest-posts__featured-image img {
    width: 100% !important;
}
.wp-block-latest-posts__post-title {
    font-family: "PaperJohnny", sans-serif;
    font-size: 1.2rem;
    text-align: center;
    display: block;
    color: var(--maincolordark);
}

.wp-block-column:nth-of-type(odd) {
    margin-right: 0;
}
.wp-block-column:nth-of-type(even) {
    margin-left: 0;
}
:where(.is-layout-flex) {
    gap: 1.5em;
}
.wp-block-separator {
    display: block;
    background: radial-gradient(ellipse farthest-side at bottom center, rgba(0,0,0,0.20), transparent);
    height:3px;
    width: 100%;
    margin: 1rem auto 3rem auto;
    border:0;
} 
/* Newsletter blocks */

.page-layout .newsletter h3 {
    color:#fff;
    text-align: center;
    width:100%;
}
.newsletter .cr_ipe_item label {
    color:#fff;
    text-align: center !important;
}
.newsletter .cr_ipe_item {
    margin:unset;
}
.newsletter .cr_body label {
    display:block;
}
.newsletter .cr_form {
    width:100%;
}
.newsletter .cr_ipe_item input[type='email'] {
    text-align: center;
}
.newsletter .cr_button {
    font-family: "PaperJohnny", sans-serif;
    height:2rem;
    line-height:2rem;
    margin:unset;
    padding:.25rem .5rem 0;
    font-size: 1rem;
    border:none;
}
.newsletter.blue .cr_button {
    background-color: var(--secondcolorlight);
}
.newsletter .cr_button:hover {
    background-color:#fff;
    color:var(--maincolor) !important;
}
.newsletter .cr_body {
    background-color:unset;
}
.newsletter {
    box-shadow: 3px 3px 5px #333;
    flex: max-content;
}
.tile {
    border-radius:5px;
    width:100%;
    padding:0 1.5rem 1.5rem 1.5rem;
}
.blue {
    background-color: var(--maincolordark);
}
.orange {
    background-color: var(--secondcolorlight);
}

/* Navigation Menu */
.burger-button {
    z-index:100;
}
.burger-button svg {
    height:1.7rem;
    width:1.7rem;
    display:block;
    float:left;
    margin:1.2rem 1.25rem .8rem 0;
}
.burger-button.close svg {
    float:none;
    margin:2.925rem 1.25rem .8rem 1rem;
}
.burger-button svg rect {
    fill:var(--maincolordark);
    transition:all .3s ease;
}
.burger-button.close svg path {
    fill:#fff;
    transition:all .3s ease;
}
.burger-button:hover svg rect, .burger-button.close:hover svg path {
    fill:var(--secondcolor);
}
.navigation-menu {
    position:fixed;
    left:-100vw;
    top:0;
    background-color: var(--maincolordark);
    width:100vw;
    z-index:50;
    transition: all .3s ease;
    height:0;
}
.navigation-menu ul {
    padding:1rem;    
}
.navigation-menu li {
    font-family: "PaperJohnny", sans-serif;
    font-size: 2rem;
    line-height: 3rem;
}
.navigation-menu li a {
    color: #fff;
    text-transform: uppercase;
}
.navigation-menu li a:hover {
    color: var(--secondcolor);
}
body:target .navigation-menu {
    left:0;
    transition: all .3s ease;
    height:105vh;
}
.site-content, .site-footer {
    transition: all .3s ease;
    visibility: visible;
}
body:target .site-content, body:target .site-footer {
    transition: all .3s ease;
    visibility: hidden;
    overflow: none;
}

/* Hero Homepage */
.herohome {
    width:calc(100% + 2rem);
    height:calc(100vh - 134px);
    position:relative;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-left:-1rem;
    margin-top:-2rem;
}
.herohome .bg01 {    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 134px);
    background-image: url(images/sunavalo_01.png);
    background-size: cover;
    background-position: center center;
    animation: hero-bg01 50s ease;
    animation-iteration-count: infinite;
}
@keyframes hero-bg01 {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.0);
    }
}
.herohome .bg02 {    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 134px);
    background-image: url(images/sunavalo_02.png);
    background-size: cover;
    background-position: center center;
    animation: hero-bg02 50s ease;
    animation-iteration-count: infinite;
}
@keyframes hero-bg02 {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.0);
    }
}
.herohome .bg03 {    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 134px);
    background-image: url(images/sunavalo_03.png);
    background-size: cover;
    background-position: center center;
    animation: hero-bg03 50s ease;
    animation-iteration-count: infinite;
}
@keyframes hero-bg03 {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1.0);
    }
}
/*
.herohome .bg04 {    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 134px);
    background-image: url(images/sunavalo_04.png);
    background-size: cover;
    background-position: 25% 75%;
    animation: hero-bg04 60s ease;
}
@keyframes hero-bg04 {
    0% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1.0);
    }
}
*/
.herohome .bg05 {    
    position: absolute;
    top:-10vh;
    left:0;
    width:100%;
    height:calc(100vh - 134px);
    background-image: url(images/sunavalo_logo.png);
    -webkit-filter: drop-shadow(20px 0px 20px #fff);
        filter: drop-shadow(20px 0px 20px #fff);
    background-size: cover;
    background-position: top center;
    animation: hero-bg05 65s ease;
}
@keyframes hero-bg05 {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
.herohome .bg06 {    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 134px);
    background-image: url(images/sunavalo_05.png);
    background-size: cover;
    background-position: 25% 65%;
    animation: hero-bg06 50s ease;
    animation-iteration-count: infinite;
}
@keyframes hero-bg06 {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}

.herohome .shadow {    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 134px);
    box-shadow: inset 1px 1px 3px #444;
}
.arrowdown {
    width:22px;
    height:11px;
    background-image: url(images/arrowdown.svg);
    background-size: cover;
    bottom:20px;
    left:calc(50% - 11px);
    position:absolute;
    opacity:1;
    -webkit-animation: arrow-down 1.5s ease;
    animation: arrow-down 1.5s ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition: opacity 6s;
    transition: opacity 0.6s;
    z-index:1;
}

@keyframes arrow-down {
    0% {
        bottom:40px;
    }
    100% {
        bottom:20px;
    }
}

.afterhero {
    padding-top:3rem;
    flex-flow: row nowrap !important;
}
.link-overlay {
    width:100%;
    height:100%;
    position: absolute;
}
.attentioner {
    position: absolute;
    right:-1.5rem;
    top:40%;
    font-family: "PaperJohnny", sans-serif;
    font-size: 2.5rem;
    background: var(--maincolor);
    border-radius: 5px;
    padding: 0 3rem 0 1rem;
    color: #fff;
    transform: rotate(-5deg);
    text-align: left;
    opacity: .9;
    box-shadow: 1px 1px 3px #444;
}
.stoerer {
    position: absolute;
    right:-1.5rem;
    top:30%;
    font-family: "PaperJohnny", sans-serif;
    font-size: 2.5rem;
    background: var(--secondcolorlight);
    border-radius: 5px;
    padding: 0 3rem 0 1rem;
    color: #fff;
    transform: rotate(-5deg);
    text-align: left;
    opacity: .9;
    box-shadow: 1px 1px 3px #444;
}
.attentioner p, .stoerer p {
    margin:.5rem 0;
    line-height:1.5rem;
}

/* Standard page */

.page-layout.service h1, .page-layout.service h2, .page-layout.service h3, .page-layout.service h4, .page-layout.service h5, .page-layout.service h6 {
    text-align: left;
}
.page-layout.service.errata h1, .page-layout.service.errata h2, .page-layout.service.errata h3, .page-layout.service.errata h4, .page-layout.service.errata h5, .page-layout.service.errata h6, .page-layout.service.errata p {
    text-align: center;
}

.page-layout.service h1:after {
    content: none;
}
.page-layout .wp-post-image {
    width: 100%;
    height:auto;
}
.page .button a {
    margin: unset;
}
.page .page-layout.service.errata .button a {
    margin: auto;
}
.page .page-layout.service.errata b, .page .page-layout.service.errata strong {
    color: #dd0066;
}
.page .page-layout.service.errata h3:before, .page .page-layout.service.errata h3:before {
    display: block;
    background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.3), transparent);
    content: "";
    height: 2px;
    width: 20%;
    margin: 0 auto 3.5rem;
}

/* Archive & Single */

.archive h1, .page h1 {
    font-size: 2.5rem;
    text-align: center;
    color: var(--maincolordark);
    padding: 1rem 0 0 0;
}
.archive article {
    margin-bottom: 4rem;
    position: relative;
}
.archive article:last-child {
    margin-bottom: 2rem;
}
.archive article img, .single article img {
    width: 100%;
    height: auto;
}
.archive article figure, .single article figure {
    text-align: center;
}
.single article figure.is-resized img {
    width: 50%;
    height: auto;
}
.archive article a h2, .single article a h2 {
    color: var(--maincolor);
    transition: all .3s;
    font-size: 1.6rem;
    position: relative;
}
.archive article a h2:before, .single article a h2:before {
    display: block;
    background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.3), transparent);
    content: "";
    height: 4px;
    width: 100%;
    margin: 0 auto 5rem;
}
.archive article a h2:hover, .single article a h2:hover {
    color: var(--secondcolor);
    transition: all .5s;
}
.archive article:first-of-type a h2:before, .single article:first-of-type a h2:before {
}
.blog-content, .archive article a h2, .single article a h2 {
    margin-left: 0;
}
.page-layout {
    position: relative;
}
.page-layout h2, .page-layout h3, .page-layout h4 {
    color: var(--maincolordark);
    text-align: center;
}
.blogdate {
    position: absolute;
    width:4rem;
    top: -1.15rem;
    left: 50%;
    transform: translateX(-2rem);
}
.blogdate:after {
    content: "";
    position: absolute;
    width: 4rem;
    height: 1.5rem;
    background-color: #fff;
    top: -.35rem;
    left: 0;
}
.blogdate svg {
    fill: var(--maincolor);
    width: 100%;
    height: auto;
}
.blogdate p {
    font-family: "PaperJohnny", sans-serif;
    position: absolute;
    font-size: 1.1rem;
    line-height: 1rem;
    top: .75rem;
    color: #fff;
    width: 100%;
    text-align: center;
}
.blogdate p span.year {
    font-size: .75rem;
}

.author {
    text-align: center;
    padding: 1.5rem 0 1.5rem 0;
    position: relative;
}
.author h2 {
    margin: 1.5rem 0 0 0;
}
.author p {
    padding: .5rem 0 1.5rem 0;
}
.author figure {
    margin: 2rem auto 0 auto;
    width: 10rem;
    height: 10rem;
    clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.author .wp-block-column {
    padding-top: 2rem;
}

figure.hexaimg  {
    margin: 2rem auto 0 auto;
    width: 10rem;
    height: 10rem;
    clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}


/* Single product page */

.single-product .product {
    position: relative;
    display: table;
}

.single-product .woocommerce-product-gallery {
    width:100%;
    float:none;
    padding-right: 0rem;
}
.single-product .woocommerce-product-gallery div {
    width:30%;
    margin-right: 5%;
    margin-bottom: 1rem;
    float: left;
    padding-bottom: 30%;
    position: relative;
}
.single-product .woocommerce-product-gallery div:first-of-type {
    width:100%;
    padding-bottom: 100%;
}
.single-product .woocommerce-product-gallery div:nth-of-type(3n+1) {
    margin-right: 0;
}
.single-product .woocommerce-product-gallery div:nth-of-type(5) {
    clear: both;
}
.single-product .woocommerce-product-gallery figure {
    margin: 0;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
    position: absolute;
    width: 100%;
    height: 100%;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 1px 1px 7px #999;
}
.single-product .woocommerce-product-gallery div:first-of-type img, .single-product .woocommerce-product-gallery div:nth-of-type(2) img {
    box-shadow: none;
}
.single-product article > h1 {
    display: none;
}
.single-product .summary {
    width:100%;
    float:none;
    clear: both;
}
h1 {
    margin-bottom: 0;
}
.summary h2 {
    margin-top: 0;
}
.summary p {
}
.summary small {
    line-height: 1rem;
}
.urheber:after {
    content: ",";
}
.urheber:last-child:after {
    content: "";
}
.book-meta {
    font-size: .8rem;
    font-weight: bold;
    line-height: 1.25rem;
    border-top: 1px dotted var(--maincolordark);
    border-bottom: 1px dotted var(--maincolordark);
    display: inline-block;
    padding: .5rem 0;
}
.book-excerpt {
    font-size: .8rem;
    line-height: 1.25rem;
    display: none;
}
.summary .price {
    font-size: 2rem;
    color: var(--maincolordark);
}
.woocommerce_de_versandkosten, .woocommerce-de_price_taxrate, .shipping_de span {
    font-size: .8rem;
    line-height: 1.25rem;
}
.summary input, .summary button {
    padding: .5rem 1rem;
    float: left;
}
.summary input {
    width: 4rem;
    margin-right: 1rem;
}
.single-product form.cart::after {
    content: "";
    height: 5rem !important;
    display: block;
}
.single-product .product-description {
    clear: both;
    padding-top: 2rem;
    border-top: 1px dotted var(--maincolordark);
}
.single-product .product-description p, .page article p {
    font-family: "PTSerif",serif;
}
.single-product .autorbio, .single-product .leseprobe {
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px dotted var(--maincolordark);
}

/* Template Main-Template */

.game-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100vh;
    width: 100vw;
}

.page-template-page-game h1 {
    font-size: 2.5rem;
    text-align: center;
    color: var(--maincolordark);
    padding: 1rem 0 0 0;
}
.page-template-page-game .game-summary {
    text-align: center;
}
.page-template-page-game .game-summary p.button {
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}
.page-template-page-game h1:after, .page h1:after {
    display: block;
    background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.20), transparent);
    content: "";
    height: 5px;
    width: 100%;
    margin: 1.5rem auto 3.5rem auto;
}
.page-template-page-game .teaser, .page-layout .teaser {
    font-family: "PaperJohnny",sans-serif;
    font-size: 1.25rem;
    background: radial-gradient(ellipse, rgba(102,44,145,0.15) 0%, rgba(255,255,255,0) 45%);
    line-height: 2.5rem;
    text-align: center;
    color: var(--maincolordark);
    padding: 0;
}
.page-template-page-game .teaser:before, .page-layout .teaser:before {
    display: block;
    background: radial-gradient(ellipse farthest-side at bottom center, rgba(102,44,145,0.85), transparent);
    content: "";
    height:5px;
    width: 100%;
    margin: 2rem auto 1.5rem auto;
}
.page-template-page-game .teaser:after, .page-layout .teaser:after {
    display: block;
    background: radial-gradient(ellipse farthest-side at top center, rgba(102,44,145,0.85), transparent);
    content: "";
    height: 5px;
    width: 100%;
    margin: 1.5rem auto 2rem auto;
}
.page-template-page-game .claim {
    font-family: "PaperJohnny",sans-serif;
    font-size: 2.5rem;
    line-height: 3rem;
    text-align: center;
    color: var(--secondcolorlight);
    padding: 0;
}
.page-template-page-game .claim:before {
    display: block;
    background: radial-gradient(ellipse farthest-side at bottom center, rgba(0,0,0,0.20), transparent);
    content: "";
    height:5px;
    width: 100%;
    margin: 3.5rem auto 1.5rem auto;
}
.page-template-page-game .claim:after {
    display: block;
    background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.20), transparent);
    content: "";
    height: 5px;
    width: 100%;
    margin: 1.5rem auto 3.5rem auto;
}

/* Catalogue */

p.price {
    font-family: "PaperJohnny",sans-serif !important;
    font-size: 1.5rem;
    color: var(--secondcolor);
}

.added_to_cart.wc-forward {
    display: none !important;
}

.woocommerce {
    width:100%;
    display:table;
}
.woocommerce ul.products {
    width:100%;
}
.woocommerce ul.products li.product h2 {
    min-height: 2.5rem;
    font-size: 1rem;
    text-transform: unset;
    margin-top:1rem;
    line-height:1.25rem;
    font-weight: normal;
}
.woocommerce ul.products li.product h2 small {
    font-size: .9rem;
}
.woocommerce ul.products li.product a {
    position: relative;
}
.woocommerce ul.products li.product a img {
    transition: all .2s ease;
    width:100%;
    height:auto;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    background-color: #f0f0f0;
}
.woocommerce ul.products li.product:hover a img {
    transition: all .2s ease;
    background-color:#d0d0d0;
}
.woocommerce ul.products li.product {
    width:50%;
    float:left;
    text-align: left;
    padding-bottom:3rem;
    position: relative;
}
.woocommerce ul.products li.product p.price {
    margin:0rem 0 .5rem;
}
.woocommerce ul.products li.product:nth-of-type(even) {
    padding-left:2%;
}
.woocommerce ul.products li.product:nth-of-type(odd) {
    padding-right:2%;
    clear:both;
}
.woocommerce ul.products li.product .button {
    position: absolute;
    bottom: 3rem;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    text-align: center;
    background-color: unset;
    border-color: unset;
}
.woocommerce ul.products li.product .button:hover {
    background-color: unset;
    border-color: unset;
}
.woocommerce ul.products li.product:nth-of-type(even) .button {
    right: 0;
}
.woocommerce ul.products li.product:nth-of-type(odd) .button {
    right: 4%;
}
.woocommerce ul.products li.product .button svg {
    height: 2.5rem;
    width: 4rem;
    fill: var(--maincolordark);
    padding: .35rem .25rem 0;
}
.woocommerce ul.products li.product .button:hover svg {
    fill: var(--maincolor);
}
.woocommerce ul.products li.product.featured a.woocommerce-LoopProduct-link:before {
    content: "NEU";
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background-color: var(--maincolor);
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: bold;
    padding-top: .9rem;
    text-transform: uppercase;
    color: #fff;
    transform: rotate(-5deg);
    border: 2px dotted #fff;
    transition: all .5s;
    z-index: 1;
}

/* Catalogue pagination */

.woocommerce-pagination {
    width:100%;
    display:block;
    text-align: center;
    border-top:1px dotted var(--maincolordark);
    clear:both;
}
.woocommerce-pagination .page-numbers li {
    display:inline-block;
    margin-top:1rem;
    line-height:unset;
}
.woocommerce-pagination .page-numbers li a {
    color:var(--maincolordark);
    border:1px solid var(--maincolordark);
    display:inline-block;
    padding:5px;
    border-radius: 4px;
    width:1.8rem;
    height:1.8rem;
    transition: all .3s ease;
}
.woocommerce-pagination .page-numbers li a:hover {
    color:var(--secondcolor);
    border:1px solid var(--secondcolor);
    transition: all .3s ease;
}
.woocommerce-pagination .page-numbers li span.current {
    color:#fff;
    background-color:var(--secondcolor);
    border:1px solid var(--secondcolor);
    display:inline-block;
    padding:5px;
    border-radius: 4px;
    width:1.8rem;
    height:1.8rem;
}

/* Account page */
#customer_login .col-1 {
    margin: 0;
    margin-bottom:2rem;
    width: 100%;
}
#customer_login .col-2 {
    border:1px solid var(--secondcolor);
    border-radius: 4px;
    padding:1rem;
    margin: 0;
    width: 100%;
}
#customer_login input {
    width: 100%;
}
#customer_login input[type="checkbox"] {
    display: inline-block;
    margin-right: .5rem;
    width: auto;
}
#customer_login button[type="submit"] {
    margin-top: .725rem;
}


/* Hide/customize Steuer/Versand in shop-view */

.woocommerce ul.products li.product .wgm-info {
  font-size: .6rem;
  line-height: .8rem;
  color: #aaa;
}
.woocommerce ul.products li.product .wgm-info a {
  color: #aaa;
}
.woocommerce ul.products li.product .wgm-info.shipping_de {
  display: none;
}

/* Sidecart */

#game_sidecart {
    position:fixed;
    width:300px;
    height:100vh;
    top:0;
    right:-310px;
    padding:0 1rem 1rem 1rem;
    background-color:#fff;
    transition: right .5s;
    box-shadow: 0 0 5px #333;
    z-index:20;
    overflow-y:scroll;
    overflow-x:hidden;
}
#game_sidecart.show-sidecart {
    right:0 !important;
    transition: right .5s;
}
.sidecart-overlay {
    position:absolute;
    width:calc(100% - 300px);
    height:100%;
    visibility:hidden;
    transition: visibility .5s;
    top:0;
}
.sidecart-overlay-button {
    position:fixed;
    width:300px;
    height:3.75rem;
    top:0;
    right:0;
    visibility:hidden;
    transition: visibility .5s;
    z-index:30;
}
.sidecart-overlay-button.active {
    visibility:visible;
    transition: visibility .5s;
}
.sidecart-overlay {
    position:absolute;
    width:calc(100% - 300px);
    height:100%;
    visibility:hidden;
    transition: visibility .5s;
}
.sidecart-overlay.active {
    visibility:visible;
    transition: visibility .5s;
}
.sidecart-content {
    position: relative;
}
.sidecart-content p, .sidecart-content .woocommerce-mini-cart-item {
    line-height:1rem;
}
.sidecart-content .woocommerce-mini-cart-item a:nth-of-type(2), .woocommerce-cart .product-name a {
    color:#000;
    font-weight: bold;
    font-size: .9rem;
}
.sidecart-content .woocommerce-mini-cart-item {
    border-top:1px dotted var(--maincolordark);
    padding:1rem 0;   
    position: relative;
}
a.remove {
    position: absolute;
    top:1rem;
    left:0;
    color:#fff;
    background-color:var(--maincolordark);
    border-radius: 50%;
    width:16px;
    height:16px;
    text-align: center;
    font-size: 1rem;
    line-height: .9rem;
}
a.remove:hover {
    background-color:var(--secondcolor);
}
.sidecart-content .woocommerce-mini-cart-item:first-of-type a.remove {
    top:0;
}
.sidecart-content .woocommerce-mini-cart-item:first-of-type {
    border-top:unset;
    padding-top:0;
}
.sidecart-content li a img {
    float:left;
    width:75px;
    height:auto;
    margin-left:-10px;
}
.sidecart-content .quantity {
    display: block;
}
.sidecart-content .variation, .sidecart-content .quantity, .sidecart-content .wgm-info {
    margin-left:65px;
}
.sidecart-content .variation dt, .sidecart-content .variation dd p, .woocommerce-cart .variation dt, .woocommerce-cart .variation dd p {
    font-size:.7rem;
}
.sidecart-content .total {
    border-top:2px dotted var(--maincolordark);
    margin-top:0;
    padding-top: 1rem;
}
.sidecart-content .woocommerce-de_price_taxrate, .sidecart-content .jde_hint {
    font-size: .7rem;
    line-height: 1.25rem;
}
.sidecart-content .variation dt, .woocommerce-cart .variation dt {
    float:left;
    margin-right:.25rem;
}
.sidecart-buttons {
    position:sticky;
    z-index:30;
    top:0;
    padding-top:1rem;
    background-color: #fff;
}
.sidecart-buttons a.button, .sidecart-buttons button {
}
.sidecart-content a.button, .sidecart-content button {
    width:100%;
    text-align:center;
    margin-bottom:.5rem;
    line-height: 1.725rem;
}
.sidecart-content button.back-to-shop {
    color: var(--maincolordark) !important;
    background-color:#fff;
    border:2px solid var(--maincolordark);
    z-index:30;
}
.sidecart-content button.back-to-shop:hover {
    color: var(--secondcolor) !important;
    background-color:#fff;
    border:2px solid var(--secondcolor);
}


.sidecart-content .woocommerce-mini-cart__buttons {
    margin-bottom: 0;
}

/* Cart */
.woocommerce-cart .shop_table {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
}
.woocommerce-cart .product-remove {
    position: relative;
    width: 0;

}
.woocommerce-cart .product-remove a.remove {
    top: 10px;
}
.woocommerce-cart .product-thumbnail img {
    width:50px;
    height:auto;
}
.woocommerce-cart .shop_table th {
    border-bottom:1px solid var(--maincolordark);
    padding: .5rem 0 .5rem .5rem;
    font-weight: normal;
    font-size: .8rem;
    text-transform: uppercase;
    text-align: right;
}
.woocommerce-cart .shop_table th.product-subtotal {
    -ms-hyphens: manual;
    -moz-hyphens: manual;
    -webkit-hyphens: manual;
    hyphens: manual;
}
.woocommerce-cart .cart_item td {
    border-bottom:1px dotted var(--maincolordark);
    padding: .5rem 0 .5rem .5rem;
    text-align: right;
}
.woocommerce-cart tr {
    vertical-align: top;
}
.woocommerce-cart .cart_item td.product-thumbnail {
    text-align: center;
}
.woocommerce-cart .shop_table th.product-name, .woocommerce-cart .cart_item td.product-name {
    text-align: left;
}
.woocommerce-cart .variation {
    margin: 0;
}
.woocommerce-cart .variation dt, .woocommerce-cart .variation dd {
    margin: 0;
    display: inline-block;
    float: unset;
}
.woocommerce-cart .variation dt, .woocommerce-cart .variation dd p {
    line-height: 0rem;
    white-space: nowrap;
}
.woocommerce-cart input[type="number"] {
    width: 3rem;
}
.woocommerce-cart .cart_item .product-name a, .woocommerce-cart .cart_item .product-price, .woocommerce-cart .cart_item .product-quantity, .woocommerce-cart .cart_item .product-subtotal, .woocommerce-cart .cart_item .product-tax {
    font-size: .8rem;
}
.woocommerce-cart .product-tax {
    display: none;
}
.woocommerce-cart button[name="update_cart"], .woocommerce-cart .cart_totals h2, .woocommerce-cart div.coupon:not(.above-proceed) { 
    display: none;
}
.woocommerce-cart .checkout-button {
    width: 100%;
    font-size: 1.5rem;
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
} 
.woocommerce-cart .cart-collaterals {
    width: 100%;
    float: right;
    overflow-wrap: break-word;
    margin-top: .25rem;
} 
.woocommerce-cart .cart_totals th {
    font-size: 1rem;
    padding-right: .5rem;
    width: 30%;
} 
.woocommerce-cart .cart_totals .order-total th {
    font-weight: bold;
} 
.woocommerce-cart .cart_totals td {
    text-align: right;
    padding: .5rem 0rem .5rem .5rem;
    width: 70%;
    border-bottom:1px solid var(--maincolordark);
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods label {
    font-size: 1rem !important;
}
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
    margin-top: 0;
    margin-bottom: 0;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods .product-tax, .woocommerce-cart .cart_totals .wgm-tax {
    font-size: .8rem;
    display: block;
    font-style: italic;
    line-height: 1.5rem;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination, .woocommerce-cart .cart_totals .shipping-calculator-button {
    font-size: .8rem;
    line-height: 1rem;
}
.woocommerce-cart .cart_totals .wc-cart-shipping-notice {
    text-align: right;
    line-height: 1rem;
}
.woocommerce-cart details {
    text-align: right;
}
.woocommerce-cart summary {
    color: var(--maincolordark);
}
.woocommerce-cart .woocommerce-coupon-form {
    width: 100%;
    margin-top: 1rem;
}
.woocommerce-cart .wc-apa-button-separator {
    display: none !important;
}
.woocommerce-cart #pay_with_amazon {
    width: 100% !important;
    margin-top: 2rem;
}


/* Checkout-pages */

body.woocommerce-checkout #wpmc-back-to-cart,
body.woocommerce-checkout footer .payment-info,
body.woocommerce-checkout footer div.footer-widgets div.footer-widget-column:first-of-type,
body.woocommerce-checkout .burger-button,
body.woocommerce-checkout .navigation-menu,
body.woocommerce-checkout .search,
body.woocommerce-checkout .game-top-service-widget {
    display: none;
}
body.woocommerce-checkout {
    padding: 1rem;
    max-width: 500px;
    margin: auto;
    background-repeat:no-repeat;
    background: linear-gradient(45deg, #00676B 0%, #fff 150%) fixed;
}
body.woocommerce-checkout .site-header {
    position: relative;
}
body.woocommerce-checkout header #search {
    display: none;
}
body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    border-bottom:1px dotted var(--maincolordark);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
body.woocommerce-checkout #billing_email_field {
    border-bottom:1px dotted var(--maincolordark);
    margin-bottom: 0;
    padding-bottom: 2rem;
}
body.woocommerce-checkout .woocommerce-account-fields {
    border-bottom:1px dotted var(--maincolordark);
    margin-bottom: 1rem;
}
body.woocommerce-checkout input[type="email"], body.woocommerce-checkout input[type="text"], body.woocommerce-checkout input[type="password"] {
    width: 100%;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
body.woocommerce-checkout input[type="checkbox"] {
    margin-right: .5rem;
}
body.woocommerce-checkout p#billing_first_name_field, body.woocommerce-checkout p#shipping_first_name_field, body.woocommerce-checkout p#billing_last_name_field, body.woocommerce-checkout p#shipping_last_name_field {
    width: 48%;
    display: inline-block;
}
body.woocommerce-checkout p#billing_first_name_field, body.woocommerce-checkout p#shipping_first_name_field {
    margin-right: 4%;
}
body.woocommerce-checkout p#billing_postcode_field, body.woocommerce-checkout p#shipping_postcode_field {
    margin-right: 4%;
    width: 28%;
    display: inline-block;
}
body.woocommerce-checkout p#billing_city_field, body.woocommerce-checkout p#shipping_city_field {
    width: 68%;
    display: inline-block;
}
body.woocommerce-checkout p#billing_first_name_field, body.woocommerce-checkout p#shipping_first_name_field {
    margin-right: 4%;
}
body.woocommerce-checkout label.checkbox span {
    font-size: 1rem;
}
body.woocommerce-checkout button {
    padding: .75rem;
    width: 30%;
    font-size: 1.25rem;
}
body.woocommerce-checkout .wpmc-nav-wrapper button#wpmc-prev.current, body.woocommerce-checkout .wpmc-nav-wrapper button#wpmc-prev.current:hover {
    color: var(--maincolordark) !important;
    border-color:#fff;
    background-color: #fff;
}
body.woocommerce-checkout .woocommerce-checkout-payment label {
    display: inline;
    font-size: 1rem;
}
body.woocommerce-checkout li.wc_payment_method {
    padding: .5rem 0;
}
body.woocommerce-checkout li.wc_payment_method label img {
    vertical-align: sub;
}
body.woocommerce-checkout .shop_table {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
    border-horizontal-spacing: 0;
    border-vertical-spacing: 0;
}
body.woocommerce-checkout .shop_table th {
    border-bottom: 1px solid var(--maincolordark);
    padding: .5rem 0 .5rem .5rem;
    font-weight: normal;
    font-size: .8rem;
    text-transform: uppercase;
    text-align: right;
}
body.woocommerce-checkout .shop_table th.product-name, body.woocommerce-checkout .shop_table td.product-name {
    text-align: left;
    padding-left: 0;
    line-height: 1.25rem;
}
body.woocommerce-checkout .shop_table td.product-name img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    width: 75px;
    height: auto;
}
body.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
    width: 100%;
    font-size: 1.5rem;
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
} 
body.woocommerce-checkout .shop_table tfoot {
    width: 100%;
    overflow-wrap: break-word;
    margin-top: 1rem;
} 
body.woocommerce-checkout .shop_table tfoot th {
    font-size: 1rem;
    padding: 0rem;
    width: 30%;
} 
body.woocommerce-checkout tfoot .order-total th {
    font-weight: bold;
    font-size: 1rem;
} 
body.woocommerce-checkout td {
    text-align: right;
    padding: .5rem 0rem .5rem .5rem;
    width: 70%;
    border-bottom:1px solid var(--maincolordark);
}
body.woocommerce-checkout tr {
    vertical-align: text-top;
}
body.woocommerce-checkout .woocommerce-shipping-totals label {
    font-size: 1rem !important;
}
body.woocommerce-checkout .woocommerce-shipping-totals .product-tax, body.woocommerce-checkout .product-tax {
    font-size: .8rem;
    display: block;
    font-style: italic;
    line-height: 1.5rem;
}
body.woocommerce-checkout dl.variation {
    margin: 0;
    font-size: .8rem;
    display: inline-block !important;
}
body.woocommerce-checkout .variation dt, body.woocommerce-checkout .variation dd {
    margin: 0;
    float: unset;
}
body.woocommerce-checkout .variation dt, body.woocommerce-checkout .variation dd p {
    line-height: 0rem;
    white-space: nowrap;
    font-size: .8rem;
}
body.woocommerce-checkout .woocommerce-shipping-totals ul {
    margin-top: 0;
    margin-bottom: 0;
}
body.woocommerce-checkout .order-total .woocommerce-Price-amount.amount {
    font-size: 1.25rem;
}
body.woocommerce-checkout .order-total .includes_tax, body.woocommerce-checkout .order-total .includes_tax .woocommerce-Price-amount.amount {
    font-size: .8rem;
    font-style: italic;
}
body.woocommerce-checkout label.checkbox span.woocommerce-terms-and-conditions-checkbox-text, body.woocommerce-checkout label.checkbox span.shipping-service-provider-checkbox-text, body.woocommerce-checkout .woocommerce-privacy-policy-text p, body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    font-size: .8rem;
    line-height: 1rem !important;
}
body.woocommerce-checkout h3#ship-to-different-address {
    text-transform: unset;
}
body.woocommerce-checkout .wpmc-tabs-wrapper {
    margin: 2rem auto;
}
body.woocommerce-checkout .woocommerce-error li {
    color: var(--maincolordark);
}
body.woocommerce-checkout #pay_with_amazon {
    width: 100% !important;
}

/* Site-Footer */

.site-footer {
    width:100%;
    color:#000;
}
.inner-footer {
    padding:0 1rem;
}
.footer-widgets-wrap {
}
.footer-widgets-wrap:before {
    display: block;
    background: radial-gradient(ellipse farthest-side at bottom center, rgba(0,0,0,0.20), transparent);
    content: "";
    height: 5px;
    width: calc(100% - 5rem);
    margin: 1rem auto 0;
}

.footer-widgets {
    padding-top:1rem;
    text-align: center;
}
.footer-widget-column {
    width: 100%;
    padding-right: 0em;
    padding-bottom:1rem;
    box-sizing: border-box;
}
.footer-widget-column:last-of-type {
    padding-right: 0;
}
.footer-widget-column h3 {
    font-size:1rem;
    line-height: 1.475rem;
    color:var(--secondcolorlight);
    margin-bottom: 0;
}
.footer-widget-column h3 + div p:first-of-type {
    margin-top: 1.6rem;
}
.footer-widget-column p, .footer-widget-column li a {
    font-size: .8rem;
}
.footer-widget-column li a {
    color:#000;
}
.footer-widget-column li a:hover {
    color:var(--maincolordark);
}
a.social-footer {
    margin:.4rem 1rem 0 0;
    display: inline-block;
}
a.social-footer:last-child {
    margin-right:0;
}

a.social-footer svg {
    fill:#000;
    height:1.5rem;
    width:auto;
    transition: all .3s ease;
    vertical-align: middle;
}
a.social-footer.insta svg {
    height:2rem;
}
a.social-footer svg:hover {
    fill:var(--maincolordark);
    transition: all .3s ease;
}

.payment-info {
    clear:both;
    width:100%;
    text-align: center;
    padding:1rem 0;
    margin:0;
    border-top: 1px dotted #000;
}
.payment-info p {
    font-size: .8rem;
}
.payment-info ul {
    margin:.5 0;
}
.payment-info li {
    display:inline-block;
    margin:.25rem;
}
.payment-icon {
    fill:#000;
    height:1.75rem;
    width:auto;
    margin:0 1rem;
}
p.copyright-info {
    font-size: .8rem;
    width:100%;
    text-align: center;
    padding:1rem 0;
    margin:0;
}
p.copyright-info:before {
    display: block;
    background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.20), transparent);
    content: "";
    height: 5px;
    width: calc(100% - 5rem);
    margin: 0 auto 1rem;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    
    .wp-block-columns {
        margin-top: unset;
    }
    .wp-block-column:first-of-type {
        margin-bottom: unset;
    }

    /* Account page */
    #customer_login .col-1 {
        float: left;
        padding-right: 1rem;
        width: 50%;
    }
    #customer_login .col-2 {
        width: 50%;
        float: right;
    }

    /* Cart page */
    

    /* Checkout page */
    body.woocommerce-checkout button {
        width: 100%;
    }
    body.woocommerce-checkout tfoot .order-total th, body.woocommerce-checkout .order-total .woocommerce-Price-amount.amount {
        font-size: 1.25rem;
    } 
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .game-top-service-widget .textwidget {
        padding: 0 3rem;
    }
    .game-top-service-widget p {
        text-align:left;
        float:left;
        width:50%;
    }
    .game-top-service-widget p:first-of-type {
        margin-left: -1.7rem;
    }
    .game-top-service-widget p:last-of-type {
        display:block;
        float:right;
    }    
    header, .site-content, .home.page .site-content, .page-template-page-game.page .site-content {
        padding:0 3rem 0;
    }
    header .logo {
        position:relative;
        height: 4.5rem;
        top:0;
        left:-2.25rem;
        transform: unset;
    }    
    header .shopicons {
        padding:3.25rem 0 0;
    }
    header .shopicons svg, header #search svg {
        height:.9rem;
        width:.9rem;
    }

    #search {
        position: relative;
        float: left;
        width: auto;
        top: unset;
    }
    #search input[type=search] {
        background-color:unset;
        border: 0px;
        margin-right: 2rem;
        width: 10em;
    }
    #search button {
        background-color:unset;
        border: 0px;
        position: absolute;
        top:.3rem;
        right: 0;
    }
    #search input::placeholder {
        font-size: .75rem;
    }
    #searchform, .woocommerce-product-search {
        position: relative;
        border-radius: 5px;
        background-color: #f0f0f0;
        margin-top: -.55rem;
        margin-left: 5px;
        padding: .25rem 0 .1rem;
    }

    .burger-button {
        display:none
    }
    .navigation-menu {
        position:relative;
        float: right;
        top:unset;
        left:unset;
        background-color: unset;
        width:auto;
        margin-left:0rem;
        margin-right:0rem;
        height:auto;
        overflow: unset;
    }
    .navigation-menu .menu {
        /* margin:.75rem; */
        margin:.75rem 0 .75rem .75rem;
        padding:2.15rem 0 .75rem;
        line-height:1.2rem;
        border-top:unset;
    }
    .navigation-menu .menu li {
        display: inline-block;
        padding-right:10px;
        padding-top: .15rem;
        font-size: 1rem;
        text-transform: uppercase;
        line-height: 1.725rem;
    }
    .navigation-menu .sub-menu li {
        display: block;
    }
    .navigation-menu .menu li:last-child {
        padding-right:0px;
        /* padding-right:15px; */
        /* border-right:1px dotted var(--maincolor); */
    }
    .navigation-menu .menu li a {
        color:var(--maincolor);
        transition:all .3s;
    }
    .navigation-menu .menu li a:hover {
        color:var(--secondcolor);
    }
    .navigation-menu .menu .sub-menu {
        display:none;
    }
    .navigation-menu .menu li:hover .sub-menu {
        display:block;
        position:absolute;
        background-color: var(--maincolor);
        box-shadow: 1px 1px 7px #999;
   }
    .navigation-menu .menu .sub-menu li a {
        color:#fff;
    }
    .navigation-menu .menu .sub-menu li a:hover {
        color:var(--secondcolorlight);
    }

    /* Blocks */

    .wp-block-column:nth-of-type(odd) {
        margin-right: 1rem;
    }
    .wp-block-column:nth-of-type(even) {
        margin-left: 1rem;
    }
    .wp-block-group.is-nowrap {
    }
    .tile.vierzudrei {
        padding-top: 33%;
        flex: 0 0 calc(50% - .75rem);
    }

    /* Hero Homepage */
    .herohome {
        width:100%;
        height:calc(100vh - 175px);
        margin-left:0;
        margin-top:-2rem;
        border-radius:5px;
    }

    /* standard page */

    .page .site-content {
        padding-left: 10rem;
        padding-right: 10rem;
    }

    /* archive & single */
    .blog-content, .archive article a h2, .single article a h2, .narrow-block {
        margin-left: 10rem;
        margin-right: 10rem;
    }

    /* single product */
    .single-product .woocommerce-product-gallery {
        width:calc(50% - 3rem);
        float:left;
    }
    .single-product .summary {
        width:50%;
        float:right;
        clear: unset;
    }

    /* Template Main-Template */

    .page-template-page-game h1:after {
        max-width: 45rem;
    }
    .page-template-page-game .game-summary {
        text-align: left;
    }
    .page-template-page-game .game-summary p.button {
        text-align: left;
    }
    .page-template-page-game .teaser:before {
        max-width: 45rem;
    }
    .page-template-page-game .teaser:after {
        max-width: 45rem;
    }
    .page-template-page-game .claim:before {
        max-width: 45rem;
    }
    .page-template-page-game .claim:after {
        max-width: 45rem;
    }

    /* Catalogue */
    
    .woocommerce ul.products li.product {
        width:33.33333%;
    }
    .woocommerce ul.products li.product:nth-of-type(even) {
        padding-left:0%;
    }
    .woocommerce ul.products li.product:nth-of-type(odd) {
        padding-right:0%;
        clear:unset;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+1) {
        padding-right:1%;
        clear:both;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+2) {
        padding-right:.5%;
        padding-left:.5%;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+3) {
        padding-left:1%;
    }
    .woocommerce ul.products li.product:nth-of-type(even) .button {
        right: 0;
    }
    .woocommerce ul.products li.product:nth-of-type(odd) .button {
        right: 0;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+1) .button {
        right: 3%;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+2) .button {
        right: 1.5%;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+3) .button {
        right: 0;
    }

    /* Cart */
    .woocommerce-cart .product-thumbnail img {
        width:100px;
    }
    .woocommerce-cart input[type="number"] {
        width: 3.5rem;
    }
    .woocommerce-cart .cart_item .product-name a, .woocommerce-cart .cart_item .product-price, .woocommerce-cart .cart_item .product-quantity, .woocommerce-cart .cart_item .product-subtotal, .woocommerce-cart .cart_item .product-tax {
        font-size: 1rem;
    }
    .woocommerce-cart .product-tax {
        display: table-cell;
    }
    .woocommerce-cart .cart-collaterals {
        width: 50%;
    } 


    /* Footer */
    .inner-footer {
        padding:0 3rem;
    }
    .footer-widgets {
        display:flex;
        text-align:left;
    }
    .footer-widget-column {
        float: left;
        width: 33.33333%;
        padding-right: 2em;
    }
     .footer-widget-column:last-of-type {
        text-align:right;
    }
    .payment-info li {
        margin:.5rem;
    }
    .payment-icon {
        height:2.5rem;
    }
    body.woocommerce-checkout footer div.footer-widgets {
        display: block;
        text-align: center;
    }
    body.woocommerce-checkout footer div.footer-widgets div.footer-widget-column {
        width: 100%;
        padding-right: 0em;
        float: unset;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    header, .game-top-service-widget .textwidget, .inner-footer {
        max-width: 1200px;
        margin:auto;
    }
    .site-content {
        max-width: 1200px;
    }
    /* single product */
    .book-excerpt {
        display: block;
    }

    /* Catalogue */
    .woocommerce ul.products li.product {
        width:25%;
    }
    .woocommerce ul.products li.product:nth-of-type(even) {
        padding-left:0%;
    }
    .woocommerce ul.products li.product:nth-of-type(odd) {
        padding-right:0%;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+1) {
        padding-right:0%;
        clear:unset;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+2) {
        padding-right:0%;
        padding-left:0%;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+3) {
        padding-left:0%;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+1) {
        padding-right:1.5%;
        clear:both;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+2) {
        padding-left:.5%;
        padding-right:1%;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+3) {
        padding-left:1%;
        padding-right:.5%;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+4) {
        padding-left:1.5%;
    }

    .woocommerce ul.products li.product:nth-of-type(even) .button {
        right: 0;
    }
    .woocommerce ul.products li.product:nth-of-type(odd) .button {
        right: 0;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+1) .button {
        right: 0;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+2) .button {
        right: 0;
    }
    .woocommerce ul.products li.product:nth-of-type(3n+3) .button {
        right: 0;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+1) .button {
        right: 6%;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+2) .button {
        right: 4%;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+3) .button {
        right: 2%;
    }
    .woocommerce ul.products li.product:nth-of-type(4n+4) .button {
        right: 0;
    }

    /* Cart page */    
    .woocommerce-cart #wc-stripe-payment-request-wrapper {
        width: 50% !important;
        float: right;
    }
    .woocommerce-cart #pay_with_amazon {
        width: 50% !important;
        float: right;
    }

    /* Account page */
    #customer_login input {
        width: 50%;
    }

    /* Footer */
    .footer-widget-column {
        float: left;
        width: 25%;
    }
    .footer-widget-column:last-child {
        width: 50%;
    }
    .footer-widget-column:last-child h3 + div p:first-of-type {
        width: 50%;
    }

    /* Games Landingpages */
    .page-template-page-game .teaser {
        padding: 1.5rem 5rem 1.5rem 5rem;
    }
    .page-template-page-game .author p {
        padding: 1.5rem 2rem 1.5rem 2rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    
}