/*@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/Inter-BoldItalic.woff2") format("woff2"); }*/

/* voltage-leben.ch */
body {
    font-family: "Poppins", sans-serif;
}
b, strong {
	font-weight: 600;
}

html, body {
    height: 100%;    
}

body {
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    font-size: 18px;
    color: #838382;
}   

h1 {
    color: #424C4F;
    margin-bottom: 1.75rem;
}

.dark-grey,
p a {
    color:#424C4F;
}

p a:hover {
    color:#77858a;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.mt-5 {
    margin-top: 4rem !important;
}

.mb-5 {
    margin-bottom: 4rem !important;
}

.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.pt-5 {
    padding-top: 4rem !important;
}

.pb-5 {
    padding-bottom: 4rem !important;
}

#to-top {
    display:none;
}

#to-top {
    position:fixed;
    right: 15px;
    bottom: 3rem;
    color:#fff;
    font-size: 2rem;
}
#to-top > button {
    margin:0;
    border: none;
}
#to-top > button:hover {
    background:#E2001A;
    color:#fff;
}

.carousel-caption {
    left: 0;
    color:#1E4557;    
    padding: 0;
    top: auto;
    bottom: -300px;
    right: -100px;
    text-align: left;
}

.carousel-indicators {
	display:none;
}

.carousel-indicators [data-bs-target] {
	height: 4px;
	background-color: #1E4557;
	margin-right: 4px;
	margin-left: 4px;
}

.stoerer {
	width: 40%;
	position: absolute;
	right: 15px;
	bottom: -95px;
}

.bg-stripe {
	overflow:clip;
	position: relative;
}

.bg-stripe::before {
	content:'';
	height: 1000vh;
	position: absolute;
	width: 35vw;
	right: 0;
	transform: rotate(45deg) translateX(-10vw) translateY(-30vw);
	transform-origin: top left;
	z-index: -1;
	background: rgb(245, 245, 245);
}

.fa-bars {
    color: #1E4557;
    font-size: 3rem;
    padding: .5rem;
    cursor:pointer;
    transition:.2s all;
}

.navbar {
    background: #E3DFD3;
    padding: 8px 0px;
    position: fixed;
    top: 0;
    z-index: 3;
    left: 0;
    right: 0;
}

.cms-toolbar-expanded .navbar {
	top:46px !important;
}

.navbar-brand {
	margin-right: 30px;
}

.navbar-toggler {
	padding:0;
	border:0;
	border-radius:0;
}

.navbar-toggler > i {
	font-size:2rem;
	color:#424C4F;
	padding: 0;
}

.navbar-toggler:focus {
	outline: 0 !important;
	box-shadow: none;
}

.nav-link {
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.3px;
	color: #5e686c;
	padding: 12px 5px !important;
}

.nav-link.btn-primary {
	background: #5e686c;
	color:#fff;
	padding: 10px 20px !important;
	border-radius: 20px;
	font-size: 13px;
}

.nav-link.btn-secondary {
	background:#fff;
	padding: 10px 20px !important;
	border-radius: 20px;
	font-size: 13px;
}

