/* Overrides */
nav.main.border-b {
	border-width: 0px;
}

footer .container-social {
	bottom: var(--padding-xxs);
}
@media only screen and (max-width: 992px) and (min-width: 689px) and (orientation: portrait) {
	footer > div:first-child > div:first-child {
		margin-right: 50%;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	footer > div:first-child > div.gutter-2s, footer > div:last-child > * {
		justify-content: flex-start !important;
	}
	footer  > div:first-child.flex-h.gutter-1:not(.slider):not(.infinity) > * {
		width: calc(50% - var(--grid-gutter) * 0.5) !important;
		order: 3;
	}
	footer  > div:first-child.flex-h.gutter-1:not(.slider):not(.infinity) > *:first-child {
		width: calc(50% + var(--grid-gutter) * 0.5) !important;
		order: 1;
	}
	footer  > div:first-child.flex-h.gutter-1:not(.slider):not(.infinity) > *:nth-child(3) {
		order: 2;
	}
}

.headline-line {width: calc(var(--grid-padding) + calc(2 * var(--grid-column) + 1 * var(--grid-gutter)));}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	.headline-line {width: calc(var(--grid-padding) + calc(3 * var(--grid-column) + 2 * var(--grid-gutter)));}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	.headline-line {width: calc(var(--grid-padding) + calc(4 * var(--grid-column) + 3 * var(--grid-gutter)));}
}
/* ----------------------------------------------------------------
	Content
-----------------------------------------------------------------*/

/* Header */
section[name=header].min-view-h.home, section[name=header].min-view.home {
	padding-bottom: 5vh;
	padding-bottom: 5svh;
	min-height: calc(95vh - var(--nav-height));
	min-height: calc(95svh - var(--nav-height));
}
section[name=header].min-view-h, section[name=header].min-view {
	padding-bottom: 7.5vh;
	padding-bottom: 7.5svh;
	min-height: calc(90vh - var(--nav-height));
	min-height: calc(90svh - var(--nav-height));
}
section[name=header] .container-buttons.arrows {
	left: calc(2 * var(--grid-column-small) + 1 * var(--grid-gutter-small) + var(--padding-l));
	bottom: var(--padding-xxs);
	transform: translatex(-100%);
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=header].min-view-h, section[name=header].min-view {
		padding-bottom: 5vh;
		padding-bottom: 5svh;
		min-height: calc(90vh - var(--nav-height));
		min-height: calc(90svh - var(--nav-height));
	}
	section[name=header] > div.arrange-cl {
		align-items: flex-end;
	}
	section[name=header] .container-text, section[name=header] .flex-h:not(.slider):not(.infinity) > .container-images.width-9, section[name=header] .flex-h.gutter-1s:not(.slider):not(.infinity) > .container-text.width-5 {
		width: calc(100% - var(--grid-padding)) !important;
	}
	section[name=header] .container-text, section[name=header] .flex-h.gutter-1s:not(.slider):not(.infinity) > .container-text.width-5 {
		padding-left: var(--grid-padding) !important;
		padding-right: var(--grid-padding) !important;
	}
	section[name=header] .container-images {
		top: 0px !important;
		transform: initial;
		height: 60%;
	}
	section[name=header]:not(.home) .container-images {
		padding-top: 2.5rem;
		height: 55%;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=header].min-view-h.home, section[name=header].min-view.home, section[name=header].min-view-h, section[name=header].min-view {
		padding-bottom: 0px;
		min-height: calc(100vh - var(--nav-height));
		min-height: calc(100svh - var(--nav-height));
	}
	section[name=header] .container-text, section[name=header] .flex-h.gutter-1s:not(.slider):not(.infinity) > .container-text.width-5 {
		bottom: var(--padding-s) !important;
		padding-top: var(--grid-padding) !important;
		padding-bottom: var(--grid-padding) !important;
	}
	section[name=header] .container-images {
		height: 70% !important;
	}
	section[name=header]:not(.home) .container-images {
		height: 60% !important;
	}
}

/* Text */
section[name=text] .full-h-svg > svg {
	height: 95%;
}

/* Text-Image && Figures */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=text-image] .container-buttons.arrows, section[name=figures] .container-buttons.arrows {
		right: initial !important;
		left: var(--grid-padding) !important;
	}
}

/* CTA */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=cta] {
		height: calc(90vh - var(--nav-height));
		height: calc(90svh - var(--nav-height));
	}
	section[name=cta] .container-text, section[name=cta] .flex-h.gutter-1:not(.slider):not(.infinity) > .container-text.width-5 {
		top: initial !important;
		bottom: 0px !important;
		transform: initial !important;
		padding-left: var(--grid-padding) !important;
		padding-right: var(--grid-padding) !important;
		width: calc(100% - var(--grid-padding)) !important;
	}
	section[name=cta] picture, section[name=cta] .container-video {
		height: 80% !important;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=cta] {
		height: calc(100vh - var(--nav-height));
		height: calc(100svh - var(--nav-height));
	}
	section[name=cta] .container-text, section[name=cta] .flex-h.gutter-1:not(.slider):not(.infinity) > .container-text.width-5 {
		padding-top: var(--grid-padding) !important;
		padding-bottom: var(--grid-padding) !important;
	}
	section[name=cta] picture, section[name=cta] .container-video {
		height: 65% !important;
	}
}

/* Cards */
section[name=cards] .wrapper > a img {
	transition: height var(--transition-l);
}
section[name=cards] .wrapper > a:hover img, section[name=cards] .wrapper > a:focus img {
	height: 112.5%;
}
section[name=cards] .wrapper > a .container-text.bg-light.bg-opacity {
	transition: background-color var(--transition-l);
}
section[name=cards] .wrapper > a:hover .container-text.bg-light.bg-opacity, section[name=cards] .wrapper > a:focus .container-text.bg-light.bg-opacity {
	background-color: var(--bg-white);
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=cards] .wrapper > a.height-6, section[name=cards] .wrapper > a.height-7, section[name=cards] .wrapper > a.height-8 {
		height: 25rem;
	}
	section[name=cards] .wrapper > a .container-text {
		padding: var(--padding-xs) !important;
	}
}

/* Logos */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=logos] .full-h-svg {
		height: var(--icon-size-default);
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=logos] .full-h-svg {
		height: var(--icon-size-s);
	}
}

/* Testimonials */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=testimonial] > .gap-l {
		gap: var(--gap-default) !important;
	}
	section[name=testimonial] .testimonial {
		padding: var(--padding-s) var(--padding-xs) var(--padding-xs) var(--padding-xs) !important;
	}
	section[name=testimonial] .testimonial  svg {
		width: var(--icon-size-default) !important;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=logos] .full-h-svg {
		height: var(--icon-size-s);
	}
}

/* Milestones */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=milestones] .milestone .padding-l {
		padding-left: var(--padding-s) !important;
	}
	section[name=milestones] .milestone .padding-r {
		padding-right: var(--padding-s) !important;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=milestones] .line-w {
		left: 0px;
	}
	section[name=milestones] .milestone .padding-r {
		padding-left: var(--padding-s) !important;
		padding-right: initial !important;
	}
	section[name=milestones] .milestone .self-r {
		align-self: flex-start;
		text-align: left;
	}
	section[name=milestones] .milestone .abs-cl.after-l {
		left: initial;
		right: 100%;
		transform: translate(50%, -50%);
	}
}