#preloadImages {
    position: fixed;
    top: 100%;
    width: 0px;
    height: 0px;
}

html {
    height: 100%;
    overflow: auto;
}

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: url('../img/bg.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-top: 55px;
}

body > .container {
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

input {
    width: 100%;
}

p {
    font-size: 12px;
    line-height: 1.6;
    color: #000;
}

hr {
    max-width: 400px;
    border-color: #999999;
}

.brand,
.address-bar {
    display: none;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
}

.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 3px;
}

.navIcon {
    height: 20px;
    position: relative;
    top: 6px;
    float: left;
    padding-right: 10px;
}

.trees {
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

nav li:hover .trees {
    opacity: 0.6;
}

nav li:first-child img {
    padding-right: 0px;
}

nav li:last-child .trees {
    max-width: 65%;
    height: 25px;
    bottom: 0px;
    top: auto;
}

.img-full {
    min-width: 100%;
}

.brand-before,
.brand-name {
    text-transform: uppercase;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}

.box {
    margin-bottom: 20px;
    padding: 30px 15px;
    background: #fff;
    background: rgba(255,255,255,0.9);
}

.intro-text {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
}

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}

.container > footer {
    background: rgb(140,98,56);
    height: 40px;
}

footer span {
    float: left;
    line-height: 40px;
    position: relative;
    left: 40px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    opacity: 0.5;
    color: #fff;
}

#socialImages {
    margin-right: 25px;
}

.legendFooter span {
    left: 15px;
}

.legendFooter #socialImages {
    margin-right: 0px;
}

#socialImages img {
    height: 22px;
    float: right;
    margin-top: 9px;
    margin-right: 15px;
    opacity: 0.8;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

#socialImages img:hover {
    opacity: 1;
}

#logo {
    position: relative;
    width: 110px;
    z-index: 1000;
    left: 0px;
    top: -50px;
    height: auto;
}

#logo2 {
    position: absolute;
    width: 95px;
    z-index: 1000;
    right: 15px;
    top: -39px;
}

#heroUnit {
    overflow: hidden;
    height: 320px;
    position: relative;
}

#gameBanner {
    width: 120%;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    left: -50px;
    display: none;
}

#fishBanner {
    height: 135%;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: -45px;
    right: -128px;
    display: none;
}

#wildlifeBanner {
    height: 125%;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: 0px;
    display: none;
}

#boatingBanner {
    height: 120%;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: -20px;
    left: -160px;
    display: none;
}

.welcomeLogo {
    pointer-events: none;
    z-index: 3;
    position: absolute;
    top: 35px;
    width: 40%;
    max-width: 456px;
}

.welcomeLogo.mobile {
    display: none;
}

.heroCarousel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    position: absolute;
}

.heroCarousel img {
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#boatingCarousel img {
    top: -250px;
}

.heroCarousel img.active {
    opacity: 1;
}

#contentContainer img {
    float: right;
    width: 200px;
    margin-left: 20px;
    margin-bottom: 20px;
}

#searchTooltip {
    position: absolute;
    z-index: 3;
    top: -51px;
    right: 77.5px;
    width: 250px;
}

#heroContent {
    position: relative;
    background: #fff;
    z-index: 2;
}

#heroContent h3 {
    color:rgb(97,132,68); 
    font-family: 'Oswald', sans-serif;
    margin-bottom: 20px;
}

#heroContent > div:first-child {
    padding: 20px;
    padding-left: 40px;
    padding-top: 15px;
    position: absolute;
}

#heroContent > div:last-child {
    padding: 15px;
    padding-left: 40px;
    height: 100%;
    margin-left: 66.66666667%;
}

#huntingLinks {
    position: relative;
    top: 5px;
    left: 10px;
}

#huntingLinks a {
    width: 33%;
    float: left;
    display: block;
}

#searchContainer {
    border-radius: 15px;
    background: rgb(97,132,68);
    padding: 20px;
    padding-top: 3px;
    position: relative;
    right: 25px;
    border: 2px solid rgb(54,89,33);
}

#searchContainer h5 {
    color: #fff;
    margin-bottom: 7px;
    display: none;
}

#searchContainer label {
    color: #fff;
    margin-top: 8px;
    margin-bottom: 0px;
    width: 100%;
    position: relative;
}

#searchContainer input {
    color: #444;
    border: 2px solid rgb(54,89,33);
    padding-left: 5px;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
}

#speciesLabel {
    margin-top: 2px !important;
}

#mapMyLocation {

}

#locationCheck {
    position: absolute;
    width: 18px;
    right: 0px;
    height: 18px !important;
    margin-top: 2px;
}

#searchContainer select {
    color: #333;
    width: 100%;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.fishGrouping span {
    color: #FFDB1F;
    font-size: 12px;
    font-weight: bold;
    padding-left: 1px;
}

.goToMap {
    margin-top: 8px;
    background: rgb(140,98,56);
    border: 1px solid #65421c;
    border-radius: 30px;
    padding: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.goToMap .colorDiv {
    left: 10px;
    border-radius: 30px;
    background: rgba(255,219,31,0.7);
}

.goToMap span {
    color: #fff;
    text-align: center;
    font-weight: bold;
    display: block;
    position: relative;
}

.goToMap img {
    position: absolute;
    height: 20px;
    top: 6px;
    right: 13px;
}

.goToMap a {
    position: absolute;
    display: block;
    opacity: 0;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.hoverArrow {
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.goToMap:hover .colorDiv {
    opacity: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}


.goToMap:hover .hoverArrow {
    opacity: 1;
}

#areaList, #boatType, #trailType {
    height: 120px;
    background: #fff;
    border-radius: 3px;
    border: 2px solid rgb(54,89,33);
    overflow: auto;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#areaList ul,
#boatType ul,
#trailType ul {
    padding-left: 0px;
    margin-top: 3px;
    margin-bottom: 3px;
}

#areaList li,
#boatType li,
#trailType li {
    list-style-type: none;
    color: #666;
    font-size: 12px;
    line-height: 16px;
    padding-left: 5px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#areaList li:hover,
#boatType li:hover,
#trailType li:hover {
    background: #dedede;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

#areaList li.active,
#boatType li.active,
#trailType li.active {
    background: rgb(255,219,31);
    color: rgb(140,98,56);
}

.deactivate {
    background: #dedede !important;
    opacity: 0.6;
}

.mapMyLocation {
    padding-left: 1px;
    padding-right: 1px;
}

.mapMyLocation label.deactivate {
    background: none !important;
}

#menuBar {
    height: 40px;
    background: rgb(99,135,73);
    z-index: 2;
    position: relative;
}

