/* ==================================================
   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: var(--fontprimary), Arial, Verdana, Helvetica, sans-serif !important;
   font-size: clamp(1.125rem, 1.0385rem + 0.2404vw, 1.1875rem);
   line-height: 1.8em;
   color: var(--white);
   background: #3c4144;
   
   text-rendering: optimizeLegibility;
   vertical-align: baseline;
}

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

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

a
{
	color: var(--colour1);
	text-decoration: none;
}

	a:hover
	{
		color: var(--colour1);
	}

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

#menuoverlay
{
    background: var(--colour2);
    color: var(--white);
    z-index: 99999;
}

    #menuoverlay .closebutton
    {
        color: var(--white);
        cursor: pointer;
    }
    
        #menuoverlay .closebutton i
        {
            font-style: normal;
        }
        
        #menuoverlay .menucontainer
        {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

            #menuoverlay .menucontainer .menubox
            {
                text-align: center;
            }

        #menuoverlay .menucontainer .menubox.menutop
        {
            background: var(--colour1);
        }
        
            #menuoverlay .menucontainer .menubox.menutop span i
            {
                display: block;
                font-size: 2em;
            }

        #menuoverlay .menucontainer .menubox.menucenter
        {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
            #menuoverlay .menucontainer .menubox.menucenter li
            {
    			padding-top: 8px;
    			padding-bottom: 8px;
            }
        
                #menuoverlay .menucontainer .menubox.menucenter li a
                {
        			display: block;
        			color: rgba(255,255,255,0.6);
        			text-decoration: none;
        			font-size: 1.4em;
        			font-weight: 800;
        			text-transform: uppercase;
        			letter-spacing: -0.01em;
        			font-family: var(--fontsecondary);
                }
                
                    #menuoverlay .menucontainer .menubox.menucenter li.active a, 
                    #menuoverlay .menucontainer .menubox.menucenter li a:hover
                    {
            			color: var(--white);
                    }
            
            /** Fade Animation **/
        
            #menuoverlay.show .menucontainer .menubox.menucenter ul li
            {
                opacity: 0;
                animation: fadeIn 0.4s forwards;
            }
    
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(1) { animation-delay: 0.3s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(2) { animation-delay: 0.35s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(3) { animation-delay: 0.4s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(4) { animation-delay: 0.45s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(5) { animation-delay: 0.5s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(6) { animation-delay: 0.55s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(7) { animation-delay: 0.6s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(8) { animation-delay: 0.65s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(9) { animation-delay: 0.7s; }
                #menuoverlay .menucontainer .menubox.menucenter ul li:nth-child(10) { animation-delay: 0.75s; }
    
                    @keyframes fadeIn
                    {
                        from
                        {
                            opacity: 0;
                            transform: translateX(0px);
                        }
                        to
                        {
                            opacity: 1;
                            transform: translateX(0px);
                        }
                    }
        
        #menuoverlay .menucontainer .menubox.menubottom
        {
            border-top: 1px solid rgba(255,255,255,0.15);
        }

#topcont
{
    z-index: 99998;
    background: rgba(20,20,20,0.8);
    transition: background-color 0.2s ease;
}

#nothome #topcont
{
    
}

#nothome #topcont.scrolled, #nothome #topcont:hover
{
    
}

    #topcont.scrolled, #topcont:hover
    {
        background: rgba(71,151,198,1);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
    }
    
    #topcont a
    {
        display: block;
        width: 100%;
        max-width: 280px;
    }

        #topcont a img
        {
            display: block;
            width: 100%;
            content: url('../images/logo.png');
            transition: opacity 0.2s ease;
        }
        
            #topcont.scrolled a img, #topcont:hover img
            {
                content: url('../images/logo-white.png');
            }
    
    #topcont #menumobile
    {
        align-items: center;
        justify-content: flex-end;
    }
    
        #topcont #menumobile span
        {
            float: right;
        }

        #topcont #menumobile span
        {
            cursor: pointer;
        }
        
            #topcont #menumobile span.openbutton i
            {
                font-style: normal;
                font-size: 2.5em;
                color: var(--white);
            }
            
                #topcont #menumobile span.openbutton:hover i
                {
                    color: var(--white);
                }
                
            #topcont #menumobile span.phonebutton i
            {
                font-style: normal;
                font-size: 1.9em;
                color: var(--white);
                padding: 9px 11px 9px 12px;
                border: 2px solid var(--white);
                
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
            }
            
                #topcont #menumobile span.phonebutton:hover i
                {
                    color: var(--white);
                }
                
#home #gallerycont
{
    position: relative;
    width: 100%;
    height: 95vh;
    background: url("../images/bg-gallerycont2.jpg") no-repeat 50% 50%;
    background-size: cover;
}

    #home #gallerycont .gallery-overlay
    {
        height: 70vh;
        background: rgba(37,37,37,0.4);
    }
    
        #home #gallerycont .gallery-overlay .cont
        {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 10vh;
        }
        
            #home #gallerycont .gallery-overlay .cont .cont-content
            {
                max-width: 700px;
            }
            
                #home #gallerycont .gallery-overlay .cont .cont-content h2
                {
                    font-size: 2.2em;
                }
                
                #home #gallerycont .gallery-overlay .cont .cont-content hr
                {
                    clear: both;
                	border: 0;
                	height: 0;
                	border-top: 2px solid #FFF !important;
                	opacity: 1;
                	background: none;
                    position: relative !important;
                    left: 0% !important;
                    right: 0% !important;
                    margin-left: auto !important;
                    margin-right: auto !important;
                    width: 100% !important;
                    max-width: 100% !important;
                }
                
                #home #gallerycont .gallery-overlay a.newbutton-border
                {
                    animation: pulse-animation 1.5s infinite ease-in-out;
                }
                
                @keyframes pulse-animation
                {
                    0%
                    {
                        transform: scale(1);
                        box-shadow: 0 0 0 0 rgba(19, 137, 219, 0.4);
                    }
                    50%
                    {
                        transform: scale(1.1);
                        box-shadow: 0 0 0 10px rgba(19, 137, 219, 0);
                    }
                    100%
                    {
                        transform: scale(1);
                        box-shadow: 0 0 0 0 rgba(19, 137, 219, 0.4);
                    }
                }
    
    #home #gallerycont .gallery-bottom
    {
        display: flex;
        align-items: center;
        height: 25vh;
        background: rgba(37,37,37,0.4);
    }
    
        #home #gallerycont .gallery-bottom img.img1
        {
            max-height: 14vh;
        }
        
        #home #gallerycont .gallery-bottom img.img2
        {
            max-height: 9vh;
        }
    
        #home #gallerycont .gallery-bottom .socmedicons
        {
            display: flex;
            justify-content: flex-end;
            padding-top: 10px;
        }
        
            #home #gallerycont .gallery-bottom .socmedicons a
            {
                color: var(--white);
                line-height: 0.6em;
            }
            
                #home #gallerycont .gallery-bottom .socmedicons a span
                {
                    color: var(--white);
                    font-size: 2.4em;
                }
                
#nothome #gallerycont
{
    position: relative;
    width: 100%;
    background: url("../images/bg-gallerycont2.jpg") no-repeat 50% 50%;
    background-size: cover;
}

    #nothome #gallerycont #gallery-overlay
    {
        background: rgba(37,37,37,0.3);
        background-image:
            linear-gradient(to top, rgba(37,37,37,0.6) 0%, rgba(37,37,37,0) 100%),
            linear-gradient(to left, rgba(37,37,37,0.6) 0%, rgba(37,37,37,0) 100%);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: auto 100%;
    }

        #nothome #gallerycont #gallery-overlay h1
        {
            font-size: 2em;
        }

#breadcrumbscont
{
    font-size: 0.7em;
    font-weight: 500;
    font-family: var(--fontsecondary);
    text-transform: uppercase;
    color: var(--colour3);
    letter-spacing: 0.04em;
    font-weight: 700;
}
    
    #breadcrumbscont span
    {
        margin: 0 15px;
    }
    
    #breadcrumbscont a
    {
        color: var(--white);
		text-decoration: none;
    }
    
        #breadcrumbscont a:hover
        {
            color: var(--colour3);
    		text-decoration: none;
        }

#maincont
{
    background: var(--white);
    color: var(--black);
}

#maincont.darkbg
{
    background: #3c4144;
    color: var(--white);
}

    #nothome #maincont .container
    {
        min-height: 400px;
        height:auto !important;
        height: 400px;
    }
    
    #maincont .cellbox
    {
        background: var(--lightergrey);
    }
    
        #maincont.darkbg .cellbox
        {
            background: var(--lightergrey);
            color: var(--black);
        }
    
    #maincont #iconboxes .material-symbols-outlined
    {
        background: var(--colour1);
        color: var(--white);
        font-size: 2.3em;

        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    
    #maincont .imgcaption
    {
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--colour1);
        color: #FFF;
        font-size: 94%;
        font-weight: 700;
    }
    
    #maincont .textheading
    {
        display: block;
        font-family: var(--fontsecondary);
        text-transform: lowercase;
        color: var(--white);
        font-weight: 700;
        font-size: 1.4em;
    }
    
#boxescont
{
    color: var(--black);
}

    #boxescont .service-item
    {
        background: #e3eff6;
    }
    
    #boxescont .service-item .featicon
    {
        transition: 0.5s;
        display: inline-block;
    }
        
        #boxescont .service-item .featicon span
        {
            font-size: 3.4em;
            color: var(--colour1);
        }
        
    

        
        #boxescont p
        {
            font-size: 0.94em;
        }

/**

#boxescont
{
    color: var(--black);
}

    #boxescont .service-item .featicon
    {
        transition: 0.5s;
        display: inline-block;
    }
        
        #boxescont a.seritem .service-item .featicon span
        {
            font-size: 3.4em;
            color: var(--colour1);
        }
        
            #boxescont a:hover.seritem .service-item .featicon span
            {
                color: var(--white);
            }
    
    #boxescont a.seritem
    {
        display: block;
        background: var(--white);
        color: var(--colour1);
        text-decoration: none;
        
        transition: 0.2s;
        
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    
        #boxescont a:hover.seritem
        {
            background: var(--colour1);
            color: var(--white);
        }
        
            #boxescont a.seritem p
            {
                line-height: 1.2em;
                font-size: 0.94em;
                color: rgba(64,64,64,0.6);
            }
            
                #boxescont a:hover.seritem p
                {
                    color: rgba(255,255,255,1);
                }

**/

#hometelcont
{
    background-color: var(--colour1);
    color: var(--white);
}

    #hometelcont p.hometeltext
    {
    	font-weight: 700;
        font-family: var(--fontsecondary);
    	line-height: 1.2em;
    	font-style: normal;
    	text-transform: uppercase;
        letter-spacing: 0;
        font-size: 1.3em;
    }
    
    #hometelcont p.hometelnum a
    {
        font-size: 1.1em;
        letter-spacing: 0.01em;
    }
    
    #hometelcont a
    {
        color: var(--white);
    }

#homesection1
{
	background: var(--white);
	color: var(--black);
}

    #homesection1 .hometexticons span
    {
        color: var(--colour1);
        font-size: 2em;
    }

	#homesection1 a
	{
		color: var(--colour1);
		text-decoration: underline;
		
        text-decoration-color: rgba(255,255,255,0.3);
        text-underline-offset: 7px;
        text-decoration-thickness: 1.4px;
	}
    	
#testimonials-cont
{
	color: var(--black);
	text-align: center;
}

    #testimonials-cont p
    {
    	display: block;
    	width: 100%;
    	max-width: 900px;
    	margin: 0 auto;
    }
    
    	#testimonials-cont .owl-customnav ul
    	{
    		display: inline-block;
    		margin: 0;
    		list-style-type: none;
    	}
    
    		#testimonials-cont .owl-customnav ul li
    		{
    			display: inline-block;
    		}
    		
    			#testimonials-cont .owl-customnav ul li a
    			{
    				color: var(--colour1) !important;
                    padding-left: 20px;
                    padding-right: 20px;
    			}
    			
        			#testimonials-cont .owl-customnav ul li a span
        			{
        				font-size: 2em;
        			}
        			
        				#testimonials-cont .owl-customnav ul li a:hover
        				{
        					color: var(--colour2);
        					cursor: pointer;
        				}
        				
        		#testimonials-cont .item p.teststars span
        		{
        		    color: #FFB200;
        		    margin: 0 6px;
        		    font-size: 1em;
        		}
        				
        	    #testimonials-cont .item p
        	    {
        	        display: block;
        	        width: 100%;
        	        max-width: 1000px;
        	        margin: 0 auto;
        	        padding-left: 30px;
        	        padding-right: 30px;
        	    }
        	    
            	    #testimonials-cont .item p.quotep
            	    {
            	        font-family: var(--fontsecondary);
            	        font-size: 110%;
            	        font-weight: 600;
            	    }
    	
#bottomsection
{
    background: var(--colour1);
    color: var(--white);
}

    #footerplaces
	{
        
	}
	
        #footerplaces ul
        {
            margin-left: 0;
            list-style-type: none;
        }
        
            #footerplaces ul li
            {
                display: inline-block;
                color: var(--white);
                font-weight: 700;
                font-size: 0.9em;
                text-transform: uppercase;
                font-family: var(--fontsecondary);
                letter-spacing: 0em;
            }
            
            #footerplaces ul li:after
            {
                content: " / ";
                padding: 0 12px;
                font-weight: 600;
            }
            
                #footerplaces ul li:last-child::after
                {
                    content: "";
                }

	#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
            {
                font-size: 1.3em;
                font-weight: 700;
                font-family: var(--fontsecondary);
            }
            
            @media (max-width: 767px)
            {
                .shareSocial .socialTitle
                {
                    text-align: center;
                }
            }
            
            .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: 0 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: 2em;
            }

#footercont
{
    position: relative;
	color: var(--white);
}

    #footercont .img-fluid
    {
        margin: 0;
    }
	
	#footercont #contactdeets
	{
		
	}
	
	    #footercont #contactdeets a
	    {
	        display: block;
	    }
	
	    #footercont #contactdeets a span.footericon
	    {
	        font-size: 1.8em;
	        width: 60px;
	        height: 60px;
	        line-height: 60px;
	        background: var(--colour1);
	        color: var(--white);
	        
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
	    }
	    
	    #footercont #contactdeets a .deettext
	    {
	        font-style: normal;
	    }
	    
    	    #footercont #contactdeets a .deettext span
    	    {
    	        display: block;
    	        font-family: var(--fontsecondary);
    	        text-transform: lowercase;
    	        color: var(--white);
    	        font-weight: 700;
    	        font-size: 1.1em;
    	    }
    	    
        	    #footercont #contactdeets a:hover .deettext span
        	    {
        	        color: var(--colour1);
        	    }
    	    
        	    #footercont #contactdeets a span.fa-phone
        	    {
        	        font-size: 1.45em;
        	    }
	
	#footerbottom
	{
		text-align: center;
	}
	
		#footerbottom a
		{
			color: var(--white);
			padding: 0 3px;
            text-decoration: underline;
            
            text-decoration-color: var(--white);
            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;
		}

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

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



}

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

	#footercont
	{
		text-align: center;
		padding-top: 60px;
	}
	
        #footercont .img-fluid
        {
            margin: 0 auto;
        }
		
		#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)
{

    #home #gallerycont .gallery-bottom img.img1
    {
        max-height: 10vh;
    }
    
    #home #gallerycont .gallery-bottom img.img2
    {
        max-height: 6vh;
    }
    
    #home #gallerycont .gallery-bottom .socmedicons a span
    {
        font-size: 1.8em;
    }
    
        #home #gallerycont .gallery-overlay .cont .cont-content h2
        {
            font-size: 2em;
        }

}

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

    #hometelcont p.hometelnum a
    {
        font-size: 0.95em;
    }
    
        #hometelcont p.hometelnum a span
        {
            font-size: 0.9em;
        }

}