@charset "utf-8";

/* #### BASIC SETTINGS #### */

a, h2, h3, p, div {
	border: 0;
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: none;
}
a {
	color: #666;
}
a:hover {
	color: #06F;
}
h2 {
	line-height: 1.1em;
	margin:.5em !important;
}
p {
	color: #404040;
	margin-bottom: 1.625em;
	font-size: .750em;
	line-height: 1.625em;
}
.center, p.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}


#frontRearSelectButtonsSprt {
}

.navIntIcon p {
	text-shadow: 1px 1px 1px #fff;
	font-weight: 700;
	text-align: right;
	font-size: 18px;
	line-height: 22px;
	position: absolute;
	right: 0;
	padding: 7px 10px 0 0
}
.navIntImg {
	position: absolute;
	right: 95px;
	top: -25px;
	pointer-events: none
}


/* #### CUSTOM SCRIPTS #### */

.grayShadowContainer{background-color: rgb(238, 238, 238); width: 810px; padding: 10px 35px; margin: 0px auto; }
.grayShadowContainer.borderTop{border-top: 1px solid #ccc;}
.grayShadowContainer.borderBottom{border-bottom: 1px solid #ccc;}
		

.navigatorContainer {
 background-color:#fff;
 border: 1px solid #999;
 padding:8px;
 margin-bottom:1.625em;
 border-radius:5px;
/*	box-shadow:0px 0px 6px rgb(204, 204, 204) inset;
	-webkit-box-shadow: 0px 0px 6px rgb(204, 204, 204) inset;
	-moz-box-shadow: 0px 0px 6px rgb(204, 204, 204) inset;*/}
			
.navigatorContainer .mainCol {
 float:left;
 width: 455px;
 height: 540px;} 
  
.navigatorContainer .secondCol {
 float:left;
 width: 314px;
 height: 540px;
 margin-left:10px;
 padding-left:10px;
 border-left: 1px solid #999;} 
         
.navigatorContainer .secondCol .coilover {
 height: 319px;
 margin-bottom:10px;
 padding-bottom:10px;
 border-bottom: 1px solid #999;} 
   
.navigatorContainer .secondCol .advanced {
 height: 200px;}          
			
/* THIS APPEARS TO BE DUPLICATE CODE ON LINE 118 - JASON 09/21/15
.popover p {margin:0 0 5px 0;padding:0;border:0;font-size:.7em; line-height:10pt;}
.popover h2 {margin-bottom:5px; font-size:.8em;}
.popover .grid_5, .grid_2, .grid_3 {margin:0 0 5px 5px;padding:0;border:0;}
.popover .border {border-bottom:1px solid #C8C8C8;}
.popover a:hover {color:#06F;}
*/ 

.navPopButton, .navPopButtonPreview {
 -moz-box-shadow: 2px 2px 5px  #ccc;
 -webkit-box-shadow: 2px 2px 5px  #ccc;
 box-shadow: 2px 2px 5px  #ccc;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
 background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
 background-color:#ffec64;
 -moz-border-radius:24px;
 -webkit-border-radius:24px;
 border-radius:24px;
 border:1px solid #ffaa22;
 display:inline-block;
 color:#333333;
 font-family:arial;
 font-size:16px;
 font-weight:bold;	
 text-decoration:none;
 text-shadow:1px 1px 0px #ffee66;
 text-align:center;
 width:25px;
 height:23px;
 padding-top:2px;
 margin:5px;}

.navPopButton.active {
 -moz-box-shadow: 2px 2px 5px  #ccc;
 -webkit-box-shadow: 2px 2px 5px  #ccc;
 box-shadow: 2px 2px 5px  #ccc;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
 background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
 background-color:#ffec64;
 -moz-border-radius:24px;
 -webkit-border-radius:24px;
 border-radius:24px;
 border:6px solid #990000;
 display:inline-block;
 color:#333333;
 font-family:arial;
 font-size:16px;
 font-weight:bold;	
 text-decoration:none;
 text-shadow:1px 1px 0px #ffee66;	
 text-align:center;
 width:25px;
 height:23px;
 padding-top:2px;
 margin:0px;
/*	-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
	-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	color:#ffffff;
	text-decoration:none;
	text-shadow:1px 1px 0px #528009;
	position:relative;
	
	width:21px;
	height:25px;
	margin:0;
	padding:5px 0 0 10px;*/}

.navPopButton.active a {
	text-decoration:none;
}


.navPopButtonPreview {
 margin:0 5px 0 0 !important;}

/* --------------------------- BEGIN CONTROLS INDIVIDUAL CELLS POPUP WINDOW ------------------------------ */
.popover p {margin:0 0 5px 0;padding:0;border:0;font-size:.7em; line-height:10pt;}
.popover h2 {margin-bottom:5px; font-size:.7725em;}
.popover .grid_5, .grid_2, .grid_3 {margin:0 0 5px 5px;padding:0;border:0;}
.popover .border {border-bottom:1px solid #C8C8C8;}
.popover a:hover {color:#06F;}
/* --------------------------- END CONTROLS INDIVIDUAL CELLS  POPUP WINDOW ------------------------------ */		
		
		
/*		
.navigatorContainer {
 background-color:#fff;
			border: 1px solid #666;
			padding:8px;
			margin-bottom:1.625em;
			border-color:#666;
			border-radius:5px;
			}
			
		.navigatorContainer .mainCol {
			float:left;
			width: 455px;
			height: 540px;
			}   
		.navigatorContainer .secondCol {
			float:left;
			width: 314px;
			height: 540px;
			margin-left:10px;
			padding-left:10px;
			border-left: 1px solid #666;
			}          
		.navigatorContainer .secondCol .coilover {
			height: 319px;
			margin-bottom:10px;
			padding-bottom:10px;
			border-bottom: 1px solid #666;			
			}    
		.navigatorContainer .secondCol .advanced {
			height: 200px;}      */     
			
			
			  
.popCol{position: absolute; top: 25px; left: 510px;}
.popColLeft{position: absolute; top: 25px; left: 175px;}

.closeButton {        
 -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
 -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
 box-shadow:inset 0px 1px 0px 0px #cf866c;        
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
 background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
 background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
 background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
 background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
 background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);        
 background-color:#d0451b;        
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;        
 border:1px solid #942911;        
 display:inline-block;
 color:#ffffff !important;
 font-family:arial;
 font-size:14px;
 font-weight:bold;
 padding:1px 17px;
 text-decoration:none;       
 text-shadow:0px 1px 0px #854629;		
 float:right;}

.closeButton:hover {        
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
 background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
 background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
 background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
 background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
 background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);       
 background-color:#bc3315;	
text-decoration:none;	
 }

.closeButton:active {
 position:relative;
 top:1px;}
	
.suspensionBuilderBtn {        
 -moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
 -webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
 box-shadow:inset 0px -3px 7px 0px #29bbff;        
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
 background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
 background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
 background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
 background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
 background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);        
 background-color:#2dabf9;        
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border:1px solid #4d4e5e;        
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:17px;
 font-weight:bold;
 padding:6px 14px;
 text-decoration:none;        
 text-shadow:0px 1px 0px #263666;}

.suspensionBuilderBtn:hover {       
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
 background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
 background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
 background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
 background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
 background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);       
 background-color:#0688fa;}

.suspensionBuilderBtn:active {
 position:relative;
 top:1px;}
	
.popoverFullCol {
 width:297px;
 float:left;
 margin:5px 0 0 0;
 border:0;
 padding:0;}

.popoverHalfCol {
 width:144px;
 float:left;
 margin:0;
 border:0;
 padding:0;}

.popoverHalfCol .second {
 margin-left:14px;}	
	
.popoverImgCol {
 width:110px;
 float:left;
 margin:0;
 border:0;
 padding:0;} 
 
.popoverImgTextCol {
 width: 177px;
 float: left;
 margin: 0 0 0 10px;
 border: 0;
 padding: 0;}  
				
/* #### HOTSTOP POPOVER CSS #### */
.container {
 position: relative;
 margin: 0px auto !important;
 width: 880px;
 padding: 0;
 border: 0 solid #D71114;}

.largeimage{
  position: relative;
  z-index: 1;
}

img.info-icon{
  cursor: pointer;
  z-index: 2;
}
a.info-icon{
  cursor: pointer;
  z-index: 2;
}

#popover_container .info-icon1{
  position: absolute;
  top: 360px;
  left: 57px;
}
#popover_container .info-icon2{
  position: absolute;
  top: 265px;
  left: 276px;
}
#popover_container .info-icon3{
  position: absolute;
  top: 280px;
  left: 220px;
}
#popover_container .info-icon4{
  position: absolute;
  top: 54px;
  left: 220px;
}

#container2 .info-icon1{
  position: absolute;
  top: 170px;
  left: 223px;
}

