/* FONTS */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('fonts/SourceSans/SourceSansPro-Regular.eot');
  src: url('fonts/SourceSans/SourceSansPro-Regular.woff2') format('woff2'),
       url('fonts/SourceSans/SourceSansPro-Regular.woff') format('woff'),
       url('fonts/SourceSans/SourceSansPro-Regular.ttf') format('truetype'),
       url('fonts/SourceSans/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('fonts/SourceSans/SourceSansPro-Bold.eot');
  src: url('fonts/SourceSans/SourceSansPro-Bold.woff2') format('woff2'),
       url('fonts/SourceSans/SourceSansPro-Bold.woff') format('woff'),
       url('fonts/SourceSans/SourceSansPro-Bold.ttf') format('truetype'),
       url('fonts/SourceSans/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
}

.show-mobile {
	display:none !important;
}

html, body {height:100%; background: #ffffff; font-family: 'Source Sans Pro', 'Microsoft JhengHei', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, Tahoma, sans-serif;}

html {overflow: hidden; margin: 0;}	
body { position: relative;  overflow: hidden; margin: 0; padding: 0;  -webkit-perspective: 500;-moz-perspective: 500; perspective: 500; }
			
animate { -webkit-transition: all .3s;-moz-transition: all .3s;transition: all .3s;}
#hit { padding: 10px; }
#log {position: absolute;padding: 10px;}

/* -- Main containers and wrappers --*/
#vrWrapper, #preloaderBckgMain {  width: 100vw; 
    height: 56.25vw;
    max-height: 100vh;
    max-width: 177.78vh; 
    margin: auto;
    position: absolute;
    top:0;bottom:0; 
    left:0;right:0;  }

#vrWrapper {
	margin-top:0px;
}

#product .imgSeq img.alt1,#product .imgSeq img.alt2 {display: none;}


/* FIX iframe problem in IE9 */	
.lt-ie9	#vrWrapper { width:inherit !important; height:inherit !important; }
	
#vrContainer { }

#vrContainer {
	display:flex;
	flex-wrap:wrap;
}
#vrContainer #product {
	flex:0 0 50%;
	max-width:50%;
	z-index:10;
}
#vrContainer .bottom-row .options-right,
#vrContainer .bottom-row .options-left {
	display:none;
}
#vrContainer .options-right,
#vrContainer .options-left {
	font-size:13px !important;
	line-height:17px !important;
	color:#666666;
	font-family:'gothamlight';
	display:flex;
	flex-direction:column;
	justify-content:center;
	z-index:20;		
}
#vrContainer .options-right {
	flex:0 0 25%;
	max-width:25%;
	position:relative;
	left:-3%;	
}
#vrContainer .options-left {
	flex:0 0 25%;
	max-width:25%;
	position:relative;
	right:-8%;	
}
#vrContainer .bottom-row {
	display:flex;
	flex-wrap:wrap;
	flex:0 0 100%;
	max-width:100%;	
}
#vrContainer .rotate-label {
	flex:0 0 100%;
	max-width:100%;	
	display:block;
	text-align:center;
	margin:-50px 0 0 0;
	position:relative;
	z-index:25;
}
#vrContainer .rotate-label > span {
	display:inline-block;
	text-indent:-9000px;
	background:url('/fileadmin/templates/img/svg/rotation-360.svg') no-repeat center center transparent;
	background-size:100% auto;
	width:100%;
	max-width:70px;
	min-height:40px;
}
#vrContainer .options-right > div,
#vrContainer .options-left > div {
	position:static;
}

#product, #preloaderBckgWrapper  { position:relative;  width:50%; }
#product { width:50%; margin-left: 0; }
#product .imgSeq { }
#product .imgSeq img, #preloaderBckgWrapper img {max-height: 100vh; max-width: 100vw; width:100%; height:100%; display:block;  }

