html {
    scroll-behavior: smooth;
}

/* Add a dark background color with a little bit see-through */
.navbar {
    position: sticky !important;
    z-index: 10;
    top: 0px;
    margin-bottom: 0;
    background-color: #2d2d30;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 4px;
    border-radius: 0px;
}

/* Add a gray color to all navbar links */
.navbar li a,
.navbar .navbar-brand {
    color: #d5d5d5 !important;
}

button.navbar-toggler {
    border-color: antiquewhite;
}

/* On hover, the links will turn white */
.navbar-nav li a:hover {
    color: #fff !important;
    background-color: grey !important;

}

.navbar-toggler:focus {
    background-color: #fff;
    box-shadow: none;
}

/* The active link */
.active a {
    color: #fff !important;
    background-color: #29292c !important;
}

/* Remove border color from the collapsible button */
.navbar .navbar-toggle {
    border-color: #f5f5f5;
}

.navbar-toggle .icon-bar {
    background-color: #f5f5f5;
}

.navbar-collapse {
    text-align: center;
}

Dropdown .open .dropdown-toggle {
    color: #fff;
    background-color: #555 !important;
}

/* Dropdown links */
.dropdown-menu li a {
    color: #000 !important;
}

.gallery-photos {
    /*max-width: 175px;*/
    width: 100%;
    height: 100%;
    /*size of the images*/
    max-height: 600px;
}

/*.row{*/
/*    margin-bottom: 1%;*/
/*    margin-top: 1%;*/
/*}*/
div.col-sm-12.col-md-4.effect1 {
    padding: 1%;
}

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

.effect1 a {
    text-decoration: none;
    color: #fff;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 40px;
    height: 0px;
    position: absolute;
    transition: 0.5s ease all;
    visibility: hidden;
    opacity: 0;
    top: 0;
}

.effect1:hover a {
    background-color: rgba(102, 143, 128, 0.5);
    visibility: visible;
    height: 100%;
    padding: 35% 0;
    opacity: 1;
    border-radius: 10px;
}
ul.myUL{
    display: inline-block;
    text-align: left;
}

img.gallery-photos {
    border-radius: 10px;
    box-shadow: 10px 10px 5px #aaaaaa;
}

div#poison-Frog.row-show-frog,
div#bird.row-show-bird,
div#coralReef.row-show-coral,
div#artic.row-show-artic,
div#snake.row.row-show-snake,
div#herbs-plants.row.row-show-herbs-plants {
    display: none;
    background-color: rgb(102, 143, 128);
    margin-bottom: 3%;
    margin-top: 3%;
    padding: 2%;
    border-radius: 20px;
    align-items: center;
    box-shadow: 10px 10px 5px #aaaaaa;
}

iframe.video,
img.man,
img.bird2,
img.seaLife,
img.snake2,
img.tea {
    border-radius: 10px;
}

div .col-sm-12.col-md-6 img {
    width: 100%;
}

div.col-sm-12.col-md-4.effect2 {
    padding: 1%;
}

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

.effect2 a {
    text-decoration: none;
    color: #fff;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 40px;
    height: 0px;
    position: absolute;
    transition: 0.5s ease all;
    visibility: hidden;
    opacity: 0;
    top: 0;
}

.effect2:hover a {
    background-color: rgba(102, 143, 128, 0.5);
    visibility: visible;
    height: 100%;
    padding: 35% 0;
    opacity: 1;
    border-radius: 10px;
}

div.col-sm-12.col-md-4.effect3 {
    padding: 1%;
}

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

.effect3 a {
    text-decoration: none;
    color: #fff;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 40px;
    height: 0px;
    position: absolute;
    transition: 0.5s ease all;
    visibility: hidden;
    opacity: 0;
    top: 0;
}

.effect3:hover a {
    background-color: rgba(102, 143, 128, 0.5);
    visibility: visible;
    height: 100%;
    padding: 35% 0;
    opacity: 1;
    border-radius: 10px;
}

.row-show-coral {
    display: none;
}

div.col-sm-12.col-md-4.effect4 {
    padding: 1%;
}

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

.effect4 a {
    text-decoration: none;
    color: #fff;
    width: 100%;
    left: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 40px;
    height: 0px;
    position: absolute;
    transition: 0.5s ease all;
    visibility: hidden;
    opacity: 0;
    top: 0;
}

.effect4:hover a {
    /*rgba(200, 10, 10, 0.4)*/
    background-color: rgba(102, 143, 128, 0.5);
    visibility: visible;
    height: 100%;
    padding: 25% 0;
    opacity: 1;
    border-radius: 10px;
}

.row-show-polarBear {
    display: none;
}

div.col-sm-12.col-md-4.effect5 {
    padding: 1%;
}

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

.effect5 a {
    text-decoration: none;
    color: #fff;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 40px;
    height: 0px;
    position: absolute;
    transition: 0.5s ease all;
    visibility: hidden;
    opacity: 0;
    top: 0;
}

.effect5:hover a {
    background-color: rgba(102, 143, 128, 0.5);
    visibility: visible;
    height: 100%;
    padding: 25% 0;
    opacity: 1;
    border-radius: 10px;
}

.row-show-snake {
    display: none;
}


div.col-sm-12.col-md-4.effect6 {
    padding: 1%;
}

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

.effect6 a {
    text-decoration: none;
    color: #fff;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 40px;
    height: 0px;
    position: absolute;
    transition: 0.5s ease all;
    visibility: hidden;
    opacity: 0;
    top: 0;
}

.effect6:hover a {
    background-color: rgba(102, 143, 128, 0.5);
    visibility: visible;
    height: 100%;
    padding: 23% 0;
    opacity: 1;
    border-radius: 10px;
}

.row-show-herbs-plants {
    display: none;
}

footer {
    background-color: #668F80;
}

footer nav-link {
    color: white;
}