@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,500,600,700,800,900&display=none');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=none');
:root {

    --primary-font     								: 'Muli', sans-serif;;
    --styled-font      								: 'Muli', sans-serif;

	
	--width-push                                    : 0px 200px;
	

	--fixed-top-bg-color                            : linear-gradient(90deg,rgba(19, 29, 48, 1) 27%, rgba(25, 28, 81, 1) 46%);
    --fixed-top-height            					: 66px;
    --top-push                    					: 99px;  /* above +1 gives white line above content start */
    --fixed-topmenu-push-down     					: 9px;  /* push the menu options down this much to position them vertically within the fixed header */ 
    
    --footer-bg-color             					: var(--fixed-top-bg-color);    
    --footer-fg-color             					: var(--menu-bar-base-text-color);   
    
    --h1-and-sub-hero-color                         : #ffffff;
    
    --base-color                                    : #ebeef1;
    --base-color                                    : #3c546c;
    --block-spacer                                  : 50px;
    
    --clickables-fg-on-dark-canvas-color            : #ebbeea;
    --clickables-fg-on-dark-canvas-color-hovered    : #cc5bc9;

    --clickables-fg-on-light-canvas-color           : #8000ff;
    --clickables-fg-on-light-canvas-color-hovered   : #490093;

    --menu-bar-base-text-color                      : #ffffff;
    --menu-bar-drop-down-bg-color                   : var(--fixed-top-bg-color);
    --menu-bar-option-hover-bg-color                : #11a0af;
    --menu-bar-option-hover-fg-color                : white;
    --menu-transition-speed                         : .3s;
        
    --border-thickness            					: 1px;
    --border-color                					: #f2f2f2;
    
    --border-radius-curv          					: 10px;
    --full-border-radius          					: var(--border-radius-curv);
    --top-border-radius           					: var(--border-radius-curv) var(--border-radius-curv) 0px 0px;
    --left-border-radius          					: var(--border-radius-curv) 0px 0px var(--border-radius-curv);
    --right-border-radius         					: 0px var(--border-radius-curv) var(--border-radius-curv) 0px;
 


/* Look at light and dark as one and two - I shouldnt have called them by their brightness */    
    --canvas-dark-heading-color                     : #ffffff;
    --canvas-dark-text-color                        : #ffffff;
    --canvas-dark-bg-color                          : linear-gradient(31deg,rgba(44, 9, 121, 1) 35%, rgba(0, 89, 255, 1) 100%);

    --canvas-light-heading-color                    : #24375b;
    --canvas-light-text-color                       : #24375b; 
    --canvas-light-bg-color                         : #bcd1b8;
    --canvas-light-bg-color                         : linear-gradient(142deg,rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 56%);
    --canvas-light-bg-color                         : rgba(255,255,255,1);
    --canvas-light-bg-color                         : linear-gradient(145deg,rgba(255, 255, 255, 1) 45%, rgba(255, 242, 217, 1) 100%);
    
    --canvas-shadow      					        : 2px 2px 2px 2px #3f3f3f;
    --canvas-shadow      					        : none;
    
    --canvas-shadow-thin   					        : 7px 7px 7px rgba(0, 0, 0, 0.6);
    
    --canvas-padding-large        					: 80px;
    --canvas-padding-medium       					: 60px;
    --canvas-padding-small        					: 40px;
    --canvas-margin-large       					: 80px;
    --canvas-margin-medium        					: 40px;
    --canvas-margin-small         					: 20px;
    
    --canvas-heading-font-family  					: var(--primary-font);
    --canvas-heading-padding      					: 0px 0px 0px 0px;
    --canvas-heading-margin       					: 0px 0px;
    
    --canvas-text-font-family     					: var(--primary-font);
    --canvas-text-padding         					: 0px 0px 0px 0px;
    --canvas-text-margin          					: 0px 0px;

    --canvas-text-font-size-large                   : 1.8rem;
    --canvas-text-font-weight-large                 : 600;
    --canvas-text-font-line-height-large            : 2.1rem;
      
    --canvas-text-font-size-medium                  : 1.4rem;
    --canvas-text-font-weight-medium                : 500;
    --canvas-text-font-line-height-medium           : 1.7rem;
    
    --canvas-text-font-size-small                   : 1rem;
    --canvas-text-font-weight-small                 : 400;
    --canvas-text-font-line-height-small            : 1.3rem;    

    --canvas-text-spacer                            : 12px;
    --canvas-heading-spacer                         : 16px;

    --form-heading-font-weight                      : var(--canvas-text-font-weight-large);
    --form-heading-font-size                        : var(--canvas-text-font-size-large);    

    --button-border                                 : 0px solid grey;

    --pressables-fg-color                           : white;
    --pressables-fg-color-hovered                   : white;;
    --pressables-bg-color                           : #8da5c0;
    --pressables-bg-color-hovered                   : #6c8bae;
   
    --pressables-shadow                             : 2px 2px 3px 1px rgba(0,0,0,.6);
    --pressables-shadow-hovered                     : 1px 1px 0px 0px rgba(0,0,0,.3);


    --download-button-a-border                             : 0px solid grey;
    --download-button-a-fg-color                           : white;
    --download-button-a-fg-color-hovered                   : white;;
    --download-button-a-bg-color                           : #28A745;
    --download-button-a-bg-color-hovered                   : #218838;
   
    --download-button-a-shadow                             : 2px 2px 3px 1px rgba(0,0,0,.6);
    --download-button-a-shadow-hovered                     : 1px 1px 0px 0px rgba(0,0,0,.3);


	--convert-to-button-font-size                              : 1.1rem;
	--convert-to-button-font-weight                            : 500;	
	--convert-to-button-padding                                : 2px 5px 5px 5px;	
	--convert-to-button-height                                 : 45px;
    --convert-to-button-background                             : #3366cc;
    --convert-to-button-color                                  : white;
    --convert-to-button-background-hover                       : #3e5182;
    --convert-to-button-color-hovered                          : white;        
    --convert-to-button-shadow                                 : var(--canvas-shadow-thin);







}

