/* 
    Created on : 21 d�c. 2017, 16:28:49
    Author     : bob
*/

body{
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    margin: 0px;
    background-color:#CCCCCC;
}

* {
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}

.mainPage {
    width:100%;
    height:100%;
    position:absolute;
}

.SCENE3D {
    width:100%;
    height:100%;
}

.SCENE3D_RENDERER {
    width:100%;
    height:100%;
}


.childLeftDim {
    width:200px;
    height:10px;
    position:absolute;
    left:20px;
    top:1px;
}
.childLeft {
    width:200px;
    height:400px;
    position:absolute;
    left:20px;
    top:300px;
}

.bottomTotal {
    width:300px;
    height:50px;
    position:absolute;
    left:2%;
    bottom:-0px;
}

.colorsListMela{
    width:440px;
    position: fixed;
    right:20px;
    top:40px;
}
.colorsListLatte{
    display:none;
    width:440px;
    position: fixed;
    right:20px;
    top:40px;
}

.colorsListMedium{
    display:none;
    width:440px;
    position: fixed;
    right:20px;
    top:40px;
}


.accPanel {
    width:248px;
    height:400px;
    position:absolute;
    right:20px;
    bottom:100px;
    visibility:hidden;
}

#dialog-link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
}

#dialog-link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
}

#icons {
    margin: 0;
    padding: 0;
}

#icons li {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    float: left;
    list-style: none;
}

#icons span.ui-icon {
    float: left;
    margin: 0 4px;
}

.fakewindowcontain .ui-widget-overlay {
    position: absolute;
}

.message {
    background:#2686b0;
    color:#FFF;
    position: absolute;
    Z-index:100;
    top: -250px;
    left: 0;
    width: 100%;
    height: 250px;
    padding: 0px;
    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    overflow: hidden;
    box-sizing: border-box;
}

#toggle {
    
    position:absolute;
    appearance:none;
    cursor:pointer;
    left:-100%;
    top:-100%;
}

#toggle + label {
    display:none;
    position:absolute;
    cursor:pointer;
    padding:10px;
    background: #26ae90;
    width: 100px;
    border-radius: 3px;
    padding: 8px 10px;
    color: #FFF;
    line-height:20px;
    font-size:12px;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin:4px 1px;
    right:6px;
    transition:all 500ms ease;
}
#toggle + label:after {
    content:"Systeme" 
}

#toggle:checked ~ .message {
    top: 0;
}

#toggle:checked ~ .container {
    margin-top: 250px;
}

#toggle:checked + label {
    background:#dd6149;
    top:250px;
}

#toggle:checked + label:after {
    content:"Close"
}

.ItemList{
    height:200px;
    width:400px;
    overflow:auto;
    border:1px solid #000;
}

.rightPanel {
    position:absolute;
    top:10px;
    right:100px;
    width:300px;
}



/*
 * 	-- CSS UI --
*/ 

.UI {
    position : absolute;
    top: 3px;
    height: auto;
    width: 20%;
}

.createProject {
    margin-left : 10%;
}

.af_container {
    position : absolute;
    transform : translateX(-50%);
    top: .5em;
    left : 50%;
}

.affichage {
    border-bottom: 1px black solid;
    height: 8%;
    width: auto;
    background-color : #f2f1f1;
    z-index: 50;
}

.affichage .flexible {
    margin : 0;
}

#af_title {
    width: 100%;
    height : 1em;
    text-align: center;
    background-color:#2b2b32;
    color: white;
    font-size: 0.9vw;
}

.af_opt {
    padding: .75em;
    width: auto;
    height : auto;
}

.af_opt:hover {
    cursor : pointer;
}

.af_opt img {
    width : 40px;
    height : 40px;
}

#animation.af_opt img{
	width: 40px !important;
	height: 40px !important;
}

.UI_section {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1em;
    display : block;
    position: relative;
    height: 2em;
    width: 100%;
    margin-bottom: 5px;
    border: none;
    background-color: #2b2b32;
    color: white;
}

.button_text {
    position: absolute;
    z-index: 10;
    left: 20%;
    top : 25%;
}

.UI_section:hover{
    color: red;
    cursor: pointer;
    animation: UI_section_anim .5s forwards;
}

@keyframes UI_section_anim {
    100%{
        height: 2.4em;
        width: 103%;
    }
}

.UI_section:focus {
    outline: 0;
}

.visibility_off {
    display: none !important;
}

.open {
    height: 2.4em;
    width: 103%;
    color: #989898;
    animation: none;
}

