/*

SaneAble 2024 CSS 1.0 (February 2024 - updated)
WEBSITE DESIGNED AND BUILT BY: SANE AND ABLE

www.saneandable.co.uk


Dark Blue		#01044F		rgba(1,4,79,1)
Dark Green		#092718
Pink			#BA63FF		rgba(186,99,255,1)
Purple			#7F60FE		rgba(127,96,254,1)


Text Green		#00FFC2

Secondary:
Lavender		#565BCF
Turquise		#2EB5C7
Lime			#9CC42A
Orange			#F57E28
Light Blue		#26CBFF

*/





#contact a:link {color: rgba(1,4,79, 1); transition: color ease 0.2s;}
#contact a:visited {color: rgba(1,4,79, 1);}
#contact a:active {color: rgba(1,4,79, 1);}
#contact a:hover {color: rgba(186,99,255,1); border-bottom: 1px solid rgba(186,99,255,0.3);}
#contact .map-icon a:hover {color: rgba(186,99,255,1); border-bottom: none;}


nav ul li a:link {color: rgba(255,255,255,1); transition: color ease 0.2s; }
nav ul li a:visited {color: rgba(255,255,255,1); }
nav ul li a:active {color: rgba(255,255,255,1); }
nav ul li a:hover {color: rgba(255,255,255,0.5); }

/*
nav ul li a:link {color: white; transition: color ease 0.2s; }
nav ul li a:visited {color: white; transition: color ease 0.2s; }
nav ul li a:active {color: white; }
nav ul li a:hover {color: white; }
*/

/*
nav a:visited {color: rgba(0,0,0, 1);}
nav a:active {color: rgba(0,0,0, 1);}
nav a:hover {color: rgba(0,0,0, 0.5); border-bottom: 1px solid rgba(186,99,255,0.3); }
*/

/*
#contact #contact-right div:first-child a:link {color: rgba(255,255,255, 1);}
#contact #contact-right div:first-child a:visited {color: rgba(255,255,255, 1);}
#contact #contact-right div:first-child a:active {color: rgba(255,255,255, 1);}
#contact #contact-right div:first-child a:hover {color: rgba(255,255,255, 0.5);}
*/

/*
#contact #contact-right a:link {color: rgba(255,255,255, 1);}
#contact #contact-right a:visited {color: rgba(255,255,255, 1);}
#contact #contact-right a:active {color: rgba(255,255,255, 1);}
#contact #contact-right a:hover {color: rgba(255,255,255, 0.5);}
*/

html, body {
	margin: 0;
	color: #01044F;
	overflow-x: hidden;
	}

a 			{ text-decoration: none; box-shadow: none; }
a:hover		{ text-decoration: none; }
a img		{ border: none; }
.cB			{ clear: both; }
h1			{ font-weight: normal; }
h2			{ font-weight: normal; }
h3			{ font-weight: normal; }
h4			{ font-weight: normal; }
h5			{ font-weight: normal; }
h6			{ font-weight: normal; }
h7			{ font-weight: normal; }
strong, b	{ font-weight: normal; }







/******************** GLOBAL ******************/







@media(min-width:768px) {
  .container {
    max-width: 990px;
  }
  .container.fixed-footer {
    max-width: 990px;
    padding-bottom: 100px;
  }


}








/******************** FONTS ******************/








.barlow-regular {
	font-family: "Barlow", sans-serif;
	font-weight: 400;
	font-style: normal;
	}

.barlow-medium {
	font-family: "Barlow", sans-serif;
	font-weight: 500;
	font-style: normal;
	}

.barlow-semibold {
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-style: normal;
	}

.barlow-bold {
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	font-style: normal;
	}

.roboto-light {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
	}

.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	}

p,
ol {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 20px;
	line-height: 155%;
	}


.text-lavender { color: #565BCF; }
.text-turquise { color: #2EB5C7; }
.text-lime { color: #9CC42A; }
.text-orange { color: #F57E28; }
.text-lightblue { color: #26CBFF; }
.text-white { color: #FFFFFF; }	









/******************** HEADER ******************/


/* strike through */


 .typewrite .wrap {
	display: inline-block;
	/* border-right: 0.08em solid #000; */
	white-space: nowrap;
	overflow: hidden;
}
.strikethrough {
	position: relative;
	display: inline-block;
}
.strikethrough::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 50%;
	width: 100%;
	height: 1px;
	background-color: #000;
	transform: scaleX(0);
	transform-origin: left;
}
.strikethrough.animate::after {
	animation: strike 1s forwards;
}
.delete-animate::after {
	animation: delete-strike 1s forwards;
}
@keyframes strike {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}
@keyframes delete-strike {
	0% {
		transform: scaleX(1);
	}
	100% {
		transform: scaleX(0);
	}
} 
.pink-text {
	color: pink;
}




header {
	position: absolute;
	z-index: 1000;
	
	display: block;
	/* width: 100vw; */
	width: 100%;
/* 	height: 80px; */
	top: 0;
/* 	background-color: lime; */
	}
	header #sa-logo {
		margin-top: 20px;
		margin-left: 20px;
/* 		width: 100px; */
		}
	dotlottie-player {
	    opacity: 0;
	    transition: opacity 0.5s ease-in-out;
	}
	

#nav-icon, #nav-icon-mob {
	position: fixed;
	font-weight: 700;
	color: white;
/* 	background-color: blue; */
	/* top: 25px; */
	/* right: 30px; */
	margin-top: 15px;
	margin-right: 10px;
	z-index: 1001;
	transition: opacity ease 0.5s;
	}
	#nav-icon:hover, #nav-icon-mob:hover {
		opacity: 0.5;
		}
	#nav-icon.nav-dark, #nav-icon-mob.nav-dark {
		color: #01044F;
		}
/*
	.navy-closed {
		top: -80px;
		}
	.navy-open {
		top: 80px;
		}
*/
	.addTopMargin {
		top: 0px;
		}
		li.active2 {
			opacity:50%;
		}
nav {
	position: fixed;
	top: -85px;
	height: 85px;
	width: 100vw;
	z-index: 1002;
	background-color: #BA63FF;
	transition: top ease 0.3s;	
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 20px;
	}
	nav ul {
		text-align: right;
		padding: 25px;
		}
		nav ul li {
			display: inline;
			padding: 20px;
			}
			nav ul li.item-last {
				padding-right: 0;
				}

/*
.navbar-nav {
	flex-direction: row;
	}
*/
.desktop-none
{
    display: none
}
  .mobile-none
    {
        display: block;
    }
	





	/* strik through pink */
	.pink-text {
        color: #BA63FF;
	text-decoration:none !important;
    }
  
    @keyframes animateStrikeThrough {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
    }
	/* strike through pink */
@media(max-width:767px) {
	header {
/* 		background-color: green; */
		}
		header #sa-logo {
			margin-top: 20px;
			margin-left: 20px;
			}
	#nav-icon, #nav-icon-mob {
		top: 15px;
		right: 20px;
		z-index: 1002;
		}
	nav {
		font-size: 15px;
		
/* 		top: -70px; */
/* 		display: none; */
		}
		nav ul li {
			padding: 8px;
			}
			nav ul li.item-last {
				padding-right: 8px;
				}
    
    
    .mobile-none
    {
        display: none;
    }
    .desktop-none {
    display: block;
}
	}