#menuBar > div {
    position: relative;
    height: 100%;
    float: left;
}

#printMap, #showHelp, #mapLayers, #filters {
    float: right !important;
}

#printMap, #showHelp {
    padding-right: 15px;
}

#printMap img, #showHelp img {
    height: 55%;
    margin-top: 40%;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0.8;
    cursor: pointer;
}

#showHelp img {
    position: relative;
    top: -1px;
    height: 59%;
}


#printMap img:hover, #showHelp img:hover {
    opacity: 1;
}

#mapLayers {
    width: 285px;
    background: rgb(79,109,57);
    position: absolute;
    right: 0px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#mapLayers:hover {
    cursor: pointer;
    background: rgb(67,92,48);
}

#mapLayers > span {
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    margin-left: 15px;
}

#toggleDropdown {
    position: absolute;
    top: 0px;
    height: 40px;
    left: 0px;
    right: 0px;
}

#layerPanel {
    cursor: auto;
    opacity: 0.95;
    overflow: hidden;
    max-height: 0px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#layerPanel.active {
    overflow-y: auto;
}

#layersList {
    background: #fff;
}

#layerPanel.active .roundedTwo label {
    display: block;
}

#layerTypes {
    height: 35px;
}

#layerTypes > div {
    width: 25%;
    float: left;
    height: 100%;
    border-bottom: 1px solid rgb(99,135,73);
    border-left: 1px solid rgb(99,135,73);
    background: #fff;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#layerTypes > div:hover {
    background: rgba(99,135,73,0.8);
}

#layerTypes > div:hover span {
    color: #fff;
}

#layerTypes > div span {
    color: rgb(99,135,73);
    font-family: 'Oswald', sans-serif;
    width: 100%;
    display: block;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
}

#layerTypes > div:first-child span:first-child {
    font-size: 12px;
    line-height: 17.5px;
    position: relative;
    top: 2px;
}

#layerTypes > div:first-child span:last-child {
    line-height: 17.5px;
    position: relative;
    top: -3px;
}

#layerTypes > div:nth-child(3) span:first-child {
    font-size: 12px;
    line-height: 17.5px;
    position: relative;
    top: 2px;
}

#layerTypes > div:nth-child(3) span:last-child {
    line-height: 17.5px;
    position: relative;
    top: -3px;
}

#layerTypes > div.active {
    background: rgb(99,135,73);
}

#layerTypes > div.active span {
    color: #fff;
}

.layerType {
    display: none;
}

.layerType.active {
    display: block;
}

.layerItem {
    width: 100%;
    padding: 5px;
    height: 40px;
    border: 1px solid #aaa;
    border-top: 0px;
    border-right: 0px;
}

.legendItem {
    border-top: 2px solid #aaa;
}

.layerItem.legendItem > div {
    width: 50%;
}

.layerItem > div {
    float: left;
    background: #fff;
    height: 100%;
}

.layerImage {
    width: 10%;
    float: left;
}

.layerItem img {
    position: relative;
    top: 4px;
    height: 22px;
    left: 3px;
}

.layerTitle {
    width: 80%;
    padding-left: 3px;
    float: left;
}

.layerItem.legendItem .layerTitle {
    padding-left: 17px;
}

.layerCheck {
    width: 10%;
}

.layerItem span {
    line-height: 30px;
    font-family: 'Oswald', sans-serif;
    padding-left: 5px;
    font-size: 12px;
    color: rgb(99,135,73);
}

.bestBets {
    font-family: 'Shadows Into Light', cursive !important;
    font-size: 14px !important;
    color: rgb(194,160,114) !important;
    font-weight: 700;
}

.roundedTwo {
    width: 24px;
    height: 24px;
    top: 3px;
    right: 4px;
    position: relative;
    background: rgb(99,135,73);
    border-radius: 50px;
}
.roundedTwo label {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 1px;
    left: 1px;
    cursor: pointer;
    background: none;
    border-radius: 50px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.roundedTwo label:after {
    content: '';
    width: 16px;
    height: 7px;
    position: absolute;
    top: 7px;
    left: 3px;
    border: 3px solid #fff;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.roundedTwo input[type=checkbox] {
  visibility: hidden;
}
.roundedTwo input[type=checkbox]:checked + label:after {
  opacity: 1;
}

.arrowDown {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #fff;
    position: absolute;
    top: 15px;
    right: 15px;
    pointer-events: none;
}

#searchInput {
    margin-left: 10px;
    width: 29px;
  -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

#searchInput.active {
    width: 220px;
}

#searchInput > input {
    position: absolute;
    top: 17%;
    height: 66%;
    border-radius: 6px;
    border: 0px;
    padding-left: 8px;
    padding-right: 0px;
    z-index: 1;
    width: 100%;
    color: rgba(85,85,85,0);
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

#searchInput ::-webkit-input-placeholder {
   color: rgba(0,0,0,0);
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: bold;
  -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;   
}

#searchInput :-moz-placeholder { /* Firefox 18- */
   color: rgba(0,0,0,0);
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: bold;
  -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

#searchInput ::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(0,0,0,0);
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: bold;
  -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

#searchInput :-ms-input-placeholder {  
   color: rgba(0,0,0,0);
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: bold;
  -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

#searchInput.active input::-webkit-input-placeholder {
   color: rgba(0,0,0,0.4);
   font-weight: 400;
}

