#map{
	position: absolute;
	height: 600px;
    width: 100%;
	background-color: rgba(255, 255, 255, 0.99); //this fixes a bug in shaders that makes bg opaque
	background-image: $img_map;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right center;
    z-index: 10;

    h2{
        font-family: georgia;
        font-size: 4rem;
        text-align: right;
    }

    h5{
        font-weight: bold;
    }

	.map-content-main{
		position: relative;
        margin-left: 5%;
		padding: 2em;
        padding-bottom: 0;
		width: 390px;

        p{
            display: block;
            min-height: 200px;
            padding-bottom: 0;
            margin-bottom: 0;
            font-size: 1rem;
            text-indent: 0;
        }

		figure{
                    float: left;
                    -webkit-shape-outside: polygon(0 0, 100% 0, 100% 10%, 65% 35%, 100% 75%, 100% 100%, 0 100%);
                    shape-outside: polygon(0 0, 100% 0, 100% 10%, 65% 35%, 100% 75%, 100% 100%, 0 100%);
		}
	}

    a{
        position: absolute;
        display: block;
        padding: 1em;
        line-height: 1.3;
        text-transform: uppercase;
        color: $lightblue;

        &.plus{

            width: 300px;

            .low-perf &.in,
            .high-perf &.in{

                img{
                    @include transform(scale(1));
                }

                span{
                    opacity: 1;
                }
            }

            .high-perf &:hover{
                img{
                    @include transform(scale(1.2) rotate(180deg));
                }
            }

            img{
                position: absolute;
            }

            .high-perf & img{
                @include transform-origin(center, center);
                @include transform(scale(.2));
                @include transition(transform 1s);
            }

            span{
                display: block;
                // opacity: 0;
                margin-left: 2.5em;
                width: 200px;
            }
            
            .high-perf & span{
                @include transition(opacity 1s ease-out .5s);
            }
        }

        &.info{
            padding-right: 30px;
            background-image: url(../assets/images/info-icon.svg);
            background-repeat: no-repeat;
            background-position: right center;

        }
    }
}

#map-dist{
    position: absolute;
    top: 280px;
    right: 200px;
    font-size: .7rem;
    max-width: 20em;
    line-height: 1.8;
    // opacity: 0;
    // @include transition(opacity 1s);

    // &.in{
    //     opacity: 1;
    // }
}

#map-limit{
    position: absolute;
    top: 100px;
    right: 200px;
    font-size: .7rem;
    max-width: 15em;
    line-height: 1.8;
    // opacity: 0;
    // @include transition(opacity 1s);

    // &.in{
    //     opacity: 1;
    // }
}

#map-plus-1{
    position: absolute;
    top: 500px;
    left: 20%;
}

#map-plus-2{
    top: 450px;
    // left: 55%;
    right: 100px;
}

#map-plus-3{
    bottom: 30px;
    // left: 55%;
    right: 100px;
}

#map-credits{
    margin-left: 1em;
    bottom: 30px;
}

#map-tree{
    border: 3px solid #666;
    // margin-left: 3.5em;
    background-color: rgba(255, 255, 255, .5);
    opacity: 0;
    @include transition(opacity 1s ease-out 1s);

    &.in{
        opacity: 1;
    }
}

#map-tree-figure{
    position: absolute;
    left: 20%;
    bottom: 30px;
    width: 250px;
}

///elevation
.elevation-label{
    opacity: 1;
    position: absolute;
}

.elevation-label,
#elevation-graphic{

    .low-perf &{
        @include transition(opacity 0.4s ease-out 0.4s);
        opacity: 0;
    }

    .low-perf .opened &{
        display: block;
        opacity: 1;
    }
}

#elevation-title{
    bottom: 10px; 
    left: 50%;
    font-weight: bold;
}

#elevation-label2{
    bottom: 20%; 
    left: 5%; 
    width: 200px; 
    height: 50px;
    line-height: 1.5;
    text-align: right;
}

#elevation-wetter{
    right: 20%;
    top: 34%;
}

#elevation-drier{
    right: 3%;
    top: 34%;
}

#elevation-mt{
    right: 3%;
    top: 20%;
}

#elevation-top{
    left: 7%;
    bottom: 33%;
}

#elevation-bottom{
    left: 5%;
    bottom: 15%;
}

#elevation-text{
    padding: 1.5em;

    b{
        display: block;
        font-weight: bold;
    }

    p{
        margin-top: .7em;
        width: 325px;
        text-indent: 0;
        font-size: 1rem;
        line-height: 1.5;
    }
}


.low-perf #popup-forest{
    svg{
        @include transition(opacity 0.4s ease-out 2s);
        opacity: 0;
    }
    
    &.opened svg{
        display: block;
        opacity: 1;
    }
}
