::selection {
    color: #FFF;
}
::-moz-selection {
    color:#FFF;
}
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
}

html, body {
    min-height:100%;
    height:100%;
}

body { 
    margin:0; padding:0; 
}

.screen {
    width: 100%;
    height: 100%;
    background-color: #000;
} 

.slider-ex-in-panel {
    height:100vh !important;
}
.screen {
/*
    left:0% !important;
    top:0% !important;
    margin-left:0 !important;
    margin-top:0 !important;
*/
}
.screen img.reel {
    width:100%;
    height:100%;
}


.container .freez {
    width:100%;
    height:100%;
    position:absolute;
    z-index:99999;
    cursor:wait; 
    /*  background-color:#000;
    opacity:0.5;*/

}



#image-reel, .reel-panning, .reel-panning * {
    cursor: default !important;
}
.reel-preloader {
    display: none; 
}

div[id^="hotspot_"] {
/*
    background-image: url("../img/hotspot_animate_ex.png");
    background-position: center 0;
    cursor: pointer;
    height: 36px;
    width: 36px;
    visibility:hidden;
    z-index:9;
*/
}

div[id^="hotspot_"] a {
    display: block;
    width:100%;
    height:100%;
}

.navigation {
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-64px;
    background-image:url('../img/navbar.png');
    background-position: center top;
    width:128px;
    height:29px;
    padding-top:18px;
    z-index:999;
}
.navigation .btn-control {
    text-indent: -9999px;
    width:32px;
    height:29px;
    opacity:0.6;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.navigation #btn-next {
    background-image:url('../img/btn-left.png');
    float:left;
}

.navigation #btn-back {
    background-image:url('../img/btn-right.png');
    float:left;
}

.navigation #btn-zoomin {
    background-image:url('../img/btn-zoom-in.png');
    float:right;
}

.navigation #btn-zoomout {
    background-image:url('../img/btn-zoom-out.png');
    float:right;
}


.navigation #btn-next:hover,
.navigation #btn-back:hover,
.navigation #btn-zoomin:hover,
.navigation #btn-zoomout:hover {
    opacity:1;
}




/*
.grabbable {
    cursor: move;  fallback if grab cursor is unsupported 
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

  (Optional) Apply a "closed-hand" cursor during drag operation. 
.grabbable:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}*/


body {
    overflow:hidden;
}
.screen-zoom, .screen-reel {
    position:absolute;

    width:100%;
    height:100%;
}
.screen-zoom img.zoom {
    width:100%;
    height:100%;
    position: absolute;
      background-size: cover;
}  
 






.box-wait-load {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    z-index: 999999;
    position: absolute;
    cursor: wait;
    -moz-opacity: 0.00;
    -khtml-opacity: 0.00;
    opacity: 0.00;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity=0);
}
.progress {
    position: absolute;
    z-index: 9999999;
    top: 50%;
    left: 50%;
}
.progress .state {
    width: 0%;
    height: 100%;
    background-color: #000;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.progress .state span {
    font-family: verdana;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    width: 100%;
    float: left;
    color: #FFF;
} 







/*@font-face {
    font-family: 'AlteHaasGrotesk';
    src: url('font/AlteHaasGrotesk.eot');   
    src: url('font/AlteHaasGrotesk.eot?#iefix') format('embedded-opentype'), 
        url('font/AlteHaasGrotesk.woff') format('woff'),  
        url('font/AlteHaasGrotesk.ttf') format('truetype'),   
        url('font/AlteHaasGrotesk.svg#svgFontName') format('svg');   
    font-weight: normal;
    font-style: normal;
} 
*/
::selection
{
	color:#FFF;
}
::-moz-selection
{
   color:#FFF;
} 

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}

body {
    font-family: AlteHaasGrotesk;
    padding: 0;
    margin: 0;
	position:relative;
}
 
