:root {
    --text-colour:#000;
    --width:300px;
    --height:600px;
}

@font-face {
    font-family: "marketSansBold";
    src: url(MarketSans-Bold-WebS.woff) format('woff');
}

@font-face {
    font-family: "marketSansRegular";
    src: url(MarketSans-Regular-WebS.woff) format('woff');
}

body {
    padding:0;
    margin:0;
    font-family:"marketSansBold";
    font-size:26px;
    background:#ffffff;
}

#banner {
    position:absolute;
    top:0px;
    left:0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:var(--width);
    height:var(--height);
    border:1px #000 solid;
    z-index:0;
    /* background:rgba(0,0,0,0.1) url('300x600_GUIDE.png') no-repeat; */
    overflow:hidden;
}

.clicktag {
    position:absolute;
    top:0px;
    left:0px;
    width:var(--width);
    height:var(--height);
    display:block;
    cursor: pointer;
    z-index:1;
}

.cb_authentic {
    position: relative;
    top:20px;
    left:21px;
    width:137px;
    height:40px;
    display:block;
    background:url('ebay_authentic.svg') no-repeat;
    background-size:contain;
    animation: fadeIn 1s ease-out forwards;
    animation-fill-mode:both;
    animation-timeline: auto;
    opacity:0;
}

.copy {
    position:absolute;
    top:38px;
    left:21px;
    font-size:48px;
    letter-spacing:-1.7px;
    line-height:1.0;
    color:var(--text-colour);
}

.subline {
    font-family:'marketSansRegular';
    font-size:18px;
    line-height:1.25;
    letter-spacing:-0.5px;
    padding-top:7px;
}

.word1,.word2,.word3,.word4,.word5 {
    display: inline-block;
    animation: textAnimation 1s cubic-bezier(0.2, 0, 0.5, 1) forwards;
    animation-delay: calc(var(--i) * 0.2s);
    animation-timeline: auto;
    animation-fill-mode:both;
    opacity:0;
}

#ctaContainer {
    position:absolute;
    top:534px;
    left:168px;
    width:150px;
    height:50px;
    overflow:hidden;
    /* border:1px #000 solid; */
}

.cta {
    position:relative;
    top:0px;
    width:110px;
    height:32px;
    background:url('cta.png') no-repeat;
    background-size:contain;
    animation: ctaAnim 0.5s ease forwards;
    animation-delay:2s;
    animation-timeline: auto;
    animation-fill-mode:both;
    transform:scale(0);
    opacity:0;
}

.logo {
    position:absolute;
    top:528px;
    left:22px;
    width:100px;
    height:40px;
    background:url('eBay_logo.svg') no-repeat;
    background-size:contain;
    /*filter:invert(1);*/
}

#terms {
    position: absolute;
    bottom:0px;
    left:0px;
    padding:3px;
    width:300px;
    font-family:'marketSansRegular';
    font-size:6px;
    display:block;
    letter-spacing:-0px;
    text-align: center;
    color:var(--text-colour);
    /* background:white; */
    color:#000;
}

.tickSprite {
    width:128px;
    height:128px;
    background: url('tickSpriteAnim.png') no-repeat;
    overflow:hidden;
    /* border:1px #000 solid; */
    /* animation: sprite 0.8s steps(20) forwards; */
    transform:scale(0.25);
}

.tick1 {
    position:absolute;
    top:405px;
    left:15px;
    animation: sprite 0.8s 1s steps(20) forwards;
    animation-timeline: auto;
    animation-fill-mode:both;
    /*filter:invert(1);*/
}

.tick2 {
    position:absolute;
    top:349px;
    left:134px;
    animation: sprite 0.8s 1.4s steps(20) forwards;
    animation-timeline: auto;
    animation-fill-mode:both;
    /*filter:invert(1);*/
}

.tick3 {
    position:absolute;
    top:212px;
    left:156px;
    animation: sprite 0.8s 1.8s steps(20) forwards;
    animation-timeline: auto;
    animation-fill-mode:both;
    /*filter:invert(1);*/
}

#background {
    position:absolute;
    top:0px;
    left:0px;
    width:var(--width);
    height:var(--height);
    background:url('background.jpg') no-repeat;
    background-size:contain;
    /* animation: bgAnim 3s ease-out forwards; */
}

/** ANIMATION **/
@keyframes textAnimation {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bgAnim {
    from {
        transform:rotate(-5deg) scale(1.1);
    }
    to {
        transform:rotate(0deg) scale(1);
    }
}

@keyframes sprite {
    0% { background-position: 0px; }
    100% { background-position: -2560px; }
  }

@keyframes fadeOut {
    from {
        opacity:1;
    } to {
        opacity:0;
    }
}

@keyframes fadeIn {
    0% {opacity:0}
    100% {opacity:1}
}

@keyframes ctaAnim {
    from {
        transform:scale(0);
        opacity:0;
    }
    to {
        transform:scale(1);
        opacity:1;
    }
}

@keyframes ctaAnimScale {
    0% {
		transform: scale(0);
	}

	12% {
		transform: scale(0.1089);
	}

	24% {
		transform: scale(0.4356);
	}

	36% {
		transform: scale(0.9801);
	}

	54% {
		transform: scale(0.7502);
	}

	74% {
		transform: scale(0.9837);
	}

	82% {
		transform: scale(0.9375);
	}

	92% {
		transform: scale(0.9934);
	}

	96% {
		transform: scale(0.9846);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes ctaAnimBounce {
    0% {
		transform: translateY(0%);
        opacity:0;
	}

	12% {
		transform: translateY(10.89%);
	}

	24% {
		transform: translateY(43.56%);
	}

	36% {
		transform: translateY(98.01%);
	}

	54% {
		transform: translateY(75.02%);
        opacity:1;
	}

	74% {
		transform: translateY(98.37%);
	}

	82% {
		transform: translateY(93.75%);
	}

	92% {
		transform: translateY(99.34%);
	}

	96% {
		transform: translateY(98.46%);
	}

	100% {
		transform: translateY(100%);
        opacity:1;
	}
}