/*
Theme Name: GeneratePress Child
Template: generatepress
*/

/*
LAST UDPATE / 2026.9.3.21.22
*/

/* //////////////////////////////////////////////////////////////////// WP ADMIN BAR */


/*
 * #wpadminbar {
  top: -32px;
}
*/

@media screen { 
  html { 
    margin-top: 0 !important; 
  }
}
@media screen and ( max-width: 783px ) { 
  #wpadminbar {
    top: -46px;
  }

  html { 
    margin-top: 0 !important;
  }
}


/* //////////////////////////////////////////////////////////////////// EDITOR */

.editor-styles-wrapper .wp-block-group.bone {
  background: var(--bone);
}
.editor-styles-wrapper .wp-block-group.beige {
  background: var(--beige);
}
.editor-styles-wrapper .wp-block-group.chocolate {
  background: var(--chocolate);
}
.editor-styles-wrapper .wp-block-group.granite {
  background: var(--granite);
}
.editor-styles-wrapper .wp-block-image {
  position: relative;
}
.editor-styles-wrapper .wp-block-image figcaption {
  z-index: 3;
  position: absolute;
  padding: 20px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}
.editor-styles-wrapper .wp-block-image.caption-left-bottom figcaption {
  bottom: 0;
  left: 0;
}
.editor-styles-wrapper .wp-block-image.caption-right-bottom figcaption {
  bottom: 0;
  right: 0;
}
.editor-styles-wrapper .wp-block-image.caption-right-top figcaption {
  top: 0;
  right: 0;
}
.editor-styles-wrapper .wp-block-image.caption-left-top figcaption {
  top: 0;
  left: 0;
}

/* //////////////////////////////////////////////////////////////////// MAIN FRAME */

body,
html {
  padding: 0;
  margin: 0;
  max-width: 100vw;
  width: 100vw;
  font-size: 1em;
  line-height: 1.7em;
  box-sizing: border-box;
}
body *,
html * {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--white);
  padding-top: 0;
}
.site {
  min-height: calc(100vh - 200px);
}

.grid-container,
.one-container .site-content {
  max-width: 100%;
  padding: 0;
}


.wp-block-group.center .wp-block-group__inner-container {
  text-align: center;
}
.wp-block-group.center .wp-block-group__inner-container >h2,
.wp-block-group.center .wp-block-group__inner-container >h3,
.wp-block-group.center .wp-block-group__inner-container >p {
  margin-left: auto;
  margin-right: auto;
}
.wp-block-group.narrow .wp-block-group__inner-container {
  max-width: 1024px;
}
.wp-block-group.section {
  max-width: 100vw;
}
.wp-block-group.section.only-section {
  min-height: calc(100vh - 200px);
}
.wp-block-group.section.only-section figure {
  height: calc(100vh - 200px);
}
.wp-block-group.section .wp-block-group__inner-container {
  padding: 110px 24px;
}

/* //////////////////////////////////////////////////////////////////// TEXTS */

h2 {
  line-height: 0.75em;
  letter-spacing: -0.1em; 
}
h2.wp-block-heading {
  margin-bottom: 30px;
}

h2,
h3 {
  word-wrap: normal;
}
h2,
h3,
p {
  width: 100%;
}
p {
  padding-left: 4px;
}
p strong {
  font-weight: 500;
  color: var(--granite);
}
p.has-small-font-size {
  line-height: 1.6em;
}
.pushed-right {
  padding-top: 1em;
  padding-left: 40px;
}
@media (max-width: 600px) {
  .pushed-right {
    padding-left: 0;
  }
}
.text-content {
  width: 100%;
  max-width: 783px;
  margin-left: auto;
  margin-right: auto;
  row-gap: 2em;
}
.max-content {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  row-gap: .5em;
}
h3 {
  line-height: 0.85em;
  margin-bottom: 0.5em;
}
.is-layout-flex > h3 {
  margin-bottom: 0.5em;
}
h3.tagline {
  padding-left: 40px;
}
@media (max-width: 600px) {
  h3 {
    font-size: 2.4em;
    line-height: 1em;
  }
  h3.tagline {
    padding-left: 0;
  }
}


