@charset "UTF-8";

html {background-repeat: no-repeat; height: 100%;}

body{
	font-family: 'Work Sans', sans-serif !important;
	font-size: 22px;
	margin:0;
	height:100%;
}

/* Base Link Styles */
nav.navbar:before,
nav.navbar:after
{
    content:none;
}
nav.navbar {
    background-color: #091400;
    margin-bottom: 0rem;
    border: 0px;
    border-radius: 0px;
}
nav .logo {
    margin-top: 1.7rem;
    margin-left: 1.7rem;
}
ul.nav {
    padding: 0rem;
}
nav.navbar ul.nav > li > a {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.1rem;
    padding-top: 20px;
    padding-bottom: 20px;
}
button.navbar-toggle {
    padding-top: 0.5rem;
}
.icon-bar {
    margin-top: 4px;
    background-color: #888;
}
p a {
    color:#87CA2B;
	text-decoration:none;
	border-bottom:solid 2px;
	border-bottom-color: #87CA2B;
	padding-bottom:2px;
	}

p a:visited {
	color:#87CA2B;
	}

p a:hover {
	color:#87CA2B;
	}
	
p a:active {
	color:#87CA2B;
	}
	
.footercontainer a{
    color:white;
}

.button {
  background-color: #87CA2B;
  border: none;
  color: #091400;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

iframe {
    width:100%;
    height:100%;
}

/* horizontal pop out navmenu */
ul,li{
  list-style:none;
  margin-left:5px;
  margin-right:5px;
  }
li{
  display:inline-block;
  }

ul{
  padding:10px;
  }

#btn{
  cursor:pointer;
  }
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}


/* filter menu dropdown */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

/*Center element*/
.center_ele {
    float:center;
}

/* LOGIN FORM */

/* END LOGIN FORM */

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}


/* Text Styles */
h1 {
	margin-top:0;
	}
h2 {
	margin-top:0;
	}
.headline1 {
	font-weight: 700;
	font-size: 64px;
	line-height: 100%;
	margin:0;
	padding-bottom:20px;
	}
.subhead1 {
	line-height:100%;
	margin-top:0;
	margin-bottom:5px;
	width: calc(100% - 3.5rem);
    display: inline-block;
	}
.subsub {
	font-size:16px;
	color:#666666;
	line-height:120%;
	margin-top:0;
	margin-bottom:10px;
	}
p {
	font-size:18px;
	line-height:160%
	}
.gray {
	
	}
	
/* Spacers */
.spacer-40 {
	height:40px;	
		}

.margin-right-20 {
	margin-right:20px;
	}
	
/* Top Nav Styles */
.floatright {
	float:right;
	}
.floatleft {
	float:left;
	}
.clearfloat {
	clear:both;
	}

/* Top Nav Styles */
.logo {
  display: block;
  text-indent: -9999px;
  width: 131px;
  height: 26px;
  background: url(../images/logo.svg);
  background-repeat: no-repeat;
  background-size: 131px 26px;
  }

.topnav {
  background-color: #091400;
  overflow: hidden;
  padding:20px;
  display: flex;
  justify-content: space-between;
}
.rightnav {
  float:right;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none;
  font-size: 17px;
  border:none;
}

nav li a:hover {
  color: #87CA2B !important;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

/* Homepage Hero Styles */
.homepagehero {
  background-image:url(../images/hero.jpg);
  background-size: cover;
  height:500px;
  padding-left:10%;
  padding-right:30px;
  color:#FFF;
  position: relative;
  background-position: center;
}

.herocontent{
  max-width:400px;
  margin: 0;
  position: absolute;
  width:80%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	}
	
.mobile-topnav {
    display: none;
}
.topnav.navbar {
    margin-bottom: 0rem;
    border: 0px;
    border-radius: 0px;
}
.topnav.navbar a:hover {
    text-decoration: none;
}
/* Video Lighbox Styles */
.lightbox {
  background-color: fade(black, 80%);  
  overflow: scroll;
  position: fixed;
  display: none;
  z-index: 1;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  
  &-container {
    position: relative;
    max-width: 960px;
    margin: 7% auto;
    display: block;    
    padding: 0 3%;
    height: auto;
    z-index: 10;
    
    // Increasing top margin for mobile
    @media screen and (max-width: 768px) { margin-top: 10%; }
    @media screen and (max-width: 414px) { margin-top: 13%; }
  }
    
  &-content {
    box-shadow: 0 1px 6px fade(black, 70%);
  }
  
  &-close {
    text-transform: uppercase;    
    background: transparent;
    position: absolute; 
    font-weight: 300;      
    font-size: 12px;
    display: block;
    border: none;
    color: white;
    top: -22px;
    right: 3%;
  }
}

.video-container {  
    padding-bottom: 56.25%;
    position: relative;  
    padding-top: 30px; 
    overflow: hidden;
    height: 0; 
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    height: 100%;  
    width: 100%;  
    left: 0;  
    top: 0;
}

/* Card Styles */
.cardscontainer {
	padding-right: 2%;
	padding-left: 5%;
	}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 45rem;
  height: 36rem;
  border-radius: 20px;
  float:left;
  margin-right:3%;
}

.cardscontainer a {
	color:black;
	text-decoration:none;
	}

.cardscontainer a:visited {
	color:black;
	}

.cardscontainer a:hover {
	color:black;
	}
	
.cardscontainer a:active {
	color:black;
	}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.cardimg {
  border-radius: 20px 20px 0 0;
}
.crop-height {
  max-height: 235px;
  overflow: hidden; 
}
.card-info {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
}
.nature-play-image-div {
    background-image: url(static/images/poisonivy.png);
    position: relative;
}
.play-button {
    position: absolute;
    margin-top: 20%;
    margin-left: 45%;
}

img.scale {
  object-fit:cover;
}

.container {
  padding: 20px 16px;
}

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.footercontainer{
	padding:5%;
	background-color: #091400;
	text-align:center;
	color:#fff;
	}

.walkdetailhero{
	padding:5%;
	}
	
.thumbnailimage{
	border-radius:20px;
	width:100%;
	height:auto;
	position:relative;
	display:inline-block;
    text-align:center;
	overflow:hidden;
	}
.thumbnail-playbtn{
	position:absolute;
	z-index:1000;
	bottom:8%;
	left:8%;
	}
.twocolumncontainer-left{
	width:48%;
	margin:0;
	float:left;
	}
video.twocol-left {
    	width:48%;
	padding-right:20%;
	float:left;
	overflow:hidden;
}
.twocolumncontainer-right{
	width:48%;
	margin:0;
	float:right;
	}
	
@media screen and (max-width: 1110px) {
    ul.nav {
        float: right;
    }
    
    .card {
      width: 100% !important;
      max-width: 54rem;
      min-width: 24.1rem;
      float:none;
      margin-bottom:30px !important;
    }
}

@media screen and (min-width: 768px) {
    ul.nav {
        float: right;
    }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.mobile-topnav {
    display: block;
}
  .rightnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .cardscontainer {
	padding-right:5%;
	padding-left:5%;
	padding-top:30px;
	}
	
.headline1{
	font-size: 50px;
	}
.homepagehero {
  height: 480px;
  padding-left:5%;
  padding-right:5%;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
  }
  .rightnav a {
    text-align: right;
	padding-top:20px;
  }
.twocolumncontainer-left{
	width:100%;
	margin:0;
	float:none;
	}
.twocolumncontainer-right{
	width:100%;
	margin:0;
	float:none;
	}
}