/* ==================================================
   Global Styles
================================================== */

*, *:after, *:before
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

html
{
   overflow: auto;
   overflow-x: hidden;
   overflow-y: scroll;
   font-size: 100%;
   
   -webkit-text-size-adjust: 100%;
   font-variant-ligatures: none;
   -webkit-font-variant-ligatures: none;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
}

body
{
   font-family: "Hind", Arial, Verdana, Helvetica, sans-serif !important;
   font-size: clamp(1.0625rem, 0.976rem + 0.2404vw, 1.125rem);
   line-height: 2em;
   font-weight: 500;
   color: var(--darkgrey);
   background: var(--hydrogreen);
   letter-spacing: -0.01em;
   
   text-rendering: optimizeLegibility;
   vertical-align: baseline;
}

::selection
{
	background: var(--hydrogreen);
	color: var(--white);
}

::-moz-selection
{
	background: var(--hydrogreen);
	color: var(--white);
}

a
{
	color: var(--hydroblue);
	text-decoration: underline;
}

	a:hover
	{
		color: var(--hydrogreen);
		text-decoration: underline;
	}

.anchor
{
    display: block;
    position: relative;
    top: -170px;
    visibility: hidden;
}

.image-right
{
    float: right;
    margin-left: 2rem;
    max-width: 380px;
    height: auto;
}

