/*
Theme Name: Vielsaitig
Theme URI:
Description: Template für Vielsaitig Website auf http://vielsaitig.de
Author: Marie-Odile Schwarzhoff
Author URI: http://vielsaitig.de
*/

/* CAVEAT */
@font-face {
    font-family: "Caveat Regular";
    src: url("fonts/Caveat-VariableFont_wght.ttf") format('truetype');
    font-weight: 400;}

/* HIND */
@font-face {
    font-family: "Hind Light";
    src: url("fonts/Hind-Light.ttf") format('truetype');
    font-weight: 300;}

@font-face {
    font-family: "Hind Regular";
    src: url("fonts/Hind-Regular.ttf") format('truetype');
    font-weight: 400;}

@font-face {
    font-family: "Hind Medium";
    src: url("fonts/Hind-Medium.ttf") format('truetype');
    font-weight: 500;}

@font-face {
    font-family: "Hind Bold";
    src: url("fonts/Hind-Bold.ttf") format('truetype');
    font-weight: 700;}


/* HEADER & NAVIGATION */
#header {
  display: none;
  width: 100%;
  padding: 15px 15px;
  border-bottom: solid 5px #8bc34a;}

#logo {
  float: left;}

#logo img {
	display: block;
	width: 100%;
  max-width: 150px;
  padding: 0;}

#navigation {
  display: table;
  height: 75px;
  vertical-align: middle;
  text-align: right;
  float: right;}

#main {
  width: 100%;
  padding: 0;}

.main-menu {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  width: 100%;}

.main-menu, .main-menu ul {
  font-family: 'Hind Medium', serif;
  font-size: 15px;
  line-height: 0px;
  text-transform: uppercase;}

.main-menu li, .main-menu ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;}

.main-menu a {
  color: #212121;
  padding: 0;
  text-decoration: none;
  margin-right: 25px;}

.main-menu a:hover, .main-menu a:focus {
  color: #8bc34a;
  border-bottom: 0px solid #212121;}

#menu-item-55 a, .menu-item-55 a {
  padding: 10px;
  background-color: #ffc107;
  text-align: center !important;
  border-radius: 10px;
  margin:0px;}

#menu-item-55 a:hover, #menu-item-55 a:focus, .menu-item-55 a:hover, .menu-item-55 a:focus {
  background-color: #f2b807 !important;
  color: #212121 !important;}

