/*mainstyle css Aika Adventures*/

html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
body {
  background-image: url("img/giraffe-tarangire-1600.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  }
div {
    background: white;
  background: rgba(240,240,255,0.60);
}
h1 {
  text-align: center;
}

h1,h2,footer {
	    background: #e9f0ad;
	    color: #656742;
	}
	h3 {
	    color: #656742;
	    text-shadow: 0 0 2px #e9f0ad;
	    margin-left: 1em;
	}
	
h4 {
      font-size:1.3em;
      color:red;
      font-weight: 600;
      margin-left: 1em;
      text-align: left;
 }
 
    .small {
        text-align:left;
        font-size:1em;
    }
    li{
        font-size: 1.2em;
        text-align: left;
        margin: 1em;
    }
        
    
    a.long-link {
        overflow-wrap: break-word;
        word-wrap: break-word; 
    }
   
    .btn-whatsapp {
        background:green;
        box-shadow:0 0 4px 2px white inset;
        padding:10px;
        color:white;
        cursor:pointer;
    }
    .btn-whatsapp:hover{
        box-shadow:0 0 4px 2px green inset;
        background:white;
        color:green;
    }
			.content-image {float:right;margin:1em;width:35%;}
p{
	font-size:1.3em;
	padding:1em;
	margin:0;
	line-height: 180%;
	}
	table {
		
		font-size: 1.2em;
		text-align: center;
		margin: 0 auto;
	}

.logo {
	width:20vw;
	position: sticky;
	left: 2em;
	top: 3em;
}
.footer-logo {
  width: 26vw;
  margin-top: 2em;
  }
main {z-index:4;}
.w3-modal {z-index:6;}
.banner {
			width:100vw;
			height:50vh;
			min-height:75vw;
			background-image: url("../img/giraffe-tarangire-1600.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			background-position:center;
			}
.inside-image {float:right;margin:1em;width:35%;}
.content {
  width: 96vw;
}
@media screen and (min-width: 768px){
	.content {
	  width: 70vw;
	  margin-left: calc(15vw - 1em);
	  }
}
	
	

.sidenav p,.sidenav a {
 font-size:1em;
 }	
.routemap{
width:100%;
margin:1em 0;
}
.solid {
  background: white;
  }
.menu-logo {
width: 180px;
}
.menu-item {
    float:left;
    width:15%;
    text-align:center;
    border-right:thin black solid;
    background:rgb(220,220,200);

}
.menu-item:hover {text-decoration:none;color:#faac00;}
button {
cursor: pointer;
background: #e9f0ad;
}
button:hover {
    background: #faac00;
}
footer {
	text-align: center;
	background: #aaa;
}


.accordion {
  width: 90%;
  padding: 1em;
  margin-left: 1em;
  cursor: pointer; 
  background: #e9f0ad;
 }
 
 .accordion:nth-of-type(odd) {
     background: #faac00;
 }
 /* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel table td, .panel table th{
  margin:0 5px;  
  border:thin black solid;
}
.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* The Modal Background Overlay */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.7); /* Black overlay with opacity */
}

/* The Active State managed by JS */
.modal.is-active {
  display: block;
}

/* Modal Content Box */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
}

/* Close Button (X) */
.modal-close {
  color: #ddd;
  text-shadow: 0 0 2px red;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.modal-close:hover {
  color: #f00;
}

.modal-image {
    width:100%;
}

.third-width {
width: 90vw;
height: 90vw;
box-shadow: 0 0 10px black inset;

}
.third-width p {
    font-size: 1em;
    line-height: 130%;
    text-align: center;
}

/*@media screen and (min-width: 600px) and (max-width: 807px) {
.third-width {
  width: 30%;
  float:left;
  margin: 1vw;
  height: 40vw;
 }
}*/

@media screen and (min-width: 768px) {
 .third-width {
width: 28%;
margin: 2px;
float: left;
height: 23vw;
box-shadow: 0 0 10px black inset;
}
}
/* The side navigation menu */
.hamburger {
    position: fixed;
    top: 10px;
    right: 15px;
    background: #e9f0ad;
}

.hamburger:hover {
    color: #faac00;;
}

.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 3; /* Stay on top */
  top: 0;
  left: 0;
  background: #e9f0ad;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  padding-bottom: 60px;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  overflow-y: scroll;
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 16px;
  text-decoration: none;
  font-size: 1em;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #3c3;
  background: white;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 0;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/* end menu css */