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

/******** External/Internal - works on page load **********/
.ext-int-slideshow{
	position: relative;
	width: 185px;
	height: 175px;
	margin: 0 auto 1em auto;
	   
}
.ext-int-slideshow figure.rain {
	position: absolute;
	width: 150px;
	height: 170px;
	overflow: hidden;
	animation: raindrops 0.6s linear 0s infinite;
	
}
@keyframes raindrops {	
	from{ top:-20px; left:0px; }
	to { top:5px; left:-24px; }
}


/******** CHOOSE GEAR TYPE PAGE *******/

/******* STRAIGHT SLIDING **********/
.floor-plan {
    height: 70px;
    width: 197px;
    background: url(../../expert/images/floor.png);
	background-repeat: no-repeat;
    position: relative;
}
.sliding-door, .sliding-door2 {
	position: absolute;
	margin-top: 13px;
    width: 80px;
	height: 4px;
	background: #666;
    margin-left: 21px;
}
.sliding-door {
	animation: sliding-1 2s ease-in-out 1s infinite alternate;
}
.sliding-door2 {  
    margin-top: 18px;
    margin-left: 100px;
	animation: sliding-2 2s ease-in-out 1s infinite alternate;
}

@keyframes sliding-1 {
    from { margin-left: 21px; }
    to { margin-left: 100px; }
}
@keyframes sliding-2 {
    from { margin-left: 100px; }
    to { margin-left: 21px; }
}

/**** END FOLDING ********/

.end-fold {
   position: relative;
   width: 196px;
   height: 70px;
   margin: 0 auto 1em auto; 
}
.end-fold figure {
   margin: 0 auto;
   width: 196px;
   height: 70px;
   position: absolute;
   opacity: 1;
}

/* 7 seconds - 7 steps */
.slideshow-7-step figure:nth-child(1) {
   animation: xfade 7s 6s infinite;
}
.slideshow-7-step figure:nth-child(2) {
   animation: xfade 7s 5s infinite;
}
.slideshow-7-step figure:nth-child(3) {
    animation: xfade 7s 4s infinite;
}
.slideshow-7-step figure:nth-child(4) {
   animation: xfade 7s 3s infinite;
}
.slideshow-7-step figure:nth-child(5) {
   animation: xfade 7s 2s infinite;
}
.slideshow-7-step figure:nth-child(6) {
   animation: xfade 7s 1s infinite;
}
.slideshow-7-step figure:nth-child(7) {
   animation: xfade 7s 0s infinite;
}


/*********** RTC ********************/

.rtc {
   position: relative;
   width: 196px;
   height: 70px;
   margin: 0 auto 1em auto; 
}
.rtc figure{
   margin: 0 auto;
   width: 196px;
   height: 70px;
   position: absolute;
   opacity: 1;
}

/* 13 steps - 6.5 seconds */
.slideshow-13-step figure:nth-child(1) {
   animation: xfade 6.5s 6s infinite;
}
.slideshow-13-step figure:nth-child(2) {
   animation: xfade 6.5s 5.5s infinite;
}
.slideshow-13-step figure:nth-child(3) {
   animation: xfade 6.5s 5s infinite;
}
.slideshow-13-step figure:nth-child(4) {
   animation: xfade 6.5s 4.5s infinite;
}
.slideshow-13-step figure:nth-child(5) {
   animation: xfade 6.5s 4s infinite;
}
.slideshow-13-step figure:nth-child(6) {
   animation: xfade 6.5s 3.5s infinite;
}
.slideshow-13-step figure:nth-child(7) {
   animation: xfade 6.5s 3s infinite;
}
.slideshow-13-step figure:nth-child(8) {
   animation: xfade 6.5s 2.5s infinite;
}
.slideshow-13-step figure:nth-child(9) {
   animation: xfade 6.5s 2s infinite;
}
.slideshow-13-step figure:nth-child(10) {
   animation: xfade 6.5s 1.5s infinite;
}
.slideshow-13-step figure:nth-child(11) {
   animation: xfade 6.5s 1s infinite;
}
.slideshow-13-step figure:nth-child(12) {
   animation: xfade 6.5s 0.5s infinite;
}
.slideshow-13-step figure:nth-child(13) {
   animation: xfade 6.5s 0s infinite;
}