#searchInput.active input:-moz-placeholder { /* Firefox 18- */
   color: rgba(0,0,0,0.4);
   font-weight: 400;  
}

#searchInput.active input::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(0,0,0,0.4);
   font-weight: 400;  
}

#searchInput.active input:-ms-input-placeholder {  
   color: rgba(0,0,0,0.4);
   font-weight: 400;  
}

#searchInput.active > input {
    padding-right: 30px;
    color: rgba(85,85,85,1);
}

#searchInput > img {
    position: absolute;
    z-index: 2;
    height: 50%;
    top: 25%;
    right: 5px;
    opacity: 0.5;
    cursor: pointer;
}

#addressInput {
    width: 30px;
    margin-left: 12%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#clickCatcher {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 30px;
    z-index: 8;
    cursor: pointer;
}

#addressInput.active {
    width: 220px;
}

#addressInput input {
    padding-right: 27px;
    width: 29px;
    background-position: 49%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#addressInput.active input {
    width: 100%;
    background-position: 97%;
}

#addressInput > div > input {
/*    position: absolute;
    top: 17%;
    height: 66%;
    border-radius: 6px;
    border: 0px;
    padding-left: 8px;
    padding-right: 32px;
    z-index: 1;*/
}

.geocoder-control-suggestions > span,
.geocoder-control-suggestions > ul {
    display: none;
}

.geocoder-control-suggestions > span:first-of-type,
.geocoder-control-suggestions > ul:first-of-type {
    display: block;
}

#addressInput > img {
    position: absolute;
    z-index: 2;
    height: 50%;
    top: 25%;
    right: 5px;
    opacity: 0.8;  
}

.dropdown-menu > li > a {
    padding: 3px 10px;
    cursor: pointer;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

.dropdown-menu > li > a > span {
    position: relative;
    top: 1px;
    padding-left: 5px;
}

#filters {
    margin-right: 15px;
}

.filter {
    background: rgb(255,219,52);
    position: relative;
    height: 60%;
    top: 22%;
    border-radius: 5px;
    opacity: 0.8;
    cursor: pointer;
    float: left;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.filter:hover {
    opacity: 1;
}

.filter img {
    position: absolute;
    height: 60%;
    top: 20%;
    left: 8px;
}

.filter span {
    font-family: 'Oswald', sans-serif;
    color: rgb(140,98,56);
    padding-left: 30px;
    padding-right: 12px;
    display: block;
    padding-top: 3px;
    font-size: 12px;
}

#mapContainer {
    background: #fff;
    z-index: 1;
    position: relative;
    top: 0px;
    bottom: 40px;
    overflow: hidden;
}

#basemaps-wrapper {
    position: absolute;
    top: 15px;
    left: 58px;
    opacity: 0.9;
    z-index: 2;
}

#basemaps-wrapper select {
    border-radius: 3px;
    height: 27px;
}

#northArrow {
    display: none;
}

#printLogo {
    display: none;
}

#mapLegend {
    display: none;
}

#zoomToLocation {
    position: absolute;
    top: 83px;
    left: 15px;
    background: #fff;
    width: 26px;
    height: 26px;
    opacity: 0.85;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#zoomToLocation:hover {
    opacity: 1;
}

#zoomToLocation img {
    position: absolute;
    width: 16px;
    top: 5px;
    left: 5px;
    opacity: 0.8;
}

.leaflet-popup h4,
.leaflet-popup h5,
.leaflet-popup {
    font-family: 'Oswald', sans-serif;
}

.leaflet-popup-content > a {
    display: block;
    text-transform: uppercase;
    word-break: break-all;
}

.leaflet-popup > a {
    top: 6px !important;
    right: 4px !important;
}

.leaflet-popup-content p {
    margin: 0px !important;
    text-transform: uppercase;
    color: #666;
}

.leaflet-popup-content > p {
    line-height: 1.5;
}

.leaflet-measure-resultpopup p {
    margin-top: 5px !important;
}

.leaflet-measure-resultpopup a {
    margin-top: 0px !important;
    margin-bottom: 5px !important;
}

.leaflet-popup h4 {
    margin-right: 24px;
    margin-bottom: 6px;
}

.leaflet-popup h5 {
    opacity: 0.85;
    margin-right: 24px;
}

.leaflet-popup h6 {
    opacity: 0.7;
    margin-right: 24px;
}

.halfColumn {
    width: 50%;
    padding-right: 5px;
    display: inline-block;
}

.halfColumn span {
    opacity: 0.7;
}

.Available span {
    opacity: 1;
    font-weight: bold;
}

.Good span {
    opacity: 1;
    font-weight: bold;
    color: rgb(99,135,73);
}

.Best.Bet span {
    opacity: 1;
    font-weight: bold;
    color: #DEB200;
}

.Prohibited span {
    font-weight: bold;
    color: rgb(139, 97, 55);
}

.leaflet-marker-pane {
    opacity: 0.9;
}

.zoomToFeature {
    opacity: 0.3;
    position: absolute;
    right: 4px;
    top: 28px;
    width: 26px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.zoomToFeature:hover {
    opacity: 0.6;
}

.whatsNearby {
    opacity: 0.3;
    position: absolute;
    right: 8px;
    top: 56px;
    width: 20px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.whatsNearby:hover {
    opacity: 0.6;
}

.whatsNearby.disabled {
    opacity: 0.07;
    cursor: auto;
    pointer-events: none;
}

.navigateToFeature {
    opacity: 0.3;
    position: absolute;
    right: 10px;
    top: 86px;
    width: 17px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.navigateToFeature:hover {
    opacity: 0.6;
}

.navigateToFeature.disabled {
    opacity: 0.07;
    cursor: auto;
    pointer-events: none;
}

#nearbyPanel {
    position: absolute;
    width: 285px;
    right: -285px;
    background: #8C6238;
    top: 0px;
    bottom: 0px;
    color: #fff;
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
    z-index: 1000;
}

#nearbyPanel img {
    float: left;
    margin-top: 2px;
}

#nearbyPanel span {
    font-size: 12px;
}

