/*section.map:before{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:block;
    background-color:rgba(255,255,255,0.6);
    width:100%;
    height:100%;
    z-index:0;
}*/
section.map{
    display:flex;
    background-image:url('../img/metropolitree-pattern.svg'),url('../img/sfondo-metropolitree-mappatura.jpg');
    background-size:35px,cover;
    background-repeat:no-repeat,no-repeat;
    background-position:top right 5%,center;
    max-height:100vh;
    overflow:hidden;
    .map-container.left{
        width:50%;
        position:relative;
        #map-1{
            width:100%;
            z-index:1;
            position:relative;
        }
        #overmap-btns{
            z-index:5;
            height:35px;
            position:absolute;
            bottom:40px;
            width:180px;
            left:calc(50% - 90px);
            .overmap-btns-container{
                position:relative;
                width:100%;
                height:35px;
                a{
                    box-shadow:2px 2px 10px rgba(0,0,0,0.3);
                    z-index:3;
                    transition:0.3s;
                    position:absolute;
                    width:calc(100% - 20px);
                    text-align:center;
                    padding:0 10px;
                    color:#000;
                    top:0;
                    height:35px;
                    left:0;
                    right:0;
                    bottom:0;
                    height:100%;
                    text-decoration:none;
                    background-color:#fff;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    text-transform:uppercase;
                    border:2px solid rgba(0,0,0,0);
                }
                a.overmap-btn-main{
                    z-index:5;
                }
                a.selected-btn{
                    border:2px solid #31943D;
                    color:#31943D;
                }
            }
        }
        #overmap-btns.expanded-btns{
            .overmap-btns-container{
                a.overmap-btn-1{
                    left:-200px
                }
                a.overmap-btn-2{
                    left:200px
                }
                a.overmap-btn-3{
                    top:-60px
                }
                a.overmap-btn-main{
                    background-color:rgba(255,255,255,0.5);
                }
            }
        }
    }
    .map-container.right{
        width:40%;
        display:flex;
        align-items:center;
        justify-content:center;
        max-height:100vh;
        overflow-y:scroll;
        padding:50px 5%;
        ul{
            list-style:none;
            padding-left:0;
            li{
                display:flex;
                padding-bottom:5px;
            }
        }
        h2{
            font-family:"Auro Bold";
            color:#b43d86;
            font-size:46px;
            padding-bottom:20px;
        }
        h3{
            color:#b43d86;
            padding-top:15px;
        }
        p,li{
            font-family:"Futura Medium";
            font-size:18px;
            color:#093953;
        }
        img.logo-map{
            width:240px;
            margin-bottom:50px;
        }
        .form-map{
            position:fixed;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            background-color:#fff;
            z-index:5;
            display:none;
            border:1px solid #31943D;
            box-shadow:1px 1px 3px rgba(0,0,0,0.2);
            padding:25px;
            border-radius:5px;
            >.close-form-btn{
                position:absolute;
                right:10px;
                top:10px;
                color:#333;
                text-transform:uppercase;
                text-decoration:none;
            }
            >h3{
                font-family:"Auro Bold";
                color:#b43d86;
                text-align:center;
                text-transform:uppercase;
            }
            >p{
                text-align:center;
            }
            label{
                display:block;
                width:100%;
                margin-bottom:15px;
                >input,>select,>textarea{
                    margin-top:5px;
                }
            }
            input,textarea,select{
                border-radius:5px;
                padding:7px 10px;
            }
            textarea{
                width:calc(100% - 36px);
            }
            .input-container-2cols,.input-container-3cols{
                display:flex;
                >label{
                    margin-right:15px;
                }
            }
            input[type="submit"]{
                display:inline-block;
                width:120px;
            }
            input.mt-form-input,select.mt-form-input{
                display:block;
                width:calc(100% - 20px);
                padding:10px;
                border-radius:5px;
                border:1px solid rgba(0,0,0,0.7);
            }
            select.mt-form-input{
                width:100%;
            }
            input[type="file"]{
                padding:6px;
            }
            input.mt-form-input.error-input{
                border-color:#ff0000;
            }
            input.mt-form-input:focus,textarea.mt-form-input.mt-form-input-textarea:focus{
                outline-color:#31943D!important;
            }
            input.mt-form-input.mt-form-input-submit{
                width:120px;
                margin:0 auto;
                background-color:#31943D;
                color:#fff;
                border-color:#31943D;
                cursor:pointer;
                transition:0.4s;
            }
            input.mt-form-input.mt-form-input-submit:hover{
                background-color:rgba(49,148,61,0.2);
                color:#31943D;
            }
        }
        .form-map.visibled{
            display:block;
        }
    }
}
.legend-icon{
    width:25px;
    margin-right:5px;
    display:inline-block;
}
@media screen and (max-width:991px){
    section.map{overflow:visible;
        flex-wrap:wrap;
        max-height:unset!important;
        .map-container{
            width:100%;
        }
        .map-container.left{
            order:2;
            width:100%;
            #overmap-btns.expanded-btns{
                .overmap-btns-container{
                    a.overmap-btn-1{
                        left:0;
                        top:-135px
                    }
                    a.overmap-btn-2{
                        left:0;
                        top:-90px
                    }
                    a.overmap-btn-3{
                        top:-45px
                    }
                }
            }
        }
        .map-container.right{
            order:1;width:100%;max-height:unset!important;
            .form-map {
                min-width:80%;
                .input-container-2cols,.input-container-3cols{
                    flex-wrap:wrap;
                }
            }
        }
    }
}