/* 20190704 - Experiment - GNC Creatine price comparison */

@font-face {
  font-family: "FiveKallumEmb";
  src: url(5kallum_sans_neue.ttf);
}

@font-face {
  font-family: "BitterBold";
  src: url(Bitter-Bold.otf);
}

#imgholder {
  position:relative;
  z-index:10;
  margin: 1em auto;
  width: max-content;
}

@keyframes glint {
  0% {left:-45px}
  2% {background-image: linear-gradient(90deg, rgba(130,75,150,0.0) 0%, rgba(150,95,170,0.15) 25%, rgba(235,180,255,0.8) 50%, rgba(150,95,170,0.15) 55%, rgba(130,75,150,0.0) 100%);}
  5% {background-image: linear-gradient(90deg, rgba(130,75,150,0.0) 0%, rgba(75,95,170,0.15) 25%, rgba(90,255,255,0.8) 50%, rgba(0,95,170,0.15) 75%, rgba(130,75,150,0.0) 100%);}
  6% {background-image: linear-gradient(90deg, rgba(130,75,150,0.0) 0%, rgba(0,95,170,0.15) 25%, rgba(90,255,255,0.8) 50%, rgba(0,95,170,0.15) 75%, rgba(130,75,150,0.0) 100%);}
  8% {background-image: linear-gradient(90deg, rgba(130,75,150,0.0) 0%, rgba(75,95,170,0.15) 25%, rgba(90,255,255,0.8) 50%, rgba(0,95,170,0.15) 75%, rgba(130,75,150,0.0) 100%);}
  9% {background-image: linear-gradient(90deg, rgba(130,75,150,0.0) 0%, rgba(150,95,170,0.15) 25%, rgba(235,180,255,0.8) 50%, rgba(150,95,170,0.15) 55%, rgba(130,75,150,0.0) 100%);}
  10% {left:200px}
  100% {left:200px}
}

@keyframes priceshimmy {
  0% {top:545px; opacity:0;}
  12% {top:545px; opacity:1;}
  60% {top:545px; opacity:1;}
  70% {opacity:1;}
  75% {top:345px; opacity:0;}
  100% {top:345px; opacity:0;}
}

.pricecomp {
  width: 170px;
  height:95px;
  font-family: "FiveKallumEmb";
  font-size:80px;
  line-height:0.8;
  padding:15px;
  background-color:rgba(75,55,255,0.65);
  border-radius: 5px;
  overflow: hidden;
}

.clountryname {
  color:white;
  position:absolute;
  z-index:500;
  width:fill-available;
}

.glinter{
  z-index:0;
  width:30px;
  height:180px;
  position:absolute;
  top:-20px;
  left:-55px;
  background-image: linear-gradient(90deg, rgba(130,75,150,0.0) 0%, rgba(150,95,170,0.15) 45%, rgba(220,165,240,0.65) 50%, rgba(150,95,170,0.15) 55%, rgba(130,75,150,0.0) 100%);
  transform: rotate(-10deg);
  animation-name: glint;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

#usgnc {position:absolute; top:85px; left:115px;  z-index:120;}
#hkgnc {position:absolute; top:260px; left:395px; z-index:130;   width: 120px;}

.amt {
  color:white;
  width: max-content;
  font-family: "FiveKallumEmb";
  font-size:25px;
  line-height:0.8;
  padding:10px;
  background-color:rgba(0,0,0,0.5);
  border-radius: 5px;
}

#usgncamt {position:absolute; top:595px; left:155px;  z-index:20;}
#hkgncamt {position:absolute; top:595px; left:415px; z-index:30;}

.creatineprice {
  color:rgb(75,55,155);
  text-shadow: 2px 2px 17px rgba(90,255,255,0.95), 3px 3px 50px rgba(90,255,255,0.9);
  width: max-content;
  font-family: "BitterBold";
  font-weight:bold;
  font-size:45px;
  line-height:0.8;
  padding:10px;
  background:transparent;
  animation-name: priceshimmy;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

#usgncprice {
  position:absolute; top:545px; left:115px;  z-index:20;
}
#hkgncprice {
  position:absolute; top:545px; left:365px; z-index:30;
}