/******************** HOME ******************/







#home-section-1 {
	width: 100vw;
	height: 100vh;
	background-color: #01044F;
	
	color: #FFF;	
	}
	#home-section-1 h1 {
		margin: 0;
		padding: 0 0 50px 0;
		font-weight: inherit;
		font-size: 70px;
		line-height: 115%;
		}
		#home-section-1 h1 span {
			color: #BA63FF;
			}
			#home-section-1 h1 span.striker {
				text-decoration: line-through;
				text-decoration-thickness: 7px;
				}
	#home-section-1 .home-scroll-prompt {
		width: 100%;
		position: absolute;
		bottom: 45px;
		left: 0;
		text-align: center;
		font-size: 15px;
		}
		#home-section-1 .home-scroll-prompt span {
			display: block;
			padding-top: 5px;
			}
		.bounce {
	      position:fixed;
	      left:50%;
	      bottom:10px;
	      margin-top:-15px;
	      margin-left:-15px;
	      height:30px;
	      width:30px;
	      -webkit-animation:bounce 1s infinite;
	      -webkit-animation-delay: 2s;
	    }
	    
	    @-webkit-keyframes bounce {
	      0%       { bottom:15px; }
	      25%, 75% { bottom:18px; }
	      50%      { bottom:20px; }
	      100%     { bottom:10px;}
	    }
#home-section-21,
#home-section-2 {
	width: 100vw;
	/* height: 50vw; */
	/* background-color: #BA63FF; */
	}
	#home-section-21 #home-see-portfolio,
	#home-section-2 #home-see-portfolio {
		height: 50vw;
		}
		#home-section-21 #home-see-portfolio img,
		#home-section-2 #home-see-portfolio img {
			width: 150px;
			}
			#home-section-21 #home-read-about,
	#home-section-2 #home-read-about {
		background-color: #7F60FE;
		height: 50vw;
/* 		display: block; */
		}
		#home-section-21 #home-read-about img,
		#home-section-2 #home-read-about img {
			width: 90px;
			}

#home-section-3 {
	width: 100vw;
	height: 100vh;
	background-color: #092718;
	
	color: #00FFC2;
	font-size: 70px;
	}
	#home-section-3 #home-services-left {
		text-align: right;
		line-height: 115%;
		}
	#home-section-3 #home-services-right {
		text-align: left;
		line-height: 115%;
		height: 100vh;
		overflow: hidden;
		white-space: nowrap;
		}

		/* .typewrite {
			color: white !important; 
			
		  }
		  .good {
			text-decoration: line-through;
			
			color: pink;
		}
		  .typewrite > .wrap {
			border-right: 0.04em solid #fff ;
		  } */

		  .typewrite {
            display: inline-block;
        }
        .typewrite > .wrap {
            /* border-right: 0.08em solid #fff; */
            display: inline-block;
            white-space: pre;
            /* animation: caret 1s steps(1) infinite; */
        }
        @keyframes caret {
            50% {
                border-color: transparent;
            }
        }
        .strikethrough {
            text-decoration: line-through !important;
            color: pink;
        }
        .pink-text {
            color: pink;
        }
		/* gsap text */
		
       
	
		  
/* EYE ICON HOME */
.slider-eye-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	overflow: hidden;
}
.slider-eye {
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
	flex-direction: column;
	height: 100px;
}
.icon-eye-cen:hover .icon-1 {
	transform: translateY(-150px);
}
.icon-eye-cen:hover .text-1 {
	transform: translateY(-150px);
}

.icon-1 {
	/* width: 24px; */
	/* height: 24px; */
	transition: transform 0.25s ease-in-out;
}
.text-1 {
	margin-left: 10px;
	transition: transform 0.25s ease-in-out;
	position: relative;
	top: 75px;
	font-size: 70px;
    font-weight: 600;
    color: #01044F;
	font-family: "Barlow", sans-serif !important;
}
.icon-eye-cen{
	align-items: center;
	background-color: #BA63FF;
	font-family: "Barlow", sans-serif !important;
}
/* Ear Icon  */
.slider-ear-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 198px;
	overflow: hidden;
}
.slider-ear {
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
	flex-direction: column;
	height: 160px;
}
.icon-ear-cen{
	align-items: center;
	background-color: #7F60FE;
	height: 100vh;
	font-family: "Barlow", sans-serif !important;
}
.icon-ear-cen:hover .icon-1 {
	transform: translateY(-200px);
}
.icon-ear-cen:hover .text-1 {
	transform: translateY(-180px);
}
.mobile{
	display: none;
}

@media(max-width:767px) {
	#home-section-1 {
		padding-right: 15px;
		padding-left: 15px;
		}
	
	#home-section-1 h1 {
		font-size: 40px;
		line-height: 115%;
		}
		#home-section-1 h1 span.striker {
			text-decoration-thickness: 4px;
			}
/*
	#home-section-1 .home-scroll-prompt {
		bottom: 30px;
		font-size: 12px;
		}
*/
		
/*
		.bounce {
	      position:fixed;
	      left:50%;
	      bottom:0;
	      margin-top:-15px;
	      margin-left:-15px;
	      height:30px;
	      width:30px;
	      -webkit-animation:bounce 1s infinite;
	      -webkit-animation-delay: 2s;
	    }
	    
	    @-webkit-keyframes bounce {
	      0%       { bottom:5px; }
	      25%, 75% { bottom:8px; }
	      50%      { bottom:10px; }
	      100%     { bottom:0px;}
	    }
*/
		#home-section-21, 	
		#home-section-2 {
			height: 100vh;
			}
		
	#home-section-21 #home-read-about,
	#home-section-21 #home-see-portfolio,	
	#home-section-2 #home-read-about,
	#home-section-2 #home-see-portfolio {
		height: 50vh;
		}
	
		#home-section-21 #home-see-portfolio img ,
	#home-section-2 #home-see-portfolio img {
		width: 100px;
		}
		#home-section-21 #home-read-about img ,
	#home-section-2 #home-read-about img {
		width: 65px;
		}
	
	#home-section-3 {
		height: 50vh;
		font-size: 20px;
		}
		#home-section-3 #home-services-right {
			height: 50vh;
			}
			.icon-eye-cen{
				height: 50vh;
			}
			.icon-ear-cen{
				height: 50vh;
			}
	}		


/******************** HOME SCROLL EFFECT ******************/

/* Fixed first section */
#home-section-1{
  position: fixed;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100svh;           /* better mobile behaviour than 100vh */
  z-index: 0;
}

/* Ensure the “scrolling over” sections sit above it */
#home-section-21,
#home-section-2{
  position: relative;
  z-index: 1;
  margin-top: var(--home-hero-h, 100svh);
}

/* Optional: if section 2 should be opaque while covering section 1 */
#home-section-21,
#home-section-2{
  background: #fff; /* change/remove if you want transparency */
}

/* Prevent horizontal jitter from fixed layers (optional) */
html, body { overflow-x: hidden; }