.reel-preloader {
    display: none; 
}
#screen {
	background-color:#000;   
	/*position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -270px;
    margin-left: -480px;
    background-color: #000;
    box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
    border: 2px solid #000;*/
}
#loading {
    position: absolute;
    z-index: 9999999999;
    width: 100%;
    height: 100%;   
	/*background-color:rgba(0, 0, 0, 0); */
 
	background-color:#000;
    -moz-opacity: 0.0;
    -khtml-opacity: 0.0;
    opacity: 0.0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);  
	
}
#frame-interior {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#container {
    position: relative;
    width: 100vw;
    height: 100vh;

    overflow: hidden;
}
div[id^="monitor"] {
}
div[id^="monitor"] img {
    display: block;
}
#monitor {
    width: 100vw;
    height: 100vh;

}
#monitor-two {
    width: 100vw;
    height: 100vh;

    left: 0;
}
#monitor-three {
    width: 100vw;
    height: 100vh;

    top: 100vh;
    left: 0;
}
#monitor-four {
    width: 100vw;
    height: 100vh;

    top: 150vh;
    left: 0;
}
#monitor #car-reel {
    width: 100vw;
    height: 100vh;

}
/* HOT SPOT */
div[id^="hotspot_"] {
    /*    background-color:#FFF;
    border:1px solid #000;*/
    background-image: url("images/hotspot.png");
    background-position: center center;
    cursor: pointer;
    height: 26px;
    width: 26px;
    visibility: hidden;
    background-size: 42px;

}
div[id^="hotspot_"] a {
    /*   background-color: #303030;
        border: 1px solid #000;*/
    display: block;
    height: 24px;
    opacity: 0.5;
    position: absolute;
    width: 25px;
}
/* BUTTON CONTROL */
.img-ctrl {
    position: absolute;
    /* cursor:pointer;*/
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 99999;
}
div[id^="ctrl-"] {
    cursor: pointer;
}
#ctrl-next button, #ctrl-back button {
    display: none;
}
#ctrl-next {
    background-image: url('images/next.png');
    background-size: cover;
    top: calc(50vh - 29px);
    right: 100px;
    width: 32px;
    height: 58px;
    background-position: 0px 0px; 
}
#ctrl-next:hover {
    background-position: 32px 0px;
}
#ctrl-back {
    background-image: url('images/back.png');
    background-size: cover;
    top: calc(50vh - 29px);
    left: 100px;
    width: 32px;
    height: 58px;
    background-position: 0px 0px;
}
#ctrl-back:hover {
    background-position: 32px 0px;
}
#ctrl-switch-exin {
    width: 195px;
    height: 40px;
    top: 0;
    right: -1px;
}
@media screen and (min-width: 768px) {
    #ctrl-switch-exin {
        width: 265px;
        height: 60px;
        top: 50px;
    }
}

#btn-switch, #btn-in, #btn-ex { 
    background-color: #FFF;
    -moz-opacity: 0.00;
    -khtml-opacity: 0.00;
    opacity: 0.00;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
    position: absolute;   
    height: 100%;
    width: 40%;
    left: 0;    
    top: 0;
}
#btn-switch { width: 20%; }
#btn-ex { left: 20%; }
#btn-in { left: 60%; }

