/*
 Theme Name:   Funnels Standard simple one
 Description:  Theme - Funnels
 Author:       Michael Wagner
 Author URI:   https://www.24bp.de
 Version:      1.0.20191001
 Text Domain:  funnels-standard-simple-one
===================================== */

/* ====================================
  1. Kalibrierung
===================================== */
* {
  box-sizing: border-box !important;
}
body {
  margin: 0;
}
.skip-link.screen-reader-text {
  position: absolute;
  left: -5000px;
}
img {
  height: auto;
}
#page {
  max-width: 1080px;
  margin: 0 auto;
}
#main-header {
  /*display:none;*/
}
#page-container {
  padding-top: 0px !important;
  margin-top: -1px !important;
}
#start_bg_img {
  /*display: none !important;*/
}
body {
  font-family: sans-serif;
}
a,
button,
label,
div,
p,
select,
input {
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0.69);
}
@-ms-viewport {
  width: device-width;
}

/* ====================================
  2. Allgemeine Styles (Sortierung mit umgekehrter Spezifität)
===================================== */

/*================
  Hyperlinks
  ================*/

/*================
  Klassen und IDs
  ================*/
html {
  /*background-image: url("https://basisrente.24bp.de/wp-content/uploads/2018/12/bg-funnel1.jpg");*/
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-width: 300px;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

section#section_top,
div#div_kontakt_form,
section#section_quest {
  background-color: #e6e6e6;
}
section#section_top,
#div_kontakt_form,
section#section_quest {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
}

section#section_testimon {
  background-color: #ffffff;
  padding: 20px 20px;
}
div#div_kontakt_form {
  padding-bottom: 20px;
}
div#div_kontakt_form .form_row:last-child a {
  text-decoration: none;
}
.hidden_init {
  display: none !important;
}

section#section_top,
section#section_testimon {
  font-weight: 500;
}
section#section_top > * {
  margin: 0;
  padding-bottom: 20px;
}
section#section_top h1 {
  font-size: 28px;
  font-weight: 500;
}
section#section_testimon h2 {
  font-size: 36px;
  font-weight: 500;
}
h4 {
  font-size: 22px;
  font-weight: 500;
}
section#section_top h4 strong {
  font-weight: 700;
}
section#section_top h5 {
  font-size: 20px;
  font-weight: 500;
}

#text05 mark {
  background-color: #00bd00;
}

section#section_quest {
  max-width: 1080px;
  margin: 0 auto;
}
section#section_quest {
  font-size: 18px;
}
section#section_quest p.last_ans {
  padding-bottom: 20px;
}

section#section_top p.space_down {
  text-align: center;
  padding-bottom: 0;
  position: relative;
}
.space_down:before {
  position: absolute;
  left: 0;
  right: 0;
  content: '\f347';
  display: inline-block;
  font-family: 'dashicons';
  font-size: 50px;
}

@keyframes mw_einblenden {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.icon_input {
  top: 35px;
  left: 3%;
  z-index: 10;
}

/*Form DS bold*/
form + div a {
  font-weight: bold;
}

div.wp-block-column {
  position: relative;
  background-color: #ffffff;
  border: 10px #eee solid;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 160px;
  flex-grow: 1;
  flex-basis: 100%;
}
.wp-block-column:nth-child(2n) {
  margin-left: 0;
}
.wp-block-column p:first-child {
  position: absolute;
  top: -160px;
  left: calc(50% - 75px);
}
.wp-block-column img {
  border-radius: 250px;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_container,
.header-content {
  width: 100% !important;
  max-width: 100% !important;
}

/*hamburger-color*/
span.mobile_menu_bar:before {
  color: #727272;
}

/*TopLeiste fixe Position*/
.et_fixed_nav #main-header {
  position: fixed;
}

#btn_gutschein_anfordern {
  height: 70px;
  position: relative;
}
div#btn_gutschein_anfordern a {
  width: 100%;
  position: absolute;
  display: block;
  padding: 40px 0px 20px 0px;
  top: 0px;
  left: 0;
}
body #page-container div#btn_gutschein_anfordern:hover,
#div_kontakt_form button:hover,
.btn_start hover {
  transition: all 0.4s ease-in-out;
}
body #page-container div#btn_gutschein_anfordern a:hover {
  padding-left: 0px;
}
#footer-info {
  text-align: center;
}
#footer-info a {
  text-decoration: none;
  font-size: 11px;
  color: #000000;
  font-weight: 700;
  transition: all 0.4s ease-in-out;
}
#footer-info a:hover {
  color: #2ea3f2 !important;
  transition: all 0.4s ease-in-out;
}
/* ====================================
  3. Styles für Layoutbereich
===================================== */
/*Button*/
.et_pb_promo_description {
  padding-bottom: 0;
}
.btn_start {
  animation: fadeTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  cursor: pointer;
}
.btn_start_js {
  transition: all 0.2s ease-in-out;
}
.btn_start h2 {
  display: inline-flex;
}
/*Button Pfeil*/
#div_kontakt_form button #btn_txt_1::before {
  content: '\f344';
  display: none;
  font-family: 'dashicons';
  font-weight: 900;
  opacity: 1;
  margin-left: -1.3em;
  padding-right: 15px;
}
#div_kontakt_form button #btn_txt_1::before {
}
#div_kontakt_form button #btn_txt_1 {
  display: inline-flex;
  font-size: 18px;
  margin: 14px 0;
}
/*form*/
.form_row {
  position: relative;
  text-align: center;
}
#div_kontakt_form label {
  padding-top: 20px;
  font-size: 16px;
}
#div_kontakt_form input,
#div_kontakt_form select#input_termin,
#div_kontakt_form select#input_budget {
  font-size: 15px;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: auto;
  border-radius: 3px 3px 3px 3px;
  overflow: hidden;
  border-width: 3px;
  border-color: #c9c9c9;
  border-style: solid;
  padding: 0.8em 50px;
}

