@charset "UTF-8";
/* CSS Document */


body{background-color:rgba(61,32,10,0.91)}
body{background-image: url("images/eaglebackground1.png"); background-repeat: no-repeat; background-position: center; position:inherit; margin: 0}


navicon:hover {
  background-color: #FFCEA1;
}

.hov:hover {background-color:rgba(238,244,153,0.50) }

topnav{padding: 75px 0px 0px 0px; margin: 75px 0px 0px 0px}


div.mobile{display:none}
@media only screen and (max-width: 45em){
	div.mobile{display:block;}
	div.desktop{display:none;}
}

.dropdown { position: sticky
    
}
/* Style the dropdown button */
.dropbtn {
	
    color: white ;
    font-size: 16px;
    border: none;
    cursor: pointer;
	
}
/* Dropdown content */
.dropdown-content {
    display: none;
    background-color: rgba(61,32,10,0.84);
    min-width: 100px;
    
}
/* Links inside dropdown content */
.dropdown-content a {
    color: #D6C6B8;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:target {
    background-color: antiquewhite
}
/* Show the dropdown content on click */
.dropdown:hover .dropdown-content {
    display:block;
}
/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
background-color: antiquewhite;
}

button{background-color:rgba(255,227,201,0.91);
color:rgba(61,32,10,0.95);
box-shadow: 2px 2px rgba(238,244,153,0.80);
border-radius: 10px;
text-align: center;
cursor: pointer;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 17pt;
padding: 6px
}

button:hover{
	background-color:rgba(255,249,223,1.00)
}

button2{background-color: #D6C6B8;
color:rgba(61,32,10,0.90);
box-shadow: 2px 2px rgba(195,204,58,1.00);
border-radius: 5px;
text-align: center;
cursor: pointer;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 11pt;
padding: 4px
}

button2:hover{
	background-color:rgba(255,249,223,1.00)
} 

button3{


}

button3:hover{
	background-color:rgba(255,249,223,1.00)
}

.box {background-color:rgba(214,198,184,1.00); padding: 10px; flex: 0 0 30%; box-sizing: border-box; margin: 3% 0 3%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0. 0.2); transition: transform 0.2s ease-in-out; hover transform: translateY(-5px)}
.box:hover {transform: translateY(-5px)}

.subcontainer {width: 90%; margin:auto}

.grid{display: grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem; padding: 20px; overflow-x:hidden}

.img{width:100%; min-height: 275px; background-position: center; background-size: cover}

.img:nth-child(1){ background-image: url("images/bombay3-9-2026-35.png")}
.img:nth-child(2){ background-image: url("images/bombay4-22-42.png")}
.img:nth-child(3){ background-image: url("images/bombay3-9-2026-15.png")}
.img:nth-child(4){ background-image: url("images/bombay3-9-2026-19.png")}
.img:nth-child(5){ background-image: url("images/eagle1.png")}
.img:nth-child(6){ background-image: url("images/osprey1.png")}
.img:nth-child(7){ background-image: url("images/osprey2.gif")}
.img:nth-child(8){ background-image: url("images/capelandscape .JPG")}
.img:nth-child(9){ background-image: url("images/bowers.JPG")}
.img:nth-child(10){ background-image: url("images/wed1.JPG")}
.img:nth-child(11){ background-image: url("images/wed3.JPG")}
.img:nth-child(12){ background-image: url("images/wed2.JPG")}
.img:nth-child(13){ background-image: url("images/wed5.JPG")}
.img:nth-child(14){ background-image: url("images/engagementsession2.jpg")}
.img:nth-child(15){ background-image: url("images/engagementsession.jpg")}



/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 15px; /* Place the button at the bottom of the page */
  right: 15px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color:rgba(61,32,10,1.00); /* Set a background color */
  color:rgba(255,249,223,1.00); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 13px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 15px; /* Increase font size */
}

#myBtn:hover {
  background-color:rgba(238,244,153,0.80); /* Add a dark-grey background on hover */
}