* {
    box-sizing : border-box;
    margin : 0;
    padding : 0;
}


.mt-c
{
	margin-top : 70px;
}

html { font-size: 15px; }

/* Body global settings */
body 
{
    font-family: var(--primary-font);
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
	font-smooth: always;
	padding-top : var(--top-push);
	overflow-x : hidden;
	opacity : 1;
    transition : opacity 2s;
    -webkit-transition : opacity 2s;	
    overflow-y: scroll;    
}


HR 
{
	color : grey;
}

UL { 
	margin : none;
	margin-left : -12px;
	padding : none;
	list-style : none; 
    list-style-position: outside;	
}

.round-li-bullets 
{
    margin : none;
    padding : none;
	list-style-type : disc;  /* 'disc' gives round bullets */
    padding : 4px;     /* optional: creates indentation */
}



H1, H2, H3, H4, H5
{
	display : inline;
	margin : none;
	padding : none;
	border : none;
}

.download-button-a
{
	display : inline-block;
	position : relative;
	top : -1px;
	font-family : var(--primary-font);		
	font-size : 1.4rem;
	font-weight : 800;
	padding : 10px 5px;
	background-color : var(--download-button-a-bg-color);
	color : var(--download-button-a-fg-color);
	outline : none;
	text-decoration : none;
    width : 100%;
    height : 80px;
	border-radius : 0;
    -webkit-box-shadow: var(--download-button-a-shadow);
    -moz-box-shadow: var(--download-button-a-shadow);
    box-shadow: var(--download-button-a-shadow);	
    border : var(--download-button-a-border);
}

.download-button-a:hover
{
	top : 1px;
	cursor : pointer;
	color : var(--download-button-a-fg-color-hovered);
	background-color : var(--download-button-a-bg-color-hovered);
    -webkit-box-shadow: var(--download-button-a-shadow-hovered);
    -moz-box-shadow: var(--download-button-a-shadow-hovered);
    box-shadow: var(--download-button-a-shadow-hovered);
}



.form-b-file-upload-label
{
    padding           : 6px 12px;
    background        : #007bff;
    color             : #fff;
    border-radius     : var(--global-full-border-radius);
    cursor            : pointer;
}

.form-b-file-upload-label:hover
{
    background        : #0060ca;
    color             : #fff;
}


.form-b-file-input
{
	position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}



.zcode-widget-wrapper
{
	display : inline-block;
	text-align : center;
}
.zcode-widget-push
{
	margin-left : 20px;
}
.remove-radius
{
	border-radius : 0px;
}


.video-container {
  width: 100%;
  max-width: 640px; /* Optional: limit max width */
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
}
	
.centered-div
{
	text-align : center;
}
	
.text-shadow
{
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}	

.output_advert_a_image
{
	border : 10px solid purple;
	border-radius : var(--full-border-radius);
	cursor : pointer;
	width : 100%;


}

.output_advert_a_text
{
	font-size : 1rem;
	color : white;
    margin : 0px 15px;
}


.output_block_spacer
{
	display : block;
	min-height : var(--block-spacer);
	height : var(--block-spacer);
}


.output_blurry_block_a_outer 
{
    position: relative;
    margin : auto;
    width: auto;
    height: 500px;                /* adjust as needed */
 /*   background: url('your-image.jpg') center/cover no-repeat; */
    overflow: hidden;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--full-border-radius);    
}


    /* Central box that blurs whatever's behind it */
.output_blurry_block_a_inner
{
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-25%, -50%);
    width: 80%;
    height: 80%;
    background: rgba(0,0,0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(8px);
    /* centre contents */
    display: flex;
    align-items: center;
    justify-content: center;
    /* optional styling */
    border: 1px solid rgba(255,255,255,1);
    border-radius: var(--full-border-radius);
}

    /* Text inside div2 */
.output_blurry_block_a_inner p 
{
    margin: 0;
    text-align: center;
    
}	
	
	
.output_gallery_a_wrapper 
{
	border-radius : var(--full-border-radius);
	text-align : center;
	margin : 20 auto;
	padding : 20px 5px 20px 5px;
	width : 100%;
	background-color : var(--canvas-dark-bg-color);
}
	
.output_gallery_a_image_wrapper 
{
	display : inline-block;
	border-radius : var(--full-border-radius);
	margin : 15px;
	background-size : contain;
	background-color : black;
	
	
}
	
.output_gallery_a_image_tn 
{
	position : relative;
	top : -2px;
	border-radius : var(--full-border-radius);

	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
   -webkit-filter: brightness(1);
   -moz-filter: brightness(1);
   filter: brightness(1);
   transition: all 0.1s;
}



.output_gallery_a_image_tn:hover 
{
    top : 0px;
	cursor : pointer;
	filter : brightness(1.2);
    -webkit-box-shadow : 1px 1px 1px 1px rgba(0,0,0,.2);
    -moz-box-shadow    : 1px 1px 1px 1px rgba(0,0,0,.2);
    box-shadow         : 1px 1px 1px 1px rgba(0,0,0,.2);
}	
	
	
	
	
.output_side_by_side_2_image
{
    min-height : 600px;
    max-height : 600px;
    width : 100%;
    object-fit : cover;
    object-position: left;    
    border-radius : var(--full-border-radius);
}

	
.output_img_left_text_right_bordered_a_image 
{
    min-height : 600px;
    max-height : 600px;
    width : 100%;
    object-fit : cover;
    border-radius : var(--full-border-radius);
}