.input_place {
  margin-top: 30px !important;
  position: relative;
  z-index: 3;
  background-color: #ffffff;
  outline: none;
}
.input_place:invalid {
  color: red;
}
.input_place:focus:invalid {
  outline: 1px solid red;
}
.input_place:valid {
  outline: 1px solid green;
  background-color: #ffffff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  transition: background-color 1000s ease-in-out 0s;
}

.label_place {
  position: absolute;
  opacity: 0;
  transition: 0.2s bottom, 0.2s opacity;
  bottom: 0;
  left: 3%;
  z-index: 1;
}
#div_kontakt_form input::placeholder {
  color: #111111;
}
#div_kontakt_form input:placeholder-shown {
}
#div_kontakt_form .form_row input:focus::-webkit-input-placeholder {
  color: transparent;
}
#div_kontakt_form .form_row input:focus:-moz-placeholder {
  color: transparent;
}

.input_place:focus + .label_place {
  bottom: 46px;
  font-family: arial;
  font-size: 14px;
  line-height: 1;
  opacity: 1;
  padding: 4px;
}

#div_kontakt_form button,
.btn_start {
  margin: 20px auto;
  width: 100%;
  color: #ffffff;
  border-style: none;
  font-size: 18px;
  text-align: center;
  box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
  border-radius: 50px 50px 50px 50px;
  display: inherit;
  position: relative;
  outline: none;
}
#btn_txt_1.btn_start {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
#btn_txt_1.btn_start h2 {
  margin: 0 auto;
  font-size: 18px;
  font-weight: 700;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #ffffff;
}
.btn_start #btn_txt_2 {
  font-size: 14px;
  display: block;
  margin: 0 auto;
  color: #ffffff;
}
#div_kontakt_form #input_full_name {
  /*
	box-shadow: #000000 0px 0px 8px;
	    -moz-box-shadow: #000000 0px 0px 8px;
	    -webkit-box-shadow: #000000 0px 0px 8px;	*/
}
#div_kontakt_form #input_email {
}
#div_kontakt_form #label_geburt {
  display: none;
}
.p_right {
  text-align: right;
  font-size: 12px;
  padding-right: 20px;
}

#div_kontakt_form input#input_check {
  -webkit-appearance: checkbox;
  display: none;
}

#div_kontakt_form input[type='checkbox'] + label {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-right: 20px;
  border-radius: 3px 3px 3px 3px;
  border-width: 3px;
  border-color: #c9c9c9;
  border-style: solid;
  background-color: #ffffff;
  padding: 0;
  flex-shrink: 0;
}

#div_kontakt_form input[type='checkbox']:checked + label {
  outline: 1px solid green;
}
#div_kontakt_form input[type='checkbox']:checked + label::before {
  font-family: 'dashicons';
  content: '\f147';
  font-size: 50px;
  color: green;
  position: relative;
  bottom: 15px;
  right: 10px;
}

