@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600&display=swap');

/*
Orion Electricals Ltd
#phone
07836760448
enquires@orionelectricalsltd.com
-----------------
Concorde House
Grenville Place
London
NW7 3SA
------------------
electrical
electricians
Additional sockets
18th Edition Ammendment 2 Distribution Boards
Circuit breaker repairs
Complete and partial rewiring
#servicefive
------------------
15/03/2023
orionelectricalltd.co.uk
------------------
<img src="media/images/logo.png" alt="">
 */
:root{
	--grey100: #E5EBF0;
	--grey300: #96A0B5;
	--grey600: #6D7D93;
	--grey800: #121F3E;


	--accent-h: 357;
	--accent-s: 86%;
	--accent-l: 53%;

	

	--accent100: hsl(calc(var(--accent-h) + 1), 100%, 98%);
	--accent300: hsl(var(--accent-h), 100%, 94%);
	/*--accent600: hsl(15, 100%, 47%);*/
	--accent600: hsl(var(--accent-h), var(--accent-s), var(--accent-l));

	--lightbg: #f8fafb;
	--lighterbg: #E4EDF1;

	--mediumbg: #403A3C;
	--darkbg: #151314;


	--mainFont: 'Inter', sans-serif;
	--titleFont: 'Manrope', sans-serif;

}

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

body{
	font-family: var(--mainFont);
}


/* Text */

h1,h2,h3,h4 {
	font-family: var(--titleFont);
	letter-spacing: -0.05em;
	font-weight: 600;
	line-height: 1.1;
	color: var(--grey800);
}

h1{
	font-size: 3.5rem;
	margin-bottom: 2rem;
}
h2{
	font-size: 2rem;
	margin-bottom: 2rem;
	line-height: 1.2;
}
h2.big{
	font-size: 2.5rem;
	margin-bottom: 2rem;
}
h3{
	font-size: 2rem;
	margin-bottom: 2rem;
	line-height: 1.2;
}
h4{
	font-size: 1.5rem;
	line-height: 1.2;
}
h5{
	font-size: 1.5rem;
	line-height: 1.2;
}

p{
	letter-spacing: -0.01em;
	margin: 1rem 0;
	line-height: 1.7;
	color: #96a0b5;
}

strong{
	position: relative;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="13.82" viewBox="0 0 300 13.82"><path d="M3.15,9.24C22.42,9,41.68,8.37,61,8s38.58-.55,57.87-.43q57.54.36,115,3.66c10.67.6,21.34,1.43,32,1.76,5.43.17,10.84.59,16.28.61s10.84.3,16.26.24c1.76,0,2.26-2.6.43-3-4.71-.91-9.49-1.5-14.23-2.24S274.88,7.22,270,6.77s-9.68-1-14.54-1.45c-4.66-.39-9.31-.74-14-1.05C222.21,3,203,2,183.69,1.29Q125.85-.72,68,.4C46.34.82,24.7,1.54,3.15,3.36A3.14,3.14,0,0,0,0,6.3,3.08,3.08,0,0,0,3.15,9.24Z" transform="translate(0 0)" fill="%23ee222b"/></svg>');
	background-position: 50% 100%;
	background-size: contain;
	background-repeat: no-repeat;
}

.darkbg strong{
	position: relative;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="13.82" viewBox="0 0 300 13.82"><path d="M3.15,9.24C22.42,9,41.68,8.37,61,8s38.58-.55,57.87-.43q57.54.36,115,3.66c10.67.6,21.34,1.43,32,1.76,5.43.17,10.84.59,16.28.61s10.84.3,16.26.24c1.76,0,2.26-2.6.43-3-4.71-.91-9.49-1.5-14.23-2.24S274.88,7.22,270,6.77s-9.68-1-14.54-1.45c-4.66-.39-9.31-.74-14-1.05C222.21,3,203,2,183.69,1.29Q125.85-.72,68,.4C46.34.82,24.7,1.54,3.15,3.36A3.14,3.14,0,0,0,0,6.3,3.08,3.08,0,0,0,3.15,9.24Z" transform="translate(0 0)" fill="white"/></svg>');
	background-position: 50% 100%;
	background-size: contain;
	background-repeat: no-repeat;
}

/* Sections */

section, main{
	padding: 10rem 5vw;
	position: relative;
	overflow: hidden;
}


footer{
	padding: 0 5vw;
	position: relative;
	overflow: hidden;
}