img.kontakt {
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.container-fluid.bg-primary {
    background: #1E4557 !important;
}

.container-fluid.bg-primary .btn {
    color:#fff;
    background:transparent;
    border:0;
    border-radius:0;
    padding: 10px 0 5px 0;    
    font-size: 1.25rem;
    position: relative;
    margin: 0 15px;
}

.container-fluid.bg-primary .btn.first {
	margin-left: 0;
}

.bg-secondary {
    background: #eeede7 !important;
}

.btn.btn-primary:hover {
	background-color:#77858a;
	border-color:#77858a;
	color:#fff;
}

.container-fluid.bg-primary .btn:hover::after,
.container-fluid.bg-primary .btn.selected::after {
	content:'';
	position:absolute;
	left:0;
	right:0;	
	width:0;
	bottom:0;
	border-bottom:2px solid #fff;
	animation:btn-width .3s forwards;
}

.lightbox-gallery .overflow-hidden > a > img {
	transition:.2s all;
}

.lightbox-gallery .overflow-hidden:hover > a > img {
	transform: scale(1.03);
}

@keyframes btn-width {
  100% {
	width:100%;
  }
}

.btn.btn-primary > i,
.btn.cta > i {
	transition: .2s all ease;
}

.btn.btn-primary:hover > i,
.btn.cta:hover > i {
	transform: translateX(3px);
}

.btn:hover,
.btn:focus,
.btn:active:focus,
.btn:active {	
	text-decoration: none;		
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active:focus,
.btn-link:active {
	color: #333333;
}

.content .btn.btn-primary,
.content .btn.btn-primary:focus,
.content .btn.btn-primary:active:focus,
.content .btn.btn-primary:active {
	background-color: #424C4F;
	border: none;
	padding: 10px 30px;
	border-radius:30px;	
	font-weight: 500;
}

.content {
	margin-top: 55px;
}

footer {
	background:#E3E3E3;
	padding:60px 0;
	color: #193D4C;
	margin-top:auto;
}

footer a {
    text-decoration:none;
}

footer label {
	font-size: 12px;
	font-weight: 600;	
	color: #193D4C;
	margin-bottom:10px;
}

footer img {
	width:50%;
}

footer .btn {
	background: #F8F8F8;
	font-weight: 500;
	font-size: 12px;
	border: 1px solid #1E4557;
    color: #1E4557;
    padding: 9px 20px;
    border-radius: 30px;
    line-height: 22px;
}

footer .btn:hover,
footer .btn:focus,
footer .btn:active:focus,
footer .btn:active {
	background-color: #E3E3E3 !important;
	color: #1E4557 !important;
}

footer .sub {
	margin-top:30px;	
}

footer .sub label {
	margin:0;
}

footer .sub .list-group-item {
	border:none;
	padding:0 8px;
	background:transparent;
}

footer .sub a {
	color: #193D4C;
	font-size: 14px;
	font-weight: 500;
	color: #146C8B;
	border-bottom:1px solid #146C8B;
	padding-bottom:2px;
}

footer .sub a:hover {
	text-decoration:none;	
}

.table-custom {
	background: hsl(45deg 22% 86% / 60%);
}

.table-custom td {
	border: 0;
}

.table-custom thead th {
    color:#77858a;
	font-weight:600;
}

.table-custom tbody td {
	padding-top: .5rem;
	padding-bottom: .5rem;
	padding-left:.75rem;
	padding-right:.75rem;
	background:transparent;
	color: #424C4F;
	color: #838382;
	font-weight: 500;
}

.table-custom tbody td:nth-child(odd) {	
	background: hsl(45deg 22% 86% / 70%);
}

.modal-header, .modal-body {
	color: #838382;
}

.zoomout.once img {  
    animation: zoomOut 3s ease-in-out;   
}

.form-control,
.form-select {
	background:transparent;
	border:1px solid #838382;
}

.card {
	border:none;
	border-radius:0;	
}

.card-body {
	padding:0;	
}

.card-footer {
	background:#838382;
	display:flex;
	justify-content:center;
	padding: 0;
	border: 0;
	border-radius: 0 !important;
}

.card-footer a {
	color:#fff;
	text-decoration:none;
	padding: 10px 20px;
	transition:.2s all;
}

.card-footer a:hover {
	opacity:.6;	
}

.timeline > div:not(:first-child) {
    padding-left:0;
}

.timeline > div:not(:last-child) {
    padding-right:0;
}

.timeline > div > div {
    height: 75px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline > div > div::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #424C4F;
}

.timeline > div > div::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background: #424C4F;
}

.stoerer {
    animation: fadeIn 1s ease forwards;    
    animation-delay: 2s;    
    opacity:0;
}





@keyframes zoomOut {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}





@media (max-width: 575px) {
    .navbar-nav {
		margin:15px 0;
	}

	.nav-link.btn {
		padding:10px 12px !important;
		display:inline-block;
		font-size: 14px;
	}
    
    /* 16:9 */
    .ratio-21x9 {
        --bs-aspect-ratio: 75%;
    }
    
    .timeline {
        overflow-x: scroll;
        flex-wrap: nowrap;
        margin-left: 0;
        padding-bottom: 2.5rem;
    }	

	.timeline::-webkit-scrollbar {
        height: 3px;    
    }

    .timeline::-webkit-scrollbar-track {
        background: #E3DFD3;
        margin-right:0.75rem;
    }

    .timeline::-webkit-scrollbar-thumb {
        background: #838382;    
    }
    
    .timeline > div:first-child {
        padding-left:0;
    }

	#wohnen-kontakt > .col {
		padding-left:0;
		padding-right:0;
	}

	#wohnen-kontakt .bg-secondary > .col {
		padding-left:1.5rem;
		padding-right:1.5rem;
	}

	h1 > br {
		display:none;
	}

	footer .sub > .container {
		flex-direction:column;
		align-items: start !important;
	}
	
    
}

/* SM */
@media (min-width: 576px) { 
	.py-5 {
	    padding-top: 4rem !important;
	    padding-bottom: 4rem !important;
	}

	.my-5 {
	    margin-top: 4rem !important;
	    margin-bottom: 4rem !important;
	}
	
	.stoerer {
		width: 330px;
		right: 0;
		bottom: -130px;
	}	

	.carousel-indicators {
		display: flex;
	}

	.nav-link {	
		padding: 25px 30px !important;
	}

	.nav-link.btn-primary {
		margin-left: 20px !important;
	}
    
    	
    
}

/* MD */
@media (min-width: 768px) { 
    .cc-window {
       flex-direction: row !important;
    }

    .cc-compliance {
        width:auto;
    }

	.cc-message {
		padding-bottom:15px;
	}    
}

@media (max-width: 991px) {
    
}

/* LG */
@media (min-width: 992px) {
	.content {
		margin-top:90px;
	}

	footer img {
		width:75%;
	}
	
	footer .sub {
		margin-top:60px;	
	}
}

/* XL */
@media (min-width: 1200px) {
    #to-top.show {
        display:block;
    }
    
}

/* XXL */
@media (min-width: 1400px) {
    
}