#nearbyPanel b {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    position: absolute;
    left: 35px;
    bottom: 5px;
}

#nearbyPanel h6 {
    margin-top: 2px;
    margin-bottom: 20px;
    margin-left: 30px;
}

.nearbyFeature {
    border-bottom: 1px solid #fff;
    padding: 5px;
    position: relative;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.nearbyFeature:hover {
    cursor: pointer;
    background: rgba(255,255,255,0.2);
}

#closeNearby {
    position: absolute;
    z-index: 100;
    right: -7px;
    top: 7px;
    font-family: Tahoma, Verdana, sans-serif;
    width: 18px;
    height: 14px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    font-size: 16px !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s;
}

#closeNearby:hover {
    opacity: 1;
}

#nearbyPanel.active {
    -webkit-animation: openNearby .3s;
    -moz-animation:    openNearby .3s;
    -o-animation:      openNearby .3s;
    animation:         openNearby .3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode:    forwards;
    -o-animation-fill-mode:      forwards;
    animation-fill-mode:         forwards;
}

#nearbyPanel.out {
    -webkit-animation: closeNearby .3s;
    -moz-animation:    closeNearby .3s;
    -o-animation:      closeNearby .3s;
    animation:         closeNearby .3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode:    forwards;
    -o-animation-fill-mode:      forwards;
    animation-fill-mode:         forwards;
}

@-webkit-keyframes openNearby {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@keyframes openNearby {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@-moz-keyframes openNearby {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@-o-keyframes openNearby {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@-webkit-keyframes closeNearby {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
} 
@keyframes closeNearby {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
}
@-moz-keyframes closeNearby {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
}
@-o-keyframes closeNearby {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
}

#nearbyPanel > div {
    padding-bottom: 1px;
}

#nearbyPanel p {
    color: #fff;
}

#nearbyPanel a {
    color: #fff;
    font-size: 12px;
    text-decoration: underline;
    word-wrap: break-word;
    display: block;
    margin-bottom: 5px;
}

#detailPanel {
    position: absolute;
    width: 285px;
    right: -285px;
    background: rgb(99,135,73);
    top: 0px;
    bottom: 0px;
    color: #fff;
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
    z-index: 1000;
}

#detailPanel span {
    font-size: 12px;
}

.iconRow {

}

.iconRow img {
    width: 25px;
    margin-right: 3px;
    margin-bottom: 6px;
}

#closeDetail {
    position: absolute;
    z-index: 100;
    right: -7px;
    top: 7px;
    font-family: Tahoma, Verdana, sans-serif;
    width: 18px;
    height: 14px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    font-size: 16px !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s;
}

#closeDetail:hover {
    opacity: 1;
}

#detailPanel.active {
    -webkit-animation: openDetail .3s;
    -moz-animation:    openDetail .3s;
    -o-animation:      openDetail .3s;
    animation:         openDetail .3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode:    forwards;
    -o-animation-fill-mode:      forwards;
    animation-fill-mode:         forwards;
}

#detailPanel.out {
    -webkit-animation: closeDetail .3s;
    -moz-animation:    closeDetail .3s;
    -o-animation:      closeDetail .3s;
    animation:         closeDetail .3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode:    forwards;
    -o-animation-fill-mode:      forwards;
    animation-fill-mode:         forwards;
}

@-webkit-keyframes openDetail {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@keyframes openDetail {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@-moz-keyframes openDetail {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@-o-keyframes openDetail {
    from {
        right: -285px;
    }
    to {
        right: 0px;
    }
}
@-webkit-keyframes closeDetail {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
} 
@keyframes closeDetail {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
}
@-moz-keyframes closeDetail {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
}
@-o-keyframes closeDetail {
    from {
        right: 0px;
    }
    to {
        right: -285px;
    }
}

#detailPanel > div {
    padding-bottom: 1px;
}

#detailPanel p {
    color: #fff;
}

#detailPanel a {
    color: #fff;
    font-size: 14px;
    text-decoration: underline;
    word-wrap: break-word;
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

#managedHuntsLinks {
    margin-bottom: 10px;
}

.iScrollIndicator {
    opacity: 0.5;
}