@media screen and (max-width: 39.9375em) {
	section, main{
		padding: 5rem 1vw;
	}

	footer{
		padding: 0 1vw;
	}
}

/* Backgrounds */

.lightbg{
	background-color: var(--lightbg);
	/*background: radial-gradient(
    circle at top left,
    var(--accent100), var(--lightbg)
  )*/
}

.lighter-accentbg{
	background-color: var(--accent100);
}

.lighter-accentbg p{
	color: var(--grey800);
}

.lighter-accentbg i{
	color: var(--accent600);
}


.darkbg{
	background-color: var(--darkbg);
	background: radial-gradient(
    circle at top right,
    var(--mediumbg), var(--darkbg)
  )
}

.darkbg h2{
	color: white;
}

.darkbg h3{
	color: white;
}

.darkbg p{
	color: white;
	opacity: 0.65;
}



/* Logo */

.logo{
	margin-right: 4vw;
}

.logo img{
	max-height: 70px;
}

.footer-logo {
	max-width: 180px;
	filter: brightness(0) invert(1);
}

/* Nav */

.top-bar{
	padding: 0 3vw;
	height: 6.25rem;
}

.top-bar-container{
	height: 100%;
}

.menu{
	display: flex;
}

nav{
	display: flex;
	align-items: center;
}

nav ul li{
	display: inline-block;
	position: relative;
	border-radius: 4px;
	line-height: 1.5rem;
}

nav ul li a{
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: -0.01em;
	color: var(--grey800);
	transition: color 0.3s ease;
}

nav ul li a:hover {
	color: var(--accent600);
}


.top-bar-mobile{
	padding: 0.5rem 1rem;
	padding-right: 0.5rem;
	color: var(--grey800);
	text-decoration: none;
	font-size: 14px;
}

.top-bar-phone{
	padding: 0.5rem 1rem;
	padding-left:  0;
	color: var(--grey800);
	text-decoration: none;
	font-size: 14px;
}

.top-bar-cta{
	border: 1px solid var(--accent300);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--accent600);
	font-weight: 600;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	transition: ease 0.5s all;
}

.top-bar-cta:hover{
	background-color: var(--accent300);
}

.toggler{
	display: none;
}

/* Sub Menu */
nav ul li > a:after {
	content: '\f078';
	color: var(--accent600);
	margin-left: 6px;
	width: 0;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 500;
	font-size: 10px;
}

nav ul li > a:only-child::after { display: none;}

/*.sub-menu{
	position: absolute;
	top: 100%;
	left: 0;
	width: auto;
	white-space: nowrap;
	padding: 1.5rem 2rem 1.5rem 1.5rem;
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);

	opacity: 0;
	transform-origin: top left;
	transform: scale(0.5);
	transition: ease 0.3s;
	pointer-events: none;
	background-color: var(--lightbg);
	border-radius: 5px;
}

nav ul li:hover > .sub-menu{
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.sub-menu li{
	display: block;
}
*/

nav ul li:hover .sub-menu{
	display: block;
}
.sub-menu{
	text-align: left;
	border: none;
	background-color: var(--lightbg);
	overflow: hidden;
	display: none;
	border-radius: 5px;
	left: 0px;
	position: absolute;
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);
	padding: 1.5rem 2rem 1.5rem 1.5rem;
	z-index: 100;
}
.sub-menu li a{
	/*line-height: 32px;*/
	display: block;
	text-transform: initial;
}
.sub-menu li a:hover{
	color: var(--accent600);
}
.sub-menu li{
	clear: both;
	width: 100%;
	display: block;
	white-space: nowrap;
}