#noJS  { text-align:center; padding: 2em 1em 0 1em;}
#noJS .warningMsg { }
#noJS .warningMsg img { padding-bottom:1em; }
#noJS .warningMsg p{ line-height:normal; margin:0; padding:0;   }
#noJS .warningMsg p.expl { font-size:90%; color:#919191;  }
#noJS .productDisplay { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
#noJS .productDisplay img  {max-height: 100vh; max-width: 90vw;   }



/* -- HOTSPOTS --*/

/*.video-direct, .mo{ position:absolute; cursor:pointer; display:block; 
background: #F00000;
width: 24px;
height: 24px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(jslibs/PIE2b1/PIE.htc); 
padding: 0 !important;
margin-left: -12px;
margin-top: -12px; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;	
}*/

.video-direct, .mo{ position:absolute; cursor:pointer; display:block; 
background: #F00000;
	color: white;
padding: 2px 5px 0 5px;
height: 24px;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(jslibs/PIE2b1/PIE.htc); /* IE 8 */
padding: 0 !important;
margin-left: -12px;
margin-top: -12px; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
/* IE 5-7 */
filter: alpha(opacity=70);

/* Netscape */
-moz-opacity: 0.7;

/* Safari 1.x */
-khtml-opacity: 0.7;

/* Good browsers */
opacity: 0.7;
	
}

.hsTitle { display: block; color: white; padding: 3px 5px 0 5px; font-size: 13px; min-width: 14px; }
.aLeft {text-align: left;}
.bold { font-weight: bold;}




/* Easy Modal Windows */
.disableModal { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; top: 0; left: 0; }
.remodal, .remodal-swiper, .remodal-animated { width: 100%; left: 0; top: 0; box-shadow: 1px 1px 3px rgba(0,0,0,0.35); background-color: white; }
.remodal-inner { height: 100vh; }
.remodal header { padding-left: 20px; }
.remodal h2, .remodal-animated h2 { text-transform:uppercase; font-family: 'Source Sans Pro'; }
.remodal .txtOnly, .remodal-animated .txtOnly { padding: 40px; overflow: auto; text-align:left; width: 100%; }
.remodal .txtImg, .remodal-animated .txtImg { padding: 0 40px 20px 40px; overflow: auto; text-align:left; width: 100%; }
.remodal p, .remodal-animated p { font-size: 1em; line-height: 1.3em; font-weight: normal; margin: 0.7em 0; }
.remodal ul, .remodal-animated ul { padding-left: 1em; }
.remodal ul li, .remodal-animated ul li { padding-bottom: 1em; }
.remodal .spc, .remodal-animated .spc { padding-left: 45px; padding-right: 45px;}

