/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Nov 03 2022 | 11:39:08 */
.page-template-template-about-php .scroll-down.hide-mob {
	position: relative;
	margin: 0;
}

.page-template-template-about-php  .banner-icons {
    gap: 5%;
}

.page-template-template-about-php .hero-section .text-content .title {
    font-size: 13.0208333333vw;
    line-height: 9.8958333333vw;
	text-align: left;
}

.page-template-template-about .banner-bottom-row {
		align-items: center;
	}
	.page-template-template-about .scroll-down {
		align-items: center;
		display: flex;
	}
	.scroll-down {
		position: unset !important;
    	margin: 0 !important;
	}

#about-mob-page-title{
	writing-mode: vertical-rl;
    position: absolute;
    left: 20px;
    bottom: 50px;
    height: 82px;
    text-transform: uppercase;
    font-size: 0.688rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

#about-two-col-section {
    position: relative;
}
#about-two-col-section .col {
    padding: 0 50px;
    display: flex;
    justify-content: center;
    min-height: 405px;
    align-items: center;
}
.col.half-width.right.background-grey {
    padding: 0 !important;
}
	#about-two-col-section .col p {
		font-size: 2.375rem;
		max-width: 430px;
		line-height: 1;
	}
	#about-two-col-section .stamp-holder svg{
		fill: black;
	}
#our-values {
    position: relative;
    z-index: 800;
}
	.values{
		padding: 75px 0;
	}
	@media screen and (min-width:1001px){
		.values{
			overflow:visible !important;
		}
	}
		.values .row {
			max-width: 850px;
			margin: 0 auto;
		}
@media(min-width: 1100px) {
	.values .row {
		max-width: 980px;
	}
}
@media(min-width: 1380px) {
	.values .row {
		max-width: 1200px;
	}
}
			.values svg{
				fill: white;
				position: relative;
				z-index: 700;
			}
			.values .col {
				text-align: center;
				position:relative;
			}
				.values .col p {
					margin: 10px 0 0;
					position: relative;
					z-index: 700;
				}
				.values .card p.center-text{
					font-size: 0.813rem;
				}
			.values .card-info {
				position: absolute;
				top: -35px;
				align-items: end;
				padding: 245px 10% 25%;
				text-align: left;
				z-index: 500;
				width: 180%;
				left: -38%;
				justify-content: center;
				display: none;
			}
			.values .card:hover .card-info {
				display:flex;
			}
			.card:nth-child(2):hover svg, .card:nth-child(4):hover svg {
				fill: black;
			}
			.card:nth-child(2):hover p, .card:nth-child(4):hover p {
				color: black;
			}
				.values .card-info p { 
					font-size: 1.5rem;
					line-height: 1.6rem;
					max-width: 300px;
				}
@media(min-width: 1100px) {
	.values .card-info {
		width: 180%;
    	left: -38%;
	}
	.values .card-info p { 
		font-size: 1.5rem;
		max-width: 400px;
	}
	
	
	.values .card-info {
		display: flex!important;
		pointer-events: none;
		opacity: 0;
		transition: all 150ms ease-in-out;
	}
	.values .card:hover .card-info {
		opacity: 1;
	}
}
@media(min-width: 1200px) {
	/*
	.values .card-info {
		width: 220%;
		left: -58%;
	}
	*/
	.values .card-info p {
		font-size: 1.5rem;
		max-width: 440px;  
	}
}
		.scrollbar.white {
			height: 8px;
			background: rgba(255,255,255,0.2);
			margin-top: 25px;
			margin-left: 50px;
			width: calc(100% - 100px);
    		overflow: hidden;
		}
		@media screen and (min-width:1001px){
			.scrollbar.white{
				display:none;
				height: 0;
			}
		}
			.scrollbar.white .handle {
					background: #fff;
					height:8px;
				}

@media screen and (max-width:1000px){
	.values .row {
		flex-wrap: nowrap;
	    max-width: none;
	    padding: 0 50px;
		margin-left: -10px;
	}
		.values .card {    
			padding: 4%;
			min-width: 285px;
			margin: 0 10px;
		}
		.values .card:nth-child(1), .values .card:nth-child(3) {
			background-color: var(--coral-color);
		}
		.values .card:nth-child(2), .values .card:nth-child(4) {
			background-color: white;
		}
			.values .card:nth-child(2) svg, .values .card:nth-child(4) svg {
				fill: black;
			}
			.values .card:nth-child(2) h4.center-text, .values .card:nth-child(4) h4.center-text{
				color: black;
			}
			.values .card-info {
				position: relative;
				display: flex;
				padding: 0 0 40px 0;
				width: auto;
				left: unset;
				top: unset;
				text-align: center;
				max-width: 100%;
				
				
			}
				.card-info.background-white{
					color: black;
				}
				.values .card-info p {
					font-size: 0.9rem;
					line-height: 1.3;
				}
}