/* 13 steps - 6.5 seconds - delay start by 2s */
.slideshow-13-step-delay-2s figure:nth-child(1) {
   animation: xfade 8.5s 8s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(2) {
   animation: xfade 8.5s 7.5s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(3) {
   animation: xfade 8.5s 7s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(4) {
   animation: xfade 8.5s 6.5s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(5) {
   animation: xfade 8.5s 6s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(6) {
   animation: xfade 8.5s 5.5s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(7) {
   animation: xfade 8.5s 5s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(8) {
   animation: xfade 8.5s 4.5s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(9) {
   animation: xfade 8.5s 4s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(10) {
   animation: xfade 8.5s 3.5s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(11) {
   animation: xfade 8.5s 3s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(12) {
   animation: xfade 8.5s 2.5s infinite;
}
.slideshow-13-step-delay-2s figure:nth-child(13) {
   animation: xfade 8.5s 2s infinite;
}
@keyframes xfade{
  0%{
    opacity: 1;
  }
  1% {
    opacity:1;
  }
  14.285%{
    opacity: 0;
  }
  80% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}



/*************** CENTRE FOLDING **********/
.centre-folding {
   position: relative;
   width: 196px;
   height: 70px;
   margin: 0 auto 1em auto; 
}
.centre-folding figure{
   margin: 0 auto;
   width: 196px;
   height: 70px;
   position: absolute;
   opacity: 1;
}

/* 9 steps - 9 seconds */
.slideshow-9-step figure:nth-child(1) {
   animation: xfade 9s 8s infinite;
}
.slideshow-9-step figure:nth-child(2) {
   animation: xfade 9s 7s infinite;
}
.slideshow-9-step figure:nth-child(3) {
   animation: xfade 9s 6s infinite;
}
.slideshow-9-step figure:nth-child(4) {
   animation: xfade 9s 5s infinite;
}
.slideshow-9-step figure:nth-child(5) {
   animation: xfade 9s 4s infinite;
}
.slideshow-9-step figure:nth-child(6) {
   animation: xfade 9s 3s infinite;
}
.slideshow-9-step figure:nth-child(7) {
   animation: xfade 9s 2s infinite;
}
.slideshow-9-step figure:nth-child(8) {
   animation: xfade 9s 1s infinite;
}
.slideshow-9-step figure:nth-child(9) {
   animation: xfade 9s 0s infinite;
}

/*************** FIRE DOOR **********/
.fire-door {
   position: relative;
   width: 156px;
   height: 194px;
   margin: 0 auto 1em auto; 
}
.fire-door figure{
   margin: 0 auto;
   width: 156px;
   height: 194px;
   position: absolute;
   opacity: 1;
}

/* 3 steps - for the fire door animation */
.slideshow-3-step figure:nth-child(1) {
   animation: flicker 1.2s 0.8s infinite;
}
.slideshow-3-step figure:nth-child(2) {
   animation: flicker 1.2s 0.4s infinite;
}
.slideshow-3-step figure:nth-child(3) {
   animation: flicker 1.2s 0s infinite;
}
@keyframes flicker {
  0%{
    opacity: 1;
  }
  33.333%{
    opacity:0.2;
  }
  66.666%{
    opacity:0.2;
  }   
  100% {
    opacity:0.8;
  }
}


/*********** FACE FIXED ********************/

.face-fixed {
   position: relative;
   width: 226px;
   height: 226px;
   margin: 0 auto 1em auto; 
}
.face-fixed figure{
   margin: 0 auto;
   width: 226px;
   height: 226px;
   position: absolute;
   opacity: 1;
}

/******* DOOR POSITION PAGE **********/
/******* Inside the opening **********/
.floor-walls {
    height: 140px;
    width: 211px;
    background: url(../../expert/images/floor_walls.png);
	background-repeat: no-repeat;
    position: relative;
}
.floor-walls .sliding-door-inside-1, .floor-walls .sliding-door-inside-2,
.floor-walls .sliding-door-outside1, .floor-walls .sliding-door-outside2,
.floor-walls .sliding-door-within-1, .floor-walls .sliding-door-within-2,
.floor-walls .sliding-cavity-1, .sliding-cavity-2 {
	position: absolute;
	margin-top: 60px;
	width: 50px;
	height: 4px;
	background: #666;
	margin-left: 28px;
	top: -1px;
}
.floor-walls .sliding-door-inside-1 {
	animation: sliding-inside-1 2s ease-in-out 1s infinite alternate;
}
.floor-walls .sliding-door-inside-2 {  
    margin-top: 60px;
    margin-left: 134px;
	animation: sliding-inside-2 2s ease-in-out 1s infinite alternate;
}
@keyframes sliding-inside-1 {
    from { margin-left: 28px; }
    to { margin-left: 55px; }
}
@keyframes sliding-inside-2 {
    from { margin-left: 134px; }
    to { margin-left: 108px; }
}
/******* Outside the opening **********/
.floor-walls .sliding-door-outside1 {
	margin-left: 10px;
	margin-top: 37px;
	animation: sliding-outside-1 2.2s ease-in-out 1s infinite alternate;
}
.floor-walls .sliding-door-outside2 {  
    margin-top: 37px;
    margin-left: 150px;
	animation: sliding-outside-2 2.2s ease-in-out 1s infinite alternate;
}

@keyframes sliding-outside-1 {
    from { margin-left: 10px; }
    to { margin-left: 55px; }
}
@keyframes sliding-outside-2 {
    from { margin-left: 150px; }
    to { margin-left: 108px; }
}

/******* Within the opening **********/
.floor-walls .sliding-door-within-1 {
	animation: sliding-within-1 2.4s ease-in-out 1s infinite alternate;
	margin-top: 45px;
	margin-left: 56px;
}
.floor-walls .sliding-door-within-2 {  
    margin-top: 50px;
	margin-left: 105px;
	animation: sliding-within-2 2.4s ease-in-out 1s infinite alternate;
}
@keyframes sliding-within-1 {
    from { margin-left: 56px; }
    to { margin-left: 105px; }
}
@keyframes sliding-within-2 {
    from { margin-left: 105px; }
    to { margin-left: 56px; }
}

/******* Into the wall cavity **********/
.cavity {
    background: url(../../expert/images/floor_walls_cavity.png);
}
.cavity .sliding-cavity-1 {
	animation: sliding-cavity-1 2.5s ease-in-out 1s infinite alternate;
	width: 65px;
	margin-top: 48px;
	margin-left: 56px;
}
@keyframes sliding-cavity-1 {
    from { margin-left: 56px; }
    to { margin-left: 116px; }
}

.cavity2 {
    background: url(../../expert/images/floor_walls_cavity_flip.png);
	
}
.cavity2 .sliding-cavity-2 {
	animation: sliding-cavity-2 2.5s ease-in-out 1s infinite alternate;
	width: 65px;
	margin-top: 48px;
	margin-left: 90px;
}
@keyframes sliding-cavity-2 {
    from { margin-left: 90px; }
    to { margin-left: 30px; }
}
/*****************FOLDING DIRECTION PAGE ****************/

/**** Outward folding ********/

.outward-fold {
   position: relative;
   width: 209px;
   height: 96px;
   margin: 0 auto 1em auto; 
}
.outward-fold figure {
   margin: 0 auto;
   width: 209px;
   height: 96px;
   position: absolute;
   opacity: 1;
}
/**** Inward folding ********/

.inward-fold {
   position: relative;
   width: 208px;
   height: 69px;
   margin: 27px auto 1em auto; 
}
.inward-fold figure {
   margin: 0 auto;
   width: 208px;
   height: 69px;
   position: absolute;
   opacity: 1;
}

/* 11 seconds - 11 steps */
.slideshow-11-step figure:nth-child(1) {
   animation: xfade 11s 10s infinite;
}
.slideshow-11-step figure:nth-child(2) {
   animation: xfade 11s 9s infinite;
}
.slideshow-11-step figure:nth-child(3) {
    animation: xfade 11s 8s infinite;
}
.slideshow-11-step figure:nth-child(4) {
   animation: xfade 11s 7s infinite;
}
.slideshow-11-step figure:nth-child(5) {
   animation: xfade 11s 6s infinite;
}
.slideshow-11-step figure:nth-child(6) {
   animation: xfade 11s 5s infinite;
}
.slideshow-11-step figure:nth-child(7) {
   animation: xfade 11s 4s infinite;
}
.slideshow-11-step figure:nth-child(8) {
   animation: xfade 11s 3s infinite;
}
.slideshow-11-step figure:nth-child(9) {
   animation: xfade 11s 2s infinite;
}
.slideshow-11-step figure:nth-child(10) {
   animation: xfade 11s 1s infinite;
}
.slideshow-11-step figure:nth-child(11) {
   animation: xfade 11s 0s infinite;
}
/************* HOW MANY TRACKS PAGE *************/

/* two tracks within opening */
.two-tracks-within {
    height: 70px;
    width: 197px;
	background: url(../../expert/images/floor.png);
	background-repeat: no-repeat;
    position: relative;
}
.two-tracks-within .sliding-door-within-1, .two-tracks-within .sliding-door-within-2 {
	position: absolute;
	margin-top: 3px;
	width: 70px;
	height: 3px;
	background: #666;
	margin-left: 32px;
	top: -1px;
}
.two-tracks-within .sliding-door-within-1 {
	animation: sliding-within-3 2s ease-in-out 1s infinite alternate;
}
.two-tracks-within .sliding-door-within-2 {  
    margin-top: 7px;
    margin-left: 96px;
	animation: sliding-within-4 2s ease-in-out 1s infinite alternate;
}
@keyframes sliding-within-3 {
    from { margin-left: 32px; }
    to { margin-left: 96px; }
}
@keyframes sliding-within-4 {
    from { margin-left: 96px; }
    to { margin-left: 32px; }
}

/* three tracks within opening */


.three-tracks-within {
    height: 70px;
    width: 197px;
	background: url(../../expert/images/floor.png);
	background-repeat: no-repeat;
    position: relative;
}
.three-tracks-within .sliding-door-within-3, .three-tracks-within .sliding-door-within-4, .three-tracks-within .sliding-door-within-5 {
	position: absolute;
	margin-top: 2px;
	width: 50px;
	height: 3px;
	background: #666;
	margin-left: 32px;
	top: -1px;
}
.three-tracks-within .sliding-door-within-3 {
	animation: sliding-within-5 10s ease-in-out 0s infinite alternate;
}
.three-tracks-within .sliding-door-within-4 {  
    margin-top: 6px;
    margin-left: 78px;
	animation: sliding-within-6 10s ease-in-out 0s infinite alternate;
}
.three-tracks-within .sliding-door-within-5 {  
	margin-top: 10px;
    margin-left: 115px;
	animation: sliding-within-7 10s ease-in-out 0s infinite alternate;
}
@keyframes sliding-within-5 {	
	0%   {margin-left: 32px;}
    25%  {margin-left: 115px;}
    75% {margin-left: 115px;}
	100% {margin-left: 32px;}
}
@keyframes sliding-within-6 {
	0%   {margin-left: 78px;}
	12.5%   {margin-left: 78px;}
    37.5%  {margin-left: 115px;}
    62.5% {margin-left: 78px;}
	100% {margin-left: 32px;}
}
@keyframes sliding-within-7 {
	0%   {margin-left: 115px;}
    50%  {margin-left: 115px;}
    75% {margin-left: 32px;}
	100% {margin-left: 32px;}
}

/************* DOOR CONFIG 9 OPTIONS *************/

/* one track left only */
.nine-options-L-only {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/left-only.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-L-only .one-track-L-only-1, .nine-options-L-only .one-track-L-only-2 {
	position: absolute;
	margin-top: 29px;
	width: 42px;
	height: 3px;
	background: #666;
	margin-left: 120px;
	top: -1px;
}
.nine-options-L-only .one-track-L-only-1 {
	animation: one-track-L-only-1 4s ease-in-out 1s infinite alternate;
}
.nine-options-L-only .one-track-L-only-2 {  
  margin-top: 29px;
    margin-left: 164px;
	animation: one-track-L-only-2 4s ease-in-out 1s infinite alternate;
}
@keyframes one-track-L-only-1 {
    from { margin-left: 120px; }
    to { margin-left: 24px; }
}
@keyframes one-track-L-only-2 {
    from { margin-left: 164px; }
    to { margin-left: 68px; }
}

/* one track right only */
.nine-options-R-only {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/right-only.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-R-only .one-track-R-only-1, .nine-options-R-only .one-track-R-only-2 {
	position: absolute;
	margin-top: 29px;
	width: 42px;
	height: 3px;
	background: #666;
	margin-left: 44px;
	top: -1px;
}
.nine-options-R-only .one-track-R-only-1 {
	animation: one-track-R-only-1 4s ease-in-out 1s infinite alternate;
}
.nine-options-R-only .one-track-R-only-2 {  
  
    margin-left: 88px;
	animation: one-track-R-only-2 4s ease-in-out 1s infinite alternate;
}
@keyframes one-track-R-only-1 {
    from { margin-left: 44px; }
    to { margin-left: 132px; }
}
@keyframes one-track-R-only-2 {
    from { margin-left: 88px; }
    to { margin-left: 176px; }
}


/* one track both ways */
.nine-options-both-ways {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/both-ways.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-both-ways .one-track-both-ways-1, .nine-options-both-ways .one-track-both-ways-2 {
	position: absolute;
	margin-top: 29px;
	width: 48px;
	height: 3px;
	background: #666;
	margin-left: 76px;
	top: -1px;
}
.nine-options-both-ways .one-track-both-ways-1 {
	animation: one-track-both-ways-1 3s ease-in-out 1s infinite alternate;
}
.nine-options-both-ways .one-track-both-ways-2 {  
  	margin-top: 29px;
    margin-left: 126px;
	animation: one-track-both-ways-2 3s ease-in-out 1s infinite alternate;
}
@keyframes one-track-both-ways-1 {
    from { margin-left: 76px; }
    to { margin-left: 30px; }
}
@keyframes one-track-both-ways-2 {
    from { margin-left: 126px; }
    to { margin-left: 174px; }
}
/* two track2 left only */
.nine-options-2tracks-L-only {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/left-only.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-2tracks-L-only .two-tracks-L-only-1, .nine-options-2tracks-L-only .two-tracks-L-only-2 {
	position: absolute;
	margin-top: 29px;
	width: 42px;
	height: 3px;
	background: #666;
	margin-left: 120px;
	top: -1px;
}
.nine-options-2tracks-L-only .two-tracks-L-only-1 {
	animation: two-tracks-L-only-1 3s ease-in-out 1s infinite alternate;
}
.nine-options-2tracks-L-only .two-tracks-L-only-2 {  
  margin-top: 34px;
    margin-left: 164px;
	animation: two-tracks-L-only-2 3s ease-in-out 1s infinite alternate;
}
@keyframes two-tracks-L-only-1 {
    from { margin-left: 120px; }
    to { margin-left: 80px; }
}
@keyframes two-tracks-L-only-2 {
    from { margin-left: 164px; }
    to { margin-left: 80px; }
}

/* two tracks right only */
.nine-options-2tracks-R-only {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/right-only.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-2tracks-R-only .two-tracks-R-only-1, .nine-options-2tracks-R-only .two-tracks-R-only-2 {
	position: absolute;
	margin-top: 34px;
	width: 42px;
	height: 3px;
	background: #666;
	margin-left: 44px;
	top: -1px;
}
.nine-options-2tracks-R-only .two-tracks-R-only-1 {
	animation: two-tracks-R-only-1 3s ease-in-out 1s infinite alternate;
}
.nine-options-2tracks-R-only .two-tracks-R-only-2 {  
  	margin-top: 29px;
    margin-left: 88px;
	animation: two-tracks-R-only-2 3s ease-in-out 1s infinite alternate;
}
@keyframes two-tracks-R-only-1 {
    from { margin-left: 44px; }
    to { margin-left: 130px; }
}
@keyframes two-tracks-R-only-2 {
    from { margin-left: 88px; }
    to { margin-left: 130px; }
}

/* two tracks both ways */
.nine-options-2tracks-both-ways {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/both-ways.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-2tracks-both-ways .two-tracks-both-ways-1, .nine-options-2tracks-both-ways .two-tracks-both-ways-2,
.nine-options-2tracks-both-ways .two-tracks-both-ways-3 {
	position: absolute;
	margin-top: 29px;
	width: 34px;
	height: 3px;
	background: #666;
	margin-left: 76px;
	top: -1px;
}
.nine-options-2tracks-both-ways .two-tracks-both-ways-1 {
	animation: two-tracks-both-ways-1 3s ease-in-out 1s infinite alternate;
}
.nine-options-2tracks-both-ways .two-tracks-both-ways-2 {  
  	margin-top: 29px;
    margin-left: 140px;
	animation: two-tracks-both-ways-2 3s ease-in-out 1s infinite alternate;
}
.nine-options-2tracks-both-ways .two-tracks-both-ways-3 {  
  	margin-top: 34px;
    margin-left: 108px;
	animation: two-tracks-both-ways-3 3s ease-in-out 1s infinite alternate;
}
@keyframes two-tracks-both-ways-1 {
    from { margin-left: 76px; }
    to { margin-left: 44px; }
}
@keyframes two-tracks-both-ways-2 {
    from { margin-left: 140px; }
    to { margin-left: 170px; }
}
@keyframes two-tracks-both-ways-3 {
    from { margin-left: 108px; }
    to { margin-left: 170px; }
}

/* three tracks left only */
.nine-options-3tracks-L-only {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/left-only.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-3tracks-L-only .three-tracks-L-only-1, 
.nine-options-3tracks-L-only .three-tracks-L-only-2,
.nine-options-3tracks-L-only .three-tracks-L-only-3 {
	position: absolute;
	margin-top: 29px;
	width: 34px;
	height: 3px;
	background: #666;
	margin-left: 116px;
	top: -1px;
}
.nine-options-3tracks-L-only .three-tracks-L-only-1 {
	animation: three-tracks-L-only-1 3s ease-in-out 1s infinite alternate;
}
.nine-options-3tracks-L-only .three-tracks-L-only-2 {  
  margin-top: 34px;
    margin-left: 148px;
	animation: three-tracks-L-only-2 3s ease-in-out 1s infinite alternate;
}
.nine-options-3tracks-L-only .three-tracks-L-only-3 {  
  margin-top: 39px;
    margin-left: 178px;
	animation: three-tracks-L-only-3 3s ease-in-out 1s infinite alternate;
}
@keyframes three-tracks-L-only-1 {
    from { margin-left: 116px; }
    to { margin-left: 86px; }
}
@keyframes three-tracks-L-only-2 {
    from { margin-left: 148px; }
    to { margin-left: 86px; }
}
@keyframes three-tracks-L-only-3 {
    from { margin-left: 178px; }
    to { margin-left: 86px; }
}

/* THREE tracks right only */
.nine-options-3tracks-R-only {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/right-only.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-3tracks-R-only .three-tracks-R-only-1, 
.nine-options-3tracks-R-only .three-tracks-R-only-2,
.nine-options-3tracks-R-only .three-tracks-R-only-3 {
	position: absolute;
	margin-top: 39px;
	width: 34px;
	height: 3px;
	background: #666;
	margin-left: 44px;
	top: -1px;
}
.nine-options-3tracks-R-only .three-tracks-R-only-1 {
	animation: three-tracks-R-only-1 3s ease-in-out 1s infinite alternate;
}
.nine-options-3tracks-R-only .three-tracks-R-only-2 {  
  	margin-top: 34px;
    margin-left: 72px;
	animation: three-tracks-R-only-2 3s ease-in-out 1s infinite alternate;
}
.nine-options-3tracks-R-only .three-tracks-R-only-3 {  
  	margin-top: 29px;
    margin-left: 100px;
	animation: three-tracks-R-only-3 3s ease-in-out 1s infinite alternate;
}
@keyframes three-tracks-R-only-1 {
    from { margin-left: 44px; }
    to { margin-left: 130px; }
}
@keyframes three-tracks-R-only-2 {
    from { margin-left: 72px; }
    to { margin-left: 130px; }
}
@keyframes three-tracks-R-only-3 {
    from { margin-left: 100px; }
    to { margin-left: 130px; }
}

/* THREE tracks both ways */
.nine-options-3tracks-both-ways {
    height: 70px;
    width: 250px;
	background: url(../../expert/images/both-ways.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
    position: relative;
}
.nine-options-3tracks-both-ways .three-tracks-both-ways-1, .nine-options-3tracks-both-ways .three-tracks-both-ways-2,
.nine-options-3tracks-both-ways .three-tracks-both-ways-3 {
	position: absolute;
	margin-top: 29px;
	width: 34px;
	height: 3px;
	background: #666;
	margin-left: 76px;
	top: -1px;
}
.nine-options-3tracks-both-ways .three-tracks-both-ways-1 {
	animation: three-tracks-both-ways-1 3s ease-in-out 1s infinite alternate;
}
.nine-options-3tracks-both-ways .three-tracks-both-ways-2 {  
  	margin-top: 39px;
    margin-left: 140px;
	animation: three-tracks-both-ways-2 3s ease-in-out 1s infinite alternate;
}
.nine-options-3tracks-both-ways .three-tracks-both-ways-3 {  
  	margin-top: 34px;
    margin-left: 108px;
	animation: three-tracks-both-ways-3 3s ease-in-out 1s infinite alternate;
}
@keyframes three-tracks-both-ways-1 {
    from { margin-left: 76px; }
    to { margin-left: 44px; }
}
@keyframes three-tracks-both-ways-2 {
    from { margin-left: 140px; }
    to { margin-left: 170px; }
}
@keyframes three-tracks-both-ways-3 {
    from { margin-left: 108px; }
    to { margin-left: 170px; }
}