#testToolWrapper .row-fluid-wrapper {
  padding: 12px 0;
}

#testToolWrapper .hs_cos_wrapper {
  padding: 12px 0;
}

.selectboxes div.box {
list-style: none;
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: 50% 50%;
position: relative;
cursor: pointer;
}

.selectboxes div.box div.image-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    padding-bottom: 70px;
    box-sizing: border-box;
}

.selectboxes.fences div.box div.image-wrapper {
padding-bottom: 60px;
}

.selectboxes div.box div.image {
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 100%;
}

.selectboxes div.box.gate div.image {
background-size:contain;
}


.selectboxes div.box label {
display: block;
text-align: center;
position: absolute;
width: 100%;
bottom: 0;
height: 70px;
line-height: 1;
background-color: #7a7b7a;
color: #dcdcdc;
padding: 0px;
font-family: "Lane-Narrow";
text-transform: uppercase;
display: flex;
flex-direction: column;
justify-content: center;
}

.selectboxes div.box.selected label {
background-color: #d74c02;
}

.houses div.box.upload {
background: #7a7b7a none no-repeat 50% 35%;
}

.houses div.box.upload a {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#drop-zone {
  display: block;
  width: 100%;
  min-height: 340px;
  border: 4px dashed #e2ded9;
  text-align: center;
  padding-top: 100px;
  color: #e2ded9;
  box-sizing: border-box;
  font-family: "Lane-Narrow";
  text-transform: uppercase;
  font-size: 1.4em;
}

#upload {
  padding: 12px;
}

#drop-zone label {
  display: block;
  text-align: center;
  font-size: 1.5em;
}

  #drop-zone label.small {
      font-size: 1.2em;
  }

#drop-zone input[type="file"] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#drop-zone label.file {
  background-color: #e2ded9;
  color: #58585a;
  display: inline-block;
  padding: 6px 20px;
  font-size: 1.2em;
  margin-top: 20px;
}

#visual {
  text-align: center;
  overflow: hidden;
}

  #visual .house {
      display:inline-block;
      width: auto;
      max-width: none;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
  }

  #visual .house .fixed-preview-hide {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -999em;
    border-radius: 0 0 20px 0px;
    padding: 25px 35px;

  }
  #visual .house .fixed-preview-hide:before, #visual .house .fixed-preview-hide:after {
    content: " ";
    display: block;
    width: 9px;
    height: 45px;
    background: none #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
  }
  #visual .house .fixed-preview-hide:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  #visual .house.fixed-preview {
    position: fixed;
    top: 12px;
    right: 12px;
    transform: scale(0.3) translate(550px, -550px);
    cursor: pointer;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    border-radius: 20px;
    z-index: 100;

  }
  @media(min-width:1200px) {
    #visual .house.fixed-preview {
      transform: scale(0.5) translate(210px, -210px);
    }
    #visual .house .fixed-preview-hide {
      padding: 15px 25px;
    }
    
    #visual .house .fixed-preview-hide:before, #visual .house .fixed-preview-hide:after {
      width: 6px;
      height: 30px;
    }
  }

  #visual .house.fixed-preview .fixed-preview-hide {
    display: block;
  }

#house-image {
  width: 500px;
  height: 500px;
  max-width: none;
  object-fit: contain;
  vertical-align: bottom;
}
#visual .controls
{
  width:50%;
}

#visual .controls.left
{
  float:left;
  
}

#visual .controls.right
{
  float:right;
  
}

#visual .controls.no-picker.left
{
  width:100%;
  float:none;
}
#visual .controls.no-picker.right
{
  display:none;
}
#visual .controls .color-picker
{
  height:auto;
  display:none;
}
#visual .controls .color-picker label
{
  display:block;
}
#visual .controls .color-picker ul {
  padding: 0;
  display:inline-block;
}

#visual .controls .color-picker ul li {
  list-style: none;
  display: inline-block;
  float: left;
  height:40px;
  width:40px;
  margin: 0;
  
  
}
#visual .controls .color-picker ul li a{
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius:20px;
  -webkit-border-radius:20px;
  display:block;
  margin:6px 5px 0 5px;
  box-sizing: content-box;

  transition:all 0.1s;
  -webkit-transition:all 0.1s;
}

#visual .controls .color-picker ul li.selected a {
  border: 3px solid #2b2e31;
  width: 36px;
  height: 36px;
  
  margin:0px 0px 0 0px;
  
}