#container2 .info-icon2{
  position: absolute;
  top: 240px;
  left: 244px;
}

#container2 .info-icon3{
  position: absolute;
  top: 263px;
  left: 270px;
}

#container2 .info-icon4{
  position: absolute;
  top: 140px;
  left: 230px;
}
/*.popover {
  position: absolute;
  z-index: 1010;
  opacity: 0;
  display: none;
  width: 330px;
  height: 552px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #00F;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}*/
.popover {
	position: absolute;
	z-index: 10;
	opacity: 0;
	display: none;
	width: 330px;
	max-width: none;
	height: 552px;
	padding: 1px;
	margin-top: 10px;
	right: -10px;
	text-align: left;
	white-space: normal;
	background-color: #ffffff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	z-index:100;
	/*  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
*/       
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border: 1px solid #BBBBBB;
}


#pop1{
  position: absolute;
  width: 403px;
  top: 283px;
  left: -85px;
}

#pop2{
  position: absolute;
  top: 125px;
  left: 468px;
}

#pop3{
  position: absolute;
  top: 224px;
  left: -22px;
}

#pop4{
  position: absolute;
  top: 80px;
  left: 412px;
}

#pop5{
  position: absolute;
  top: 30px;
  left: 115px;
}

#pop6{
  position: absolute;
  top: 284px;
  left: 670px;
}

