html {
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
        }

        @media only screen and (max-width: 600px) {
  p {
   line-height: 1;
  }
}

 @font-face {
            font-family: Miller Banner;
            font-weight: 300;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-Light.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-Light.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 300;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-LightItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-LightItalic.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 400;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-Roman.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-Roman.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 400;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-RomanItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-RomanItalic.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 600;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-Semibold.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-Semibold.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 600;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-SemiboldItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-SemiboldItalic.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 700;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-Bold.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-Bold.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 700;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-BoldItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-BoldItalic.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 800;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-Black.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-Black.woff') format('woff');
        }

        @font-face {
            font-family: Miller Banner;
            font-weight: 800;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/MillerBanner-BlackItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/MillerBanner-BlackItalic.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 300;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Light.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Light.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 300;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-LightItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-LightItalic.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 400;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Regular.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Regular.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 400;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-RegularItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-RegularItalic.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 500;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Medium.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Medium.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 500;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-MediumItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-MediumItalic.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 600;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Semibold.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Semibold.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 600;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-SemiboldItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-SemiboldItalic.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 700;
            font-style: normal;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Bold.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-Bold.woff') format('woff');
        }

        @font-face {
            font-family: Founders Grotesk;
            font-weight: 700;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-BoldItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-BoldItalic.woff') format('woff');
        }

.grot {
            color: #424242;
            font-family: Founders Grotesk, sans-serif, -apple-system;
            font-size: 1.5vmin;
            line-height: 1.5;
            font-weight: 300;
          
        }

        .grot:hover {
            color: #424242;
        }

        .groti {
            color: #424242;
            font-family: Founders Grotesk, sans-serif, -apple-system;
            font-size: 1.5rem;
            font-weight: 300;
            line-height: 1.5;
            font-style: italic;
            -webkit-letter-spacing: 0;
            -moz-letter-spacing: 0;
            -ms-letter-spacing: 0;
            letter-spacing: 0;
            margin: 0 0 1rem;
            font-style: italic;
            font-display: swap;
            src: url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-LightItalic.woff2') format('woff2'), url('https://www.skyscript.co.uk/fonts/FoundersGroteskWeb-LightItalic.woff') format('woff');
        }

  a.grot1 {
            color: #ab8e66;
            font-family: Founders Grotesk, sans-serif, -apple-system;
            font-size: 1.5rem;
            font-weight: 400;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            text-underline-position: under;
            line-height: 1.47;
            -webkit-letter-spacing: 0;
            -moz-letter-spacing: 0;
            -ms-letter-spacing: 0;
            letter-spacing: 0;
        }


