* { position: relative; margin: 0; padding: 0; border: none; outline: none; font-family: 'Raleway', sans-serif; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; }
a img { border: none; outline: none; }
a { text-decoration: none; }
ul, li { list-style: none; }
.clear { clear: both; }

html { width: 100%; overflow-y: scroll; overflow-x: hidden; }
body { width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
body.page { background: #f5f5f5; }
#wrapper { background: #ffffff; z-index: 2; width: 100%; transition: transform 500ms ease, opacity 500ms ease; }
#wrapper.menu { transform: translateX(-70vw); /*opacity: 0.5;*/ }
#wrapper.preload { transition: all 0ms !important; }

#preload { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; z-index: 99999; }
#preloader { opacity: 0; position: relative; animation: rotate 1s infinite linear; border: 1.5vw solid rgba(255, 255, 255, 0.05); width: 14vw; height: 14vw; margin-left: -7vw; margin-top: -7vw; border-radius: 999px; top: 70%; left: 50%; box-sizing: border-box; }
#preloader span { position: absolute; width: 14vw; height: 14vw; border: 1.5vw solid transparent; border-top: 1.5vw solid #fff; top: -1.5vw; left: -1.5vw; border-radius: 999px; box-sizing: border-box; }
@keyframes rotate { from { transform: rotateZ(0) scale(0.8); } to { transform: rotateZ(360deg) scale(0.8); } }
@-webkit-keyframes rotate { from { transform: rotateZ(0) scale(0.8); } to { transform: rotateZ(360deg) scale(0.8); } }
#preload-logo { opacity: 0; display: block; position: absolute; width: 37vw; height: 17vw; left: 50%; margin-left: -18.5vw; top: 37%; background-image: url(logo.png); background-size: 100% 100%; background-position: 0% 0%; }

#preload-logo {
    opacity: 0;
    display: block;
    position: absolute;
    width: 30vw;
    height: 30vw;
    left: 50%;
    margin-left: -15vw;
    top: 37%;
    background-image: url(logo.png);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    overflow: hidden;
}
#logo {
    /* ... existing styles ... */
    border-radius: 50%;
    overflow: hidden;
}
@media (max-width: 768px) {
  #logo {
    width: 30vw !important;
    height: 30vw !important;
	top: 20% !important;

	bottom: 30% !important;
    margin-left: -15vw !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background-size: cover !important;
  }
}
#menu-logo {
    /* ... existing styles ... */
    border-radius: 50%;
    overflow: hidden;
}
#footer-logo {
    /* ... existing styles ... */
    border-radius: 50%;
    overflow: hidden;
}
@media (max-width: 768px) {
  #footer-logo {
    width: 30vw !important;
    height: 30vw !important;
	top: 20% !important;
	bottom: 30% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background-size: cover !important;
  }
}



#preloader.nike span { border-top-color: #d51e16 !important; }

body.preload #preload { display: block; }
body.page #preload { background: #f5f5f5; }
body.page #preload-logo { background-position: 200% 0% !important; }
body.page #preloader { border: 1.5vw solid rgba(0, 0, 0, 0.1); }

#header { height: 15vh; }

#logo { display: block; position: absolute; width: 37vw; height: 17vw; left: 50%; margin-left: -18.5vw; bottom: 0; background-image: url(logo.png); background-size: 100% 100%; background-position: 0% 0%; cursor: pointer; }
#logo span { display: none; }
#crown { position: absolute; left: -6vw; width: 37vw; height: 17vw; bottom: 0vw; background-image: url(logo.png); background-size: 0% 0%; background-position: 100% 0%; background-repeat: no-repeat; }

