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

body, body * {
	vertical-align: baseline;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}


/* Div layer for the entire banner. */
#container_dc {
	position: absolute;
	width: 728px;
	height: 90px;
	top: 0px;
	left: 0px;
	margin: auto;
	overflow: hidden;
}

#content_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #2c0443;
	z-index: 100;
	background-repeat:;
}

/* Invisible button for background clickthrough. */
#background_exit_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	cursor: pointer;
	opacity: 0;
	z-index: 400;
}

/* Custom code */

.cars_brakes_728x90 {
	width: 728px;
	height: 90px;
	display: block;
	position: relative;
}

.cars_brakes_728x90:before {
	content: "";
	border: 1px solid black;
	display: inline;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 726px;
	height: 88px;
	z-index: 160;
}

.cars_brakes_728x90 div {
	display: inline;
    position: absolute;
    background-repeat: no-repeat;
}

.transition1 {
    transition: all 0.25s ease-out 0s;
	-webkit-transition: all 0.25s ease-out 0s;
	-moz-transition: all 0.25s ease-out 0s;
	-ms-transition: all 0.25s ease-out 0s;
}

.transition2 {
    transition: all 0.5s ease-out 0s;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
}

.middleAnchor {
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
}

#cp_logo {
	background-image: url("logoFinal.png");
  background-position: -2px -1px;
  background-size: 152px auto;
  border-radius: 50%;
  height: 62px;
  width: 148px;
  top: 14px;
  left: 557px;
  z-index: 1;
}

#cp_logo:after {
	color: white;
  content: "TM";
  display: inline;
  font-family: sans-serif;
  font-size: 4px;
  height: 30px;
  left: 136px;
  position: absolute;
  top: 51px;
  width: 20px;
  z-index: 2;
}

#cp_logo.transition2 {
  transition: all 0.2s ease-out 0s;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
}

#cp_logo.cp_final {
	opacity: 0;
  transform: translate(130px, -180px);
  -moz-transform: translate(130px, -180px);
  -webkit-transform: translate(130px, -180px);
  -ms-transform: translate(130px, -180px);
}

#cp_text1 {
	opacity: 0;
	width: 263px;
  height: 41px;
  top: 24px;
  left: 52%;
	margin: 0 0 0 -126px;
	background-image: url('text1.png');
	z-index: 6;
  transform: translate(-30px, 0);
  -moz-transform: translate(-30px, 0);
  -webkit-transform: translate(-30px, 0);
  -o-transform: translate(-30px, 0);
  -ms-transform: translate(-30px, 0);
}

#cp_text1.scene1 {
	opacity: 1;
  transform: translate(0px, 0);
  -moz-transform: translate(0px, 0);
  -webkit-transform: translate(0px, 0);
  -ms-transform: translate(0px, 0);
}

#cp_text1.scene2 {
	opacity: 0;
  transform: translate(30px, 0);
  -moz-transform: translate(30px, 0);
  -webkit-transform: translate(30px, 0);
  -ms-transform: translate(30px, 0);
}

#cp_text_container {
  left: 199px;
  top: 37px;
  z-index: 1;
  width: 154px;
  height: 38px;
  overflow: hidden;

	opacity: 0;
  transition: all 0.25s ease-out .5s;
  -webkit-transition: all 0.25s ease-out .5s;
  -moz-transition: all 0.25s ease-out .5s;
  -ms-transition: all 0.25s ease-out .5s;
}

#cp_text_container.scene2 {
	opacity: 1;
    transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
}

#cp_text2 {
	background-image: url('text2.png');
  width: 152px;
  height: 22px;
}

#cp_text2.scene3 {
	opacity: 0;
    transform: translate(-154px, 0);
    -moz-transform: translate(-154px, 0);
    -webkit-transform: translate(-154px, 0);
    -ms-transform: translate(-154px, 0);
}

#cp_text3 {
	opacity: 0;
	background-image: url('text3.png');
  margin-left: 0px;
  z-index: 1;
  width: 85px;
  height: 22px;
  transform: translate(154px, 0);
  -moz-transform: translate(154px, 0);
  -webkit-transform: translate(154px, 0);
  -ms-transform: translate(154px, 0);
}

#cp_text3.scene3 {
	opacity: 1;
  transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
}

#cp_text3.scene4 {
	opacity: 0;
    transform: translate(-154px, 0);
    -moz-transform: translate(-154px, 0);
    -webkit-transform: translate(-154px, 0);
    -ms-transform: translate(-154px, 0);
}

#cp_text4 {
	opacity: 0;
	background-image: url('text4.png');
  z-index: 1;
  width: 70px;
  height: 20px;
  margin-left: 0px;
  transform: translate(90px, 0);
  -moz-transform: translate(90px, 0);
  -webkit-transform: translate(90px, 0);
  -ms-transform: translate(90px, 0);
}

