/* Globals */
:root {
    --kicksYellow:#F0B300;
    --kicksRed:#AF272F;
    --kicksCharcoal:#322E24;
    background-color:#F0B300;
    overscroll-behavior-y: none;
}
@font-face {
  font-family: 'CentraNo1';
  src: url('assets/CentraNo1-Black.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSans';
  src: url('assets/SourceSansVariable-Roman.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
.hide-element {
    display:none !important;
}
body {
    margin:0;
    line-height: 1;
    /* overflow:hidden; */
    position:relative;
    font-family: 'SourceSans';
    background-color:var(--kicksYellow);
    overscroll-behavior-y: none;
}

/* Screens */
.kicks-screen {
    height:100%;
    width:100%;
    overflow:hidden;
    display:block;
    position:relative;
    min-height: 100dvh;
}
/* .kicks-screen::-webkit-scrollbar {width:20px;}
.kicks-screen::-webkit-scrollbar-track {background-color:var(--kicksRed);}
.kicks-screen::-webkit-scrollbar-thumb {background-color:var(--kicksCharcoal);} */

/* Screen Slider */
#kicks-slider {
    height: 100vh;
    width: 100%;
    position: absolute;
    background-color: var(--kicksCharcoal);
    z-index: 99;
    left: -100%;
    display: block;
    align-content: center;
    text-align: center;
}
#kicks-slider img {
    width:300px;
}
.slider-animation {
    animation:1.2s kicksSlider linear;
}
@keyframes kicksSlider{
    0% {left:-100%;}
    30% {left:0%;}
    70% {left:0%;}
    10% {left:-100%;}
}
















/* Screen 1 - Landing Page */
#kicks-screen1 {
    background-image:url('assets/Kicks_Background.jpg');
    background-size:cover;
    background-position:center;
}
#kicks-screen1-wrapper {
    height:100%;
    align-content: center;
}
#kicks-screen1-content {
    height: auto;
    margin-right: 400px;
}
#kicks-screen1-content-inner {
    display: block;
    padding: 40px;
}
#kicks-screen1-content-inner h1 {
    text-align: center;
    transform: rotate(-2.5deg);
    margin: 0 auto 30px auto;
}
#kicks-screen1-content-inner h1 span {
    display: inline-block;
    background-color: var(--kicksCharcoal);
    color: white;
    font-size: 100px;
    font-family: 'CentraNo1';
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 5px 20px;
    margin-top: -1px;
}
#kicks-screen1-content-inner h1 > span:nth-of-type(1) {
    color:var(--kicksYellow);
    font-size: 120px;
    padding-bottom: 0px;
    position: relative;

}
#kicks-screen1-content-inner h1 > span:nth-of-type(1):before {
    position: absolute;
    content: '';
    width: 95px;
    height: 38px;
    background-image: url(assets/accent1.png);
    left: -60px;
    top: 70px;
    background-size: contain;
    background-repeat: no-repeat;
}
#kicks-screen1-content-inner p {
    background-color: white;
    font-size: 20px;
    font-family: 'SourceSans';
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 10px 20px;
    margin: auto auto -5px auto;
    text-align: center;
    display: block;
}
#kicks-screen1-content-inner p:nth-of-type(1){
    transform: rotate(-1deg);
    width: 720px;
}
#kicks-screen1-content-inner p:nth-of-type(2){
    width:450px;
}
#kicks-screen1-content-inner p span {
    font-weight:900;
}
#kicks-screen1-content-inner #enter-kicks {
    color: white;
    background-color: var(--kicksRed);
    text-transform: uppercase;
    font-size: 64px;
    font-weight: 900;
    display: block;
    width: 375px;
    padding: 5px 25px;
    cursor: pointer;
    user-select: none;
    transition: 0.5s;
    font-family: 'CentraNo1';
    letter-spacing: 2px;
    line-height: 1;
    margin-top: 20px;
    animation: 0.6s buttonJiggle infinite;
}
@keyframes buttonJiggle {
    0% {transform:scale(1.0);}
    50% {transform:scale(1.04);}
    100% {transform:scale(1.0);}
}