#pop7{
  position: absolute;
  top: 306px;
  left: 127px;
}

#pop8{
  position: absolute;
  top: 166px;
  left: 422px;
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;}

.popover-content {
  padding: 9px 14px;}

/* BEGIN ADDITION OF SCROLLBARS */
.popover-content-scroll {
 padding: 9px 14px;
 overflow-y: scroll;
 max-height: 490px;
 width: 300px;}
/* END ADDITION OF SCROLLBARS */

.popover .arrow,
.popover .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover .arrow {
  border-width: 11px;
}

.popover .arrow:after {
  border-width: 10px;
  content: "";
}

.popover.top .arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
}

.popover.top .arrow:after {
  bottom: 1px;
  margin-left: -10px;
  border-top-color: #ffffff;
  border-bottom-width: 0;
}

.popover.right .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, 0.25);
  border-left-width: 0;
}

.popover.right .arrow:after {
  bottom: -10px;
  left: 1px;
  border-right-color: #ffffff;
  border-left-width: 0;
}

.popover.bottom .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-top-width: 0;
}

.popover.bottom .arrow:after {
  top: 1px;
  margin-left: -10px;
  border-bottom-color: #ffffff;
  border-top-width: 0;
}

.popover.left .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-left-color: #999;
  border-left-color: rgba(0, 0, 0, 0.25);
  border-right-width: 0;
}

.popover.left .arrow:after {
  right: 1px;
  bottom: -10px;
  border-left-color: #ffffff;
  border-right-width: 0;
}

