:root {
  --dark-blue: #002D51;
  --light-blue: #008FB9;
}

/* Section */
span {
	color: var(--light-blue);
}

.uk-section-secondary span {
	color: var(--dark-blue);
}

.uk-container-expand-right .uk-flex-1.uk-panel {
	left: -40px;
	padding: 140px 0px;
}

.uk-container-expand-left .uk-flex-1.uk-panel {
	padding: 140px 40px 140px 0px;
}

@media (min-width: 959px) {
	.uk-container-expand-left {
		padding: 0px;
	}

	.uk-container-expand-right {
		padding: 0px;
	}
}

@media (max-width: 1440px) {
	.uk-container-expand-right .uk-flex-1.uk-panel {
        left: 40px;
    }
}

/* Sektionen Effekt

.section-darkblue-right:after {
	content: "";
    position: absolute;
    height: 102%;
    width: 25%;
    top: -1px;
    right: 0px;
    background-image: url("/images/sandermann/vector/left-pinsel.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center right;
}

.section-lightblue-left:after {
	content: "";
    position: absolute;
    height: 102%;
    width: 25%;
    top: -1px;
    left: 0px;
    background-image: url("/images/sandermann/vector/right-pinsel.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center left;
}

.section-darkblue-right, .section-lightblue-left {
	position: relative;
    overflow: hidden;
}

@media (max-width: 959px) {
	.section-darkblue-right:after {
		right: -15%;
		background-position: center left;
	}
	.section-lightblue-left:after {
		left: -15%;
		background-position: center right;
	}
} */

/* Header */
main>div:nth-of-type(2) .uk-section::after {
	content: "";
    position: absolute;
    bottom: 0px;
    left: -2px;
    height: 140px;
    width: 101%;
	display: block;
    background-image: url("/images/sandermann/vector/bottom-pinsel.svg");
    background-size: cover;
    background-repeat: no-repeat;
	z-index: 0;
}

main>div:nth-of-type(2) .uk-section>.uk-container {
	position: relative;
	z-index: 3;
}

main>div:nth-of-type(2) .uk-section>.uk-position-cover {
	mix-blend-mode: multiply;
    opacity: 0.8 !important;
}

@media (max-width: 959px) {
	main>div:nth-of-type(2) .uk-section::after {
		height: 80px;
	}
}

/* Buttons */
.uk-button-small {
	border-width: 2px;	
}

.uk-button-default {
	position: relative;
    overflow: hidden;
    z-index: 2;
}