.moreInfo {
    opacity: 0.3;
    position: absolute;
    right: 10px;
    bottom: 33px;
    width: 15px;
    cursor: pointer;
    z-index: 1;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.moreInfoButton {
    text-align: center;
    background: #eee;
    color: #666;
    padding: 5px;
    margin-top: 10px;
    border: 1px solid #638749;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    letter-spacing: 0.8px;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

.moreInfoCarrot {
    position: absolute;
    right: 6px;
    top: -7px;
    font-size: 24px;
}

.moreInfoButton:hover {
    background: #638749;
    color: #eee;
}

.zoomToPath {
    opacity: 0;
    position: absolute;
    right: 9px;
    top: 58px;
    width: 15px;
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.zoomToPath.active {
    opacity: 0.3;
    cursor: pointer;
    pointer-events: auto;
}

.zoomToPath.active:hover {
    opacity: 0.6;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.colorBox {
    width: 20px;
    height: 20px;
    float: left;
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 8px;
}

.leaflet-popup-content {
    margin: 11px 11px 10px 10px !important;
    min-width: 300px !important;
}

.leaflet-popup-close-button {
    font-size: 18px !important;
    padding: 4px 20px 0 0 !important;
}

.loadingGif {
    width: 24%;
    margin-left: 38%;
    margin-top: 10%;
    opacity: 0.8;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: rgba(255,255,255,0.9) !important;
}

#phoneMenuToggle {
    display: none;
}

.mobileMenuToggle {
    display: none;
}

.onoffswitch {
    float: right !important;
    height: 80% !important;
    position: relative;
    width: 75px;
    margin-top: 4px;
    margin-right: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    height: 32px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 32px; padding: 0; line-height: 28px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 12px;
    background-color: #638749; color: #FFFFFF;
    line-height: 28px;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 7px;
    background-color: #4F6D39; color: #CCC;
    text-align: right;
}
.onoffswitch-switch {
    display: block;
    width: 22px;
    margin: 4px;
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 42px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 2px; 
}
.onoffswitch.landing {
    position: absolute;
    top: 58px;
    right: 20px;
    margin-top: 0px;
    margin-right: 0px;
    width: 60px;
    height: 22px !important;
    z-index: 10;
}
.onoffswitch.landing.boating {
    top: 109px;
}
.onoffswitch.landing label {
    margin-top: 0px !important;
    height: 22px !important;
    border-radius: 10px;
    border: 2px solid #365921;
}
.onoffswitch.landing label img {
    margin: 0px;
    width: 20px;
    top: -1px;
}
.onoffswitch.landing .onoffswitch-switch {
    right: 36px;
}
.onoffswitch.landing .onoffswitch-inner:before,
.onoffswitch.landing .onoffswitch-inner:after {
    font-size: 12px;
}
.onoffswitch.landing .onoffswitch-inner:before {
    padding-left: 10px;
    line-height: 18px;
}
.onoffswitch.landing .onoffswitch-inner:after {
    padding-right: 6px;
    line-height: 18px;
}
.onoffswitch.landing .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
@media screen and (min-width:768px) {

    .brand {
        display: inherit;
        margin: 0;
        padding: 30px 0 10px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 5em;
        font-weight: 700;
        line-height: normal;
        color: #fff;
    }

    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }

    .address-bar {
        display: inherit;
        margin: 0;
        padding: 0 0 40px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        text-transform: uppercase;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 3px;
        color: #fff;
    }

    .navbar {
        border-radius: 0;
        margin-bottom: 0px;
        background: rgb(140,98,56);
        width: 99%;
        left: 0.5%;
        height: 32px;
    }

    .navbar-collapse {
        padding: 0px;
    }

    .navbar-header {
        display: none;
    }

    .navbar {
        min-height: 0;
        border: 0px;
    }

    .navbar-default {
        border: none;
        background: #fff;
        background: rgba(255,255,255,0.9);
    }

    .navbar-nav>li {
        height: 32px;
        padding-left: 15px;
        padding-right: 15px;
        cursor: pointer;
    }

    .colorDiv {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 100%;
        bottom: 100%;
        opacity: 0.4;
        background: rgba(255,219,31,0.5);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .navbar-nav>li:hover .colorDiv {
        opacity: 1;
        right: 0px;
        bottom: 0px;
    }

    .nav>li>a {
        padding: 0px;
        float: right;
        font-size: 16px;
        font-family: 'Oswald', sans-serif;
        color: #fff;
        letter-spacing: 1px;
    }

    .navbar-nav>li>a {
        line-height: 32px;
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.25em;
        width: 100%;
    }
}

@media screen and (min-width: 1440px) {
    .container {
        width: 85%;
    }
}

@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }
}

@media (min-width: 1201px) {
    .roundedTwo label:hover::after {
      opacity: 0.3;
    }
    .col-lg-8 {
        width: 66.66666667%;
        float: left;
    }
    .col-lg-4 {
        width: 33.33333333%;
        float: left;
    }
    .mobileNav {
        display: none;
    }
    .container.mapPage {
        width: 95%;
    }
    .mapFooter {
        width: 95%;
    }
    .ready [ui-view].ng-enter, .ready [ui-view].ng-leave {
      position: absolute;
      left: 0;
      right: 0;
      -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
    }

    .ready [ui-view].ng-enter {
      opacity: 0;
      -webkit-transform:translate3d(-150px, 0, 0);
      -moz-transform:translate3d(-150px, 0, 0);
      transform:translate3d(-150px, 0, 0);
    }

    .ready [ui-view].ng-enter-active {
      opacity: 1;
      -webkit-transform:translate3d(0, 0, 0);
      -moz-transform:translate3d(0, 0, 0);
      transform:translate3d(0, 0, 0);
    }

    .ready [ui-view].ng-leave {
      opacity: 1;
      /*padding-left: 0px;*/  
      -webkit-transform:translate3d(0, 0, 0);
      -moz-transform:translate3d(0, 0, 0);
      transform:translate3d(0, 0, 0);
    }

    .ready [ui-view].ng-leave-active {
      opacity: 0;
      /*padding-left: 150px;*/
      -webkit-transform:translate3d(150px, 0, 0);
      -moz-transform:translate3d(150px, 0, 0);
      transform:translate3d(150px, 0, 0);
    }
}

@media (max-width: 1300px) {  
    #boatingCarousel img {
        top: -175px;
    }
}

@media (max-width: 1199px) {
    #heroUnit {
        height: 263px;
    }
}

