/*
-------------------------------------------------------------|
---           Custom Stylesheet for Core2Africa           ---|
---                      Frits Steyn                      ---|
-------------------------------------------------------------|
                                                       INDEX |
-------------------------------------------------------------|
- FONT IMPORT
- VARIABLES
- TYPOGRAPHY & RESETS
- HEADER
- FRONT PAGE
- FOOTER
- SECONDARY PAGE TEMPLATES
- CONTACT PAGE
- GRAPHIC
- RESPONSIVE
-------------------------------------------------------------|
                                                 FONT IMPORT |
-------------------------------------------------------------|
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
-------------------------------------------------------------|
                                                   VARIABLES |
-------------------------------------------------------------|
*/

:root {
	--color-red: #7f0900;
	--color-orange: #c15a03;
	--color-orange-medium: #d8aa74;
	--color-orange-light: #fef8e8;
	--color-blue-dark: #060b40;
	--color-grey: #666666;

	--fontsize-heading-title: 46px;
	--fontsize-heading-primary: 46px;
	--fontsize-heading-secondary: 32px;
	--fontsize-heading-tertiary: 24px;
	--fontsize-heading-quarternary: 18px;
	--fontsize-body-tiny: 12px;
	--fontsize-body-small: 14px;
	--fontsize-body-normal: 16px;
	--fontsize-body-large: 18px;
	--fontsize-button: 14px;

	--spacing-primary: 100px;
	--spacing-secondary: 50px;
	--spacing-tertiary: 25px;

	--fontfamily-body: "Inter", sans-serif;
	--fontfamily-headings: "Inter", sans-serif;

	/*for animate lib - cut down delays in half*/
	--animate-delay: 0.2s !important;
}

/*
-------------------------------------------------------------|
                                         TYPOGRAPHY & RESETS |
-------------------------------------------------------------|
*/

html {
 	scroll-behavior: smooth;
}

body * {
 	scroll-margin-top: 100px;
}

body {
	color: var(--color-grey);
	font-size: var(--fontsize-body-normal);
	font-weight: 400;
	font-family: var(--fontfamily-body);
	margin: 0;
	line-height: 1.6;
}

body,
button, 
input, 
select, 
optgroup, 
textarea {
	font-family: var(--fontfamily-body);
}

.post, 
.page {
	margin: 0;
}

body > * {
	max-width: 1920px;
	margin: auto;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
	outline: 0;
	text-decoration: none;
	color: var(--color-red);
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-family: var(--fontfamily-headings);
	font-weight: 700;
}

h1 {
	line-height: 1.1;
	margin: 0 0 15px;
	font-size: var(--fontsize-heading-primary);
	color: var(--color-blue-dark);
}

h2 {
	font-size: var(--fontsize-heading-secondary);
	margin-bottom: 0.5em;
	color: var(--color-red);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.1em;
}

h3 {
	font-size: var(--fontsize-heading-tertiary);
	color: var(--color-red);
}

h4 {
	font-size: var(--fontsize-heading-quarternary);
	color: var(--color-red);
}

p {
	font-size: var(--fontsize-body-normal);
	line-height: 1.5;
}

ul,
ol {
	margin: 0;
	padding-left: 20px;
	font-size: var(--fontsize-body-normal);
}

mark, 
ins {
	background: transparent;
}

fieldset {
	padding: 0 20px 20px;
}

.max-width-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1235px;
	width: 90%;
}

.max-width-container .max-width-container {
	width: 100%;
}

body.logged-in .show-logged-out,
body:not(.logged-in) .show-logged-in {
	display: none;
}

.entry-footer {
	display: none;
}

.entry-content,
.hentry {
	margin: 0;
}

.button {
	background-color: var(--color-red) !important;
	border: 1px solid var(--color-red) !important;
	border-radius: 3px;
	color: #fff !important;
	cursor: pointer;
	display: inline-block;
	font-family: var(--fontfamily-body);
	font-size: var(--fontsize-button);
	font-weight: 400;
	letter-spacing: 0.1em;
	padding: 10px 30px;
	text-transform: uppercase;
	transition: all 0.2s ease 0s;
	position: relative;
	z-index: 1;
	line-height: 1em;
}