#visual .controls .color-picker ul li.color.none a{
  background-color: #1a191a;
  position:relative;
}
#visual .controls .color-picker ul li.color.none a:before,
#visual .controls .color-picker ul li.color.none a:after
{
  content: " ";
  position:absolute;
  height:2px;
  width:70%;
  background-color:#fff;
  top:50%;
  left:50%;
  z-index:10;
  display:block;
  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
}
#visual .controls .color-picker ul li.color.none a:before
{
  transform:translate(-50%, -50%) rotate(45deg) ;
  -webkit-transform:translate(-50%, -50%) rotate(45deg);
}
#visual .controls .color-picker ul li.color.none a:after
{
  transform:translate(-50%, -50%) rotate(-45deg) ;
  -webkit-transform:translate(-50%, -50%) rotate(-45deg);
}


#visual .controls .color-picker ul li.color.black a{
  background-color: #1a191a;
}

#visual .controls .color-picker ul li.color.gray a{
  background-color: #8f8e8d;
}

#visual .controls .color-picker ul li.color.brown a{
  background-color: #402824;
}

#visual .controls .color-picker ul li.color.red a{
  background-color: #7c342b;
}
/*#visual .controls .color-picker ul li.color.gold a{
  background-color: #a85f02;
}*/


#visual .controls div.switcher
{
  
  padding:20px 0 30px 0;

 
  position:relative;
}
#visual .controls .double-gate
{
  display:none;
}

#visual .controls .switcher label span
{
  display:inline-block;
  text-align:center;
  line-height:30px;
  padding-left:0px;
  
}
#visual .controls label.input-wrapper
{
  position:absolute;
  width:56px;
  bottom:0px;
  left:50%;
  
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  text-align:left;
}

#visual .fencewrapper {
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  perspective: 500px;
}

#visual .fence {
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 40%;
  cursor: move;
  /*transition: height 0.4s ease-in-out 0s;
  -webkit-transition: height 0.4s ease-in-out 0s;*/
  
  transform: rotateY(0deg) scale(0.5, 0.5);
  transform-origin: center center;
  overflow: visible;
}

#visual .fencewrapper.gate-herrgardsgrind_dubbel .fence {
  left:-60%;
}
#visual .fencewrapper.gate-torpargrind_dubbel .fence {
  left:-70%;
}
#visual .fencewrapper.gate-gardsgrind_dubbel .fence {
  left:-40%;
}
#visual .fencewrapper.gate-herrgardsgrind .fence {
  left:-40%;
}
#visual .fencewrapper.gate-torpargrind .fence {
  left:-30%;
}
#visual .fencewrapper.gate-pinngrind .fence {
  left:-25%;
}
#visual .fencewrapper.gate-pinngrind_dubbel .fence {
  left:-70%;
}
#visual .fencewrapper.gate-portal .fence {
  left:0%;
}








#visual .fence .repeater {
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 100% 0;
  display: block;        
  position: absolute;
  bottom:0;
  left:0;

}
#visual .fence .repeater.left {
  /*-webkit-transform: translateX(-27%);
  transform: translateX(-27%);*/
}
#visual .fencewrapper.use-gate .fence .repeater {
  width: 50%;
}
#visual .fencewrapper.use-gate .fence .repeater.right {
  display: block;
}
#visual .fence .repeater.right {
  display: none;
  left: auto;
  right: 0px;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#visual .fencewrapper.gate-portal .fence .repeater.left {
  
  left: -185px;
}
#visual .fencewrapper.gate-portal .fence .repeater.right {
  
  right: -185px;

}

/**** Pinngrind ****/
#visual .fencewrapper.gate-pinngrind .fence .repeater.left {
  
  left: 205px;
}

#visual .fencewrapper.gate-pinngrind .fence .repeater.right {
  
  right: -400px;
}
#visual .fencewrapper.gate-pinngrind_dubbel .fence .repeater.left {
  
  left: 534px;
}

#visual .fencewrapper.gate-pinngrind_dubbel .fence .repeater.right {
  
  right: -1060px;
}


/**** Gårdsgrind ****/
#visual .fencewrapper.gate-gardsgrind .fence .repeater.left {
  left: 157px;
}