@media (max-width: 1200px) {
    #gameBanner, #fishBanner, #wildlifeBanner, #boatingBanner, #searchContainer h5 {
        display: block;
    }
    body {
        width: 100%;
        height: 100%;
        padding-top: 0px;
    }
    footer {
        position: fixed;
        bottom: 0px;
        z-index: 2;
        width: 100%;
    }
    footer span {
        left: 215px;
    }
    .legendFooter span {
        left: 15px;
        margin-left: 0px;
    }
    #socialImages {
        margin-right: 0px;
    }
    nav {
        display: none;
    }
    .mobileNav {
        display: block;
        width: 200px;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0%;
        z-index: 4;
        background: rgba(0,0,0,0.75);
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
    }
    #filters {
        position: absolute !important;
        right: 25px;
        top: -1px;
    }
    .mobileNavHeader {
        background: rgb(97,132,68);
        height: 100px;
        width: 100%;
        position: relative;
        margin-top: 40px;
    }
    #mobileLogo {
        display: block;
        margin: 0 auto;
        position: relative;
        width: 140px;
        top: -20px;
        -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.75));
        filter: url(#drop-shadow);
        -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=5, Color='rgba(0,0,0,0.75)')";
        filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=5, Color='rgba(0,0,0,0.75)')";
    }
    .mobileNavLinks {

    }
    .mobileNavLinks ul {
        padding: 0px;
        width: 100%;
        margin-top: 50px;
    }
    .mobileNavLinks ul li {
        height: 50px;
    }
    .mobileNavLinks ul li a {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        line-height: 50px;
        text-transform: uppercase;
        font-family: 'Oswald', sans-serif;
        font-size: 18px;
        color: #fff;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    .mobileNavLinks ul li:hover a {
        color: rgb(255,219,51);
    }
    .mobileNavLinks ul li span {
        position: relative;
        left: 15%;
        padding-left: 42px;
    }
    .mobileNavLinks ul li img {
        float: left;
        height: 30px;
        top: 10px;
        position: absolute;
        left: 13%;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    .mobileNavLinks ul li img.activeImage {
        opacity: 0;
    }
    .mobileNavLinks ul li:hover img.activeImage {
        opacity: 1;
    }
    .container {
        width: 100%;
        padding: 0px;
        position: absolute !important;
        top: 0px;
        bottom: 0px;
    }
    .heroContainer {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    #heroUnit {
        height: 100%;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    .heroCarousel {
        display: none;
    }
    #heroContent {
        position: absolute;
        top: 30%;
        height: 50%;
        left: 200px;
        right: 0px;
        background: none;
        opacity: 0.95;
    }
    #heroContent h3 {
        margin-top: 0px;
        margin-bottom: 15px;
        font-size: 18px;
    }
    #heroContent > div {
        margin: 0px;
        position: relative;
    }
    #heroContent > div:first-child {
        width: 60%;
        float: left;
        padding: 0px;
        height: 100%;
    }
    #contentContainer {
        background: #fff;
        position: absolute;
        left: 15px;
        padding: 20px;
        border-radius: 15px;
        max-height: 480px;
        overflow: auto;
    }
    #huntingLinks {
        top: 0px;
        left: 0px;
        font-size: 12px;
    }
    #huntingLinks > a {
        text-align: center;
    }
    #heroContent > div:last-child {
        width: 40%;
        padding: 0px;
        position: absolute;
        right: 0px;
    }
    #searchTooltip {
        display: none;
    }
    #searchContainer {
        position: absolute;
        left: 15px;
        right: 15px;
        padding: 20px;
        height: auto;
        margin-bottom: 55px;
    }
    #searchContainer h5 {
        margin-top: 0px;
    }
    .onoffswitch.landing {
        top: 97px;
    }
    .onoffswitch.landing.boating {
        top: 148px;
    }
    #gameBanner {
        top: 0px;
        left: auto;
        right: -900px;
        height: 100%;
        width: auto;
    }
    #fishBanner {
        top: -10%;
        height: 110%;
        width: auto;
        right: 1500px;
        position: relative;
    }
    #wildlifeBanner {
        top: 0px;
        height: 100%;
        width: auto;
        right: 60%;
        position: relative;
    }
    #boatingBanner {
        top: 0px;
        height: auto;
        width: 100%;
        left: auto;
        right: auto;
        position: relative;
    }
    .welcomeLogo {
        display: none;
    }
    .welcomeLogo.mobile {
        display: block;
        width: 450px;
        right: 0px;
    }
    #mapContainer {
        position: fixed;
        top: 40px;
        bottom: 40px;
        left: 0px;
        right: 0px;
    }
    #menuBar {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
    }
    .mobileMenuToggle {
        display: block;
        position: fixed;
        top: 0px;
        height: 40px;
        z-index: 5;
    }
    .mobileMenuToggle img {
        height: 30px;
        position: absolute;
        top: 5px;
        left: 14px;
        opacity: 0.8;
        cursor: pointer;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    .mobileMenuToggle img:hover {
        opacity: 1;
    }
    .ready [ui-view].ng-enter, .ready [ui-view].ng-leave {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
    }
    .ready [ui-view].ng-enter {
      opacity: 1;
      -webkit-transform:translate3d(0px, 0, 0);
      -moz-transform:translate3d(0px, 0, 0);
      transform:translate3d(0px, 0, 0);
    }

    .ready [ui-view].ng-enter-active {
      opacity: 1;
      -webkit-transform:translate3d(0, 0, 0);
      -moz-transform:translate3d(0, 0, 0);
      transform:translate3d(0, 0, 0);
    }

    .ready [ui-view].ng-leave {
      opacity: 1;
      /*padding-left: 0px;*/  
      -webkit-transform:translate3d(0, 0, 0);
      -moz-transform:translate3d(0, 0, 0);
      transform:translate3d(0, 0, 0);
    }

    .ready [ui-view].ng-leave-active {
      opacity: 0;
      /*padding-left: 150px;*/
      -webkit-transform:translate3d(0px, 0, 0);
      -moz-transform:translate3d(0px, 0, 0);
      transform:translate3d(0px, 0, 0);
    }
    #addressInput {
        margin-left: 58px;
    }
    #searchInput.active {
        width: 220px;
    }
    #printMap {
        display: none;
    }
}

@media (max-width: 899px) {
    #heroContent {
        top: 200px;
        bottom: 40px;
        margin-bottom: 15px;
        right: 15px;
    }
    #heroContent > div:first-child {
        width: 100%;
        height: auto;
        float: none;
        position: relative;
        margin-bottom: 15px;
    }
    #heroContent > div:last-child {
        float: none;
        position: relative;
        margin: 0px;
        width: 100%;
        margin-bottom: 30px;
    }
    #contentContainer {
        margin-right: 15px;
        position: relative;
    }
    #searchContainer {
        right: 0px;
    }
    #wildlifeBanner {
        right: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .mobileNav.slideOff {
        left: -200px;
    }
    .mobileNav.slideOff.active {
        left: 0px;
    }
}