#kicks-screen1-content-inner #enter-kicks:hover {
    background-color:var(--kicksCharcoal);
    animation:0.5s enterShake linear;
}
@keyframes enterShake {
    0% {transform:rotate(0deg);}
    20% {transform:rotate(5deg);}
    40% {transform:rotate(0deg);}
    60% {transform:rotate(5deg);}
    80% {transform:rotate(0deg);}
    90% {transform:rotate(3deg);}
    100% {transform:rotate(0deg);}
}

#kick-screen1-logos {
    display: block;
    margin: auto;
    width: 625px;
}
#kick-screen1-logos img:nth-of-type(1) {
    margin-right:20px;
}
#kick-screen1-logos img {
    width:300px;
    object-fit:contain;
}
#ks1-shoe, #ks1-bag1, #ks1-bag2 {
    position:absolute;
}
#ks1-shoe {
    right: -290px;
    height: 950px;
    top: calc((100% - 765px) / 2);
    transform: rotate(-12deg);
    object-fit: contain;
    animation: 2s shoeRotate linear infinite;
}
@keyframes shoeRotate{
    0% {transform: rotate(-12deg) scale(1);}
    20% {transform: rotate(-14deg) scale(1.02);}
    40% {transform: rotate(-12deg) scale(1);}
    100% {transform: rotate(-12deg) scale(1);}
}
#ks1-bag1 {
    bottom: calc((100% - 780px) / 2);
    right: 16%;
    height: 350px;
    transform: rotate(-8deg);
}
#ks1-bag2 {
    bottom: calc((100% - 925px) / 2);
    right: 3%;
    height: 350px;
    transform: rotate(14deg);
}
#ks1-shoe-respo, #ks1-respo-images, #ks1-title-respo {display:none;}

@media(min-width:1930px){
    #ks1-shoe {
        height: 1200px;
        right: -300px;
        top: calc((100% - 960px) / 2);
    }
    #ks1-bag1 {
        right: 20%;
        height:400px;
    }
    #ks1-bag2 {
        right: 10%;
        height:400px;
    }
}
@media(max-width:1929px) and (min-width:1650px){
    #ks1-shoe {
        height: 1100px;
        right: -350px;
        top: calc((100% - 910px) / 2);
    }
    
}

/* 1500 - 1400 is the css root */


@media(max-width:1400px) and (min-width:1201px) and (max-resolution: 1.99dppx){
    #kicks-screen1-content {
        margin-right: 200px;
    }
    #ks1-shoe {
        height: 700px;
        right: -220px;
        top: calc((100% - 600px) / 2);
    }
    #ks1-bag1, #ks1-bag2 {
        display:none;
    }
}
@media(max-width:1200px) and (min-width:1025px){
    #kicks-screen1-content {
        margin-right: 0px;
    }
    #ks1-shoe {
        height: 500px;
        right: -187px;
        top: calc((100% - 85px) / 2);
    }
    #ks1-bag1, #ks1-bag2 {
        display:none;
    }
}


/* overly squished desktop */
@media(max-height:900px) and (min-height:851px) and (min-width:1025px)  and (max-resolution: 1.99dppx){
    #kicks-screen1-content-inner h1 span {
        font-size:90px;
    }
}
@media(max-height:850px) and (min-width:1024.01px) and (max-resolution: 1.99dppx){
    #kicks-screen1-wrapper {
        height:unset;
    }
    #kicks-screen1-content {
        margin-right:0;
    }
    .kicks-screen {
        overflow: unset;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #kicks-candy {display:none;}
    #ks1-shoe-respo {
        display: block;
        position: absolute;
        top: 200px;
        width: 38%;
        right: -12%;
        z-index: 1;
        transform: rotate(-10deg);
    }
}