.button + .button {
	margin-left: 5px;
}

.button.secondary {
	background-color: transparent !important;
	border-color: var(--color-red) !important;
	color: var(--color-red) !important;
}

.button:hover,
.button.secondary:hover {
	background-color: var(--color-orange) !important;
	border-color: var(--color-orange) !important;
	color: #ffffff !important;
}

.clear:after,
.clear::before,
.clear::after,
.clear {
	clear: both;
}

.parent-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.half {
	width: 50%;
}

.third {
	width: 33.3%;
}

.twothirds {
	width: 66.6%;
}

.flex {
	display: flex;
}

.overflow-container {
	overflow: hidden;
}

#primary {
	margin-top: 0;
	position: relative;
}

.custom_animate {
	opacity: 0;
}

.custom_animate.custom_animation_in-complete {
	opacity: 1;
}

.pre-heading {
	text-transform: uppercase;
	color: var(--color-grey);
	font-weight: 400;
	letter-spacing: 0.2em;
	font-size: var(--fontsize-body-normal);
	margin: 0;
	line-height: 1em;
}

.heading {
	color: var(--color-red);
	font-weight: 600;
	font-size: var(--fontsize-heading-primary);
	letter-spacing: 0.1em;
	margin: 0;
	line-height: 1em;
	text-transform: uppercase;
}

/*
-------------------------------------------------------------|
                                                      HEADER |
-------------------------------------------------------------|
*/

#masthead {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	/* background-color: var(--color-orange-light); */
	background-color: #fff;
	z-index: 999;
	box-shadow: 0 0px 5px -3px var(--color-orange);
}

#masthead.hide-logo {
	width: calc(50% - 100px);
	left: calc(50% + 100px);
	box-shadow: 10px 0px 5px -3px var(--color-orange);
}

.site-branding {
	opacity: 1;
	transition: all 0.25s ease 0s;
	transform: translateY(0);
}

#masthead.hide-logo .site-branding {
	opacity: 0;
	transform: translateY(-50px);
	transition: all 0s ease 0s;
}

#site-navigation {
	position: absolute;
	width: auto;
	right: 100px;
	top: 50%;
	transform: translateY(-50%);
}

.site-branding img {
	display: block;
	height: 80px;
	position: absolute;
	top: 10px;
	left: 20px;
	width: auto;
}

.flyout-closing-overlay {
	position: fixed;
	background-color: transparent;
	width: 100%;
	height: 100%;
	z-index: 99997;
	display: none;
	top: 0;
	left: 0;
}
.flyout-menu-container.open .flyout-closing-overlay {
	display: block;
}
.flyout-menu {
	margin: 0;
	list-style: none;
	background-color: var(--color-orange);
	position: fixed;
	z-index: 99998;
	width: 80%;
	left: 0;
	top: 0;
	max-width: 400px;
	min-width: 250px;
	height: 100%;
	padding: 150px 0 0;
	transform: translateX(-100%);
	transition: all 0.25s;
	background-image: url(/wp-content/themes/c2a/images/logo-white.png);
	background-size: 200px auto;
	background-repeat: no-repeat;
	background-position: center 20px;
	padding-top: 110px;
	width: 300px;
}
.flyout-menu-container.open .flyout-menu {
	transform: translateX(0);
}
.flyout-menu-button {
	background-color: transparent;
	width: 44px;
	height: 41px;
	position: fixed;
	z-index: 99999;
	right: 20px;
	top: 30px;
	cursor: pointer;
	border-radius: 0px;
}
.flyout-menu-button span {
	width: 30px;
	height: 2px;
	background-color: var(--color-orange);
	border-radius: 0;
	position: absolute;
	left: 7px;
	transform: rotate(0deg);
	transition: all 0.25s;
}
.flyout-menu-button span:nth-child(1) { top: 13px; }
.flyout-menu-button span:nth-child(2) { top: 19px; }
.flyout-menu-button span:nth-child(3) { top: 19px; }
.flyout-menu-button span:nth-child(4) { top: 25px; }
.flyout-menu-button.open span:nth-child(1), 
.flyout-menu-button.open span:nth-child(4) {
	width: 0;
	left: 23px;
}
.flyout-menu-button.open span:nth-child(2) {
	transform: rotate(45deg);
}
.flyout-menu-button.open span:nth-child(3) {
	transform: rotate(-45deg);
}