#home-section-1{ position: fixed; inset: 0; height: 100svh; z-index: 0; }
#home-section-21, #home-section-2{ position: relative; z-index: 1; margin-top: 100svh; }


#home-section-1 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
}

/*
#home-section-1 .hero-inner{
  will-change: opacity, transform;
  transition: opacity 0.1s linear;
}
*/


#home-section-1 .hero-inner{
  transition: opacity 0.1s linear, filter 0.1s linear, transform 0.1s linear;
}

/* Force stable compositing for iOS/Safari */
#home-section-1 .hero-inner{
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform, filter;
  contain: paint;
}

/* Avoid CSS transitions fighting with scroll updates */
#home-section-1 .hero-inner{
  transition: none !important;
}

		
		



/******************** ABOUT ******************/







#about-section-1-text,
#about-section-2-text,
#about-section-3-text,
#about-section-4-text,
#about-section-6-text {
	    display: flex;
	    justify-content: center;
	    /* align horizontal */
	    align-items: left;
	    flex-direction: column;
	}
	
#about-section-4-image {
	    display: flex;
	    justify-content: center;
	    /* align horizontal */
	    align-items: center;
	    flex-direction: column;
	}

#about-section-2,
#about-section-3,
#about-section-4,
.about-section-5,
#about-section-6 {
	margin-top: 30px;
	}

	#about-section-1-image {
/*
		background: url(../images/about-animations/about-sinking-blocks.svg) left center no-repeat;
		background-size: contain;
*/
		height: 100vh;
		}
	#about-section-2-image {
/*
		background: url(../images/white-marks-2.png) left center no-repeat;
		background-size: contain;
*/
		height: 100vh;
		}
	#about-section-3-image {
/*
		background: url(../images/white-marks-4.png) left center no-repeat;
		background-size: contain;
*/
		height: 100vh;
		}
	
	#about-section-4-image {
/*
		background: url(../images/white-marks-3.png) left center no-repeat;
		background-size: contain;
*/
		height: 100vh;
		text-align: center;
		color: #FFFFFF;
		}

.list-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsive 4-column layout */
            gap: 10px; /* Adds spacing between items */
            padding: 0;
            list-style: none;
        }

        .list-item {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100px; /* Adjust as needed */
        }

	#about-section-6-image {
		background: url(../images/white-marks-5.png) left center no-repeat;
		background-size: contain;
		height: 100vh;
		}
	
	#about-section-4 #about-section-4-text img {
		max-width: 120px;
		max-height: 72px;
		}
	
.about-section-5 {
	position: relative;
}	
	.about-section-5 #about-section-5-text {
		padding-right: 50px;
		}
	.about-section-5 .about-section-5-quotes {
		padding-right: 50px;
		}
		.about-section-5 .about-section-5-quotes p.about-cite {
			padding-top: 20px;
			font-size: 14px;
			}
			.about-section-5 .about-section-5-quotes p.about-cite span {
				font-weight: 400;
				display: block;
				}

.about-section-5 .fold-mark,
#about-section-6 .fold-mark {
	width: 30px;
	height: 3px;
	background-color: #01044F;
	display: block;
	position: absolute;
	left: 0px;
	}
.about-section-5 .fold-mark {
	top: -30px;
	}

#about-section-7-text {
	padding-top: 35px;
	padding-bottom: 35px;
	text-align: center;
	}
	#about-section-7-text div {
		display: inline-block;
		}

/*
#about-section-7-text {
	}
	#about-section-7-icons div {
		width: auto;
		display: inline-block;
		}
*/
/*
	#about-section-7-icons div:first-child {
		margin-right: 20px;
		}
*/
	#about-section-7-text a {
		display: block;
		padding: 30px;
		transition: opacity 0.5s;
		}
	#about-section-7-text a:hover {
		opacity: 0.3;
		}
		
#about-section-1,
#about-section-2,
#about-section-3,
#about-section-4,
#about-section-6 {
	height: 100vh;
	}
.about-section-5,
#about-section-7 {
	padding-top: 150px;
	padding-bottom: 150px;
	}
		
#about-section-1 h1,
#about-section-2 h2,
#about-section-3 h2,
#about-section-4 h3,
.about-section-5 h4,
#about-section-6 h5,
#about-section-7 h6 {
	font-size: 45px;
	line-height: 110%;
	padding-bottom: 20px;
	}


/**** COLOUR ****/		

	.colour-img #about-section-1-image {
		background: url(../images/about-animations/about-sinking-blocks.svg) center center no-repeat;
		background-size: cover;
		}
	.colour-img #about-section-2-image {
		background: url(../images/about-animations/about-ideas-gems-v2-blue.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		}
	.colour-img #about-section-3-image {
		background: url(../images/about-animations/about-people-jump.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		}
	
	.colour-img #about-section-4-image {
		background: url(../images/about-animations/about-people.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		text-align: center;
		}

	.colour-img #about-section-6-image {
		background: url(../images/about-animations/about-steps-process-sequence.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		}
	#about-section-2.colour-img,
	#about-section-3.colour-img,
	#about-section-4.colour-img,
	.about-section-5.colour-img,
	#about-section-6.colour-img  {
		margin-top: 0px;
		}


/**** Transparent ****/		

	.transparent-img #about-section-1-image {
		background: url(../images/about-animations-transparent/about-sinking-blocks-transparent.svg) center center no-repeat;
		background-size: cover;
		}
	.transparent-img #about-section-2-image {
		background: url(../images/about-animations-transparent/about-ideas-gems-v2-transparent.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		}
	.transparent-img #about-section-3-image {
		background: url(../images/about-animations-transparent/about-people-jump-transparent.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		}
	
	.transparent-img #about-section-4-image {
		background: url(../images/about-animations-transparent/about-people-transparent.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		text-align: center;
		}

	.transparent-img #about-section-6-image {
		background: url(../images/about-animations-transparent/about-steps-process-sequence-transparent.svg) center center no-repeat;
		background-size: cover;
		height: 100vh;
		}
	#about-section-2.transparent-img,
	#about-section-3.transparent-img,
	#about-section-4.transparent-img,
	.about-section-5.transparent-img,
	#about-section-6.transparent-img  {
		margin-top: 0px;
		}



@media(max-width:767px) {
	#about-section-1-text,
	#about-section-2-text,
	#about-section-3-text,
	#about-section-4-text,
	#about-section-6-text {
		padding-top: 100px;
		padding-bottom: 100px;
		
		padding-right: 30px;
		padding-left: 30px;
		}
	#about-section-7-text {
		padding-right: 30px;
		padding-left: 30px;
		}
	#about-section-4 ul {
		padding-top: 0px;
		padding-bottom: 20px;
/*
		padding-right: 15px;
		padding-left: 16px;
*/
		}
	
	#about-section-5-text {
/*
		padding-top: 100px;
		padding-right: 30px;
		padding-left: 30px;
*/
		}
	.about-section-5-quotes {
/*
		padding-right: 60px;
		padding-left: 30px;
*/
		}
		.about-section-5 .about-section-5-quotes p.about-cite span {
			display: block;
			}
	