/* //////////////////////////////////////////////////////////////////// MAIN LOGO */

.logo-svg {
  width: 240px;
  height: 54px;
  border-radius: 20px;
  padding: 0 18px 2px;
  background: rgb(255 255 255 / 0%);
  display: flex;
  position: fixed;
  top: 8px;
  left: 8px;
  align-items: center;
  transition: width 300ms ease-in-out, transform 200ms ease-out;
}
.logo-svg svg {
  width: 100%;
  height: auto;
  display: block;
}
.logo-svg svg path {
  fill: var(--granite);
}
.home .logo-svg {
  width: 40vw;
  transform: translate(30vw, 20vh);
}
@media (max-width: 783px) {
  .home .logo-svg {
    width: 60vw;
    transform: translate(20vw, 20vh);
  }
}
@media (max-width: 783px) {
  .home .logo-svg {
    width: 80vw;
    transform: translate(10vw, 20vh);
  }
}
.is-scrolled .logo-svg {
  width: 240px;
  background: rgb(255 255 255 / 60%);
  transform: translate(0, 0);
}
@media (max-width: 783px) {
  .logo-svg {
    display: flex !important;
  }
}

/* //////////////////////////////////////////////////////////////////// HEADER NAV */

.site-header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  display: flex;
  flex-flow: row nowrap;
}
.blog .site-header {
  display: none;
}
.site-header .inside-header {
  padding: 0;
}
.site-header .inside-header a {
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.site-header .inside-header,
.site-header .inside-navigation {
  width: 100%;
  flex: 1 1 auto;
}
.site-header .inside-navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row nowrap;
  width: 100%;
}
.main-navigation .main-nav ul {
  border-radius: 20px;
  height: auto;
  display: flex;
  align-items: stretch;
  padding: 0 12px;
}
.main-navigation .main-nav ul li,
.main-navigation .main-nav ul li a {
  height: auto !important;
  line-height: 1em;
}

.main-navigation .main-nav ul li {
  display: flex;
  align-items: stretch;
}
.main-navigation a,
.main-navigation .main-nav ul li a {
  display: flex;
  align-items: center;
}
.home .main-nav ul {
  background: rgba(255,255,255,0);
}
.home.is-scrolled .main-nav ul {
  background: rgba(255,255,255,0.6);
}
.site-header .main-nav {
  margin: 0;
  padding: 8px;
  flex:  0 0 auto;
  height: 70px;
  display: flex;
}
.main-navigation {
  width: 100%;
  line-height: 1em;
}



.nav-float-right #site-navigation {
  margin: 0 !important;
}


/* //////////////////////////////////////////////////////////////////// BLOG HEADER */

.blog-intro {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 1em;
  justify-content: center;
}
.blog-intro >* {
  flex: 0 0 auto;
}
.blog-intro a {
  display: flex;
  height: 50px;
}
.blog-intro a svg path {
  fill: var(--accent);
}
.blog-intro h2 {
  padding-top: 4px;
  margin-left: -4px;
  width: auto;
  color: #000;
}

/* //////////////////////////////////////////////////////////////////// IMAGES */

.wp-block-image {
  position: relative;
}
.wp-block-image.min-height {
  min-height: 40vh;
}
.wp-block-image figcaption {
  z-index: 3;
  position: absolute;
  padding: 20px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}
.wp-block-image.caption-left-bottom figcaption {
  bottom: 0;
  left: 0;
}
.wp-block-image.caption-right-bottom figcaption {
  bottom: 0;
  right: 0;
}
.wp-block-image.caption-right-top figcaption {
  top: 0;
  right: 0;
}
.wp-block-image.caption-left-top figcaption {
  top: 0;
  left: 0;
}

/* //////////////////////////////////////////////////////////////////// FEAT IMG */

