#svg_placeholder {
	opacity: 0;
	transition: opacity 1s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

svg {
	height: 28vh;
	position: absolute;
	z-index: 50;
	left: 50%;
	top: 65%;
	overflow: visible;
	transform: translate(-50%,-50%);
}

svg polygon {
    stroke: #868686;
    stroke-width: 0.3px;
}

svg .shape_3d_right {
    fill: #9D7B50 ;
}

svg .shape_3d_left {
    fill: #735A3B ;
}

svg .shape_3d_top {
    fill: #BC9C6E;
}

svg .shape_3d_top_dark {
    fill: #4d7382;
}

svg .shape_3d_left_dark {
    fill: #37525d ;
}

svg .shape_3d_right_dark {
	fill: #5d8c9e;
}

svg .shape_3d_top_transparent, svg .dach_style {
		fill: #b2d9e8;
		fill-opacity: 0.3;
		pointer-events: none;
}




svg > g {
    transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}



svg > g > [data-hover] {
	transition: fill 0.2s ease;
}

svg > g > [data-hover="true"] .shape_3d_left {
	fill: #d0ba9a;
}

svg > g > [data-hover="true"] .shape_3d_left_dark {
	fill: #486875;
}


svg > g > [data-hover="true"] .shape_3d_right_dark {
	fill: #74a2b5;
}

svg > g > [data-hover="true"] .shape_3d_right {
	fill: #d0ba9a;
}

svg > g > [data-hover="true"] .shape_3d_top {
	fill: #d0ba9a;
}

svg > g > [data-hover="true"] .shape_3d_top_dark {
	fill: #71a3b7;
}

svg > g > [data-hover="true"] .shape_3d_top_transparent {
		fill: #daeff7;
		fill-opacity: 0.9;
}



/* RED version */



svg .shape_3d_right {
    fill: #9D7B50 ;
}

svg .shape_3d_left {
    fill: #735A3B ;
}

svg .shape_3d_top {
    fill: #BC9C6E;
}

svg .shape_3d_top_dark {
    fill: #a57f69;
}

svg .shape_3d_left_dark {
    fill: #795d4b;
}

svg .shape_3d_right_dark {
	fill: #b79f92;
}

svg .shape_3d_top_transparent, svg .dach_style {
		fill: #e8beb2;
		fill-opacity: 0.3;
		pointer-events: none;
}


.red svg > g > [data-hover="true"] .shape_3d_left {
	fill: #d0ba9a;
}

.red svg > g > [data-hover="true"] .shape_3d_left_dark {
	fill: #d0ba9a;
}


.red svg > g > [data-hover="true"] .shape_3d_right_dark {
	fill: #d0ba9a;
}

.red svg > g > [data-hover="true"] .shape_3d_right {
	fill: #d0ba9a;
}

.red svg > g > [data-hover="true"] .shape_3d_top {
	fill: #d0ba9a;
}

.red svg > g > [data-hover="true"] .shape_3d_top_dark {
	fill: #d0ba9a;
}

.red svg > g > [data-hover="true"] .shape_3d_top_transparent {
		fill: #daeff7;
		fill-opacity: 0.9;
}






.active_section * {
	/*stroke: red;
	stroke-width: 1px;
	z-index: 99999;*/
}


svg > g[data-open="true"] {
    transform: translate(0,-300px);
}