.banner_menu_holder {
    position:fixed;
    width:100vw;
    height:auto;
    top: 0;
    z-index:100;
}

.banner_menu_holder2 {
    position: relative;
    width:100vw;
    height:auto;
    top: 0;
    z-index: 0;
}

.banner {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: auto;
    background-color: white;
    background-image: url('../images/master_trail/webswoosh.png');
    background-size: 350px auto;
    background-repeat: no-repeat;
    margin-top: 0px;
    z-index: 20;
    /* border:1px solid red;*/
}

.mct_svg_holder {
    position:relative;
    top:-10px;
    width: 250px;
    height: auto;
    margin-left: 250px;
    padding-top: 0px;
}

.mct_svg_image {
    width: 100%;
    height: auto;
    margin-top:10px;
    /*margin-left: 250px;
    padding-top: 0px;*/
}

ul.main_menu {
    list-style: none;
    position: relative;
    height:30px;
    top: 38px;
    /*margin-left: 70px;*/
   margin-left:2.0%;
    z-index:100;
   /* font-size:.95em;*/
    font-size:1.25em;
    /*border:1px solid red;*/
}

    ul.main_menu li {
        /*font-size: 1.0em;*/
        font-weight: 700;
        margin-left: 20px;
        display: inline-block;
        color: #009953;
        height: 20px;
        z-index: 10;
        /*border:1px solid red;*/
        /*border:1px solid red;*/
      
    }

    ul.main_menu li.first_li {
        margin-left: 0px;
        
        
    }

 ul.main_menu  li a {
        text-decoration: none;
        color: #009953;
        
       /*border:20px solid red;*/
 }

    ul.main_menu li a.trails,
    ul.main_menu li a.explore_loops,
    ul.main_menu li a.trail_rules,
    ul.main_menu li a.trail_safety_and_courtesy,
    ul.main_menu li a.bike_bus,
    ul.main_menu li a.con,
    ul.main_menu li a.mct_trails_news,
    ul.main_menu li a.master_plan {
        text-decoration: none;
        color: #009953;
        border: 8px solid transparent;
    }

 ul.main_menu li:hover, ul.main_menu li a:hover {
        color:#99CA3C;
 }
 
    ul.submenu {
        width: 300px;
        position: absolute;
        list-style: none;
        left: -55px;
        margin-top: 0px;
        display: none;
        z-index: 200;
        background-color: #fff;
        padding: 15px 0px 10px 0px;
    }

ul.submenu2 {
   width:250px;
    position: absolute;
    list-style: none;
     /*  left: 730px;*/
     left:850px;
    margin-top: 0px;
    display: none;
    z-index: 30;
    background-color: #fff;
    padding-top: 100px 0px 10px 0px;
}

ul.submenu li, ul.submenu2 li{
    width:250px;
    padding:10px 10px 0px 0px;
 
}
 
ul.submenu2 li {
        width: 250px;
        padding: 15px 10px 0px 0px;
 }

ul.submenu li.sublist.yellowlist{
    width:300px;
}



.hamburger {
    display: none;
    width: 50px;
    height: 50px;
    background-image: url('../images/hamburger2.png');
    background-repeat: no-repeat;
    position: absolute;
    left: 80px;
    top: 60px;
    z-index: 400;
    filter: invert(26%) sepia(97%) saturate(2261%) hue-rotate(143deg) brightness(98%) contrast(101%);
}


.hamburger:hover{
    cursor:pointer;
}

nav{
    display:none;
    width:0px;
}

#tm, #tm2, #sml, #sml2 {
    visibility: hidden;
}


nav {
    position: absolute;
    display: none;
    flex-direction: column;
    margin:0px auto;
    background-color: #fff;
    width:0vw;
    /*height:1100px;*/
   /* height:1000px;*/
   min-height:100vh;
    left:101vw;
    z-index:100;
    /*overflow-y:auto*/
    
 }

nav >.mobile_menu {
    position:relative;
    margin-top:100px;
    background-color: #fff;
    list-style-type: none;
   /* height:400px;*/
   height:auto;
  /* min-height:1500px;*/
    align-content:center;
    align-self:center;
    opacity:0;
    /*overflow-y:auto;
    border:1px solid green;*/
}

.mobile_menu li {
        margin-left: auto;
        margin-right: auto;
        width:250px;
        padding-top:5px;
        padding-bottom:20px;
        vertical-align:middle;
  }

.mobile_submenu, .mobile_submenu2{
    position:relative;
    display:none;
    list-style-type:none;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    padding-left:20px;
   
    
}

