/*
 * DTB Site Features
 *
 * Replaces the parts of Divi Pixel this site used, matched to how they
 * rendered with Divi Pixel's settings at the time of the switch.
 */

/* ===========================================================================
 * Preloader
 * Three copper rings expanding on white; faded out (1s) 300ms after the
 * page has loaded -- see site.js.
 * ======================================================================== */
.dtb-preloader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: #ffffff;
}
.dtb-preloader.is-done {
	animation: dtb-preloader-fade 1000ms ease forwards;
}
@keyframes dtb-preloader-fade {
	from { opacity: 1; }
	to   { opacity: 0; }
}
.dtb-preloader__rings {
	position: relative;
	transform: translateY(-25px);
}
.dtb-preloader__rings > div {
	position: absolute;
	top: -2px;
	left: -26px;
	width: 50px;
	height: 50px;
	border: 2px solid #d27849;
	border-radius: 100%;
	animation: dtb-preloader-ripple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
}
.dtb-preloader__rings > div:nth-child(1) { animation-delay: -.6s; }
.dtb-preloader__rings > div:nth-child(2) { animation-delay: -.4s; }
.dtb-preloader__rings > div:nth-child(3) { animation-delay: -.2s; }
@keyframes dtb-preloader-ripple {
	0%   { transform: scale(.1); opacity: 1; }
	70%  { transform: scale(1);  opacity: .7; }
	100% { opacity: 0; }
}

/* ===========================================================================
 * Browser scrollbar (Chrome, Edge, Safari)
 * ======================================================================== */
body::-webkit-scrollbar {
	width: 17px;
	background-color: #ffffff;
	outline: none;
}
body::-webkit-scrollbar-thumb {
	border-radius: 0;
	background-color: #2d3e58;
}
body::-webkit-scrollbar-track {
	border-radius: 0;
	background-color: #ffffff;
}

/* ===========================================================================
 * Header menu
 * ======================================================================== */
.et-menu-nav ul.et-menu li a,
#top-menu a {
	font-weight: 500;
}
.et-menu-nav ul.et-menu li:hover,
#top-menu li:hover {
	transition: all .3s ease-in-out;
}
.et-menu-nav ul.et-menu li a:hover,
#top-menu a:hover {
	color: #a75329;
	opacity: 1 !important;
}
.et-fixed-header ul#top-menu li a:hover {
	color: #a75329 !important;
}
#top-menu > li:last-of-type {
	padding-right: 0;
}

/* Sub-menus (none at present; kept so any added later look the same). */
header.et-l--header .nav li ul,
.nav li ul {
	border-radius: 5px !important;
}
#top-menu.nav li ul li.current-menu-item a,
#top-menu.nav li ul a,
.et-menu-nav ul.et-menu ul.sub-menu li a {
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
	transition: all .2s ease-in-out !important;
}

/* Menu position: links top-aligned with 75px above and below. */
@media screen and (min-width: 981px) {
	.et_header_style_left div#et-top-navigation {
		display: flex;
		align-items: flex-start;
		padding-top: 75px;
		padding-bottom: 0;
	}
	.et_header_style_left #et-top-navigation nav > ul > li > a {
		padding-bottom: 75px !important;
	}
	.et_header_style_left .et-fixed-header #et-top-navigation {
		padding-top: 20px !important;
		padding-bottom: 0 !important;
	}
	.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
		padding-bottom: 20px !important;
	}
	.et-menu li:not(.mega-menu) ul,
	#top-menu li:not(.mega-menu) ul { width: 240px !important; }
	.et-menu li li a,
	#top-menu li li a { width: 100% !important; }
	#top-menu li li,
	.et-menu li li { width: 100%; }
}
@media (max-width: 980px) {
	#main-header,
	#top-header {
		transition: transform .4s, opacity .4s ease-in-out, -webkit-transform .4s !important;
	}
}

/* ===========================================================================
 * Footer: hide Divi's bottom bar ("Designed by Elegant Themes")
 * ======================================================================== */
#footer-bottom {
	display: none;
}

/* Back-to-top button: a shorter slide (in from 40px, out by 60px) than
   Divi's full-width one, holding its end state. */