#menu-trigger { position: absolute; right: 8vw; width: 9vw; height: 9vw; bottom: 3.5vw; cursor: pointer; }
.menu-trigger { height: 12%; margin-top: -6%; width: 100%; background: #333333; position: absolute; top: 50%; transition: all 200ms ease; cursor: pointer; }
.menu-trigger:nth-child(1) {top: 20%; }
.menu-trigger:nth-child(3) {top: 80%; }
#menu-trigger.close .menu-trigger:nth-child(1) { transform: rotate(45deg); top: 50%; }
#menu-trigger.close .menu-trigger:nth-child(3) { transform: rotate(-45deg); top: 50%; }
#menu-trigger.close .menu-trigger:nth-child(2) { opacity: 0; }

#menu { position: absolute; width: 100%; height: 100%; z-index: 1; transform: translateX(65vw); transition: transform 500ms ease; background: #e8e8e8; }
body.page #menu { background: #e3e4e6; }
#menu.menu { transform: translateX(0); }
#menu-logo { cursor: pointer; display: block; width: 30vw; height: 14vw; margin-bottom: 7vw; margin-left: 10vw; margin-top: 0.5vw; background-image: url(logo.png); background-size: 100% 100%; background-position: 0 0; }
#menu ul { padding: 10vw 0 10vw 25vw; }
#menu li a { line-height: 14vw; display: block; color: #333333; padding: 0 10vw; font-size: 5.5vw; font-weight: 700; cursor: pointer; transition: all 300ms; }
#menu li a:hover {text-indent: 1vh; background: rgba(0,0,0,0.1); }
#menu li a.active { color: #fff !important; }
#menu a span { display: none; margin-right: 3vw; position: absolute; height: 9vw; width: 20vw; background: #fff; top: 3vw; left: -18vw; }

#title { height: 26.5vh; padding: 0 8vw; }
#title h1 { text-transform: uppercase; color: #333333; font-weight: 700; font-size: 8vw; line-height: 8.5vw; text-align: center; }
#scroll-down { position: absolute; width: 10vw; height: 6vw; left: 50%; margin-left: -5vw; bottom: 10vw; animation: bounce 0.4s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(10px); } }
@-webkit-keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(10px); } }

#desktop-notification { display: none; }