/*underscores fixes*/
ul.flyout-menu li {
	width: 100%;
	float: none;
	position: relative;
	list-style: none;
}
ul.flyout-menu li ul.sub-menu {
	position: static;
	float: none;
	display: none;
	padding: 0;
	list-style: none;
	margin: 0;
	background-color: var(--color-orange-medium);
}
ul.flyout-menu li ul.sub-menu li {
	float: none;
}
ul.flyout-menu li ul.sub-menu a {
	width: 100%;
	display: block !important;
	padding-left: 30px;
}

/*sub menu things*/
ul.flyout-menu li.menu-item-has-children::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid #fff;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 0px solid #404040;
	background-color: transparent;
	top: 9px;
	right: 20px;
	pointer-events: none;
	transform: rotate(0deg);
	transition: transform 0.25s ease 0s;
}
ul.flyout-menu li.menu-item-has-children.open::after {
	transform: rotate(90deg);
}

.flyout-menu a {
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.15em;
	display: block;
	padding: 3px 10px;
}

#primary-menu {
	gap: 50px;
}

#primary-menu a {
	color: var(--color-red);
	text-transform: uppercase;
	font-weight: 500;
	font-size: var(--fontsize-body-normal);
	letter-spacing: 0.1em;
	transition: all 0.1s ease 0s;
	position: relative;
}

#primary-menu a::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: var(--color-orange);
	transition: all 0.2s ease 0s;
}

#primary-menu a:hover::before {
	left: 0;
	width: 100%;
}

#toggle-cab-open {
/*	display: none;*/
}

#primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background-image: url(/wp-content/themes/c2a/images/c2a-graphic.png);
	z-index: 2;
	background-size: 100% 100%;
}

/*body.home #primary::before {
	width: calc(50% + 100px);
	height: 108px;
}*/

body.home #primary::before {
	width: calc(50% + 100px);
	height: 108px;
	/*width: 100%;
	height: 100px;
	top: 100px;*/
}

.banner-float {
/*	padding: 175px 0 100px !important;*/
}

/*
-------------------------------------------------------------|
                                                  FRONT PAGE |
-------------------------------------------------------------|
*/

.banner.home-banner {
	height: auto;
	position: relative;
	padding-top: 0;
	overflow: hidden;
}

.banner.home-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(50% + 100px);
	height: 100%;
	background-color: #fff;
}

.banner .max-width-container {
	position: relative;
	height: 100%;
}

.banner-float {
	position: relative;
	text-align: left;
	padding: 100px 0 100px;
	width: 50%;
	background-color: #ffffff;
}

.banner-float img {
	display: block;
	margin: 0;
	width: auto;
	max-width: 500px;
}

.home-banner .banner-float p {
	/* text-transform: uppercase; */
	color: var(--color-red);
	font-weight: 500;
	letter-spacing: 0.05em;
	font-size: 24px;
	margin: 30px 0 0;
	line-height: 1.5em;
}

/*.banner-right {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(50% - 100px);
	height: 100%;
}*/

.banner-right {
	position: absolute;
	top: 99px;
	right: 0;
	width: calc(50% - 100px);
	height: 100%;
}

/*.banner-right::before {
	content: "";
	position: absolute;
	top: -99px;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/wp-content/themes/c2a/images/c2a-graphic-flipped.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: bottom;
	right: ;
}*/

