/*
Theme Name: OnePager by Flora Colora
Theme URI: https://www.floracolora.de
Author: Flora Core
Author URI: mailto:services@floracolora.de
Description: modern responsive OnePager Theme
Version: 1.0
Tags: mobile first, bootstrap, responsive, onepager
*/

@import url("ico/bootstrap-icons.css");
@import url("css/font-opensans.css");
@import url("css/font-lato.css");

:target:not(.no-target)::before,
[id]:not(.no-target)::before {
	content: "";
	display: block;
	height: 78px;
	margin-top: -78px;
}

body {
	font-family: Open Sans, 'Open Sans', sans-serif; 
	font-size: 0.89rem;
	text-rendering: optimizeLegibility;
	-webkit-font-variant-ligatures: no-common-ligatures;
	font-variant-ligatures: none;
	position: relative;
	margin-top: 78px;
}

a:not(.btn):not(.bi):not(.navbar-brand):not(.nav-link), 
a:not(.btn):not(.bi):not(.navbar-brand):not(.nav-link):link, 
a:not(.btn):not(.bi):not(.navbar-brand):not(.nav-link):visited, 
a:not(.btn):not(.bi):not(.navbar-brand):not(.nav-link):hover {
	text-decoration: none;
	position: relative;
}

a:not(.btn):not(.bi):not(.navbar-brand):not(.nav-link):before {
	content: "";
	position: absolute;
	width: 0;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #000;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

a:not(.btn):not(.bi):not(.navbar-brand):not(.nav-link):hover:before {
	visibility: visible;
	width: 100%;
}

h1, h2, h3, h4, h5, h6, h7 {
	font-family: Lato, 'Lato', serif;
}

li {
	margin-bottom: 0.5rem;
}

li:last-child {
	margin-bottom: 0px;
}

video.cover {
	object-fit: cover;
}

.bg-dark {
	background-color: #202a2a !important;
}

.btn {
	border-radius: 0px;
}

.btn-success { background-color: rgb(143, 170, 174); border-color: rgb(143, 170, 174);}
.btn-success:hover { background-color: rgb(134, 158, 162); border-color: rgb(134, 158, 162); }


/* HEADER */
.navbar {
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    height: auto;
}

.navbar-toggler {
    z-index: 1051;
}

.navbar-brand {
	font-size: 1rem;
	font-weight: bold;
}

.navbar-brand img {
	height: 44px;
    transform: translateX(28px);
}

.nav-link:before {
	content: "";
	position: absolute;
	width: 0;
	height: 4px;
	bottom: -50%;
	left: 0;
	background-color: #267d9c;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

/* ,.active .nav-link:before  */
.nav-link:hover:before,
.nav-link.active:before {
	visibility: visible;
	width: auto;
}

.nav-link:hover,
.nav-link.active,
.navbar-light .navbar-nav .nav-link.active, 
.navbar-light .navbar-nav .show>.nav-link {
	color: var(--bs-primary);
}

.nav-link {
	position: relative;
	padding: 1rem 1rem .4rem 1rem;
}

.navbar-light .navbar-nav .nav-link {
	color: #000;
}

#stb {
	font-size: 1.5rem;
	line-height: 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	text-align: center;
	color: #fff;
	background-color: var(--bs-primary);
	font-weight: bold;
	
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1049;
	
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    opacity: 0;
}

#stb a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
}

#stb:hover {
	background-color: var(--bs-primary-darker);
}

#stb.in-view, #ocb.in-view {
	opacity: 1;
}

#ocb {
	font-size: 1.5rem;
	text-align: center;
	color: #fff;
	background-color: var(--bs-primary);
	font-weight: bold;
	
	position: fixed;
	right: -5px;
	bottom: 50%;
	z-index: 1049;
	
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    opacity: 0;
    
    cursor: pointer !important;
    transform-origin: right bottom 0 !important;
    transform: translateY(-50%) rotate(-90deg) !important;
    
}

#ocb button {
	padding-bottom: calc(.375rem + 5px);
}

#ocb:hover {
	right: 0px; 
}