.page-header-image {
  width: 100%;
  max-width: 100% !important;
  max-height: 55vh;
  height: 55vh;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
  display: flex;
  position: relative;
  z-index: 9;
  background-color: var(--beige);
}
.page-header-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  opacity: .4;
}
 
#intro {
  padding-top: 0;
  animation: introShrink 300ms ease;
}

#intro h2 {
  color: var(--granite);
  padding: 0;
  position: absolute;
  top: 31vh;
  width: 100%;
  z-index: 10;
  animation: introUp 300ms ease;
}

@keyframes introDown {
  0% {
    transform: translateY(-10vh);
  }
  100% {
    transform: translateY(0vh);
  }
}
@keyframes introUp {
  0% {
    top: 50vh;
  }
  100% {
    top: 31vh;
  }
}
@keyframes introGrow {
  0% {
    transform: translateY(-117px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes introShrink {
  0% {
    padding-top: 117px;
  }
  100% {
    padding-top: 0;
  }
}

#intro h2 em{
  display: block;
  font-size: 80%;
  margin-top: 17px;
  letter-spacing: -0.1em;
}

#intro > .wp-block-group__inner-container p {
  width: 100%;
  max-width: 700px;
}


.is-scrolled #intro h2 {
  position: relative;
  top: 0;
  animation: introDown 300ms ease;
}
.is-scrolled #intro {
  animation: introGrow 300ms ease;
}


/* //////////////////////////////////////////////////////////////////// DOT BAR */

.dot-bar {
  font-size: 0.7em;
  line-height: 1.4em;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mokka);
  margin-top: 20px !important;
  margin-left: 20px !important;
}
.dot-bar li {
  padding-left: 6px;
  padding-bottom: 10px;
  word-wrap: normal;
}

/* //////////////////////////////////////////////////////////////////// COLOR COMBINATIONS */

.wp-block-group.bone {
  background: var(--bone);
}
.wp-block-group.beige {
  background: var(--beige);
}
.wp-block-group.chocolate {
  background: var(--chocolate);
}
.wp-block-group.chocolate h2 {
  color: var(--white);
}
.wp-block-group.granite {
  background: var(--granite);
}

/* //////////////////////////////////////////////////////////////////// LAYOUT */

@media (max-width: 600px) {
  .wp-block-group.section .wp-block-group__inner-container {
    padding: 60px 50px;
  }
}
.wp-block-group.section.full-width .wp-block-group__inner-container {
  max-width: 100vw;
}
.wp-block-group.section.img-split .wp-block-group__inner-container {
  padding: 0;
}
.wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex {
  align-items: stretch;
}
.wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex >.is-vertical,
.wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex >figure {
  flex: 1 1 auto;
  width: calc(50% - 2em);
}
.wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex >figure {
  position: relative;
  width: 50%;
  flex: 1 1 auto;
}
.wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex >figure img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
@media (max-width: 783px) {
  .wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex {
    flex-direction: column;
  }
  .wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex >.is-vertical,
  .wp-block-group.section.img-split .wp-block-group__inner-container .is-nowrap.is-layout-flex >figure {
    width: 100%;
  }
}
.padded {
  padding: 50px 50px 70px;
}
@media (max-width: 600px) {
  .padded {
    padding: 60px 50px;
  }
}
.padded-xs {
  padding: 8px;
}
.row-right {
  justify-content: flex-end;
}


/* //////////////////////////////////////////////////////////////////// LOGOS */

.logos {
  padding-top: 2em;
  margin-bottom: 32px;
  row-gap: 0em;
  column-gap: 4em;
}
.logos svg {
  height: 170px;
  width: auto;
}
.logos svg path {
  fill: var(--chocolate);
}
@media (max-width: 783px) {
  .logos {
    padding-top: 2em;
  }
  .logos svg {
    height: 8em;
  }
}
.half {
  width: 50%;
}
@media (max-width: 783px) {
  .half {
    width: 100%;
  }
}

/* //////////////////////////////////////////////////////////////////// CONTACT FORM */

