/* Show it is fixed to the top */
body {
  padding-top: 116px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
  font-size: 16px;
  
  position:relative;
  
/*  background-color: rgb(248, 248, 248);   */
/*  background-color: #f4f3ec; */
/*  background-color: rgb(248, 248, 248); */
  background-color: rgb(251, 250, 246);
  
}

@media (min-width: 992px) {
  body {
      padding-top: 116px;
  }
}

.form-control::-webkit-input-placeholder { color: silver; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: silver; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: silver; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: silver; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: silver; }  /* Microsoft Edge */


.bg-dark {
    background-color: #000 !important;
}

.navbar.bg-dark {
    border-bottom: 1px solid rgb(128, 128, 128);
}


.nav-item {
	text-transform: uppercase;
	letter-spacing: 3px;
}


.navbar-dark .navbar-nav .nav-link {
    color: #bfbfbf;
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}


h1 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-weight: 300;
}
h2 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-weight: 300;
}
h3 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-weight: 300;
	font-style: italic;
/*    color: #247e38; */
    color: #1C5F29;
}
h4 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-weight: 300;
}
p {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-weight: 400;
}


h2.search-result {
	color: rgb(128, 128, 128);
}

h2.bio-species {
}

a {
  /* color: #0070b3; */
  color: #005A8F;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
    color: #4090ff;
    text-decoration: none;
    background-color: transparent;
}

body.imageBackground {
  background-image: url('/media/image/geo/np/20060220-192955Z-mod.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;   
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: rgb(248, 248, 248);
}



.lyp-mainbanner-default {
    width: 100%;
/*   
    White Sands
    background-image: url('/img/20001115-143811Z-banner.jpg');
    
    Yosemite
    background-image: url('/img/20060220-192955Z-banner.jpg');

    Mungo
    background-image: url('/img/20071219-031720Z-banner.jpg');
    
    Mt St Helens
    background-image: url('/img/20071123-010055Z-banner.jpg');
    
    Zion
    background-image: url('/img/20140922-170821Z-banner.jpg');
*/
    
    background-image: url('/img/20001115-143811Z-banner.jpg');
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center center;
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(248, 248, 248);
    
    color: white;
}
 
.lyp-mainbanner {
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center center;
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(0, 0, 0);
    
    color: white;
}

/* ---------- bio-tree ---------- */
/* https://two-wrongs.com/draw-a-tree-structure-with-only-css */
.lyp-tree, .lyp-tree ul, .lyp-tree li {
     position: relative;
}

.lyp-tree ul {
    list-style: none;
    padding-left: 38px;
}
.lyp-tree ul.first {
    padding-left: 0;
}
	   
.lyp-tree li::before, .lyp-tree li::after {
    content: "";
    position: absolute;
    left: -18px;
}

.lyp-tree li::before {
    border-top: 1px solid #000;
    top: 9px;
    width: 15px;
    height: 0;
}

.lyp-tree li::after {
    border-left: 1px solid #000;
    height: 100%;
    width: 0px;
    top: 2px;
}

.lyp-tree ul > li:last-child::after {
    height: 8px;
}

.lyp-tree ul.first > li:first-child::before {
    border-top: none;
}
.lyp-tree ul.first > li:first-child::after {
    border-left: none;
}

.lyp-card {
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(212, 212, 212);
    height: 100%;
}

/* ---------- stats table ---------- */
table.lyp-stats {
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid rgb(162, 169, 177);
  background-color: rgb(248, 249, 250);
  color: rgb(34, 34, 34);
  max-width: 480px;
  width: 100%;
}
table.lyp-stats tr {
    border: 1px solid rgb(162, 169, 177);
}
table.lyp-stats th {
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    border: 1px solid rgb(192, 199, 207);
}

table.lyp-stats td {
    font-size: 14px;
    font-weight: normal;
    padding: 5px;
    border: 1px solid rgb(192, 199, 207);
}
table.lyp-stats td.lyp-stats-2nd {
    padding-left: 20px; 
    font-style: italic;
}
table.lyp-stats td.lyp-stats-3rd {
    padding-left: 40px; 
    font-style: italic;
}
/* ---------- biogeo species table ---------- */
table.lyp-biogeo {
    width: 100%;
    border-collapse: collapse;
    color: rgb(34, 34, 34);
}

table.lyp-biogeo tr {
    border: 1px solid rgb(212, 212, 212);
    background-color: rgb(255, 255, 255);
}

table.lyp-biogeo tr td {
    border: none;
    padding: 0px;
}
table.lyp-biogeo tr td.lyp-biogeo-obs {
    width: 50px;
    font-size: 14px;
    text-align: center;
}

table.lyp-biogeo tr td.lyp-biogeo-img {
    width: 160px;
    text-align: left;
    vertical-align: top;
}

table.lyp-biogeo tr td.lyp-biogeo-txt {
    padding: 8px 4px 8px 10px;
    font-size: 16px;
    vertical-align: top;
}

table.lyp-biogeo tr td.lyp-biogeo-txt a {
    font-size: 18px;
    line-height: 18px;
}

table.lyp-biogeo tr td.lyp-biogeo-txt p {
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    padding: 0;
}
/* ------- Wide ------ */
.lyp-wide {
    display: block;
    margin: 0px;
    text-align: center; 
}

.lyp-wide h4 {
    box-sizing: border-box;
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    height: 32px;
}

.lyp-wide .lyp-slick-copyright {
  box-sizing: border-box;
  font-size: 12px;
  color: #A0A0A0;
  margin: 0;
  line-height: 18px;
  height: 18px;
  
}

.lyp-wide  img {
    max-width: 100%;
/*    height: auto; */
}

/*
@media (max-width: 400px) {
    .lyp-wide  img {
        max-width: 100%;
        height: auto;
    }
}
*/

img.lyp-aspect-2-1 { aspect-ratio: 2.0; }
img.lyp-aspect-4-1 { aspect-ratio: 4.0; }
img.lyp-aspect-4-3 { aspect-ratio: 4 / 3; }

img.lyp-lazy {
  display: block;
}

/* ------- Slick Gallery Slider ------ */
.lyp-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0s, opacity 300ms;
}