/*
	#about-section-7-text {
		text-align: center;
		}
*/
		#about-section-7-icons {
			margin: 0;
			padding: 0;
		}
		#about-section-7-icons div:first-child {
			margin-right: 0;
			}
		#about-section-7-icons div img {
			width: 40%;
			}
			#about-section-7-icons div {
				width: 49vw;
			}
			#about-section-7-icons div:first-child {
				margin-right: 0;
				text-align: right;
				}
	
	.colour-img #about-section-1-image,
	.colour-img #about-section-2-image,
	.colour-img #about-section-3-image,
	.colour-img #about-section-4-image,
	.colour-img #about-section-6-image {
		height: 100vw;
		}
	.about-section-5,
	#about-section-7 {
		padding-top: 50px;
		padding-bottom: 50px;
		}
	
	#about-section-1 h1,
	#about-section-2 h2,
	#about-section-3 h2,
	#about-section-4 h3,
	.about-section-5 h4,
	#about-section-6 h5,
	#about-section-7 h6 {
		font-size: 30px;
		}
	p,
	ol {
		font-size: 16px;
		line-height: 155%;
		}
	
	#about-section-1,
	#about-section-2,
	#about-section-3,
	#about-section-4,
	#about-section-6,
	#about-section-7 {
		height: auto;
		}
}








/******************** PORTFOLIO HOME ******************/








#portfolio-home .col-md-6 {
	padding-left: 0;
	padding-right: 0;
/*
	padding-left: 15px;
	padding-right: 15px;
*/
	}

#portfolio-text {
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
	    
	height: 100vh;
	}

			


.portfolio-section {
	height: 50vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: normal;
	position: relative;
	}
	.portfolio-section .client-logo {
		position: absolute;
		inset: 0;
		margin: auto;
		width: fit-content;
		height: fit-content;
		display: inline-block;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: auto;
		align-self: auto;
		order: 0;
		transition: opacity 0.5s ease;
		text-align: center;
		}
		.portfolio-section .client-logo img {
			max-width: 70%;
			}
	.portfolio-section:hover .client-logo {
		opacity: 0;
		}
	
	.portfolio-section a {
		height: auto;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
		color: #FFFFFF;
		
		height: 100%;
		width: 100%;
		}
		a.portfolio-section:hover ul {
			opacity: 1;
			height: auto;
			}			
			
	.portfolio-section h2 {
		font-weight: 600;
		font-size: 45px;
		margin: 50px 0 0 0;
/* 		padding: 40px; */
		padding-bottom: 20px;
		transition: margin  0.3s ease;
		}
		
		a.portfolio-section:hover h2 {
			margin-top: 0px;
			}
			
	.portfolio-section ul {
		list-style: none;
		padding-left: 0;
		font-weight: 500;

		opacity: 0;
		transition: opacity 0.4s ease;
		z-index: 10;
		}
		.portfolio-section ul li {
			color: #000000;
			font-size: 12px;
			padding: 7px 15px;
			background-color: #FFFFFF;
			display: inline-block;
			border-radius: 25px;
			margin-right: 8px;
			transition: all ease 0.5s;
			}
/*
			.portfolio-section a:hover ul li {
				background-color: transparent;
				padding: 7px 15px;
				color: #FFFFFF;
				border: 1px solid rgba(255,255,255, 0.5);
				}
*/



#id-te { background: url(../images/clients/tealium/Tealium-header-4.webp) center center no-repeat; background-size: cover;}
#id-th { background: url(../images/clients/taylor-hawkes/taylor-hawkes-1.webp) center center no-repeat; background-size: cover;}
#id-im { background: url(../images/clients/imagino/imagino-1.webp) center center no-repeat; background-size: cover;}
#id-df { background: url(../images/clients/dirty-films/dirty-films-2.webp) center center no-repeat; background-size: cover;}
#id-rm { background: url(../images/clients/roaring-mouse-pr/roaring-mouse-2.png) center center no-repeat; background-size: cover;}
#id-mi { background: url(../images/clients/mischief/mischief-1.webp) center center no-repeat; background-size: cover; }
#id-tw { background: url(../images/clients/twickets/twickets-2.webp) center center no-repeat; background-size: cover;}
#id-wo { background: url(../images/clients/workiva/workiva-2.webp) center center no-repeat; background-size: cover;}
#id-wk { background: url(../images/clients/wildkat-pr/wildkat-pr-1.webp) center center no-repeat; background-size: cover;}
#id-mm { background: url(../images/clients/music-at-malling/music-at-malling-2.webp) center center no-repeat; background-size: cover;}
#id-mp { background: url(../images/clients/dr-michael-prager/dr-michael-prager-2.webp) center center no-repeat; background-size: cover;}
#id-ac { background: url(../images/clients/augen-centrum-hamburg/augencentrum-1.webp) center center no-repeat; background-size: cover;}
#id-ti { background: url(../images/clients/thought-industries/thought-industries-3.webp) center center no-repeat; background-size: cover;}







/******************** LATEST HOME ******************/





#latest-home {
	background-image: url(../images/latest/scribble-background-2.webp);
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: right top;
	}

#latest-home .col-md-6,
#latest-home .col-md-8,
#latest-home-content .col-md-11 {
	padding-left: 0;
	padding-right: 0;
	}

#latest-text {
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
	    
	height: 90vh;
	}

#latest-home-content .latest-two h2 {
	transition: all ease 0.3s;
	opacity: 1;
	}	
	
#latest-home-content .latest-two:hover h2 {
	opacity: 0.6;
	}
	
	
#latest-home-content .latest-two .image-container {
    overflow: hidden;
    position: relative;
	}
#latest-home-content .latest-two .image-container .image {
    transition: all ease-in-out .5s;
    transform: scale(1,1); 
    }
#latest-home-content .latest-two:hover .image-container .image {
	transform: scale(1.05,1.05); 
	}


#latest-home-content .latest-two .two-columns {
	height: 50vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: normal;
	align-content: normal;
/*
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
*/
	}
#latest-home-content .latest-two .two-columns.two-text {
/* 	min-height: 50vh; */
	color: rgba(1,4,79,1);
	}
	#latest-home-content .latest-two .two-columns.two-text p {
		font-size: 14px;
/* 		opacity: 0.4; */
		color: rgba(1,4,79,0.4);
		}
	#latest-home-content .latest-two h2 span {
		display: block;
		}
	
	#latest-home-content .latest-two:nth-of-type(1) h2 span { color: #565BCF; }
	#latest-home-content .latest-two:nth-of-type(2) h2 span { color: #2EB5C7; }
	#latest-home-content .latest-two:nth-of-type(3) h2 span { color: #9CC42A; }
	#latest-home-content .latest-two:nth-of-type(4) h2 span { color: #BA63FF; }
	#latest-home-content .latest-two:nth-of-type(5) h2 span { color: #7F60FE; }
	#latest-home-content .latest-two:nth-of-type(6) h2 span { color: #26CBFF; }


#latest-home-content .fold-mark {
	width: 30px;
	height: 3px;
	background-color: #01044F;
	display: block;
	position: absolute;
	left: 0px;
	}