.switch-close {
    /*background-image:url('images/btn_ex_in_close.png');*/
}
.switch-open {
    /*background-image:url('images/btn_ex_in_open.png');*/
}
div[id^="ctrl-cab-"] {
    width: 165px;
    height: 76px;
    cursor: pointer;
}
#ctrl-cab-extended {
    top: 135px;
    background-image: url('images/cab_extended.png');
    background-size: cover;
}
#ctrl-cab-single {
    top: 220px;
    background-image: url('images/cab_regular.png');
    background-size: cover;
}
#ctrl-cab-crew {
    top: 50px;
    background-image: url('images/cab_crew.png');
    background-size: cover;
}
.active-cap {
    /*left:0 !important;*/
	
	/*
    -moz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    opacity: 1 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=100) !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important;
    filter: alpha(opacity=100) !important; */
}
.show-cap {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    left: 0;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100); 
}
.hide-cap {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    left: -120px;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter: alpha(opacity=100); 

}
/* TEXT IMAGE*/
div[id^="text-"] {
    background-repeat: no-repeat;
    text-indent: -9999px;
}
#text-logo {
    background-image: url("images/text-logo.png");
    bottom: 51px;
    height: 58px;
    left: 30px;
    width: 215px;
}
#text-loading {
    /*    background-image: url("images/loading.gif");
            top: 50%;
            left: 50%;
            margin-top: -35px;
            margin-left: -90px;
            height: 70px;
            width: 179px;
            display:none;
            -moz-opacity: 0.6;
            -khtml-opacity: 0.6;
            opacity: 0.6;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=60);
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
            filter: alpha(opacity=60);*/
}
#text-detail {
    bottom: 30px;
    height: 14px;
    left: 30px;
    width: 220px;
} 
/* CREW */
.text-detail-crew-sd {
    background-image: url('images/text/textdetail@2x.png');
    background-position: 0 1px; 
    background-size: cover;
    opacity: 0.6;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(  src='images/text/textdetail@2x.png',  sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/text/textdetail@2x.png',  sizingMethod='scale')";
}
.text-detail-crew-ls {
    background-image: url('images/text/textdetail@2x.png');
    background-position: 0 -16px; 
    background-size: cover;
    opacity: 0.6;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(  src='images/text/textdetail@2x.png',  sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/text/textdetail@2x.png',  sizingMethod='scale')";
}
/* EXTEND */
.text-detail-extend {
    background-image: url('images/text/textdetail@2x.png'); 
    background-position: 0 -14px; 
    background-size: cover;
    opacity: 0.6; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(  src='images/text/textdetail@2x.png',  sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/text/textdetail@2x.png',  sizingMethod='scale')";
}
/* REGULAR */
.text-detail-regular {
    background-image: url('images/text/textdetail@2x.png'); 
    background-position: 0 0; 
    background-size: cover;
    opacity: 0.6;  
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(  src='images/text/textdetail@2x.png',  sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/text/textdetail@2x.png',  sizingMethod='scale')";
}

#text-menu {
    background-image: url("images/menu.png");
    height: 16px;
    right: 18px;
    top: 132px;
    width: 41px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(  src='images/menu.png',  sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/menu.png',  sizingMethod='scale')";
}
#text-color {
    background-image: url("images/color.png");
    height: 12px;
    left: 30px;
    bottom: 60px;
    width: 49px;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(  src='images/color.png',  sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/color.png',  sizingMethod='scale')";
}
@media screen and (min-width: 768px) {
    #text-color {
        left: unset;
        bottom: unset;
        top: 129px;
        right: 199px;    
    }
}
/*--START OF: HOTSPOT --*/
#text-hotspot { 
    bottom: 23px;
    height: 25px;
    right: 9px;
    width: 100px;
}
#btn-hotspot-on {
    height: 23px;
    margin-left: 34px;
    width: 25px;
}
#btn-hotspot-off {
    height: 23px;
    margin-left: 8px;
    width: 30px;
}
div[id^="btn-hotspot-"] {
    float: left;
    cursor: pointer;
}
.img-button-hotspot-on {
    background-image: url('images/hotspot_menu_on.png');
    background-size: cover;
}
.img-button-hotspot-off {
    background-image: url('images/hotspot_menu_off.png');
    background-size: cover;
}
/* START OF: GRADE */
#text-grade {
    height: 9.5px;
    right: 88px;
    top: 148px;
    width: 160px;
}
#btn-grade-starndard {
    height: 18px;
    margin-left: 50px;
    margin-top: -3px;
    width: 70px;
}
#btn-grade-ls {
    height: 18px;
    margin-left: 8px;
    margin-top: -3px;
    width: 24px;
} 
div[id^="btn-grade-"] {
    float: left;
    cursor: default; /*pointer*/
}
.img-button-grade-standard {
    background-image: url('images/text/grade_x-terrain.png');
    background-size: contain;
}
.img-button-grade-ls {
    background-image: url('images/text/grade_ls_u@2x.png');
    background-size: cover;
}
.img-button-grade-ls-only {
    background-image: url('images/grade_ls_only.png') !important;
    background-size: cover;
}
/* END OF: GRADE */