.remodal-close, .remodal-close-swiper { position: absolute; top: 10px; z-index: 999999; color: #CCCCCC; right: 10px; padding: 0; margin: 0; line-height: 0.8em; font-size: 2em; border: none; background-color: transparent; cursor: pointer; }
.remodal-close:hover, .remodal-close-swiper:hover { color: #F00000 }
.remodal-open { border: none; cursor: pointer; }

/** -- Swiper styles - experimental -- */
.swiper-container {width: 100%;height: 100%;}
.swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
	
.lt-ie10 .swiperImgWrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }



.swiperX, .spcX { padding-top: 55px; }
.swImgWrapper img {  width:100%; height:100%;  max-height: 100vh; max-width:100vw; vertical-align:top; }

.imgTxtHalf img { float:left; display:block; width:50%; height:100%;  max-height: 100vh; max-width:100vw; vertical-align:top;  }
.imgTxtHalf .imgDesc { display:inline-block; width:50%; height:100%;  max-height: 100vh; max-width:100vw; vertical-align:top; text-align:left; }
.stdText { display:block; padding-left:45px; padding-right:45px; }
.innerTxt h2, .txtOnly h2 { margin-top:0; margin-bottom:0.6em; font-weight:bold; font-size:26px;  }
.innerTxt h3, .txtOnly h3 { margin-bottom:0; padding-bottom:2px; font-size:18px; font-weight:bold; }
.innerTxt h3 + p, .txtOnly h3 + p, .innerTxt h2 + p, .txtOnly h2 + p { margin-top:0; padding-top:0;   }
.innerTxt h2 + h3, .txtOnly h2 + h3 { padding-top:0; margin-top:0;   }
.innerTxt h3 + ul, .innerTxt h2 + ul, .txtOnly h3 + ul, .txtOnly h2 + ul { padding-top:0; margin-top:0.4em;   }
.innerTxt p + ul, .txtOnly p + ul { padding-top:0; margin-top:0.2em;   }
.innerTxt ul, .txtOnly ul { font-size:18px; margin-left:2px; }
ul.li-adjust li span { position: relative; left: -5px; }
ul.li-adjust.highlights li span { display: block; padding-bottom: .2em;}
.innerTxt p, .innerTxt ul li, .txtOnly p, .txtOnly ul li { font-size:17px; }
.innerTxt ul li, .txtOnly ul li { padding-bottom:0.5em; }
.imgTxtHalf.single { padding-top:55px; padding-bottom:55px;  }

.swCols {width: 100%; }
.cols-1 .col {text-align: left; display: block; vertical-align: top; }
.cols-1 .col.adjWidth { width: 98%; }
.cols-2 .col { width:49.7%; text-align: left; display: inline-block; vertical-align: top; }
.cols-2 .col .txtL { padding-right: 25px;  }
.cols-2 .col .txtR { padding-left: 25px;  }
.cols-1 .col img, .cols-2 .col img { width: 100%; display: block;}
.cols-2.reFloat .col {float: right;}
.cols-2.reFloat .col .innerTxt {padding-left: 20px; padding-right: 45px;}
.cols-2.reFloat .col.imgFloat { float:left; display:block; height:100%;  max-height: 100vh; max-width:100vw; vertical-align:top;}
.cols-2.reFloat .col.imgFloat img {float: left; padding-top: 20px;}

.section-padding-top--small {padding-top: 20px;}
.section-padding-top--medium {padding-top: 20px; }

.swiper-pagination { position:relative !important; padding-bottom:15px; padding-top:25px;}
.break { height: 1px; font-size: 1px; clear: both; overflow: hidden; visibility: hidden; }

/*Debug and developemnt info panel*/
#devPanel { position: absolute; top: 2%; right: 2%; }

/* -- Language switcher panel -- */
#langPanel { position: absolute; left: 5%; top: 5%; }

/* -- Navigation pane for desktops -- */
#navigation { position: absolute; bottom: 1%; right: 5%; }
#navigation .nButton { width: 70px; height: 90px; display: inline-block; }
#navigation .nButton img { width: 100%; height: 100%; border:none; cursor:pointer; }

/* -- Product options picker pane for desktops -- */
.optPanel.optPanelA{ position: absolute; top: 30%; left: 55%; }
.optPanel.optPanelB{ position: absolute; top: 50%; left: 55%; }

.optText {font-size:22px; padding-bottom:16px;}

.optPanel .optBut { cursor:pointer; display:inline-block; 
color: white;

height: 40px;
min-width: 40px;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 8px 0 8px;
/*margin-left: -12px;
margin-top: -12px; */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
/* IE 5-7 */
filter: alpha(opacity=70);
/* Netscape */
-moz-opacity: 0.7;
/* Safari 1.x */
-khtml-opacity: 0.7;
/* Good browsers */
opacity: 0.7;
border: 4px solid rgba(0, 0, 0, 0);
   	
}

.optPanelA .optBut.sel, .optPanelB .optBut.sel {border: 4px solid grey;}

.optPanelA .optBut.in-grey {background: rgba(171,170,166,1.00);}
.optPanelA .optBut.in-red  {background: rgba(218,60,61,1.00);}
.optPanelA .optBut.in-azure  {background: rgba(33,158,178,1.00);}
.optPanelA .optBut.in-blue  {background: rgba(89,90,102,1.00);}
.optPanelA .optBut.in-black {background: rgba(66,66,66,1.00);}


.optPanelB .optBut.out-grey_light  {background: rgba(214,215,210,1.00);}
.optPanelB .optBut.out-black_anthracite  {background: rgba(105,105,105,1.00);}
.optPanelB .optBut.out-blue_stratus  {background: rgba(84,110,133,1.00);}
.optPanelB .optBut.out-white_icy  {background: rgba(246,246,246,1.00);}
.optPanelB .optBut.out-black_volcanic  {background: rgba(51,51,51,1.00);}


.optA, .optB {position: absolute; top:0; left: 0;}
.optA {z-index: 10;}


@media screen and (max-width: 1200px) {
.optPanel.optPanelA { position: absolute; top: 30%; left: 55%; }
.optPanel.optPanelB { position: absolute; top: 50%; left: 55%; }

.optText {font-size:13px; padding-bottom:12px;}
	
.optPanelA .optBut.sel, .optPanelB .optBut.sel {border: 2px solid grey;}
.optPanel .optBut { 
height: 25px;
min-width: 25px;
margin: 0 5px 0 5px;
border: 2px solid rgba(0, 0, 0, 0);
}
	
}


@media screen and (max-width: 640px) {
#vrWrapper {height: auto;}
#product, #preloaderBckgWrapper {width:100%;}
	
#options { text-align: center;}	

.optPanel.optPanelA { position: relative; top: auto; left: auto; padding-bottom: 2em;  }
.optPanel.optPanelB { position: relative; top: auto; left: auto; }
.optText {font-size:14px; padding-bottom:12px;}
.optPanel .optBut { 
height: 25px;
min-width: 25px;
margin: 0 2px 0 2px;
}

	
}



.hsTitle { display: block; color: white; padding: 3px 5px 0 5px; font-size: 13px; min-width: 14px; } }

