/*!
Theme Name: liiribaenz
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: liiribaenz
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

liiribaenz is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments



--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */



/* rubik-300 - latin */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300;
  src: url('https://neu.liiribaenz.ch/wp-content/themes/liiribaenz/fonts/rubik-v28-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-regular - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('https://neu.liiribaenz.ch/wp-content/themes/liiribaenz/fonts/rubik-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-700 - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  src: url('https://neu.liiribaenz.ch/wp-content/themes/liiribaenz/fonts/rubik-v28-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-800 - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  src: url('https://neu.liiribaenz.ch/wp-content/themes/liiribaenz/fonts/rubik-v28-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-900 - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  src: url('https://neu.liiribaenz.ch/wp-content/themes/liiribaenz/fonts/rubik-v28-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}





/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html, body {
   min-height: 100vh;
 }

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
  background: #7cc9b2 !important;
}



/* LAYOT Styling
========== */
:where(.wp-block-columns.is-layout-flex) {
    gap: 4em;
}

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

.oben-kein-unten-viel {
	margin-top: 0px !important;
	margin-bottom: 120px !important;
}


/* kein Kategorien-Link */

.wp-block-post-excerpt, .wp-block-post-excerpt__excerpt {
 /*	font-weight: 700; */
}

.taxonomy-category a, .taxonomy-post_tag a, .wp-block-post-terms__prefix {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    font-size: 80%;
}

.taxonomy-post_tag {
	line-height: 1.2;
	margin-top: 5px;
}

.taxonomy-category {
	line-height: 1
}



/* FONTS Styling
========== */

body {
	margin: 0;

}

p, body {
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	font-size: 1.1rem;
}

h1, h2, h3, h4 {
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	line-height: 1.25;
}

h1 {
	font-size: 2.9em;
	margin: 0.67em 0;
}

h2 {
	font-size: 1.9em;
	margin-block-start: 60px;
	margin-block-end: 10px;
}

h2.erster-Titel {
	margin-block-start: 12px;
}

h3 {
	font-size: 1.35em;
	margin-block-start: 43px;
	margin-block-end: 2px;
}

.portrait h2 {
	font-size: 1rem;
	font-weight: 700;
	margin-block-start: 30px;
	margin-block-end: 0px;
}

.portrait h3, .portrait p {
 font-size: 1rem;
 font-weight: 300;
 margin-block-start: 10px;
 margin-block-end: 0px;
}

@media all and (max-width: 780px) {
  .portrait h3, .portrait p {
    margin-block-start: 0px;
  }
}


/* Newsletter */
.contact_form input, .contact_form select {
    width: calc(100% + 100px) !important; /* Vergrößert die Breite um 100px */
    max-width: 400px; /* Optional: Setzt eine maximale Breite */
}

.contact_form p.text {
    margin: 10px 0;
    line-height: 33px;
}

.contact_form {
  font-size: 14px !important;
  padding: 0px !important;
}

#data_contact_email {
  margin-top: 6px;
  width: 330px !important;
  border-radius: 0px !important;
}

.contact_form .field_container {
    margin: 20px 0 !important;
}

.contact_form .submit_container {
  width: 260px;
  height: 30px;
}

.contact_form .wp-block-button {
    width: 260px;
    height: 70px;
}
.contact_form input {
  border: 0px solid !important;
      width: 200px !important;
          padding: 0 !important;
}

.contact_form .submit-button {
  border: 0px solid !important;
    color: #fff !important;
    width: 200px !important;
    padding: 0 !important;
}

input[type="submit"] {
  color: #fff !important;
  font-weight: 700;
}


/* WP Block Query
========== */

.wp-block-query ul {
	margin: 0;
}

.wp-block-query h2 {
	margin-block-end: 20px;
}

.wp-block-query li {
	margin-left: 0px;
	margin-bottom: 24px;
}

.wp-block-query .wp-block-post-title {
	margin-block-start: 2px;
	margin-block-end: 0px;
}