#latest-contact {
	background-color: #565BCF;
	padding-top: 100px;
	padding-bottom: 100px;
	margin-top: 120px;
	margin-bottom: 120px;
	}
	#latest-contact a {
		background-color: rgba(255,255,255,1);
		color: #565BCF;
		padding: 15px 35px;
		display: inline-block;
		margin-top: 30px;
		border-radius: 100px;
	    transition: all 0.3s ease-in-out;
		}
		#latest-contact a:hover {
			background-color: rgba(255,255,255,.5);
			}

#latest-home-content .meta-pagenav {
	margin-top: 150px;
	margin-bottom: 100px;
	text-align: center;
	}
	#latest-home-content .meta-pagenav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		}
		#latest-home-content .meta-pagenav ul li {
			display: inline-block;
			}
			#latest-home-content .meta-pagenav ul li a {
				color: rgba(1,4,79,1);
				padding:  12px 15px;
/* 				border-right: 1px solid rgba(1,4,79,0.1); */
				}
				#latest-home-content .meta-pagenav ul li.active a {
					color: rgba(1,4,79,.5);
					background-color: rgba(1,4,79,.1);
					border-radius: 3px;
					margin-right: 8px;
					}
				#latest-home-content .meta-pagenav ul li a:hover {
					color: rgba(1,4,79,.3);
					}
			#latest-home-content .meta-pagenav ul li:last-child a {
				border-right: none;
				}


/* Desktop and up: 50/50 split with fixed left panel */
.left-fixed {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	}

.right-scroll {
	position: relative;
	margin-left: 50vw;  /* push to the right of the fixed panel */
	width: 50vw;        /* take the remaining half */
	}

@media (max-width: 991px) {
	.left-fixed {
		position: static;
		width: 100%;
		height: auto;
		margin-left: 0;
		margin-top: 100px;
		margin-bottom: 30px;
		}
	.right-scroll {
		position: static;
		width: 100%;
		height: auto;
		margin-left: 0;
		}
	}



@media(max-width:767px) {
	#latest-text {
		height: auto;
		padding: 150px 30px;
		}
		#latest-home-content .latest-two .two-columns.two-text {
			height: auto;
			padding-top: 150px;
			padding-right: 30px;
			padding-bottom: 30px;
			padding-left: 30px;
			}
	#latest-contact {
		margin-top: 10vw;
		margin-bottom: 10vw;
		width: 90vw;
		}
	#latest-contact.col-md-11 {
		padding: 40px;
		}
	#latest-home-content .meta-pagenav {
		margin-top: 80px;
		margin-bottom: 90px;
		}
	}







/******************** LATEST SINGLE ******************/





#latest-single {
	}
	#portfolio-single #latest-single h1 {
		font-weight: 700;
		margin-bottom: 20px;
		}
	.single-button {
		margin-top: 50px;
		}
		.single-button a {
			background-color: #01044F;
			padding: 16px 24px;
			color: #FFF;
			border-radius: 100px;
			font-size: 16px;
			transition: background ease 0.3s;
			}
			.single-button a:hover {
				background-color: #BA63FF;
				}
		.single-button a i {
			margin-left: 5px;
			transition: all ease 0.3s;
			}
			.single-button a:hover i {
				margin-left: 8px;
				}


	





/* slider about us page */

.owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}
button.owl-next {
    position: absolute;
    right: -70px;
    transition: all ease 0.3s;
}
button.owl-prev {
    position: absolute;
    left: -40px;
}
button.owl-next:before {
    content: url(../images/icon-arrow-right.svg);
/*     font-family: fontawesome; */
    font-size: 21px;
}
button.owl-next span {
    display: none;
}
button.owl-next:hover {
    opacity: 0.5;
    right: -80px;
}
button.owl-prev {
    display: none;
}


.owl-item.previous-item {
	display: block !important;
	opacity: 0.5; 
}
.mob-nav{
	display: none;
 }




@media(max-width:767px) {
	button.owl-next {
	    position: absolute;
	    right: 0px;
		}
		button.owl-next:hover {
			right: -10px;
			}
	.desk-nav {
		display: none;
	}
	.mob-nav {
		display: block;
	}
	a.nav-link.ui-link {
		font-size: 20px;
		line-height: 20px;
		padding: 0px;
		color: #fff !important;
		font-family: "Roboto", sans-serif !important;
	}

nav{
	background-color: transparent;
/* 	background-color: blue; */
	z-index: 999;
}
	#portfolio-text {
		height: auto;
		padding: 150px 30px;
		}
	.portfolio-section {
		height: 60vh;
		width: 100vw;
/* 		align-items: center; */
		}
		.portfolio-section .client-logo {
			text-align: center;
/* 			align-items: center; */
		}
			
		.portfolio-section .client-logo img {
			max-width: 60%;
			}

		.portfolio-section a {
	/* 		padding: 30px; */
			align-items: center;
			}
		.portfolio-section h2 {
			font-size: 35px;
/* 			padding: 30px; */
			padding-bottom: 20px;
			}
		.portfolio-section ul {
/*
			left: 30px;
			margin-bottom: 30px;
*/
				text-align: center;
			}
			.portfolio-section ul li {
				font-size: 13px;
				margin-bottom: 10px;
				margin-right: 4px;
				padding: 4px 12px;
				text-align: center;
				}
/*
				.portfolio-section a:hover ul li {
					padding: 4px 12px;
					}
*/
	}








/******************** PORTFOLIO SINGLE ******************/







#portfolio-single #outer-back {
	height: 10vh;
	padding-top: 15px;
	padding-left: 10px;
	}
	#portfolio-single #outer-back a#portfolio-back {
		background: url(../images/icon-arrow-left-dark.svg) center center no-repeat;
		display: block;
		height: 50px;
		width: 50px;
		margin-left: 0px;
		transition: all 0.2s ease-in-out;
		}
	#portfolio-single #outer-back a#portfolio-back:hover {
		opacity: 0.3;
		margin-left: -5px;
		}
	

    .portfolio-back-bottom {
        position: fixed;
        bottom: 40px;
        left: 0;
        width: 100%;
        color: white;
        text-align: center;
        display: none; /* Initially hidden */
        }
        .portfolio-back-bottom a {
            background: rgba(1,4,79, 1);
            padding: 15px 25px;
            border-radius: 100px;
            color: #FFFFFF;
            transition: background ease 0.3s;
        	}
	        .portfolio-back-bottom a:hover {
	            background: rgba(1,4,79, 0.5);
	        	}

#portfolio-single h1,
#portfolio-single h2,
#portfolio-single h3,
#portfolio-single h4,
#portfolio-single h5,
#portfolio-single h6 {
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-style: normal;
	padding: 0;
	margin: 0;
	}

#portfolio-single .portfolio-zero {
	height: 80vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: normal;
	align-content: normal;
	padding-bottom: 10vh;
	}
	#portfolio-single .portfolio-zero .single-title {
		display: block;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: auto;
		align-self: auto;
		order: 0;
		}
		#portfolio-single .portfolio-zero .single-title h1 {
/* 			font-size: 37px; */
			font-size: 56px;
			}
		#portfolio-single .portfolio-zero .single-title h2 {
