#container-map{
    background:#4e5864;
}
#container-map h2{
    color:#fff;
    font-family: 'FiraSans-Light';
    text-transform: uppercase;
    font-size: 25px;
    margin-top: 24px;
    margin-bottom: 5px;
}
#container-map h2 strong{
    font-family: 'FiraSans-Bold';
    display: block;
}
#container-map p{
    font-family: 'FiraSans-Regular';
    color:#fff;
    font-size: 16px;
    line-height: 21px;
}
#map{
    width:100%;
    height:396px;
    z-index: 0;
}
/*** CSS Force sur google map API ***/
#map button[aria-label=Fermer]{
    top: 0px !important;
    right: 0px !important;
}

#map-canvas{
    overflow: hidden;
    margin: 0;
    position: relative;
    margin-top: 36px;
}
#map-canvas>div{
    overflow: hidden;    
}

.info-windows{
    width: 200px;
}

.info-windows .name{
    font-size: 16px;
    font-family: 'Roboto-Bold';
    color : #c1200d;
    text-align: center;
    display: block;
    padding-bottom: 15px;
}

.info-windows .address{
    font-size: 14px;
    font-family: 'Roboto-Regular';
    color :#1d1d1b
}

.info-windows .tel{
    color :#1d1d1b;
    font-size: 14px;
    font-family: 'Roboto-Regular';
}

.info-windows a{
    font-size: 14px;
    color :#1d1d1b;
    font-family: 'Roboto-Regular';
}

#toolbar{
    position: absolute;
    background: #ffffff;
    max-width: 52vw;
    width: 240px;
    z-index: 10;
    right: 0;
    height: 100%;
}

#toolbar .titre-box{
    width: 100%;
    background: #393c40;
    color:#ffffff;
    font-family: 'Roboto-Bold';
    line-height: 32px;
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    text-transform: uppercase;
}
#toolbar .types-service{
    overflow-y: scroll;
    height: calc(100% - 32px);
}
#toolbar ul {
    list-style: none;
    padding: 15px 14px;
}
#toolbar ul li{
    min-height: 42px;
    width: 100%;
    clear: both;
}
#toolbar ul li a img{
    float: left;
    width: 24px;
}
#toolbar ul li a p{
    color: #1d1d1b;
    font-size: 13px;
    font-family: 'Roboto-Light';
    display: inline-block;
    width: calc(100% - 30px);
    float: left;
    margin-left: 5px;
    line-height: 15px;
}

#toolbar ul li a.active p{
    color:#c1200d;
}

#toolbar .caret{
    background: url(../img/flech-right.png) center no-repeat #c01f0d;
    width: 30px;
    height: 80px;
    padding: 20px 11px 0 5px;
    display: block;
    position: absolute;
    top: 0;
    left: -30px;
    cursor: pointer;
}
#toolbar.hidden{
    left: 100vw;
}
#toolbar.hidden .caret{
    background: url("../img/flech-left.png") center no-repeat #c01f0d;
}

#map_form{
    padding-bottom:25px;
}


#map_form h3{
    color: #ffffff;
    font-family: 'Roboto-Bold';
    font-size: 16.5px;
    text-align: center;
    margin-top: 17px;
    margin-bottom: 3px;
}

#map_form h3.next{
    line-height: 25px;
}

#map_form label{
    color: #ffffff;
    font-family: 'Roboto-Bold';
    font-size: 13px;
    margin-bottom: 5px;
}

#map_form input[type=text],
#map_form select,
#map_form .select2-container .select2-selection--single{
    width: 100%;
    height: 25px;
    border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 23px;
    font-size: 14px;
}

#map_form input[type=submit]{
    border: 1px solid #ffffff;
    height: 35px;
    line-height: 35px;
    background: none;
    color: #ffffff;
    font-family: 'Roboto-Bold';
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 20px;
    margin-top: 18px;
    letter-spacing: 2px;
}

#map_form .form-group{
    margin-bottom: 6px;
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    #container-map{
        background: url("../img/map-top-bg.jpg") top center no-repeat #4e5864;
    }

    #container-map h2{
        font-size: 38px;
        margin-top: 50px;
        letter-spacing: 1px;
    }
    #container-map p {
        font-size: 24px;
        text-align: right;
    }

    #container-map h2 strong{
        display: inline;
    }

    #map{
        height:630px;
    }


    #toolbar{
        right: unset;
        left: 0;
        top: 55px;
        height: 500px;
    }

    
    #toolbar .titre-box{
        font-family: 'Roboto-Bold';
        line-height: 35px;
        height: 35px;
        font-size: 15px;
    }
    #toolbar .types-service{
        height: calc(100% - 35px);
    }
    #toolbar ul li a p{
        text-align: left; 
    }

    #toolbar .caret{
        background: url(../img/flech-left.png) center no-repeat #c01f0d;
        top: 0;
        left: unset;
        right: -30px;
    }
    #toolbar.hidden{
        left: -240px;
    }
    #toolbar.hidden .caret{
        background: url("../img/flech-right.png") center no-repeat #c01f0d;
    }
    #map_form{
        padding-top: 8px;
    }
    #map_form h3{
        font-size: 18.5px;
    }
    #map_form h3.next{
        line-height: 20px;
        margin-bottom: 26px;
    }

    #map_form form{
        padding-top: 15px;
    }
    #map_form label{
        text-align: right;
        width: calc(100% - 365px);
        line-height: 25px;
        font-size: 15px;
        padding-right: 20px;
    }
    #map_form input[type=text], #map_form select, #map_form .select2-container .select2-selection--single{
        max-width: 360px;
        float: right;
    }
    #map_form input[type=submit] {
        height: 38px;
        line-height: 38px;
        font-size: 14px;
        margin-top: 16px;
        padding: 0 30px;
    }
}