@media screen and (max-width: 64.9375em) {
	nav.shown{
		pointer-events: initial;
		opacity: 1;
	}
	nav{
		position: fixed;
		top: 0px;
		left: 0;
		display: flex;
		align-items: center;
		height: 100vh;
		width: 100%;
		opacity: 0;
		z-index: 998;
		text-align: left;
		padding: 0 1.15rem;
		text-align: left;
		overflow: hidden;

		-webkit-transition:ease 0.4s;
		-o-transition:ease 0.4s;
		transition:ease 0.4s;
		background-color: var(--darkbg);
		pointer-events: none;
	}
	
	nav ul li{display: block;}
	nav ul{
		z-index: 10;
		position: relative;
		padding-top: 90px;
		padding-bottom: 90px;
	}
	nav ul li a{
		line-height: 2;
		font-size: 1.25rem;
		display: block;
		cursor: pointer;
		color: white!important;
	}

	nav ul li:hover .sub-menu{
		display: none;
	}
	.sub-menu li a{
		line-height: 30px;
		font-size: 18px;
		font-weight: 400;
		opacity: 0.8;
	}
	.sub-menu{
		padding: 10px 5px;
		background-color: transparent;
		position: relative;
		box-shadow: none;
	}
	

	/*.sub-menu{
		position: relative;
		display: block;
		top: 0;
		text-align: inherit;
		padding: 10px;
		background-color: unset;
		opacity: 1;
		width: 100%;
		transform: scale(1);
		pointer-events: auto;
		border-top: 0px;
		box-shadow: 0 0 80px rgba(0,0,0,0.0);
		display: none;
	}*/

	.toggler{
		height: 26px;
		width: 32px;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		cursor: pointer;
	}

	.toggler .line {
		display: block;
		height: 4px;
		width: 100%;
		border-radius: 10px;
		background: var(--grey800);
	}

	.toggler .line1 {
		transform-origin: 0% 0%;
		transition: transform 0.4s ease-in-out;
	}

	.toggler .line2 {
		transition: transform 0.2s ease-in-out;
	}

	.toggler .line3 {
		transform-origin: 0% 100%;
		transition: transform 0.4s ease-in-out;
	}

	.toggler.menu-visible .line1 {
		transform: rotate(45deg);
		background: white;
	}

	.toggler.menu-visible .line2 {
		transform: scaleY(0);
		background: white;
	}

	.toggler.menu-visible .line3 {
		transform: rotate(-45deg);
		background: white;
	}
}
@media screen and (max-width: 39.9375em) {
	
	
}

/* Header */

header{
	position: relative;
}

.home-header{
	padding-bottom: 10rem;
}

.header-banner{
	padding: 0.75rem 0;
	display: flex;
	justify-content: center;
}

.banner-text{
	font-size: 0.75rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	margin: 0;
}

.header-banner i{
	margin-right: 0.75rem;
	font-size: 20px;
}

.home-header .header-content{
	padding: 0 5vw;
}

.home-header .header-content p{
	font-size: 1.125rem;
	margin-bottom: 2.5rem;
}

.home-header .header-content-left{
	padding: 6.5rem 0;
}



.home-header .header-image-container{
	height: 100%;
	min-height: 20rem;
	width: 100%;
	position: relative;
	overflow: hidden;
	
	border-radius: 8px;
}

.home-header .header-image-container img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	border-radius: 8px;
}

.header-list li{
	list-style: none;
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
}

.header-list li:last-of-type{
	margin-bottom: 2.5rem;
}

.header-list li i{
	height: 2rem;
	width: 2rem;
	border-radius: 100%;
	background-color: var(--accent100);
	color: var(--accent600);
	margin-right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.other-header-content{
	width: 100%;
	padding: 15vh 0;
	/*height: 40vh;*/
	position: relative;
	text-align: center;
}

.other-header-content h1{
	color: white;
	z-index: 10;
	
}

.other-header-content::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: radial-gradient(
    circle at top right,
    var(--mediumbg), var(--darkbg)
  	);
  	opacity: 0.5;
  	pointer-events: none;
  	z-index: -1;
}

.other-header-content img{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	z-index: -2;
	pointer-events: none;
}

@media screen and (max-width: 64.9375em) {
	.home-header .header-content-left{
		padding: 3rem 0;
	}
}

@media screen and (max-width: 39.9375em) {
	.home-header{
		padding-bottom: 5rem;
	}

	.home-header .header-content{
		padding: 0 1vw;
	}
	.home-header .header-content-left{
		padding: 2rem 0;
	}
	
}

/*.header-list li::before{
	content: '\f807';
	font-family: 'Font Awesome 5 Pro';
	height: 2rem;
	width: 2rem;
	border-radius: 100%;
	background-color: var(--accent100);
	color: var(--accent600);
	margin-right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}*/

/* Why Choose Us */

.our-services{
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-top: 0;
}

/* Services List */

.services-list ul{
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
}

.services-list ul li{
	list-style: none;
	display: flex;
	align-items: center;
}