.UI_component {
    padding: 0.8em 0 0.8em 0;
    position: relative;
    background-color: #f2f1f1;
    width: 100%;
    height: auto;
}


.UI_component h4 {
    font-size: 1em;
    border: 0;
    margin-left: 10%;
    padding: 0.8em 0 0.4em 0;
}

.select_template {
    margin-top: 1em;
    padding: 0.4em 0 0.4em 0;
    width: 75%;
    text-align: center;
    border: 1px #000 dashed;
    margin-left: 10%;
}

#selecttypemeuble-button, #selectmatiere-button, #selectmontant1938-button, #selecttablette1938-button, #selectPied-button, #selectButtunG-button, #selectButtonL-button, select-button {
    height: 1.6em;
    font-size: 0.8em;
    width: 75%;
    margin-left:10%;
    margin-top: 0.5em;
    border-top: 15px;
    border-right: 0;
    padding-bottom: 15px;
    border-left: 0;
    background-color: #f2f1f1;
    color: #000;
    padding: 0;
    max-width: 75%;
}

.ui-selectmenu-text {
    margin-top: .2em;
}

.ui-button:hover, .ui-button:focus {
    background: inherit;
    outline: 0;
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon, .ui-state-default .ui-icon {
    background-image: url(asset/background.png);
}

.ui-button .ui-icon {
    background-image: url(asset/background.png);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus, ui-button:active {
    border-color: #000;
}

.ui-menu-item {
    font-size: 0.8em;
    padding: 0.5em;
}

.ui-menu .ui-menu-item-wrapper {
    margin : 0.1em;
    padding : 3px 1em 3px .6em !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: black;
    color: #601510;
    background: inherit;
    background-color: lightgrey;
    font-size : 93%;
}

.inputZone {
    display: flex;
    bottom: 5%;
}

.inputZone h4 {
    width: 50%;
}

.input {
    margin-top: 0.8em;
    margin-left: 0.8em;
    height: 1.5em;
    width: 4em;
    text-align: center;
    background-color: #f2f1f1;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color : #601510;
}

.input:focus {
    outline-color: #000;
}

.slide {
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    padding: 0;
    left: 10%;
    border: 1px; 
    width: 75%;
    height: 0;
}

.custom-handler {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    transform: translateY(-25%);
}

.custom-handler:focus, .ui-slider-handle:focus , .custom-handler:active, .ui-slider-handle:active {
    outline: 0;
    border: 1px solid #000;
    animation : UI_Slide_Anim 0.5s forwards;
}

@keyframes UI_Slide_Anim {
    0% {
        border:0;
        background: none;
        background-color: white;
    }
    100% {
        border:0;
        width: 1.6em;
        height: 1.6em;
        background: none;
        background-color: lightgrey;
    }
}

.custom-handler:focus, .ui-slider-handle:focus , .custom-handler:hover, .ui-slider-handle:hover {
    cursor: pointer;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    background: inherit;
    background-color: lightgrey;
}

#zone {
    width: 100%;
}

#unselected, #f_unselected {
    width: 75%;
    text-align: center;
    border: 1px #000 dashed;
    margin-left: 10%;
}

.buttons {
    display: block;
    margin-left: 10%;
    margin-top: .5em;
    width: auto;
}

.buttons button:hover{
    cursor: pointer;
}

.flexible {
    display: flex;
    margin-bottom: 0.5em;
}

.flexible h4 {
    width: 66%;
}

.check {
    margin-top: 1.1em;
    margin-left: 5%;
}

.check:hover {
    cursor: pointer;
}

.color {
    margin-top: .2em;
    width: 32px;
    height: 32px;
    border : 1px black solid;
    border-radius: 50%;
}

.selectColor:focus {
    outline: 0;
}

.colorPannel {
    padding: 0.2em;
    left: 100%;
    top: 18%;
    display: flex;
    position: absolute;
    width: 91%;
    height: auto;
    background-color: #f2f1f1;
    border: 1px #000 dashed;
}

.pick {
    margin-top: 0.5em;
    margin: 0.3em;
}

.ui-icon-help {
    margin-top: 5.5%;
    border: 1px #000 solid;
    border-radius: 50%;
}
.ui-icon-help:hover {
    cursor: pointer;
    border-color: #601510;
}

.sp-replacer {
    vertical-align: inherit;
    margin-left: .3em;
    margin-right: .3em;
}

#UI_Select_A_Zone:hover {
    cursor: default;
}

.BG {
    display: flex;
    max-width: 100%;
}