.forminator-guttenberg {
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
  padding: 1em;
}
.forminator-guttenberg form {
  margin-bottom: 0 !important;
}
.forminator-edit-module {
  display: none;
}

.forminator-row {
  display: flex;
  flex-flow: row nowrap;
  gap: 0;
}

.forminator-row >div {
  width: 50%;
}

.forminator-row >div.forminator-field-checkbox,
.forminator-row >div.forminator-field-textarea {
  width: 100%;  
}

.forminator-ui.forminator-design--default .forminator-description,
.forminator-ui.forminator-design--default .forminator-description p {
  position:absolute;
  top: 10px;
  right: 10px;
  font-size: 9px !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  margin: 0 !important;
  pointer-events: none;
  opacity: .8;
}

.forminator-ui.forminator-custom-form[data-design=default] .forminator-description::after {
  display: none !important;
}

.forminator-field {
  position: relative;
}
.forminator-field input,
.forminator-field textarea {
  border-radius: 11px !important;
  letter-spacing: -0.01em !important;
  font-size: 15px !important;
  line-height: 1em !important;
  background: white;
  border: none !important;
  box-shadow: 0 0 0 1px rgb(178 121 104 / 0%) !important;
  font-family: inherit;
}

.forminator-field input:hover,
.forminator-field textarea:hover {
  box-shadow: 0 0 0 3px rgb(155 139 130 / 60%) !important;
  background: rgb(255 255 255 / 80%);
}
.forminator-field input:focus,
.forminator-field textarea:focus {
  box-shadow: 0 0 0 3px rgb(178 121 104 / 60%) !important;
  background: white;
}

.forminator-field input {
  padding: 0 20px 0 16px !important;
  height: 46px !important;
  display: inline-flex;
  align-items: center;
}

.forminator-field textarea {
  padding: 14px !important;
}

.forminator-field label {
  font-size: 0 !important;
}

.forminator-ui.forminator-design--default .forminator-label .forminator-required {
  font-size: 24px;
  font-weight: bold;
  line-height: 10px;
  height: 10px;
  display: block;
  position: absolute;
  top: 17px;
  right: 10px;
  color: #e94819 !important;
  mix-blend-mode: multiply !important;
}

 .forminator-field-checkbox label.forminator-checkbox {
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  align-items: flex-start !important;
}

.forminator-field-checkbox .forminator-label {
  display: none !important;
}
.forminator-field-checkbox >div {
  display: flex;
  flex-direction: column;
}
.forminator-row.forminator-row-last .forminator-col {
  display: flex !important;
  justify-content: flex-end !important;
}
.forminator-ui button.forminator-button.forminator-button-submit.forminator-hidden {
  display: block !important;
  pointer-events: none;
  background-color: gray;
  opacity: .4;
  cursor:not-allowed;
}


.legal-links {
  max-width: 800px;
  padding: 0 1em 0 3em;
  letter-spacing: -0.01em;
  font-size: 14px;
  line-height: 1em;
  transform: translate(2px,-141px);
  pointer-events: none;
  display: none;
}

.legal-links a {
  pointer-events: all;
}

/* //////////////////////////////////////////////////////////////////// COPYRIGHT BAR */

.copyright-bar {
  min-height: 200px;
  padding: 40px;
  background: var(--beige);
  flex: 1 1 100%;
}
.copyright-bar svg {
  width: 260px;
  height: auto;
}
.copyright-bar svg path {
  fill: var(--bone);
}


/* //////////////////////////////////////////////////////////////////// POSTS */

.wp-block-latest-posts {
  gap: 0;
}