/* 			font-size: 14px; */
			font-size: 17px;
			font-weight: 500;
			margin-bottom: 50px;
			}
			
	#portfolio-single .portfolio-zero ul {
		list-style: none;
		padding-left: 0;
		font-weight: 500;
		padding-top: 30px;
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		}
		#portfolio-single .portfolio-zero ul li {
			color: #01044F;
			font-size: 12px;
			padding: 7px 15px;
			background-color: #FFFFFF;
			border: 1px solid rgba(1,4,79,.1);
			display: inline-block;
			border-radius: 25px;
			margin-right: 0;
			}
	
	#portfolio-single .portfolio-zero .single-image {
/*
		height: calc(70vh - 30px) !important;
		display: block;
		margin-bottom: 30px;
*/

/* 		margin-bottom: 0px; */
		opacity: 0;
		}
		#portfolio-single .portfolio-zero .single-image img {
			width: 100%;
			height: auto;
			}
			
	#portfolio-single .portfolio-one {
		display: inline-block;
		width: 100vw;
		}
			
	#portfolio-single .portfolio-one img {
		width: 100vw;
		height: auto;
		}

#portfolio-single .fold-mark {
	width: 30px;
	height: 3px;
	background-color: #01044F;
	display: block;
	position: absolute;
	left: 0px;
	}


#portfolio-single .portfolio-two {
	}
	#portfolio-single .portfolio-two .two-columns {
		height: 100%;
		display: flex;
		flex-direction: column;
/* 		flex-wrap: wrap; */ /* REMOVED FOR GUMLET VIDEOS - WORKED OK WITH VIMEO */
		justify-content: center;
		align-items: normal;
		align-content: normal;
		}
	#portfolio-single .portfolio-two .two-columns.text-top {
		justify-content: flex-start;
		padding-top: 70px;
		}
	#portfolio-single .portfolio-two .two-columns.img-top {
		justify-content: flex-start;
		}
	#portfolio-single .portfolio-two .two-columns.two-text {
		min-height: 50vw;
		}
	#portfolio-single .portfolio-two .two-columns.two-video {
		justify-content: center;
		text-align: center;
		height: 50vw;
		background-color: #cccccc;
		padding-left: 50px;
		padding-right: 50px;
		}
	#portfolio-single .portfolio-two .two-columns.two-video iframe {
		border-radius: 10px;
		}
/*
		#portfolio-single .portfolio-two .two-left.two-text {
			}
*/
		#portfolio-single .portfolio-two .two-columns img {
			width: 100%;
			height: auto;
			}
			
		#portfolio-single .portfolio-two .two-columns h3,
		#portfolio-single .portfolio-two .two-columns h4,
		#portfolio-single .portfolio-two .two-columns h5,
		#portfolio-single .portfolio-two .two-columns h6 {
			font-size: 25px;
			padding-bottom: 20px;
			}
		#portfolio-single .portfolio-two .two-columns p {
			font-family: "Roboto", sans-serif;
			font-weight: 300;
			font-style: normal;
			font-size: 20px;
			}
		#portfolio-single .portfolio-two .two-columns ul {
			list-style: none;
			text-indent: 0;
			padding: 0;
			}
			#portfolio-single .portfolio-two .two-columns ul li {
				display: inline-block;
				color: rgba(1,4,79,1);
				font-size: 12px;
				padding: 7px 15px;
/* 				background-color: rgba(0,0,0,1); */
				border: 1px solid rgba(1,4,79,.2);
				display: inline-block;
				border-radius: 25px;
 				margin-right: 8px;
				}


/*** Zero Padding ***/


	#portfolio-single.zero-padding .col-md-6,
	#portfolio-single.zero-padding .col-md-7,
	#portfolio-single.zero-padding .col-md-12 {
		padding-left: 0;
		padding-right: 0;
/* 		margin: 0; */
		overflow-x: auto;
		}
		
	#portfolio-single.zero-padding .portfolio-one {
		margin: 0px;
		padding: 0px;
		}
	
	
	#portfolio-single.zero-padding .portfolio-two {
		margin: 0;
		padding: 0;
		}
		#portfolio-single.zero-padding .portfolio-two .two-columns {
			margin-right: 0px;
			}
				
			#portfolio-single.zero-padding .portfolio-two .two-columns h3 {
				margin-bottom: 0px;
				}
				
				#portfolio-single.zero-padding .portfolio-two .two-columns ul li {
					margin-right: 0px;
					}




@media(max-width:1100px) {
	#portfolio-single .portfolio-two .two-columns h3,
	#portfolio-single .portfolio-two .two-columns h4,
	#portfolio-single .portfolio-two .two-columns h5,
	#portfolio-single .portfolio-two .two-columns h6 {
		font-size: 20px;
		padding-bottom: 20px;
		}
	#portfolio-single .portfolio-two .two-columns p {
		font-family: "Roboto", sans-serif;
		font-weight: 300;
		font-style: normal;
		font-size: 16px;
		}
	}


@media(max-width:991px) {
	#portfolio-single .portfolio-zero .single-title h1 {
		font-size: 30px;
		}
	#portfolio-single .portfolio-zero .single-title h2 {
		font-size: 12px;
		font-weight: 300;
		}
	}




@media(max-width:767px) {
	#portfolio-single .container-fluid {
		padding: 0;
		}
	#portfolio-single .col-md-6 {
		padding-left: 0;
		padding-right: 0;
		}
	
	#portfolio-single .row {
		margin: 0;
		padding: 0;
	}
	
/*
	#portfolio-single header {
		height: 15vh;
		padding-right: 15px;
		padding-left: 15px;
		}
*/
#portfolio-single #outer-back {
	height: 10vh;
	padding-top: 15px;
	z-index: 1000;
	position: absolute;
	}
	
	#portfolio-single .portfolio-zero {
		position: relative;
		width: auto;
		height: calc(85vh - 20px) !important;
		margin-right: 20px;
		margin-left: 20px;
		margin-bottom: 20px;
		}
		#portfolio-single .portfolio-zero .single-title {
			height: 35vh;
			}
			
/*
		#portfolio-single .portfolio-zero .single-image img {
			height: 10px;
			}
*/
		#portfolio-single .portfolio-zero .single-image {
			position: relative;
/* 			display: block; */
			bottom: 20px;
			height: 50vh !important;

			}
			#portfolio-single .portfolio-zero .single-title h1 {
				font-size: 30px;
				}
			#portfolio-single .portfolio-zero .single-title h2 {
				font-size: 12px;
				font-weight: 300;
				}

	#portfolio-single .portfolio-one {
		padding: 0;
/* 		margin: 0 0 30px 0; */
		margin: 0;
		}
	#portfolio-single .portfolio-two {
		padding: 0;
		margin: 0 0 30px 0;
		}
		#portfolio-single .portfolio-two .two-columns {
			display: block;
			margin-right: 0;
			margin-left: 0;
			padding: 0;