.services-list ul li::before{
	content: '\f00c';
	font-family: 'Font Awesome 5 Pro';
	height: 2rem;
	width: 2rem;
	border-radius: 100%;
	background-color: var(--accent100);
	color: var(--accent600);
	margin-right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.services-list.darkbg ul li{
	color: white;
}

.services-list.darkbg ul li::before{
	content: '\f00c';
	font-family: 'Font Awesome 5 Pro';
	height: 2rem;
	width: 2rem;
	border-radius: 100%;
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--accent600);
	margin-right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 39.9375em) {
	.services-list ul{
		grid-template-columns: 1fr;
		grid-row-gap: 1rem;
	}
}

.content-label{
	display: inline-block;
	padding: 1rem 2rem;
	background-color: var(--accent100);
	border-radius: 10px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: -0.04em;
	margin-left: -40%;
}

.content-subtitle{
	display: inline-block;
	font-size: 0.75rem;
	color: var(--accent600);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.home-content{
	padding-bottom: 15rem;
	z-index: 3;
}

.dual-images{
	position: relative;
	min-height: 18rem;
}

.dual-image-container{
	position: absolute;
	height: 80%;
	width: 47.5%;
	
}

.dual-image-container img{
	position: absolute;
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.dual-image-container-left{
	left: 0;
	bottom: 0;
	margin-bottom: 2rem;
	border-radius: 5px;
}

.dual-image-container-right{
	right: 0;
	top: 0;
	margin-top: 2rem;
	border-radius: 5px;
}

.image-container{
	min-height: 18rem;
	height: 100%;
	width: 100%;
	position: relative;
	border-radius: 5px;
}

.image-container img{
	position: absolute;
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.rw-content .image-container{
	border-radius: 5px;
	
}

.rw-content .image-container img{
	border-radius: 5px;
}

.images-rel{
	position: relative;
}

@media screen and (max-width: 64.9375em) {
	.images-rel{
		margin-bottom: 2.5rem;
	}
}


@media screen and (max-width: 39.9375em) {
	
}

/* Cards */

.images-card {
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	padding: 0.875rem;
	background-color: white;
	border-radius: 8px;
	display: flex;
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);
	z-index: 2;
}

.images-card span{
	display: block;
	letter-spacing: -0.05em;
	font-size: 1.1rem;
}

.images-card a{
	font-size: 0.875rem;
	margin: 0;
	color: var(--grey300);
}

.tertiary-button i{
	margin-left: 0.5rem;
	font-size: 0.875rem;
}


.images-card-center {
	position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
	padding: 0.875rem;
	background-color: white;
	border-radius: 8px;
	display: flex;
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);
	z-index: 2;
}

.images-card-center span{
	display: block;
	letter-spacing: -0.05em;
	font-size: 1.1rem;
}

.images-card-center a{
	font-size: 0.875rem;
	margin: 0;
	color: var(--grey300);
}

.images-card-left {
	position: absolute;
    top: 100%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	padding: 0.875rem;
	background-color: white;
	border-radius: 8px;
	display: flex;
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);
	z-index: 2;
}

.images-card-left span{
	display: block;
	letter-spacing: -0.05em;
	font-size: 1.1rem;
}

.images-card-left a{
	font-size: 0.875rem;
	margin: 0;
	color: var(--grey300);
}

@media screen and (max-width: 64.9375em) {
	.images-card-center {
		
	    top: 0;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}
	.images-card-left {
		
	    top: 100%;
	    left: 50%;
	    transform: translate(-50%,-50%);
		
	}
}

/* Home Testimonials */

.rw-container{
	position: relative;
	margin-top: -200px;
	padding-top: 0;
	z-index: 3;
}

.rw-top{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.rw-container h2{
	color: white;
}

.rw-content{
	background-color: white;
	height: 300px;
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);
	z-index: 3;
	margin-bottom: 1rem;
	border-radius: 5px;
}

/*.testimonials-bg{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	background-color: var(--accent600);
	z-index: 1;
}*/

/* Our Process */

.op-container{
	padding: 2rem 2rem;
	/*box-shadow: 0 32px 64px rgb();*/
	/*box-shadow: 9px 6px 56px 0 rgb(14 56 118 / 10%);*/
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);
	border-radius: 15px;
	/*box-shadow: 0px  rgba(31, 84, 133, 0.08);*/
	min-height: 100%;
}

.op-top{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 2rem;
}

.icon-container{
	height: 3.5rem;
	width: 3.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	background-color: var(--accent100);
	margin-right: 1rem;
	
}