.animated {
  -webkit-animation-duration: 0.6s;
     -moz-animation-duration: 0.6s;
       -o-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes cardInTop {
  0% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardInTop {
  0% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInTop {
  0% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInTop {
  0% {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100%
  {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInTop {
  -webkit-animation-name: cardInTop;
  -moz-animation-name: cardInTop;
  -o-animation-name: cardInTop;
  animation-name: cardInTop;
}

@-webkit-keyframes cardInBottom {
  0% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardInBottom {
  0% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInBottom {
  0% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInBottom {
  0% {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
  }
  100%
  {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInBottom {
  -webkit-animation-name: cardInBottom;
  -moz-animation-name: cardInBottom;
  -o-animation-name: cardInBottom;
  animation-name: cardInBottom;
}


@-webkit-keyframes cardInLeft {
  0% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
  }
  100% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}


@-moz-keyframes cardInLeft {
  0% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
  }
  100% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInLeft {
  0% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
  }
  100% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInLeft {
  0% {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0, 0);
  }
  100%
  {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInLeft {
  -webkit-animation-name: cardInLeft;
  -moz-animation-name: cardInLeft;
  -o-animation-name: cardInLeft;
  animation-name: cardInLeft;
}

@-webkit-keyframes cardInRight {
  0% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(90deg) scale(0, 0);
  }
  100% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardInRight {
  0% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(90deg) scale(0, 0);
  }
  100% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardInRight {
  0% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(90deg) scale(0, 0);
  }
  100% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardInRight {
  0% {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0, 0);
  }
  100%
  {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardInRight {
  -webkit-animation-name: cardInRight;
  -moz-animation-name: cardInRight;
  -o-animation-name: cardInRight;
  animation-name: cardInRight;
}


@-webkit-keyframes cardOutTop {
  0% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-moz-keyframes cardOutTop {
  0% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-o-keyframes cardOutTop {
  0% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@keyframes cardOutTop {
  0% {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

.cardOutTop {
  -webkit-animation-name: cardOutTop;
  -moz-animation-name: cardOutTop;
  -o-animation-name: cardOutTop;
  animation-name: cardOutTop;
}

@-webkit-keyframes cardOutBottom {
  0% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 50% 0% 0px;
      -webkit-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-moz-keyframes cardOutBottom {
  0% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 50% 0% 0px;
      -moz-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-o-keyframes cardOutBottom {
  0% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 50% 0% 0px;
      -o-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@keyframes cardOutBottom {
  0% {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 50% 0% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

.cardOutBottom {
  -webkit-animation-name: cardOutBottom;
  -moz-animation-name: cardOutBottom;
  -o-animation-name: cardOutBottom;
  animation-name: cardOutBottom;
}

@-webkit-keyframes cardOutLeft {
  0% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 100% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(90deg) scale(0, 0);
      opacity: 0;
  }
}

@-moz-keyframes cardOutLeft {
  0% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 100% 50% 0px;
      -moz-transform: perspective(500px) rotateY(90deg) scale(0, 0);
      opacity: 0;
  }
}

@-o-keyframes cardOutLeft {
  0% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 100% 50% 0px;
      -o-transform: perspective(500px) rotateY(90deg) scale(0, 0);
      opacity: 0;
  }
}

@keyframes cardOutLeft {
  0% {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 100% 50% 0px;
      transform: perspective(500px) rotateX(90deg) scale(0, 0);
      opacity: 0;
  }
}

.cardOutLeft {
  -webkit-animation-name: cardOutLeft;
  -moz-animation-name: cardOutLeft;
  -o-animation-name: cardOutLeft;
  animation-name: cardOutLeft;
}


@-webkit-keyframes cardOutRight {
  0% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 0% 50% 0px;
      -webkit-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
      opacity: 0;
  }
}

@-moz-keyframes cardOutRight {
  0% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 0% 50% 0px;
      -moz-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
      opacity: 0;
  }
}

@-o-keyframes cardOutRight {
  0% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 0% 50% 0px;
      -o-transform: perspective(500px) rotateY(-90deg) scale(0, 0);
      opacity: 0;
  }
}

@keyframes cardOutRight {
  0% {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 0% 50% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0, 0);
      opacity: 0;
  }
}

.cardOutRight {
  -webkit-animation-name: cardOutRight;
  -moz-animation-name: cardOutRight;
  -o-animation-name: cardOutRight;
  animation-name: cardOutRight;
}

/*SLIDER CSS*/

/* v1.0.5 */
/* Core RS CSS file. 95% of time you shouldn't change anything here. */
.royalSlider {
	width: 440px;
	height: 465px;
	position: relative;
	direction: ltr;
}
.royalSlider > * {
	float: left;
}

.rsWebkit3d .rsSlide {
	-webkit-transform: translateZ(0);
}


.rsWebkit3d .rsSlide,
.rsWebkit3d .rsContainer,
.rsWebkit3d .rsThumbs,
.rsWebkit3d .rsPreloader,
.rsWebkit3d img,
.rsWebkit3d .rsOverflow,
.rsWebkit3d .rsBtnCenterer,
.rsWebkit3d .rsAbsoluteEl,
.rsWebkit3d .rsABlock,
.rsWebkit3d .rsLink {
	-webkit-backface-visibility: hidden;
}
.rsFade.rsWebkit3d .rsSlide,
.rsFade.rsWebkit3d img,
.rsFade.rsWebkit3d .rsContainer {
    -webkit-transform: none;
}
.rsOverflow {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	float: left;
	-webkit-tap-highlight-color:rgba(255,255,255,255);
}
.rsVisibleNearbyWrap {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	left: 0;
	top: 0;
	-webkit-tap-highlight-color:rgba(255,255,255,255);
}
.rsVisibleNearbyWrap .rsOverflow {
	position: absolute;
	left: 0;
	top: 0;

}
.rsContainer {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-tap-highlight-color:rgba(255,255,255,255);
}

.rsArrow,
.rsThumbsArrow {
	cursor: pointer;
}

.rsThumb {
	float: left;
	position: relative;
}


.rsArrow,
.rsNav,
.rsThumbsArrow {
	opacity: 1;
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
}
.rsHidden {
	opacity: 0;
	visibility: hidden;
	-webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
	-moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
	-o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
	transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}


.rsGCaption {
	width: 100%;
	float: left;
	text-align: center;
}

/* Fullscreen options, very important ^^ */
.royalSlider.rsFullscreen {
	position: fixed !important;
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2147483647 !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
}

.royalSlider .rsSlide.rsFakePreloader {
	opacity: 1 !important;
	-webkit-transition: 0s;
	-moz-transition: 0s;
	-o-transition:  0s;
	transition:  0s;
	display: none;
}

.rsSlide {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	overflow: hidden;
	
	height: 100%;
	width: 100%;
}

.royalSlider.rsAutoHeight,
.rsAutoHeight .rsSlide {
	height: auto;
}

.rsContent {
	width: 100%;
	height: 100%;
	position: relative;
}

.rsPreloader {
	position:absolute;
	z-index: 0;	
}

.rsNav {
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	user-select: none;
}
.rsNavItem {
	-webkit-tap-highlight-color:rgba(0,0,0,0.25);
}

.rsThumbs {
	cursor: pointer;
	position: relative;
	overflow: hidden;
	float: left;
	z-index: 22;
}
.rsTabs {
	float: left;
	background: none !important;
}
.rsTabs,
.rsThumbs {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}


.rsVideoContainer {
	/*left: 0;
	top: 0;
	position: absolute;*/
	/*width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	float: left;*/
	width: auto;
	height: auto;
	line-height: 0;
	position: relative;
}
.rsVideoFrameHolder {
	position: absolute;
	left: 0;
	top: 0;
	background: #141414;
	opacity: 0;
	-webkit-transition: .3s;
}
.rsVideoFrameHolder.rsVideoActive {
	opacity: 1;
}
.rsVideoContainer iframe,
.rsVideoContainer video,
.rsVideoContainer embed,
.rsVideoContainer .rsVideoObj {
	position: absolute;
	z-index: 50;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
/* ios controls over video bug, shifting video */
.rsVideoContainer.rsIOSVideo iframe,
.rsVideoContainer.rsIOSVideo video,
.rsVideoContainer.rsIOSVideo embed {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 44px;
}

.rsABlock {
	left: 0;
	top: 0;
	position: absolute;
	z-index: 15;
	
}

img.rsImg {
	max-width: none;
}

.grab-cursor {
	cursor:url(../../../suspension/navigator/includes/grab.png) 8 8, move; 
}

.grabbing-cursor{ 
	cursor:url(../../../suspension/navigator/includes/grabbing.png) 8 8, move;
}

.rsNoDrag {
	cursor: auto;
}

.rsLink {
	left:0;
	top:0;
	position:absolute;
	width:100%;
	height:100%;
	display:block;	
	z-index: 20;
	background: url(../../../suspension/navigator/includes/blank.gif);
}

/* RS DEFAULTS*/

/* Background */
.rsDefault,
.rsDefault .rsOverflow,
.rsDefault .rsSlide,
.rsDefault .rsVideoFrameHolder,
.rsDefault .rsThumbs {
	background: #151515;
	color: #FFF;
}

/***************
*
*  4. Tabs
*
****************/

.rsDefault .rsTabs {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align:center;
	overflow: hidden; padding-top: 12px; position: relative;
}
.rsDefault .rsTab {
	display: inline-block;
	cursor: pointer;
	text-align: center;
	height: auto;
	width: auto;
	color: #333;
	padding: 5px 13px 6px;
	min-width: 72px;
	border: 1px solid #D9D9DD;
	border-right: 1px solid #f5f5f5;
	text-decoration: none;

	background-color: #FFF;
	background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); 
	background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
	background-image:         linear-gradient(to bottom, #fefefe, #f4f4f4);

	-webkit-box-shadow: inset 1px 0 0 #fff;
	box-shadow: inset 1px 0 0 #fff;

	*display:inline; 
	*zoom:1;
}
.rsDefault .rsTab:first-child {
	-webkit-border-top-left-radius: 4px;
	border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.rsDefault .rsTab:last-child { 
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;

	border-right:  1px solid #cfcfcf;
}
.rsDefault .rsTab:active { 
	border: 1px solid #D9D9DD;   
	background-color: #f4f4f4;
	box-shadow:  0 1px 4px rgba(0, 0, 0, 0.2) inset;
}
.rsDefault .rsTab.rsNavSelected { 
	color: #FFF;
	border: 1px solid #999;
	text-shadow: 1px 1px #838383;
	box-shadow: 0 1px 9px rgba(102, 102, 102, 0.65) inset;
	background: #ACACAC;
	background-image: -webkit-linear-gradient(top, #ACACAC, #BBB);
	background-image: -moz-llinear-gradient(top, #ACACAC, #BBB);
	background-image: linear-gradient(to bottom, #ACACAC, #BBB);
}