#switch { height: 0; opacity: 0; }
#start { height: 50vh; }
.start-gift-card { position: absolute; top: 50%; left: 50%; width: 70vw; height: 70vw; margin-left: -35vw; margin-top: -35vw; transition: transform 500ms ease, filter 500ms ease, opacity 500ms ease; outline: 1px solid transparent; background-image: url(cards.svg); background-size: 800% 200%; background-position: 0 0; }
.start-gift-card .value { position: absolute; color: #fff; bottom: 5vw; text-align: center; width: 100%; font-size: 6vw; font-weight: 400; font-family: 'Open Sans', sans-serif; }
.start-gift-card.pos-0 { z-index: 4; }
.start-gift-card.pos-1 { transform: scale(0.8) translateX(-30vw) translateY(2vw) rotateZ(-5deg); filter: brightness(0.85); z-index: 3; } /* blur(0.5vw) */
.start-gift-card.pos-2 { transform: scale(0.8) translateX(30vw) translateY(2vw) rotateZ(5deg); filter: brightness(0.85); z-index: 2; } /* blur(0.5vw) */
.start-gift-card.pos-3 { z-index: 1; transform: scale(0.6); opacity: 0; }

.card-1 { background-position: center !important; background-image: url(1-card.png) !important; background-size: cover !important;}
.card-2 { background-position: center !important; background-image: url(2-card.png) !important; background-size: cover !important;}
.card-3 { background-position: center !important; background-image: url(3-card.png) !important; background-size: cover !important;}

.card-1 {
    background-position: center !important;
    background-image: url(1-card.png) !important;
    background-size: cover !important;
    border-radius: 25px;
    overflow: hidden;
}
.card-2 {
    background-position: center !important;
    background-image: url(2-card.png) !important;
    background-size: cover !important;
    border-radius: 25px;
    overflow: hidden;
}
.card-3 {
    background-position: center !important;
    background-image: url(3-card.png) !important;
    background-size: cover !important;
    border-radius: 25px;
    overflow: hidden;
}

#footer { padding: 9vh 0 5vh; }
#footer::after { content: ' '; position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; background: #000; background: #ffffff; }
#footer .background { background: #ffffff; position: absolute; top: 0; left: 0; width: 100%; height: 50%; z-index: 1; transform: skewY(-3deg); outline: 1px solid transparent; }
#footer-logo { width: 30vw; height: 14vw; margin: 0 auto 4vw; z-index: 2; background-image: url(logo.png); background-size: 100% 100%; background-position: 0 0; }

.gift-card-home { padding: 5vw 0; margin-bottom: -1px; transition: padding 500ms ease;}
.click-area, .click-area * { cursor: pointer; }
.gift-card-home .background { cursor: pointer; background: #2C8597; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transform: skewY(-3deg); outline: 1px solid transparent; }
.gift-card-home .logo { height: 34vw; width: 34vw; margin: 0 auto; z-index: 2; transition: all 500ms ease; background-image: url(cards.svg); background-size: 800% 200%; background-position: 0 -100%; }
.gift-card-home .hidden { height: auto; opacity: 1; overflow: hidden; z-index: 2; }
.gift-card-home .text { padding: 6vw 10vw 6vw; text-align: center; color: #fff; font-size: 4.6vw; line-height: 6.7vw; }
.gift-card-link { cursor: pointer; display: block; font-weight: 700; text-transform: uppercase; color: #fff; font-size: 5vw; background: rgba(0, 0, 0, 0.2); height: 11vw; line-height: 11vw; width: 65vw; margin: 0 auto; text-align: center; border-radius: 7vw; transition: all 300ms; }
.gift-card-link:hover { background: rgba(0, 0, 0, 0.4); }
.gift-card-home.show { padding: 8vw 0; }
.gift-card-home.show .logo { transform: scale(1.15); }
.logo-nike { background-image: url(nike.png)!important; background-size: cover !important; background-position: center!important;  }

.bck-nike { background: #d51e16 !important; }


.clr-nike { background: #d51e16 !important; }

body.page { background: #f5f5f5; }
body.page #wrapper { background: #f5f5f5; }
body.page #logo { background-position: 50% 0 !important; }
body.page #menu-logo { background-position: 50% 0 !important; }
body.page .menu-trigger { background: #555659; }
body.page #menu-logo .logo-gc { fill: #555659; }
body.page #menu li a { color: #555659; }
body.page #title { padding: 0; }
body.page #title h1 { color: #555659; font-size: 8vw; line-height: 8.5vw; }

.page-about { padding: 8vw 0; }
.page-about .background { background: #2C8597; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transform: skewY(-3deg); outline: 1px solid transparent; }
.page-about .logo { height: 34vw; width: 34vw; margin: 0 auto; z-index: 2; background-image: url(cards.svg); background-size: 800% 200%; background-position: 0 -100%; transform: scale(1.15); }
.page-about .text { padding: 6vw 10vw 6vw; text-align: center; color: #fff; font-size: 4.6vw; line-height: 6.7vw; z-index: 2; }
.page-about .read-more-link { cursor: pointer; display: block; font-weight: 700; text-transform: uppercase; color: #fff; font-size: 5.5vw; width: 70vw; margin: 0 auto; text-align: center; z-index: 2; }
.page-about .hidden { opacity: 1; overflow: hidden; height: auto; }
.page-about .hidden-wrapper { padding-bottom: 3vw; }
.page-about .text h2 { font-size: 5.5vw; line-height: 7.3vw; font-weight: 700; padding: 6vw 0 4vw; }
.page-about .text p+p { margin-top: 3vw; }

#page .title { text-transform: uppercase; color: #555659; font-weight: 700; font-size: 8vw; line-height: 8.5vw; text-align: center; padding: 10vw 0 8vw; }

#chooser {padding-bottom: 7vw; }
.choose-gift-card { width: 58vw; height: 58vw; margin: 0 auto; margin-bottom: 5vw; background-image: url(cards.svg); background-size: 800% 200%; }
.choose-gift-card .value { position: absolute; color: #fff; bottom: 3.5vw; text-align: center; width: 100%; font-size: 5vw; font-weight: 400; font-family: 'Open Sans', sans-serif; }

#header { height: 25vw; }
#start { height: 90vw; }
#title { height: 44vw; }


/* POPUP WINDOW */

#gboverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; overflow: hidden; display: none; perspective: 500vw; transition: transform 150ms; }
#gboverlay.noclick { transform: scale(1.02); }
#gbmouse { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(245, 245, 245, 0.8); opacity: 0; transition: opacity 400ms ease; transform: translateZ(-1000px) scale(100); }
#gbmouse.show { opacity: 0.8; }
#generatorbox { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; top: 50%; left: 50%; width: 90vw; height: 126vw; margin-left: -45vw; margin-top: -63vw; background: #2C8597; border-radius: 5vw; box-shadow: 0px 1vw 0 #1f5e6b; opacity: 0; }
#generatorbox.show { transform: scale(1); opacity: 1; }
#generatorbox.big {height: 144vw; margin-top: -72vw; }
#gbinner {padding: 8vw 6vw; box-sizing: border-box; width: 100%; height: 100%; }
#hacklines {display: none; }
#steps { height: 8vh; }
.stepname { position: absolute; top: 0; width: 100%; font-size: 4vw; line-height: 5vw; color: #fff; }
#step1 { text-align: left; } #step2 { text-align: center; } #step3 { text-align: right; }
#statusbar { position: absolute; left: 10vw; right: 10vw; height: 1vw; background: #246C7A; bottom: 2vw; border-radius: 1vw; }
#sbcomplete { position: absolute; z-index: 3; left: 0; top: 0; height: 1vw; border-radius: 1vw; width: 0; background: #fff; }
.sbcirca { position: absolute; height: 3vw; width: 3vw; top: -1vw; border-radius: 3vw; transition: all 300ms; z-index: 2; background: #246C7A; }
.sbcirca.active { background: #fff !important; }
#sbcirca1 { left: -1vw; } #sbcirca2 { left: 50%; margin-left: -1.5vw; } #sbcirca3 {right: -1vw; }
#statustext { position: absolute; color: #fff; left: 0; width: 100%; box-sizing: border-box; padding: 0 7vw; bottom: 5.5vw; font-size: 4vw; line-height: 5vw; text-align: center; }
#genlogo { position: absolute; top: 60vw; left: 50%; margin-left: -30vw; margin-top: -25vw; width: 60vw; height: 60vw; transition: opacity 500ms ease; background-image: url(cards.svg); background-size: 800% 200%; }
#genlogo.hide { opacity: 0; }
#genreturn { position: absolute; bottom: 15vw; height: 16vw; line-height: 8vw; left: 3vw; right: 3vw; color: #fff; text-align: center; font-size: 7.4vw; opacity: 0; transition: opacity 600ms; }
#genreturn.active { opacity: 1; }
#genreturn span { color: #fff; transition: opacity 600ms; font-family: 'Open Sans', sans-serif; font-weight: 400; }
#genreturn span.final { opacity: 0.5; }
#widgetholder { position: absolute; overflow: hidden; left: 6vw; right: 6vw; opacity: 0; z-index: 2; transition: opacity 600ms; height: 80vw; top: 28vw; background: rgba(0,0,0,0.1); border-radius: 3vw; }
#widgetholder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#widgetholder.show { opacity: 1; }
#whclick { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; }
#widgetholder.show #whclick { display: none; }


#generatorbox.popup-nike { background: #d51e16; box-shadow: 0px 1vw 0 #a91d15; }
#generatorbox.popup-nike #statusbar { background: #a91d15; }
#generatorbox.popup-nike #statusbar .sbcirca { background: #a91d15; }
#generatorbox.popup-nike #genreturn { left: 3vw; right: 3vw; }


/* -----------------------------------
           DESKTOP VERSION
----------------------------------- */

@media all and (min-aspect-ratio: 25/30) {

  #preload-logo { width: 24vh; height: 24vh; margin-left: -12vh; }
  #preloader { width: 9vh; height: 9vh; border-width: 1vh !important; margin-left: -4.5vh; margin-top: -4.5vh; }
  #preloader span { width: 9vh; height: 9vh; border-width: 1vh; top: -1vh; left: -1vh; }

  #header { height: 28vh; }
  #crown { width: 24vh; height: 11vh; left: 0; }
  #logo {width: 24vh; height: 24vh; margin-left: -12vh; }
  #menu-trigger {width: 5vh; height: 5vh; bottom: 3vh; }

  #start { height: 57vh; }
  .start-gift-card { width: 45vh; height: 45vh; margin-left: -22.5vh; margin-top: -22.5vh; }
  .start-gift-card.pos-1 { transform: scale(0.8) translateX(-25vh) translateY(2vh) rotateZ(-5deg); }
  .start-gift-card.pos-2 { transform: scale(0.8) translateX(25vh) translateY(2vh) rotateZ(5deg); }
  .start-gift-card .value { font-size: 4vh; bottom: 3vh; }

  #title { height: 28vh; }
  #title h1 { font-size: 5.3vh; line-height: 5.5vh; }
  #scroll-down { width: 6.5vh; height: 3.55vh; margin-left: -3.25vh; bottom: 6vh; }

  .gift-card-home { padding: 3vh 0; }
  .gift-card-home.show { padding: 5vh; }
  .gift-card-home .logo { width: 22vh; height: 22vh; }
  .gift-card-home .text { padding: 3.6vh 6vh 3.6vh; font-size: 2.75vh; line-height: 4.0vh; width: 48vh; margin: 0 auto; }
  .gift-card-link { font-size: 3vh; height: 6.6vh; line-height: 6.6vh; width: 40vh; }

  #footer { clear: both; }
  #footer-logo { width: 19vh; height: 19vh; margin: 0 auto 2.4vh; }

  #wrapper.menu { transform: translateX(-45vh); }
  #menu { width: 45vh; position: absolute; right: 0; top: 0; transform: translateX(40vh); }
  #menu.menu { transform: translateX(0); }
  #menu ul { padding: 6vh 0 6vh 0; }
  #menu li a { line-height: 8vh; font-size: 3.3vh; padding: 0 6vh; }
  #menu-logo { width: 19.15vh; height: 19.15vh; margin-bottom: 5vh; margin-left: 6vh; margin-top: 0; }

  body.page #title h1 { font-size: 5.3vh; line-height: 5.5vh; }
  .page-about { padding: 5vh 0; }
  .page-about .logo { height: 22vh; width: 22vh; }
  .page-about .text { padding: 3.6vh 0; font-size: 2.75vh; line-height: 4.0vh; width: 60vh; margin: 0 auto; }
  .page-about .text > p { width: 48vh; margin: 0 auto; }
  .page-about .read-more-link { font-size: 3.3vh; }
  .page-about .text h2 { font-size: 3.3vh; line-height: 4.4vh; padding: 3.6vh 0 2.4vh; }
  .page-about .hidden-wrapper { padding-bottom: 7vh; }

  #page .title { font-size: 4.8vh; line-height: 5.1vh; padding: 6vh 0 4.8vh; }
  #choose-card { padding-bottom: 5vh; }
  #chooser { padding-bottom: 0; }
  .choose-gift-card { width: 37vh; height: 37vh; margin: 0 auto 3vh; cursor: pointer; }
  .choose-gift-card .value { bottom: 2vh; font-size: 3.2vh; }

  #generatorbox { width: 44vh; height: 62vh; margin-left: -22vh; margin-top: -31vh; border-radius: 3vh; }
  #generatorbox.big { height: 70vh; margin-top: -35vh; }
  #gbinner { padding: 4.8vh 3.6vh; }
  #steps { height: 8vh; }
  .stepname { font-size: 1.9vh; line-height: 2vh; }
  #statusbar { bottom: 1vh; left: 5vh; right: 5vh; height: 0.5vh; }
  #sbcomplete { height: 0.5vh; }
  .sbcirca { height: 1.5vh; width: 1.5vh; border-radius: 1.5vh; top: -0.5vh; }
  #sbcirca1 { left: -0.5vw; }
  #sbcirca2 { margin-left: -0.75vw; }
  #sbcirca3 { right: -0.5vw; }
  #genlogo { width: 30vh; height: 30vh; margin-left: -15vh; margin-top: -15vh; top: 34vh; }
  #genreturn { bottom: 7vh; height: 9vh; line-height: 4.5vh; font-size: 3.8vh; }
  #statustext { padding: 0 3vh; bottom: 2.5vh; font-size: 2vh; line-height: 2.6vh; }
  #widgetholder { left: 3vh; right: 3vh; border-radius: 2vh; height: 37vh; top: 15vh; }


}

@media all and (min-aspect-ratio: 1/1) {

  #choose-card { height: 37vh; padding-bottom: 8vh; }
  #chooser { float: left; left: 50%; }
  .choose-gift-card { width: 37vh; height: 37vh; margin-bottom: 3vh; margin: 0 -3.5vh; left: -50%; float: left; cursor: pointer; }

}