/* 			margin-bottom: 30px; */
			}
			#portfolio-single .portfolio-two .two-columns.two-text {
				height: auto !important;
				margin: 0;
				padding: 0 30px 30px 30px;
				}
			#portfolio-single .portfolio-two .two-columns.two-video {
				justify-content: center;
				background-color: #cccccc;
				height: auto;
				padding: 30px;
				}
			#portfolio-single .portfolio-two .two-columns h3,
			#portfolio-single .portfolio-two .two-columns h4,
			#portfolio-single .portfolio-two .two-columns h5,
			#portfolio-single .portfolio-two .two-columns h6 {
				font-size: 18px;
				margin-bottom: 10px;
				margin-top: 50px;
				}
			#portfolio-single .portfolio-two .two-columns p {
				font-size: 16px;
				margin-bottom: 20px;
				}
			#portfolio-single .portfolio-two .two-columns ul {
				font-size: 16px;
				margin-bottom: 50px;
				}
				#portfolio-single .portfolio-two .two-columns ul li {				
					font-size: 13px;
					margin-bottom: 10px;
					margin-right: 4px;
					padding: 4px 12px;
					text-align: center;
					}
					
	#portfolio-single .fold-mark {
		width: 30px;
		height: 2px;
		background-color: #01044F;
		display: block;
		position: absolute;
		left: 0px;
		}
	

    .portfolio-back-bottom-small {
        position: static;
        bottom: 0;
        left: 0;
        width: 100%;
        color: white;
        text-align: center;
        display: block;
        }
        .portfolio-back-bottom-small a {
	        width: 100%;
	        height: 100%;
	        display: inline-block;
            background: rgba(1,4,79, 1);
            padding: 55px 25px;
            border-radius: 0;
            color: #FFFFFF;
            transition: background ease 0.3s;
        	}
			.portfolio-back-bottom-small a i {
				padding-right: 10px;
				}
	        .portfolio-back-bottom-small a:hover {
	            background: rgba(186,99,255,1);
	        	}
}








/******************** CONTACT ******************/




#contact #office-lon {
	height: 100vh;
	padding-left: 30px;

	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
        padding-bottom: 30px;
	}
	
#contact #office-ber {
	height: 100vh;
	padding-right: 30px;

	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
        padding-bottom: 30px;
	}

#contact .office-text {


	/* padding-left: 160px; */
    height: 60vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
	}

#contact .map-icon {
	position: absolute;
	}

#contact .office-map {
/* 	height: 40vh; */
	height: calc(40vh - 30px) !important;
	/* background-color: pink; */

	width: 100%;
	}
	

/*
#contact #contact-left h1 {
	font-size: 30px;
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #01044F;
	}

#contact #contact-right {
	padding: 0;
	}
	#contact #contact-right h2,
	#contact #contact-right h3 {
		font-family: "Barlow", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding-bottom: 20px;
		}

#contact #contact-right div {
	height: 50vh;
	background-color: #7F60FE;
	}
	#contact #contact-right div:first-child {
		background-color: #BA63FF;
		}
*/


@media(max-width:767px) {
    .owl-nav {
    top: 0px;

}
    #contact #office-lon,
#contact #office-ber {

     align-items: self-start;
}
 
    
    
		#contact {
			margin-top: 150px;
			}
		#contact #office-lon {
			position: relative;
			height: auto;
			padding-left: 40px;
			padding-right: 40px;
			padding-bottom: 30px;
/* 			padding-left: calc(var(--bs-gutter-x) * .5); */
			}
		#contact #office-ber {
			position: relative;
			height: auto;
			padding-left: 40px;
			padding-right: 40px;
/* 			padding-right: calc(var(--bs-gutter-x) * .5); */
			}
		#contact .office-text {
			padding-left: 0px;
			height: auto;			
			display: block;
		    justify-content: center;
		    align-items: left;
		    flex-direction: column;
			}

		#contact .map-icon {
			top:0;
			right: 40px;
			}
	}





/* navbar overly */
/* body {
	background: #87cc77;
	margin: 0;
	font-family: arial;
	width: 100vw;
	height: 100vh;
	animation: bugfix infinite 1s;
	-webkit-animation: bugfix infinite 1s;
  } */
  
  @keyframes bugfix {
	from {
	  padding: 0;
	}
	to {
	  padding: 0;
	}
  }
  @-webkit-keyframes bugfix {
	from {
	  padding: 0;
	}
	to {
	  padding: 0;
	}
  }
  #overlay-button {
	position: absolute;
	right: 2em;
	top: 1em;
	padding: 26px 11px;
	z-index: 5;
	cursor: pointer;
	user-select: none;
  }
  #overlay-button span {
	height: 2px;
	width: 26px;
	border-radius: 2px;
	background-color: white;
	position: relative;
	display: block;
	transition: all 0.2s ease-in-out;
  }
  #overlay-button span:before {
	top: -10px;
	visibility: visible;
  }
  #overlay-button span:after {
	top: 10px;
  }

  #overlay-button span:after{
	/* top: 6px; */
	height: 2px;
	width: 26px;
	border-radius: 2px;
	background-color: white;
	position: absolute;
	content: "";
	transition: all 0.2s ease-in-out;
  }
  #overlay-button span:before {
	/* top: 12px; */
	height: 2px;
	width: 26px;
	border-radius: 2px;
	background-color: white;
	position: absolute;
	content: "";
	transition: all 0.2s ease-in-out;
  }
  #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
	background: #333332;
  }
  
  input[type=checkbox] {
	display: none;
  }
  input[type=checkbox]:checked ~ #overlay {
	visibility: visible;
  }
  input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
	background: transparent;
  }
  input[type=checkbox]:checked ~ #overlay-button span:before {
	transform: rotate(45deg) translate(7px, 7px);
	opacity: 1;
  }
  input[type=checkbox]:checked ~ #overlay-button span:after {
	transform: rotate(-45deg) translate(7px, -7px);
  }
  
  #overlay {
	height: 100vh;
	/* width: 100vw; */
	width: 100%;
	background: #6E4287;
	z-index: 2;
	visibility: hidden;
	position: fixed;
	top: 0;
  }
  #overlay.active {
	visibility: visible;
  }
  #overlay ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	height: 100vh;
	padding-left: 0;
	list-style-type: none;
  }
  #overlay ul li {
	padding: 1em;
  }
  #overlay ul li a {
	color: white;
	text-decoration: none;
	font-size: 1.5em;
  }
  #overlay ul li a:hover {
	color: #333332;
  }







