@charset "utf-8";
/* CSS Document */

.inter-normal {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

.Montserrat-normal {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0 auto;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#container {
  width: 300px;
  height: 600px;
  overflow: hidden;
  top: 0;
  left: 0;
  position: absolute;
  background-color: #fff;
  display: none;
}

/* Global */
.adSize { position:absolute; top:0px; width:300px; height:600px; }
.defPos { position:absolute; top:0px; left:0px; }
.btn { cursor: pointer; }
.hideElm { display:none; }
.buttonConfig {background-color:#fff;cursor: pointer;opacity: 0;}
.anchorCenter { -webkit-transform-origin: center center; transform-origin: center center; }
.blendingMode { mix-blend-mode:hard-light; }


/* Border */
#border {
  box-sizing: border-box;
  border: 1px solid #808080;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/*-- BG --*/
#bg { background: url(bg.jpg) no-repeat; background-size: 100%; }

#bgrect {
  position: absolute;
  background-color: #e01a22;
  width: 300px;
  height: 208px;
}

#logo1 { background: url(logo1.svg) no-repeat; background-size: 100%; }

/* Masks */
#mask1,
#mask2 {
  position: absolute;
  width: 300px;
  height: 520px;
  overflow: hidden;
}

/* Images */
#image1,
#image2 {
  position: absolute;
  top: -31px;
  left: -18px;
  width: 336px;
  height: 672px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform-origin: 50% 50%;
}
#image1 { background-image: url(image1.jpg); }
#image2 { background-image: url(image2.jpg); }


#packshot { 
 	position: absolute;
	background: url(packshot.png) no-repeat center;
	background-size: 100% 100%;
  	transform-origin: 50% 50%;
}

#dinkus1,
#dinkus2 {
  left: 236px;
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform-origin: 50% 50%;
}

#dinkus1 { top: 377px; background-image: url(dinkus1.png); }
#dinkus2 { top: 437px; background-image: url(dinkus2.png); }

 
/* CTA */
#cta {position: absolute; left: 100px; top: 91px; width: 30px;height: 30px;background: #fff;border: 1px solid #fff;border-radius: 30px;transform-origin: 50% 50%;overflow: hidden;}
#btn_cta_label, #btn_cta_label_hover {position: absolute;left: 50%; top: 50%; width: 65px;height: auto; transform: translate(-50%, calc(-50% + 1px));}
#btn_cta_label_hover { opacity: 0; }
#label_wrap {position: absolute; inset:0; display:flex; align items: center; justify-content:center;overflow: hidden;}
#btn_cta_redFill {position: relative;bottom: -36px;right: 0;width: 152px;height: 33px;background: #e01a22;}


/* ROUNDEL */
#roundelContainer  {
    position: absolute;
    left: 13px;
    top: 223px;
    width: 98px;
    height: 101px;
}
/* All roundel layers fill container */
#roundelOuterWhite,
#roundelInnerRed,
#roundelCopy1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#strip { position:absolute; left:50%; bottom:0; transform: translateX(-50%);  width:90%; height:26%; }
#roundelOuterWhite { background: url(roundelOuterWhite.svg) no-repeat center; background-size: 100% 100%; }
#roundelInnerRed { background: url(roundelInnerRed.svg) no-repeat center; background-size: 100% 100%; }
#roundelCopy1 { no-repeat center; background-size: 100% 100%; }

.rect {position: absolute; width: 150px; height:38px;background: #e01a22; border-radius: 6px;transform-origin: 50% 50%;overflow: hidden;}
#rect1a  {
    left: 75px;
    top: 250px;
    width: 150px;
	transform-origin: 50% 50%;
    
}
#rect1b  {
    left: 101px;
    top: 282px;
    width: 98px;
	transform-origin: 50% 50%;
}
#rect2a  {
    left: 33.5px;
    top: 250px;
    width: 233px;
	transform-origin: 50% 50%;
}
#rect2b  {
    left: 85px;
    top: 282px;
    width: 130px;
	transform-origin: 50% 50%;
}
#text1a { background: url(text1a.png) no-repeat; background-size: 100%; }
#text1b { background: url(text1b.png) no-repeat; background-size: 100%; }
#text2a { background: url(text2a.png) no-repeat; background-size: 100%; }
#text2b { background: url(text2b.png) no-repeat; background-size: 100%; }

#text3a { background: url(text3a.png) no-repeat; background-size: 100%; }
#text3b { background: url(text3b.png) no-repeat; background-size: 100%; }
#text3c { background: url(text3c.png) no-repeat; background-size: 100%; }

#tc1 { background: url(tc1.png) no-repeat; background-size: 100%; }

/*-- ELEMENTS --*/