/*  ========================================================================
 *  Fonts
 *
 *  ======================================================================== */

@font-face {
  font-family: 'LG Smart Regular';
  src: url('fonts/LG_Smart_Regular.ttf');
}
@font-face {
  font-family: 'LG Smart Light';
  src: url('fonts/LG_Smart_Light.ttf');
}
@font-face {
  font-family: 'LG Smart Bold';
  src: url('fonts/LG_Smart_Bold.ttf');
}

/**
 * Global Reset of all HTML Elements
 *
 * Resetting all of our HTML Elements ensures a smoother
 * visual transition between browsers. If you don't believe me,
 * try temporarily commenting out this block of code, then go
 * and look at Mozilla versus Safari, both good browsers with
 * a good implementation of CSS. The thing is, all browser CSS
 * defaults are different and at the end of the day if visual
 * consistency is what we're shooting for, then we need to
 * make sure we're resetting all spacing elements.
 *
 */
*,
html {
  box-sizing: border-box;
}
html,
body {
  border: 0;
  font-family: "LG Smart Regular", "Helvetica-Neue", "Helvetica", Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video {
  border: 0;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cit,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
  display: block;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
table caption,
table th,
table td {
  text-align: left;
  vertical-align: middle;
}
a img {
  border: 0;
}
:focus {
  outline: 0;
}



/*  ========================================================================
 *  Frosty.js
 *  https://owensbla.github.com/frosty
 *  by Blake Owens (http://blakeowens.com/)
 *  ======================================================================== */
.tip {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
  color: #eeeeee;
  font-size: 11px;
  line-height: 16px;
  max-width: 200px;
  padding: 4px 8px;
}
.tip.success {
  background-color: #47fe42;
  background-color: rgba(71, 254, 66, 0.8);
  color: #025600;
}
.tip.error {
  background-color: #ff7f86;
  background-color: rgba(255, 127, 134, 0.8);
  color: #7f0006;
}
.tip.light {
  background-color: #ebebeb;
  background-color: rgba(235, 235, 235, 0.8);
  color: #222222;
}
.tip[class*="arrow"]:before {
  content: ' ';
  position: absolute;
  border: solid transparent;
  width: 0px;
  height: 0px;
  border-width: 5px;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.8);
}
.success[class*="arrow"]:before {
  border-color: #47fe42;
  border-color: rgba(71, 254, 66, 0.8);
}
.error[class*="arrow"]:before {
  border-color: #ff7f86;
  border-color: rgba(255, 127, 134, 0.8);
}
.light[class*="arrow"]:before {
  border-color: #ebebeb;
  border-color: rgba(235, 235, 235, 0.8);
}
.tip.arrow-right:before {
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin-top: -5px;
  top: 50%;
  left: 100%;
}
.tip.arrow-left:before {
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin-top: -5px;
  top: 50%;
  right: 100%;
}
.tip.arrow-top:before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-left: -5px;
  bottom: 100%;
  left: 50%;
}
.tip.arrow-bottom:before {
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-left: -5px;
  top: 100%;
  left: 50%;
}
.stage {
  width: 1336px;
  margin: 20px auto;
  position: relative;
  height: 792px;
  background: #FFFFFF;
}
/* ===================== RANGE CUSTOMISATION ============================== */
.stage.pik-lg-studio { background: url('../img/assets/lg_studio_background.jpg') #FFFFFF; }
.stage.pik-lg-bsss   { background: url('../img/assets/lg_bsss_background.jpg') #FFFFFF; }
.configurator .stage.pik-lg-studio { background: none; }
.configurator .stage.pik-lg-bsss   { background: none; }


/*  ========================================================================
 *  
 *  TOP NAVIGATION
 *  
 *  ======================================================================== */

.stage .top-menu {
    width: 100%;
    background-color: #666666;
    display: block;
    padding-left: 118px;
    height: 56px;
    line-height: 56px;
    z-index: 1290;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    color:#FFF;
    -webkit-transition: opacity .25s ease-out;
       -moz-transition: opacity .25s ease-out;
        -ms-transition: opacity .25s ease-out;
         -o-transition: opacity .25s ease-out;
            transition: opacity .25s ease-out;
}
.stage .top-menu .home-button {
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 99;
  display: block;
}
.stage .top-menu .sharing-options {
  float:right;
  margin-right:8px;
}

.stage .top-menu .sharing-options a {
    padding: 0 6px;
    display: inline-block;
}

.stage.pik-lg-bsss .top-menu .home-button{top:12px;}

.menu .top-menu {
  display:none;
  opacity:0;
}
.menu .home-button {
  display: none;
}
.top-menu a.breadcrumb-button,
.print-title {
  color:#FFF;
  text-decoration: none;
  padding:20px;
  font-family: "LG Smart Light";
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.9em;
    -webkit-transition: color .15s ease-out;
       -moz-transition: color .15s ease-out;
        -ms-transition: color .15s ease-out;
         -o-transition: color .15s ease-out;
            transition: color .15s ease-out;
}
  .print-title, .print-website {
    padding:0px 20px 20px 20px;
    float:left;
    display:inline-block;
    display:none;
  }

  .print-website {
    color:#fff;
    text-decoration:none;
    float:right;
  }

.top-menu a.breadcrumb-button:last-child { font-family: "LG Smart Bold"; }
.pik-lg-studio .top-menu a.breadcrumb-button:hover { color:#F38A00; } 
.pik-lg-bsss   .top-menu a.breadcrumb-button:hover { color:#CCC; } 
.top-menu a.breadcrumb-button span { font-size: 0.7em;
    font-family: "LG Smart Light";
    text-transform: initial; color:#FFF;} 
.stage.pik-lg-bsss .top-menu a.js-launch-style {display:none;}

/* ===================== RANGE CUSTOMISATION ============================== */
.stage.pik-lg-studio .top-menu { background-color:#000000; }
.stage.pik-lg-bsss   .top-menu { background-color:#333333; }

/*  ========================================================================
 *  
 *  LOADING SCREEN
 *  
 *  ======================================================================== */
.overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  display: none;
}
.overlay .overlay-message {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2em;
  text-align: center;
}
.overlay .overlay-loading {
  width:400px;
  height:15px;
  border:2px solid #FFFFFF;
}

.overlay .overlay-loading-bar {
  width:0;
  display:block;
  background-color:#990033;
  height:100%;
  -webkit-transition: width .25s ease;
     -moz-transition: width .25s ease;
      -ms-transition: width .25s ease;
       -o-transition: width .25s ease;
          transition: width .25s ease;
}
/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .overlay .overlay-loading-bar  { background-color: #F38A00; }
.pik-lg-bsss   .overlay .overlay-loading-bar  { background-color: #990033; }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */

/*  ========================================================================
 *  
 *  INITIAL MAIN MENU
 *  
 *  ======================================================================== */
.main-menu {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: table;

}


.pik-lg-studio .main-menu .menu-branding {
  position:absolute;
  background-color: #000;
  width: 1336px;
  text-align: center;
  height: 140px;
}
.pik-lg-bsss .main-menu .menu-branding {
  position: fixed;
  color: white;
  font-size: 35px;
  letter-spacing: 0.15em;
  display: block;
  font-family: "LG Smart Light";
  padding-top: 37px;
}

.pik-lg-studio .main-menu .menu-branding img {
  position:relative;
  top:55px;
}

.pik-lg-bsss .main-menu .menu-branding img {
  top: 15px;
  position: relative;
  margin: 0 100px 0 47px;
}
/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-bsss .main-menu  { background: rgba(0,0,0,0.5); }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */
.main-menu.studio-menu {
  background-image: url()
}
.main-menu .menu-choice {
    text-align: center;
    clear: both;
    margin: 0 auto;
    margin-top: 325px;
}
.main-menu .menu-choice a {
  display: table;
  text-decoration: none;
  float:left;
  color: #ffffff;
  height: 230px;
  width: 230px;
  color: #fff;
  border: 3px solid #FFF;
  font-size: 1.3em;
  margin: 0 20px;
  background-color: rgba(255,255,255,0.3);
  letter-spacing: 0.2em;
  font-size: 1.2em;
  -webkit-transition: border-color .1s ease-in-out, color .1s ease-in-out;
     -moz-transition: border-color .1s ease-in-out, color .1s ease-in-out;
      -ms-transition: border-color .1s ease-in-out, color .1s ease-in-out;
       -o-transition: border-color .1s ease-in-out, color .1s ease-in-out;
          transition: border-color .1s ease-in-out, color .1s ease-in-out;
}

.main-menu .menu-choice a:active { background-color:rgba(255,255,255,0.4); }

/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .main-menu .menu-choice a:hover, .pik-lg-studio .main-menu .menu-choice a.active {
    border-color: #F38A00;
    color       : #F38A00;
}
.pik-lg-bsss .main-menu .menu-choice a:hover, .pik-lg-bsss .main-menu .menu-choice a.active {
    border-color: #990033;
    color       : #990033;
}
/* --------------------- /RANGE CUSTOMISATION ------------------------- */

.main-menu .menu-choice a span {
  display:table-cell;
  vertical-align: middle;
}


.menu-choice a.menu-hinter, .menu-choice a.menu-brand {
    pointer-events: none;
    background:none;
    border:transparent;
    font-family: "LG Smart Light";
    font-size:1em;   
    position: absolute;
    top: 160px;
    width: 100%;
    margin-left: 0;
    left: 0;
}

.menu-choice a.menu-brand { top: 570px; }

/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .menu-choice a.menu-hinter,.pik-lg-studio .menu-choice a.menu-brand  { color: #F38A00; }
.pik-lg-bsss   .menu-choice a.menu-hinter,.pik-lg-bsss   .menu-choice a.menu-brand  { color: #FFFFFF; }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */

.main-menu .collection-choice,
.main-menu .style-choice,
.main-menu .room-choice,
.main-menu .config-done {
  display: none;
}

.main-menu.show-collection-choice .collection-choice { display:table; }
.main-menu.show-style-choice      .style-choice      { display:table; }
.main-menu.show-room-choice       .room-choice       { display:table; }

/*  ========================================================================
 *  
 *  CONFIGURATION MENU
 *  
 *  ======================================================================== */


.config-menu {
  position: relative;
  float: right;
  width: 200px;
  height: 736px;
  background: #999999;
  margin-top:56px;
  padding: 0 20px;
  overflow: hidden;

}
.config-menu div.hidden {display:none; opacity:0;}
.config-menu .printMenu {display:none; opacity:0;}
.config-menu .printMenu.printing {display:block; opacity:1;}

@media print{@page {size: landscape}}
@media print {
  .print-website, .print-title { display:inline-block; color:#000;}
  .config-menu div {display:none; opacity:0;}

  .js-launch-style ,.js-launch-room { display:none;}

  .config-menu .printMenu {display:block; opacity: 1;}
  .config-menu.config-menu-cameo .printMenu {display:none; opacity: 0;}
  .config-menu h2 {display:none;}
}
/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .config-menu { background-color: #000000; }
.pik-lg-bsss   .config-menu { background-color: #6D6E71; }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */

.config-menu h2 , .config-menu h3{
  border-top-width: 1px;
  border-top-style: solid;
  text-align: center;
  font-family: "LG Smart Light";
  font-size: 0.9em;
  letter-spacing: 0.2em;
  text-shadow: 1px 1px 1px #7b7b7b;
  margin:0;
  padding:0;
}

.config-appliances-menu, .config-room-menu {
  -webkit-transition: height .5s ease-in-out;
     -moz-transition: height .5s ease-in-out;
      -ms-transition: height .5s ease-in-out;
       -o-transition: height .5s ease-in-out;
          transition: height .5s ease-in-out;
}

/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .config-menu h2 { border-top-color:#7B7B7B; }
.pik-lg-bsss   .config-menu h2 { border-top-color:#A7A8AA; }
.pik-lg-bsss   .config-menu .config-appliances-menu h2 { border-top-color:transparent; }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */


.config-menu h2 a {
  display:block;
  text-decoration: none;
  color:#FFF;
  line-height:49px;
  height:49px;
}
/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .config-menu a:hover, .pik-lg-studio .config-menu a.active { color: #F38A00; }
.pik-lg-bsss   .config-menu a:hover, .pik-lg-bsss   .config-menu a.active { color: #A50034;
    font-family: "LG Smart Regular";
    text-shadow: 1px 1px 1px rgba(255,255,255,0.2); }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */

.config-menu h3 {   
  color: #FFF;
  line-height: 25px;
  font-size: .8em;
  border: none;
}

/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .config-menu ul, .pik-lg-studio .config-menu h3 { background-color:#232323; }
.pik-lg-bsss   .config-menu ul, .pik-lg-bsss   .config-menu h3 { background-color:#808184; }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */

/* --- special case for island selector --- */
.config-island-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  width:100%;
  padding:0 20px;
}
/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .config-island-menu h2 { border-top-color:#7B7B7B; background-color:#000000 }
.pik-lg-bsss   .config-island-menu h2 { border-top-color:#A7A8AA; background-color:#6D6E71 }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */



.config-menu .config-appliances-menu, .config-menu .config-room-menu { height: 50px;max-height: 635px; min-height: 50px; overflow: hidden; }

.config-menu .config-appliances-menu.active, .config-menu .config-room-menu.active {height:635px;}
/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio .config-menu .config-appliances-menu.active h2 a , .pik-lg-studio .config-menu .config-room-menu.active  h2 a { color:#F38A00; }
.pik-lg-bsss .config-menu .config-appliances-menu.active h2 a   , .pik-lg-bsss .config-menu .config-room-menu.active  h2 a   { color:#A50034; }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */
.config-menu li {
  font-size: 18px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0;
  display: block;
  text-transform: uppercase;
  list-style: none outside none;
}
.config-menu li a {
  text-transform: uppercase;
  color: #CCC;
  text-decoration: none;
  font-size: 0.9em;
  letter-spacing: 0.1em;
}

.config-menu li ul { 
  max-height:435px;
  overflow-y: auto;
  overflow-x: hidden;
}


.pik-lg-bsss   ul#room-configuration li ul li { border-bottom-color:#A50034; }



.config-menu #appliance-configuration ul { max-height:none; clear:left;}
.config-menu #appliance-configuration ul li {    
    width: 60px;
    display:inline-block;
    text-align: center;
    border-bottom: 3px solid transparent;
    padding: 10px 0 0 0;
    margin: 2px;
  }
.pik-lg-studio .config-menu #appliance-configuration ul li:hover, .pik-lg-studio .config-menu #appliance-configuration ul li.active { border-bottom-color: #F48A00; }
.pik-lg-bsss   .config-menu #appliance-configuration ul li:hover, .pik-lg-bsss   .config-menu #appliance-configuration ul li.active { border-bottom-color: #A50034; }

.config-menu li ul li.active, .config-menu li ul li:hover{
  border-bottom: 3px solid #F48A00;  
}

.config-menu ul.config-cameo-appliances {
  background-color: transparent;
  text-align: center;
  margin-top: 20px;
  height: 642px;
  overflow-y: auto;
}
.config-menu ul.config-cameo-appliances li {
  margin-bottom:10px;
  font-size:12px;
}
.config-menu ul.config-cameo-appliances li a { display:block; }
.config-menu ul.config-cameo-appliances li span { font-size:10px;}
.config-menu ul.config-cameo-appliances.config-cameo-appliances--inIsland li { display:none; opacity: 0}
.js-move-to-island {
  
    font-size: 1.2em;
    border: 1px solid #F38A00;
    margin: 10px;
    background-color: #232321;
    padding: 5px;
}

.config-menu .config-cameo-menu { 
  display:none;
  opacity : 0 ; 
  -webkit-transition: opacity .25s ease-in;
   -moz-transition: opacity .25s ease-in;
    -ms-transition: opacity .25s ease-in;
     -o-transition: opacity .25s ease-in;
        transition: opacity .25s ease-in;
}
.config-menu.config-menu-cameo .config-cameo-menu { 
  position:absolute;
  display:block;
  opacity:1;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.config-menu.config-menu-cameo .config-cameo-menu a { 
} 

.pik-lg-studio .config-menu.config-menu-cameo .config-cameo-menu {background-color: #000000;}
.pik-lg-bsss   .config-menu.config-menu-cameo .config-cameo-menu {background-color: #6D6E71;}

/*  ========================================================================
 *  
 *  APPLIOANCE CONFIGURATION MENU
 *  
 *  ======================================================================== */

ul#appliance-configuration {
  border-top: 1px solid transparent;
  max-height: 563px;
  overflow-y: auto;
  padding: 5px;
}
/* --------------------- RANGE CUSTOMISATION ------------------------- */
.pik-lg-studio ul#appliance-configuration { border-top-color:#7B7B7B; }
.pik-lg-bsss   ul#appliance-configuration { border-top-color:#A7A8AA; }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */

/*  ========================================================================
 *  
 *  ROOM CONFIGURATION MENU
 *  
 *  ======================================================================== */
#config-room-palettes { border-bottom:1px solid #7B7B7B; }
/* palette chooser */
#config-room-palettes li:first-child {    width: 80px;
    margin: 0px 8px;}
#config-room-palettes li {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 0.7em;
  min-width: 15px;
  line-height: 20px;
  height: 20px;
  text-align: center;
  color: #CCC;
}
#config-room-palettes li a { margin:0; display:inline-block;}
.pik-lg-studio #config-room-palettes li.active a { color:#F38A00; }
.pik-lg-bsss   #config-room-palettes li.active a { color:#A50034; }


ul#room-configuration {
  padding: 0 10px;
  height: 535px;
}
ul#room-configuration li {
  font-size:0.8em;
}

.pik-lg-studio ul#room-configuration > li:first-child { border-top:1px dotted #7B7B7B; }
.pik-lg-bsss   ul#room-configuration > li:first-child { border-top:1px dotted #A7A8AA; }

ul#room-configuration li ul {
  opacity:1;
  height:auto;
  height: 0;
  overflow: hidden;
  line-height: 20px;
  text-align: center;
}

ul#room-configuration li ul li {
  display: inline-block;
  width:50px;
  height:58px;
  overflow: hidden;
  margin: 0 5px;
}

ul#room-configuration li.active ul { height:435px; overflow-y: auto;}

/* --------------------- RANGE CUSTOMISATION ------------------------- */
/* to be used for styling scroll bars */
.pik-lg-studio ul#room-configuration li.active ul ::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}  }
.pik-lg-bsss   ul#room-configuration li.active ul {  }
/* -------------------- /RANGE CUSTOMISATION ------------------------- */

ul#room-configuration.active ul {height:auto;}

ul#room-configuration li.active a span.customiser-expander, 
.config-appliances-menu.active h2 span.customiser-expander,
.config-room-menu.active h2 span.customiser-expander {
  display: inline-block;
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: 60% 50%;
     -moz-transform-origin: 60% 50%;
      -ms-transform-origin: 60% 50%;
       -o-transform-origin: 60% 50%;
          transform-origin: 60% 50%;
-webkit-transition: transform .25s ease-out;
   -moz-transition: transform .25s ease-out;
    -ms-transition: transform .25s ease-out;
     -o-transition: transform .25s ease-out;
        transition: transform .25s ease-out;
}

.pik-lg-studio ul#room-configuration li.active a {color: #F38A00;}
.pik-lg-bsss   ul#room-configuration li.active a {color: #A50034;}


/* hide the image canvas during the menu */
.menu .config-menu { display:none; }

/*  ========================================================================
 *  
 *  APPLIANCE HOTSPOT LAYERS
 *  
 *  ======================================================================== */

.hotspot-menu {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 16;
}

.hotspots {
  position: absolute;
  z-index: 11;
}
.hotspots .circle-center {
  position: absolute;
  left: -7px;
  top: -7px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border:1px solid #F38A00;
  background-color: rgba(255,255,255,0.8);
  -webkit-animation: pulse 4s ease-out infinite;
  -moz-animation: pulse 4s ease-out infinite;
  animation: pulse 4s ease-out infinite;
  cursor: pointer;
  -webkit-transition: background-color .15s ease-out;
     -moz-transition: background-color .15s ease-out;
      -ms-transition: background-color .15s ease-out;
       -o-transition: background-color .15s ease-out;
          transition: background-color .15s ease-out;
}

@media screen and (min-resolution: 2dppx) { .hotspots .circle-center { width:40px; height:40px; }}
.pik-lg-studio .hotspots .circle-center:hover { background-color:rgba(243,138,0, 0.5); }
.pik-lg-bsss   .hotspots .circle-center:hover { background-color:rgba(165,0,52, 0.5); }

.pik-lg-bsss   .hotspots .circle-center { border-color:#A50034;}
/*  ========================================================================
 *  
 *  IMAGE CANVAS
 *  
 *  ======================================================================== */

.image-canvas {background-color:#000;}

.image-canvas, .video-canvas, .cameo-canvas {
  float: left;
  width: 1136px;
  height: 760px;
  position: relative;
  overflow: hidden;
  top:32px;
  z-index: 1;
}
.video-canvas {
  position: absolute;
  z-index: 2;
  opacity:1;
  pointer-events: none;
  -webkit-transition:  z-index 0.5s step-start, opacity .5s ease-in;
     -moz-transition:  z-index 0.5s step-start, opacity .5s ease-in;
      -ms-transition:  z-index 0.5s step-start, opacity .5s ease-in;
       -o-transition:  z-index 0.5s step-start, opacity .5s ease-in;
          transition:  z-index 0.5s step-start, opacity .5s ease-in;

}
.cameo-canvas {
  position: absolute;
  z-index: 2;
  opacity:1;
}
.cameo-canvas.faded {   
  z-index:-1; 
  opacity:0;
}
.video-canvas.faded {
  z-index:-1; 
  opacity:0;
  -webkit-transition:  z-index 0.5s step-end, opacity .5s ease-in;
     -moz-transition:  z-index 0.5s step-end, opacity .5s ease-in;
      -ms-transition:  z-index 0.5s step-end, opacity .5s ease-in;
       -o-transition:  z-index 0.5s step-end, opacity .5s ease-in;
          transition:  z-index 0.5s step-end, opacity .5s ease-in;
}
.video-canvas video {
  position: absolute;
  top:0;
  left:0;
}
.image-canvas .stage-image {
  position: absolute;
  top: 0;
  left: 0;
}
.image-canvas #menu-background {
  z-index: 30;
}

.image-canvas.fadeOut {
  opacity:0;
}

edge {
    z-index: -1;
    opacity: 0;
    transition: z-index 0.5s step-end, opacity 0.5s linear;
}

edge.highlight {
    z-index: 1;
    opacity: 1;
    transition: z-index 0.5s step-start, opacity 0.5s linear;
}

/* hide the image canvas during the menu */
.menu .image-canvas { display:none; }

/*  ========================================================================
 *  
 *  CONFIGURATOR LAYERS
 *  
 *  ======================================================================== */

.image-canvas #base              { z-index: 0; }
.image-canvas #cabinets          { z-index: 1; }
.image-canvas #floors            { z-index: 3; }
.image-canvas #island-cabinet    { z-index: 0; }
.image-canvas #paint-colors      { z-index: 2; }
.image-canvas #counters          { z-index: 10; }
.image-canvas #backsplash        { z-index: 5; }
.image-canvas #island            { z-index: 6; }
.image-canvas #island-floor      { z-index: 7; }
.image-canvas #island-countertop { z-index: 9; }
.image-canvas .stage-appliance-image { z-index: 15; }
.image-canvas #cameo             { z-index: 1;
    display: block;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in;
    -moz-transition: opacity .5s ease-in;
    -ms-transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in;
}

.image-canvas video { 
    -webkit-transition: opacity .25s ease-in;
    -moz-transition: opacity .25s ease-in;
    -ms-transition: opacity .25s ease-in;
    -o-transition: opacity .25s ease-in;
    transition: opacity .5s ease-in;
}


.video-canvas video {
    height:760px;
    width: 1140px;
    z-index:1;
}

.image-canvas #cameo.fade-in {opacity:1; z-index:25;}
.image-canvas #cameo.fade-out {opacity:0; z-index:25;}

.image-canvas #zoom-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 21;
}

div.menu {
  display: none;
}
.palettes-menu img {
  max-width: 95%;
  height: auto;
}
.product-options-menu li a {
  display: block;
  text-align: center;
}
.custom-palettes ul:first-child {
  padding-left: 10px;
}
.custom-palettes li {
  width: 100%;
}
.custom-palettes li > ul {
  clear: both;
  overflow: hidden;
  width: 100%;
  padding-left: 20px;
  margin-top: 10px;
}
.custom-palettes li > ul li {
  width: 75px;
  border: 1px solid #fff;
  float: left;
  margin-right: 10px;
  padding: 0;
  margin-bottom: 10px;
}
.custom-palettes li > ul li a {
  display: block;
  padding-left: 0px;
  height: 75px;
  width: 100%;
  overflow: hidden;
}
.over-box {
  position: absolute;
    max-width: 250px;
    min-width: 250px;
    width: 250px;
    background: #fff;
    position: absolute;
    z-index: 20;
    border: 3px solid #970331;
    padding: 0 20px;
    list-style: none;
}

.pik-lg-studio .over-box { border-color:#de7f02;}
.pik-lg-bsss   .over-box { border-color:#970331;}

ul.over-box li {
    font-family: "LG Smart Regular";
    border-top: 1px solid transparent;
    margin: 0 0 15px;
    padding-top: 20px;
    font-size:14px;
    color: #231f20;
}
.pik-lg-studio ul.over-box li { border-top-color:#ebd6ba;}
.pik-lg-bsss   ul.over-box li { border-top-color:#dbbac5;}



ul.over-box li:first-child{ border: none;}
ul.over-box li h3 {
    font-size: 15px;
}

ul.over-box li.button {
    display: inline-block;
    width: 50%;
    padding: 0;
    margin: 0;
    border:none;
    height:50px;
}
ul.over-box li.button a {
    display: block;
    line-height: 30px;
    background-color: #a50034;
    text-decoration: none;
    color: #FFF;
    font-size: 12px;
    text-align: center;
    border:2px solid white;
}

.js-close-appliance-details {
  position:absolute;
  height:100%;
  width:100%;
  left:0;
  top:0;
}


ul.over-box li.button a:hover {
}
.pik-lg-studio ul.over-box li.button a { background-color:#000000;}
.pik-lg-bsss   ul.over-box li.button a { background-color:#a50034;}

.pik-lg-studio ul.over-box li.button a:hover { background-color:#555555;}
.pik-lg-bsss   ul.over-box li.button a:hover { background-color:#7e0028;}


.flag {
  display: table;
  width: 100%;
}
.flag-image,
.flag-body {
  display: table-cell;
  vertical-align: middle;
}
.flag-top .flag-image,
.flag-top .flag-body {
  vertical-align: top;
}
.flag-image {
  padding-right: 10px;
}
.flag-image > img {
  display: block;
  max-width: none;
}
.flag-body {
  width: 100%;
}


/*  ========================================================================
 *  
 *  SHARING
 *  
 *  ======================================================================== */


.share-form {
  font-family: "LG Smart Light";
  z-index: 1000;
  position: absolute;
  background-color: rgba(0,0,0,0.35);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display:none;
  opacity: 0;
}

.share-form.visible {
  opacity:1;
  display: block;
}
.share-form-fadeout {

    width: 100%;
    height: 100%; 
    position: relative;
}

.share-form .close {
  float: right;
  height: 25px;
  width: 25px;
  position: relative;
  right: 0;
  top: 0;
  background-color: #FFF;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  font-family: "LG Smart Bold";
  color: #000;

}
.share-form h2 {
  color: #6D6E71;
  padding: 5px;
  font-size: 1.5em;
  font-family: "LG Smart Light";
  letter-spacing: .025em;
  line-height:1.3em;
}

.share-form .form {
  padding:15px;
  z-index: 1000;
  display: block;
  position: absolute;
  background-color: #DFDFDF;
  top: 230px;
  width: 465px;
  left: 350px;
  border: 5px solid white;
  overflow: hidden;;
}

.share-form form input, .share-form form label {
    width: 48%;
    display: inline-block;
    padding: 12px 10px;
    margin: 1%;
    background-color: white;
    border:none;
    font-family: "LG Smart Light";
    border:1px solid transparent;
}
.share-form form label {
  background-color: transparent;
  font-size:0.7em;
  padding:5px 0 0 0;
}

.share-form p {
  margin-top:20px;
}

.share-form p.form-error {
  overflow: hidden;
  background-color:#cc0000;
  color:white;
  max-height:100px;
  margin:0;
  padding:10px 20px;
  -webkit-transition: max-height .25s ease-in-out, padding .25s ease-in-out;
     -moz-transition: max-height .25s ease-in-out, padding .25s ease-in-out;
      -ms-transition: max-height .25s ease-in-out, padding .25s ease-in-out;
       -o-transition: max-height .25s ease-in-out, padding .25s ease-in-out;
          transition: max-height .25s ease-in-out, padding .25s ease-in-out;
}

.share-form p.form-error.hidden {
  max-height:0;
  padding:0 20px;
}

.share-form input.error, .share-form label.error {
  border-color:#cc0000;
}

.share-form form input[type=checkbox] {
  background-color:red;
  width:auto;
}

.share-form form input[type=submit] {
  background-color:#A50034;
  color:#FFF;
  font-size:18px;
  vertical-align: top;
}



.share-form form input[type=submit]:hover {
  background-color:#91002e;
}
.share-form form input[type=submit]:active {
  background-color:#b20038;
}

.pik-lg-studio .share-form form input[type=submit] { background-color:#000;}
.pik-lg-studio .share-form form input[type=submit]:hover { background-color:#323232;}
.pik-lg-studio .share-form form input[type=submit]:active { background-color:#232323;}

.share-form .privacy { 
  font-family: "LG Smart Light";
  font-size:0.7em;
}

.responsive-alert,
button.responsive-menu,
button.cameo-return-button {
  display:none;
}


/*  ========================================================================
 *  
 *  RESPONSIVENESS
 *  
 *  ======================================================================== */


  .pik-mobile .responsive-alert {
    display:none;
  }

.pik-mobile .stage {
    width:100%;
    overflow:hidden;
    margin:0;
  }

.pik-mobile .configurator .stage {
      height:100vh;
    }

.pik-mobile .pik-lg-studio .main-menu .menu-branding {
    width:100%;
  }

.pik-mobile .stage.pik-lg-studio .top-menu {
    background:rgba(0,0,0,0.5);
  }

.pik-mobile .top-menu > * {
    display:none;
  }

.pik-mobile .main-menu .menu-choice {
    margin-top:250px;
  }

.pik-mobile .main-menu .menu-choice a {
    height:auto;
    display:block;
    text-align:center;
    padding:15px 0px;
    text-align:center;
    float:none;
    margin-bottom:10px;
  }

.pik-mobile .menu-choice a.menu-hinter {
    top:175px;
  }

.pik-mobile .main-menu .menu-choice a span {
      display:block;
      width:100%;
      height:100%;
      text-align:center;
    }

.pik-mobile .image-canvas {
    width:100%;
    height:100vh;
    overflow:hidden;
    top:0px;
  }

.pik-mobile .room-images img{
    max-width:100%;
    height:auto;
  }

.pik-mobile button.responsive-menu {
    position:absolute;
    top:10px;
    right:10px;
    width:35px;
    height:35px;
    border:1px solid #fff;
    z-index:1291;
    background:url(../img/assets/menu.png) center center no-repeat;
    text-indent:-9999px;
    border-radius:4px;
    display:block;
  }

.pik-mobile button.cameo-return-button {
    position:absolute;
    top:10px;
    height:35px;
    border:1px solid #fff;
    width:auto;
    right:55px;
    z-index:1291;
    background:none;
    border-radius:4px;
    color:#fff;
  }

.pik-mobile button.responsive-menu.open {
      background:url(../img/assets/close.png) center center no-repeat;
    }

.pik-mobile .config-menu {
    float:none;
    position:absolute;
    top:-56px;
    right:-200px;
    height:100%;
    z-index:1291;
  }

.pik-mobile .config-menu li ul {
      overflow-y:visible;
    }

.pik-mobile .pik-lg-studio ul#appliance-configuration {
      overflow-y:scroll;
      max-height:275px;
    }

.pik-mobile ul#room-configuration {
      height:175px;
      overflow:scroll;
    }

.pik-mobile #config-room-palettes {
      text-align:center;
    }

.pik-mobile #config-room-palettes li:first-child{
        display:block;
        float:none;
        text-align:center;
        width:100%;
        margin:0;
        font-size:1em;
        padding:5px 0px 0px 0px;
      }

.pik-mobile #config-room-palettes li.designer-choose {
          float:none;
          display:inline;
        }

.pik-mobile #config-room-palettes  li.designer-choose a {
            display:inline-block;
            padding:10px;
            font-size:0.9em;
          }

.pik-mobile #config-room-menu h3 {
          margin:0px 0px 5px 0px;
        }

.pik-mobile .pik-lg-studio ul#room-configuration > li:first-child {
          padding-top:5px;
        }

.pik-mobile .pik-lg-bsss .main-menu .menu-branding {
    text-align:center;
    position:absolute;
    font-size: 1.5em;
    width:100%;
  }

.pik-mobile .pik-lg-bsss .main-menu .menu-branding img {
      display:block;
      margin-bottom:20px;
    }

.pik-mobile .pik-lg-bsss .menu-choice a.menu-hinter {
      top:198px;
    }

.pik-mobile .pik-lg-bsss .menu-choice a.menu-brand {
      top:500px;
    }

.pik-mobile .pik-lg-bsss .config-menu {
      background:#333;
    }

.pik-mobile .pik-lg-bsss .config-island-menu h2 {
      border-top-color: #6D6E71;
      background-color: #333333;
    }

.pik-mobile .cameo-canvas {
      width:100%;
      height:100vh;
      overflow-y:auto;

    }

.pik-mobile .cameo-canvas img{
        max-width:100%;
        height:auto;
      }

.pik-mobile .over-box.product-details {
      left:auto !important;
      right:10px;
      top:27px !important;
      height:83%;
      position:absolute;
      overflow:scroll;
    }

.pik-mobile .video-canvas {
      width:100%;
      height:100%;
    }

.pik-mobile .video-canvas video {
        max-width:100%;
        height:auto;
      }




/*  ========================================================================
 *  
 *  ANIMATION KEYFRAMING
 *  
 *  ======================================================================== */



@-webkit-keyframes pulse {
    0% { transform: scale(1);   opacity: 1; }
   70% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1);   opacity: 1; }
}

@-moz-keyframes pulse {
    0% { transform: scale(1);   opacity: 1; }
   70% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1);   opacity: 1; }
   70% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1);   opacity: 1; }
}