/*Dynamic 1 updated 5th September 2022 - 20 sizes */
/* ssi menu colours added  */
/* updated 9th September 2020 */

@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');


/* for sticky menu start */
div.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        padding: 0px;
         text-align:left;
        font-size: 15px;
        z-index:1;
      }
/* sticky menu end */
/* top menu blank start */
.menublank
{
position:fixed;
/*background-image: url(../head/menubackwide.jpg);*/
background-image: url(../head/menubackwide1.jpg);
/*background-image: url(../head/headbackw2.jpg);*/
/*background-color: #ffcc00;*/
/*background-repeat: no-repeat;*/
background-position: center;
top:0px;
left:-5px;
/*min-height: calc(1vw + 60px);*/
height:60px;
/*min-width: calc(100vw - 1040px);*/
/*width: calc(100vw);*/
width:100%;

/*object-fit:cover;*/
 border: solid 0px blue;
z-index:1;
}

/* top menu blank end */

body {
  padding: 0px;
  margin: 0px;
  font-size: 14px;
  /*min-height: 200vh;*/
  font-family: 'Cabin', Sans-serif;
}
.overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    background: black;
    z-index: -1;
}

#main-menu {
  width: 90%;  
  background: transparent;
  margin: 0px;
 margin-left:auto;
  margin-right:auto;
   z-index: 9;   
}

#main-menu ul {
  max-width: 800px;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0px;
  display: flex;
  z-index: 9;
}

#main-menu li {
 }

#main-menu a {
  }

#main-menu a:hover {
}

#hamburger-input{
  display: none;
}

#hamburger-menu {  /*top hamburger green box menu*/
    position: fixed;
     top:5%;
    left: 1%;
    width: 40px;
    height: 50px;
   display: none;
    border: none;
    border:  solid #ffcc00 2px;
border-radius:8px;
    padding: 0px;
    margin: 0px;
    font-family: 'Cabin', Sans-serif;   
    background-image: url(../Logos/ham-menu.jpg); 
}

#hamburger-menu #sidebar-menu {  /* green block menu container keep */
visibility: hidden;
position: fixed;
top:20%;
left: -250px;  /* allows slide from left */
width:100%;
height: 95%;
background:rgba(195,213,195,0.8);
background: transparent;  /* ? */
transition: 1.5s;
padding: 0px 10px;
box-sizing: border-box;
  }

#hamburger-menu h2 {
  font-size: 1.2rem;
}

#hamburger-menu ul {  /* green block menu inside container  keep*/
border:solid #ffcc00 3px;
/*border:solid  fuchsia 6px;*/
border-radius:8px;
text-align: left;
width:200px;
top:0%; 
margin-left: 0px;
padding-left: 0px;
padding-top:5px;
padding-bottom:6px;
background:rgba(11,205,11,0.8);
}

/* default */
/*
#hamburger-menu li {    
list-style-type: none;
 line-height: 1.5rem;
 line-height: 3.5rem;
 }*/

/* side menu spacing */

/* default setting  */
.buttondynamic {
color:#000000;
font-family: Tahoma;
font-style: italic;
font-size:12px;
text-decoration:none;
/* color: fuchsia;*/
}


/* 20 */ 
@media screen and (max-height: 960px) {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 35px;
}
}

 /*19*/ 
@media screen and (max-height: 926px) {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 35px;
}
.buttondynamic {
color:#000000;
font-family: Tahoma;
font-style: italic;
font-size:12px;
text-decoration:none;
/*color: grey;*/
}
}
 /*18*/ 
@media screen and (max-height: 915px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
} 
 /*17 */
@media screen and (max-height: 896px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
}
/* 16*/ 
@media screen and (max-height: 854px) {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
}
/* 15*/ 
@media screen and (max-height: 851px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
}
 /*14*/ 
@media screen and (max-height: 844px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
}
 /*13 */  
@media screen and (max-height: 823px) {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
}
/* 12 */
@media screen and (max-height: 812px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
}

/* 11 *//*800*/
@media screen  and (max-height:800px) {
#hamburger-menu li {
margin-left:10px;
line-height: 30px;
}
.buttondynamic {
color:#000000;
font-family: Tahoma;
font-style: italic;
font-size:12px;
text-decoration:none;
/*color: blue;*/
}
}
 /*10*/ 
