@font-face {
    font-family: 'ROADSTORE';
    src: url('../fonts/ROADSTORE.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
  --yellow: #eda70c;
}

html, body, .pageWrapper { margin: 0; padding: 0; }
body { background: #000000; color: #ffffff; font-family: 'Roboto Slab', serif; font-optical-sizing: auto; font-size: 18px; font-weight: 300; }
.pageWrapper { }
.item { width: 50%; box-sizing: border-box; padding: 2em; }
.wrapper { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin: 0 -2em; }
img { width: 100%; display: block; line-height: 1; }
h1,
h2 { position: relative; margin-bottom: 3em; text-align: center; font-weight: 100; font-family: ROADSTORE, sans-serif; }
h3,
h4 { line-height: 1.4em; margin: 1em 0; font-family: ROADSTORE, sans-serif; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }
p { line-height: 1.4em; margin: 1em 0; }
ul { line-height: 1.4em; margin: 1em 0; }
.wrapper iframe { width: 100%; border: none; margin: 1em 0; }
a { color: var(--yellow); word-break: break-all; text-decoration: none; transition: color 0.6s ease-out; }
.cta { color: #ffffff; border: 2px solid #ffffff; padding: .5em 2em; display: inline-block; margin: 0 1em; transition: 0.6s ease-out; } 
.cta:hover { background: #ffffff; color: #000000; }
.cta.alt { background: #ffffff; color: var(--yellow); border: none; }
.cta.alt:hover { color: #ffffff; background: var(--yellow); }

header { position: fixed; top: 0; left: 0; width: 100%; display: flex; box-sizing: border-box; padding: 0.3em 1em; align-items: center; justify-content: space-between; z-index: 99; transition: background-color 0.6s ease-out; }
header .ornament {
    content: '';
    width: 4em;
    height: 1em;
    background: url(../images/checker.svg) no-repeat center;
    background-size: 2em auto;
    margin-left: -2em;
    position: absolute;
    left: 50%;
}
.scrolled header { background: rgba(0,0,0,0.7); }
.logo { width: 12em; transition: 0.6s ease-out; margin-bottom: -1.5em; }
.scrolled .logo { width: 6em; }
.mainMenu ul { list-style: none; padding: 0; margin: 0; display: flex; margin-right: -1em; }
.mainMenu a { color: #ffffff; padding: 1em; }
.mainMenu a:hover { color: var(--yellow); }

.mobileMenu { display: block; width: 2em; height: 1em; position: relative; display: none; cursor: pointer;}
.mobileMenu div { position: absolute; width: 100%; height: 3px; background: #ffffff; left: 0; transition: 0.6s ease-out, top 0s;  }
.mobileMenu div:nth-child(1) { top: 0; } 
.mobileMenu div:nth-child(2) { top: 50%; }
.mobileMenu div:nth-child(1) { top: 100%; } 

.homeBanner { position: relative; }
.homeBanner .textWrapper { position: absolute; bottom: 25%; left: 0; width: 100%; text-align: center; }
.homeBanner b { color: var(--yellow); }
.homeBanner .bg { filter: brightness(0.9); }
.homeBanner h2 { padding-bottom: 0; margin-bottom: 1em; }
.homeBanner h2:after { display: none; }
.cross { position: absolute; width: 1em; top:53vw; left: 1em; z-index: 2; pointer-events: none; }
.cross.alt { left: auto; right: 1em; top: 45vw; }
.loader { position: absolute; width: .4em; top: 40%; left: 1em; z-index: 2; pointer-events: none; }
.loader.alt { left: auto; right: 1em; transform: rotate(180deg); }

.xitems { padding-top: 5em; }
.xitems article { display: flex; align-items: center; margin-bottom: 2em; }
.xitems .img { width: 50%; }
.xitems .textWrapper { width: 50%; box-sizing: border-box; padding: 2em; }
.xitems article:nth-child(odd) .img { order: 2; }

.players { display: flex; align-items: center; }
.players a { margin: 0.3em; }
.players img { width: 2em; }

.iframe { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }
.iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.contact { position: relative; text-align: center; height: 100vh; display: flex; align-items: flex-end; justify-content: center; }
.contact .textWrapper { position: relative; z-index: 2; }
.contact img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.socials { display: flex; align-items: cener; justify-content: center; list-style: none; padding: 0; margin: 3em 0; }
.socials li { margin: 0; padding: 0; }
.socials a { display: block; padding: 0 0.5em; }
.socials svg { width: 32px; height: auto; }
.socials svg * { fill: #ffffff; transition: 0.6s ease-out; }
.socials a:hover svg * { fill: var(--yellow); }

.photoGallery { display: block; margin: 1em 0; }
.photoGallery ul { list-style: none; margin: 0 -1em; padding: 0; display: flex; align-items: flex-start; justify-content: flex-start; min-width: 100%; flex-wrap: wrap; }
.photoGallery li { list-style: none; margin: 1em; box-sizing: border-box; padding-bottom: 28.25%; position: relative; overflow: hidden; width: calc(33.3% - 2em); }
.photoGallery a { display: block; text-decoration: none; outline: 0; }
.photoGallery img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mobile { display: none; }

.cookies { position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; color: #000000; box-sizing: border-box; padding: 1em; text-align: center; z-index: 999; display: none; }
.cookieDenied .cookies { display: block; }
.cookies .cta { background: #000000; color: #ffffff;  border: 2px solid #000000; }
.cookies .cta.alt { background: var(--yellow); border: 2px solid var(--yellow); }
.cookies .cta:hover { background: transparent; color: #000000; }
.cookies .cta.alt:hover { background: transparent; border: 2px solid var(--yellow); color:  var(--yellow); }

@media screen and (max-width: 1279px) {

    header .ornament { display: none; }
    
}

@media screen and (max-width: 1023px) {
    .logo { width: 10em; }
    .mobileMenu { display: block; margin-top: 1em; }
    .mainMenu { display: none; }
    header { align-items: flex-start; box-sizing: border-box; }
    .mobileMenuActive header { height: 100%; background: rgba(0,0,0,0.98); }
    .mobileMenuActive .mainMenu { display: block; position: absolute; top: 5em; left: 0; text-align: center; width: 100%; }
    .mainMenu ul { display: block; }
    .mainMenu a { font-size: 1.5em; padding: 1em; display: block; }
    .mobileMenuActive .mobileMenu div:nth-child(1) { transform: rotate(45deg); top: 50%; }
    .mobileMenuActive .mobileMenu div:nth-child(2) { width: 0; left: 50%; }
    .mobileMenuActive .mobileMenu div:nth-child(3) { transform: rotate(-45deg); top: 50%; }
    
    
    .homeBanner { min-height: 42vh; height: auto; box-sizing: border-box; padding: 3em; }
    .homeBanner .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .homeBanner .cta { margin-bottom: 1em; }
    .homeBanner .textWrapper { position: relative; bottom: auto; left: auto; box-sizing: border-box; }
    .cross { top: 88%; }
    .cross.alt { top: 80%; }
    .loader { top: 30%; }

    .xitems article { display: block; }
    .xitems .img { width: 100%; }
    .xitems .textWrapper { width: 100%; padding: 1em; }

    .contact { min-height: 100vh; height: auto; }
    .contact .textWrapper { padding: 1em; box-sizing: border-box; position: relative; bottom: auto; left: auto; }
    .contact img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }    
 
}