.uk-button-default:not(.uk-button-small):before {
	content: "";
	position: absolute;
    width: 105%;
    height: 100%;
    left: -105%;
    background-image: url("/images/sandermann/vector/rolle-quer-hell.svg");
	background-size: 110%;
	background-position: right center;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.uk-button-default:hover:before {
	left: 0%;
}

.uk-button-text {
	text-align: left !important;
}

/* icon Buttons */
.uk-icon-button {
	width: 50px;
    height: 50px;
    border-radius: 0px;
    border-width: 3px;
}

.uk-icon-button:hover {
    background-color: var(--light-blue) !important;
	border-color: var(--light-blue) !important;
}

@media (max-width: 959px) {
	.uk-icon-button {
    	background-color: var(--light-blue) !important;
		border-color: var(--light-blue) !important;
    	box-shadow: 0px 0px 20px rgba(53, 56, 61, 0.2);
	}

	.uk-icon-button:hover {
    	background-color: var(--light-blue) !important;
		border-color: var(--light-blue) !important;
	}
}

/* Lottie */
.hd-lottie {
	width: 60px;
    transform: rotate(45deg) translatey(50%);
    transform-origin: center center;
    margin-left: 50%;
}

/* Cards */
.uk-card-hover {
	position: relative;
    z-index: 2;
    overflow: hidden;
}

.uk-card-default.uk-card-hover:before {
	content: "";
	position: absolute;
    width: 105%;
    height: 100%;
    left: -105%;
    top: 0px;
    background-image: url("/images/sandermann/vector/rolle-quer-hell.svg");
	background-size: 110%;
	background-position: right center;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.uk-card-primary.uk-card-hover:before {
	content: "";
	position: absolute;
    width: 110%;
    height: 100%;
    left: -110%;
    top: 0px;
    background-image: url("/images/sandermann/vector/rolle-quer-big.svg");
	background-size: auto 110%;
	background-position: right center;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.uk-card-hover:hover:before {
	left: 0%;
}

/* Overlay */
.uk-overlay-primary, .uk-transition-toggle:hover .uk-overlay-default {
	mix-blend-mode: multiply;
    opacity: 0.7!important;
}

.uk-overlay:has(.uk-button) {
	padding-right: 100px!important;
}

.uk-overlay .el-content {
    position: relative;
	max-height: 0px;
    overflow: hidden;
    transition: 0.6s;
    margin-top: 0px!important;
    opacity: 0;
    top: 80px;
}

.el-item:hover .uk-overlay .el-content {
	max-height: 100px;
    margin-top: 20px!important;
    opacity: 1;
    top: 0px;
}

.uk-overlay .el-link {
	position: absolute;
    right: 40px;
    bottom: 40px;
}

.el-item:hover .uk-overlay .uk-button-small {
	background-color: var(--light-blue);
}

.uk-overlay .uk-text-meta {
	font-size: 14px;
    font-weight: 700!important;
    color: var(--light-blue);
}

@media (max-width: 1399px) {
	.uk-overlay {
		padding: 30px;
	}
	.uk-overlay .el-link {
		right: 30px;
		bottom: 30px;
	}
}

@media (max-width: 959px) {
	.uk-overlay {
		padding: 20px;
	}
	.uk-overlay .el-link {
		right: 20px;
		bottom: 20px;
	}
	.uk-overlay:has(.uk-button) {
		padding-right: 66px!important;
	}
	.uk-overlay .el-content {
		max-height: 100px;
    	margin-top: 20px!important;
		max-height: 0px;
    	opacity: 1;
    	top: 0px;
	}

	.el-item .uk-overlay .el-content {
		max-height: 100px;
		margin-top: 20px!important;
		opacity: 1;
		top: 0px;
	}

	.startseite .uk-overlay .el-content {
		max-height: 0px;
		margin-top: 0px!important;
	}
	.uk-overlay-primary, .uk-transition-toggle .uk-overlay-default, .uk-transition-toggle:hover .uk-overlay-default{
		mix-blend-mode: multiply;
		opacity: 0.5!important;
	}

	.startseite .el-item:hover .uk-overlay .el-content {
		margin-top: 0px!important;
		max-height: 0px;
	}
}

/* Slider navigation */
.small-slider .uk-slidenav-container {
	position: absolute;
	bottom: 0px;
	left: 20px;
}

.small-slider .el-slidenav {
	border: 2.5px solid var(--light-blue);
	margin-left: 20px;
	padding: 10px 13px;
}

.small-slider .el-slidenav:hover {
	background-color: var(--light-blue);
}

.small-slider .el-slidenav svg {
	width: 8px;
}

.small-slider .uk-slider-container .uk-position-relative {
	position: static !important;
	overflow: visible;
}

.small-slider .uk-container {
	position: relative;
}

@media (max-width: 959px) {
	.small-slider .uk-slidenav-container {
		position: relative !important;
		bottom: 0px;
		left: -20px;
		margin-top: 20px;
	}
}

/* Timeline */

#timeline {
	.el-slidenav {
		position: relative;
		border: 2.5px solid var(--light-blue);
		padding: 10px 13px;
		margin: 0px 10px;
		top: 320px;
	}

	.el-slidenav:hover {
		background-color: var(--light-blue);
	}

	@media (max-width: 959px) {
		.el-slidenav {
			top: 240px;
		}
	}

	.el-slidenav svg {
		width: 8px;
	}

	.uk-position-center-left-out,
	.uk-position-center-left {
		right: 50%;
		left: unset !important;
		margin: 0px 0px;
	}

	.uk-position-center-right-out,
	.uk-position-center-right {
		left: 50%;
		right: unset !important;
		margin: 0px 0px;
	}

	.uk-slider {
		padding-bottom: 120px;
	}

	.uk-card:after {
		content: "";
		position: absolute;
		top: -80px;
		left: 50%;
		background-color: var(--light-blue);
		width: 30px;
		height: 30px;
		transform: translatex(-50%);
	}

	.uk-card {
		margin-top: 140px;
		overflow: visible;
	}

	.uk-card .el-title {
		position: absolute;
		top: -160px;
		left: 50%;
		transform: translatex(-50%);
		font-size: 32px;
		color: var(--dark-blue);
		width: 100%;
	}

	.uk-slider-container:before {
		content: "";
		width: 150%;
		height: 6px;
		background-color: var(--dark-blue);
		position: absolute;
		top: 76px;
		left: 15%;
	}

	@media (max-width: 959px) {
		.uk-slider-container:before {
			left: 25%;
		}
	}

	@media (max-width: 639px) {
		.uk-slider-container:before {
			left: 50%;
		}
	}

	.uk-invisible {
		visibility: visible !important;
		opacity: 0.3;
	}

	.uk-invisible:hover {
		background-color: white !important;
	}
}

/* Menü */
.tm-header:has(.uk-open) {
	height: 100vh;
    overflow-x: unset !important;
}

.uk-drop {
	height: 100%;
    align-content: center;
    margin-top: -140px;
}

.uk-drop>.uk-grid:not(.uk-grid-divider) {
	height: 0px !important;
}

.uk-drop>.uk-grid.uk-grid-divider {
	max-width: 110% !important;
}

.uk-navbar-dropdown-dropbar {
	padding: 120px 0px 120px 0px !important;
}

.uk-drop .uk-grid>div:not(.uk-grid-item-match) {
	padding-top: 40px;
    padding-bottom: 40px;
}

.uk-grid-divider > :not(.uk-first-column)::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 40px;
    border-left: 4px solid var(--dark-blue);
    z-index: 1;
}

.uk-drop .uk-grid .uk-first-column {
	right: -84px;
    z-index: 2;
    padding-left: 76px;
}

@media (max-width: 1199px) {
	.uk-drop .uk-grid .uk-first-column {
		right: -44px;
		padding-left: 36px;
	}
}

.uk-drop .uk-grid a:not(.uk-button-large) {
	font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
	opacity: 1;
    transition: 0.2s;
}

.uk-drop .uk-grid a:hover {
	text-decoration: none;
	opacity: 1;
}

.uk-drop {
    position: static;
    margin-left: auto;
    margin-right: auto;
}

.uk-drop .uk-grid:first-of-type, .uk-drop .uk-button-large {
	animation: show 0.3s forwards;
    animation-delay: 0.3s;
    opacity: 0%;
}

@keyframes show {
  from { opacity: 0%; }
  to   { opacity: 100%; }
}

.box {
	position: absolute;
    width: 0%;
    height: 33.4%;
    background-color: var(--light-blue);
    z-index: -1;
	animation: malen 0.6s forwards;
}

@keyframes malen {
  from { width: 0%; }
  to   { width: 100%; }
}

.box1 {
	top: 0%;
    left: 0px;
}

.box2 {
	top: 33.3%;
    right: 0px;
}

.box3 {
	top: 66.6%;
    left: 0px;
}

@media (min-width: 959px) {
	.tm-header:has(.uk-drop.uk-open) .uk-logo.uk-navbar-item .uk-logo-inverse {
		display: none !important;
	}

	.tm-header:has(.uk-drop.uk-open) .uk-logo.uk-navbar-item img:first-of-type {
		display: block;
	}
}

html:has(.tm-header .uk-drop.uk-open),
body:has(.tm-header .uk-drop.uk-open) {
	overflow: hidden;
}

@media (max-width: 1399px) {
    .uk-drop .uk-grid>div {
    	width: 50%;
    }
}

/* Menü Hover/Active */
.uk-navbar-nav li a:before {
	content: "";
	position: absolute;
    width: 100%;
    height: 40px;
    left: -102%;
    background-image: url("/images/sandermann/vector/rolle-quer-hell.svg");
    background-size: 170%;
    background-repeat: no-repeat;
	background-position: right center;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.tm-header:has(.uk-drop.uk-open) .uk-navbar-nav li a:before {
	content: "";
	position: absolute;
    width: 100%;
    height: 40px;
    left: -101%;
    background-image: url("/images/sandermann/vector/rolle-quer.svg");
    background-size: 170%;
    background-repeat: no-repeat;
	background-position: right center;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.uk-navbar-nav li a {
	position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 0px 14px 0px 14px !important;
}

.uk-navbar-nav li.uk-active a:before, .uk-navbar-nav li a:hover:before, .tm-header:has(.uk-drop.uk-open) .uk-navbar-nav li a:hover:before, .tm-header:has(.uk-drop.uk-open) .uk-navbar-nav li.uk-parent a:before  {
	left: 0%;
}

.tm-header:has(.uk-drop.uk-open) .uk-navbar-nav>li.uk-active>a {
	color: white;
}
 

/* Mobil Menü */
.uk-navbar-toggle-icon svg {
	color: white;
    width: 40px;
    height: 40px;
}

.uk-navbar-toggle-icon {
	margin-right: 40px !important;
    position: relative;
    z-index: 200;
}

.uk-navbar-toggle-icon:before {
	content: "";
	position: absolute;
    width: 180px;
    height: 60px;
    left: -16px;
    top: -10px;
    background-image: url("/images/sandermann/vector/rolle-quer-hell.svg");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

.uk-close {
	border: 3px solid var(--dark-blue) !important;
}

.uk-close svg line {
	stroke-width: 3px;
}

.uk-offcanvas .uk-nav-parent-icon svg {
	width: 16px;
    height: 16px;
}

.uk-offcanvas .uk-nav-parent-icon svg polyline {
	stroke-width: 2.5px !important;
}

.uk-offcanvas .uk-nav-sub a {
	text-transform: none;
}

.uk-nav-parent-icon {
	margin-left: 6px;
}

.uk-offcanvas .uk-nav-sub li {
	padding: 10px 0px;
}

@media (max-width: 639px) {
	.uk-navbar-toggle-icon svg {
		color: white;
    	width: 32px;
    	height: 32px;
	}
    .uk-navbar-toggle-icon {
		margin-right: 30px !important;
    	position: relative;
    	z-index: 200;
	}
    .uk-navbar-toggle-icon:before {
		content: "";
		position: absolute;
    	width: 120px;
    	height: 52px;
    	left: -16px;
    	top: -10px;
    	background-image: url("/images/sandermann/vector/rolle-quer-hell.svg");
    	background-size: cover;
    	background-repeat: no-repeat;
    	z-index: -1;
	}
}

.tm-header-mobile .uk-logo .uk-logo-inverse {
	display: block !important;
}

.tm-header-mobile .uk-logo img:first-child {
	display: none !important;
}

/* Sticky Buttons */
.tm-header-mobile .uk-navbar-item:has(.uk-icon-button) {
	position: fixed;
    bottom: 20px;
    right: 40px;
    z-index: 20010;
}

@media (max-width: 639px) {
	.tm-header-mobile .uk-navbar-item:has(.uk-icon-button) {
    	bottom: 10px;
    	right: 20px;
	}
}

/* Formulare */
.convertforms {
	max-width: 2000px!important;
}

.convertforms * {
	color: white!important;
}

.convertforms input, .convertforms textarea, .convertforms select, .convertforms .cfupload, .convertforms .dz-message {
	background-color: transparent!important;
    border: 3px solid var(--light-blue)!important;
}

.convertforms .cf-btn {
	background-color: var(--light-blue)!important;
    border: 3px solid var(--light-blue)!important;
    text-transform: uppercase;
}

.convertforms.cf-btn:hover {
	background-color: transparent!important;
    border: 3px solid var(--light-blue)!important;
    text-transform: uppercase!important;
}

/* Responsive Styling */
@media (max-width: 959px) {
	.uk-text-meta {
		font-size: 16px;
	}
	h3 {
		font-size: 18px;
	}
	.uk-container>.uk-grid>.uk-grid-item-match:has(.uk-background-cover) {
		min-height: 400px;
	}
	.uk-container-expand-right .uk-flex-1.uk-panel {
		left: 0px;
		padding: 40px 0px;
	}
	.uk-container-expand-left .uk-flex-1.uk-panel {
		padding: 40px 0px !important;
	}
	.uk-padding-remove-top.uk-padding-remove-bottom .uk-container-expand-left .uk-flex-1.uk-panel, .uk-padding-remove-top.uk-padding-remove-bottom .uk-container-expand-right .uk-flex-1.uk-panel {
		padding: 120px 0px;
	}
	.uk-container-expand-right, .uk-container-expand-left {
		padding-bottom: 40px;
	}
	.uk-background-cover img {
		width: 100px;
	}
	.item-121 {
		display: none;
	}
	.uk-icon-button {
    	background-color: #008FB9 !important;
		border-color: #008FB9 !important;
    	box-shadow: 0px 0px 20px rgba(53, 56, 61, 0.2);
	}

	.uk-container-expand-left {
		padding-left: 0px!important;
	}

	.uk-container-expand-left .uk-panel.uk-flex-1 {
		padding-left: 20px!important;
	}

	.uk-container-expand-right {
		padding-right: 0px!important;
	}

	.uk-container-expand-right .uk-panel.uk-flex-1 {
		padding-right: 20px!important;
	}
}

@media (max-width: 639px) {
	.uk-container>.uk-grid>.uk-grid-item-match:has(.uk-background-cover) {
		min-height: 240px;
	}
	.uk-container-expand-right, .uk-container-expand-left {
		padding-bottom: 20px;
	}
    .tm-header-placeholder {
        height: 50px!important;
    }
}

/*@media (min-width: 959px) {
	.item-141 {
		display: none;
	}
}*/