#solutions {
	background-color: var(--color-orange-medium);
	padding: 100px 0 100px;
	text-align: center;
	background-color: #fff;
	border-top: 9px solid var(--color-orange);
	position: relative;
	border-bottom: 9px solid var(--color-orange);
}

#solutions::before,
#solutions::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	background-color: var(--color-orange-medium);
}

#solutions::after {
	top: unset;
	bottom: -6px;
}

/*#solutions .pre-heading {
	color: #fff;
}*/

#solutions .heading {
/*	color: #fff;*/
}

.solutions-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 40px;
}

.solutions-list .single-solution {
	width: calc(20% - 50px);
	position: relative;
}

.single_solution-icon img {
	height: 80px;
	width: 100%;
	object-fit: contain;
	object-position: center;
	max-width: 80px;
	margin: auto;
}

.single-solution h3 {
	color: var(--color-red);
	text-transform: uppercase;
	margin: 10px 0 0;
	font-weight: 700;
	letter-spacing: 0.1em;
	font-size: var(--fontsize-body-large);
}

.single_solution-content p {
	/* color: #fff; */
	font-size: var(--fontsize-body-small);
	line-height: 1.2em;
	/* color: var(--color-orange-light); */
	margin-bottom: 0;
	color: var(--color-grey);
}

.single_solution-content .button.secondary {
	display: none;
}

.link-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#about {
	padding: 100px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

#about::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* max-height: 400px; */
	background-image: linear-gradient(to bottom, #fff, transparent);
	display: none;
}

#about .max-width-container {
	background-color: rgba(255,255,255,0.8);
	position: relative;
	border-radius: 3px;
	border: 1px solid #fff;
	border-color: var(--color-orange);
}

.about-row-content {
	width: 90%;
	max-width: 900px;
	margin: auto;
	padding: 70px 0;
}

#testimonials {
	padding: 100px 0;
	text-align: center;
	background-color: #fff;
	overflow: hidden;
}

.c2a-slider-arrow {
	position: absolute;
	top: 50%;
	right: 100%;
	font-size: 25px;
	line-height: 45px;
	color: var(--color-orange);
	color: var(--color-orange-medium);
	transition: al 0.1s ease 0s;
	cursor: pointer;
}

.c2a-slider-arrow.next {
	right: unset;
	left: 100%;
}

.c2a-slider-arrow:hover {
	color: var(--color-orange);
}

.testimonials-slider {
	margin-top: 50px;
}

.single-testimonial {
	margin: 0 50px;
}

.testimonial-quote {
	font-size: var(--fontsize-body-small);
	line-height: 1.2em;
	margin: 0;
}

.testimonial-name {
	font-size: var(--fontsize-body-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--color-orange);
	margin: 20px 0 0;
}

.testimonial-company {
	font-size: var(--fontsize-body-small);
	font-weight: 500;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0;
}

/*
-------------------------------------------------------------|
                                                      FOOTER |
-------------------------------------------------------------|
*/

#colophon {
	/* background-color: var(--color-orange); */
/*	padding: 100px 0 20px;*/
	padding: 80px 0 80px;
	color: #fff;
	/* background-color: var(--color-orange-medium); */
	background-color: var(--color-red);
	border-top: 9px solid var(--color-orange);
	position: relative;
}

#colophon::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	background-color: var(--color-orange-medium);
}

.footer-columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.footer-column.left {
	width: 100%;
/*	max-width: 1000px;*/
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	align-items: center;
}

.footer-column.left img {
	display: block;
	width: 250px;
}

.quick-links {
	margin-top: 0px;
	width: calc(100% - 300px);
}

#footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	column-count: 3;
	column-gap: 20px;
	text-align: center;
}

#footer-menu > * {
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside:avoid;
	-moz-page-break-inside:avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
}

#footer-menu a {
	color: #fff;
	font-size: var(--fontsize-body-small);
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.1em;
	display: block;
}