@media (max-width: 767px) {
    .leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
        font-size: 9px !important;
        word-wrap: normal;
        position: fixed;
        left: 0px;
        bottom: 40px;
        height: 15px;
        line-height: 14px;
        width: 100%;
        overflow: auto;
    }
    .leaflet-control-scale {
        margin-left: 40px !important;
        margin-bottom: 22px !important;
    }
    .esri-leaflet-logo {
        margin: 0px !important;
        position: absolute !important;
        right: 0px;
        bottom: 16px;
    }
    .leaflet-control-measure {
        position: absolute;
        bottom: 5px;
        left: -10px;
        z-index: 8 !important;
    }
    .leaflet-control-measure .leaflet-control-measure-toggle, .leaflet-control-measure .leaflet-control-measure-toggle:hover {
        width: 26px !important;
        height: 26px !important;
    }
    #zoomToLocation {
        width: 22px;
        height: 22px;
        top: 58px;
        left: 7px;
    }
    #zoomToLocation img {
        top: 3px;
        left: 3px;
    }
    #filters {
        position: absolute !important;
        right: 25px;
        top: 39px;
    }
    .leaflet-control-zoom {
        margin-left: 7px !important;
        margin-top: 7px !important;
    }
    .leaflet-bar a, .leaflet-bar a:hover { 
        width: 21px !important;
        height: 21px !important;
        line-height: 21px !important;
        text-indent: 0px !important;
    }
    #basemaps-wrapper {
        top: 7px;
        left: 37px;
    }
    #basemaps-wrapper select {
        height: 22px;
    }
    .mobileMenuToggle {
        display: none;
    }
    #phoneMenuToggle {
        display: block;
        position: fixed;
        top: 0px;
        height: 40px;
        z-index: 5;
    }
    #phoneMenuToggle img {
        height: 30px;
        position: absolute;
        top: 5px;
        left: 5px;
        opacity: 0.8;
        cursor: pointer;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    .mobileNav {
        width: 40px;
        height: 40px;
        border-radius: 0px 0px 5px 0px;
        background: rgba(0,0,0,0.75);
        overflow: hidden;
    }
    .mobileNav.active {
        -webkit-animation: openMenu .3s;
        -moz-animation:    openMenu .3s;
        -o-animation:      openMenu .3s;
        animation:         openMenu .3s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode:    forwards;
        -o-animation-fill-mode:      forwards;
        animation-fill-mode:         forwards;
        overflow: auto;
    }
    .mobileNav.out {
        -webkit-animation: closeMenu .3s;
        -moz-animation:    closeMenu .3s;
        -o-animation:      closeMenu .3s;
        animation:         closeMenu .3s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode:    forwards;
        -o-animation-fill-mode:      forwards;
        animation-fill-mode:         forwards;
    }
    #wildlifeBanner {
        right: 200%;
    }
    #fishBanner {
        right: 1000px;
    }
    #boatingBanner {
        height: 100%;
        width: auto;
    }
    @-webkit-keyframes openMenu {
        from {
            width: 40px;
            height: 40px; 
        }
        to {
            width: 100%;
            height: 100%;
        }
    } 
    @keyframes openMenu {
        from {
            width: 40px;
            height: 40px; 
        }
        to {
            width: 100%;
            height: 100%;
        }
    }
    @-moz-keyframes openMenu {
        from {
            width: 40px;
            height: 40px; 
        }
        to {
            width: 100%;
            height: 100%;
        }
    }
    @-o-keyframes openMenu {
        from {
            width: 40px;
            height: 40px; 
        }
        to {
            width: 100%;
            height: 100%;
        }
    }
    @-webkit-keyframes closeMenu {
        from {
            width: 100%;
            height: 100%;
        }
        to {
            width: 40px;
            height: 40px;
        }
    } 
    @keyframes closeMenu {
        from {
            width: 100%;
            height: 100%;
        }
        to {
            width: 40px;
            height: 40px;
        }
    }
    @-moz-keyframes closeMenu {
        from {
            width: 100%;
            height: 100%;
        }
        to {
            width: 40px;
            height: 40px;
        }
    }
    @-o-keyframes closeMenu {
        from {
            width: 100%;
            height: 100%;
        }
        to {
            width: 40px;
            height: 40px;
        }
    }
    .mobileNavHeader, .mobileNavLinks {
        opacity: 0;
        display: none;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }
    .mobileNavHeader { 
        margin-top: 40px;
    }

    .mobileNav.active2 .mobileNavHeader,
    .mobileNav.active2 .mobileNavLinks {
        display: block;
    }
    
    .mobileNav.active3 .mobileNavHeader,
    .mobileNav.active3 .mobileNavLinks {
        opacity: 1;
    }

    .mobileNavLinks ul li {
        height: 60px;
        margin-bottom: 10px;
    }
    .mobileNavLinks ul li a {
        line-height: 60px;
    }
    .mobileNavLinks ul li span {
        left: -40px;
        padding-left: 50%;
        font-size: 24px;
    }
    .mobileNavLinks ul li img {
        left: auto;
        padding-right: 50%;
        right: 65px;
        height: 35px;
        top: 13px;
    }
    .heroContainer {
        overflow-x: hidden;
        overflow-y: auto;
        bottom: 40px;
    }
    .welcomeLogo.mobile {
        max-width: 90%;
    }
    #heroContent {
        left: 0px;
        top: 0px;
        right: 0px;
        padding-top: 150px;
        bottom: auto;
        margin-bottom: 15px;
    }
    #heroContent > div:last-child {
        position: relative;
    }
    #searchContainer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: 15px;
        margin-left: 15px;
    }
    .goToMap {
        float: none;
    }
    #mapLayers {
        position: absolute !important;
        top: 40px;
        width: 100%;
        left: 0px;
    }
    #addressInput {
        margin-left: 50px;
    }
    #searchInput.active {
        width: 220px;
    }
    #mapContainer {
        top: 80px;
        bottom: 40px;
        left: 0px;
        right: 0px;
        margin-top: 0px;
    }
    .layerItem > div {
        width: auto !important;
    }
    .layerCheck {
        float: right !important;
    }
    #detailPanel {
        width: 100%;
        right: -100%;
    }
    #detailPanel.active {
        -webkit-animation: openDetail .3s;
        -moz-animation:    openDetail .3s;
        -o-animation:      openDetail .3s;
        animation:         openDetail .3s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode:    forwards;
        -o-animation-fill-mode:      forwards;
        animation-fill-mode:         forwards;
    }

    #detailPanel.out {
        -webkit-animation: closeDetail .3s;
        -moz-animation:    closeDetail .3s;
        -o-animation:      closeDetail .3s;
        animation:         closeDetail .3s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode:    forwards;
        -o-animation-fill-mode:      forwards;
        animation-fill-mode:         forwards;
    }

    @-webkit-keyframes openDetail {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @keyframes openDetail {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @-moz-keyframes openDetail {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @-o-keyframes openDetail {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @-webkit-keyframes closeDetail {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    } 
    @keyframes closeDetail {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    }
    @-moz-keyframes closeDetail {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    }
    @-o-keyframes closeDetail {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    }

    #nearbyPanel {
        width: 100%;
        right: -100%;
    }
    #nearbyPanel.active {
        -webkit-animation: openNearby .3s;
        -moz-animation:    openNearby .3s;
        -o-animation:      openNearby .3s;
        animation:         openNearby .3s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode:    forwards;
        -o-animation-fill-mode:      forwards;
        animation-fill-mode:         forwards;
    }

    #nearbyPanel.out {
        -webkit-animation: closeNearby .3s;
        -moz-animation:    closeNearby .3s;
        -o-animation:      closeNearby .3s;
        animation:         closeNearby .3s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode:    forwards;
        -o-animation-fill-mode:      forwards;
        animation-fill-mode:         forwards;
    }

    @-webkit-keyframes openNearby {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @keyframes openNearby {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @-moz-keyframes openNearby {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @-o-keyframes openNearby {
        from {
            right: -100%;
        }
        to {
            right: 0%;
        }
    }
    @-webkit-keyframes closeNearby {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    } 
    @keyframes closeNearby {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    }
    @-moz-keyframes closeNearby {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    }
    @-o-keyframes closeNearby {
        from {
            right: 0%;
        }
        to {
            right: -100%;
        }
    }

    #layerPanel {
        cursor: auto;
        opacity: 0.95;
        overflow: hidden;
        width: 100%;
        position: fixed;
        max-height: 0px;
        top: 80px;
        z-index: 1;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
        transition: all .5s ease-out;
    }

    #layerPanel.active {
        bottom: 40px;
        max-height: 355px;
        overflow: auto;
    }

    footer span {
        left: 15px;
    }
}

@media screen and (max-width: 580px) {
    #searchInput.active {
        width: 220px;
    }
}