.icon-container i{
	font-size: 1.5rem;
	color: var(--accent600);
}

/* Contact banner */

.contact-banner{
	padding: 3rem 3rem;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
}

/*.contact-banner .button-secondary{
	border-color: rgba(255, 255, 255, 0.2);
	color: white;
}*/

@media screen and (max-width: 39.9375em) {
	.contact-banner{
		padding: 3rem 1rem;
	}
}

/* Footer */

.footer-top{
	padding-top: 5rem;
	padding-bottom: 2.5rem;
}

.footer-bottom p{
	font-size: 12px;
	font-weight: 600;
	margin-right: 2rem;
}

footer h5{
	color: white;
	font-size: 1rem;
	margin-bottom: 1.5rem;
}

footer ul{
	list-style: none;
}

footer li{
	margin-bottom: 0.5rem;
}

footer a{
	color: white;
	text-decoration: none;
}

footer address p{
	margin-bottom: 0.5rem;
	margin-top: 0;
	color: white;
	font-style: normal;
	line-height: inherit;
}

.footer-left{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.social-icons{
	display: inline-block;
	margin-right: 1rem;
	transition: ease 0.3s;
}

.social-icons:hover{
	color: var(--accent600);
}



.footer-outside{
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-outside i{
	margin-right: 0.5rem;
	opacity: 1!important;
}

@media screen and (max-width: 64.9375em) {
	.footer-left{
		margin-bottom: 1rem;
	}
}

/* Buttons */

.button-primary{
	display: inline-block;
	padding: 1.25rem 2.25rem;
	background-color: var(--accent600);
	border-radius: 8px;
	font-size: 0.875rem;
	text-decoration: none;
	color: #ffffff;
	font-weight: 500;
	line-height: 20px;
	margin-right: 1rem;
	margin-bottom: 2rem;
	transition: ease 0.3s;
}

.button-primary i{
	margin-left: 1.5rem;
	transition: ease 0.3s;
}

.button-primary:hover{
	background-color: hsl(var(--accent-h), 100%, 30%);
}

.button-primary:hover > i{
	transform: translateX(5px);
}


.button-secondary{
	border: 1px solid var(--accent300);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--accent600);
	font-weight: 600;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	transition: ease 0.5s all;
	display: inline-block;
}

.button-secondary:hover{
	background-color: var(--accent300);
}

.button-margin{
	margin-top: 2rem;
}

/* Blockquotes */

blockquote{
	padding: 2rem 2rem;
	/*box-shadow: 0 32px 64px rgb();*/
	/*box-shadow: 9px 6px 56px 0 rgb(14 56 118 / 10%);*/
	box-shadow: 34px 34px 96px -24px rgb(14 56 118 / 10%);
	border-radius: 15px;
}

.review-title{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 2rem;
}

.author{
	color: var(--accent600);
	
	margin-top: 1.5rem;
	font-size: 0.875rem;
}

/* Galleries */

.gallery{
	display: block;
}
.gallery .columns img{
	margin: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.gallery .columns .caption{
	position: absolute;
	pointer-events: none;
	color: #444;
	width: calc(100% - 20px);
	background-color: rgba(255,255,255,0.6);
	bottom: 10px;
	padding: 12px;
	left: 10px;
	font-size: 13px;
}
.gallery .columns a{
	display: block;
}

.gallery .columns{
	position: relative;
	overflow: hidden;
	width: 25%;
	padding: 20px;
	float: left;
}
.gallery .columns:nth-child(10n + 6){
	float: right;
	width: 50%;
}
.gallery .columns:nth-child(10n + 1){
	width: 50%;
}
@media screen and (max-width: 39.9375em) {
	.gallery .columns:nth-child(3n + 1){
		width: 100%;
	}
	.gallery .columns:nth-child(3n + 2),.gallery .columns:nth-child(3n + 3){
		width: 50%;
	}
}

/* Contact */

.contact-left{
	height: 100%;
}

.contact-top{
	margin-bottom: 5rem;
}

.contact-bottom .op-top{
	margin-bottom: 1rem;
}

.contact-deets-bottom{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contact-deets-bottom a{
	margin: 1rem 0;
	color: var(--grey300);
	display: block;
}

.contact-address{
	margin-bottom: 1.5rem;
}

@media screen and (max-width: 39.9375em) {
	.contact-phone{
		margin-bottom: 1.5rem;
	}
	.contact-right{
		margin-top: 5rem;
	}
}


/* Contact Form */

/*.contact-form{
	overflow: auto;
	width: 100%;
	padding: 0;
	position: relative;
}*/

.contact-form label{
	float: left;
	display: block;
	font-size: 12px;
	position: relative;
	padding: 0;
	text-transform: uppercase;
	color: var(--lightbgheadings);
	opacity: 0.6;
	font-weight: 600;
	width: 100%;
	margin: 0.5rem 0;
}

.contact-form input, .contact-form select, .contact-form textarea{
	width: 100%;
	color: var(--lightbgheadings);
	padding: 1rem;
	background-color: var(--lightbg);
	border: 0;
	font-weight: 600;
	border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}

.contact-form textarea{
	min-height: 150px;
	padding-left: 1rem;
	resize: none;
}
.contact-form option{
	/*color: var(--dark)!important;*/
}

.contact-form option:disabled{
	opacity: 0.2;
}

input[type=submit]{
	display: inline-block;
	width: initial;
	padding: 1.25rem 2.25rem;
	background-color: var(--accent600);
	border-radius: 8px;
	font-size: 0.875rem;
	text-decoration: none;
	color: #ffffff;
	font-weight: 500;
	line-height: 20px;
	margin-right: 1rem;
	margin-bottom: 2rem;
	transition: ease 0.3s;
	cursor: pointer;
	margin-top: 2rem;
}

input[type=submit]:hover{
	background-color: hsl(var(--accent-h), 100%, 30%);
}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
	border-bottom: 1px solid rgba(255, 255, 255, 1.0);
	outline: none!important;
	transition: ease 0.3s;
}

.contact-form textarea:focus{
}

::-webkit-input-placeholder { color: var(--lightbgp)!important;font-weight: 400;}
::-moz-placeholder { color: var(--lightbgp)!important;font-weight: 400;}
:-ms-input-placeholder { color: var(--lightbgp)!important;font-weight: 400;}
:-moz-placeholder { color: var(--lightbgp)!important;font-weight: 400;}

/* Map */

.map iframe{
	height: 30rem;
	border-radius: 15px;
	margin-top: 10rem;
}



@media screen and (max-width: 39.9375em) {
	.map iframe{
	margin-top: 5rem;
	height: 20rem;
}
}

.accreds img{
	display: inline-block;
	margin-right: 1rem;
	margin-top: 2rem;
	max-height: 150px;
}

/* Sliders */

.services-slider-slide{
	position: relative;
	min-height: 460px;
	background-color: blue;
	display: flex;
	padding: 2rem;
}

.services-slider-slide::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: radial-gradient(
    circle at top right,
    var(--mediumbg), var(--darkbg)
  	);
  	opacity: 0.4;
  	z-index: 1;
}

.services-slider-slide a{
	height: 100%;
	width: 100%;
	text-decoration: none;
	align-self: flex-end;
	color: white;
	z-index: 2;
}

.services-slider-slide h4{
	color: white;
}

.services-slider-slide img{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Flourishes */

.circles-center{
  position:absolute;
  left: 50%;
  bottom: 0;
}

.circles-right{
	position: absolute;
	bottom: 0;
	right: 0;
}

.circles-left{
	position: absolute;
	bottom: 0;
	left: 0;
}

.circles div:nth-child(1){
  opacity: 0.6;
  width: 420px;
  height: 420px;
}
.circles div:nth-child(2){
  opacity: 0.4;
  width: 560px;
  height: 560px;
}
.circles div:nth-child(3){
  opacity: 0.3;
  width: 720px;
  height: 720px;
}

.circles > div {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid var(--mediumbg);
    opacity: 0;
    background: linear-gradient(-90deg, var(--mediumbg) 0%, var(--darkbg) 100%);
    transition: opacity 480ms ease 0s;
}

.circles{
	pointer-events: none;
}

.circles-mob{
	display: none;
}

@media screen and (max-width: 64.9375em) {
	.circles-mob{
		display: initial;
	}
}



/* SVG Elements */



/* Hide */

.z2{
	z-index: 2;
}

.social-icons[href*="#"]{
	display: none!important;
}

/* Medium Display None */

@media screen and (max-width: 64.9375em) {
	.medium-dn{
		display: none;
	}
}

/* Small Display None */

@media screen and (max-width: 39.9375em) {
	.small-dn{
		display: none;
	}
}