@media screen and (max-width: 1366px) 
{
    #footer
    {
    font-size: 12px;
    position: relative;
    top:20px;
    left: 0;
    padding: 0 0 20px 0px;
    }
    .toggle
    {
    position: fixed;
    top: 350px;
    left: 420px;
    }
    .sidebar
    {
     overflow-y: scroll;
    -webkit-overflow-scrolling: auto;
    }
}
@media screen and (max-width: 1080px) {
    .sidebar{
    width: 400px;
    height: 100%;
    }
}

@media screen and (max-width: 1024px) {
    h1{
        font-size: 25px;
        }
    #clearSelection{
        margin-top: 10px;
        }
    .sidebar{
        width: 325px;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: auto;
        z-index: 6;
        }
   .tab a{
        padding: 10px 20px;
        margin: auto;
        background-color: #2a2a2a;
        border-radius: 10px 10px 0 0;
        display:block;
        width: 15%;
        float: left;
        margin: 0 5px 0 3px;
    }
    #sidebartoggler {
         display: none;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
        left: -350px;
        }
    #sidebartoggler:checked + .page-wrap .toggle {
        margin-top:12px;
        left: 0px; 
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        transform: rotate(180deg);
        padding: 0px 5px 20px 5px;
        border-radius: 10px 0px 0px 10px;
        }
    #sidebartoggler:checked + .page-wrap #mapDiv {
        padding-left: 0px; 
        }
    #mapOptions button
    {
        width: 90%;
        margin-bottom: 5px;
        background-color: transparent;
        border:solid 1px #acacac;
        border-radius: 5px;
        padding: 10px;
        font-size: 13px;
    }    
    .toggle 
    {
        position: fixed;
        top: 350px;
        left: 345px;
        }
    #mapDiv {
        padding-left: 340px; 
        overflow:hidden;
        }

    #mapDiv_zoom_slider{
        display:none;
    } 
    
    #status
    {
        position: relative;
        z-index: 5;
    }

    #footer
    {
        font-size: 12px;
        margin-right: 20px;
        position: relative;
        left: 0;
        bottom:0;
        padding: 0 0 20px 20px;
        }
}


@media screen and (max-width: 768px) {
   .toggle 
    {
      position: fixed;
      top: 450px;
      left: 45px;
      -ms-transform: rotate(180deg); /* IE 9 */
      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
      transform: rotate(180deg);
      border-radius: 10px 0px 0px 10px;
    }

    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -300px;
      width: 325px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 450px;
        left: 345px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
    .cityLogo img
    {
        width: 50%;
    }
    .browseAloud
    {
        float: right;
        margin-top: 15px;
        width: 100px;
    }
    .browseAloud img
    {
        position: relative;
        top: 5px;
    }
}

@media screen and (max-width: 736px) 
{
    .toggle
    {
        position: fixed;
        top: 100px;
        left: 15px;
    }
    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -330px;
      width: 325px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 100px;
        left: 345px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
}

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

  .toggle 
    {
      position: fixed;
      top: 150px;
      left: 5px;
    }

    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -340px;
      width: 325px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 150px;
        left: 345px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
    #status
    {
        max-width: 300px;
    }
}
@media screen and (max-width: 620px) 
{
    .toggle
    {
        position: fixed;
        top: 380px;
        left: 15px;
    }
    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -330px;
      width: 325px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 350px;
        left: 345px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
    #status
    {
        margin-top: 10px;
    }
}

@media screen and (max-width: 480px) 
{
    .toggle
    {
        position: fixed;
        top: 100px;
        left: 15px;
    }
    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -330px;
      width: 325px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 350px;
        left: 345px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
    #status
    {
        margin-top: 10px;
    }

}

@media screen and (max-width: 414px) 
{
    .toggle 
    {
      position: fixed;
      top: 250px;
      left: 5px;
    }

    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -325px;
      width: 310px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 250px;
        left: 330px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
    #status
    {
        position: relative;
        top: 0px;
    }
    
}

@media screen and (max-width: 375px) 
{
    .toggle 
    {
      position: fixed;
      top: 250px;
      left: 5px;
    }

    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -325px;
      width: 310px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 250px;
        left: 330px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
    #status
    {
        position: relative;
        top: 0px;
    }
    
}

@media screen and (max-width: 320px) 
{
        .toggle 
    {
      position: fixed;
      top: 150px;
      left: 0px;
    }

    #mapDiv {
      padding-left: 0px; 
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: -325px;
      width: 260px;
      z-index: 5;
    }

    #sidebartoggler:checked + .page-wrap .toggle 
      {
        margin-top:12px;
        left: 5px; 
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        padding: 0px 5px 20px 5px;
        border-radius: 0px 10px 10px 0px;
        position: fixed;
        top: 150px;
        left: 280px;
        }
    #sidebartoggler:checked + .page-wrap .sidebar {
      left: 0px;
    }
}