@media(max-width:1024px){
    #kicks-screen1-wrapper {
        height:unset;
        transform:unset;
        margin:0;
    }
    #kicks-screen1-content {
        margin-right:0;
    }
    .kicks-screen {
        overflow: unset;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #kicks-screen1-content-inner p:nth-of-type(1){
        width: unset;
        transform: rotate(1deg);
        margin-top: 20px;
        max-width: 500px;
    }
    #kicks-screen1-content-inner h1 > span:nth-of-type(1):before {
        height: 38px;
        left: -55px;
        top: 60px;
    }
    #kicks-screen1-content-inner p:nth-of-type(2){
        width: unset;
        transform: rotate(-2deg);
        margin-bottom: 20px;
        max-width: 500px;
    }
    #kicks-screen1-content-inner h1 span {
        font-size:70px;
    }
    #kicks-screen1-content-inner h1 > span:nth-of-type(1){
        font-size:100px;
    }
    #kicks-candy {
        display:none;
    }
    #ks1-shoe-respo {
        display: block;
        position: absolute;
        z-index: 0;
        top: 20px;
        right: calc((100% - 1407px) / 2);
        width: 900px;
        transform: rotate(-12deg);
    }
    #kicks-screen1-content-inner {
        padding-top: 420px;
    }
    #kick-screen1-logos {
        padding:0px 20px 20px 20px;
    }
    #ks1-respo-images {
        display: flex;
        margin: -31px 0px 43px 0px;
        z-index: 1;
        justify-content: center;
    }
    #ks1-bag1-respo, #ks1-bag2-respo {
        display: block;
        width: 320px;
        object-fit: contain;
        filter: drop-shadow(2px 5px 5px #00000066);
    }
    #ks1-bag1-respo {
        transform: rotate(-12deg);
        margin-right: -80px;
    }
    #ks1-bag2-respo {
        transform: rotate(14deg);
        margin-left: -80px;
        margin-bottom: -130px;
    }
}
@media(max-width:767px) and (min-width:500px){
    #ks1-shoe-respo {
        width: 720px !important;
        right: calc((100% - 1060px) / 2) !important;
    }
    #kicks-screen1-content-inner {
        padding-top: 350px !important;
    }

}
@media(max-width:767px){
    #ks1-title {
        display:none;
    }
    #ks1-title-respo {
        display:block;
    }
    #kicks-screen1-content-inner h1 > span:nth-of-type(1), #kicks-screen1-content-inner h1 > span:nth-of-type(4){
        font-size:70px;
    }
    #kicks-screen1-content-inner h1 span {
        font-size: 45px;
        padding: 5px 15px;
    }
    #kicks-screen1-content-inner p {
        max-width: 280px !important;
    }
    #kicks-screen1-content-inner #enter-kicks {
        width:unset;
    }
    #ks1-shoe-respo {
        width: 500px;
        right: calc((100% - 710px) / 2);
        animation: 3s respoShoe linear infinite;
    }
    @keyframes respoShoe {
        0% {transform: rotate(-12deg);}
        20% {transform: rotate(-15deg) scale(1.02);}
        40% {transform: rotate(-12deg);}
        100% {transform: rotate(-12deg);}
    }
    #kicks-screen1-content-inner {
        /* padding-top: 265px; */
        padding: 265px 20px 40px 20px;
    }
    #kick-screen1-logos {
        flex-direction:column;
        gap:10px;
        width: unset;
        text-align: center;
    }
    #kick-screen1-logos img:nth-of-type(1){
        margin:0;
    }
    #kick-screen1-logos img {
        width:200px;
    }
    #enter-kicks {
        font-size:42px !important;
        margin-top: -20px !important;
    }
    #kicks-screen1-content-inner h1 > span:nth-of-type(1):before {
        height: 25px;
        left: -38px;
        top: 40px;
    }
}