/*.mobile_submenu{
    height:800px;
    min-height:500px;
    overflow-y:auto;
    border:1px solid green;
}
*/

.mobile_menu li a {
    color: #009953;
    font-weight: 600;
    font-size: 1.3em;
    text-decoration: none;
}

.mobile_menu ul li a {
            color: #009953;
            font-weight:400;
            font-size: 1.2em;
            text-decoration: none;
 }

.arrow, .arrow2 {
    border: solid #009953;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    margin-left: 40px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.arrow2 {
    margin-left: 120px;
}


.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.menu {
        display: flex;
        position: fixed;
        flex-direction: row;
        top:158px;
        /*top:208px;*/
        width: 100vw;
        height: 75px;
        z-index: 10;
}

.menu a{
    text-decoration:dashed;
}

.menu_closures,
.menu_events,
.menu_map,
.menu_program {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 25vw;
    max-width: 25vw;
    height: 75px;
    min-height: 75px;
    color: #fff;
    cursor: pointer;
}
.menu_public_meetings,
.menu_master_plan,
.menu_comment
 {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 33.33vw;
    max-width: 33.33vw;
    height: 75px;
    min-height: 75px;
    color: #fff;
    cursor: pointer;
}

    .menu_closures > div a, .menu_events > div a, .menu_map > div a, .menu_program > div a,
    .menu_public_meetings > div a, .menu_master_plan > div a, .menu_comment > div a
    {
        margin-left: 10px;
        text-decoration: none;
        color: white;
        font-weight: bold;
        font-size: 20px;
        cursor: pointer;
    }

.menu_closures > div, .menu_events > div, .menu_map > div, .menu_program > div {
    margin-left: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}
.menu_closures {
    background-color: #FFC20E;
    cursor: pointer;
}

.menu_events, .menu_public_meetings {
    background-color: #99CA3C;
    cursor: pointer;
}

.menu_map, .menu_master_plan {
    background-color: #009953;
   cursor: pointer;
}

.menu_program, .menu_comment {
    background-color: #006633;
    cursor: pointer;
}




   
.mct_svg_image:hover{
    cursor:pointer;
}
.menu_svg, .menu_svg2,.menu_svg_tree_bench {
    width: 45px;
    height: auto;
    margin-top: 0px;
    cursor: pointer;
   
}
.menu_svg3 {
    width: 45px;
    height: auto;
    margin-top: 10px;
    cursor: pointer;
}
.menu_svg_tree_bench {
    width: 75px;
    height: auto;
    cursor: pointer;
}

.menu_svg {
    filter: invert(1);
    cursor: pointer;
}

.main_menu li:hover .submenu, .main_menu li.over .submenu {
    display: block;
}

.main_menu li:hover .submenu2, .main_menu li.over .submenu2 {
    display: block;
}
.svg {
    width: 50px;
    height: auto;
    margin-top: 0px;
}
.master_plan_banner {
    position: fixed;
    top:158px;
    width: 100vw;
    height: 50px;
    text-align: center;
    padding-top: 15px;
    background-color: #FFC20E;
    color: black;
    z-index: 10;
    border: 1px solid #FFC20E;
}

    .master_plan_banner a:link {
        text-decoration: none;
        color: black;
        font-weight:600;
    }

    @media screen and (max-width: 1774px) {
        ul.main_menu {
          margin-left:1.7%;
          
        }

       /* ul.submenu2 {
            left: 730px;
        }*/
    }