.input_check_label_error {
  outline: 1px solid red;
}
.input_check_label_error::after {
  background-color: #555555bb;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
  content: 'Bitte geben sie ihr Einverständnis.';
  position: relative;
  top: 30px;
  right: 30px;
  display: inline-block;
  width: 200px;
  text-align: center;
  border-width: 0px;
  border-style: solid;
  border-color: #555555bb;
  border-radius: 30px;
  transition: all 0.3s;
  box-shadow: 0px 0px 15px grey;
}
.input_check_label_error::before {
  content: '';
  position: relative;
  top: -18px;
  left: 8px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #555555bb transparent;
}
.wrap_zustimmung {
  display: flex;
}
#div_kontakt_form .wrap_zustimmung input {
  /* 	flex-basis:  25px;

	margin: 20px 10px 0 0;
	position: relative;
    left: 6px; */
}

p#footer-info {
  padding-top: 10px;
  padding-bottom: 50px;
  float: none;
  border-color: rgba(29, 29, 29, 0.35);
  border-width: 1px;
  /*max-width: calc(100% - 20em);*/
  margin: 16px auto;
  /*background-color:#ffffffba;
	 border-radius: 5px 5px 5px 5px; */
  overflow: hidden;
  /* box-shadow: 2px 2px 18px 0px rgba(0,0,0,0.3); */
}

/*box-shadow 'ausblenden'*/
#start_row_02,
#start_row_03 {
  position: relative;
  z-index: 5;
}
#start_row_02:before,
#start_row_03:before {
  content: '';
  position: absolute;
  top: -10px;

  height: 30px;
  background: white;
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
}
#start_row_03 {
  /* box-shadow: 2px 5px 9px 0px rgba(0,0,0,0.3); */
}

.icon_input,
.icon_pfeil {
  font-weight: 900;
  font-family: 'ETmodules' !important;
  line-height: 1.7em;
  font-size: 22px;
  font-style: normal;
  position: absolute;
}

.icon_pfeil {
  font-size: 28px;
  top: 2px;
  left: 25%;
}
.et_pb_video_play::after {
  content: 'click to play';
  font-size: 20px;
}

#input_termin:invalid,
#input_budget:invalid {
  color: #4e4e4e;
}

.cookie-notice-container {
  color: #ffffff;
}

/*Responsive groesser 410px*/
@media all and (min-width: 410px) {
  #btn_txt_1.btn_start h2 {
    font-size: 22px;
    font-weight: 500;
  }
  #btn_txt_1.btn_start h2::before {
    content: '\f344';
    display: inline-block;
    font-family: 'dashicons';
    font-weight: 900;
    opacity: 1;
    margin-left: -1.3em;
    padding-right: 15px;
  }
}
/*Responsive groesser 450px*/
@media all and (min-width: 450px) {
  #div_kontakt_form button #btn_txt_1::before {
    display: inline-block;
  }
}
/*Responsive groesser 600px*/
@media all and (min-width: 600px) {
  .wp-block-columns {
    justify-content: space-around;
  }
  section#section_testimon .wp-block-column {
    flex-basis: 45%;
    flex-grow: 0;
  }
}

/*Responsive groesser 770px*/
@media all and (min-width: 770px) {
  #form_kontakt ~ div.form_row,
  #form_kontakt .p_right,
  #form_kontakt .wrap_zustimmung {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  section#section_top h1 {
    font-size: 42px;
  }
  .icon_input {
    left: 3%;
  }
  #div_kontakt_form {
    margin: 0 auto;
  }
  #div_kontakt_form .form_row {
    width: 60%;
    margin: 0 auto;
  }
  #div_kontakt_form button,
  .btn_start {
    max-width: 600px;
  }
  /*Button Pfeil*/
  #btn_txt_1.btn_start h2::before,
  #div_kontakt_form button #btn_txt_1::before {
    font-size: 25px;
  }

  #btn_txt_1.btn_start h2 {
    margin: 0 auto;
    font-size: 28px;
  }

  div.wp-block-column {
    flex-basis: 40%;
    flex-grow: 0;
  }
  section#section_quest h4,
  section#section_quest p {
    width: 80%;
    margin: 20px auto;
  }
}

/*Responsive groesser 820px*/
@media all and (min-width: 820px) {
  #btn_txt_1.btn_start h2 {
    margin: 0 auto;
    font-size: 30px;
  }
}

/* ====================================
  4. Sonstige Styles
===================================== */

/* ====================================
  Ende des Stylesheets
===================================== */