<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="https://eu.wrangler.com/on/demandware.static/Sites-Wrangler-Site/-/en_GB/v1596153786533/css/global.css">
</head>
<body>
<!-- CSS -->
<link rel="stylesheet" href="https://use.typekit.net/pmk4fmp.css">
<style type="text/css">
.btn-group-lg>.btn, .btn-lg {
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .1875rem;
}
a.wraemea-content-cta-stranger{
Text-decoration:none;
font-family: 'Futura PT Bold';
text-transform: uppercase;
}
a.wraemea-content-cta-stranger:link,a.wraemea-content-cta-stranger:visited,a.wraemea-content-cta-stranger:active{
color:#FFFFFF;
border:3px solid #E4002B;
border-radius: 0px;
padding: 8px 12px 8px 12px;
box-shadow: 0px 0px 6px 4px rgba(228, 0, 43, 0.6);
/* in order: x offset, y offset, blur size, spread size, color */
/* blur size and spread size are optional (they default to 0) */
}
a.wraemea-content-cta-stranger:hover{
Background:#FFFFFF;
color:#E4002B!important;
border:3px solid #E4002B;
border-radius: 0px
}
@media (max-width:768px){
.jumbotronTexasHeader {
background-image: url(https://staging-eu01-kontoor.demandware.net/on/demandware.servlet/webdav/Sites/Libraries/Wrangler/default/homepage/2020-10-26/wrangler_stranger-things_fw20_campaign_background_image_1920x576-tiny.png);
background-size:cover;
background-repeat: no-repeat;
min-height: calc(100vw * 0.82);
border-radius: 0px;
}
}
@media (min-width:769px){
.jumbotronTexasHeader {
background-image: url(https://staging-eu01-kontoor.demandware.net/on/demandware.servlet/webdav/Sites/Libraries/Wrangler/default/homepage/2020-10-26/wrangler_stranger-things_fw20_campaign_background_image_1920x576-tiny.png);
background-size: cover;
background-repeat: no-repeat;
min-height: calc(100vw * 0.3);
border-radius: 0px;
}
}
</style>
<style type="text/css">
#clockdiv{
font-family: sans-serif;
color: #fff;
display: block;
font-weight: 100;
/*text-align: right;
font-size: 30px;*/
}
#clockdiv > div{
/*padding: 10px;
border-radius: 3px;
background: #00BF96;*/
display: inline-block;
width: 24%;
text-align: right;
margin: 0px;
padding: 0px;
}
@media (max-width:768px){
#clockdiv div > span{
border-radius: 0px;
padding: 3.5vw 0 3.5vw 0;
display: inline-block;
font-family: itc-benguiat-condensed,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 6.4vw;
color: #E4002B;
border:4px solid #E4002B;
box-shadow: 0px 0px 6px 4px rgba(228, 0, 43, 0.6);
width: 90%;
text-align: center;
}
}
@media (min-width:769px){
#clockdiv div > span{
border-radius: 0px;
padding: 1.5vw 0 1.5vw 0;
display: inline-block;
font-family: itc-benguiat-condensed,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 4.4vw;
color: #E4002B;
border:4px solid #E4002B;
box-shadow: 0px 0px 6px 4px rgba(228, 0, 43, 0.6);
width: 90%;
text-align: center;
}
}
.smalltext{
padding-top: 5px;
/*font-size: 16px;*/
font-family: itc-benguiat-condensed,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.8vw;
color: #E4002B;
text-align: center;
}
</style>
<div class="jumbotronTexasHeader bg-secondary p-5">
<div class="row mx-auto mt-5 mb-5 d-flex align-items-end align-items-md-center">
<div class="col-12 col-md-5 text-center"><img src="https://staging-eu01-kontoor.demandware.net/on/demandware.servlet/webdav/Sites/Libraries/Wrangler/default/homepage/2020-10-26/Wranger-ST_Lockups_RGB_highlighted.png" class="img-fluid" alt="Wrangler x Stranger Things" loading="lazy"></div>
<div class="col-12 col-md-6 p-0 text-center text-md-right">
<div id="clockdiv" class="pt-5 pt-md-0 mb-5 text-center text-md-right">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds mr-0"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<a class="btn wraemea-content-cta-stranger btn-lg" href="$url('Search-Show','cgid','c010301')$">Are you ready?</a><br/>
</div>
</div>
</div>
<script type="text/javascript">
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = ('0' + t.days);
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
document.getElementById("clockdiv").innerHTML = "EXPIRED";
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
const deadline = 'November 5 2020 23:59:59';
initializeClock('clockdiv', deadline);
</script>
</body>
</html>