.connected-sections {
	position: relative;
	display: block;
	overflow: clip;

	& .fixed-column {
		position: relative;
	}

	& .fixed-column-full {
		position: relative;
	}

	& .connected-section-corner-callout {
		position: absolute;
		top: 50px;
		right: 40px;
		bottom: 0;
		z-index: 300;
		display: block;
		height: calc(100% - 50px);

		@media (max-width: 1024px), (max-height: 450px) {
			& {
				display: none !important;
			}
		}

		& .corner-callout-inner {
			position: sticky;
			display: block;
			right: 0;
			top: calc(var(--top-header-height) + 50px);
			height: calc(100vh - calc(var(--top-header-height) + 50px) );

			& .contact-sales-card {
				width: 175px;
				padding: 12px;
				border-radius: 6px;
				position: absolute;
				top: auto;
				margin-top: auto;
				bottom: 50px;
				right: 0;
				display: block;
				background: rgba(2, 4, 23, 0.60) !important;
				-webkit-backdrop-filter: blur(20px);
				backdrop-filter: blur(20px);
				color: #fff;

				& .cs-card-image {
					& img {
						width: 100%;
						object-fit: cover;
						object-position: center top;
						aspect-ratio: 1.0;
					}
				}

				& .cs-card-info {
					& .contact-name,
					& .contact-position {
						&:not(:last-child) {
							margin-bottom: 4px;
						}
					}

					& .contact-icons {
						position: relative;
						display: flex;
						flex-flow: row wrap;
						gap: 8px;
						margin-top: 12px;

						& br {
							display: none;
						}

						& .cs-card-icon-link {
							display: flex;
							flex-flow: row nowrap;
							justify-content: center;
							align-items: center;
							align-content: center;
							width: 24px;
							height: 24px;
							margin: 0;
							padding: 0;
							transition: opacity 600ms var(--ease-out-expo);

							&, &:focus {
								opacity: 1.0;
							}

							&:hover, &:active {
								opacity: 0.7;
							}

							& img,
							& svg {
								display: block;
								width: 100%;
								height: 100%;
								object-fit: contain;
								object-position: center center;
							}
						}
					}
				}

				& .bold,
				& strong {
					font-weight: 600;
					-webkit-font-smoothing: antialiased;
					color: #fff !important;
				}

				& p {
					color: var(--purple-6, rgba(255, 255, 255, 0.6));
					color: #CCCDD1;
					line-height: 1.15;
				}
			}
		}
	}

	& .side-nav {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		z-index: 500;
		opacity: 0;
		text-transform: none;
		letter-spacing: 0.0em;
		font-size: 1.0rem;
		width: clamp(160px, 16vw, 240px);
		height: 100%;
		pointer-events: none;
		font-weight: 600;
		-webkit-font-smoothing: antialiased;
		transition: all 200ms var(--ease-in-out-quart);

		@media (max-width: 1024px) {
			& {
				display: none;
			}
		}

		&.open {
			pointer-events: auto;
			opacity: 1;
			transition-duration: 500ms;
		}

		& .inner-side-nav {
			position: sticky;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: stretch;
			align-content: stretch;
			top: 0;
			left: 40px;
			height: 100vh;
			width: 100%;
			max-width: 200px;

			top: var(--top-header-height);
			height: calc(100vh - var(--top-header-height));

			&:before {
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				bottom: 0;
				width: 1px;
				display: block;
				background: rgba(255, 255, 255, 0.2);
				transition: all 200ms var(--ease-in-out-quart);
			}

			& a {
				position: relative;
				display: block;
				text-align: left;
				margin: 0;
				padding: 0;
				background: transparent;
				overflow: visible;
				line-height: 1.3;
				font-size: 1.0rem;
				font-weight: 400;
				-webkit-font-smoothing: antialiased;
				color: rgba(255, 255, 255, 0.5);

				&:before {
					position: absolute;
					display: block;
					left: 0;
					width: 2px;
					top: 50%;
					bottom: 50%;
					background: var(--primary-color);
					content: '';
					opacity: 0;
					margin: 0;
					transition: all 200ms ease-out;
					z-index: 10;
				}

				& .connected-name {
					position: relative;
					display: block;
					line-height: 1.3;
					font-size: inherit;
					padding: 14px 25px;
					text-decoration: none;
					transition: all 200ms ease-out;
					z-index: 100;
					color: inherit;
				}

				&:hover, &:active, &:focus, &.active {
					color: #fff;
					font-weight: 600;

					&:before {
						opacity: 1;
						top: 6px;
						bottom: 10px;
					}
				}

				&.active {
					pointer-events: none;
				}
			}
		}

		&.dark {
			& .inner-side-nav {
				&:before {
					background: rgba(0, 0, 0, 0.06);
				}

				& a {
					color: #0e141a;

					&:hover, &:active, &:focus, &.active {
						color: var(--primary-color);
					}
				}
			}
		}
	}

	& .conn-section {
		position: relative;
		overflow: clip;
		background: transparent;

		& .flex-row {
			position: relative;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: stretch;
			align-items: stretch;
			align-content: stretch;

			@media (min-width: 1025px) {
				& {
					min-height: calc(100vh - var(--top-header-height));
				}
			}

			@media (max-width: 1024px) {
				& {
					flex-direction: column-reverse;
				}
			}
		}

		& .fixed-column-full {
			position: relative;
			clip: rect(auto, auto, auto, auto);
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
      overflow: clip;
      background: #000 !important;
      padding: 0;

      &:after {
      	position: absolute;
		    content: '';
		    display: block;
		    left: 0;
		    right: 0;
		    top: 0;
		    bottom: 0;
		    z-index: 100;
		    pointer-events: none;
		    background: transparent;
		    display: block;
		    background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 40.98%, #000 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.53%, #000 100%), linear-gradient(270deg, rgba(0, 0, 0, 0.00) 40.98%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 89.25%, #000 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.53%, rgba(0, 0, 0, 0.85) 100%);
      }

      @media (min-width: 1025px) {
      	& {
      		position: absolute;
      		z-index: 1;
      		left: 0;
      		top: 0;
      		right: 0;
      		bottom: 0;
      		width: 100%;
      		height: 100%;

      		&:after {
      			background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 35.91%, rgba(0, 0, 0, 0.75) 69.55%), linear-gradient(270deg, rgba(0, 0, 0, 0.00) 20.36%, #000 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.53%, rgba(0, 0, 0, 0.85) 100%);
      		}
      	}
      }

      & img {
      	position: fixed;
      	display: block;
      	left: 0;
      	right: 0;
      	top: var(--top-header-height);
      	bottom: 0;
      	object-fit: cover;
      	object-position: center top;
      	height: calc(100% - var(--top-header-height));
      	width: 100%;
      	z-index: 1;
      	pointer-events: none;

      	@media (max-width: 1024px) {
      		& {
      			position: relative;
      			left: auto;
      			right: auto;
      			top: auto;
      			bottom: auto;
      			width: 100%;
      			height: auto;
      		}
      	}
      }
		}

		& .details-content {
			position: relative;
			display: flex;
			align-self: center;
			flex-direction: row;
			justify-content: stretch;
			align-items: center;
			align-content: center;
			padding: 130px clamp(50px,5%,100%) 130px clamp(200px,18%,100%);
			z-index: 10;

			@media (max-width: 1024px) {
				& {
					padding: 70px 70px 110px;
					margin-top: -100px;
				}
			}

			@media (max-width: 767px) {
				& {
					padding: 50px 20px 90px;
				}
			}

			& .inner-details-content {
				position: relative;
				display: block;

				& a.set-button.outline-button {
					border-color: var(--primary-color) !important;

					&:hover, &:active, &:focus {
						border-color: var(--primary-color) !important;
					}
				}

				& .small-headline:not(:last-child) {
					margin-bottom: 12px;
				}

				h2, h3, h4, h5, h6,
				.h1, .h2, .h3, .h4, .h5, .h6 {
					&:not(:last-child) {
						margin-bottom: 30px;
					}
				}

				& p {
					color: var(--purple-6, rgba(255, 255, 255, 0.6));
					font-size: 1.25rem;
					line-height: 1.25;

					&.strong, & .strong, & strong {
						color: #fff;
					}

					&:not(:last-child) {
						margin-bottom: 30px;
					}
				}
			}

			& .background-title {
				position: absolute;
				font-family: var(--gtsuper);
				font-size: clamp(50px, 7vw, 130px);
				color: #fff;
				left: clamp(140px, 11vw, 100vw);
				right: 0;
				top: 35px;
				text-align: left;
				z-index: 1;
				line-height: 1.2;
				pointer-events: none;
				padding: 0;
				overflow: clip;
				text-overflow: clip;
				white-space: nowrap;

				@media (max-width: 1500px) {
					& {
						top: 60px;
					}
				}

				@media (max-width: 1200px) {
					& {
						top: 80px;
					}
				}

				@media (max-width: 1024px) {
					& {
						display: none;
					}
				}
			}

			& .connected-section-title {
				padding-bottom: 10px;
			}
		}

		&.dark {

		}
	}

	&.reversed {
    & .conn-section {
    	@media (max-width: 1024px) {
    		& {
    			padding: 50px 50px;
    		}
    	}

    	@media (max-width: 767px) {
    		& {
    			padding: 0;
    		}
    	}

      & .flex-row {
      	flex-direction: column-reverse;

      	@media (min-width: 768px) {
      		& {
      			flex-direction: row-reverse;
      		}
      	}
      }

      & .details-content {
      	padding: 130px clamp(200px, 10%, 100%) 130px clamp(50px, 5%, 100%);

      	@media (min-width: 1025px) {
      		& .inner-details-content {
      			max-width: 500px;
      		}
      	}

      	@media (max-width: 1024px) {
      		& {
      			padding: 50px 0 50px 50px;
      		}
      	}

      	@media (max-width: 767px) {
      		& {
      			padding: 25px 30px 80px 30px;
      		}
      	}
      }

      & .fixed-column-full {
      	background: transparent !important;

      	@media (max-width: 767px) {
      		& {
      			padding-bottom: 30px;
      		}
      	}

      	&:after {
      		display: none !important;
      	}

      	& img {
      		object-position: center center;
      		object-fit: contain;
      		left: clamp(200px, 18%, 100%);
      		width: calc(50% - clamp(200px, 18%, 100%));

      		@media (max-width: 1024px) {
      			& {
      				left: auto;
      				width: 100%;
      			}
      		}

      		@media (max-width: 767px) {
      			& {
      				height: auto;
      				max-width: 400px;
      				margin: 0 auto;
      			}
      		}
      	}
      }
  	}
	}

}

body.fl-builder-edit .fixed-column-full {
	& .conn-section {
		& .fixed-column-full {
			position: relative;
			width: 50%;
		}
	}
}