@media (max-width: 768px)
{
    .image-right
    {
        float: none;
        margin-left: 0;
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

/* ==================================================
   SVG Divider Styles
================================================== */

.custom-shape-divider-top-1705681821
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

    .custom-shape-divider-top-1705681821 svg
    {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 50px;
    }
    
    .custom-shape-divider-top-1705681821 .shape-fill
    {
        fill: var(--hydroblue);
    }
    
@media only screen and (max-width: 576px)
{

    .custom-shape-divider-top-1705681821 svg
    {
        height: 30px;
    }

}

/* ==================================================
   Main Styles
================================================== */

#topcont
{
    background: rgba(0,0,0,0.2);
    color: var(--white);
}

    #topcont span
    {
        margin-bottom: 0;
    }
	
        #topcont #topleft
        {
            color: var(--white);
            font-weight: 900;
            font-size: 1em;
            font-family: "Urbanist";
            line-height: 1em;
        }
        
            #topcont #topleft span
            {
                line-height: 1.6em;
            }
            
                #topcont #topleft span i
                {
                    color: var(--hydroblue);
                    font-style: normal;
                    font-size: 0.9em;
                    margin-right: 6px;
                    top: 0px;
                }
      
            #topcont #topleft span a
            {
                color: var(--white);
                font-weight: 900;
                text-decoration: none;
                letter-spacing: 0.02em;
            }
         
                #topcont #topleft span a:hover
                {
                    text-decoration-color: var(--white);
                }
                
                    #topcont #topleft span
                    {
                        
                    }
                   
                        #topcont #topleft span:first-child
                        {
                            margin-right: 20px;
                        }
		
		#topcont #topright
		{
			
		}
		
			#topcont #topright ul
			{
				float: right;
				list-style-type: none;
				margin: 0;
			}
			
				#topcont #topright ul li
				{
					float: left;
					line-height: 1em;
				}
				
					#topcont #topright ul li a
					{
						color: var(--white) !important;
						line-height: 1em;
					}

						#topcont #topright ul li a span
						{
                            float: left;
                            font-size: 1.3em;
                            line-height: 1em;
                            margin-left: 15px;
                            color: var(--white) !important;
						}
						
    						#topcont #topright ul li a:hover span
    						{
                                color: var(--hydroblue) !important;
    						}

.sticky-top.stuck
{
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

#headercont
{
	background: var(--hydrogreen) url(../images/icon-flame.png) no-repeat 40% 70%;
}

	#headercont #headerleft
	{
        
	}
	
		#headercont #headerleft p
		{
			margin-bottom: 0;
		}
	
			#headercont #headerleft p a img
			{
				display: block;
				width: 100%;
				max-width: 260px;
                
                -webkit-transition: max-width 0.1s ease-in-out;
                -moz-transition:    max-width 0.1s ease-in-out;
                -o-transition:      max-width 0.1s ease-in-out;
                -ms-transition:     max-width 0.1s ease-in-out;
                transition:         max-width 0.1s ease-in-out;
			}
	
	#headercont #headerright
	{
		text-align: left;
	}

#menucont
{
	background: var(--darkgrey);
}

#gallerycont
{
    position: relative;
    height: 80vh;
    min-height: 400px;
    max-height: 550px;
    width: 100%;
    overflow: hidden;
}

    #gallerycont #galleryslider
    {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 0;
        
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    
        #gallerycont #galleryslider #galleryinner
        {
            background:rgba(0,0,0,0.5);
        }
        
            #gallerycont #galleryslider #galleryinner h2
            {
                font-size: 2.15em;
            }

#pagetopcont
{
    height: 300px;
}

    #pagetopcont .container-fluid
    {
        background-image: linear-gradient(to top, rgba(30,66,138,0) 0%, rgba(30,66,138,0.8) 100%), linear-gradient(to bottom, rgba(30,66,138,0) 0%, rgba(30,66,138,0.8) 100%);
    }

#featurescont
{
    background: var(--lightgrey);
    text-align: center;
}

    #featurescont .service-item img
    {
        transition: 0.5s;
    }
    
    #featurescont a.seritem:hover img
    {
        transform: scale(1.1);
    }
    
    #featurescont a.seritem
    {
        display: block;
        background: var(--hydroblue);
        color: var(--white);
        text-decoration: none;
    }
    
        #featurescont a:hover.seritem
        {
            
            background: var(--hydrogreen) url(../images/icon-flame.png) no-repeat 50% 50%;
        }
    
    #featurescont a.seritem .bottomtext p
    {
        color: rgba(255,255,255,0.7);
        font-size: 94%;
    }
    
        #featurescont a:hover.seritem .bottomtext p
        {
            color: var(--white);
            font-size: 94%;
        }

#maincont
{
    position: relative;
    text-align: left;
    background: var(--white);
    
    min-height: 500px;
    height: auto !important;
    height: 500px;
}

    .home #maincont .container
    {
        max-width: 1000px;
        text-align: center;
        
        padding-top: 30px;
        padding-bottom: 30px;
        
        min-height: 200px;
        height: auto !important;
        height: 200px;
    }
    
    #maincont .cellbox
    {
        background: var(--lightergrey);
    }

#featurebox
{
	background: #E5E5E5;
	text-align: left;
	
    min-height: 500px;
    height: auto !important;
    height: 500px;
}

    #featurebox .tablecolumns
    {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
    }
    
        #featurebox .tablecolumns .rowleft
        {
            flex-grow: 1;
            flex-basis: 50%;
            
            background: url("../images/home-img.jpg") no-repeat 50% 50%;
            background-size: cover;
        }
        
        #featurebox .tablecolumns .rowright
        {
            flex-grow: 1;
            flex-basis: 50%;
        }
        
        #featurebox .tablecolumns .negmargin
        {
            margin: 50px 0 50px -200px;
            background: var(--white);
        }

#twoimgbox
{
    background: var(--lightgrey);
    color: var(--black);
}

#bottomsection
{
    background: var(--hydroblue);
    color: var(--white);
}

	#bottomsection #footertop
	{
	    max-width: 600px;
	    text-align: center;
	    margin: 0 auto;
	}
	
        .shareArticle
        {
            display: flex;
            flex-flow: column;
            align-items: center;
            width: 100%;
        }
        
        .shareSocial
        {
            display: flex;
            flex-flow: row;
            align-items: center;
            margin-bottom: 0;
        }

            @media (max-width: 767px)
            {
                .shareSocial
                {
                    flex-flow: column;
                }
            }
            
            .shareSocial .socialTitle
            {
                margin: 0 20px 0 0;
                font-size: 1.3em;
            }
            
            @media (max-width: 767px)
            {
                .shareSocial .socialTitle
                {
                    margin-bottom: 15px;
                    text-align: center;
                    font-family: "Urbanist";
                }
            }
            
            .shareSocial .socialList
            {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: flex-start;
                justify-content: center;
                flex-flow: row wrap;
            }
            
            .shareSocial .socialList li
            {
                margin: 10px;
            }
            
            .shareSocial .socialList li:first-child
            {
                padding-left: 0;
            }
            
            .shareSocial .socialList li a
            {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                text-decoration: none;
                color: var(--white);
            }
            
            .shareSocial .socialList li a span
            {
                font-size: 2.2em;
            }

#homepageimgbanner
{
	position: relative;
	background: var(--white) url("../images/bg-calltoaction.jpg") no-repeat 50% 50%;
	background-size: cover;
}

	#homepageimgbanner .overlaybg
	{
		background: rgba(0,0,0,0.5);
	}

	#homepageimgbanner .container-fluid
	{
        text-align: center;
	}
	
		#homepageimgbanner h3
		{
			display: block;
			width: 100%;
			max-width: 650px;
			margin: 0 auto 20px auto;
			color: var(--white);
			font-size: 1.8em;
		}
		
		#homepageimgbanner p
		{
            display: block;
            width: 100%;
            max-width: 800px;
            color: var(--white);
            margin: 0 auto 30px auto;
            line-height: 1.6em;
		}
		
			#homepageimgbanner p:last-child
			{
				margin: 0 auto;
			}

#footercont
{
    position: relative;
	color: var(--white);
	padding-top: 50px;
}

#footercont .container
{
    
}
	
	#footercont h3
	{
		color: var(--white);
		margin: 0 0 15px 0;
	}
	
	#footercont p
	{
		line-height: 1.4em;
	}
	
	#footercont hr
	{
		border-top: 1px dotted rgba(255,255,255,0.3);
	}
	
	#footercont #getbutton
	{
		text-align: right;
	}
	
	#footercont #getbutton p
	{
		margin: 0;
	}
		
	    #footermiddle
		{
			margin-top: 50px;
			margin-bottom: 50px;
		}

			#footermiddle a
			{
				color: var(--white);
				font-weight: 800;
				font-family: "Urbanist";
                text-decoration: underline;
                letter-spacing: 0.01em;
                
                text-decoration-color: var(--hydroblue);
                text-underline-offset: 8px;
                text-decoration-thickness: 2px;
			}
			
    			#footermiddle a:hover
    			{
                    text-decoration: underline;
                    
                    text-decoration-color: var(--white);
                    text-underline-offset: 8px;
                    text-decoration-thickness: 2px;
    			}
		
			#footermiddle .contactdets p
			{
				line-height: 1.3em;
				font-size: 1em;
				color: var(--white);
				font-weight: 600;
        		text-transform: none;
			}
		
				#footermiddle .contactdets p span
				{
					display: block;
					margin-top: 10px;
					font-size: 1em;
					font-weight: 800;
					letter-spacing: 0em;
					line-height: 1.3em;
					text-transform: none;
					color: var(--white);
					font-family: "Urbanist";
				}
				
    				#footermiddle .contactdets p span a
    				{
    					font-size: 1em;
    				}
    				
    			#footermiddle .material-symbols-outlined
    			{
    			    font-size: 2.8em;
    			    color: var(--hydroblue);
    			}
				
		#footerbottom
		{
			text-align: center;
			border-top: 1px dotted rgba(255,255,255,0.4);
		}
		
			#footerbottom a
			{
				color: var(--white);
				padding: 0 5px;
                text-decoration: underline;
                
                text-decoration-color: var(--hydroblue);
                text-underline-offset: 6px;
                text-decoration-thickness: 1.5px;
			}
			
			#footerbottom a:hover
			{
                text-decoration: underline;
                
                text-decoration-color: var(--white);
                text-underline-offset: 6px;
                text-decoration-thickness: 1.5px;
			}
			
				#footerbottom .col-lg-2
				{
					
				}
				
					#footerbottom .col-lg-2 p
					{
						margin: 0;
						font-size: 1.6em;
					}
					
						#footerbottom .col-lg-2 p a
						{
							color: var(--white);
						}
				
				#footerbottom .col-lg-10
				{
					text-align: right;
				}
				
					#footerbottom .col-lg-10 p
					{
						margin: 0;
					}

/* ==================================================
   Media Queries
================================================== */

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

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

    #headercont
    {
    	background: var(--hydrogreen) url(../images/icon-flame.png) no-repeat 65% 70%;
    }
	
		#headercont #headerright ul li#searchtoggle
		{
			border-left: 0;
		}
		
			#headercont #headerright ul li#searchtoggle span.fa-search
			{
				font-size: 1.4em;
			}
	
		#headercont #headerright ul li a
		{
			display: none;
		}
		
		#headercont #headerright .searchtoggle span
		{
			margin-right: 15px;
		}
    
	#footercont
	{
		text-align: center;
		padding-top: 60px;
	}
	
        #footercont .footerimg
        {
            margin: 0 auto;
        }
	
		#footercont #getbutton
		{
			text-align: center;
			margin-top: 20px;
		}
		
		#footermiddle #contactdets
		{
		    padding-top: 0px;
		}
		
		#footerbottom
		{
			text-align: center;
		}
		
			#footerbottom .col-lg-10
			{
				text-align: center;
				margin-top: 10px;
			}
	
}

@media only screen and (max-width: 768px)
{
	
    .anchor
    {
        top: -160px;
    }
    
    #pagetopcont
    {
        height: 250px;
    }
    
    #imagegallery
    {
        
    }

        #imagegallery .gal
        {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
        }
        
    #highlightbox
    {
        text-align: center;
    }
    
        #highlightbox .row
        {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        
            #highlightbox .row img
            {
                margin-bottom: 30px;
            }
    
	#homepageimgbanner .container-fluid
	{
        padding-bottom: 60px;
	}
    
}

@media only screen and (max-width: 576px)
{
	
    #topcont #topleft span
    {
        display: block;
    }
    
	#headercont #headerleft p a img
	{
		max-width: 200px;
	}
	
    #pagetopcont
    {
        height: 200px;
    }
	
    #gallerycont #galleryslider #galleryinner h2
    {
        font-size: 2em;
    }
    
    #featurebox .tablecolumns
    {
        margin-left: -10px;
        margin-right: -10px;
    }
    
        #featurebox .tablecolumns .rowleft
        {
            flex-basis: 100%;
            height: 300px;
        }
        
        #featurebox .tablecolumns .rowright
        {
            flex-basis: 100%;
        }
        
        #featurebox .tablecolumns .negmargin
        {
            margin: -80px 10px 0 10px;
            padding: 20px 20px 10px 20px;
            text-align: center;
        }
        
            #featurebox .tablecolumns .negmargin img
            {
                margin: 0 auto;
            }
	
	#homepageimgbanner .container-fluid
	{
        padding-bottom: 80px;
	}
	
}