/* Video */
video { width: 100% !important; height: auto !important; max-height:100vh; }

p.videoSubheader { position: absolute; left: 0.6em;bottom: 1.6em; font-size: 24px; font-weight: bold; color: #edeef0;z-index: 4; }
.icon-video-play:before {/* content:url("img/video-play-button-red.png");*/ background-image: url('img/video-play-button-red.png');
    background-size: 125px 87px;
    display: inline-block;
    width: 125px; 
    height: 87px;
    content:""; }
.icon-video-play {z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -3.5em 0 0 -3.5em;
}

.videoWrapper { position: relative; }
.videoWrapper.adjust-bottom { margin-bottom: -4px;}
.videoWrapper.videoBckg { background: white; } /* background video color */

/* responsive video */
.ifrVideowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.ifrVideowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  max-height: 100vh; }

#prbar {
   background-color: red;
   display:inline-block;
   /* width: 40%; Adjust with JavaScript */
   height: 20px;
   /*border-radius: 10px;*/
}


@media screen and (max-width: 1200px) {
#navigation .nButton { width: 30px; height: 30px; }
.mo, .video-direct { height: 16px !important; margin-left: -8px; margin-top: -8px; }
.hsTitle  { font-size: 11px; padding: 0 5px 0 5px;  }
}


