/*
 Theme Name:     Kreativ
 Theme URI:      http://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Kreativ Webagentur KlG
 Author URI:     https://www.kreativ.swiss
 Template:       Divi
 Version:        1.0.2
*/
 
@import url("../Divi/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

.image-container-spalte {
    aspect-ratio: 1 / 1;
    min-height: 200px;
    align-self: flex-start;   /* keeps the square ratio in a flex row */
    background-size: cover;
    background-position: center;
}

.hyphenate {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;

    overflow-wrap: break-word;
    word-break: normal;
}

/*----- Links Animation Styling ------*/
/*Credits*/
.credits-info {
  	display: inline-block;
	color:#4A4A4A!important;
	padding:none!important;
}
.credits-info-white {
	display: inline-block;
	color:#fff!important;
	padding:none!important;
}
.credits-info:hover {
	color:#0C3A7A!important;
}
.credits-info-white:hover {
	color:#fff;
}
.credits-info:after {
  	content: '';
  	width: 0px;
 	 height: 1px;
 	 display: block;
 	 background: #0C3A7A;
 	 transition: 300ms;
}
.credits-info-white:after {
  	content: '';
  	width: 0px;
 	 height: 1px;
 	 display: block;
 	 background: #61652F;
 	 transition: 300ms;	
}
.credits-info:hover:after, .credits-info-white:hover:after {
	width: 100%;
}
/*Credits Reverse*/
.credits-info-reverse {
  	display: inline-block;
	color:#FFF5D0!important;
	padding:none!important;
}
.credits-info-reverse:hover {
	color:#FFF5D0!important;
}
.credits-info-reverse:after {
  	content: '';
  	width: 100%;
 	 height: 1px;
 	 display: block;
 	 background: #FFF5D0;
 	 transition: 300ms;
}
.credits-info-reverse:hover:after {
	width: 0px;
}
/*Credits White*/
.credits-info-white {
	display: inline-block;
	color:#fff!important;
	padding:none!important;
}

.credits-info-white:hover {
	color:#fff;
}

.credits-info-white:after {
  	content: '';
  	width: 0px;
 	 height: 1px;
 	 display: block;
 	 background: #fff;
 	 transition: 300ms;	
}
.credits-info-white:hover:after {
	width: 100%;
}

/*Credits Reverse Regular*/
/*Credits Reverse*/
.credits-info-reverse-regular {
  	display: inline-block;
	color:#666!important;
	padding:none!important;
}
.credits-info-reverse-regular:hover {
	color:#666!important;
}
.credits-info-reverse-regular:after {
  	content: '';
  	width: 100%;
 	 height: 1px;
 	 display: block;
 	 background: #666;
 	 transition: 300ms;
}
.credits-info-reverse-regular:hover:after {
	width: 0px;
}

/* =========================
   STICKY LAYOUT
========================= */
.sticky-row {
  align-items: flex-start;
}

.sticky-left {
  position: sticky;
  top: 10vh;
  height: fit-content;
}

.scroll-right {
  position: relative;
}

.scroll-right > * {
  margin-bottom: 2rem;
}

/* =========================
   TIMELINE
========================= */
.timeline-widget {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  width: 100%;
}

.timeline-cards {
  grid-column: 2;
  width: 100%;
}

.timeline-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.timeline-line,
.timeline-line-fill {
  position: absolute;
  left: 24px;
  width: 2px;
  border-radius: 999px;
}

.timeline-line {
  top: 0;
  height: 100%;
  background: #e5e7eb;
}

.timeline-line-fill {
  top: 0;
  height: 0;
  background: #10222E;
  transition: height 0.2s ease;
}

.timeline-step {
  position: absolute;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 2;
  font-family: 'Alexandria', sans-serif;
  font-size: 14px;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.timeline-step.reached,
.timeline-step.active {
  border-color: #10222E;
  color: #10222E;
}

.timeline-card {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 32px;
  padding: 2rem;
  margin: 0 0 1.5rem 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(36px);
  filter: blur(8px);
  pointer-events: none;
  transition:
    opacity 0.18s linear,
    transform 0.18s linear,
    filter 0.18s linear,
    visibility 0s linear 0.18s;
}

.timeline-card.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
  transition:
    opacity 0.18s linear,
    transform 0.18s linear,
    filter 0.18s linear,
    visibility 0s linear 0s;
}

.timeline-card h3 {
  margin: 0 0 0.75rem;
  font-family: 'Alexandria', sans-serif;
  font-size: 24px;
  line-height: 1.2em;
  color: #10222E;
}

.timeline-card p {
  margin: 0;
  font-family: 'Alexandria', sans-serif;
  font-size: 16px;
	font-weight:300;
  line-height: 1.6em;
  color: #666;
}

.et_pb_code .timeline-widget,
.et_pb_code .timeline-cards,
.et_pb_code .timeline-card,
.et_pb_code_inner .timeline-widget,
.et_pb_code_inner,
.et_pb_column,
.et_pb_module,
.et_pb_code {
  overflow: visible;
}

.et_pb_code_inner,
.et_pb_code .timeline-widget,
.et_pb_code .timeline-cards,
.et_pb_code .timeline-card,
.et_pb_code_inner .timeline-widget {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 980px) {
  .timeline-widget {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 1rem;
  }

  .timeline-rail { width: 52px; }
  .timeline-line, .timeline-line-fill { left: 18px; }
  .timeline-step { width: 38px; height: 38px; font-size: 13px; }
  .timeline-card { border-radius: 24px; padding: 1.5rem; margin-bottom: 1rem; }
  .timeline-card h3 { font-size: 20px; }
  .timeline-card p { font-size: 16px; }
}

@media (max-width: 767px) {
  .timeline-card { padding: 1.25rem; }
  .timeline-card h3 { font-size: 20px; }
}

/*========= Kontaktformular ==========*/

/*Labels*/
.column-half p, .column-full p {
	font-family:'Alexandria'!important;
	color:#032451!important;
}
/*Text field settings*/
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
	width:100%!important;
	min-height:48px!important;
	border-radius:12px!important;
	font-size: 18px!important;
	font-family: 'Alexandria',Helvetica,Arial,Lucida,sans-serif;
	font-weight: 300!important;
	padding-left:10px!important;
	border-color:#E2E5EA;
}