/* Screen 2 - Entry Form */
#kicks-screen2 {
    background-image: url('assets/Kicks_Background2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    height:unset;
    width:unset;
    overflow:unset;
    align-content: center;
}
#ks2-wrapper {
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    gap: 60px;
    display:flex;
    /* width: 100%; */
}
#ks2-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#ks2-title p {
    display: inline-block;
    background-color: var(--kicksCharcoal);
    color: white;
    font-size: 100px;
    font-family: 'CentraNo1';
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 5px 20px;
    margin:0;
    margin-top: -1px;
    transform: rotate(-2deg);
}
#ks2-title p span {
    font-size: 120px;
    color:var(--kicksYellow);
}
#ks2-content {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: end; */
    /* gap: 30px; */
    align-content: center;
    margin: auto;
    text-align: center;
}
#kicks-tcs-wrapper {
    width:300px;
}
#kicks-tcs {
    font-family: 'CentraNo1';
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
    background-color:var(--kicksCharcoal);
    width: 100px;
    text-align: center;
    position: absolute;
    left: 20px;
    bottom: 20px;
    transition:0.5s;
}
#kicks-tcs span {
    color: white;
    letter-spacing: 1.5px;
}
#kicks-tcs span:nth-of-type(1){
    position: absolute;
    top: -20px;
    background-color: var(--kicksRed);
    display: block;
    padding: 5px 10px;
    left: 50%;
    width: 100px;
    transform: translate(-50%, 0);
    font-size: 14px;
}
#kicks-form {
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 542px;
    min-height: 374px;
    justify-content: center;
    margin: auto;
}
.kf-row {
    border: 2px solid var(--kicksCharcoal);
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    display: flex;
    gap: 20px;
    width: 500px;
    text-align: left;
}
.kf-title, .kf-title-complete {
    font-weight: 600;
    font-size: 22px;
}
.kf-row input {
    width: 100%;
}
.kf-row input, #kf-story textarea {
    font-family:'SourceSans';
    font-size:18px;
    color:var(--kicksCharcoal);
    border:none;
    outline:none;
    max-width: 500px;
}
#kf-story {
    flex-direction:column;
    gap: 10px;
}
#kf-image {
    gap: 0px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    min-height: 40px;
}
#kf-image.image-uploaded {
    background-color:var(--kicksCharcoal);
    color:white;
}
#kf-image.image-uploaded .kf-title {display:none !important}
#kf-image.image-uploaded .kf-title-complete {display:flex !important}
#kf-image svg {
    width:40px;
    height:40px;
    margin-left:20px;
}
#kf-image.image-uploaded svg {
    display:none;
}
#kf-submit {
    text-align: center;
    font-family: 'CentraNo1';
    background-color: var(--kicksRed);
    font-size: 24px;
    color: white;
    justify-content: center;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor:pointer;
    user-select:none;
    transition:0.5s;
}
#kf-submit:hover {
    background-color: var(--kicksCharcoal);
    /* animation:0.5s enterShake linear; */
}
#ks2-logo {
    width:300px;
    object-fit:contain;
}
.kf-validation {
    display: none;
    text-align: center;
    margin: 0;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--kicksRed);
    background-color: white;
    padding: 5px 10px;
    text-align: center;
}
.show-validation, .show-validation-locked {
    display:block;
}
#kf-validation-success {
    color:var(--kicksCharcoal);
    font-size: 26px;
    font-family: 'CentraNo1';
    text-transform: uppercase;
    letter-spacing: 1px;
}
#ks2-title-respo {display:none;}

#ks2-bags {
    padding-bottom: 40px;
}
#ks2-bag1, #ks2-bag2 {
    height: 300px;
    
}
#ks2-bag1 {
    margin-right: -80px;
    transform: rotate(10deg);
    animation:2s bagWiggle1 linear infinite;
}
#ks2-bag2 {
    margin-left: -80px;
    transform: translate(0, 20px) rotate(-10deg);
    animation:2s bagWiggle2 linear infinite;
}
@keyframes bagWiggle1 {
    0% {transform: rotate(10deg);}
    10% {transform: rotate(10deg);}
    20% {transform: rotate(5deg);}
    30% {transform: rotate(10deg);}
    40% {transform: rotate(5deg);}
    50% {transform: rotate(10deg);}
    100% {transform: rotate(10deg);}
}
@keyframes bagWiggle2 {
    0% {transform: translate(0, 20px) rotate(-10deg);}
    30% {transform: translate(0, 20px) rotate(-10deg);}
    40% {transform: translate(0, 20px) rotate(-5deg);}
    50% {transform: translate(0, 20px) rotate(-10deg);}
    60% {transform: translate(0, 20px) rotate(-5deg);}
    70% {transform: translate(0, 20px) rotate(-10deg);}
    100% {transform: translate(0, 20px) rotate(-10deg);}
}

