/* AUTHOR: YELLOWSTONE EXPEDITIONS */
/* STYLE SHEET: SCREEN */

/*body {background: url(../images/graphics/active_background.jpg);}*/

h2 {font-style: italic;color: #800000; text-align: center;}
h3 {font-style: italic;color: #800000; text-align: center; letter-spacing: .05em;}
h4 {font-style: italic; color: #800000;  text-align: center;}
h6 {font-style: italic; color: #800000;}
* {box-sizing: border-box;}
td.special { border: 1px double #c2c2c2; }

/*Side Menu Styles*/
div#menu{width:18%; float:left; font-size:.8em; line-height:200%; text-align:center; overflow:hidden;}
div#menu hr {height:2px; width:50px; text-align:center;}
div#menu a:link {text-decoration:none;}
div#menu a:visited {font-weight:normal; text-decoration:none;}
div#menu a:hover {font-weight:normal; color:red; text-decoration:underline;}

/*Bottom Menu Styles*/
div#othertoursbottom{width:30%; align:center; font-size:.8em; line-height:200%; text-align:center; overflow:hidden;}
div#othertoursbottom hr {height:2px; width:100px; text-align:center;}
div#othertoursbottom a:link {text-decoration:none;}
div#othertoursbottom a:visited {font-weight:normal; text-decoration:none;}
div#othertoursbottom a:hover {font-weight:normal; color:red; text-decoration:underline;}


/*Navigation Menu*/

nav {width: 100%; height: 55px; background-color: none; opacity: .9; font-family: Arial; font-weight: bold; color: white; position:absolute; top:110px; left:10px; z-index:100; }
nav p {font-family: arial; color: white; font-size: 20px; line-hight: 40px; float: left; }
nav ul {float: left; }
nav ul li {float: left; list-style: none; width:150px; position: relative; text-align: center; }
nav ul li a {display: block; font-family: arial; color: white; font-size: 14 px; padding: 10px 10px; text-decoration: none; }
nav ul li ul {display: none; position: absolute; background-color: black; opacity: .95; padding: 5px; border-radius: 0px 0px 8px 8px; }
nav ul li ul li a {padding: 8px 10px; }
nav ul li ul li a:hover {background-color: green; }
nav ul li ul li {width: 150px; border-radius: 8px; }
nav ul li:hover ul {display: block; }
nav ul li a:hover {background-color: green; }


/*Top Logo Styles*/

div#logo-header {background-color: #006825; border-left: 2px solid black; border-top: 2px solid black; border-right: 2px solid black; overflow:hidden;}
div#logo-photo img { border-style: 2px solid black; overflow:hidden;}



/*Descriptive Text Styles*/
div#descriptive-text {width:80%; float:left; line-height:150%; border-left:1px solid black; padding-left:15px; margin-right:5px; overflow:hidden;}
div#descriptive-text p  {text-indent:1em;}
div#descriptive-text img {border: 1px solid black; margin:20px; padding:0px;}
div#descriptive-text a:hover {font-weight:normal; color:red; text-decoration:underline;}


div#d {padding-left:20px;}
div#d {padding-bottom:10px;}
div#d h3 {clear:both;}
div#d {clear:both;}

.d {padding-left:20px;}
.d {padding-bottom:10px;}
.d h3 {clear:both;}
.d {clear:both;}



div#contact {padding: 70px; text-align:center;}


/*Initial Large Screen Styles*/
div#othertoursbottom {display: none;}
div#hotdog {display: none;}

/*hamburger Container Style*/
.hamburger-container {width: max-content;  position: absolute; top: 20px; left: 20px; color: white; transition: transform 0.5s ease;}

/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
.hamburger-container .checkbox { opacity: 0; position: absolute;}

/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
.hamburger-container .checkbox:focus ~ .hamburger {  /* Not all browsers support outline: auto, so set a sensible fallback outline. */  outline: 2px solid white;  outline: auto;  outline-offset: 4px;}

/* For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard. */
@supports selector(:focus-visible) {
  .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
    outline: none;
  }
}

/* Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a {
  visibility: hidden;
  transition: visibility 0.5s linear;
}

/* Make the focusable elements in the drawer visible when it is open. */
.hamburger-container .checkbox:checked ~ .drawer a {
  visibility: visible;
}

.hamburger-container .checkbox:checked ~ .drawer {
  transform: translateX(0%);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
  opacity: 0;
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.hamburger { width: 32px; height: 32px; position: relative;  display: block;  transition: transform 0.5s ease;  z-index: 1;  cursor: pointer;  padding-top: 5px;}

.hamburger .slice { display: block;  width: 100%;  height: 2px;  background-color: white;  transition: all 0.5s ease;}

.hamburger .slice:not(:first-child) {  margin-top: 10px;}

.drawer {position: fixed; left: 0; top: 0; height: 300px; width: max-content;  max-width: 100%;  padding: 22px;  background: #000000; opacity: .9; transform: translateX(-100%); transition: transform 0.5s ease;}

.drawer .nav-list {padding: 0; list-style: none; margin-top: 30px; margin-left: 20px;}

.drawer .nav-list .nav-list-item {padding-bottom: 10px;}

.content {margin-top: 52px; padding: 10px;}

div#hotdog a {color: white;}

div#hotdog a:hover {color: orange;}



/*Screen Size Changes*/

@media only screen and (max-width:960px) 
{  /* For tablets: */
div#menu {width: 27%; padding: 0;}
div#descriptive-text {width: 70%;}
div#othertours {display: none;}
nav {display: none;}
div#othertoursbottom {display: inline;}
div#hotdog {display: inline;}

}

@media only screen and (max-width:500px) 
{ 
/* For mobile phones: */
div#menu, div#descriptive-text {width: 95%;}
div#othertours {display: none;}
div#greenmenu {display: none;}
div#othertoursbottom {display: inline;}
div#hotdog {display: inline;}
}



/*No Border Text Styles*/
div#no_border {line-height:150%; margin-left:150px; border-left:1px solid black; padding-left:15px; margin-right:10px;}
div#no_border p  {text-indent:1em;}
div#no_border img {border:none;}

/*Footer Styles*/
div#footer table {background-color: #006825; }
div#footer td {font-family: Arial; font-weight: bold; color: white;}
div#footer a:link {color: white; text-decoration:none; }
div#footer a:visited {color: white;}

/*Address Footer Styles*/
div#address-footer {clear:both; text-align:center; padding-top:10px;}

/*Other Styles*/
div#indent_section {padding-left:25px; font-style: italic;}
div#nojavamenu {font-weight:bold; text-align:center;}



div#site_map {position:relative; left:200px;}
div#site_map .ItemStyle {font-family: "Arial"; font-size: 14px;	vertical-align: middle;	background-repeat: no-repeat; list-style-type: none; list-style-image: url(../images/graphics/usm.gif); color: #003399;}
div#site_map .PopItemStyle {font-size: 14px;	vertical-align: middle;	background-repeat: no-repeat; list-style-type: none; list-style-image: url(../images/graphics/dsmh.gif); color: #003399; font-family: "Arial";} 
div#site_map A:link {color: #003399; text-decoration: underline;}
div#site_map A:visited { color: #002B84; text-decoration: underline;}
div#site_map A:hover {font-weight:bold; color: #CC0000; text-decoration: underline;}

div#no_border img {border:none;}

.clearall {clear:both;}
.clearright {clear:right;}
.clearleft {clear:left;}
.center {text-align:center;}
span.guide_name {font-style:italic; font-weight:bold; clear:both; padding: 0px;}
span.codedirection {unicode-bidi:bidi-override; direction:rtl;}



/*START SLIDESHOW*/

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.mySlides {
    display: none;
 
     
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 30px;
    color: #222428;
    font-weight: bold;
    font-size: 50px;
    transition: .6s ease;
    border-radius: 0 3px 3px 0;
}

.next {
    right: 0px;
    border-radius: 63px 63px 63px 63px;
    color: #dc9000;
}

.prev {
    left: 20px;
    border-radius: 63px 63px 63px 63px;
    color: #dc9000;
}

.prev:hover,
.next:hover {
    color: #980034;
    background-color: rgba(0, 0, 0, 0.8);
}

.text {
    color: #f2f2f2;
    font-size: 1.5vw;
    padding-top: 2px;
    padding-bottom: 2px;
    position: absolute;
    bottom: 0px;
    width: 105%;
    text-align: center;
    background-color: #222428;
    opacity: .8;
    display: inline;
    
}

.numbertext {
    display: none;
    color: #000000;
    font-size: 20px;
    padding: 20px 30px;
    position: absolute;
    top: 0
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .6s ease
}

.active,
.dot:hover {
    background-color: #717171
}