@media screen and (max-width: 960px) {
#navigation .nButton { width: 30px; height: 30px; }
.mo, .video-direct { width: 16px !important; height: 16px !important; margin-left: -8px; margin-top: -8px; }
.hsTitle  { display: none; }
}
.videoWrapper1609x { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
/*EXPERIMENTAL*/
.videoWrapper iframe, .videoWrapper1608 iframe, .videoWrapper1610 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*.videoWrapper1608 video, .videoWrapper1609 video, .videoWrapper1610 video{ min-width:100%;  }*/
			  
.videocontrol { position: absolute; z-index: 1001; width: 15%; top: 35%; left: 44%; opacity: 0.8; display: none; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; -ms-transition: opacity .3s; transition: opacity .3s; }
.videocontrol img { width: 100%; }
#videocontrol.show { opacity: .9; }
.videocontrol a { display: block; background: none; border: none; -webkit-appearance: none; }

@media only screen and (max-width: 960px) {
  .remodal .spc .imgWrapper img, .remodal-animated .spc .imgWrapper img { width: auto; height:auto; max-height:95vh; max-width:90%; padding: 20px 20px 20px 0; }
  
  .remodal .spc .imgContentWrapper, .remodal-animated .spc .imgContentWrapper { display: inline-block; vertical-align: top; width:auto; max-width:90%; }
  .swiperX { }
  .imgTxtHalf img { width:100%; float:left;  }
  .imgTxtHalf .imgDesc {  width:100%; padding-top:20px;  }
	
	.cols-2 .col .txtL { padding-right: 0;  }
.cols-2 .col .txtR { padding-left: 0;  }
  	.cols-2 .col { width: inherit;  }
	.cols-2.reFloat .col {float: left;}
	.cols-2.reFloat .col.imgFloat { float:left:;}
   .swiper-pagination { padding-top:20px;}
	
	p.videoSubheader { position: absolute; left: 0.6em;bottom: 1.6em; font-size: 18px; font-weight: bold; color: #edeef0;z-index: 4; }
	.icon-video-play:before {/* content:url("img/video-play-button-red.png");*/ background-image: url('img/video-play-button-red.png');
    background-size: 65px 45px;
    display: inline-block;
    width: 65px; 
    height: 45px;
    content:""; }
.icon-video-play {z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.3em 0 0 -2em;
}
}
}


@media only screen and (max-width: 480px) {
  .remodal .spc .imgWrapper img, .remodal-animated .spc .imgWrapper img { max-height:50vh; max-width:90%; padding: 20px 20px 20px 0; }
  
  .remodal .spc .imgContentWrapper, .remodal-animated .spc .imgContentWrapper { max-width:90%; }
  
  .mo, .video-direct { width: 12px !important; height: 12px !important; margin-left: -6px; margin-top: -6px; }
  
}

/*@media only screen and (max-height: 480px) {
  .remodal .spc .imgWrapper img, .remodal-animated .spc .imgWrapper img { max-height:50vh; max-width:90%; padding: 20px 20px 20px 0; }
  
  .remodal .spc .imgContentWrapper, .remodal-animated .spc .imgContentWrapper { max-width:100%; }
  
  .mo, .video-direct { width: 18px !important; height: 18px !important; margin-left: -9px; margin-top: -9px; }
  #navigation .nButton { width: 30px; height: 30px; }
  
}*/


/*
 *  HTML 5 preloader
 *  Under MIT License
 */
 
 
#html5Loader{
	top:0;
	left:0;
	background-color:black;
	background-color:rgba(0,0,0);
	position:fixed;
	z-index:99;
	
	/* Opacity compatibility settings for all browsers */
	
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  
	/* IE 5-7 */
	filter: alpha(opacity=75);
  
	/* Netscape */
	-moz-opacity: 0.75;
  
	/* Safari 1.x */
	-khtml-opacity: 0.75;
  
	/* Good browsers */
	opacity: 0.75;
}


#html5Loader .fallback {

	vertical-align: middle;
	display: block;
	font-style: normal;
}



#html5Loader #progressbar {
	top:45%;
	left:35%;
	position:absolute;
	width:30%; 
}

#html5Loader #bar {
	background-color: red;
   display:inline-block;
   /* width: 40%; Adjust with JavaScript */
   height: 20px;
   /*border-radius: 10px;*/
}
 
#html5Loader #loadertext{
	top:50%;
	left:0%;
	position:absolute;
	text-align:center;
	width:100%;
	color:white;
	vertical-align: middle;
	display: block;
	font-style: normal;
	font-size:24px;
	
}



/* CSS styles for inhouse preloader */


/*#preloader {
-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}*/

#preloader{
	top:0;
	left:0;
	background-color:black;
	background-color:rgba(0,0,0);
	position:fixed;
	z-index:99;
	width:100%;
	height:100%;
	
	/* Opacity compatibility settings for all browsers */
	
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  
	/* IE 5-7 */
	filter: alpha(opacity=75);
  
	/* Netscape */
	-moz-opacity: 0.75;
  
	/* Safari 1.x */
	-khtml-opacity: 0.75;
  
	/* Good browsers */
	opacity: 0.75;

}