.wp-block-latest-posts li {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 90%;
  
}
.wp-block-latest-posts li .wp-block-latest-posts__featured-image {
  width: 100%;
  padding-top: 70%;
  margin: 0 0 20px 0 !important;
  position: relative;
}
.wp-block-latest-posts li .wp-block-latest-posts__featured-image::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--beige);
  opacity: 0.5;
  transition: opacity 300ms ease-in-out;
}
.wp-block-latest-posts li .wp-block-latest-posts__featured-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  pointer-events: none;
  top:  0;
  left: 0;
}
.wp-block-latest-posts li .wp-block-latest-posts__post-title {
  font-size: 1.6em;
  letter-spacing: -0.03em;
  font-weight: 300;
  margin-bottom: 0.5em;
}
.wp-block-latest-posts li .wp-block-latest-posts__post-title::after {
  content: '';
  display: block;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: all;
  width: 100%;
  height: 100%;
}
.wp-block-latest-posts li .wp-block-latest-posts__post-author,
.wp-block-latest-posts li .wp-block-latest-posts__post-date {
  color: var(--chocolate);
  line-height: 1.6em;
}
.wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image::after {
  opacity: 0;
}


/* //////////////////////////////////////////////////////////////////// tablet stuff */

@media (max-width: 783px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
  }
  .main-navigation.mobile-menu-control-wrapper {
    display: none;
  }
  .main-navigation ul {
    display: block !important;
  }
  .is-layout-grid {
    display: block !important;
  }
  .is-layout-grid >.padded-xs {
    margin-bottom: 2em;
    padding: 0;
  }
  .wp-block-latest-posts.columns-3 {
    margin-top: 2em;
  }
  .wp-block-latest-posts.columns-3 li {
    width: 100%;
  }
  .contact-info.is-layout-flex {
    display: block;
  }
  .contact-info.is-layout-flex >.half {
    margin: 2em auto 4em;
    align-items: flex-end;
  }
  .contact-info.is-layout-flex >.half .is-vertical {
    width: 80vw;
  }
}

/* //////////////////////////////////////////////////////////////////// BLOG */

