#layerZero{
	/* text-align:left; */
}

#layerOne{
	padding: 0.5em;
    background-color: #FFF;
    text-align: left;
    margin-top: 1em;
    border-radius: 1em;
}

/* for titleLayers */
.title3{width:33.3%;padding-bottom:33.3%;}
.title2{width:50%;padding-bottom:50%;}
.title3 img,.title2 img{width:50%;height:auto;margin-top:5%;}
/* .title2 img{width:65%;height:auto;margin-top:10%;} */

/* .layerTitle img, .layerTitle div{opacity:0.5;} */
/* .layerTitle.selected img, .layerTitle.selected div{opacity:1;} */
.layerTitle{
	display:inline-block;
	position:relative;
	cursor:pointer;
	height:0;
	vertical-align:top;
	text-align:center;
}

.layerTitle div span{
	display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
	padding: 0.2em;
    background: inherit;
}
.layerTitle div{
	position: absolute;
    font-size: 0.8em;
    background-color: #fff;
    color: #ef2521;
    margin: 3px;
    width: calc(100% - 3px);
	height: calc(100% - 3px);
    border-radius: 0.5em;
    overflow: hidden;
	font-weight: bold;
}
.layerTitle div:hover{overflow:visible;z-index:2;}

.layerTitle.selected div{
	background-color:#ef2521;
	color:#FFF;
}

/* for standard layers */

.layer{
	color:#000;
	cursor:pointer;
	font-size:0.85em;
	padding:0.2em 1.5em 0.2em 1em;
	position:relative;
}
.layerChild .layer{font-weight:bold;font-size:0.75em;}
.layerChild .layer:hover{ color:#bd6563; }

.layer.selected{
	font-weight:bold;
}
.layerChild .layer.selected{
	color:#ef2521;
}
.layerGroup{
	position:relative;
}
.layerChild{
	position: absolute;
    top: -0.5em;
    left: 112%;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.4em 0;
    width: 100%;
    opacity: 1;
    transition: all 0.3s;
    transform: none;
	border-radius: 1em;
}
.layerChild.hidden{
	transform: translate(-30%,0);
    opacity: 0;
}
.plusIcon,  .tickIcon{
	width: 1em;
    height: 1em;
    float: right;
    margin-right: 0.3em;
	background-size:100%;
	position:absolute;
	top: 0.3em;
    right: 0.1em;
}
.plusIcon{background-image:url("image/plusLayer.png");}
.plusIcon:hover{background-image:url("image/plusLayerHover.png");}
.selected.plusIcon{ background-image:url("image/minusLayer.png"); }
.selected.plusIcon:hover{ background-image:url("image/minusLayerHover.png"); }
.tickIcon {
	outline: 1px solid rgba(255,255,255,0.5);
    outline-offset: -0.25em;
}
.selected .tickIcon{background-image:url("image/tickYes.png");}

.layerSlider{
    height: 1.5em;
    /* width: 100%; */
    /* background: linear-gradient(0deg, transparent, white); */
    /* margin-bottom: 0.9em; */
    border-radius: 1em 1em 0 0;
}
.sliderClose{
    width: 1.1em;
    height: 1.1em;
    margin: 0.2em;
	margin-right: 0.4em;
	cursor:pointer;
	float:right;
	background-image:url("image/closeHover.png");
	background-size:100%;
}