#progressbarx {
	top:40%;
	left:30%;
	position:absolute;

  background-color: black;
  /*border-radius: 13px;  (height of inner div) / 2 + padding */
  padding: 3px;
}




/*
 *  Remodal - v1.0.0
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */

/* Hide scroll bar */

html.remodal-is-locked {
  overflow: hidden;
}

/* Anti FOUC */

.remodal,
[data-remodal-id] {
  display: none;
}

/* Necessary styles of the overlay */

.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;

  display: none;
}

/* Necessary styles of the wrapper */

.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  overflow: auto;

  text-align: center;

  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;

  height: 100%;
  margin-left: -0.05em;

  content: "";
}

/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
  position: relative;

  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
}




/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */

/* Default theme styles for the background */

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  filter: blur(3px);
}

/* Default theme styles of the overlay */

.remodal-overlay {
  background: #2B2E38;
  
  /* Opacity compatibility settings for all browsers */
	
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  
	/* IE 5-7 */
	filter: alpha(opacity=90);
  
	/* Netscape */
	-moz-opacity: 0.90;
  
	/* Safari 1.x */
	-khtml-opacity: 0.90;
  
	/* Good browsers */
	opacity: 0.90;
  
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
  animation: remodal-overlay-opening-keyframes 0.3s;
}

.remodal-overlay.remodal-is-closing {
  animation: remodal-overlay-closing-keyframes 0.3s;
}

/* Default theme styles of the wrapper */

.remodal-wrapper {
 /* padding: 10px 10px 0;*/ /*Original backup*/
}

/* Default theme styles of the modal dialog */

.remodal {
  box-sizing: border-box;
  /*margin-bottom: 10px;*/ /*Original backup*/
  /*padding: 35px;*/  /*Original backup*/
  width:960px;
  max-width:100%;
  transform: translate3d(0, 0, 0);

  color: #2b2e38;
  /*background: #fff;
  background: #f2f1ec;*/
}

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
  animation: remodal-opening-keyframes 0.3s;
}

.remodal.remodal-is-closing {
  animation: remodal-closing-keyframes 0.3s;
}

/* Vertical align of the modal dialog */

.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}

/* Close button */

.remodal-close {
  position: absolute;
  top: 0;
  right: 0;

  display: block;
  overflow: visible;

  width: 50px;
  height: 50px;
   margin: 8px 3px 0 0;
  padding: 0;

  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;

  color: #95979c;
  border: 0;
  outline: 0;
  background: transparent;
  z-index:999999;	/*NEW*/
}

.remodal-close:hover {
  color: #FF0004;
}

.remodal-close:before {
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 42px;
  line-height: 50px;

  position: absolute;
  top: 0;
  left: 0;

  display: block;

  width: 50px;

  content: "\00d7";
  text-align: center;
}

/* Dialog buttons */

.remodal-confirm,
.remodal-cancel {
  font: inherit;

  display: inline-block;
  overflow: visible;

  min-width: 110px;
  margin: 0;
  padding: 12px 0;

  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;

  border: 0;
  outline: 0;
}

.remodal-confirm {
  color: #fff;
  background: #81c784;
}

.remodal-confirm:hover {
  background: #66bb6a;
}

.remodal-cancel {
  color: #fff;
  background: #e57373;
}

.remodal-cancel:hover {
  background: #ef5350;
}

/* Remove inner padding and border in Firefox 4+ for the button tag. */

.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner {
  padding: 0;

  border: 0;
}

/* Keyframes
   ========================================================================== */

@keyframes remodal-opening-keyframes {
  from {
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    transform: none;

    opacity: 1;
  }
}

@keyframes remodal-closing-keyframes {
  from {
    transform: scale(1);

    opacity: 1;
  }
  to {
    transform: scale(0.95);

    opacity: 0;
  }
}

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;t-ie
  }
  to {
    opacity: 0;
  }
}

/* Media queries
   ========================================================================== */