#cp_text4.scene4 {
	opacity: 1;
  transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
}

#cp_text4.cp_final {
	opacity: 0;
}

#cp_text5 {
	background-image: url('text5.png');
  z-index: 4;
  width: 209px;
  height: 29px;
  top: 31px;
  left: 11px;
	opacity: 0;
}

#cp_text5.cp_final {
	opacity: 1;
}

#cp_phone {
	background-image: url('phone_bg.jpg');
  background-size: 100% auto;
  z-index: 4;
  width: 81px;
  height: 166px;
  top: 5px;
  left: 97px;
  border-radius: 9px;
  opacity: 0;
  transition: all 0.25s ease-out .5s;
  -webkit-transition: all 0.25s ease-out .5s;
  -moz-transition: all 0.25s ease-out .5s;
  -ms-transition: all 0.25s ease-out .5s;
}

#cp_phone.scene2 {
   opacity: 1;
  transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
}

#cp_phone.cp_final {
  width: 61px;
  height: 181px;
  border-radius: 7px;
  transition: all 0.25s ease-out 0s;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;

  transform: translate(144px, 2px);
  -moz-transform: translate(144px, 2px);
  -webkit-transform: translate(144px, 2px);
  -ms-transform: translate(144px, 2px);
}

#cp_icons {
	width: 124px;
  height: 35px;
  top: 48px;
  left: 329px;
	background-image: url('icons.png');
	z-index: 4;
	opacity: 0;
  transition: all 0.25s ease-out 0s;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
}

#cp_icons.cp_final {
  opacity: 1;
  transform: translate(0px, -20px);
  -moz-transform: translate(0px, -20px);
  -webkit-transform: translate(0px, -20px);
  -ms-transform: translate(0px, -20px);
}

#cp_logo_final {
	width: 100px;
  height: 76px;
  top: 14px;
  left: 479px;
  background-image: url('logoFinal.png');
  background-size: 98px auto;
	z-index: 4;
	opacity: 0;

  transform: translate(107px, 10px);
  -moz-transform: translate(107px, 10px);
  -webkit-transform: translate(107px, 10px);
  -ms-transform: translate(107px, 10px);

  transition: all 0.25s ease-out 0s;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;
	
}

#cp_logo_final.cp_final {
	opacity: 1;
  transform: translate(0,0);
  -moz-transform: translate(0,0);
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
}

#cp_cta {
	cursor: pointer;
	width: 115px;
  height: 23px;
  top: 52px;
  left: 597px;
  background-image: url('findAShop.png');
  background-size: 116px;
	z-index: 4;
	box-shadow: 0px 1px 8px #888;
	opacity: 0;
  transition: all 0.25s ease-out 0s;
  -webkit-transition: all 0.25s ease-out 0s;
  -moz-transition: all 0.25s ease-out 0s;
  -ms-transition: all 0.25s ease-out 0s;

}

#cp_cta.cp_final {
	opacity: 1;
  transform: translate(0px, -20px);
  -moz-transform: translate(0px, -20px);
  -webkit-transform: translate(0px, -20px);
  -ms-transform: translate(0px, -20px);
}

#cp_final_bg {
  width: 728px;
  height: 90px;
  top: 0;
  left: 0;
  background-image: url('finalBackground.jpg');
  z-index: 3;
  opacity: 0;
}


#cp_people {
	width: 228px;
  height: 90px;
	top: 0;
	left: 0;
	background-image: url('people.jpg');
  background-color: #f2ecee;
	z-index: 5;
	opacity: 1;
}

#cp_people.scene2 {
  width: 0;
}


#cp_final_bg.cp_final {
	opacity: 1;
}

#cp_bg {
	width: 658px;
	height: 625px;
	top: 50%;
	left: 50%;
	margin: -313px 0 0 -329px;
	background-image: url('background_starburst.jpg');
	background-size: 658px 625px;
	animation: animationFrames linear 5s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	-webkit-animation: animationFrames linear 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: animationFrames linear 5s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 50% 50%;
	-ms-animation: animationFrames linear 5s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform: translate(0px,0px)  rotate(-360deg) ;
  }
  100% {
    transform: translate(0px,0px)  rotate(-180deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform: translate(0px,0px)  rotate(-360deg) ;
  }
  100% {
    -moz-transform: translate(0px,0px)  rotate(-180deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform: translate(0px,0px)  rotate(-360deg) ;
  }
  100% {
    -webkit-transform: translate(0px,0px)  rotate(-180deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform: translate(0px,0px)  rotate(-360deg) ;
  }
  100% {
    -ms-transform: translate(0px,0px)  rotate(-180deg) ;
  }
}

#cp_bg.stop {
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;

}