.et_pb_scroll_top {
	animation-fill-mode: forwards !important;
}
.et_pb_scroll_top.et-visible { animation-name: dtb-btt-in; }
.et_pb_scroll_top.et-hidden  { animation-name: dtb-btt-out; }
@keyframes dtb-btt-in {
	from { opacity: 0; transform: translate3d(40px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes dtb-btt-out {
	from { opacity: 1; }
	to   { opacity: 0; transform: translate3d(60px, 0, 0); }
}

/* ===========================================================================
 * Blog posts: Previous / Next Article
 * ======================================================================== */
.dtb-post-nav.et_pb_section {
	padding: 0;
	background-color: transparent;
}
.dtb-post-nav__row {
	margin: auto;
	padding: 20px 0 !important;
	border-top: 1px solid #f2f2f2;
}
.dtb-post-nav__prev,
.dtb-post-nav__next {
	display: flex;
	align-items: center;
	padding: 10px;
	border-radius: 50px;
	background-color: #f5f5f5;
	transition: all .5s ease-in-out;
}
.dtb-post-nav__prev { float: left; }
.dtb-post-nav__next { float: right; }
.dtb-post-nav__prev a,
.dtb-post-nav__next a {
	display: flex;
	align-items: center;
	padding: 0 5px;
	font-family: sans-serif;
	font-size: 15px;
	letter-spacing: 0;
	color: #2c3d49;
	transition: all .5s ease-in-out;
}
.dtb-post-nav .et-pb-icon {
	font-size: 20px !important;
	line-height: 0;
	vertical-align: middle;
}
.dtb-post-nav__prev .et-pb-icon { padding-right: 5px; }
.dtb-post-nav__next .et-pb-icon { padding-left: 5px; }
.dtb-post-nav__prev:hover,
.dtb-post-nav__next:hover {
	background-color: #2c3d49;
	cursor: pointer;
}
.dtb-post-nav__prev:hover a,
.dtb-post-nav__next:hover a {
	color: #ffffff;
	transition: all .3s ease-in-out;
}

/* ===========================================================================
 * Timeline ("Our Process")
 *
 * Desktop: cards alternate either side of a centre line, starting on the
 * left. Tablet and phone: the line runs down the left with every card to
 * its right. The grey line is the track; the navy line grows over it as the
 * page scrolls, and each circle turns navy once the line reaches it.
 * ======================================================================== */
.dtb-timeline {
	position: relative;
}
.dtb-timeline,
.dtb-timeline *,
.dtb-timeline *::before,
.dtb-timeline *::after {
	box-sizing: border-box;
}
.dtb-timeline__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 0;
	width: 2px;
	margin-left: -1px;
	background: #f2f3f3;
}
.dtb-timeline__line--active {
	bottom: auto;
	height: 0;
	background: #2c3d49;
}
.dtb-timeline__item {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}
.dtb-timeline__item:not(:last-child) {
	margin-bottom: 2.75%;
}
/* Odd items: card on the left. Even items: card on the right. (The two
   line divs come first, so the item count still starts on an odd number.) */
.dtb-timeline__item:nth-of-type(odd) { flex-direction: row-reverse; }
/* Desktop: card | 60px circle column with 16px either side | empty half. */
.dtb-timeline__item::before {
	content: "";
	flex: 0 0 calc(50% - 46px);
}
.dtb-timeline__marker {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 60px;
	align-items: center;
	justify-content: center;
	min-width: 0; /* the 69px circle overhangs the 60px column evenly */
	margin: 16px;
}
.dtb-timeline__icon {
	display: inline-flex;
	padding: 15px;
	border: 2px solid #d27849;
	border-radius: 100%;
	background-color: #ffffff;
	color: #2d3e58;
	font-family: ETmodules !important;
	font-size: 35px;
	font-weight: 400 !important;
	line-height: 35px;
	transition: color .3s, background-color .3s;
}
.dtb-timeline__icon::before {
	content: "\5b"; /* Divi's open circle */
}
.dtb-timeline__icon.is-active {
	background-color: #2c3d49;
	color: #ffffff;
}
.dtb-timeline__card {
	position: relative;
	flex: 0 0 calc(50% - 46px);
	padding: 30px;
	background-color: #f2f3f3;
}
/* The pointer from the card to the circle. */
.dtb-timeline__card::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	transform: translateY(-12px);
}
.dtb-timeline__item:nth-of-type(odd) .dtb-timeline__card::after {
	left: 100%;
	border-right-width: 0;
	border-left-color: #f2f3f3;
}
.dtb-timeline__item:nth-of-type(even) .dtb-timeline__card::after {
	right: 100%;
	border-left-width: 0;
	border-right-color: #f2f3f3;
}
.dtb-timeline__title {
	padding-bottom: 10px;
}
.dtb-timeline__text p:last-child {
	padding-bottom: 0;
}

/* Fade in as each card comes into view (only once the script is running). */
.dtb-timeline.is-ready .dtb-timeline__card {
	opacity: 0;
}
.dtb-timeline.is-ready .dtb-timeline__card.is-visible {
	animation: dtb-timeline-fade 1s both;
}
@keyframes dtb-timeline-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.dtb-timeline.is-ready .dtb-timeline__card { opacity: 1; animation: none; }
}

@media (max-width: 980px) {
	.dtb-timeline__line { left: 30px; }
	.dtb-timeline__item,
	.dtb-timeline__item:nth-of-type(odd) { flex-direction: row; }
	.dtb-timeline__item::before { display: none; }
	.dtb-timeline__item:not(:last-child) { margin-bottom: 30px; }
	.dtb-timeline__marker { margin: 16px 0; }
	/* Fill the width, but never narrower than the longest word -- the
	   heading stays unbroken on a phone, as it did before. */
	.dtb-timeline__card { flex: 1 1 0; }
	.dtb-timeline__item:nth-of-type(odd) .dtb-timeline__card::after {
		right: 100%;
		left: auto;
		border-right-width: 12px;
		border-left-width: 0;
		border-right-color: #f2f3f3;
		border-left-color: transparent;
	}
}