@media only screen and (max-width: 960px) {
 .remodal {width: 97%; height:95%; box-shadow:none; }
  .remodal, .remodal-wrapper:after {vertical-align: top;}
  .remodal-overlay { background:#FFF;}

}

/* IE8
   ========================================================================== */

.lt-ie9 .remodal-overlay, .lt-ie8 .remodal-overlay {
  /*background: #2b2e38;*/
}

.lt-ie9 .remodal, .lt-ie8 .remodal {
  /*width: 700px;*/
}

@media only screen and (max-width: 1650px) {
	#vrContainer .options-left {	
	right:-4%;	
	}
}

@media only screen and (max-width: 900px) {
	#vrContainer {
		justify-content:center;				
	}
	#vrContainer .options-left,
	#vrContainer .options-right {
		display:none;
	}
	#vrContainer .bottom-row {
		position:relative;
		z-index:20;
		top:-50px;
	}
	#vrContainer .bottom-row .options-left {
		position:static;
		flex:0 0 auto;
		max-width:auto;
		margin-left:auto;
		display:block;
	}
	#vrContainer .bottom-row .options-right {
		position:static;
		flex:0 0 auto;
		max-width:auto;
		margin-right:auto;
		display:block;
	}
	#vrContainer .bottom-row .rotate-label {
		flex:0 0 200px;
		max-width:200px;
		margin-top:0px;
	}	
}

@media only screen and (max-width: 850px) {
	#vrWrapper, #preloaderBckgMain {
		height:auto;
	}
	#vrContainer #product {
		flex:0 0 55%;
		max-width:55%;
	} 
	#vrContainer .bottom-row .options-left {
		flex:0 0 calc( 50% - 100px );
		max-width:calc( 50% - 100px );
		display:flex;
		vertical-align:top;
	}
	#vrContainer .bottom-row .options-left >div {
		margin-left:auto;
		padding:0px !important;
	}
	#vrContainer .bottom-row .options-left > div,
	#vrContainer .bottom-row .options-right > div {
		display:inline-block;
		vertical-align:top;
	}
	#vrContainer .bottom-row .options-right {
		display:flex;
		flex:0 0 calc( 50% - 100px );
		max-width:calc( 50% - 100px );		
	}
	#vrContainer .bottom-row .options-right > div {
		margin-right:auto;
		padding:0px !important;
	}
}

@media only screen and (max-width: 768px) { 
	#vrWrapper, #preloaderBckgMain {
		margin-bottom:0px;
		margin-top:0px;
	}
	#vrContainer #product {
		flex:0 0 65%;
		max-width:65%;
	}
}

@media only screen and (max-width: 600px) { 	
	#vrContainer #product {
		flex:0 0 70%;
		max-width:70%;		
	}							
}

@media only screen and (max-width: 570px) {
	#vrContainer #product {
		flex:0 0 80%;
		max-width:80%;		
	}	 	
	#vrContainer .bottom-row .rotate-label {
    	flex: 0 0 120px;
    	max-width: 120px;
    	margin-top: 0px;
	}
	#vrContainer .bottom-row .options-right,
	#vrContainer .bottom-row .options-left {
    	flex: 0 0 calc( 50% - 60px );
    	max-width: calc( 50% - 60px );
	}									
}

@media only screen and (max-width: 500px) {
	.hide-mobile {
		display:none !important;
	}
	.show-mobile {
		display:block !important;
	}
	#vrContainer .bottom-row {
		display:blockl
	}
	#vrContainer .bottom-row .options-right,
	#vrContainer .bottom-row .options-left,
	#vrContainer .bottom-row .rotate-label {
		flex:0 0 100%;
		max-width:100%;
		text-align:center;				
	}
	#vrContainer .bottom-row .options-right > div,
	#vrContainer .bottom-row .options-left > div {
		margin-left:auto;
		margin-right:auto;
		margin-bottom:15px;
	}
	#vrContainer .bottom-row .rotate-label {
		margin-bottom:15px;
	}			
}

@media only screen and (max-width: 400px) {
	#product .imgSeq::before {
		left:-15px !important;
	}
	#product .rotate-label {
		bottom:40px !important;
	}	
}