.output_img_left_text_right_bordered_a_text 
{
    display: grid;
    place-items: center start; 
    height: 100%; 
    background-color : var(--canvas-light-bg-color);
    border-radius : var(--full-border-radius);    
}

.output_text_left_img_right__bordered_a_image
{
    min-height : 600px;
    max-height : 600px;
    width : 100%;
    object-fit : cover;
    border-radius : var(--full-border-radius);
}
.output_text_left_img_right_bordered_a_text 
{
    display: grid;
    place-items: center start; 
    height: 100%; 
    background-color : var(--canvas-light-bg-color);    
    border-radius : var(--full-border-radius);    
}



.output_img_left_text_right_not_bordered-a-text
{
    display: grid;
    place-items: center start; 
    height: 100%; 
    background-color : var(--canvas-light-bg-color);   
    border-radius : var(--full-border-radius);     
}

.output_img_left_text_right_not_bordered_a_image
{
	height : 100%;
    width : 100%;
    object-fit : cover;
    object-position: center;
    border-radius : var(--full-border-radius);
}

.output_img_left_text_right_no_boxes_a_image
{
    min-height : 600px;
	height : 100%;
    width : 100%;
    object-fit : cover;
    border-radius : var(--full-border-radius);
}
.output_text_left_img_right_no_boxes_a_text
{
    display: grid;
    place-items: center start; 
    height: 100%; 
    background-color : var(--canvas-light-bg-color);   
    border-radius : var(--full-border-radius);     
}

.output_text_left_img_right_not_bordered_a_image 
{
	height : 100%;
    width : 100%;
    object-fit : cover;
    border-radius : var(--full-border-radius);  
}


.output_text_left_img_right_not_bordered_a_text
{
    display: grid;
    place-items: center start; 
    height: 100%; 
    background-color : var(--canvas-light-bg-color);   
    border-radius : var(--full-border-radius);     
}


.accordion {
    width : 100%;
    margin: 0 auto;
}

.accordionquestion
{
	display : inline-block;
	max-width : 70%;
	background-color : #e9e9e9;
    color : #001224;
}

.accordionitem {
    margin : 10px;
    border-radius: 5px;
	background-color : #e9e9e9;
    font-weight : 600;
}

.accordionheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    cursor: pointer;
	background-color : #e9e9e9;
    border-radius: 5px;
}


.accordioncircle {
	position : relative;
    width: 70px;
    height: 40px;
    border-radius: 50%;
    top : -1px;
    background-color: var(--pressables-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--pressables-fg-color);
    font-size: 1.2rem;
	border-radius : var(--full-border-radius);
    -webkit-box-shadow: var(--pressables-shadow);
    -moz-box-shadow: var(--pressables-shadow);
    box-shadow: var(--pressables-shadow);
    border : var(--button-border);  
    transition: transform 0.3s ease;
}
.accordioncircle:hover
{
    top : 1px;
    color : var(--pressables-fg-color-hovered);
    background-color : var(--pressables-bg-color-hovered);    
    -webkit-box-shadow: var(--pressables-shadow-hovered);
    -moz-box-shadow: var(--pressables-shadow-hovered);
    box-shadow: var(--pressables-shadow-hovered);
}

.accordionarrow {
	font-size : 1.5rem;
	font-weight : 800;
    transition: transform 0.3s ease;
}

.accordionanswer {
    padding: 0px 30px;
    background-color: #f9f9f9;
    font-weight : 400;    
    max-height: 0; /* Start closed */
    overflow: hidden;
    transition: max-height .3s ease-out; /* Sliding effect */
    color : #001224;    
}

.accordionheader.active .accordionarrow {
    transform: rotate(180deg);
}

.accordionheader.active + .accordionanswer {
    max-height: 3000px; /* Adjust the max-height as per the content size */
}

.accordionheading
{
    display : block;
    font-family: var(--styled-font); 
    font-size : 1.6rem;
    font-weight : 700;
    line-height : 1.8rem;
    color : #001224;
    background-color : white;
    padding : 4px 4px;
    border-radius : var(--full-border-radius);
}

.full-border-radius { border-radius : var(--full-border-radius); }
.top-border-radius { border-radius : var(--top-border-radius); }
.left-border-radius { border-radius : var(--left-border-radius); }
.right-border-radius { border-radius : var(--right-border-radius); }


.top-push-down
{
	display : block;
	min-height : 60px;
}

.canvas-button
{
	display : inline-block;
	position : relative;
	top : -1px;
	font-family : var(--styled-font);		
	font-size : 1rem;
	font-weight : 800;
	padding : 10px 5px;
	background-color : var(--pressables-bg-color);
	color : var(--pressables-fg-color);
	outline : none;
	text-decoration : none;
    width : 100%;
	border-radius : var(--full-border-radius);
    -webkit-box-shadow: var(--pressables-shadow);
    -moz-box-shadow: var(--pressables-shadow);
    box-shadow: var(--pressables-shadow);	
    border : var(--button-border);
}

.canvas-button:hover
{
	top : 1px;
	cursor : pointer;
	color : var(--pressables-fg-color-hovered);
	background-color : var(--pressables-bg-color-hovered);
    -webkit-box-shadow: var(--pressables-shadow-hovered);
    -moz-box-shadow: var(--pressables-shadow-hovered);
    box-shadow: var(--pressables-shadow-hovered);
}


