
    .page-template-page-home-2023
    {

    }

        .page-template-page-home-2023 .map
        {
            position:relative;
            width:100vw;
            height:100vh;
            background-image:url('images/mapbg.jpg');
            background-position:center;
            background-repeat:no-repeat;
            background-size:cover;
        }

        .page-template-page-home-2023 .map .banner
        {
            position:absolute;
            top:11%;
            left:33%;
            width:33%;
            height:24%;
            background-image:url('images/svg/banner.svg');
            background-position:center;
            background-repeat:no-repeat;
            background-size:contain;
            z-index:99;
        }

        @media only screen and (max-width: 600px) {
            .page-template-page-home-2023 .map .banner {
                top:1%;
                left:10%;
                width:80%;
                height:34%;
            }
        }

        @media only screen and (max-width: 992px) and (min-width: 601px) {
            .page-template-page-home-2023 .map .banner {
                top:11%;
                left:10%;
                width:80%;
                height:34%;
            }
        }

        .page-template-page-home-2023 .map .icon
        {
            position:absolute;
            min-width:60px;
            min-height:60px;
            background-position:center;
            background-repeat:no-repeat;
            background-size:100% 100%;
        }

            .page-template-page-home-2023 .map .icon-pin {top:38%;left:44%;width:12%;height:20%;background-image:url('images/svg/icon-pin.svg')}
            .page-template-page-home-2023 .map .icon-electrician {top:20%;left:10%;width:7%;height:14%;background-image:url('images/svg/icon-electrician.svg')}
            .page-template-page-home-2023 .map .icon-hammer {top:43%;left:24%;width:7%;height:17%;background-image:url('images/svg/icon-hammer.svg')}
            .page-template-page-home-2023 .map .icon-hand {top:51%;left:3%;width:8%;height:16%;background-image:url('images/svg/icon-hand.svg')}
            .page-template-page-home-2023 .map .icon-violin {top:34%;left:41%;width:6%;height:12%;background-image:url('images/svg/icon-violin.svg')}
            .page-template-page-home-2023 .map .icon-paper {top:37%;left:67%;width:7%;height:11%;background-image:url('images/svg/icon-paper.svg')}
            .page-template-page-home-2023 .map .icon-dentist {top:20%;left:80%;width:9%;height:20%;background-image:url('images/svg/icon-dentist.svg')}
            .page-template-page-home-2023 .map .icon-talk {top:55%;left:73%;width:7%;height:14%;background-image:url('images/svg/icon-talk.svg')}
            .page-template-page-home-2023 .map .icon-tractor {top:49%;left:81%;width:12%;height:11%;background-image:url('images/svg/icon-tractor.svg')}

            .page-template-page-home-2023 .map .icon-computer {top:85%;left:83%;width:7%;height:14%;background-image:url('images/svg/icon-computer.svg')}
            .page-template-page-home-2023 .map .icon-glasses {top:86%;left:48%;width:12%;height:11%;background-image:url('images/svg/icon-glasses.svg')}
            .page-template-page-home-2023 .map .icon-kettle {top:86%;left:68%;width:12%;height:11%;background-image:url('images/svg/icon-kettle.svg')}
            .page-template-page-home-2023 .map .icon-saw {top:76%;left:11%;width:12%;height:13%;background-image:url('images/svg/icon-saw.svg')}
            .page-template-page-home-2023 .map .icon-tooth {top:80%;left:25%;width:12%;height:11%;background-image:url('images/svg/icon-tooth.svg')}

            @media screen and (max-width: 920px) {

                .page-template-page-home-2023 .map .icon-pin {top:32%;left:32%;width:40%;height:30%;background-image:url('images/svg/icon-pin.svg')}
                .page-template-page-home-2023 .map .icon-electrician {top:28%;left:10%;width:20%;height:20%;background-image:url('images/svg/icon-electrician.svg')}
                .page-template-page-home-2023 .map .icon-hammer {top:40%;left:1%;width:20%;height:20%;background-image:url('images/svg/icon-hammer.svg')}
                .page-template-page-home-2023 .map .icon-hand {top:55%;left:3%;width:21%;height:16%;background-image:url('images/svg/icon-hand.svg')}
                .page-template-page-home-2023 .map .icon-violin {top:28%;left:41%;width:22%;height:12%;background-image:url('images/svg/icon-violin.svg')}
                .page-template-page-home-2023 .map .icon-paper {top:37%;left:75%;width:27%;height:11%;background-image:url('images/svg/icon-paper.svg')}
                .page-template-page-home-2023 .map .icon-dentist {top:20%;left:74%;width:25%;height:20%;background-image:url('images/svg/icon-dentist.svg')}
                .page-template-page-home-2023 .map .icon-talk {top:55%;left:73%;width:20%;height:14%;background-image:url('images/svg/icon-talk.svg')}
                .page-template-page-home-2023 .map .icon-tractor {top:47%;left:74%;width:22%;height:11%;background-image:url('images/svg/icon-tractor.svg')}

                .page-template-page-home-2023 .map .icon-computer {top:87%;left:73%;width:27%;height:14%;background-image:url('images/svg/icon-computer.svg')}
                .page-template-page-home-2023 .map .icon-glasses {top:86%;left:38%;width:22%;height:11%;background-image:url('images/svg/icon-glasses.svg')}
                .page-template-page-home-2023 .map .icon-kettle {top:89%;left:2%;width:26%;height:10%;background-image:url('images/svg/icon-kettle.svg')}
                .page-template-page-home-2023 .map .icon-saw {top:72%;left:1%;width:23%;height:13%;background-image:url('images/svg/icon-saw.svg')}
                .page-template-page-home-2023 .map .icon-tooth {top:76%;left:25%;width:17%;height:7%;background-image:url('images/svg/icon-tooth.svg')}

            }

            @media screen and (max-width: 600px) {

                .page-template-page-home-2023 .map .icon-pin {top:32%;left:32%;width:40%;height:30%;background-image:url('images/svg/icon-pin.svg')}
                .page-template-page-home-2023 .map .icon-electrician {top:28%;left:10%;width:20%;height:20%;background-image:url('images/svg/icon-electrician.svg')}
                .page-template-page-home-2023 .map .icon-hammer {top:40%;left:1%;width:20%;height:20%;background-image:url('images/svg/icon-hammer.svg')}
                .page-template-page-home-2023 .map .icon-hand {top:55%;left:3%;width:21%;height:16%;background-image:url('images/svg/icon-hand.svg')}
                .page-template-page-home-2023 .map .icon-violin {top:28%;left:41%;width:22%;height:12%;background-image:url('images/svg/icon-violin.svg')}
                .page-template-page-home-2023 .map .icon-paper {top:37%;left:75%;width:27%;height:11%;background-image:url('images/svg/icon-paper.svg')}
                .page-template-page-home-2023 .map .icon-dentist {top:20%;left:74%;width:25%;height:20%;background-image:url('images/svg/icon-dentist.svg')}
                .page-template-page-home-2023 .map .icon-talk {top:55%;left:73%;width:20%;height:14%;background-image:url('images/svg/icon-talk.svg')}
                .page-template-page-home-2023 .map .icon-tractor {top:47%;left:74%;width:22%;height:11%;background-image:url('images/svg/icon-tractor.svg')}

                .page-template-page-home-2023 .map .icon-computer {top:87%;left:73%;width:27%;height:14%;background-image:url('images/svg/icon-computer.svg')}
                .page-template-page-home-2023 .map .icon-glasses {top:86%;left:38%;width:22%;height:11%;background-image:url('images/svg/icon-glasses.svg')}
                .page-template-page-home-2023 .map .icon-kettle {top:89%;left:2%;width:26%;height:10%;background-image:url('images/svg/icon-kettle.svg')}
                .page-template-page-home-2023 .map .icon-saw {top:72%;left:1%;width:23%;height:13%;background-image:url('images/svg/icon-saw.svg')}
                .page-template-page-home-2023 .map .icon-tooth {top:76%;left:25%;width:17%;height:7%;background-image:url('images/svg/icon-tooth.svg')}

            }

        .page-template-page-home-2023 #startSearch
        {
            display:inline-block;
                width:230px;
                height:40px;
            line-height:40px;
            vertical-align:middle;
            font-size:26px;
            font-weight:bold;
            color:white;
            border-radius:10px;
            border:none;
            background-color:#e20613;
            cursor:pointer;
            margin-bottom:30px;

            padding-left:40px;
            background-image:url('images/svg/loupe-white.svg');
            background-position:10px center;
            background-repeat:no-repeat;
            background-size:contain;

        }
            .page-template-page-home-2023 #startSearch.actif
            {
                background-color:#4cc3c7;
            }

    .popup
    {
        position:absolute;
            top:10%;
            left:0px;
        z-index:999;
    }

        .popup.popup-search
        {
            display:none;
        }

            .popup.popup-search.actif
            {
                display:block;
            }

        #searchBox
        {
            padding:50px;
            background-color:white;

            -webkit-box-shadow:0px 0px 25px 5px #4CC3C7;
            box-shadow:0px 0px 25px 5px #4CC3C7;
        }

            @media only screen and (max-width: 600px) {
                #searchBox
                {
                    padding:15px;
                }
            }

            @media only screen and (max-width: 992px) and (min-width: 601px) {
                #searchBox
                {
                    padding:30px;
                }
            }

            #searchBox h2
            {
                color:#4bc3c7;
            }

                #searchBox h2.refineSearch
                {
                    padding-left:45px;
                    background-image:url('images/svg/icon-refine.svg');
                    background-position: left;
                    background-repeat: no-repeat;
                    background-size:30px;
                }

            #closeSearch
            {
                display:inline-block;
                    width:45px;
                    height:45px;
                border:none;
                background-image:url('images/svg/icon-close.svg');
                background-position: center;
                background-repeat: no-repeat;
                background-color:transparent;
            }

            #searchBox h3
            {
                margin-bottom:20px;
                color:#144958;
                font-weight:bold;
            }

                #searchBox h3 span
                {
                    color:#4bc3c7;
                    font-weight:bold;
                }

            #trainingTypeColumn
            {
                border-right:3px solid #144958;
            }

            @media only screen and (max-width: 600px) {
                #trainingTypeColumn
                {
                    border-right:none;
                }
            }

            @media only screen and (max-width: 992px) and (min-width: 601px) {
                #trainingTypeColumn
                {
                    border-right:none;
                }
            }

            #searchBox ul
            {
                padding-left:0px;
                margin-bottom:0px;
                list-style-type:none;
            }

                #searchBox ul li
                {
                    position:relative;
                    padding-left:35px;
                    margin-bottom:10px;
                    font-size:20px;
                    background-image:url('images/svg/checkbox.svg');
                    background-position: left 5px;
                    background-repeat: no-repeat;
                    background-size:20px;
                    cursor:pointer;
                }

                #searchBox ul li.actif::before
                {
                    position:absolute;
                        top:9px;
                        left:4px;
                    display:block;
                        width:12px;
                        height:12px;
                    border-radius:3px;
                    content:"";
                    background-image:url('images/svg/checkbox-active.svg');
                    background-position:center;
                    background-repeat:no-repeat;
                    background-size:20px;
                }

            #clearSearch
            {
                display:inline-block;
                    height:40px;
                    padding-left:20px;
                    padding-right:20px;
                line-height:40px;
                vertical-align:middle;
                font-size:20px;
                color:white;
                border-radius:10px;
                border:none;
                background-color:#4cc3c7;
                cursor:pointer;
            }

                #clearSearch:hover
                {
                    background-color:#114a5b;
                }

            #updateSearch
            {
                display:inline-block;
                    height:40px;
                    padding-left:20px;
                    padding-right:20px;
                line-height:40px;
                vertical-align:middle;
                font-size:20px;
                color:white;
                border-radius:10px;
                border:none;
                background-color:#114a5b;
                cursor:pointer;
            }

                #clearSearch:hover
                {
                    background-color:#4cc3c7;
                }

            #searchResultsContainer
            {
                position:absolute;
                    left:0px;
                    bottom:0px;
                min-height:30%;
                width:80%;
                margin-left:10%;
            }

                @media only screen and (max-width: 600px) {
                    #searchResults div {display:none;}
                    #searchResults div:nth-child(1),
                    #searchResults div:nth-child(2),
                    #searchResults div:nth-child(3),
                    #searchResults div:nth-child(4){
                        display:block;
                    }
                }

                @media only screen and (max-width: 992px) and (min-width: 601px) {
                    #searchResults div {display:none;}
                    #searchResults div:nth-child(1),
                    #searchResults div:nth-child(2),
                    #searchResults div:nth-child(3),
                    #searchResults div:nth-child(4){
                        display:block;
                    }
                }

                #searchResults
                {

                }

                    #searchResults.notEmpty
                    {
                        padding:30px;
                        background-color:white;
                        -webkit-box-shadow: 0px 0px 25px 5px #4CC3C7;
                        box-shadow: 0px 0px 25px 5px #4CC3C7;
                    }

                    #searchResults div
                    {
                        padding-bottom:15px;
                    }

                    #searchResults div a
                    {
                        padding-top:10px;
                        padding-left:30px;
                        padding-right:60px;
                        padding-bottom:10px;
                        margin-bottom:0px;
                        width:100%;
                        height:100%;

                        border:3px solid #114a5b;
                        border-radius:8px;
                        background-color:#fff;
                        background-image:url('images/svg/icon-arrow.svg');
                        background-position:95% center;
                        background-repeat:no-repeat;
                        background-size:20px;
                        cursor:pointer;
                        display:flex;
                        align-items:center;
                    }

                    #searchResults div a:hover
                    {
                        background-color:#114a5b;
                        background-image:url('images/svg/icon-arrow-white.svg');
                    }

                        #searchResults div a span
                        {
                            margin-bottom:0px;

                            color:#114a5b;
                            font-size:16px;
                            font-weight:bold;
                        }

                        #searchResults div a:hover span
                        {
                            color:white;
                        }

                #resultTitle
                {
                    display:none;
                    margin-top:20px;
                    margin-bottom:20px;
                }

                #resultTitle.actif
                {
                    display:block;
                }