#footer-menu .sub-menu {
	list-style: none;
	margin: 0 0 0 10px;
	padding-left: 10px;
	border-left: 1px solid #fff;
	border-color: #ddd;
}

.footer-column.full {
	width: 100%;
	text-align: right;
	margin-top: 20px;
}

.footer-column.full ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-column.full ul li {
	display: inline-block;
}

.footer-column.full ul li a {
	color: #fff;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.2em;
	/* color: var(--color-orange); */
	font-size: var(--fontsize-body-tiny);
	margin-left: 20px;
}

#social-menu {
	list-style: none;
	padding: 0;
	margin: 150px 0 0;
}

#social-menu a {
	color: #fff;
	font-size: 28px;
	display: block;
}

.trailer {
	background-color: var(--color-orange);
	color: #fff;
	padding: 20px 0;
	text-align: center;
}

.trailer p {
	font-size: var(--fontsize-body-tiny);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0;
	color: #ffffff;
}

/*
-------------------------------------------------------------|
                                    SECONDARY PAGE TEMPLATES |
-------------------------------------------------------------|
*/

.banner.heading-banner {
	position: relative;
	overflow: hidden;
	margin-top: 100px;
}

.banner.heading-banner .banner-right {
	top: 0;
	height: calc(100% + 10px);
	width: 50%;
}

.banner.heading-banner .banner-right::before {
	top: -10px;
}

.banner.heading-banner .banner-float {
	padding-right: 50px;
}

.default-page-content {
	padding: 50px 0 100px;
	border-top: 9px solid var(--color-orange);
	position: relative;
	background-color: #fff;
}

.default-page-content::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	background-color: var(--color-orange-medium);
}

.c2a-line {
	position: relative;
	width: 100%;
	height: 9px;
	margin: 50px 0;
}

.c2a-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	height: 9px;
	background-color: var(--color-orange);
	width: 100vw;
	transform: translatex(-50%);
}

.c2a-line::after {
	content: "";
	position: absolute;
	top: 3px;
	height: 3px;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-orange-medium);
}

/*
-------------------------------------------------------------|
                                                CONTACT PAGE |
-------------------------------------------------------------|
*/

.contact-blocks {
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	border-top: 9px solid var(--color-orange);
}

.contact-blocks::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	background-color: var(--color-orange-medium);
}

.contact-block-left, 
.contact-block-right {
	width: 60%;
	padding: 50px;
}

.contact-block-left {
	background-color: var(--color-orange);
	color: #fff;
	width: 40%;
}

.contact-block-left h2 {
	color: #fff;
	margin-top: 0;
	font-weight: 600;
}

.contact-block-left .gfield_label.gform-field-label {
	color: #fff;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.05em;
	margin-bottom: 5px;
}

.gform_required_legend {
	display: none;
}

.gform-theme--foundation .gform-body.gform_body .gform_fields {
	row-gap: 15px;
}

.contact-block-left .gform-body.gform_body .gform_fields .large {
	border-radius: 3px;
	border: 1px solid var(--color-orange-medium);
	background-color: var(--color-orange-light);
}

.contact-block-left .gform-body.gform_body .gform_fields textarea.large {
	resize: none;
	height: 150px;
	min-block-size: unset;
}

.contact-block-left .gform_wrapper .gform-footer .button {
	background-color: #ffffff !important;
	border: 1px solid var(--color-red) !important;
	border-radius: 3px !important;
	color: var(--color-red) !important;
	cursor: pointer !important;
	display: inline-block !important;
	font-family: var(--fontfamily-body) !important;
	font-size: var(--fontsize-button) !important;
	font-weight: 400 !important;
	letter-spacing: 0.1em !important;
	padding: 10px 30px !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease 0s !important;
	position: relative !important;
	z-index: 1 !important;
	line-height: 1em !important;
}

.contact-block-left .gform_wrapper .gform-footer .button:hover {
	background-color: var(--color-red) !important;
	color: #fff !important;
}