button.navbar-toggler .animated-icon2 span {
	background: #fff;
	border-radius: 0px !important;
}
/* Mobile adjustments */
@media (max-width: 767px) {
	

	/* nav-bar */
	.animated-icon2.open span:nth-child(1) {
		top: 11px;
		width: 0%;
		left: 50%;
	}
	
	.animated-icon2.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.animated-icon2.open span:nth-child(2), .animated-icon2.open span:nth-child(3) {
		top: 8px;
	}
	
	.animated-icon2.open span:nth-child(3) {
		top: 8px;
	}
	
	.animated-icon2.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	.animated-icon2.open span:nth-child(4) {
		top: 11px;
		width: 0%;
		left: 50%;
	}
	#nav-icon.nav-dark .animated-icon2 span, #nav-icon-mob.nav-dark .animated-icon2 span {
		/* background-color: gray; */
		background-color: #01044F;
		border-radius: 0px !important;
	}
	button.navbar-toggler .animated-icon2.open span {
		background: #fff !important;
	}

	/* home show me and tell me*/
	.text-1 {
		font-size: 35px;
	}

	
}
@media (max-width: 768px) {
	#home-section-1 h1 span {
		text-wrap: wrap;
		/* font-size: 35px;
		line-height: 50px; */
	}

	.mobile{
		display: block;
	}
	.desktop{
		display: none !important;
	}
	span#showMeLink a ,
	span#showMeLink2 a {
	  /* color: inherit; */
	  transition: transform 0.25s ease-in-out;
	  font-size: 35px;
	  font-weight: 600;
	  color: #01044F;
	  font-family: "Barlow", sans-serif !important;
  }
}
@media (max-width: 576px) {
	#home-section-1 h1 span {
		text-wrap: wrap;
		/* font-size: 19px;
		line-height: 30px; */
	}
}
/* Menu button navbar */
button.navbar-toggler, .ui-page-theme-a .ui-btn {
	background: transparent !important;
	border: 0;
	display: inline-block;
	width: auto;
	position: absolute;
	/* right: 40px; */
	right: 17px;
	padding: 0;
	box-shadow: none !important;
	border-radius: 0;
	z-index: 3;
	margin: 0;
	top: 15px;
}
nav.navbar {
    position: fixed;
    top: 0 !important;
}
button.navbar-toggler .animated-icon2 {
	width: 20px;
	height: 20px;
	box-shadow: none;
	background: transparent;
}

.animated-icon2, .animated-icon3 {
	width: 30px;
	height: 20px;
	position: relative;
	margin: 0px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.animated-icon2 span, .animated-icon3 span {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}


#nav-icon.nav-dark span, #nav-icon-mob.nav-dark span {
    /* background-color: #000; */
    /* background-color: grey; */
	background-color: #01044F;
	border-radius: 0px !important;
}
.animated-icon2 span {
	background: #e3f2fd;
}

.animated-icon2 span:nth-child(1) {
	top: 0px;
}

.animated-icon2 span:nth-child(2) {
	top: 6px;
}

.animated-icon2 span:nth-child(3) {
	top: 6px;
}

.animated-icon2 span:nth-child(4) {
	top: 12px;
}

button.navbar-toggler .animated-icon2.open span {
    background: #fff;
}
/*
.animated-icon2.open span:nth-child(1) {
	top: 11px;
	width: 0%;
	left: 50%;
}

.animated-icon2.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(2), .animated-icon2.open span:nth-child(3) {
	top: 8px;
}

.animated-icon2.open span:nth-child(3) {
	top: 8px;
}

.animated-icon2.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
	top: 11px;
	width: 0%;
	left: 50%;
}
*/
.animated-icon2 span:nth-child(4) {
	top: 12px;
}

div#navbarSupportedContent23.active {
	background: #BA63FF;
	opacity: 1;
	visibility: visible;
	transition: 0.1s;
}

div#navbarSupportedContent23 {
	position: fixed;
	top: 0;
	height: 100vh !important;
	width: 100%;
	background: transparent; /* pink only while open (.active), so iOS Safari doesn't tint the status bar from the hidden menu */
	z-index: 2;
	overflow: hidden !important;
	transition: 1s;
	left: 0;
	opacity: 0;
	visibility: hidden;
	display: block !important;
}

.navbar-nav {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	margin: 0 auto;
	text-align: center;
}

.navbar-nav .nav-link {
	color: #e3f2fd;
	font-size: 30px;
	padding: 10px;
}

.navbar-nav .nav-link:hover {
	color: #ffffff;
}

.noScroll {
	overflow: hidden;
}
button:focus {
outline: 0px dotted !important;
outline: 0px auto -webkit-focus-ring-color !important;
}
/* navbar button */




/* about slider */
.contain {
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
  }
 
 
 /********** PORTFOLIO SINGLE NEWS ************/
 
 /* The site's .portfolio-two .two-columns is flex with justify-content: center
			   AND .two-text has min-height: 50vw, which is what was pushing the title
			   to the middle of an oversized column while the list sat near the top of
			   its shorter column. Solution: shrink both columns to natural height,
			   anchor content to the top, and give them matching top/bottom padding so
			   the title-top and list-top sit at the same Y. */
			#portfolio-single .portfolio-news .two-columns,
			#portfolio-single .portfolio-news .two-columns.two-text {
				min-height: 0 !important;
				height: auto !important;
				justify-content: flex-start !important;
				padding-top: 120px !important;
				padding-bottom: 180px !important;
			}
			/* Bigger heading just for this block; padding-top matches the first
			   list item so the title baseline visually aligns with it */
			#portfolio-single .portfolio-news .two-columns h3 {
				font-size: 35px !important;
				margin-top: 0 !important;
				padding-top: 20px !important;
			}

			/* Override the site's ul li pill styling (.two-columns ul li is set to
			   inline-block with border, border-radius: 25px, font-size: 12px) so this
			   particular list renders as plain stacked text */
			#portfolio-single .portfolio-news .two-columns .news-list,
			#portfolio-single .portfolio-news .two-columns .news-list li {
				background: none !important;
				background-color: transparent !important;
				border: 0 none !important;
				border-radius: 0 !important;
				box-shadow: none !important;
			}
			#portfolio-single .portfolio-news .two-columns .news-list {
				list-style: none !important;
				padding: 0 !important;
				margin: 0 !important;
			}
			#portfolio-single .portfolio-news .two-columns .news-list li {
				display: block !important;
				color: rgba(1, 4, 79, 1);
				font-family: "Roboto", sans-serif !important;
				font-weight: 300 !important;
				font-size: 20px !important; /* matches .two-columns p body size */
				line-height: 1.4 !important;
				padding: 20px 0 !important; /* matched on the title h3 above */
				margin: 0 !important;
			}

			/* Divider only between items: top border on every item except the first */
			#portfolio-single .portfolio-news .two-columns .news-list li:not(:first-child) {
				border-top: 1px solid rgba(1, 4, 79, 0.15) !important;
			}

			#portfolio-single .portfolio-news .two-columns .news-list li a {
				display: block;
				text-decoration: none;
				color: inherit;
			}
			#portfolio-single .portfolio-news .two-columns .news-list li a:hover {
				opacity: 0.6;
			}

			@media(max-width: 1100px) {
				#portfolio-single .portfolio-news .two-columns h3 {
					font-size: 28px !important; /* same 80% scale as the site's other h3s at this breakpoint */
				}
				#portfolio-single .portfolio-news .two-columns .news-list li {
					font-size: 16px !important; /* matches the responsive .two-columns p */
				}
			}
			




/******************** ABOUT – GOOGLE RATING ******************/

.about-section-5 .about-title-slide {
	padding-right: 40px; /* keeps the title clear of the first review on desktop */
	}

.about-section-5 .about-rating {
	margin: -10px 0 20px 0;
	font-size: 14px;
	}
	.about-section-5 .about-rating a {
		color: #01044F;
		}
	.about-section-5 .about-rating a:hover {
		opacity: 0.6;
		}
	.about-section-5 .about-rating-stars {
		color: #BA63FF;
		margin-right: 6px;
		letter-spacing: 2px;
		}