.canvas-light
{
	width : 100%;
	color : var(--canvas-light-text-color); 
    background-color : var(--canvas-light-bg-color);
    background : var(--canvas-light-bg-color);
    margin : 0px;
    padding : 0px;
    border-radius : var(--full-border-radius);
}

.canvas-light-border
{
    border : 1px solid #f3f3f3;
}



.canvas-dark
{
	color : var(--canvas-dark-text-color); 
    background : var(--canvas-dark-bg-color);
    margin : 0px;
    padding : 0px;
    border-radius : var(--full-border-radius);    
}


.canvas-margin-large   { margin : var(--canvas-margin-large); }
.canvas-margin-medium  { margin : var(--canvas-margin-medium); }
.canvas-margin-small   { margin : var(--canvas-margin-small); }

.canvas-padding-large  { padding :  var(--canvas-padding-large); }
.canvas-padding-medium { padding :  var(--canvas-padding-medium); }
.canvas-padding-small  { padding :  var(--canvas-padding-small); }

.canvas-shadow
{
    -webkit-box-shadow : var(--canvas-shadow);
    -moz-box-shadow : var(--canvas-shadow);
    box-shadow : var(--canvas-shadow);
}

.canvas-shadow-thin
{
    -webkit-box-shadow : var(--canvas-shadow-thin);
    -moz-box-shadow : var(--canvas-shadow-thin);
    box-shadow : var(--canvas-shadow-thin);
}


.canvas-text-spacer
{
	display : block;
	min-height : var(--canvas-text-spacer);
}

.canvas-light-heading-h1, .canvas-light-heading-h2, .canvas-light-heading-h3, .canvas-light-heading-h4, .canvas-light-heading-h5,
.canvas-dark-heading-h1, .canvas-dark-heading-h2, .canvas-dark-heading-h3, .canvas-dark-heading-h4, .canvas-dark-heading-h5
{
	display : block;
    font-family : var(--canvas-heading-font-family);
    padding : var(--canvas-heading-padding);
    margin : var(--canvas-heading-margin);
    background-color : none;
}

.canvas-light-h1 {     font-family: var(--styled-font); color : var(--canvas-light-heading-color); font-size : 3.0rem; font-weight : 700; }    /* rarely used - hero is h1 */
.canvas-light-h2 {     font-family: var(--styled-font); color : var(--canvas-light-heading-color); font-size : 1.5rem; font-weight : 900; }
.canvas-light-h3 {     font-family: var(--styled-font); color : var(--canvas-light-heading-color); font-size : 1.4rem; font-weight : 600; }
.canvas-light-h4 {     font-family: var(--styled-font); color : var(--canvas-light-heading-color); font-size : 1.2rem; font-weight : 600; }
.canvas-light-h5 {     font-family: var(--styled-font); color : var(--canvas-light-heading-color); font-size : 1.1rem;   font-weight : 600; }

.canvas-dark-h1 {     font-family: var(--styled-font); color : var(--canvas-dark-heading-color); font-size : 3.0rem; font-weight : 700; }    /* rarely used - hero is h1 */
.canvas-dark-h2 {     font-family: var(--styled-font); color : var(--canvas-dark-heading-color); font-size : 1.5rem; font-weight : 700; }
.canvas-dark-h3 {     font-family: var(--styled-font); color : var(--canvas-dark-heading-color); font-size : 1.4rem; font-weight : 700; }
.canvas-dark-h4 {     font-family: var(--styled-font); color : var(--canvas-dark-heading-color); font-size : 1.2rem; font-weight : 600; }
.canvas-dark-h5 {     font-family: var(--styled-font); color : var(--canvas-dark-heading-color); font-size : 1.1rem;   font-weight : 600; }



.canvas-heading-spacer
{
	display : block;
	min-height : var(--canvas-heading-spacer);
}

.canvas-text-large, .canvas-text-medium, .canvas-text-small 
{
	display : block;
    font-family : var(--canvas-text-font-family);
    padding : var(--canvas-text-padding);
    margin : var(--canvas-text-margin);
}

.canvas-light-text-large { 	color : var(--canvas-light-text-color); line-height : var(--canvas-text-font-line-height-large); font-size : var(--canvas-text-font-size-large); font-weight : var(--canvas-text-font-weight-large);}
.canvas-light-text-medium { color : var(--canvas-light-text-color); line-height : var(--canvas-text-font-line-height-medium);  font-size : var(--canvas-text-font-size-medium); font-weight : var(--canvas-text-font-weight-medium);}
.canvas-light-text-small { color : var(--canvas-light-text-color); line-height : var(--canvas-text-font-line-height-small); font-size : var(--canvas-text-font-size-small); font-weight : var(--canvas-text-font-weight-small);}

.canvas-dark-text-large { color : var(--canvas-dark-text-color); line-height : var(--canvas-text-font-line-height-large); font-size : var(--canvas-text-font-size-large); font-weight : var(--canvas-text-font-weight-large);}
.canvas-dark-text-medium { color : var(--canvas-dark-text-color); line-height : var(--canvas-text-font-line-height-medium);  font-size : var(--canvas-text-font-size-medium); font-weight : var(--canvas-text-font-weight-medium);}
.canvas-dark-text-small { color : var(--canvas-dark-text-color); line-height : var(--canvas-text-font-line-height-small); font-size : var(--canvas-text-font-size-small); font-weight : var(--canvas-text-font-weight-small);}