.gform-theme--framework .gfield:where(.gfield--type-multiselect, .gfield--input-type-multiselect) .chosen-container-multi:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework .gfield:where(.gfield--type-select, .gfield--input-type-select) .chosen-search input[type="text"]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework .gfield:where(.gfield--type-select, .gfield--input-type-select) .chosen-single:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework .gform-theme-field-control:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type="hidden"])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework select[multiple]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework textarea:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework.gform-theme.gform_wrapper .button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework.gform-theme.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework.gform-theme.gform_wrapper :where(:not(.mce-splitbtn)) > button:not([id*="mceu_"]):not(.mce-open):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework.gform-theme.gform_wrapper button.button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework.gform-theme.gform_wrapper input:is([type="submit"], [type="button"], [type="reset"]).button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework.gform-theme.gform_wrapper input:is([type="submit"], [type="button"], [type="reset"]):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, 
.gform-theme--framework.gform-theme.gform_wrapper input[type="submit"].button.gform_button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus {
	--gf-local-outline-color: var(--color-orange-medium);
	outline-color: var(--color-orange-medium);
	--gf-local-outline-width: 1px;
	outline-width: 1px;
	outline-offset: 4px;
	outline-color: ;
}

.contact-block-right h2 {
	margin-top: 0;
}

.contact-block-right h3 {
	text-transform: uppercase;
	font-size: var(--fontsize-body-large);
	letter-spacing: 0.05em;
	margin: 20px 0 0;
}

.contact-block-right ul {
	font-size: var(--fontsize-body-small);
}

.contact-block-right ul strong {
	font-weight: 600;
	color: var(--color-orange);
}

/*
-------------------------------------------------------------|
                                                     GRAPHIC |
-------------------------------------------------------------|
*/
.c2a-graphic {
	position: relative;
	width: 600px;
	height: 600px;
	margin: auto;
}

.c2a-graphic img {
	display: block;
}

.c2a_graphic-map {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
}

.c2a_graphic-map a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.c2a_graphic-map.c2a_graphic-outer_circle {
	width: 96%;
	height: 96%;
	border-radius: 100%;
	top: 2%;
	left: 2%;
}

.c2a_graphic-map.c2a_graphic-inner_circle {
	width: 75%;
	height: 75%;
	border-radius: 100%;
	top: 12.5%;
	left: 12.5%;
}

.c2a_graphic-blocker {
	width: 58%;
	height: 58%;
	position: absolute;
	top: 21%;
	left: 21%;
	border-radius: 100%;
}

.c2a_graphic-map.c2a_graphic-roof {
	width: 43%;
	height: 11%;
	top: 26%;
	left: 28%;
}

.c2a_graphic-map.c2a_graphic-column_1 {
	width: 7%;
	height: 19.5%;
	top: 37%;
	left: 30%;
}

.c2a_graphic-map.c2a_graphic-column_2 {
	width: 7%;
	height: 19.5%;
	top: 37%;
	left: 38%;
}

.c2a_graphic-map.c2a_graphic-column_3 {
	width: 7%;
	height: 19.5%;
	top: 37%;
	left: 46%;
}

.c2a_graphic-map.c2a_graphic-column_4 {
	width: 7%;
	height: 19.5%;
	top: 37%;
	left: 54%;
}

.c2a_graphic-map.c2a_graphic-column_5 {
	width: 7%;
	height: 19.5%;
	top: 37%;
	left: 61.5%;
}

.c2a_graphic-map.c2a_graphic-top_foundation {
	width: 40%;
	height: 5%;
	top: 59%;
	left: 29.5%;
}

.c2a_graphic-map.c2a_graphic-bottom_foundation {
	width: 40%;
	height: 5%;
	top: 64%;
	left: 29.5%;
}

