/**
Theme Name: Astra
Author: Exo
Author URI: https://exo.uk
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: astra
*/

.nopmargin p {margin-bottom:0px;}

html {scroll-snap-type: both proximity; }  
.snapme {scroll-snap-align: start;  scroll-snap-stop: normal;}

#primary canvas {
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
}



/* sub-menu arrows on menu */
#uabbexomenu .uabb-menu-toggle {float: none;font-size: 25px;padding-left: 20px;vertical-align: middle;}
#uabbexomenu a, #uabbexomenu a:active, #uabbexomenu a:focus{outline: none;}

.exonewsfeed {border-bottom:1px dotted #000000;}
.exonewsfeed:after {content: "";display: table;clear: both; margin-bottom: 10px;}
.exonewsfeedcol1 {width: 30%; float: left;padding: 0px;}
.exonewsfeedcol2 {width: 70%; float: left;padding: 0px 0px 0px 10px;line-height: 1.1;}
.exonewsfeedtitle {font-weight:600; font-size:14px; color:#000000; margin-bottom:4px;}
.exonewsfeedexcerpt {display: inline; font-size:12px;}
.exonewsfeedexcerpt p {margin-bottom:0px; display:block; line-height: 16px !important;}
.exonewsfeedread {display: inline; font-size:12px;} 
.exonewsfeeddate {color:#cccccc; font-size:10px; margin:5px 0px 4px 0px;}

/* Exo Menu CSS */
.exo-menu {position: relative;right: 0;height: 46px;width: 46px;float: right;}
.exo-menu-link {position: absolute;width: 100%;height: 100%;z-index: 200; outline: none;}
.exo-menu-link:focus {outline: none;}
.exo-menu-icon {position: absolute;left: 0; top: 0;width: 30px;height: 20px;margin: auto;right: 0;bottom: 1px;}
.exo-menu-line {
		background-color: #fff;
    height: 3px;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    left: 0;
    transition: all 0.50s ease-in-out;
    box-shadow: 1px 1px 4px #000000;
}
.exo-menu-line-2 {top: 0;bottom: 0;margin: auto;}
.exo-menu-line-3 {bottom: 0;}
.exo-menu.open .exo-menu-line-1 {transform: translateY(10px) translateY(-50%) rotate(-45deg);}
.exo-menu.open .exo-menu-line-2 {opacity: 0;}
.exo-menu.open .exo-menu-line-3 {transform: translateY(-10px) translateY(50%) rotate(45deg);}
.exo-menu.open .exo-menu-line {box-shadow:none;} /* remove subtle shadow when menu open */
.exomenutemplate {background-image: linear-gradient(180deg, #131A4F 0%, #091131 100%);}
.exo-menu.open .exo-menu-link:hover {border-radius: 50%;background: #00000033;}
/* deactivated for this site
	.exo-menu.isscrolled .exo-menu-circle {background-color: #937A5B;transform: scale(1.4);transition: all 0.5s ease-in-out;}	
*/	

@media only screen and (max-width: 768px){
		.exo-menu {top: 3px; right:45px;}
		.exo-menu-line {height: 4px;}
		.exo-menu-icon {width: 38px; height: 24px;}
		.exo-menu.open .exo-menu-line-1 {transform: translateY(13px) translateY(-50%) rotate(-45deg);}
		.exo-menu.open .exo-menu-line-3 {transform: translateY(-11px) translateY(50%) rotate(45deg);}
		.exo-menu:hover .exo-menu-circle {transform: scale(1.1);}
}
.exo-menu-circle:hover {}	
.exo-menu-circle {
    position: absolute;
    border: 1px solid #b98240;
    background-color: #161415;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(1.0);
    z-index: 1;
    transition: all 1.0s cubic-bezier(.86,0,.07,1);
    background-image: url(https://fastsites.co.uk/wp-content/uploads/2024/12/contact-bg.jpg);
    background-repeat: no-repeat;
    background-position: 10% 0%;
	  background-attachment: scroll;
    background-size: cover;
	  box-shadow: 1px 1px 2px 1px #000000;        
}
.exo-menu:hover .exo-menu-circle {background-color: #36301a;transform: scale(1.3);transition: all 0.5s ease-in-out;}
.exo-menu:hover .exo-menu-line {transition: all 0.5s ease-in-out;}
.exo-menu.open .exo-menu-circle {transform: scale(30);transition: all 1.0s cubic-bezier(.86,0,.07,1);}
.exo-menu-overlay {
  position: fixed;top:0px;left: 0px;
  color: #333;
  height: 100%; width: 100vw;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease-in-out;
  z-index: 99;
}
.exo-menu-overlay.open {opacity: 1;visibility: visible;transition: 2.0s cubic-bezier(.86,0,.07,1);}
.exo-menu-overlay .uabb-creative-menu .menu > li {margin-top:-45px !important;transition: all 2.0s ease-in-out;}
.exo-menu-overlay.open .uabb-creative-menu .menu > li {margin-top:0px !important;transition: 1.5s cubic-bezier(.86,0,.07,1);}	
/* required for logo, due to sticky header image shrink etc, this prevents shrink */
.fl-builder-content[data-type="header"].fl-theme-builder-header-shrink .exo-menu-overlay img {max-height: unset !important;}


/* Exo Menu (2) CSS */
.exo-menu2 {position: relative;right: 0;height: 46px;width: 46px;float: right;}
.exomenutemplate {background-image: linear-gradient(180deg, #131A4F 0%, #091131 100%);}
.exo-menu.open .exo-menu-link:hover {border-radius: 50%;background: #00000033;}

@media only screen and (max-width: 768px){
		.exo-menu2 {top: 3px; right:45px;}
		.exo-menu2.open .exo-menu-line-1 {transform: translateY(13px) translateY(-50%) rotate(-45deg);}
		.exo-menu2.open .exo-menu-line-3 {transform: translateY(-11px) translateY(50%) rotate(45deg);}
		.exo-menu2:hover .exo-menu-circle2 {transform: scale(1.1);}
}
.exo-menu-circle2:hover {}	
.exo-menu-circle2 {
    position: absolute;
    border: 0px solid #000000;
    background-color: #000000;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(1.0);
    z-index: 1;
    transition: all 1.0s cubic-bezier(.86,0,.07,1);
    background-image: url(/wp-content/uploads/2025/04/moon-cropped.png);
    background-repeat: no-repeat;
    background-position: 100% 0%;
	  background-attachment: scroll;
    background-size: cover;
	  box-shadow: 1px 1px 2px 1px #000000;        
}
.exo-menu2:hover .exo-menu-circle2 {background-color: #000000;transform: scale(1.3);transition: all 0.5s ease-in-out;}
.exo-menu2:hover .exo-menu-line {transition: all 0.5s ease-in-out;}
.exo-menu2.open .exo-menu-circle2 {
	transform: scale(30);
	transition: all 1.0s cubic-bezier(.86,0,.07,1);
	animation-name: movebigmoon;
  animation-duration: 240s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
.exo-menu-overlay2 {
  position: fixed;top:0px;left: 0px;
  color: #333;
  height: 100%; width: 100vw;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease-in-out;
  z-index: 99;
}
.exo-menu-overlay2.open {opacity: 1;visibility: visible;transition: 2.0s cubic-bezier(.86,0,.07,1);}
.exo-menu-overlay2 .uabb-creative-menu .menu > li {margin-top:-45px !important;transition: all 2.0s ease-in-out;}
.exo-menu-overlay2.open .uabb-creative-menu .menu > li {margin-top:0px !important;transition: 1.5s cubic-bezier(.86,0,.07,1);}	
/* required for logo, due to sticky header image shrink etc, this prevents shrink */
.fl-builder-content[data-type="header"].fl-theme-builder-header-shrink .exo-menu-overlay2 img {max-height: unset !important;}

@keyframes movebigmoon {
  0%   {transform: scale(30) rotate(0deg);}
  50% {transform: scale(28) rotate(180deg);}
  100% {transform: scale(30) rotate(0deg);}
}



.PriceColumn {transition: all 0.5s ease-in-out;}
.PriceColumn:hover {
	transform:scale(1.02); z-index:3;
}
.DealColumn {z-index:2;}
.bestdeal {position:relative;}
.FSDeal {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 24px; /* the top offset */
  position: absolute;
  top: inherit;
  right: inherit;
  z-index: 99;  
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 20px var(--f) calc(10px + var(--r));
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),var(--r) calc(50% - var(--f)/2));
  box-shadow: 0 calc(-1* var(--f)) 0 inset #0005;
  font-family: 'Oswald', sans-serif;
  background: #e43c1a;
}
@media (max-width: 1250px) {
		/* modal popup for smaller devices */
    .uamodal-qg1elz06hdn2 .uabb-content {width: 93%;}
}

.bt-sticking p {margin:0px;transition: all 0.2s ease-in-out;}
.FSfirstletter {
	color:#FF0000 !important;
  position: relative;
}
.stepnum {color:#B57F3E !important;}
.fl-theme-builder-header-scrolled #mainheader {border-bottom:1px solid #B98240; box-shadow: 0px 1px 10px 5px #000000;}
.smallmenu {font-size:10px;}
.paymenttext {font-size:13px;margin-top:30px;}
.smallprint {font-size:13px;}
.newline {clear:both;}
.templatefield {float: left;margin-right:20px;}
.FSformbutton {
    background: #c77e38;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 10px;
    padding: 13px 15px;
    float: left;
}
.bullpoint {line-height:1;}
.FSbuylink:hover {color:#FFFFFF !important;}
button.FSbuy {    
		padding: 8px 8px 8px 8px;
    float: right;
    margin: 6px 0px;
    font-size: 14px !important;
    border-radius: 5px;
    line-height: 1 !important;
    color:#FFFFFF !important;
}   

.devicesilver .uabb-device-shape img {
	filter: invert(1) sepia(7%) saturate(54%) hue-rotate(156deg) brightness(114%) contrast(84%) drop-shadow(10px -10px 10px #000000AA) !important;
}
.devicegrey img {
	filter: sepia(0%) brightness(40%) contrast(120%) sepia(10%) hue-rotate(0deg) saturate(0%) drop-shadow(10px -10px 10px #000000AA) !important;
}    
.deviceblue img {
	filter: sepia(1%) brightness(39%) contrast(120%) sepia(100%) hue-rotate(190deg) saturate(500%) drop-shadow(10px -10px 10px #000000AA) !important;
}	
.devicegrey img {
    filter: sepia(0%) brightness(100%) contrast(70%) sepia(0%) hue-rotate(0deg) saturate(0%) drop-shadow(2px -10px 10px #000000AA) !important;
}    
.devicebrown img {
	filter: sepia(0%) brightness(40%) contrast(79%) sepia(40%) hue-rotate(0deg) saturate(400%) drop-shadow(2px 2px 3px #000000AA) !important;
}
    
.FSscroll .fl-photo-caption-below {padding-bottom: 4px;padding-top: 10px;float: left;text-align: left;}

.FSscroll .fl-photo-caption {font-size: 14px;}
.FSscroll .fl-photo-content {overflow: hidden;height: 500px;border: 0px;}
.FSscroll img:hover {
    margin-top: 500px;
    transform: translate(0,-100%);
    transition-timing-function: ease-in-out;
    transition-duration: 3s;
}
.FSscroll img {transition-timing-function: ease-in-out;transition-duration: 3s;}
.FSscroll .fl-photo-content A::before {
    content: "View site";
    position: absolute;
    margin: 70% 50% 50% 0%;
    width: 100px;
    font-size: 14px;
}
.FSscroll A::before {
    transform: translate(-50%, -50%);
    background: #c77e38;
    color:#FFFFFF !important;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 8px;
}

.equal-height-buttons {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.buybutton {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
}

/* Non-selectable/editable text box */
.fluentform .ff-el-group .FStemplate {
background: transparent !important;
    border: 0px;
    pointer-events: none;
    color: #FFFFFF;
    font-weight: bold;
    padding: 12px 0px;
    font-size: 17px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        width: fit-content;
    padding: 10px 10px;
    border: 1px solid #b98240;
}
.fluentform .ff-el-tooltip svg {fill: #b98240 !important;margin: 5px 5px 0px 6px;}

/* bug fix to Stripe card inpit box */
.ff_stripe_card_element {background:#FFFFFF;}		


#menu-main-menu li::before {
  content: '';
  float: left;
  height: 1.5em; /* a bit more than line height */
  width: 1em;
}



.introcover {position:absolute;top:0px;left:0;z-index:99; overflow:hidden;}	
.introcover .fl-col-content {
	  display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}
#shuttlevideo,#videocanvas {overflow: hidden;}
canvas#myCanvas {
  width:100vw;
  height:100%;
  position:absolute;
  left:0;
}
canvas#canvasundershutter {
  width:100vw;
  height:100%;
  position:absolute;top:0px;
  left:0;
}
#videotitle {position: absolute;top: 20%;z-index: 2;width: 100vw;}
#videotitleend {position: absolute;bottom: 45%;z-index: 2;width: 100vw;}
#videotitleendsub {position: absolute;bottom: 40%;z-index: 2;width: 100vw;}
#scrolldown {position: absolute;left:40%;top:40%;z-index: 99;}
#videotitle2 {position: absolute;left:40%;top:40%;z-index: 99;}

.perspective {perspective: 1200px;}
.perspective300 {perspective: 300px;}
#thirdsection .perspective {perspective: 1200px;}
#columnper {perspective: 300px;}
#altitude .fl-row-content-wrap {
    border-image: linear-gradient(rgb(16 35 58), rgb(255 255 255)) 1 / 1 / 0 stretch;
}    
#mp-curtain-top,#mp-curtain-bot {
	  position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 0px;
    background: #000000;
    z-index: 998;
}
#mp-curtain-bot {top:unset;bottom:0px;}
#preloadsvg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;z-index:999;
    opacity:0;
}	  
#mp-horizontal-bar {
    background-image: linear-gradient(hsl(0deg 100% 28.03%), hsl(0deg 100% 50%));
    /* box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4); */
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 50;
    width: 0vw;
    height: 6px;
    opacity: 0.5;
}

/* Shutter section */
#shutterrevealcontainer {position:relative;overflow: hidden;}
body:not(.fl-builder-edit) .shutterreveal .fl-col-content {position: absolute;top: 3%;height: 100%;width: 100%;z-index:1;display: flex;flex-direction: column;justify-content: center;}
.undershuttertext p {position:relative;z-index:2;}
.shuttertext p {margin:0px;-webkit-text-stroke-width: .015em;-webkit-text-stroke-color: inherit;-webkit-text-fill-color: transparent;}
.shuttertop,.shutterbottom {position:relative;overflow:hidden; z-index:2;}
.shuttertop .fl-col-content {display: flex; flex-direction: column; justify-content: flex-end;}
.shuttertop .shuttertext .fl-module-content {transform: translate(0px, 50%);}
.shutterbottom .shuttertext .fl-module-content {transform: translate(0px, -50%);}


/* Split sections */
#mp-pinnedrow {position: relative;perspective: 300px;overflow: hidden;}
#mp-leftcol,#mp-rightcol {position: relative;overflow: hidden;}
#mp-colone,#mp-coltwo {position: relative;overflow: visible;}
body:not(.fl-builder-edit) div[id^=photobox] {position:absolute; top: 0%;overflow: hidden;}
body:not(.fl-builder-edit) div[id^=databox]  {position:absolute; top: 0%;overflow: hidden;}


.motionchange {overflow: hidden;}
.transmenu a {
		color:#000000 !important;
	 	font-weight: bolder !important;
    font-size: 6vh !important;
    line-height:1;
    text-transform: uppercase;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: inherit;
    -webkit-text-fill-color: transparent;
}
.transmenu a:hover {
	-webkit-text-fill-color: #00000040;
}	
.transtype h2 {letter-spacing:10px;}
.transtype {
		-webkit-text-stroke-width: 0px;-webkit-text-stroke-color: inherit;-webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: url(/wp-content/uploads/2025/04/pexels-pixabay-47367.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
}

.introtitlezoom h2 {
	  -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000000;
    -webkit-text-fill-color: #00000038;
    background-clip: text;
    /* background-image: url(/wp-content/uploads/2025/04/pexels-creationsbyfaik-1025469.jpg); */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
}    
.introdesc {backdrop-filter:blur(4px);}

div#littlealien {position: absolute;bottom: -25vh;left: -25vw;opacity: 0;}
.polaroidflip {cursor:pointer;}
.leftflip {transform: rotate(-3deg);}
.middleflip {transform: rotate(3deg);}
.rightflip {transform: rotate(348deg);}
.handwritten {transform: rotate(3 deg);}

div#camerazoomrow {overflow:hidden; height:100vh;}
div#camerazoomtitles {position:absolute; top:0px;left:0px;z-index:5; backdrop-filter:blur(4px);}
div#camerazoomheader {position:absolute; top: 20%;left: 50%;transform: translate(-50%, -50%);width: 350px;z-index:6;    backdrop-filter: blur(30px);}    
div#camerazoomtext {position:absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);width: 350px;z-index:6;}  
body:not(.fl-builder-edit) div#camerazoomoverlay {position: absolute;top: 0px;left: 0px; overflow:hidden;z-index:10;}

div#archwayrow {overflow:hidden;height:100vh;}
div#archwaytitles {position:absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%; z-index:5;}
div#archwayh2 {position:absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;z-index:6;white-space: nowrap;}    
div#archwayoverlay {}

#hscroll .fl-col-content::after {backdrop-filter: grayscale(100%);}

body:not(.fl-builder-edit) #hscroll1 {position: relative;top: 0px;left: 0px; overflow:hidden;z-index:9; border-radius:50px;}
body:not(.fl-builder-edit) #hscroll2 {position: absolute;top: 0px;left: 100vw; overflow:hidden;z-index:9; border-radius:50px;}
body:not(.fl-builder-edit) #hscroll3 {position: absolute;top: 0px;left: 100vw; overflow:hidden;z-index:9; border-radius:50px;}
body:not(.fl-builder-edit) #hscroll4 {position: absolute;top: 0px;left: 100vw; overflow:hidden;z-index:9; border-radius:50px;}
body:not(.fl-builder-edit) #hscroll5 {position: absolute;top: 0px;left: 100vw; overflow:hidden;z-index:9; border-radius:50px;}
body:not(.fl-builder-edit) #hscroll6 {position: absolute;top: 0px;left: 100vw; overflow:hidden;z-index:9; border-radius:50px;}
body:not(.fl-builder-edit) #hscroll7 {position: absolute;top: 0px;left: 100vw; overflow:hidden;z-index:9; border-radius:50px;}
body:not(.fl-builder-edit) #hscroll8 {position: absolute;top: 0px;left: 100vw; overflow:hidden;z-index:9; border-radius:50px;}

.phototextbox {background: #bfbfbf6b;width: 400px;white-space: nowrap;backdrop-filter: blur(3px);border-radius: 30px;margin: 20px;}



.horizontal-slide0 {z-index:0; width: 100vw;}
.horizontal-slide1 {z-index:2; width: 100vw;}
.horizontal-slide2 {z-index:3; width: 100vw;}
.horizontal-slide3 {z-index:4; width: 100vw;}
.horizontal-slide4 {z-index:5; width: 100vw;}

/* The Track */
body:not(.fl-builder-edit) #scroll-track > .fl-col-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 500.1vw !important; /* Width = 100 * number of slides plus a tiny fraction to the total width */
    transform: scale(1.001); /* Micro-scale to force sub-pixel coverage */
    transform-origin: left center;
}

/* The Slides */
#scroll-track .fl-col-content > [class~="horizontal-slide"] {
    border: none;
    outline: none;
    box-shadow: none;
    /* Force the background to bleed 1px extra */
    background-clip: padding-box; 
}

.circlenumber,.circlenumber1,.circlenumber2,.circlenumber3,.circlenumber4,.circlenumber5 {
		aspect-ratio: 1 / 1;
		margin:auto;
    width: 100px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: white;
    border: 2px solid #ffffff;
    font-size:200%;
}
.slidetext ul {list-style: circle;}
.slidetext li::marker {font-size: 150%;line-height: 1.4;}
.slidetext ol, .slidetext ul {margin: 0px 0px 0px 20px;}