.canvas-text-bold
{
	font-weight : 800;
}

.canvas-centered
{
	text-align : center;
}

.canvas-left
{
	text-align : left;
}

.fflogo
{
	max-height : 70px;
}

.ff-link-text
{
	font-family : var(--primary-font);
	font-size : 1rem;
	color : black;
}
.ff-link-text:hover
{
	color : grey;
}




.fixed-top
{
    font-family: var(--styled-font); 	
    position: fixed;
    position: -webkit-fixed;
    top: 0;
    left: 0;
    width : 100%;
    min-width : 220px;  
    z-index : 100;
    height : var(--fixed-top-height);
    max-height : var(--fixed-top-height);
    padding : 0px 0px 0px 0px;
    background : var(--fixed-top-bg-color);
    
}

.fixed-top-menu-area-wrapper  
{
	display : inline-block;
	width : 100%;
	background-color : var(--fixed-top-bg-color);
	height : var(--fixed-top-height);
    max-height : var(--fixed-top-height);
    border-radius : 0px;    
}

.fixed-top-menu-area  /* tick */
{
	display : block;
	float : right;
    padding-top : var(--fixed-topmenu-push-down);	
	margin-top : 0px;
	margin-right : 10px;
    height : var(--fixed-top-height);
    max-height : var(--fixed-top-height);
}

.fixed-top-logo-area   /* tick */
{
    position : fixed;
    position: -webkit-fixed;
    top: 0;
    left: 0;
    z-index : 100;
}

.logo-top
{
    position : relative;
    position: -webkit-fixed;    
	top : 0;
	left : 0;
	margin : 0px;
	max-height : 65px;

	z-index : 105;
}


.fullscreen-container 
{
    position: relative;
    width: 100%;
    height: 10vh;
    overflow: hidden;
    z-index: 1;
}

.fullscreen-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 /* Dims the image  
   background: linear-gradient(to right, rgba(58, 79, 107, .9) 0%, rgba(58, 79, 107, 0) 50%);   
*/
    z-index: -1;

}

.output_block_of_3_a_top_image
{
	max-height : 75px;
}

.output_banner_header_a_background
{
background: #ffffff;
/* background: radial-gradient(circle,rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 0.02) 100%); */
padding : 0px;
border-radius : 0px;
    -webkit-box-shadow : var(--canvas-shadow);
    -moz-box-shadow : var(--canvas-shadow);
    box-shadow : var(--canvas-shadow);
}

.output_banner_header_a_h1_main_hero_styling {
	display     : inline-block;
	width       : 100%;
	font-family : var(--styled-font); 
    color       : var(--h1-and-sub-hero-color);
    font-size   : 3.6rem;
    line-height : 3.6rem;
    font-weight : 800;
    text-shadow : 2px 2px 2px rgba(0, 0, 0, 1);
}

.output_banner_header_a_h_sub_hero_styling {
	display : inline-block;
	width : 100%;
    font-family: var(--primary-font); 
    color: var(--h1-and-sub-hero-color);
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 900;

    text-align : center;
}

.output_banner_header_a_image
{
	max-height : 400px;
}


.output_banner_header_b_fullscreen_container
{
    position: relative;         /* starting correctly immediately below fixed-top menu. */
    width: 100%;
    height: var(--banner-height-shown);
    overflow: hidden;
    text-align: left;
    display: flex;
    align-items: top;
    justify-content: left;
    z-index: 1;
}

.output_banner_header_b_fullscreen_container::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
 /* Dims the image */ 
    background: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */  
    background : linear-gradient(to right, rgba(58, 79, 107, .0) 0%, rgba(58, 79, 107, .0) 50%);
    z-index: -1;

}

.output_banner_header_b_content_start_spacer
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    opacity: 0;            /* invisible */
    pointer-events: none;  /* clicks pass through */
    display: none;         /* off by default */
}


.output_banner_header_b_h1_main_hero_styling 
{
	display : inline-block;
    font-family: var(--styled-font); 
    color: var(--h1-and-sub-hero-color);
    font-size   : 5.5rem;
    line-height : 5.5rem;
    font-weight : 900;
    text-align : center; 
    text-shadow: 3px 3px 2px #000000;
    width: 100%;
    padding : 20px 10px 20px 0px;

}

.output_banner_header_b_h_sub_hero_styling {
    position : absolute;
    display : inline-block;
    bottom : 10%;
    left : 0;
    font-family: var(--styled-font); 
    color: var(--h1-and-sub-hero-color);
    font-size: 2.6rem;
    font-weight: 600;
    text-align: center; /* changed from center */
    text-shadow: 3px 3px 2px #000000;
    line-height: 2.6rem;
    width: 100%;
    padding: 0px 20px 0px 20px;
}

















.output_headings_section_a_container
{
    position: relative;         /* starting correctly immediately below fixed-top menu. */
    overflow: hidden;
    background  : none;
    padding : 10px;
}



.output_headings_section_a_h1_main_hero_styling 
{
	display : inline-block;
    font-family: var(--styled-font); 
    color: var(--h1-and-sub-hero-color);
    font-size   : 4.5rem;
    line-height : 4.5rem;
    font-weight : 800;
    text-align : center; 
    text-shadow: 1px 1px 1px #000000;
    width: 100%;
    padding : 40px 10px 20px 30px;

}

.output_headings_section_a_h_sub_hero_styling
{
    display : inline-block;
    left : 0;
    font-family: var(--styled-font); 
    color: var(--h1-and-sub-hero-color);
    font-size: 2.3rem;
    line-height: 2.3rem;    
    font-weight: 500;
    text-align: center;
    text-shadow: 1px 1px 2px #000000;
    width: 100%;
    padding: 0px 20px 0px 30px;
}

