.c2a_graphic-text {
	position: absolute;
	width: 90%;
	height: auto;
	background-color: rgba(127, 9, 0, 0.8);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	padding: 25px;
	pointer-events: none;
	opacity: 0;
	transition: all 0.25s ease 0s;
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
}

.c2a_graphic-map:hover + .c2a_graphic-text {
	opacity: 1;
}

.c2a_graphic-text p {
	font-size: 14px;
	margin: 0;
	line-height: 1.3em;
	border: ;
}

.c2a_graphic-text strong {
	display: block;
	border-bottom: 2px solid #fff;
	padding-bottom: 15px;
}

/*New SNAPA diagram*/

#snapa-diagram {
	margin: 50px auto;
	width: 100%;
	max-width: 750px;
}

.snapa-heading {
	background-color: #f2ded4;
	text-align: center;
	border-radius: 100px;
	padding: 12px;
	margin-bottom: 20px;
}

.snapa-heading h2 {
	margin: 0;
	font-weight: 700;
	background-color: #fff;
	border-radius: 100px;
	box-shadow: 2px 1px 4px 0px rgba(0,0,0,0.2);
	padding: 10px;
	line-height: 1.2em;
}

.snapa-primary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.snapa-primary-single {
	width: calc(20% - 10px);
	text-align: center;
}

.snapa-primary-single-pill {
	background-color: #7f1617;
	border-radius: 100px;
	width: 130px;
	height: 130px;
	margin: auto;
	padding: 20px;
	cursor: pointer;
	transition: all 0.1s ease 0s;
}