#visual .fencewrapper.gate-gardsgrind .fence .repeater.right {
  right: -424px;
}
#visual .fencewrapper.gate-gardsgrind_dubbel .fence .repeater.left {
  left: 259px;
}

#visual .fencewrapper.gate-gardsgrind_dubbel .fence .repeater.right {
  right: -713px;
}
#visual .fencewrapper.gate-gardsgrind_dubbel img.gate {
  transform: translate(50%, 4%);
  -webkit-transform: translate(50%, 4%);
  height: 116%;
}


/**** Herrgårdsgrind ****/
#visual .fencewrapper.gate-herrgardsgrind .fence .repeater.left {
  left: 274px;
}

#visual .fencewrapper.gate-herrgardsgrind .fence .repeater.right {
  right: -534px;
}
#visual .fencewrapper.gate-herrgardsgrind_dubbel .fence .repeater.left {
  
  left: 470px;
}
#visual .fencewrapper.gate-herrgardsgrind_dubbel .fence .repeater.right {
  
  right: -916px;
}


/**** Torpargrind ****/
#visual .fencewrapper.gate-torpargrind .fence .repeater.left {
  
  left: 244px;
}

#visual .fencewrapper.gate-torpargrind .fence .repeater.right {
  
  right: -474px;
}
#visual .fencewrapper.gate-torpargrind_dubbel .fence .repeater.left {
  
  left: 538px;
}

#visual .fencewrapper.gate-torpargrind_dubbel .fence .repeater.right {
  
  right: -1061px;
}


#visual .fence img.gate {
  display:none;
  position: absolute;
  
  left: 50%;
  bottom: 0px;
  height: 100%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
#visual .fencewrapper.use-gate .fence img.gate {
  display:block;
}

#visual .fencewrapper.fence-langgardsgard .repeater {
  height: 110%;
}



#visual .fencewrapper.gate-herrgardsgrind img.gate,
#visual .fencewrapper.gate-herrgardsgrind_dubbel img.gate
{
  transform: translate(100%, 3%);
  -webkit-transform: translate(100%, 3%);
  height: 112%;
}

#visual .fencewrapper.gate-pinngrind_dubbel img.gate,
#visual .fencewrapper.gate-pinngrind img.gate {
  transform: translate(97%, 3%);
  -webkit-transform: translate(97%, 3%);
  height: 112%;
}

#visual .fencewrapper.gate-torpargrind_dubbel img.gate,
#visual .fencewrapper.gate-torpargrind img.gate {
  transform: translate(97%, 3%);
  -webkit-transform: translate(97%, 3%);
  height: 112%;
}

#visual .fencewrapper.gate-portal img.gate {
  height: 205%;
}

#visual button {
  display: none;
  margin: 0 auto;
}

#visual .controls {
  margin-top: 30px;
}

  #visual .controls label {
      font-family: "Lane-Narrow";
      text-transform: uppercase;
      font-size: 1.4em;
  }

  #visual .controls > div.slider {
      /*height:30px;
  width:100%;*/
      max-width: 300px;
      margin: 20px auto;
      height: 1px;
      background: none;
      border-width: 1px 0 0 0;
      border-color: #7d7d7d;
  }

#visual .controls .gateposition-control 
{
  /* Might create this feature in the future */
  display:none;
}    
  
.ui-slider-horizontal .ui-slider-handle {
      background-color: #d74c02;
      border: none;
      height: 16px;
      width: 16px;
      margin-left: -8px;
      top: -8px;
      border-radius: 8px;
      -webkit-border-radius: 8px;
  }

#fence-hidden-form,
.row-fluid .visualizer-form {
  display: none;
  _display: block !important;
  height: 0;
  _height: auto !important;
  overflow: hidden;
  max-height: 0;
}

.ui-slider-horizontal .ui-slider-handle:after {
  position: absolute;
  content: " ";
  background-color: rgba(0,0,0,0);
  border: none;
  height: 35px;
  width: 35px;
  margin-left: -10px;
  top: -10px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
}

@media(max-width:767px) {
/*  .lang-switcher {
    position: absolute;
    top: 25px;
    right: 40px;
}

    .lang-switcher ul {
        margin-top: 20px;
    }

a.cta_button {
    font-size: 5vw;
}*/

#visual .controls
{
    width:100%;
}

}
/*@media(max-width:700px) {
#visual
{
    margin-left:-30px;
}
}*/