.output_img_left_list_right_a_icon_styling
{
	height : 50px;
	max-height : 50px;
	padding : 7px;
	margin-right : 10px;
	background-color : #f0f0f0;
	border : 5px solid #c2d638;
	border-radius : 50%;
	vertical-align: middle;
	
}


.output_img_left_list_right_a_text_pushdown
{
	display : inline-block;
	vertical-align: middle;
}

.output_img_left_list_right_a_image_wrapper
{
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  height: 100%;            /* or whatever fixed or relative height you need */
  width: 100%;              /* or fixed width if needed */
}

.output_img_left_list_right_a_image
{
	max-height : 350px;
}

.output_img_left_list_right_a_text
{
    background-color : var(--canvas-light-bg-color);
    border-radius : var(--full-border-radius); 
}

.footer-background
{
    font-family: var(--styled-font); 	
	text-align : center;
	padding : 30px 30px 5px 30px; 
	background : var(--footer-bg-color);
	margin : 0px 0px 0px 0px; 
}

.footer-type-large
{
    font-family: var(--primary-font); 	
	font-size : 1.1rem;
	color : var(--footer-fg-color);
}

.footer-type-small
{
    font-family: var(--primary-font);
	font-size : 1rem;
	color : var(--footer-fg-color);
}

.gallery-image-wrapper {
	display : inline-block;
	border-radius : var(--full-border-radius);
	margin : 5px 5px 5px 5px;
	background-size : contain;
	background-color : #f3f3f3;
	overflow : hidden;
}


.gallery-image {
   border : 1px solid grey;
	border-radius : var(--site-full-border-radius);
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
   -webkit-filter: brightness(1.2);
   -moz-filter: brightness(1.2);
   filter: brightness(1.2);
   transition: all 0.5s ease;
}

.gallery-image:hover {
    cursor : pointer;
	filter : brightness(1.3);
}

.logo-in-footer
{
	margin : 0px;
    max-height : 200px;
    padding : 0px 10px;
}


.rounded-image
{
	max-height : 180px;
	border-radius : 90px;
}


.pf-logo 
{ 
	cursor : pointer; max-height : 50px; border-radius : 20px;
}

.pf-link-text 
{
	color : white; 
}

.pf-link-text:hover 
{ 
	color : yellow; 
}



.bg-white
{
	background-color : white;
}


a:link {color : none;}      /* unvisited link */

a:visited {color : none;}  /* visited link */

a:hover {color : none;}  /* mouse over link */

a:active {color : none;}  /* selected link */

a {
	text-decoration :none;
}


.must-complete
{
	display : none;
}

.tick-styling
{
	margin-right : 20px;
	min-height : 30px;
}

.img-cover
{
	width : 100%;
	height : 100%;
	min-height : 335px;
	object-fit : cover;
}


.width-push
{
	display : block;
    padding : var(--width-push); 
}

.no-border
{
	border : none;
	border-radius : 0;
}

.no-margin
{
	margin : 0px;
}

.no-padding
{
	padding : 0px;
}

.no-edge
{
	display : block;
	width : 100%;
	margin: 0px;
	padding: 0px;
}

.white-text-shadow 
{
	text-shadow: 1px 1px #c0c0c0;
}



a { cursor : pointer; }

.manual-link {
	color : white;
}

.manual-link:hover
{
	color : grey;
}

p 
{
	margin : 0px;
	padding : 0px;
}


.raise-5 {
	position : relative;
	z-index : 5;
}


.pdf-wrapper
{
	width : 100%; 
	border : none;
    height : 2200px;
}



.quick-form-offset
{
	position : relative;
	top : -53px;
	z-index : 50;
}

.general-use-bg-color 
{
	background-color : var(--fixed-top-bg-color);
}

.form-heading
{
	display : inline-block;
    background-color : none;
	font-family : var(--primary-font);
	font-size : var(--form-heading-font-size);
    font-weight : var(--form-heading-font-weight);	
}

.form-phone-link
{
	display : inline-block;
	font-weight : 800;
	font-family : var(--primary-font);
	font-size : 2.5rem;
	line-height : 3.3rem;
	color : var(--clickables-fg-on-light-canvas-color);
}

.form-phone-link:hover
{
	color : var(--clickables-fg-on-light-canvas-color-hovered);
}

.form-phone-link-cta
{
	display : inline-block;
	font-weight : 800;
	font-family : var(--primary-font);
	font-size : 1.4rem;
	padding : 0px 0px 20px 0px;
	color : var(--canvas-heading-standout-fg);
}

.form-inline-contact-image
{
	max-height : 250px;
}

.form-block-background {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color : rgba(0,0,0, .2);
    z-index: 25001;
}

.form-block-background.active
{
    display: inline-block;
}


.form-message-box
{
    display : none;
    position : fixed;
    top : 50%;
    left : 50%;
    -webkit-transform : translate(-50%, -50%);
    transform : translate(-50%, -50%);
    background : #ffffff;
    -webkit-box-shadow : var(--canvas-shadow);
    -moz-box-shadow : var(--canvas-shadow);
    box-shadow : var(--canvas-shadow);
	border : 1px solid #e6e6e6;
    margin : 0 auto;
    padding : 30px;
    text-align : center;
    z-index : 25006;
    border-radius : var(--full-border-radius);
}
.form-message-box.active
{
    display : inline-block;
}