.skyfoothd {
color: #a38d69;
font-weight: bold;
font-size: 12px;
padding-bottom: 10px;
}
.signoff {text-align: center; justify-content: center; padding: 20%; padding-top: 2%; padding-bottom: 2%; font-size:10px; color:#323232} .ml {color: #3f5e74}
.center {
  margin-left: auto;
  margin-right: auto;
}

.sy {
        height: 30px;
        position: relative;
        display: inline-block;
        margin: 0px;
        padding: 0px;
    }
.sy .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
.sy:hover .img-top {
        display: inline;
    }
.pl22 {color:#333333; font-size:13px; padding-bottom: 5px}

.pet {font-family:'Petrona', serif; color:#333333;}   
.petl16 {font-family:'Petrona', serif; color:#333333; text-align: left; font-size: 16px}       
.petml {font-family:'Petrona', serif; color:#3f5e74;}
.peti {font-family:'Petrona', serif;font-style: italic;color:#333333;}

        .blbox {
            font-family: 'Open Sans', sans-serif; color:#efeee7;}
            .blbox:hover {color: #a38d69;}

        .blbox2 {
            font-family: 'Open Sans', sans-serif; color:#69502b;}
            .blbox2:hover {color: #a38d69;}

            .botbox {margin: 0 auto;  text-align: center;  width:100%; padding:12%; padding-bottom: 50px; padding-top: 0; margin-top: -100px;margin-bottom: 0; font-size:14px; line-height:40px; background-color: #040618;}
            .botboxtit {margin: 0 auto;  text-align: center; padding:0; color:#cab796; font-size: 20px;}

.os {font-family: 'Open Sans', sans-serif;}
.ontop { z-index: 99 !important;  position: relative; }

.stars {background: url(https://www.skyscript.co.uk/im/2023/bgfooter2.jpg) center center ;background-size: cover;background-color: #040618;height: 325px;}
.footergold {background-color: #040618;}



.agent-1, .agent-3 {
  opacity: 0;
  animation: fade-in-right ease 0.4s forwards;
}

.agent-2 {
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4s;
}

.agent-3 {
  animation-delay: 0.8s;
}
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes grow-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hover_img a {position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; height: 300px; width: 300px; overflow: visible;}
.crow {margin: 0 auto;  text-align: center; padding:0;}
.crowtop {margin: 0 auto;  text-align: center; padding:0; padding-top:100px}
.crow10 {margin: 0 auto;  text-align: center; padding:10px;}
.crow20 {margin: 0; margin-top: 20px;  text-align: center; padding:10px;}
.inim {max-width: 100%; width: 300px; border-radius: 5%;}
.inimis {max-width: 100%; width: 300px; border-radius: 5%;}
.in1 {font-size:30px;margin-top:-30px; text-align:center}
.in2 {font-size:16px;text-align:center; color:#867356;}
.intit1 {margin: 0 auto; padding: 2px; padding-top:5px; padding-bottom: 10px; text-align:left;}
.intit2 {font-size: 36px}
.inpeti1 {font-family:'Petrona', serif; font-style: italic; color:#333333;font-size:14px; padding-top:20px;}
.inpet1 {font-family:'Petrona', serif; color:#333333; font-style:normal;}
.hrin1 {border: 1px solid #a48659; margin-top:2%; margin-bottom: 1%; margin-right:0; opacity:0.6;}
.crowtext {margin: 0 auto; padding:0; position: relative; text-align: center;}

.hlk:hover {color:#d3b889;}




  .figure {
    position: relative;
    width: 360px; /* can be omitted for a regular non-lazy image */
    max-width: 100%;
  }
  .figure img.image-hover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity .2s;
  }
  .figure:hover img.image-hover {
    opacity: 1;
  }


.cenlab {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); 
font-family:'Petrona', serif;
font-size: 24px;
line-height: 1; 
color:#333333; 
text-transform: none;
font-style: italic;
font-weight: 200;
z-index:200;}

.golbx {border:solid; border-width: 1px; border-color:#a6906b; border-radius: 30px; padding-top:5px; padding-bottom:6px; margin:20px; margin-top: 0;}

.art1{padding:3%;}
  /* headlines with lines */
.decorated{
     overflow: hidden;
     text-align: center;
 }
.decorated > span{
    position: relative;
    display: inline-block;

}
.decorated > span:before, .decorated > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px dotted;
    color:#405e74;
    width: 100vw;
    margin: 0 20px;
}
.decorated > span:before{
    right: 100%;
}
.decorated > span:after{
    left: 100%;
}
  
.ledebox {
  text-align: left; 
  padding: 4% 0%; 
  margin: 4% 0%; 
  background-color:#e5e4e2; 
  border-radius: 5em/5em; 
  border-style: dashed; 
  border-color:#c4c4c4; 
  border-width:1px ;}

.lede {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  padding: 0% 6%;
  text-decoration: none;
  margin:0; margin-bottom: 1%;
  display: block;
}
.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}

.pic {text-align:center; padding: 6% 6%}

 .petg {font-family:'Petrona', serif; color:#370802;}

.sub2 {font-weight: bold; padding-top: 2%; padding-bottom: 2%; color: #405e74; font-size: 28px}

.titsub {padding: 4% 0%;}

@media all and (max-width: 699px) and (min-width: 200px){
  .lede {font-size: 13px; padding: 4% 6%;}
  .container {padding-right:5px;padding-left:5px;margin-right: auto;margin-left: auto;}
  .ledebox {padding: 3% 0%; margin: 3% 0%; border-radius: 2em/2em; }
  .titsub {padding: 50px 0%;}
    .art1{padding:8%;}
    .pic {padding:6% 0% 3% 0%}
  }

@media all and (max-width: 699px) and (min-width: 375px){
  .ledebox {padding: 3% 1%; margin: 3% 1%; border-radius: 2em/2em; }
  .lede {font-size: 13px; padding: 4% 6%;}
  .container {padding-right:8px;padding-left:8px;margin-right: auto;margin-left: auto;}
  h1 {margin:15px 10px 15px 15px;}
  .titsub {padding: 50px 0%;}
  .art1{padding:8%;}
   .pic {padding:6% 0%}
  }

@media all and (max-width: 1000px) and (min-width: 700px) {
   .ledebox {padding: 4% 1%; margin: 4% 1%; border-radius: 3em/3em; }
  .lede  {padding: 4% 6%;}
  h1 {margin:40px 15px 15px 15px;}
  h1.noblock {margin:40px 15px 15px 15px;}
    .titsub {padding: 50px 0%;}
     .art1{padding:8%;}
      .pic {padding:6% 2%}

}


@media all and (max-width: 1151px) and (min-width: 1001px) {
  .ledebox {border-radius: 4em/4em;}
  h1 {margin:50px 15px 15px 15px;}
  h1.noblock {margin:50px 15px 15px 15px;}
  .art1{padding:8%;}
}

@media all and (min-width: 1151px) {
  h1 {margin:50px 15px 15px 15px;}
  h1.noblock {margin:50px 15px 15px 15px;}
  h1:after, h1:before {width: 320%;}

}





<!--
<script>
    function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});
</script>-->