@media(max-height:1020px){
    #ks2-wrapper {
        /* justify-content: unset; */
    }
}
@media (max-height: 1020px) and (min-width: 1024.01px) {
    #kicks-screen2 {
        /* overflow: unset; */
        /* overflow-y: auto; */
        /* overflow-x: hidden; */
    }
    #ks2-wrapper {
        justify-content: unset;
    }
}
@media(max-width:1350px) and (max-resolution: 1.99dppx){
    #ks2-wrapper {
        justify-content: unset;
    }
    #ks2-content {
        flex-direction: column;
        align-items: center;
        /* position: relative; */
    }
    #kicks-tcs {
        left: 0;
        bottom: 0;
    }
}
@media(max-width:1350px) and (max-height:1025px) and (max-resolution: 1.99dppx){
    #ks2-content {
        position: relative;
    }
}
@media(max-width:1024px){
    #ks2-title-respo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #ks2-title > p {
        display:none;
    }
    #ks2-title p span {
        font-size:100px;
    }
    #ks2-title p {
        font-size:70px;
    }
    #ks2-title-respo p:nth-of-type(4){
        font-size:100px;
    }
}
@media(max-width:767px){
    #kicks-tcs-wrapper {
        width: 0px;
        order: 3;
        /* position:relative; */
    }
    #kicks-tcs {
        bottom: 20px;
        left: 50vw !important;
        transform: translate(calc(-50% - 100px), -0%) !important;
        transition: 0s;
    }
    #ks2-title p span {
        font-size:65px;
    }
    #ks2-title p {
        font-size:45px;
    }
    #ks2-title-respo p:nth-of-type(4){
        font-size:65px;
    }
    #ks2-wrapper {
        gap:40px;
        padding:40px 20px;
    }
    /* #kicks-form {
        background-color: transparent;
    } */
    #ks2-logo {
        /* margin-bottom:60px; */
        margin-bottom:0px;
    }
    #kicks-tcs {
        left: 50% !important;
        transform: translate(calc(-50% - 0px), -0%) !important;
    }
    .kf-row input, #kf-story textarea {
        max-width:unset;
        text-align: center;
    }
    #kicks-form, .kf-row {
        width: unset;
    }
    .kf-title {
        text-align:center;
    }
    .kf-row {
        flex-direction: column;
        gap: 5px;
    }
    #kf-image svg {
        margin-left:0;
        margin-top:10px;
    }
    /* #kicks-screen2 {
        background-size: 200vh;
    } */
    #kicks-form {
        background-color:transparent;
    }
    .kf-row {
        background-color:white;
    }
    #kf-validation-success {
        background-color:var(--kicksCharcoal);
        color:white;
    }
    #kf-validation-reject, #kf-validation-fail {
        background-color:var(--kicksRed);
        color:white;
    }
    #ks2-bags {
        padding-bottom: 140px;
    }
    #ks2-bag1, #ks2-bag2 {
        height: 190px;
    }
    /* #ks2-bag1 {
        margin-right: -80px;
        transform: rotate(10deg);
    }
    #ks2-bag2 {
        margin-left: -80px;
        transform: translate(0, 20px) rotate(-10deg);
    } */
}
@media(min-height:1200px){
    #ks2-wrapper {
        justify-content:center;
    }
}




















/* Screen 3 - T&C Modal */
#kicks-screen3 {
    position: absolute;
    top: 0;
}
#ks3-overlay {
    background-color: #322e24cc;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 97;
}
#kicks-tc-modal {
    position: absolute;
    z-index: 98;
    width: 80%;
    max-width: 800px;
    height: 80%;
    max-height: 900px;
    background-color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 40px;
}
#kicks-tc-exit {
    position: absolute;
    right: -40px;
    top: -35px;
    background-color: var(--kicksRed);
    color: white;
    padding: 20px 25px;
    font-size: 32px;
    font-family: 'CentraNo1';
    border-radius: 100px;
    cursor:pointer;
    user-select:none;
    transition:0.4s;
}
#kicks-tc-exit:hover {
    background-color: var(--kicksCharcoal);
}
#kicks-tc-content {
    margin: 20px;
    overflow-y: auto;
    height: calc(100% - 40px);
    padding-right: 20px;
}
#kicks-tc-content h4 {
    font-family:'CentraNo1';
    font-size:24px;
    font-weight:900;
    letter-spacing:1px;
    text-align: center;
    margin:0;
    line-height:1;
    text-transform: uppercase;
}
@media(max-width:767px){
    #kicks-tc-exit {
        font-size: 20px;
        padding: 15px 20px;
        right: -25px;
        top: -30px;
    }
}

/* MAC RESPO */
@media(min-resolution:1.991dppx){
    .kicks-screen {
        overflow-x: hidden;
        overflow-y: auto;
    }
}