/* MENU COLOR */
#ctrl-color {
    left: 30px;
    bottom: 30px;
}
@media screen and (min-width: 768px) {
    #ctrl-color {
        left: unset;
        bottom: unset;
        right: 80px;
        top: 150px;
    }
}
#ctrl-color ul {
    margin: 0;
    padding: 0;
}
#ctrl-color ul li {
    float: left;
    width: 19px;
    height: 20px;
    list-style: none;
	
	/* DEBUG FOR IE7 COMPAT VIEW 
	border:1px solid #000;*/
	
}
#ctrl-color ul li a.active-color, #ctrl-color ul li a:hover {
    padding-top: 12.5 !important;
    margin: -1.5px;
    width: 15px !important;
    height: 15px !important;
    background-size: 15px 15px !important;
}
#ctrl-color ul li a:link, #ctrl-color ul li a:visited {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    display: inline-block;
    height: 21px;
    padding-left: 7px;
    padding-top: 4px;
    text-align: center;
    text-indent: -9999px;
    vertical-align: middle;
    width: 12px;
	
	/* DEBUG FOR IE7 COMPAT VIEW 
	border:1px solid #FF0;
	display:block;*/
}  
/* icon image */
.color-1{
    background-image: url("images/color/1_splash_white@2x.png");
}
.color-2{
    background-image: url("images/color/2_silky_white_pearl@2x.png");
}
.color-3{
    background-image: url("images/color/3_obsidian_gray_mica@2x.png");
}
.color-4{
    background-image: url("images/color/4_galena_gray_met@2x.png");
}
.color-5{
    background-image: url("images/color/5_red_spinel_mica@2x.png");
}
.color-6{
    background-image: url("images/color/6_supphire_blue_mica@2x.png");
}
.color-7{
    background-image: url("images/color/7_mercury_silver_met@2x.png");
}
.color-8{
    background-image: url("images/color/8_onyx_black_mica@2x.png");
}
.color-9{
    background-image: url("images/color/9_valencia_orange_met@2x.png");
}
/*end icon image */
#car-reel-reel, .reel-panning, .reel-panning * {
    cursor: default !important;
}
.bg-warehouse {
    background-image: url("images/wallpaper_black.png");
    background-size: cover;
}
.bg-concrete {
    background-image: url("images/wallpaper_white.png");
    background-size: cover;
}
#wallpaper {
    height: 90px;
    right: 15px;
    width: 185px;
    cursor: default;
    bottom: 0 ;
}
.show-wallpaper {
    bottom: 0 ;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.hide-wallpaper {
    bottom: -33px !important;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
#wallpaper #btn-wallpaper {
    cursor: pointer;
    display: block;
    height: 90px;
    margin-top: 22px;
    width: 100%;
}
#pano {
    width: 100vw;
    height: 100vh;

}
#frame {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

.text-grade-top {
    top:102px !important
}
.text-color-top {
    top: 82px !important;
}
.nav-color-top {
    top: 78px !important;
}
p#frame-no {
    color: #FFF;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: right;
    z-index: 999999;
}
.preload-background-image-css {
    display: none;
}


.screen-float-left {
    position:absolute;
}


.screen-interior {
    left:100vw;
    top:0;
    position: absolute;
}

.screen-exterior {
    position: absolute;
}


.jquery-ui-like {
    /* box-shadow: 0px 0px 0px 2px rgba(0,0,0, 0.8); */  
}


#car-reel-reel img {
    width:960px;
}

a, #img-button-switch {
    text-decoration: none;
    border: none;
    border: 0px;
}


.bg-warehouse {
    background-image: url("images/wallpaper_black.png");
}
.bg-concrete {
    background-image: url("images/wallpaper_white.png");
}



.fancybox-lock .fancybox-overlay {
    z-index:99999999
}
    
/* form inline index */
#text-logo {
    background-image: url("../img/text-logo.png");
    background-size: contain;
    top: 10px;
    left: 10px;
    width: 125px;
    height: 35px;
} 
@media screen and (min-width: 768px) {
    #text-logo {
        top: unset;
        left: 30px;
        bottom: 51px;
        width: 215px;
        height: 58px;
    }
}
/*fancybox*/
.fancybox-skin{
    background: transparent !important;
}