.lBG {
    cursor: pointer;
    outline: 1px solid black;
    outline-offset: -1px;
}

.img_selector {
    margin-left: 35%;
    margin-top: 5%;
    height: 75%;
    background-color: grey;
    border: 7px black groove;
    overflow: auto;
}

.zone_button {
    text-align: center;
    top: -1.4em;
    font-size: 0.8em;
    display : block;
    position: relative;
    height: 2.5em;
    width: 50%;
    margin-bottom: 1px;
    border: none;
    background-color: black;
    color: white;
}

.zone_button:hover {
    color: red;
    cursor: pointer;
}

.zone_button:focus {
    outline : 0;
}

.button_action {
    overflow: hidden;
    margin-top: 0.5em;
    margin-left: 0.2em;
    width : 5.5em;
    height : 3.5em;
    text-align: center;
    vertical-align: text-top;
    color: white;
    border : none;
    background-color : #262626;
    outline : 0;
}

.button_action:hover {
    outline : 0;
    border : 2px solid red ;
}

.separation {
    width: 1px;
    height: 100%;
    background-color: white;
}

/*.nfo_box {
    background-color: #f2f1f1;
    position: fixed;
    bottom:1%;
    transform: translateX(-50%);
    left: 50%;
    width:35%;
    height: 14%;
    border:0;
    border-bottom: 1px black groove;
}*/

#nfo_title {
    width: 100%;
    text-align: center;
    background-color:#2b2b32;
    color: white;
    font-size: 0.9vw;
    min-height: 20%;
}


.nfo {
    width:50%;
    height: 100%;
    text-align:center;
    list-style:none;
}

.nfo li {
    /* font-size: 0.9em; */
    font-size: 0.8vw;
    margin-top:0.2em;
}

#price {
    margin-top:0.5em;
    text-align: center;
    color: black;
    width:100%;
    height: 100%;
    font-size: 1.7vw; 
}

.biblio {
    transform : translateX(-50%);
    left: 45%;
    margin-top : 20%;
}

.greyText {
    color : grey;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10;
    padding-top: 10%;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%;
}

._quit {
    display:none;
}

._register {
    display : none;
}

._save{
    display: none;
}
._share{
    display: none;
}

._newProj {
    display: none;
}

._connect {
    display : none;
}

.btn_container {
    margin-left: 10%;
}

.opt_buton {
    width: 80%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    outline: 0;
    border: none;
    cursor: pointer;
    background: #2b2b32;
    color: white;
    font-size: 1.2em;
}
.opt_buton_red {
    width: 80%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    outline: 0;
    border: none;
    cursor: pointer;
    background: #b40f11;
    color: white;
    font-size: 1.2em;
}

.opt_buton:hover {
    color:#989898;
}

input[type="file"] {
    display : none;
}

.opt_input {
    width: 80%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    outline: 0;
    border: none;
    cursor: pointer;
    background: #2b2b32;
    color: white;
    font-size: 1.2em;
    display : block;
    text-align : center;
}

.opt_input:hover {
    color:#989898;
}

.error {
    border: 2px solid red;
}

.correct {
    border: 2px solid green;
}

.left {
    position : fixed;
    right : 0%;
}

.UI_section_fixe {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1em;
    display : block;
    position: relative;
    height: 2em;
    width: 100%;
    margin-bottom: 1px;
    border: none;
    background-color: #2b2b32;
    color: #989898;
}

.displayer {
    position : absolute;
    left : 0;
    transform : translateX(-100%);
    width : 20%;
    height: 2em;
    border-right : none;
    border-radius : 25% 0% 0% 25%;
    background-color : white !important;
}

.displayer:hover {
    background-color : grey !important;
}

.icon-red {
    background-image : url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png) !important;
}

.icon-white {
    background-image : url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;
}

.icon-black {
    background-image : url(http://download.jqueryui.com/themeroller/images/ui-icons_000000_256x240.png) !important;
}

.selectImg {
    margin-left : .5em;
    margin-top : .2em;
    width : 32px;
    height : 32px;
    border : 1px solid black;
    border-radius : 10%;
}

.selectImg:focus {
    outline: 0;
}

.imgContainer {
    z-index : 100;
    position: absolute;
    transform : translate(50%,50%);
    width : auto;
    max-width : 100%;
    height: auto;
    background-color: #f2f1f1;
    border: 1px black dashed;	
}

.subContainer {
    display : flex;
}

#pf {
    left : -100%;
    top : 62%;
}