/* CONTENT */
:not(.navbar-brand) > img {
	width: 100%;
	height: auto;
}

.icon-card [class^='bi-'] {
	font-size: 3.5rem;
    line-height: 1;
    transition: all 0.3s ease-in-out;
}

.icon-card:hover [class^='bi-'] {
	transform: scale(1.125);
}

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: var(--bs-primary);
}

.accordion-button:not(.collapsed):after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
}

/* REFERENCE */
.reference a, 
.reference a:link, 
.reference a:visited, 
.reference a:hover {
	text-decoration: none !important;
	position: static !important;
}

.reference a:before {
	content: none !important;
}

.reference figure {
	position: relative;
	overflow: hidden;
}

.reference figure img {
	transition: all 0.3s ease-in-out;
}

.reference figure img:hover {
	transform: scale(1.2);
}

/* CF7 */
#f-nachricht {
	height: 150px;
}

.f-send:after {
	
}

.wpcf7 .ajax-loader {
	transform: translateY(33.33%);
}

.wpcf7-not-valid {
    border-color: var(--bs-secondary) !important;
}

.wpcf7-not-valid-tip {
	display: none;
}

.wpcf7-response-output {
    padding: 1rem 1rem !important;
    margin: 1rem 0 !important;
    border: 1px solid transparent;
}

.wpcf7-response-output:before {
	display: inline-block;
	content: "";
	vertical-align: -.125em;
	background-repeat: no-repeat;
	background-size: 1rem 1rem;
    width: 1rem;
    height: 1rem;
    margin-right: 1rem;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
	color: var(--bs-danger);
	border-color: var(--bs-danger);
}

.wpcf7 form.sent .wpcf7-response-output {
	color: var(--bs-primary);
	border-color: var(--bs-primary);	
}

/* PROCESS STEPS */
.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

.step-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid var(--bs-gray);
    background-color: var(--bs-gray);
    transition: 0.3s;
    font-weight: bold;
}

.step-button:hover {
    background-color: var(--bs-gray-darker);	
    color: #fff;
}

.step-button[aria-expanded="true"] {
    background-color: #fff;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.step-button[aria-expanded="true"]:hover,
.step-button.done:hover {
    background-color: var(--bs-primary-darker);	
    border-color: var(--bs-primary);
    color: #fff;
}

.done {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.step-item {
    z-index: 10;
    text-align: center;
}

#progress {
	-webkit-appearance:none;
    position: absolute;
    width: 95%;
    z-index: 5;
    height: 10px;
    margin-left: 18px;
    margin-bottom: 2px;
}

#progress::-webkit-progress-value {
    background-color: var(--prm-color);
    transition: 0.3s ease;
}

#progress::-webkit-progress-bar {
    background-color: var(--prm-gray);

}

/* ANIMATE */
.animate {
    -webkit-transition: transform .4s ease-out, opacity .8s ease-out;
    -webkit-transition: opacity .8s ease-out, -webkit-transform .4s ease-out;
    transition: opacity .8s ease-out, -webkit-transform .4s ease-out;
    transition: transform .4s ease-out, opacity .8s ease-out;
    transition: transform .4s ease-out, opacity .8s ease-out, -webkit-transform .4s ease-out;
    
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    opacity: 0;
}

.a-title {
    -khtml-transform: translate(0, -50px);
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
    -webkit-transition-delay: 1s;
    transition-delay: 1s;

    opacity: 0;
    -webkit-transition: transform .5s ease-out, opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    transition: transform .5s ease-out, opacity .5s ease-out;
    transition: transform .5s ease-out, opacity .5s ease-out, -webkit-transform .5s ease-out;
}

.a-top {
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);	
}

.a-start {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0);	
}

.a-end {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);	
}

.in-view { 
    -webkit-transform: translate(0);
    transform: translate(0);
    opacity: 1;
}


/* FOOTER */
footer {
	color: #fff;
}

footer ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

footer ul li {
	float: left;
}

footer ul li a {
	margin: 0px 0.5rem;
	color: #ffd962;
}

footer ul li a:last-child {
	margin-right: 0px;
}