/* Ankerlink */

#auffuehrungen {
  scroll-margin-top: 260px; /* Etwas mehr als die Header-Höhe */
}

@media all and (max-width: 580px) {
  #auffuehrungen {
    scroll-margin-top: 220px; /* Etwas mehr als die Header-Höhe */
  }
}


/* spalte auf mobile nicht anzeigen */

@media all and (max-width: 580px) {
.display-none {
  display: none;
}
}


@media all and (max-width: 1080px) {
  :where(.wp-block-columns.is-layout-flex) {
      gap: 2.5em;
  }
}



main {
	display: block;
	max-width: 1100px;
	margin: 0 auto;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}


a {
	background-color: transparent;
}


b,
strong {
	font-weight: 700;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

.wp-block-buttons {
    margin-top: 50px;
    margin-bottom: 100px;
}

.wp-block-button {
  background: #714d6a;
  color: white;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  position: relative;
  clip-path: polygon(2% 2%, 95% 4%, 100% 92%, 0% 100%);
  transition: all 0.3s ease;
}

.wp-block-button__link {
  background: none !important;
 border-radius: 0px;
 padding: calc(.23em + 2px) calc(1.333em + 2px) calc(.267em + 2px) calc(.8em + 2px);
}

 .wp-block-button__link a {
 color: #fff
}

.wp-block-button:hover {
  background: #388b77;
  color: #fff !important;
}

a.wp-block-post-title :where(a), .wp-block-button a:hover, .wp-block-button a:visited {
  color: #fff !important;
}

details {
	display: block;
}

summary {
	display: list-item;
}


template {
	display: none;
}


[hidden] {
	display: none;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

body,
button,
input,
select,
optgroup,
textarea {
	color: #4f4a4a;
	font-family: 'Rubik', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

html {
  overflow: auto;
}

body {
  /* overflow: auto;  */
}


html {
	width: 100%;
}


#page {
	/* margin-top: 150px; */
  margin-top: 350px;

	height: 100%;
	width: 100%;
	min-height: calc(100vh - 350px);
	z-index: 90
}


#page .container-page {
	margin-top: 31px;
	margin-left: 20%;
	margin-right: 6%;
	margin-bottom: 6%;

}

header {
	margin: 0px auto 0px;
	/* position: sticky; */
  position: fixed;
	top: 0;
	height: 200px;
	width: 100%;
	z-index: 100;
}

.site-branding {
	margin-left: 20%;
	margin-right: 6%;
	position: relative;
	margin-top: 31px;

}

.logo-header {
		max-width: 1100px;
		margin: 0 auto;
}

.logo-header svg {
	margin: 0 24px;
}

body {
  margin: 0;
	width: 100%;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  place-items: center;
  position: relative;
}

/* Mintgrüner Hintergrund leicht gedreht */
.background {
  position: absolute;
  width: 100%;
  height: 100%;
background: linear-gradient(to bottom, #58caa8 0%, #7cc9b2 60%, #7cc9b2 100%);
	z-index: -1;
	left: 0;
}

/* Linker violetter Rand */
.border-left,
.border-right,
.border-top {
  position: fixed;
  background: #714d6a; /* Lila Farbe */
	z-index: -1;
}

/* Linker Rand */
.border-left {
  left: 0px;
  top: -10%;
  width: 20%;
  height: 120%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

/* Rechter Rand */
.border-right {
  right: 0px;
  top: -10%;
  width: 4%;
  height: 120%;
  clip-path: polygon(0% 0, 100% 0, 100% 100%, 65% 100%);
}


/* Oberer Rand mit unterschiedlicher Höhe links/rechts */
.border-top {
  left: 0px;
  top: 0;
  width: 100%;
  height: 260px; /* Maximale Höhe links */
  clip-path: polygon(0 0, 100% 0, 100% 180px, 0% 260px);
	z-index: 95;
}


.logo-icon {
	position: fixed;
	left: 2.5%;
	bottom: 15px;
	max-width: 10%;
	z-index: 10000000;
}





/* FOOTER
========== */

.entry-footer {
	display: none;
}

footer  {
	margin-left: 20%;
    margin-right: 4%;
    /* position: fixed; */
    bottom: 0px;
    height: auto;
    width: 76%;
    margin-bottom: 26px;
	padding-top: 26px;
}

.footer-widget p {
  margin-top: 0px;
  margin-bottom: 0px;
}

footer img {
	margin-bottom: 20px;
}

footer p {
	margin-left: 9px;
	margin-bottom: 1em;
  font-size: 89%;

}


main img {
    width: 100%;
    height: auto;
    clip-path: polygon(4% 4%, 90% 0%, 96% 100%, 0% 100%);
}




h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */


hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0 1em 0;
  padding-top: 0.5em;
  padding-bottom: 1.5em;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a, .wp-block-post-title :where(a) {
	color: #714d6a;
	 /* text-decoration-color: #8fefd2; */
   text-decoration-color: rgba(113, 77, 106, 0.4);
   text-decoration-line: underline;
  text-decoration-thickness: 3px;
    text-underline-offset: 3px;
}

a:hover, .wp-block-post-title :where(a):hover {
   text-decoration-color: rgba(255, 255, 255, 0.8);
}

a:visited {
	color: #714d6a;
}

a:hover,
a:focus,
a:active {
	color: #714d6a;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}



@media screen and (min-width: 781px) {

/* Posts and pages
--------------------------------------------- */
/* .sticky {
	display: block;
} */

.page .page, .post {
	  margin: 0 42px 60px 42px;
}
	
	.footer-widgets {
		margin-left: 42px;
	}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.entry-content p, .entry-content h2 {
  max-width: 780px;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
  width: 100%;
  z-index: 8000;
}

.custom-logo-link img {
  max-width: 450px;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/


/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
}




@media screen and (min-width: 1200px) {

  .tn-cont {
    margin-top: 35px !important;
  }

  .custom-logo-link img {
    max-width: 600px;
    }

  .border-top {
    left: 0px;
    top: 0;
    width: 100%;
    height: 290px;
    clip-path: polygon(0 0, 100% 0, 100% 190px, 0% 290px);
    z-index: 95;
  }
}



@media all and (max-width: 780px) {

	.post article, .page article {
		  margin: 0;
	}

	.border-left, .border-right {
		display: none;
	}

	#page .container-page, .site-branding {
		margin-left: 8%;
		margin-right: 8%;
	}
  .oben-kein-unten-viel {
  	margin-top: 0px !important;
  	margin-bottom: 60px !important;
  }

}







/* - - - - - - - */
/* NAVIGATION    */
/* - - - - - - - */

@media all and (min-width: 781px) {
.tn-cont {
  margin-top: 25px;
  margin-left: 20%;
  margin-right: 6%;
  margin-bottom: 6%;
}
}



@media all and (max-width: 780px) {
.tn-cont {
  margin-right: 8%;
  margin-left: 8%;
  margin-top: 32px;
}

.custom-logo-link img {
  max-width: 350px;
}

.menu-top-menu-container {
  width: 0px;
}

.menu-button-container {
    display: flex;
    z-index: 777;
    width: 55px;
    cursor: pointer;
    height: 120px !important;
    margin-top: 0px;
    z-index: 11000;
    align-items: end;
    flex-direction: column;
    width: 100%;
    position: fixed;
    right: 33px !important;
}

.menu-button {
    margin-top: 50px !important;
}
}


@media all and (max-width: 1580px) {
.menu-button-container {
  position: fixed;
    right: 50px;
  }
}




@media all and (max-width: 580px) {

.custom-logo-link img {
  max-width: 250px !important;
}

.menu-button, .menu-button::before, .menu-button::after {
    width: 30px !important;
}

.menu-button::after {
    margin-top: -10px !important;
}

.menu-button::before {
    margin-top: -10px !important;
}
.logo-icon {
    max-width: 13.33% !important;
}
}




.tn-cont-mw {
  max-width: 1100px;
  margin: 0 auto;
}

ul.menu {
	margin: 0;
	width: 100vw;
}

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #FFF;
  height: 155px;
  padding: 0 42px;
  margin: 0 auto;
  z-index: 10000;
}

.menu-button-container {
	display: flex;
	cursor: pointer;
	height: 180px;
	margin-top: 0px;
  z-index: 11000;
  width: 50px;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 2px;
  width: 40px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
	margin-top: 76px;
}


@media all and (min-width: 1201px) {
  .menu-button,
  .menu-button::before,
  .menu-button::after {
  	margin-top: 68px;
  }
}

.menu-button::before {
  content: '';
  margin-top: -14px;
}

.menu-button::after {
  content: '';
  margin-top: 14px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

.menu-top-menu-container > .menu > li {
  /* display: flex; */
	  display: inline-block;
  justify-content: center;
  margin: 0;
  padding: 0.5em 0;
  width: 100%;
  color: white;
}

.menu-top-menu-container > .menu {
  position: absolute;
  top: 0;
  /* padding-top: 320px; */
  padding-left: 0;
  left: 0;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.menu-top-menu-container > .menu > li:first-child {
	line-height: 22em;
}


@media (max-width: 1080px) {
  #menu-toggle:checked ~ .menu-top-menu-container > .menu a {
      font-size: 62px !important;
}
}


@media (max-width: 780px) {
.menu-top-menu-container > .menu > li:first-child {
	line-height: 23em;
}
}


@media (max-width: 580px) {
.menu-top-menu-container > .menu > li:first-child {
	line-height: 13em;
}
}




.menu-top-menu-container > .menu li {
	  align-items: center;
	top: 400px;
}

 #menu-toggle:checked ~ .menu-top-menu-container > .menu {
	height: 100vh;
	background-color: #7cc9b2;
  z-index: 10000;
}

#menu-toggle ~ .menu-top-menu-container > .menu li {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

 #menu-toggle ~ .menu-top-menu-container > .menu a {
	 display: none;
 }

 #menu-toggle:checked ~ .menu-top-menu-container > .menu a {
	 display: inline-block;
    font-size: 82px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    text-decoration: none;
    line-height: 1.1;
 }

#menu-toggle:checked ~ .menu-top-menu-container > .menu li {
  border: 0px solid #333;
  padding: 2.2em 0.5em;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-top-menu-container .menu > li:not(:last-child) {
  border-bottom: 0px solid #444;
}





/* tablets */
@media all and (max-width: 780px) and (min-width: 501px) {

  .menu-top-menu-container > .menu {
    padding-top: 120px;
  }

  #menu-toggle:checked ~ .menu-top-menu-container > .menu a {
    font-size: 44px !important;
  }

  #menu-toggle:checked ~ .menu-top-menu-container > .menu li {
    height: 4.75em;
  }

  .top-nav {
    height: 100px;
        padding: 0px 26px 0 26px;
      }
}




/* mobile */
@media all and (max-width: 580px) {

#menu-toggle:checked ~ .menu-top-menu-container > .menu a {
  font-size: 38px !important;
}

#menu-toggle:checked ~ .menu-top-menu-container > .menu li {
  height: 3.75em;
}

.top-nav {
  height: 90px;
  padding: 0;
}

.border-top {
    height: 190px;
    clip-path: polygon(0 0, 100% 0, 100% 140px, 0% 190px);
    z-index: 95;
}

#page {
  /* margin-top: 100px; */
    margin-top: 230px;
}
}




@media all and (max-width: 1000px) {
  body h1 {
    font-size: 1.85em;
  }
  body h2 {
    font-size: 1.6em  }
  body h3 {
    font-size: 1.4em;
  }
}