/* MAP MARKERS */
        
        .map-marker {
            display: inline;
            position: absolute;            
            background-image: url("../images/icons/pin.svg");
            background-size: contain;
            background-position: top left;
            background-repeat: no-repeat;                                            
            width: 20px;
            height: 35px;            
            transition: .5s all ease;            
        }

        .map-marker:hover {
            color: inherit; /* required for IE */       
            background-image: url("../images/icons/hover-pin.svg");
        }

        .map-marker.active {
            width: 25px;
            height: 50px;
            color: inherit; /* required for IE */
            z-index: 10; /* should overlap non-active markers */
            background-image: url("../images/icons/active-pin.svg");                        
        }
    
    /* TIPPY CUSTOMIZATIONS */

        /* tooltip bubble (desktop only) */

            .tippy-tooltip.customized-theme {
                min-height: 100px;
                min-width: 200px;
                max-width: 500px;
                background-color: #fff !important;
                color: #000;
                -webkit-box-shadow: 4px 2px 9px 1px rgba(0,0,0,0.75);
                -moz-box-shadow: 4px 2px 9px 1px rgba(0,0,0,0.75);
                box-shadow: 4px 2px 9px 1px rgba(0,0,0,0.75);
                padding: 0px;
                display: flex;
                border-radius: 0px;
            }

            .tippy-content {
                width: 100%;
            }

            .tip {
                display: flex;
                height: 100%;
            }

            .tippy-popper[x-placement^=right] .tippy-arrow {
                border-right: 7px solid #fff;
            }
            .tippy-popper[x-placement^=left] .tippy-arrow {
                border-left: 7px solid #fff;
            }
            .tippy-popper[x-placement^=bottom] .tippy-arrow {
                border-bottom: 7px solid #fff;
            }
            .tippy-popper[x-placement^=top] .tippy-arrow {
                border-top: 7px solid #fff;
            }
            .tippy-popper {
                pointer-events: all;
            }

        /* left-side with text (desktop only) */
        
        .tip .left-tip {
            min-width: 332px;            
            float: left;
            position: relative;
            padding: 30px;
            text-align: left;
        }

            .left-tip:focus {
                outline: none;
            }

        .tip h2 {
            font-size: 16px;   
            font-weight: 500;     
            line-height: 16px;
            /* color: #707070; in case of WCAG */
            color: #999999;
            margin: 6px 0;
            padding: 0;
        }

        .tip h3 {
            font-size: 24px;  
            font-weight: 500;          
            line-height: 24px;
            margin-top: 0;
            margin-bottom: 30px;
            padding: 0;
        }

        .tip p {
            color: #575757;
        }

        .tip p a {
            color: #5068aa !important;
            font-weight: 500;
            text-decoration: none;
        }
        
        .close {
            background: 0 0;
            border: 0;
            margin: 0;
            padding: 0;            
            height: 15px;
            width: 15px;
            right: 190px;
            top: 20px;
            cursor: pointer;
            position: absolute;
            overflow: hidden;
        }

        .close:before {
            content: url("../images/icons/close.svg");
            display: block;
            height: 15px;
            width: 15px;
            line-height: 0;
            font-size: 0;
        }

        /* right-side with background image (desktop only) */

        .tip .right-tip {  
            min-width: 168px;                                  
            float: right;
            background-position: right !important;
            background-size: cover !important;
            background-repeat: no-repeat !important;
        }

        @media screen and (max-width: 800px) and (min-width: 639px) {
            .tip .left-tip {
                width: 220px;
            }
            .tip .right-tip {
                width: 138px;
            }
            .close {
                right: 183px;
            }
        }

    /* MAP LIST INDEX */

        #section-list button {
            width: 100%;
            text-align: center;
        }

        #section-list button:hover {
            background: #f6f6f7;
        }

            /* position-dependent borders */
            #section-list .grid-one-third.top .grid-inner {
                border-top: 1px solid #999;
                border-bottom: 0px solid #999;
            }

            #section-list .grid-one-third.middle .grid-inner {
                border-top: 1px solid #999;
                border-bottom: 0px solid #999;
            }

            #section-list .grid-one-third.bottom .grid-inner {
                border-top: 1px solid #999;
                border-bottom: 1px solid #999;
            }

        #section-list .grid-inner h2 {
            display: block;
            /* color: #707070; WCAG contrast */
            color: #b3b3b3;
            margin-bottom: 7.5px;                       
        }

        #section-list .grid-inner h3 {            
            color: #4d4d4d !important;
            margin-top: 0;                        
        }

        #section-list .map-list-unit {
            min-height: 100%;
        }

        /* border and background changed when clicked */
        #section-list .map-list-unit.active {
            background: #f6f6f7;            
            border-top: 4px solid #f93f26 !important;
        }         

    /* MOBILE */

        @media screen and (max-width: 639px) {

            /* MAP MARKERS */

                .map-marker {
                    width: 10px;
                    height: 10px;
                    line-height: 10px;
                }

                .map-marker.active {
                    width: 15px;
                    height: 15px;
                    line-height: 15px;
                }
            
            /* TIPPY CUSTOMIZATIONS */

                .tippy-tooltip {
                    visibility: hidden !important;
                }

            /* MAP LIST INDEX */

                #section-list .section-inner {
                    padding-top: 22px;
                }
    
                #section-list .grid-full.map-list-unit-wrapper {
                    margin: 0 7.5px;                    
                    height: 60px;                
                    overflow: hidden;
                }               

                #section-list .grid-inner {
                    padding: 0;
                }

                #section-list .map-list-unit, #section-list .map-list-unit.active {                                                    
                    background: inherit;
                }

                /* borders */
                #section-list .map-list-unit-wrapper {
                    border-top: 1px solid #d8d8d8 !important;
                    padding: 0;                    
                }

                #section-list .map-list-unit-wrapper:last-child {
                    border-bottom: 1px solid #d8d8d8 !important;
                }
            

                /* formatting of mobile collapsible text portion */
                #section-list .map-list-unit-left {
                    padding: 10px 0;                    
                }

                #section-list .map-list-unit, #section-list .map-list-unit-left:focus {
                    outline: none;
                }

                    #section-list .map-list-unit-left h2 {
                        font-size: 12px;   
                        line-height: 18px;
                        margin: 0 auto;
                    }

                    #section-list .map-list-unit-left h3 {
                        font-size: 18px;
                        line-height: 18px;
                        margin-bottom: 10px !important;
                    }

                    #section-list .map-list-unit-left p.unit-text {
                        font-size: 16px;
                        line-height: 22px;
                        color: #575757;
                        padding-right: 6px;
                    }

                    #section-list .map-list-unit-left p.unit-more a {
                        font-size: 12px;
                        line-height: 22px;
                        color: #5068aa;                        
                    }

                    #section-list .map-list-unit-left .chevron {
                        position: absolute;
                        top: 10px;
                        right: 28%;
                        height: 20px;
                        width: 20px;
                    }

                        .chevron.opened {
                            transform: rotate(90deg);
                        }   

                /* formatting of mobile collapsible background image */
                #section-list .map-list-unit-right {
                    background-size: cover !important;
                    min-height: 60px;
                }                

        }