@media screen and (max-width: 479px) {
    #filters {
        top: 78px;
        right: 0px;
    }
    .onoffswitch {
        position: absolute !important;
        top: 40px;
        right: 30px;
    }
}

@media screen and (max-width: 380px) {
    #searchInput.active {
        width: 220px;
    }
    .leaflet-popup {
        max-width: 290px;
    }
    .leaflet-popup h4 { 
        max-width: 246px;
    }
    .leaflet-popup h6 {
        font-size: 10px;
    }
    #showHelp {
        position: absolute !important;
        top: 40px;
        right: 120px;
    }
}

@media screen and (min-height: 1051px) and (min-width: 1201px) {
    #mapContainer {
        height: 830px;
    }
}

@media screen and (max-height: 1050px) and (min-width: 1201px) {
    #mapContainer {
        height: 830px;
    }
}

@media screen and (max-height: 1000px) and (min-width: 1201px) {
    #mapContainer {
        height: 780px;
    }
}

@media screen and (max-height: 950px) and (min-width: 1201px) {
    #mapContainer {
        height: 730px;
    }
}

@media screen and (max-height: 900px) and (min-width: 1201px) {
    #mapContainer {
        height: 680px;
    }
}

@media screen and (max-height: 850px) and (min-width: 1201px) {
    #mapContainer {
        height: 630px;
    }
}

@media screen and (max-height: 800px) and (min-width: 1201px) {
    #mapContainer {
        height: 580px;
    }
}

@media screen and (max-height: 750px) and (min-width: 1201px) {
    #mapContainer {
        height: 530px;
    }
}

@media screen and (max-height: 700px) and (min-width: 1201px) {
    #mapContainer {
        height: 480px;
    }
}

@media screen and (max-height: 660px) and (min-width: 1201px) {
    #mapContainer {
        height: 430px;
    }
}

@media screen and (max-height: 610px) and (min-width: 1201px) {
    #mapContainer {
        height: 380px;
    }
}

@media screen and (max-height: 560px) and (min-width: 1201px) {
    #mapContainer {
        height: 330px;
    }
}

@media screen and (max-height: 560px) and (max-width: 767px) {
    .mobileNavLinks ul {
        margin-top: 30px;
    }
    .mobileNavLinks ul li {
        margin-bottom: 5px;
    }
}

@media screen and (max-height: 510px) and (max-width: 767px) {
    .mobileNavLinks ul {
        margin-top: 30px;
    }
    .mobileNavLinks ul li {
        margin-bottom: 0px;
        height: 50px;
    }
    .mobileNavLinks ul li img {
        height: 25px;
        top: 18px;
    }
    .mobileNavLinks ul li span {
        font-size: 18px;
    }
    .leaflet-popup-content-wrapper {
        max-height: 220px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .leaflet-popup h4 {
        margin-right: 34px;
    }

    .leaflet-popup h5 {
        margin-right: 34px;
    }
    .leaflet-popup h6 {
        margin-right: 34px;
    }
    .zoomToFeature {
        right: 14px;
    }
    .whatsNearby {
        right: 18px;
    }
    .navigateToFeature {
        right: 20px;
    }
    .leaflet-popup > a {
        right: 14px !important;
    }
    .moreInfoButton {
        margin-right: 15px;
    }
}