@media screen and (min-width: 1351px) and (max-width: 1651px) and (orientation: landscape) {
    nav > .mobile_menu {
        position: relative;
        margin-top: 100px;
        background-color: #fff;
        list-style-type: none;
        /* height:400px;*/
        height: 60vh;
        /* min-height:1500px;*/
        align-content: center;
        align-self: center;
        opacity: 0;
        overflow-y:auto;
        /*overflow-y:auto;
        border:1px solid green;*/
    }
}
    @media screen and (max-width: 1650px) {
        /*mobile_menu*/
        nav {
            display: block;
        }

        .hamburger {
            display: block;
            left: 200px;
            top: 46px;
        }

        #tm:checked ~ nav {
            left: 0vw;
            width: 100vw;
            transition-timing-function: ease-in-out;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 500ms;
        }

            #tm:checked ~ nav ul.mobile_menu {
                transition-delay: 3000ms;
                opacity: 1.0;
                /* border:1px gray;*/
            }

        #tm:checked ~ label span.hamburger {
            background-image: url('../images/x.png');
            background-repeat: no-repeat;
            transition-delay: 3000ms;
        }



        #sml:checked ~ .mobile_submenu {
            display: block;
        }

        #sml:checked + label > span.arrow {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            position: relative;
            top: 8px;
        }


        #sml2:checked ~ .mobile_submenu2 {
            display: block;
        }

        #sml2:checked + label > span.arrow2 {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            position: relative;
            top: 8px;
        }

        #tm2:checked + .mobile_menu, #tm2:checked nav {
            display: none;
        }

        /* .banner_menu_holder, .banner {
                position: relative;
        }*/

        .main_menu {
            display: none;
        }

        /*.menu_closures, .menu_events, .menu_map, .menu_program,
        .menu_public_meetings, .menu_master_plan, .menu_comment {
            width: 100vw;
            min-width: 100vw;
        }

        .menu_program, .menu_events {
            padding-left: 20px;
        }

        .menu_closures {
            padding-left: 40px;
        }

        .menu {
            width: 100vw;*/
        /*top: 108px;*/
        /*top: 158px;
            flex-direction: column;
            z-index: 10;
        }*/

        .master_plan_banner {
            /*position:relative;*/
            width: 100vw;
            top: 108px;
            z-index: 10;
        }
    }

    @media screen and (max-width: 1350px) {
        .menu {
            width: 100vw;
            top: 158px;
            /* top: 208px;*/
            flex-direction: column;
            z-index: 10;
        }

        .menu_closures, .menu_events, .menu_map, .menu_program,
        .menu_public_meetings, .menu_master_plan, .menu_comment {
            width: 100vw;
            min-width: 100vw;
        }

        .menu_program, .menu_events {
            padding-left: 20px;
        }

        .menu_closures {
            padding-left: 40px;
        }

        .mct_svg_holder {
            top: 0px;
        }

        .master_plan_banner {
            /*position:relative;*/
            width: 100vw;
            top: 108px;
            z-index: 10;
            /*background-color:red;*/
        }

        /* .master_plan_tab {
            top: -51px;
        }*/
    }

    /*@media screen and (max-width: 1250px) {
        .menu {
            width: 100vw;
            top: 48px;*/
    /*top: 208px;*/
    /*flex-direction: column;
            z-index: 10;*/
    /*  border:1px solid red;*/
    /*}
    }*/

    @media screen and (max-width: 1250px) {
        .menu {
            width: 100vw;
            top: 156px;
            /*top: 208px;*/
            flex-direction: column;
            z-index: 10;
        }

        .master_plan_banner {
            /*position:relative;*/
            width: 100vw;
            top: 158px;
            z-index: 10;
            /* background-color: red;*/
        }
    }

    @media screen and (max-width: 1185px) {
        .menu {
            width: 100vw;
            top: 158px;
            /*top: 208px;*/
            flex-direction: column;
            z-index: 10;
        }
    }

    @media screen and (max-width: 1080px) {
        .menu {
            width: 100vw;
            top: 159px;
            /*top: 208px;*/
            flex-direction: column;
            z-index: 10;
        }
    }

    @media screen and (max-width: 980px) {
        .image_holder, image_holder2, .image_holder3, .image_holder5 {
            display: none;
        }

        .hamburger {
            left: 200px;
            top: 43px;
        }

        .master_plan_banner {
            top: 158px;
        }

        .menu {
            /*top: 108px;*/
            top: 158px;
        }

        /*  .master_plan_tab {
            top: -50px;
        }*/

        .mct_svg_holder {
            top: 5px;
        }

        .hamburger {
            top: 55px;
        }
    }

    @media screen and (max-width: 921px) {
        .master_plan_banner {
            top: 108px;
        }

        .menu {
            top: 109px;
        }

        /*  .master_plan_tab {
            top: -69px;
        }*/

        /*.image_holder, image_holder2, .image_holder3{
            top:-40px;
            border:1px solid red;
        }*/
    }

    @media screen and (max-width: 600px) {
        .banner_menu_holder, .banner {
            position: relative;
        }

        .banner_menu_holder {
            width: 100vw;
            z-index: 300;
        }

        .banner {
            background-size: 200px auto;
        }

        .mct_svg_holder {
            width: 250px;
            height: auto;
            margin-left: 100px;
            margin-top: 0px;
            padding-top: 0px;
            top: 0px;
        }

        .mct_svg_image {
            position: relative;
            width: 100%;
            /*margin-left: 100px;
            margin-top: 10px;
            width: 250px;*/
        }

        .main_menu {
            display: none;
            width: 0px;
        }

        #mobile_menu_holder, .hamburger {
            display: block;
        }



        .hamburger {
            /*  position:relative;
           position:absolute;
           position:absolute;*/
            left: 80px;
            top: 50px;
            /*  border:1px solid red;*/
        }

        .menu {
            position: relative;
            /*margin-top: -50px;*/
            margin-top: -110px;
            /*margin-top:0px;*/
        }

        .master_plan_banner {
            position: relative;
            margin-top: -100px;
        }

        .menu_closures, .menu_events, .menu_map, .menu_program,
        .menu_public_meetings, .menu_master_plan, .menu_comment {
            width: 100vw;
            max-width: 100vw;
            justify-content: flex-start;
            height: 70px;
            min-height: 70px;
            font-size: 20px;
            padding-left: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: pointer;
        }

        .menu_closures, .menu_events, .menu_map,
        menu_public_meetings, .menu_master_plan, .menu_comment {
            padding-left: 35px;
        }

        .menu_svg, .menu_svg2, .menu_svg_tree_bench, .menu_svg3 {
            width: 40px;
            height: auto;
            margin-top: 0px;
        }

        .menu_svg_tree_bench {
            width: 75px;
        }

        .menu_closures > div a,
        .menu_events > div a,
        .menu_map > div a,
        .menu_public_meetings > div a,
        .menu_master_plan > div a,
        .menu_comment > div a {
            margin-left: 30px;
            text-decoration: none;
            color: white;
            font-weight: bold;
            font-size: 20px;
        }
    }

    @media screen and (max-width: 450px) {
        .mobile_image_holder img {
            display: block;
        }
    }

    @media screen and (max-width: 350px) {
        .mct_svg_holder {
            width: 200px;
        }

        .mct_svg_image {
            /*width: 200px;*/
            width: 100%;
        }

        .hamburger {
            left: 80px;
            top: 40px;
        }

        .menu_closures > div a,
        .menu_events > div a,
        .menu_map > div a,
        .menu_program > div a,
        .menu_public_meetings > div a,
        .menu_master_plan > div a,
        .menu_comment > div a {
            font-size: .90em;
        }

        .menu_svg, .menu_svg2, .menu_svg3 {
            width: 35px;
        }

        .menu_svg_tree_bench {
            width: 50px;
        }

        .menu_closures > div a,
        .menu_events > div a,
        .menu_map > div a,
        .menu_program > div a,
        .menu_public_meetings > div a,
        .menu_master_plan > div a,
        .menu_comment > div a {
            margin-left: 8px;
        }
    }

    @media screen and (max-width: 300px) {
        .mct_svg_holder {
            width: 150px;
        }

        .mct_svg_image {
            /*width: 150px;*/
            width: 100%;
        }

        .hamburger {
            width: 25px;
            left: 70px;
            top: 25px;
        }
    }

    /*@media screen and (min-width:1186px) and (max-width:1350px) and (orientation:landscape) {
        .banner_menu_holder, .banner {
            position: relative;
        }

        .menu {
            position: relative;
          
            margin-top: -80px;
        }

        .master_plan_banner {
            position: relative;
            margin-top: -100px;
        }

        .content_holder {
            top: -49px;
        }
    }

    @media screen and (min-width: 922px) and (max-width:1185px) and (orientation:landscape) {
        .banner_menu_holder, .banner {
            position: relative;
        }

        .menu {
            position: relative;*/
    /*margin-top: -50px;*/
    /*margin-top: -120px;
        }

        .master_plan_banner {
            position: relative;
            margin-top: -100px;
        }

        .content_holder {
            top: -49px;
        }
   }

@media screen and (max-width: 921px)  and (orientation:landscape) {
    .menu {
        position: relative;*/
    /*margin-top: -50px;*/
    /*margin-top: 10px;
        
    }
}*/

    /*from server*/
    /*two parts*/
    @media screen and (min-width:1201px) and (max-width:1350px) and (orientation:landscape) {
        .banner_menu_holder, .banner {
            position: relative;
        }

        .menu {
            position: relative;
            margin-top: -150px;
            z-index: 10;
        }

        .master_plan_banner {
            position: relative;
            margin-top: -100px;
        }

        .content_holder {
            top: -49px;
        }
    }

    @media screen and (min-width: 601px) and (max-width:1200px) and (orientation:landscape) {
        .banner_menu_holder, .banner {
            position: relative;
        }

        .menu {
            position: relative;
            /*margin-top: -50px;*/
            top: 0px;
        }

        .master_plan_banner {
            position: relative;
            margin-top: -100px;
        }

        .content_holder {
            top: -49px;
        }
    }