.form-button
{
	display : inline-block;
	position : relative;
	top : -1px;
	font-family : var(--primary-font);		
	font-size : 1.2rem;
	font-weight : 800;
	padding : 7px 5px;
	height : 45px;
	background-color : var(--pressables-bg-color);
	color : var(--pressables-fg-color);
	outline : none;
	text-decoration : none;
    width : 100%;
	border-radius : var(--full-border-radius);
    -webkit-box-shadow: var(--pressables-shadow);
    -moz-box-shadow: var(--pressables-shadow);
    box-shadow: var(--pressables-shadow);	
    border : var(--button-border);
}

.form-button:hover
{
	top : 2px;
	cursor : pointer;
	color : var(--pressables-fg-color-hovered);
	background-color : var(--pressables-bg-color-hovered);
    -webkit-box-shadow: var(--pressables-shadow-hovered);
    -moz-box-shadow: var(--pressables-shadow-hovered);
    box-shadow: var(--pressables-shadow-hovered);
}


.form-file-upload-label
{
    padding           : 6px 12px;
    background        : #00df00;
    color             : #fff;
    border-radius     : var(--full-border-radius);
    cursor            : pointer;
    padding           : 20px 20px;
    font-family       : var(--primary-font);
    font-size         : 1.1rem;
    font-weight       : 700;
    -webkit-box-shadow: var(--canvas-shadow-thin);
    -moz-box-shadow   : var(--canvas-shadow-thin);
    box-shadow        : var(--canvas-shadow-thin)
}

.form-file-upload-label:hover
{
    background        : #00b700;
    color             : #fff;
}