.current_page_item a, .current-menu-item a {
  color: #8bc34a !important;}

#menu-item-55.current-menu-item a, .menu-item-55.current-menu-item a {
  color: #212121 !important;}


/* TEXT */
h1 {
	margin:0px;}

.entry h2, h2 {
  display: block !important;
  font-family: 'Hind Bold';
  font-size: 25px;
  line-height: 25px;
  margin: 0 0 20px;
  padding: 0 0 6px 0;
  text-transform: uppercase;}

.entry h2.subheadline, h2.subheadline {
  font-family: 'Caveat Regular';
  font-size: 25px;
  line-height: 25px;
  margin: 0px;
  padding: 0 0 6px 0;
  text-transform: none;}

h3 {
  font-family: 'Caveat Regular';
  font-size: 24px;
  line-height: 30px;
  margin: 0px;}

h4 {
  font-family: 'Hind Bold';
  font-size: 20px;
  line-height: 26px;
  margin: 20px 0 0;}

h5 {
  font-family: 'Hind Bold';
  font-size: 20px;
  line-height: 26px;
  text-transform: uppercase;
  margin: 40px 0 10px 0;}

h6 {
  font-family: 'Hind Bold';
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  margin: 25px 0 0;}

.zitat h6 {
  margin-top: 0;}

.milestone-block h6 {
  background-color: #ffffff;
  padding-top: 5px; }

p {
  font-family: 'Hind Regular';
  font-size: 16px;
  line-height: 22px;
  color: #212121;
  margin: 0px;
  padding: 0px;}

.block-green p, .block-green h6 {
  color: #ffffff;}

p a {
  color: #8bc34a;}

p a:focus, p a:hover {
  color: #8bc34a;
  text-decoration: underline;}

sub, sup {
  font-size: 12px;
  color: #ffffff;}

strong {
  font-family: 'Hind Bold';
  font-weight: normal;
}

.legende {
  font-size: 13px;
  line-height: 20px;}

ul {
  margin-bottom: 0;}

.list ul {
  padding-left: 20px;}

.list ul, .list li {
  list-style:url(img/list-note.png);
  list-style-position: outside;
  font-size: 16px;
  text-align: left;
  line-height: 22px;
  padding: 0;
  margin: 0;}

.zitat-small {
  font-family: 'Hind Regular';
  font-size: 16px;
  line-height: 22px;
  color: #ffffff;
  margin: 0px;}

.zitat-big {
  font-family: 'Caveat Regular';
  font-size: 30px;
  line-height: 36px;
  color: #ffffff;
  margin: 0px;}

.facts-number {
  font-family: 'Hind Bold';
  font-size: 35px;
  color: #212121 !important;
  text-align: center;
  line-height: 41px;}

.facts-description {
  font-family: 'Caveat Regular';
  font-size: 30px;
  color: #212121 !important;
  text-align: center;
  line-height: 36px;}

.milestone-year {
  font-family: 'Hind Bold';
  font-size: 40px;
  color: #ffffff;
  text-align: center;
  line-height: 46px;}

.milestone-description {
  background-color: #ffffff;
  padding: 5px 0;}

.contact {
  line-height: 28px;
  padding-top: 20px;}

.birthday sub {
  color: #212121;}


/* BLÖCKE */
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #ffffff;
  font-family: 'Hind Regular';
  font-size: 16px;
  line-height: 22px;
  color: #212121;}

.wrap {
	margin: 0 auto;
	max-width: 1075px;
	position: relative;}

.row {
	max-width: 100%;
  float: left;}

.wp-block-column .wp-block-column, .wp-block-columns {
  padding: 0px ;
  margin: 0px ;
  margin-bottom: 0px !important;}

.wp-block-column {
  padding: 40px 15px ;}

.wp-block-columns {
  justify-content: center;}

.wp-block-column .wp-block-column .facts {
  display: table;
  height: 240px;
  background: url("img/number-circle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 15px !important;
  padding: 30px;}

.facts .facts-cell {
  display: table-cell;
  vertical-align: middle;}

.milestone-block {
  background: url("img/milestone-line.png");
  background-repeat: repeat-y;
  background-position: center;
  background-size: auto;}

.wp-block-column .milestone {
  display: table;
  height: 95px;
  background: url("img/milestone-circle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: 25px;}

.milestone-block .wp-block-columns:first-of-type .milestone {
  margin-top: 0px;
}

.milestone .milestone-year {
  display: table-cell;
  vertical-align: middle;}

.wp-block-column .zitat {
  margin-bottom: 25px !important;}

.block-green {
  background-color: #abbd97;
  color: #ffffff;}

.block-yellow {
  background-color: #ffc107;}

.block-grey {
  background-color: #bdbdbd;
  color: #ffffff;}

.block-birthday {
  background: url("img/birthday-background.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;}

.block-birthday-text {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px !important;}

.wp-block-table {
  border-radius: 5px;
  margin: 0 0 20px 0;}

.last {
  margin-right: 0px ;
  padding-right: 0px ;
  border-right: 0px !important;}

.first {
  margin-top: 0px ;
  margin-left: 0px ;
  padding-left: 0px ;
  border-left: 0px ;}

.wp-block-image {
  margin: 0px !important;}

#cookie-law-info-bar {
  z-index: 100000 !important;}

.pum-container {
top: 235px !important;}

.popmake-content {
  background: url("img/birthday-background-box.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
  background-size: 150% !important;
  padding: 25px;}


/* BUTTONS & LINKS */
.wp-block-buttons {
  display: block !important;
  text-align: center;
  padding: 0;}

.wp-block-button {
  border-radius: 10px;
  padding: 0;
  margin: 25px 0 0 !important;}

.wp-block-button a {
  font-family: 'Hind Bold';
  font-size: 18px;
  text-align: center;
  border-radius: 10px;
  padding: 15px;}

.cta {
  background-color: #ffffff;
  border: 1px solid #212112;
  /*transition: background-color 300ms ease-out;*/}

.cta a {
  background-color: #ffffff;
  color: #212121;}

.cta a:hover, .cta a:focus {
  background-color: #f2f2f2;
  color: #212121;}

.cta a.wp-block-button__link {
  color: #212121;}

.contact-cta {
  float: right !important;
  width: 245px !important;
  height: 45px !important;
  background-color: #ffc107 !important;
  border: 1px solid #ffffff !important;
  font-family: 'Hind Bold';
  font-size: 18px !important;
  color: #212121 !important;
  padding: 15px !important;
  border-radius: 10px !important;}

.contact-cta:hover, .contact-cta:focus {
  background-color: #f2b807 !important;}

.button, .button a {
  background-color: #8bc34a;
  border: 0px;}

.button a {
  background-color: #8bc34a;
  color: #ffffff;}

.button a:hover, .button a:focus {
  background-color: #81b545;
  color: #ffffff;}

p.back-link {
  margin-bottom: 10px;}

p.back-link a:before {
    content: "« ";}

.instrument-link {
  font-family: 'Hind Semibold';
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  margin-top: 15px !important;}

.instrument-link a {
  color: #ffffff;
  text-decoration: none;}

.instrument-link a:hover, .instrument-link a:focus {
  color: #ffffff;
  text-decoration: underline;}

.instrument-link a:after, .text-link a:after, .wpforms-field-description a:after, a.more-link:after  {
  content: " »";}

.wpforms-field-description a {
  font-family: 'Hind Regular';
  font-size: 16px !important;
  color: #ffffff;}

.birthday-button {
  text-align: center;}

.birthday-button a {
  font-family: 'Hind Bold';
  font-size: 18px;
  text-align: center;
  background-color: #cba438;
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 15px 0 50px 0;}

.birthday-button a:hover, .birthday-button a:focus {
  background-color: #ccb166;}

button.popmake-close {
  font-family: 'Hind Regular', serif !important;
  font-size: 14px !important;
  color: #212121;}

button.popmake-close:before {
  content: "\00D7";
  font-size: 20px;
  text-decoration: none !important;
  position: relative;
  top: 3px;}


/* TABELLE */
table {
  width: 100%;
  border: 0;
  color: #ffffff;
  font-family: 'Hind Regular', serif;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 0px;}

th, thead {
  border: 0;
  background-color: #6a755e;
  color: #ffffff;
  font-family: 'Hind Bold', serif;
  font-size: 20px;}

tbody, tr, td {
  border: 0;
  background-color: #abbd97;}

.birthday tbody, .birthday tr, .birthday td {
  background-color: #dbe5cf;
  color: #212121; }

th, tbody {
  padding: 25px !important;}

td {
  padding: 15px 10px 10px !important;}


/* IMAGES */
.img-overflow {
  text-align: center;
  padding-top: 25px; }

.img-overflow img {
  max-width: 300px !important;
  width: 100%;}

.img-left {
  padding-bottom: 25px;}

.offer-img {
  text-align: center;
  padding-top: 30px;}

.offer-img img {
  width: 100%;}

.instrument-link img {
  object-fit: contain !important;}

.team-portrait img {
  max-width: 195px !important;
  width: 100%;
  float: left;
  shape-outside: url(img/team-portrait.png);
  shape-image-threshold: 0.0;
  shape-margin: 15px;}

.error-img {
  text-align: center;}

.error-img img {
  max-width: 600px !important;}

.birthday-box-img {
  position: absolute;
  top: -219px;
  left: 25%;}

.birthday-box-img img {
  height:260px !important;}

.birthday-img {
  text-align: center;
  padding-top: 25px;}

.birthday-img img {
  max-width: 200px !important;
  width: 100%;}


/* FORMULAR */
.wpforms-container .wpforms-container-full, .wpforms-field-container, .wpforms-submit-container, input.wpforms-field-medium, select.wpforms-field-medium {
  max-width: 700px !important;}

select.wpforms-field-medium {
  padding: 2px !important;}

.wpforms-field-label {
  float: left !important;
  width: 270px !important;
  font-family: 'Hind Regular';
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  color: #ffffff;
  padding-top: 5px !important;}

.wpforms-field-medium option {
  font-family: 'Hind Regular' !important;
  font-size: 16px !important;}

.wpforms-field-label-inline {
  color: #ffffff;}

.wpforms-field-textarea .wpforms-field-label {
  width: 100% !important;}

.wpforms-field-textarea .wpforms-field-medium {
  height: 200px !important;}

.wpforms-field-medium {
  padding: 5px !important;
  height: 30px !important;}

.wpforms-required-label {
  color: #ffffff !important;}

select {
  -webkit-appearance: menulist;}

.wpforms-confirmation-container-full {
  background-color: inherit !important;
  border: 0 !important;
  padding: 0 !important;}


/* FOOTER */
#footer {
  width: 100%;
  background-color: #757575;
  font-family: 'Hind Regular';
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  padding: 40px 0;}

#footer a {
  color: #ffffff;}

#footer a:hover, #footer a:focus {
  text-decoration: underline;}

.left {
  float: left;
  margin: 0px;
  padding: 0px;}

.right {
  float: right;
  margin: 0px;
  padding: 5px 0px;}

.seperator {
  border-top: 2px #aaaaaa solid;
  padding-top: 25px; }

.copyright {
  float: left;
  padding-left: 15px;}

.columns, .columns.first {
  padding: 0 15px;
  margin-bottom: 50px;}

.clear {
  clear: both;}

.footer-menu {
  padding: 0 15px;}

.footer-menu {
  display: table;
  float: left;
  font-family: 'Hind Regular';
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  padding: 0 15px;}

.footer-menu .nav {
  display: block !important;}

.footer-menu li, .footer-menu ul {
  display: inline;
  font-family: 'Hind Regular';
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  margin: 0;
  padding: 0;
  list-style: none;}

.footer-menu li:after {
  content: " | "}

.footer-menu li:last-child:after {
  content: ""}

.social-links {
  font-size: 28px;}



/* dreispaltig Wordpress */
@media only screen and (min-width: 600px) {
  .entry h2, h2 {
    font-size: 30px;
    line-height: 30px;}

  .entry h2.subheadline, h2.subheadline {
    font-size: 30px;
    line-height: 30px;}

  .zitat {
    margin-right: 15px ;
    margin-left: 15px ;}

  .wp-block-column .zitat {
    margin-bottom: 0px !important;}

  .wp-block-table {
    margin: 0 12px 12px 12px ;}

  .wp-block-column .wp-block-column .facts {
    margin-left: 12px ;
    margin-right: 12px ;}

  .img-overflow {
    position: absolute;
    padding: 0 15px 0 25px;}

  .img-overflow {
    max-width: 500px !important;}

  .img-left {
    padding-bottom: 0px;}
}

/* dreispaltig Foundation */
@media only screen and (min-width: 640px) {
  .columns {
    border-right: 2px #aaaaaa solid;
    float: left;
    padding: 0 15px;
    margin-bottom: 25px;}

  td {
    padding: 15px 10px 10px !important;}
}

@media only screen and (min-width: 705px) {
  input.wpforms-field-medium, select.wpforms-field-medium {
    max-width: 60% !important;}
}

@media only screen and (min-width: 782px) {
  .zitat {
    margin-bottom: 0 !important;}

  .fact {
    margin-bottom: 0px;
  }

  .wp-block-table {
    margin-bottom: 0;}
}

@media only screen and (min-width: 880px) {
  #header {
    display: block;
  }
}

/* zentriert mit Rand */
@media only screen and (min-width: 1075px) {
  .columns.first {
    padding-left: 0px ;}

  .columns.last {
    padding-right: 0px;}

  .copyright {
    padding: 0;}
}