@charset "UTF-8";
/* CSS Document */
@import "reset.css";

body,
body * {
  vertical-align: baseline;
  height: 100%;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
  font-family: Tahoma;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

/*canvas{border: 1px solid #000}*/

#scriptSprite {
  position: absolute;
  left: 20px;
  top: 25px;
  width: 140px;
  height: 60px;
  background: url(../img/scriptSprite.png) no-repeat;
  background-size: 2520px 60px;
  background-position: 0px 0px;
  opacity: 0;
  /*overflow: hidden!important;*/
  z-index: 700;
}

#expand_content_dc {
  position: absolute;
  border: 1px solid #000;
  width: 598px;
  height: 348px;
}
/*Info Screen*/
#findOutCTA {
  position: absolute;
  bottom: 10px;
  left: -66px;
  width: 340px;
  height: 46px;
  background: url(../img/cta.png) no-repeat;
  z-index: 900;
  -ms-transform: scale(0.5, 0.5); /* IE 9 */
  -webkit-transform: scale(0.5, 0.5); /* Safari */
  transform: scale(0.5, 0.5);
  cursor: pointer;
}

#replay {
  position: absolute;
  bottom: 11px;
  left: 201px;
  width: 340px;
  height: 46px;
  background: url(../img/replay.png) no-repeat;
  z-index: 900;
  -ms-transform: scale(0.5, 0.5); /* IE 9 */
  -webkit-transform: scale(0.5, 0.5); /* Safari */
  transform: scale(0.5, 0.5);
  cursor: pointer;
}

#startGame {
  position: absolute;
  bottom: 10px;
  left: -66px;
  width: 340px;
  height: 46px;
  background: url(../img/startGame.png) no-repeat;
  z-index: 900;
  -ms-transform: scale(0.5, 0.5); /* IE 9 */
  -webkit-transform: scale(0.5, 0.5); /* Safari */
  transform: scale(0.5, 0.5);
  cursor: pointer;
}
#toolTip {
  position: absolute;
  bottom: 6px;
  left: 226px;
  width: 220px;
  height: 70px;
  background: url(../img/tooltip.svg) no-repeat;
  z-index: 900;
}

#scoreDisplay {
  position: absolute;
  bottom: 99px;
  left: 349px;
  width: 240px;
  height: 30px;
  z-index: 900;
  text-align: center;
  opacity: 0;
}
#plinth {
  position: absolute;
  bottom: -4px;
  right: -10px;
  width: 130px;
  height: 74px;
  z-index: 999;
  background: url(../img/plinth.svg) no-repeat;
  -ms-transform: scale(0.8, 0.8); /* IE 9 */
  -webkit-transform: scale(0.8, 0.8); /* Safari */
  transform: scale(0.8, 0.8);
}

#timerContainer {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 130px;
  height: 20px;
  z-index: 999;
  font-size: 20px;
  color: #000;
}

#timerTxt {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 90px;
  height: 20px;
  font-size: 20px;
  color: #1d4485;
  opacity: 0;
}

#cTimer {
  position: absolute;
  top: 0px;
  left: 90px;
  width: 40px;
  height: 20px;
  font-size: 20px;
  color: #1d4485;
  opacity: 0;
}

#carModelContainer {
  position: absolute;
  z-index: 900;
}

#carModel1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: inherit;
  height: inherit;
  background: url(../img/ecoTxt1.svg) no-repeat;
}
#carModel2 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: inherit;
  height: inherit;
  background: url(../img/ecoTxt2.svg) no-repeat;
}
#endScreenCar {
  position: absolute;
  top: 83px;
  left: -3px;
  width: 360px;
  height: 219px;
  background: url(../img/endScreenCar.png) no-repeat;
  background-size: 360px 219px;
  z-index: 900;
  opacity: 0;
}
#scriptSprite2 {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 455px;
  height: 191px;
  background: url(../img/scriptSprite2.png) no-repeat;
  background-size: 8190px 191px;
  background-position: 0px 0px;
  opacity: 0;
  /*overflow: hidden!important;*/
  z-index: 800;
}
#bgContainer {
  position: absolute;
  /*
	*/
  top: -90px;
  left: 0px;
  width: 600px;
  height: 250px;
  overflow: visible;
  background: url(../img/bg.svg) no-repeat;
  background-size: 600px 250px;
  /*background-position: -170px -60px;

	Change the scale here for larger creatives*/
  -ms-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

#shield {
  background-color: #fff;
  position: absolute;
  width: 870px;
  height: 450px;
  bottom: 10px;
  left: -200px;
  -ms-transform-origin: 50% 100%;
  /* IE 9 */
  -webkit-transform-origin: 50% 100%;
  /* Chrome, Safari, Opera */
  transform-origin: 50% 100%;
}

#shard1 {
  position: absolute;
  left: 49%;
  bottom: 0px;
  width: 36px;
  height: 270px;
  background: url(../img/shard1.svg) no-repeat;
  -ms-transform-origin: 60% 100%;
  -webkit-transform-origin: 60% 100%;
  transform-origin: 60% 100%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  /*background-color: #caa;*/
}
#shard2 {
  position: absolute;
  left: 47%;
  bottom: 20px;
  width: 100px;
  height: 300px;
  background: url(../img/shard3.svg) no-repeat;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  /*background-color: #ccc;*/
}

#shard2_shield {
  position: absolute;
  left: 30px;
  top: 25px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  /*-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	;*/
}

#shard3 {
  position: absolute;
  left: 49%;
  top: 65px;
  width: 44px;
  height: 383px;
  background: url(../img/shard4.svg) no-repeat;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}