.form-file-input
{
	position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


.modal-button
{
	display           : inline-block;
    font-family       : var(--primary-font);
    font-size         : 1rem;
    font-weight       : 600;
    padding           : 15px 15px;
    background        : #0084c4;
    color             : #fff;
    
	border-radius     : var(--full-border-radius);
    -webkit-box-shadow: var(--canvas-shadow-thin);
    -moz-box-shadow   : var(--canvas-shadow-thin);
    box-shadow        : var(--canvas-shadow-thin);	
    
    border            : none;
	outline           : none;
	text-decoration   : none;

}

.modal-button:hover
{
    background        : #004a6f;
    color             : #fff;
}




.loader {
  width: 48px;
  height: 48px;
  border: 15px solid #005680;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  background: #ce3400;
  width: 11px;
  height: 11px;
  transform: translate(150%, 150%);
  border-radius: 50%;
}
.loader::before {
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
  transform: translate(-150%, -150%);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 


.download-button
{
	display           : inline-block;
    font-family       : var(--primary-font);
    font-size         : 1.1rem;
    font-weight       : 700;
    padding           : 20px 20px;
    background        : #00df00;
    color             : #fff;
    
	border-radius     : var(--full-border-radius);
    -webkit-box-shadow: var(--canvas-shadow-thin);
    -moz-box-shadow   : var(--canvas-shadow-thin);
    box-shadow        : var(--canvas-shadow-thin);	
    
    border            : none;
	outline           : none;
	text-decoration   : none;

}

.download-button:hover
{
    background        : #00b700;
    color             : #fff;
}
   

.convert-to-button
{
	display           : inline-block;
    font-family       : var(--primary-font);
    font-size         : 1.1rem;
    font-weight       : 700;
    padding           : 20px 20px;
    background        : #00df00;
    color             : #fff;
    
	border-radius     : var(--full-border-radius);
    -webkit-box-shadow: var(--canvas-shadow-thin);
    -moz-box-shadow   : var(--canvas-shadow-thin);
    box-shadow        : var(--canvas-shadow-thin);	
    
    border            : none;
	outline           : none;
	text-decoration   : none;

}

.convert-to-button:hover
{
    background        : #00b700;
    color             : #fff;
}


.global-form-block-background 
{
    display           : none;
    position          : fixed;
    top               : 0px;
    left              : 0px;
    width             : 100%;
    height            : 100%;
    background-color  : rgba(0,0,0, .2);
    z-index           : 25000;
}


.global-form-block-background.active
{
    display          : block;
}


.global-form-modal
{
	display           : none;
	position          : fixed; 
	text-align        : center;
	top               : 40%;
	left              : 50%;
    transform         : translate(-50%, -50%);
    background        : white; 
    padding           : 16px 16px; 
    border            : 1px solid #c0c0c0;
    border-radius     : var(--full-border-radius);
    overflow          : hidden;
    box-shadow        : var(--canvas-shadow-thin);
    z-index           : 25010;    /* has to be above the blocker - class global-form-block-background - below */
}



.form-input-radio {
  display: inline-flex;
  align-items: center;
  padding-top : 3px;
  margin-right: 25px;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 1rem;
}

/* Hide the native radio */
.form-input-radio input[type="radio"] {
  display: none;
}

/* Custom radio appearance */
.form-input-radio .form-input-custom-radio {
  display: inline-block;
  width: 24px;          /* diameter */
  height: 24px;
  border: 3px solid var(--canvas-light-text-color);; /* outline colour */
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  box-sizing: border-box;
  transition: background 0.2s, grey 0.2s;
}

/* Add inner circle when checked */
.form-input-radio input[type="radio"]:checked + .form-input-custom-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;         /* inner dot size */
  height: 12px;
  background : var(--canvas-light-text-color); /* dot colour */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


.form-input-custom-radio-option-text
{
	display : inline-block;
	font-family : var(--primary-font);
	font-size : 1rem;
	font-weight : 700;
	color       : var(--canvas-light-text-color);
    padding-top : 3px;
}














.form-full-input-line
{
	display : block;
	color : #ffffff;
	font-size : 1rem;
	font-weight : 700;
	text-align : left;
	text-shadow : 1px 1px 1px black;
}

.form-legend 
{
	display : inline-block;
	width : 100%;
	color : var(--canvas-light-text-color);
	margin : 3px 0px 0px 4px;
	padding : 0px 8px 0px 0px;
	font-size : 1rem;
	font-weight : 700;
}


.form-input-text-single-line, .input-text-single-lineUCASE 
{
	display : inline-block;
	width : 100%;
	background-color : #ffffff;
	border : 1px solid #e6e6e6;
	outline : none;
	padding : 10px 10px 10px 10px;
	font-size : 1rem;
	color : #454545;
	border-radius : var(--full-border-radius);
}

.form-input-text-single-lineUCASE
{
   text-transform : uppercase;
}

.form-input-text-multi-line {
	display : inline-block;
	width : 100%;
	height : 100px;
	background-color : #efefef;
	border : 2px solid #e6e6e6;
	margin : 0px;
	padding : 5px 0px 0px 13px;
	font-size : 14px;
	color : #787878;
	resize : none;
	outline : none;	
	vertical-align : center;
	border-radius : 0px;	
}


.form-input-text-multi-line:focus, .input-text-single-line:focus, .input-text-single-lineUCASE:focus 
{
   background-color : white;
}



.joinus-form-heading
{
	display : inline-block;
	font-weight : 800;
	font-family : var(--primary-font);
	font-size : 1.6rem;
	color : var(--canvas-dark-heading-color);
}


.quick-form-heading
{
	display : inline-block;
	font-weight : 800;
	font-family : var(--primary-font);
	font-size : 1.6rem;
	color : var(--canvas-dark-heading-color);
}

.quick-form-phone-link
{
	display : inline-block;
	font-weight : 800;
	font-family : var(--primary-font);
	font-size : 1.6rem;
	color : var(--clickables-fg-on-dark-canvas-color);
}

.quick-form-phone-link:hover
{
	color : var(--clickables-fg-on-dark-canvas-color-hovered);
}





@media (max-width: 1850px) 
{
    :root
    {
        --width-push : 0px 140px; 
    }
}

@media (max-width: 1650px) 
{

}

@media (max-width: 1500px) 
{
    :root
    {
        --canvas-padding-large : 70px;        
        --canvas-padding-medium : 50px;
        --canvas-padding-small : 30px;
        --width-push : 0px 40px; 
   
    }
    

}




/* bs xl */
@media only screen and (max-width: 1200px) 
{
    :root
    {
        --canvas-padding-large : 60px;    
        --canvas-padding-medium : 40px;
        --canvas-padding-small : 20px;        
        --width-push : 0px 20px; 
    }
  
    

    
}

/* bs lg */
@media only screen and (max-width: 992px) 
{
	:root 
    {
        --canvas-padding-large : 55px;
        --canvas-padding-medium : 35px;        
        --canvas-padding-small : 15px; 
    }
    
    .output_banner_header_b_h1_main_hero_styling 
    {
        font-size: 4rem;
        line-height: 4rem;
        width : 100%;
        padding-bottom : 30px;
    }
    
    .output_banner_header_b_h_sub_hero_styling 
    {
        font-size: 3rem;
        text-align: center; /* changed from center */
        line-height: 3rem;
        width : 100%;
    }
    
    
}

/* bs md */
@media only screen and (max-width: 767px) 
{
    :root 
    {
        --canvas-padding-large : 50px;
        --canvas-padding-medium : 30px;
        --canvas-padding-small : 20px 10px; 
        --width-push : 0px 5px;
    }
    .output_banner_header_b_h1_main_hero_styling 
    {
        font-size: 3.5rem;
        line-height: 3.5rem;
        width : 100%;
        text-align: center;        
    }
    
    .output_banner_header_b_h_sub_hero_styling 
    {
        font-size: 2.6rem;
        line-height: 2.6rem;
        width: 100%;
        text-align: center;
    }


}


@media (max-height: 700px) 
{
    .output_banner_header_b_h1_main_hero_styling 
    {
        font-size: 3.5rem;
        line-height: 3.5rem;
    }
    
    .output_banner_header_b_h_sub_hero_styling 
    {
        font-size: 2.9rem;
        line-height: 2.9rem;
    }

    .output_headings_section_a_h1_main_hero_styling 
    {
	    font-size   : 2.5rem;
	    line-height : 2.5rem;
	    font-weight : 700;
	    padding : 20px 10px 20px 20px;
	}


}


/*bs sm */
@media only screen and (max-width: 576px) 
{
    :root 
    {
        --canvas-padding-large : 40px;
        --canvas-padding-medium : 20px;
        --canvas-padding-small : 20px 5px; 
        --block-spacer : 30px;        
    }
    .output_banner_header_b_h1_main_hero_styling 
    {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    
    .output_banner_header_b_h_sub_hero_styling 
    {
        font-size: 1.3rem;
        line-height: 1.3rem;
    }    

}


@media only screen and (max-width: 376px) 
{
    :root 
    {
        --canvas-padding-large : 10px 5px;
        --canvas-padding-medium : 10px 5px;
        --canvas-padding-small : 20px 5px;
                
        --canvas-text-font-size-medium  : 1.1rem;                
    }
    
    .output_gallery_a_image_tn 
    {
        max-width : 230px;
    }    
    
}




@keyframes spinIn {
  from {
    transform: scale(0) rotate(-360deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.spin-in {
  animation: spinIn 1s ease-out forwards;
}