body {	
background:#87b9fe;
}
H1{font-weight:100;}
.main{
width:990px;
background:white;
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
margin-right:auto;
margin-left:auto;
margin-bottom:11px;
}
.topbanner{
background:#ffffff url(https://hireasantasgrotto.co.uk/gifs/hire_a_santas_grotto2026.jpg) no-repeat;
height:20em;
padding-top:296px;
}
.topbannersmall{
background:#ffffff url(https://hireasantasgrotto.co.uk/gifs/hire_a_santas_grotto2026.jpg) no-repeat;
height:16em;
}
.navbox{
border:#fefefe 1px solid;
background:#ffffff url(https://hireasantasgrotto.co.uk/gifs/nav.gif);
float:left;
margin:0px;
width:160px;
text-align:center;
padding:9px;
font-size:14px;
border-radius: 11px;  
margin-right:4px;
transition: transform 0.15s ease, box-shadow 0.15s ease; /* for smooth hover */
}
.navbox:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* optional, but looks nice with the lift */
}

.navbox:hover a{
  text-decoration:none;
}

img.icon{height:14px;width:auto;}
.hero-inner{ position:relative; z-index:1; padding:15px 0 0px; }

@media only screen and (max-width: 990px){

.topbanner{
background:#ffffff url(https://hireasantasgrotto.co.uk/gifs/hire_a_santas_grotto2026mob.jpg) no-repeat;
height:20em;
padding-top:296px;
}
.topbannersmall{
background:#ffffff url(https://hireasantasgrotto.co.uk/gifs/hire_a_santas_grotto2026mob.jpg) no-repeat;
height:16em;
}

.main{
width:95%;
}
   .hero{ background:url('https://hireasantasgrotto.co.uk/bckmobile2.jpg') center/cover no-repeat; background-attachment:scroll; min-height: 90svh; }
  .hero{
    /* mobile browsers can be weird with fixed backgrounds, so it's often safer to turn this off */
    background-attachment: scroll;

    /* shift the image UP by 100px */
    background-position: center calc(50% - 50px);
    /* Alternative if calc misbehaves:
       background-position: center -50px;
    */
  }
}


    .section{padding:0px 0}