@media (max-width:980px) {
	input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
		font-size:16px!important;
	}
}
.page-id-314 textarea , .page-id-179 textarea {
	width:100%!important;
	min-height:48px!important;
	height:96px;
	max-height:500px!important;
	border-radius:12px!important;
	font-size: 18px!important;
	font-family: 'Alexandria',Helvetica,Arial,Lucida,sans-serif;
	padding-left:10px!important;
	border-color:#E2E5EA;
	padding-top:10px;
	transition: ease-in-out 0.5s;
}
@media (max-width:900px) {
	textarea {
		font-size:16px!important;
	}
}
textarea:focus {
	min-height:48px!important;
	height:200px;
	max-height:500px!important;	
	transition: ease-in-out 0.5s;
}
@media (max-width:900px) {
	input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
		width:100%!important;
	}
}
/*Error message text*/
.wpcf7-not-valid-tip {
	padding-top:4px!important;
	font-family: 'Alexandria',Helvetica,Arial,Lucida,sans-serif;
	font-weight:300;
	color:#D41111!important;
	font-size:16px!important;
}
.page-id-314 label, .page-id-179 label {
	font-size:16px!important;
	font-family:'Alexandria'!important;
	color:#4A4A4A!important;
}
/*Radio buttons*/
.wpcf7-list-item {
	margin:0 0 0 6px!important;
}
/*Submit button*/
.page-id-314 .wpcf7-submit, .page-id-314 .wpcf7-submit {
	font-family: 'Alexandria',Helvetica,Arial,Lucida,sans-serif;
	font-weight:300!important;
	color:#fff!important;
	border-radius:8px!important;
	font-size:18px!important;
	background-color:#032451!important;
	border:1px;
	padding: 11px 22px 11px 22px;
	cursor:pointer;
	margin-top:10px;
	transition:0.3s;
}
.page-id-314 .wpcf7-submit:hover, .page-id-314 .wpcf7-submit:hover  {
	background-color:#CDCBFF!important;
	color:#10222e!important;
	border:1px;
}
.page-id-314 .wpcf7-submit:hover:after, .page-id-314 .wpcf7-submit:hover:after {
	display:none!important;
}
.page-id-314 .wpcf7-submit:after, .page-id-314 .wpcf7-submit:after {
	display:none!important;
}
.page-id-314 .wpcf7-submit:hover, .page-id-314 .et_pb_module .et_pb_button:hover, .page-id-314 .wpcf7-submit:hover, .page-id-314 .et_pb_module .et_pb_button:hover {
	padding: 11px 22px 11px 22px;
	border:1px;
	transition:0.3s;
}
/*.page-id-179 .form-row p, .page-id-179 .form-row p {
	font-size:16px!important;
	font-family:'Montserrat'!important;
	color:#4A4A4A!important;
}*/
/*Focus label*/
input.text:focus, input.title:focus, input[type=text]:focus, select:focus, textarea:focus, input[type=email]:focus, input[type=tel]:focus {
	border-color:#0C3A7A!important;
}
/*Error labels*/
.wpcf7-not-valid {
 	color:#D41111!important;
	border-color:#D41111!important;
}

/*--- Error & Success Message pattern ---*/
/*General message pattern*/
.wpcf7 form .wpcf7-response-output {
    border:1px solid!important;
    border-radius: 12px!important;
    font-size:16px!important;
    padding:1.2em 1.2em!important;
    display: flex;
    align-items: center;
	font-family: 'Alexandria',Helvetica,Arial,Lucida,sans-serif;
	font-weight:300!important;
	margin-left:0px!important;
	margin-right:0px!important;
}

/*SUCCESS message pattern*/
.wpcf7 form.sent .wpcf7-response-output {
    border:1px solid #E3F1D7!important;
    background:#CDEDBD!important;
}

.wpcf7 form.sent .wpcf7-response-output:before {
    content: '';
    width: 25px;
    height: 25px;
    background-image: url('https://vinum-dominus.ch/wp-content/uploads/2024/08/check-green-filled.webp');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 6px;
    display: inline-block;
}

/*ERROR message pattern*/
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
	border: 1px solid #D41111!important;
	background:#F2B8B8!important;
}

.wpcf7 form.failed .wpcf7-response-output:before, .wpcf7 form.invalid .wpcf7-response-output:before, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    content: '';
    width: 25px;
    height: 25px;
    background-image: url('https://vinum-dominus.ch/wp-content/uploads/2024/08/error-circle.webp');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 6px;
    display: inline-block;

}
/*Custom form layout*/
/*---------- Devenir membre form ----------*/
#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
	margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full, .column-third {
	float: left;
	position: relative;
	padding: 0.65rem 0.65rem 0.65rem 0;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
	.column-third {
		width:33%;
	}
}