#about-meet-team {
    align-items: center;
	justify-content: center;
}
	.col.one-half {
		width: 50%;
	}
	#about-meet-team .col.one-half {
		height: 800px;
		display: flex;
		align-items: center;
		position:relative;
		padding: 30px;
	}
		#about-meet-team-spark {
			position: absolute;
			top: 20px;
			right: 20px;
			fill: var(--coral-color);
		}
		#about-meet-team .text-holder {
			max-width: 385px;
			margin: 0 auto;
		}
	#about-meet-team .col.one-half:nth-child(1) {
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: bottom !important;
		position: relative;
	}
		#about-meet-team .col.one-half:nth-child(1):before {
			content: '';
			width: 50%;
			height: 50%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: #FF6A55;
			mix-blend-mode: multiply;
		}
		#about-meet-team .col.one-half:nth-child(1):after {
			content: '';
			width: 50%;
			height: 50%;
			position: absolute;
			top: 0;
			right: 0;
			background: #FF6A55;
			mix-blend-mode: multiply;
		}
		#about-meet-team p {
			max-width: 385px;
			margin: 0 auto;
		}
		#about-meet-team p:nth-child(1) {
			font-size: 2.375rem;
			line-height: 1;
			margin-bottom: 20px;
		}
		#about-meet-team p a {
			color: black;
		}
			#about-meet-team p a:hover {
				color: var(--coral-color);
			}

@media screen and (max-width:700px){
	#about-meet-team .col.one-half {
		width: 100%;
		height: 100%;
		min-height: 400px;
	}
	#about-meet-team-spark {
		height: auto;
		width: 135px;
		top: -68px;
		right: -31px;
	}
	#about-meet-team .text-holder {
		padding: 0 20px;
	}
}

#london-studio {
    position: relative;
}
#london-studio p {
	font-size: 2.375rem;
	line-height: 1.1em;
	padding-right: 26%;
	margin-bottom:0;
}

#london-studio p.last-p {
	margin-bottom:45px;
}

#london-studio h2 {
	font-size: 11rem;
	line-height: 0.8;
	margin: 0;
	text-transform: uppercase;
}
#london-studio p.uppercase.text-coral {
	font-size: 11rem;
	margin: 0;
	line-height:0.8;
	font-weight: 700;
}
#london-studio svg{
	fill: var(--coral-color);
}
#london-studio button {
	margin-top: 40px;
}
#london-studio button svg{
	fill: white;
}

#london-studio .col.one-quarter {
	text-align: right;
	display: flex;
    flex-direction: column;
	position:right;
	z-index: 300;
}
	@media screen and (min-width: 1450px){
		#london-studio .col.one-quarter.hide-mob img{
			height: 400px;
			width: auto !important;
			object-fit: cover;
    		object-position: center;
		}
	}

#london-studio .col.three-quarters {
	padding-left: 50px;
    justify-content: center;
    display: flex;
    flex-direction: column;
	
}

	

@media screen and (max-width: 1170px){
	#london-studio .col.three-quarters {
		padding: 0;
		width: 100%;
	}
	#london-studio .hide-mob{
		display:none !important;
	}
	
	#london-studio .show-mob  {
		display: block !important;
		position: relative;
		margin: 15% 0;
	}
	#london-studio h2{
		padding-top: 50px;
	}
	#london-studio h2, #london-studio p {
		padding-left: 50px !important;
    	padding-right: 50px !important;
	}
	#london-studio button {
		margin-left: 50px;
		margin-bottom: 50px;
	}
}

#london-studio .show-mob div {
    display: flex;
	position: relative;
}
	#london-studio .show-mob div img {
		width: 50%;
		position:relative;
		z-index:300;
		    object-fit: cover;
    object-position: center;
	}

#london-studio svg.rotates {
    position: absolute;
    bottom: 199px;
    right: 10%;
    z-index: 200;
    height: auto;
    width: 411px;
}

@media screen and (max-width:1400px){
	#london-studio svg.rotates {
		right: 5%;
	}
}

#spark-top {
    top: -23%;
}

#spark-top, #spark-bottom {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    right: unset !important;
    bottom: unset !important;
}

#spark-top {
    top: -23%;
}

#spark-bottom {
    bottom: -24% !important;
}

@media screen and (max-width:700px){
	.page-template-template-about-php .hero-section .text-content .title-xxl, .page-template-template-about-php .hero-section .text-content .title {
		font-size: 33px;
		line-height: 37px;
	}
	h2.title-xxl.ani-title.heading-1, .page-template-template-about-php .hero-section .text-content .title {
		text-align: left;
	}
	.values {
		padding: 50px 0;
	}
	#about-two-col-section .col p {
		font-size: 2.188rem;
	}
	.values .card {
		padding: 25px;
		min-width: 285px;
	}
	.values svg {
		max-width: 110px;
	}
	#about-meet-team .text-holder {
		max-width: 314px;
	}
	#about-meet-team p:nth-child(1) {
		font-size: 2.25rem;
	}
	#about-meet-team p.arrow-link.uppercase {
		font-size: 0.688rem;
	}
	#about-meet-team .text-holder .arrow-link svg {
		height: auto;
		width: 11px;
	}
	#london-studio h2, #london-studio p.uppercase.text-coral {
		font-size: 2.563rem;
		line-height: 1.1;
	}
	
	#london-studio p {
		padding: 0;
		font-size: 0.875rem;
		line-height:1.5;
	}
		#london-studio h2 br, #london-studio p.uppercase.text-coral br {
			display: none;
		}
}

@media(max-width: 375px) {
	.values .card-info p {
    max-width: 80%;
}
}