@media screen and (max-height: 760px) {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 30px;
}
}
 /*9*/ 
@media screen and (max-height: 740px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 28px;
}
}
 /*8*/ 
@media screen and (max-height: 736px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 28px;
}
}
 /*7*/ 
@media screen and (max-height: 732px)  {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 28px;
}
}
/* 6 */
@media screen and (max-height: 731px) {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 28px;
}
}
/* 5 */ 
@media screen and (max-height:667px) {  
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 28px;
}
}
/* 4 */   
@media screen and (max-height:640px){ 
#hamburger-menu ul {
top:45%;
} 
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 28px;  
}
}
@media screen and (max-height: 640px){
.buttondynamic {
color:#000000;
font-family: Tahoma;
font-style: italic;
font-size:12px;
text-decoration:none;
/*color: green;*/
}
}
/* 3 */
@media screen and (max-height: 568px) {
#hamburger-menu {
position: fixed;
top:9%;
}
#hamburger-menu ul {
top:100%;
}
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 26px;
}
}
/* 2 */
@media screen and (max-height: 480px) {
#hamburger-menu {   /*top hamburger*/ 
position: absolute;
top:2%;
}
#hamburger-menu #sidebar-menu {
visibility: hidden;
position: absolute;
top:150%;
}
#hamburger-menu li {
list-style-type: none;
margin-left:10px;
line-height: 25px;
 }
 } 
/* 1 */  /* Nokia 8110 4G */
@media screen and (max-height: 320px)  { 
#hamburger-menu {   /*top hamburger*/ 
position: absolute;
top:0%;
left: 1%;
width: 33px;
height: 50px;
display: none;
border: none;
border:solid #ffcc00 2px;
border:solid red 2px;
border-radius:8px;
padding: 0px;
margin: 0px;
font-family: 'Cabin', Sans-serif;   
background-image: url(../Logos/ham-menu-sm.jpg); 
}
#hamburger-menu #sidebar-menu {
visibility: hidden;
position: absolute;
top: 100%;
width:750%;
height: 2000%;
background: transparent; 
font-size:10px;
transition: 1.5s;
padding: 0px 0px;
box-sizing: border-box;
}
#hamburger-menu ul {  
border:solid red 2px;
border-radius:8px;
text-align: left;
width:200px;
top:38%;
margin-left: 2%;
padding-left: 0px; 
padding-top:5px;  
padding-bottom:5px;
background:rgba(11,205,11,0.8);
}
#hamburger-menu li {
list-style-type: none;
margin-left:5px;
line-height: 20px;
}
.buttondynamic {
color:#000000;
font-family: Tahoma;
font-style: italic;
font-size:12px;
text-decoration:none;
/*color: blue;*/
}
}

 /* menu spacing end*/


/* green block link buttons font sizes overriden in dynamic buttons section bottom*/
#hamburger-menu a {   
background-color: #fffff0;
border:solid #ffcc00 2px;
border-radius:8px;
text-align:center;
padding-left:4px;
padding-right:4px;
text-decoration:none;
}

#hamburger-menu a:hover {
}

#hamburger-input:checked + #hamburger-menu #sidebar-menu {
    visibility: visible;
    left: 0;
}
#hamburger-input:checked ~ .overlay {
   visibility: visible;
  opacity: 0.4;
}

@media screen and (max-width: 700px) {
#main-menu {
display: none;
}
#hamburger-menu {
display: inline;
z-index: 999;
}
}

/* navigation menu colours */

.navmencolorsA {
font-family:arial;
font-size:12px;
color:yellow;	
}
.navmencolorsB {
font-family: Times new roman;
font-size:16px;
font-style:italic;
color:yellow;	
}
.navmencolorsC {
font-family:
'Parisienne',Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 25px;
color:yellow;
}

@media screen and (min-width: 700px)  {
.navmencolorsA {  /* bed breakfast  & address etc */
position: relative;
color:white;
z-index: 999;
}
.navmencolorsB {  /* anns cottage & the old smithy */
position: relative;
color:white;
z-index: 999;
}
.navmencolorsC{  /* Anns Cottage Rosedale */
position: relative;
color:white;
z-index: 999;
}
}
/* navigation menu colours end */