.optionImg {
    z-index : 101;
    display : block;
    width : 32px;
    height : 32px;
    border : 1px solid black;
    border-radius : 10%;
    margin : .5em;
}

.upIndex {
    z-index : 1;
}

.warn {
    position : fixed;
    width : 100%;
    height : 100%;
    z-index: 10;
    padding-top: 10%;
    left: 0;
    top: 0;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.warn-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 55%;
    text-align : center;
}

.warn-title {
    background-color : #ad0a0a;
    padding : none;
    color : white;
}

.warn-message {
    margin-top : 1%;
    display : block;
}

.warn-options {
    display : block;
    padding : 2%;
}

.warn-opt {
    width : 35%;
    color : white;
    background-color : black;
    border : none;
    text-transform: uppercase;
}



.popup {
    position : absolute;

    width : 35%;
    height : 15%;
    right: 2%;
    bottom: 2%;

    overflow: auto;
    background-color: #ad0a0a;
    margin: auto;
    text-align : center;
    color : white;
    border-radius : 20px;
}

.popup-title {
    padding : none;
}

.popup-message {
    margin-top : 1%;
    display : block;
}

.cross {
    position : absolute;
    top : 0;
    right : 0;
    width : 10%;
    cursor: pointer;
}

.wait {
    position: fixed;
    z-index: 11;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgba(0,0,0,0.4); 
}

.wait_container {
	/* border-radius : 25%; */
	position : absolute;
	background-color : #E0E0E0;
	width : 30%;
	height : 25%;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
}

.wait_text {
	position : absolute;
	width : 80%;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	color : #2e2e2e;
	text-align : center;
}

.options {
	position : absolute;
	bottom : 1%;
	right : 1%;
	width : 28%;
	height : auto;
}

.options_container {
    position: relative;
    width: 100%;
    height: 100%;
	display : flex;
}

.opt_limiter {
	width : 25%;
}


/* switch */


.switch {
	display : none;
}

.label_switch {
	cursor: pointer;
	/* text-indent: -9999px; */
	width: 5em;
	height: 3em;
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}

.label_switch:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 50%;
	height: 80%;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

.switch:checked + .label_switch {
	background: #601510;
}

.switch:checked + .label_switch:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

.label_switch:active:after {
	width: 85%;
}



/* The Close Button */
.Ray_close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}


.Ray_close:hover,
.Ray_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.barre > span {
    text-decoration: line-through;
}
/**Bouton tous nos meubles**/
.tous_meubles{
  position: absolute;
  left: 250px;
  top: 34px !important;
  border: 1px solid #36aad0;
}
a.meubles{
  text-decoration:none;
  padding: 0px;
}	
.meubles{
  width: 150px !important;
  height: 40px !important;
  line-height: 28px !important;	
  background-color: white !important;
  border: 1px solid #36aad0 !important;
  border-radius: 5px !important;
  color: #2baccd !important;
  font-family: 'Roboto' !important;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none !important;
  text-align: center !important;
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform ;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.meubles:hover{
		color: white !important;
		font-weight: 500;
}
.meubles:before{
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '' ;
	top: 100% ;
	left: 5% ;
	height: 10px ;
	width: 90% ;
	opacity: 0 ;
	background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s ;
	-webkit-transition-property: -webkit-transform, opacity;
	transition-property: transform, opacity ;
	opacity: .4 ;
	-webkit-transform: translateY(6px);
	-ms-transform: translateY(6px) ;
	transform: translateY(6px) ;
	-webkit-animation-name: hover-shadow;
	animation-name: hover-shadow;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}
.meubles:hover{
		background-color: #0e6984 !important;
		transition: 0.5s !important;
	}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@-webkit-keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

@keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@media screen and (max-width:1400px){
    #header_tikimob{
        .medias{
            display:none;
        }
    }
}

@media screen and (min-width:1401px) and (max-width:1499px){
    #header_tikimob{
        .medias{
            position:absolute;
            top:11px;
            margin-left:416px!important;
        }
    }
}
@media screen and (min-width:1500px) and (max-width:1749px){
    #header_tikimob{
        .medias{
            position:absolute;
            top:11px;
            margin-left:539!important;
            }
    }
}

@media screen and (min-width:1750px) and (max-width:1900px){
    #header_tikimob{
        .medias{
            position:absolute;
            top:11px;
            margin-left:697px!important;
            }
    }
}

@media screen and (max-width:1400px){
    #header_tikimob{
        .promotions{
            display:none;
        }
    }
}