.lyp-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

.lyp-slick-slide {
    margin: 0px;
    margin-right: 1px;
    text-align: center; 
}

.lyp-slick-slide h5 {
    box-sizing: border-box;
    margin: 0;
    font-size: 20px;
    line-height: 32px;
    height: 32px;
}

.lyp-slick-slide h4 {
    box-sizing: border-box;
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    height: 32px;
}

.lyp-slick-slide .lyp-slick-copyright {
  box-sizing: border-box;
  font-size: 12px;
  color: #707070;
  margin: 0;
  line-height: 18px;
  height: 18px;
}

.lyp-fullscreen .lyp-slick-slide .lyp-slick-copyright {
    color: #909090;
}


.slick-dots
{
    box-sizing: border-box;
}

.slick-dots li button:before {
    color: #FFFFFF !important;
    font-size: 10px;
    opacity: .33;
}
.slick-dots li.slick-active button:before
{
	opacity: 1.0 !important; 
}

.lyp-slick-prev, .lyp-slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 35%;

    display: block;

    width: 60px;
    height: 60px;
    padding: 0;
    
    opacity: 0.75;
    
    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    
    background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;			
}

.lyp-slick-prev {
	background-image: url('/css/arrow-prev.png');
}

.lyp-slick-next {
	background-image: url('/css/arrow-next.png');
}

.lyp-slick-prev:focus, .lyp-slick-next:focus {
    color: transparent;
    outline: none;
}

.lyp-slick-prev:hover, .lyp-slick-next:hover
{
    opacity: 1;
}

.lyp-slick-prev.slick-disabled, .lyp-slick-next.slick-disabled
{
    opacity: 0.0;
}

.lyp-slick-prev
{
    left: 0px;
}

.lyp-slick-next
{
    right: 0px;
}

.slick-slide {
  transition: all ease-in-out .3s;
  height: auto;
}

.slick-active {
    opacity: 0.75;
}

.slick-current {
  opacity: 1.0;
}


.lyp-slider-page .slick-slide img {
    height: 300px;
}

@media (max-width: 400px) {
  .lyp-slider-page .slick-slide img {
    height: calc(75vw);
  }
}


.lyp-fullscreen {
    position: absolute;
    left: 0;
    top: 0;
	width: 100%;
	height: 100%;
    
    background-color: rgb(0, 0, 0);
    z-index: 4990;
    text-align: center;
    
    color: rgb(222, 218, 214);
}

a.lyp-fullscreen-backbtn {
    position: absolute;
    right:0px; top:0px;
    z-index:4995;    
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
    font-size: 32px;
    padding: 3px 8px 3px 8px;
    opacity: 0.75;

    color: rgb(255, 255, 255) !important; 
    vertical-align: middle;
}
a.lyp-fullscreen-backbtn:hover {
    opacity: 1.0;
}

.lyp-fullscreen-title {
    box-sizing: border-box;
    display: block;
    margin: 0;
    text-align: center;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-weight: 300;
    font-size: 32px;
    line-height: 48px;
    height: 48px;
}

.lyp-audio: {
    width: 100%;
}

.lyp-audio-cursor {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1px;
	height: 100%;
	background-color: rgb(128, 128, 128);
	mix-blend-mode: screen;
}

/* NOT NEEDED???? */
.lyp-fullscreen h5 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-weight: 300;
    font-size: 20px;
}

.lyp-slider-fullscreen .slick-slide img {
    width: auto;
	max-width: calc(100vw);
	max-height: calc(100vh - 146px);
}

.lyp-binomial {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	font-style: italic;
    /*    color: #247e38; */
        color: #1C5F29;
}

.lyp-size-20 { width: 20px; height: 20px; }
.lyp-size-24 { width: 24px; height: 24px; }

.lyp-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: auto
}
.lyp-icon-external-link {
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(0,123,255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"%3E%3Cpath d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"%3E%3C/path%3E%3Cpolyline points="15 3 21 3 21 9"%3E%3C/polyline%3E%3Cline x1="10" y1="14" x2="21" y2="3"%3E%3C/line%3E%3C/svg%3E');
}