.post.type-post,
.comments-area {
  padding: 2em;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.comments-area form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.comments-area form input {
  margin-left: 10px;
}
.comments-area form input:first-child {
  margin-left: 0;
}
.single-post {
  padding-top: 40px;
}
.post.type-post h2 {
  font-size: 3.4em;
  line-height: 1em;
  letter-spacing: -0.09em;
  font-weight: 400;
  font-style: normal;
}
.post.type-post .entry-meta {
  overflow: visible;
  height: 1px;
  color: #fff;
  position: relative;
  font-weight: 500;
}
.post.type-post .entry-meta a {
  color: inherit;
}
.post.type-post .entry-meta .posted-on,
.post.type-post .entry-meta .byline {
  position: absolute;
  z-index: 3;
  left: 30px;
}
.post.type-post .entry-meta .posted-on {
  top: 70px;
  font-size: 0.9em;
  letter-spacing: 0.05em;
}
.post.type-post .entry-meta .byline {
  top: 40px;
}
.post.type-post .post-image {
  margin-top: 10px;
  width: 100%;
  height: 30vh;
  overflow: hidden;
  position: relative;
}
.post.type-post .post-image::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
  background: var(--chocolate);
  opacity: 0.6;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.post.type-post .post-image img {
  position: absolute;
  z-index: 1;
}

/* //////////////////////////////////////////////////////////////////// CV CARDS */


.cvs {
  gap: 5em;
}

.cv-card {
  background-color: var(--bone);
  gap: 0;
  padding: 2em 3em;
}


.cv-card .wp-block-image {
  height: 250px;
  width: 250px;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-bottom: 2em;
}

.cv-card .wp-block-image img {
  height: 320px;
  width: 320px;
  flex: 0 0 auto;
  max-height: 320px;
  max-width: 320px;
  object-fit: cover;
}

.cv-card p {
  font-size: 90%;
  color: var(--granite);
}

.cv-card p.has-small-font-size {
  font-size: 80%;
  color: #e26f2d;
  font-style: italic;
  margin: 1em 0 1.5em;
}

.cv-card p em {
  font-size: 90%;
  color: var(--chocolate);
  opacity: .8;
  display: inline-flex;
  padding-left: .8em;
  margin-left: .5em;
  align-items: center;
  position: relative;
}
.cv-card p em::before {
  content: '';
  display: block;
  height: 10px;
  width: 1px;
  left: 0px;
  position: absolute;
  background: var(--beige);
}

/* //////////////////////////////////////////////////////////////////// RESPONSIVE */

@media screen and (max-width: 783px) {
  .forminator-row,
  .tablet-stack {
    flex-direction: column;
  }  
  .tablet-stack-reverse {
    flex-direction: column-reverse !important;
  }  
  h2.wp-block-heading {
    text-align: center;
  }
  .forminator-row,
  .forminator-row>div,
  .forminator-guttenberg,
  .wp-block-heading {
    width: 100%;
    max-width: 100% !important;
  }

  .wp-block-latest-posts.is-grid li {
    margin-right: 0;
    margin-bottom: 3em;
  }
  .wp-block-latest-posts li .wp-block-latest-posts__featured-image {
    padding-top: 40%;
  }

  .cvs {
    justify-content: center;
    padding: 0 6em;
  }
  .cv-card {
    width: 100%;
    max-width: 100%;
    padding-bottom: 4em;
  }
  .cv-card h3 {
    padding-bottom: .3em;
  }

  .wp-block-group.section .wp-block-group__inner-container {
    padding-left: 3em;
    padding-right: 3em;
    padding-bottom: 7em;
  }

  .main-nav,
  .site-header {
    bottom: 0;
    top: auto;
  }

  .inside-navigation.grid-container,
  .main-navigation,
  .main-navigation .main-nav,
  .main-navigation ul {
    height: auto !important;
    max-height: 100% !important;
  }

  .main-navigation ul {
    background-color: var(--granite) !important;
    padding: 3em !important;
    margin: 0 0 7em 0;
    opacity: 0 !important;
    transform: translateX(9em);
    transition: transform 300ms ease-out, opacity 100ms ease-out, color 200ms ease-out 200ms;
    color: var(--granite);
  }

  .main-navigation.toggled ul {
    transform: translateX(-2.9em);
    opacity: 1 !important;
    color: white;
  }
  .main-navigation ul li {
    font-size: 1.5em;
    padding-bottom: 0.7em;
  }

  .main-navigation {
    padding: 0 !important;
  }

  .main-navigation,
  .main-navigation .main-nav {
    padding: 0;
  }

  .main-navigation .menu-toggle {
    display: block;
    border: thin solid white;
    background: white;
    box-shadow: none;
    width: 70px;
    height: 70px;
    margin: 0 3em 2em 0;
    flex: 0 0 auto;
    z-index: 9999999;
    position: relative;
    border-radius: 1em;
  }

  button.menu-toggle:active,
  button.menu-toggle:focus,
  button.menu-toggle:hover {
    background: white;
  }


  
  .main-navigation .menu-toggle .icon-menu-bars svg {
    display: none;
  }
  
  .main-navigation .menu-toggle .icon-menu-bars::before,
  .main-navigation .menu-toggle .icon-menu-bars::after {
    display: block;
    content: '';
    background: black;
    height: 3px;
    border-radius: 1px;
    width: 23px;
    position: absolute;
    top: 29px;
    left: 23px;
    transform: rotate(0deg);
    transition: transform 200ms ease-out 100ms, margin 100ms ease-out;
  }

  .main-navigation .menu-toggle .icon-menu-bars::after {
    margin: 0 0 8px 0;
  }
  .main-navigation .menu-toggle .icon-menu-bars::before {
    margin: 8px 0 0 0 ;
  }
  
  .main-navigation.toggled .menu-toggle .icon-menu-bars::after,
  .main-navigation.toggled .menu-toggle .icon-menu-bars::before {
    transform: rotate(45deg);
    margin: 0;
    top: 32px;
  }
  .main-navigation.toggled .menu-toggle .icon-menu-bars::after {
    transform: rotate(45deg);
  }
  .main-navigation.toggled .menu-toggle .icon-menu-bars::before {
    transform: rotate(135deg);
  }

  .main-navigation .menu-toggle .mobile-menu {
    display: none;
  }

}