.snapa-primary-single[data-target="subscriber"] .snapa-primary-single-pill { background-color: #7f1617; }
.snapa-primary-single[data-target="networks"] .snapa-primary-single-pill { background-color: #80361a; }
.snapa-primary-single[data-target="automation"] .snapa-primary-single-pill { background-color: #924b23; }
.snapa-primary-single[data-target="protection"] .snapa-primary-single-pill { background-color: #be5b27; }
.snapa-primary-single[data-target="analytics"] .snapa-primary-single-pill { background-color: #cc7f57; }

.snapa-primary-single-pill span {
	display: block;
	background-color: #fff;
	width: 90px;
	height: 90px;
	border-radius: 100px;
	box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.4);
	line-height: 90px;
	text-align: center;
	font-weight: 700;
	font-size: 52px;
	color: #7f1617;
	transition: all 0.1s ease 0s;
}

.snapa-primary-single[data-target="subscriber"] .snapa-primary-single-pill span { color: #7f1617; }
.snapa-primary-single[data-target="networks"] .snapa-primary-single-pill span { color: #80361a; }
.snapa-primary-single[data-target="automation"] .snapa-primary-single-pill span { color: #924b23; }
.snapa-primary-single[data-target="protection"] .snapa-primary-single-pill span { color: #be5b27; }
.snapa-primary-single[data-target="analytics"] .snapa-primary-single-pill span { color: #cc7f57; }

.snapa-primary-single h3 {
	font-weight: 400;
	font-size: 18px;
	transition: all 0.1s ease 0s;
	margin: 10px 0 0;
}

.snapa-primary-accordion-single,
.snapa-secondary-accordion-single {
	background-color: #f2ded4;
	color: #7f1617;
	font-size: 14px;
	padding: 25px;
	display: none;
}

.snapa-secondary h3 {
	background-color: #f2ded4;
	font-weight: 400;
	text-align: center;
	margin: 30px 0 0;
	border-radius: 8px;
	font-size: 22px;
	color: var(--color-orange);
	padding: 5px;
}

.snapa-secondary-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.snapa-secondary-tabs h4 {
	background-color: var(--color-orange);
	color: #fff;
	font-weight: 400;
	width: calc(33.3% - 6px);
	text-align: center;
	margin: 10px 0 0;
	font-size: 16px;
	padding: 5px 0;
	border-radius: 7px;
	cursor: pointer;
	transition: all 0.1s ease 0s;
	position: relative;
}

.snapa-secondary-tabs h4:not(.open):hover {
	background-color: var(--color-red);
}

.snapa-secondary-tabs h4::before {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - 10px);
	border-top: 0px solid var(--color-orange);
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	transition: all 0.1s ease 0s;
}

.snapa-secondary-accordions {
	margin-top: 10px;
}

.snapa-primary-accordions {
	margin-top: 10px;
}

.snapa-primary.active .snapa-primary-single:not(.open) .snapa-primary-single-pill {
	background-color: var(--color-grey);
}

.snapa-primary.active .snapa-primary-single:not(.open) .snapa-primary-single-pill span,
.snapa-primary.active .snapa-primary-single:not(.open) h3 {
	color: var(--color-grey);
}

.snapa-secondary-tabs.active h4:not(.open) {
	background-color: var(--color-grey);
}

.snapa-secondary-tabs.active h4.open::before {
	border-top: 14px solid var(--color-orange);
}

.snapa-primary-single:not(.open):hover .snapa-primary-single-pill {
	background-color: var(--color-orange-medium) !important;
}

.snapa-primary-single:not(.open):hover .snapa-primary-single-pill span,
.snapa-primary-single:not(.open):hover h3 {
	color: var(--color-orange-medium) !important;
}

/*
-------------------------------------------------------------|
                                                  RESPONSIVE |
-------------------------------------------------------------|
*/

@media(max-width: 1300px) { /*1024*/
	#masthead.hide-logo {
		width: 100%;
		left: 0;
	}
	body.home #primary::before {
		top: 100px;
	}
	.banner-float {
		padding-top: 175px;
	}
	.banner-float img {
		max-width: 350px;
	}
}

@media(max-width:1023px) { /*768*/
	#site-navigation {
		display: none;
	}
	.home-banner .banner-float p {
		font-size: 22px;
	}
	.solutions-list .single-solution {
		width: 225px;
	}
	.solutions-list {
		justify-content: center;
		gap: 50px 20px;
	}
	.quick-links {
		width: 100%;
	}
	.footer-column.left {
		justify-content: center;
	}
}
@media(max-width: 767px) { /*375*/
	:root {
		--fontsize-heading-title: 32px;
		--fontsize-heading-primary: 32px;
		--fontsize-heading-secondary: 26px;
		--fontsize-heading-tertiary: 20px;
		--fontsize-heading-quarternary: 16px;
	}
	h1, h2, h3, h4, h5 {
		line-height: 1.2;
	}
	#masthead {
		height: 75px;
	}
	.site-branding img {
		height: 55px;
	}
	.banner.home-banner::before {
		display: none;
	}
	.flyout-menu-button {
		top: 17px;
	}
	.banner.home-banner {
		background-color: #fff;
	}
	.banner-float {
		background-color: #fff;
		width: 100%;
		z-index: 2;
		text-align: center;
		padding-top: 155px;
	}
	.banner-right {
		display: none;
	}
	.banner-float img {
		width: 350px;
		max-width: 100%;
		height: auto;
	}
	body.home #primary::before {
		width: 100%;
		z-index: 3;
		height: 50px;
		top: 75px !important;
	}
	.button-container .button {
		margin: 5px;
	}
	#footer-menu {
		column-count: 1;
	}
	.c2a-slider-arrow {
		right: calc(100% - 15px);
	}
	.c2a-slider-arrow.next {
		right: unset;
		left: calc(100% - 15px);
	}
	.banner.heading-banner {
		margin-top: 75px;
	}
	#primary::before {
		z-index: 3;
		height: 50px;
	}
	.banner.heading-banner .banner-float {
		padding: 100px 0 75px;
	}
	.snapa-primary-single {
		width: 150px;
		margin-bottom: 20px;
	}
	.snapa-primary {
		justify-content: center;
	}
	.snapa-secondary-tabs h4 {
		font-size: 12px;
	}
	.contact-block-left, 
	.contact-block-right {
		width: 100%;
	}
	.contact-block-left {
		order: 1;
	}
}