body {margin: 0; font-size: 16px; background: #2a2a2a; font-family: sofia-pro, serif; font-weight: 300; font-style: normal; color: #a9a9a9;}
html{scroll-behavior: smooth;}
input[type=text], select, textarea, button {font-family: sofia-pro, serif; }
a {color: inherit; text-decoration: underline;}
*, *::before, *:active {box-sizing: border-box;}
select::-ms-expand {
    display: none;
}
.container {position: relative; width: 100%; max-width: 1000px; padding: 0 40px; margin: 0 auto; box-sizing: border-box;  }
.pb::before {content: ""; display:block; padding-top: 1px; margin-bottom: 30px; }
.pa::after {content: ""; display:block; padding-bottom: 1px; margin-top: 30px; }

@media screen and (max-width: 600px) {
	.container {padding: 0 20px; }
	.pb::before {margin-bottom: 20px; }
	.pa::after {margin-top: 20px; }
}

.alignL {text-align: left;}
.alignC {text-align: center;}
.alignR {text-align: right;}
.clear {display:block; clear: both;}
.title_XL {font-size: 56px; font-weight: 700; margin: 20px 0; line-height: 1.1 }
.title_L {font-size: 41px; font-weight: 700; margin: 20px 0; line-height: 1.1 }
.title_M{font-size: 27px; font-weight: 700; margin: 20px 0; line-height: 1.1 }
.title_S {font-size: 24px; font-weight: 700; margin: 20px 0; line-height: 1.1 }
.title_XS {font-size: 20px; font-weight: 700; margin: 20px 0; line-height: 1.1 }
.largeText {font-size: 1.3em; }
.smallText {font-size: 0.9em; }

header {position: relative; height: 75px; background: #232323; display: flex;}
header > .container {display: flex; justify-content: space-between; align-items: center;}
header ul {margin: 0; padding: 0;}
header ul li {list-style: none; padding: 0; display: inline-block; margin: 0 10px;}
header .logo {width: 50px; height: 50px; display: block; background: url(../img/promoGamesLogo.svg) no-repeat center;}
header .logo span {position: absolute; left: 60px; bottom: 14px;}
header a {text-decoration: none; color: inherit; position: relative;color: #eee;}
header ul a:after { background: none repeat scroll 0 0 transparent; bottom: -5px; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #e28e02; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } 
header ul a:hover:after { width: 100%; left: 0; }



a.navButton {position: absolute; top: 0; right: 0; padding: 30px 40px; z-index: 12 }
a.navButton b {position: relative; display: block; width: 40px; height: 23px; }
a.navButton b i {position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; transition: all 0.3s; background: #333; }
a.navButton b i:nth-child(1) {top: 0; }
a.navButton b i:nth-child(2) {top: 10px; }
a.navButton b i:nth-child(3) {top: 10px; }
a.navButton b i:nth-child(4) {bottom: 0; }
a.navButton:hover b i { background: #fff; }
a.navButton.open { position: fixed; }
a.navButton.open span { background: black; outline: none; }
a.navButton.open b i {background: #ccc;}
a.navButton.open b i:nth-child(1) { top: 50%; width: 0; left: 50%; }
a.navButton.open b i:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
a.navButton.open b i:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
a.navButton.open b i:nth-child(4) { bottom: 50%; width: 0; left: 50%; }

.nav {position: fixed; display: block; top: 0; height: 100%; width: 100%; z-index: 10; pointer-events: none; background: rgba(0,0,0,0); transition: all 0.3s;}
.nav > div {position: absolute; top: 0; right: 0; width: 0; height: 100%; overflow: hidden; transition: all 0.3s; }			
.nav > div > div {position: absolute; left: 0; top: 0; width: 300px; height: 100%; padding-top: 90px; background: #ffc20e; box-sizing: border-box;  }
.nav > div > div .navContainer {position: absolute; top: 0; bottom: 55px; left: 0; width: 100%; overflow: auto; padding-top: 85px;  }
.nav > div > div .navContainer ul {padding: 0; margin: 0; width: 100%; list-style: none;border-bottom: 1px solid rgba(0,0,0,0.1);}
.nav > div > div .navContainer ul li {position: relative; padding: 0; margin: 0; border-top: 1px solid rgba(0,0,0,0.1);}
.nav > div > div .navContainer ul li a {position: relative; display: block; padding: 15px 20px; font-weight: 700; font-size: 20px; color: #212121; text-decoration: none; transition: all 0.3s; box-sizing: border-box; }
.nav > div > div .navContainer ul li a::after {content:""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; box-sizing: border-box; border-style: solid; border-color: #212121; border-width: 0 2px 2px 0; transform: rotate(-45deg); opacity: 0.5; transition: all 0.3s;}
.nav > div > div .navContainer ul li a:hover {padding-left: 25px; }			
.nav > div > div .navContainer ul li a:hover::after {opacity: 1;}		
.nav > div > div .socials {position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px 0 20px 0; text-align: center; }
.nav > div > div .socials a {display: inline-block;  position: relative; font-size: 22px; color: #fff; padding: 15px 0; line-height: 0; width: 30px; vertical-align: middle; text-align:center; background: #222; border-radius: 3px; text-decoration: none; margin: 0 5px; transition: all 0.2s;}
.nav > div > div .socials a:hover {transform:scale(1.1); background: #111;}
.nav > div > div .socials a.fa-facebook:before {position: absolute; bottom: 9px; right: 5px; font-size: 26px; }
.nav.open > div {width: 300px;} 
.nav.open { pointer-events: all; cursor: pointer; background: rgba(0,0,0,0.6); }
@media screen and (max-width: 600px) {
	a.navButton {padding: 25px 20px;}
	.nav > div > div .navContainer {padding-top: 70px;}
}
@media screen and (max-height: 500px) {
	.nav > div > div .navContainer ul li a {padding: 10px 20px; }
}
@media screen and (max-height: 420px) {
	.nav > div > div .navContainer ul li a {padding: 8px 20px; font-size: 18px; }
}


.buttonContainer {position: relative; margin: 20px 0;}
.buttonContainer a, .buttonContainer button {display: inline-block; position: relative;  font-size: 18px; padding: 10px 20px; min-width: 160px; background: #000; color: #fff; text-align:center; border: none; outline: none; text-decoration: none; font-weight: 700; cursor: pointer; }
.formContainer.waiting .buttonContainer button:after { border: 4px solid rgba(0,0,0,0.5); border-top: 4px solid #000;  }

.faqs {text-align: left; margin: 20px auto; max-width: 600px; }
.faqs .faq {margin: 10px 0; }
.faqs .faq > a {display:block; position: relative; background: #ffc20e ; border-radius: 3px;  padding: 30px 20px; color: #212121; text-decoration: none; font-weight: 700; }
.faqs .faq > div {position: relative; height: 0; overflow: hidden;}
.faqs .faq > div > div {position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; background: #f4f6f8; border-radius: 4px; }
.faqs .faq > div > div:before {content: ""; display:block; padding-top: 1px; margin-bottom: 20px; }
.faqs .faq > div > div:after {content: ""; display:block; padding-bottom: 1px; margin-top: 30px; }
.faqs .faq.open > div {height: auto; }
.faqs .faq.open > div > div {position: relative;}


table {margin: 10px 0; border: 1px solid #ccc; border-collapse: collapse}
table td, table th {padding: 5px 10px; border: 1px solid #ccc; text-align: left;}
table th {font-weight: 700;}

.cookie {display:none; }
.cookie.active {position: fixed; z-index: 10; display: block; overflow: hidden; bottom: 0; right: 0; width: 100%; height:100%; pointer-events: none; background: rgba(0,0,0,0.5)}
.cookie.active .cookieInner {position: absolute; right: 0; bottom: 100%; width: 100%; max-width: 500px; padding: 0 30px; background: #0076bf; pointer-events: all; font-size: 16px; border-top-left-radius: 4px; box-sizing: border-box; }
.cookie.active .cookieInner:before {content: ""; padding-top: 1px; margin-bottom: 30px; display: block; }
.cookie.active .cookieInner:after {content: ""; padding-bottom: 1px; margin-top: 30px; display: block; }
.cookie.active .buttonContainer {margin: 20px 0;}
.cookie.active .buttonContainer a {display: inline-block; position: relative; font-weight: 700; fxxont-size: 24px; color: #fff; background: #e61b77; border-radius: 4px; padding: 10px 30px; cursor:pointer; border: none; outline: none; text-decoration: none;   }


@media screen and (max-width: 450px) {
	.cookie.active .cookieInner {padding: 0 20px; border-radius: 0; }
	.cookie.active .cookieInner:before {margin-bottom: 20px; }
	.cookie.active .cookieInner:after {margin-top: 20px;  }
}
	
	
.games {min-height: calc(100vh - 75px); display: flex; justify-content: center; align-items: center;}
.games > .container {display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
.games .game {width: 25%; min-width: 200px; }
.games .game .inside{padding: 20px; text-align: center;}
.games .game .inside h1{margin: 5px 0; font-size: 21px; color: #eee;}
.games .game .inside p{margin: 0; font-size: 0.8em; padding: 0 10%; color: rgba(255,255,255,0.6);}
.games .game i {display: block; border-radius: 500px; border: 7px solid #eeeeee; padding-bottom: calc(100% - 14px); background: #232323; transition: all .3s ease;}
.games .game a {text-decoration: none;}
.games .game i:hover {
  box-shadow: 0 0.5em 0.5em -0.4em #000;
  transform: translateY(-0.25em);
}

.games .game#circleScratch i {background: url(../img/portfolioImages/scratch.jpg) no-repeat center; background-size: cover;}
.games .game#circleWheel i {background: url(../img/portfolioImages/wheel.jpg) no-repeat center; background-size: cover;}
.games .game#circleSlide i {background: url(../img/portfolioImages/slide.jpg) no-repeat center; background-size: cover;}
.games .game#circleTap i {background: url(../img/portfolioImages/tap.jpg) no-repeat center; background-size: cover;}
.games .game#circleCameraOverlay i {background: url(../img/portfolioImages/cameraOverlay.jpg) no-repeat center; background-size: cover;}
.games .game#circleMicroAnim i {background: url(../img/portfolioImages/microAnim.jpg) no-repeat center; background-size: cover;}
.games .game#circleShake i {background: url(../img/portfolioImages/shake.jpg) no-repeat center; background-size: cover;}
.games .game#circleDice i {background: url(../img/portfolioImages/dice.jpg) no-repeat center; background-size: cover;}
.games .game#circleCountdown i {background: url(../img/portfolioImages/counter.jpg) no-repeat center; background-size: cover;}
.games .game#circleTTW i {background: url(../img/portfolioImages/ttw.jpg) no-repeat center; background-size: cover;}
.games .game#circleFormfields i {background: url(../img/portfolioImages/formFields.jpg) no-repeat center; background-size: cover;}
.games .game#circleQrCodes i {background: url(../img/portfolioImages/qrCodes.jpg) no-repeat center; background-size: cover;}
.games .game#circleSwipeGame i {background: url(../img/portfolioImages/swipeGame.jpg) no-repeat center; background-size: cover;}
.games .game#circleFootball i {background: url(../img/portfolioImages/football.jpg) no-repeat center; background-size: cover;}
.games .game#circleAdventCalendar i {background: url(../img/portfolioImages/advent.jpg) no-repeat center; background-size: cover;}
.games .game#circlePinball i {background: url(../img/portfolioImages/pinball.jpg) no-repeat center; background-size: cover;}
.games .game#circleDriving i {background: url(../img/portfolioImages/driving.jpg) no-repeat center; background-size: cover;}
.games .game#circlePresent i {background: url(../img/portfolioImages/present.jpg) no-repeat center; background-size: cover;}

i.adventCalendar {background: url(../img/gameAssets/adventCalendar.jpg) no-repeat center; background-size: cover;}


.gameShowcase{display: flex;margin-bottom: 75px; padding-top: 25px;}
.gameShowcase h1 {line-height: 1; color: #eee}
.gameShowcase .left{width: 50%; background: #eeeeee;}
.gameShowcase .left i{ height: 100%; padding-bottom: 100%; display: block; position: relative;}
.gameShowcase .right {width: 50%; padding: 0 25px; position: relative; padding-bottom: 100px; background: #1d1d1d;}
.gameShowcase .buttonContainer { position: absolute; bottom: 0px}
.gameShowcase .cta {text-decoration: none; padding: 7px 21px; color: #fff; border: 2px solid #fff; background: transparent; font-size: 1em; overflow: hidden; transition: all .3s ease;}
.xgameShowcase .cta::after {background: #fff; content: ""; height: 155px; left: -75px; opacity: .2; position: absolute; top: -50px; transform: rotate(35deg); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); width: 50px;}
.xgameShowcase .cta:hover::after{left: 120%; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);}
.gameShowcase .cta:hover,
.gameShowcase .cta:focus {
  background: #fff; color: #333;
}
.gameShowcase#demo3d i {background: url(../img/gameAssets/3dph.png) no-repeat center; background-size: cover;}

@media screen and (max-width: 850px) {
	.gameShowcase {flex-direction: column;}
	.gameShowcase .left, .gameShowcase .right {width: 100%;}
	.gameShowcase .left i{}
}

.refreshBtns {background: white; color: #4e8a52; font-weight: 700; border:4px solid #4e8a52; text-align: center; border-radius: 500px; outline:0; transition: all .2s ease; width: 45px; height: 45px; font-size: 20px; line-height: 0; transition: all .3s ease-out; transform: rotate(0deg); display: flex; align-content: center; justify-content: center; align-items: center; padding: 0;}
.refreshBtns.animated {animation: spin .3s ease-out ;}

@keyframes spin{
    to { transform: rotate(360deg) }
}

.interactBtn {position: absolute; bottom: 20px; right: -20px; }
.interactBtn b {position: relative; display: block; width: 45px; height: 45px; border-radius: 500px; background: white; border: 4px solid #4e8a52; transform: rotate(90deg);  }

.interactBtn b u {position: absolute; left: 25%; width: 50%; height: 3px; border-radius: 2px; transition: all 0.3s; background: #4e8a52; }
.interactBtn b u:nth-child(1) {top: 9px; }
.interactBtn b u:nth-child(2) {top: 17px; }
.interactBtn b u:nth-child(3) {bottom: 9px; }


footer{background: #232323; padding: 20px 0}
footer .logo {width: 35px; height: 35px; display: block; background: url(../img/promoGamesLogo.svg) no-repeat center; margin: 0 auto;}
footer .footerNav {display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .footerNav h1 {font-size: 1em; color: #e28e02; letter-spacing: 3px;}
footer .footerNav .block {margin: 20px 0;}
footer .footerNav .block:not(:last-child) {margin-right: 90px;}
footer .footerNav .block a {display: block; text-decoration: none; color: rgba(255,255,255,0.6); margin: 10px 0; transition: all .2s ease;}
footer .footerNav .block a:hover{color: #fff; transform: translateX(3px);}

#wheel .st0{fill:#FFFFFF;stroke:#4e8a52;stroke-width:8;stroke-miterlimit:10;}
#wheel .st1{fill:#FFFFFF;stroke:#4e8a52;stroke-miterlimit:10; stroke-width: 2;}
#wheel .st2{fill:#4e8a52;}

#video3d {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.standout {color: #bebebe; font-weight: 600;}
hr {margin: 40px auto 30px auto;}

.main {
    min-height: calc(100vh - 375px);
}