/*
Theme Name: Melitta Bubalo Responsive
Description: Individualanpassung für Melitta Bubalo
Author: Stefan Lipgens
Author URI: https://www.lipgens.de
Template: twentyseventeen
Version: 1.2.8
Tags:
*/

/* FONTS */
@font-face {
  font-family: 'OpenSansRegular';
  src: url('assets/fonts/OpenSansRegular.ttf') format('truetype');;
}
@font-face {
  font-family: 'OpenSansBold';
  src: url('assets/fonts/OpenSansBold.ttf') format('truetype');;
}
@font-face {
  font-family: 'InterRegular';
  src: url('assets/fonts/InterRegular.ttf') format('truetype');
}
@font-face {
  font-family: 'InterBold';
  src: url('assets/fonts/InterBold.ttf') format('truetype');;
}
@font-face {
  font-family: 'InterExtraBold';
  src: url('assets/fonts/InterExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'InterLight';
  src: url('assets/fonts/InterLight.ttf') format('truetype');
}
@font-face {
  font-family: 'InterBlack';
  src: url('assets/fonts/InterBlack.ttf') format('truetype');
}

.font1 {
  font-family: 'OpenSansRegular', sans-serif;
  font-size: 22px;
}
.font2 {
  font-family: 'OpenSansBold', sans-serif;
  font-size: 14px;
}
.font3 {
  font-family: 'InterBold', sans-serif;
  font-size: 16px;
}
.font4 {
  font-family: 'InterExtraBold', sans-serif;
  font-size: 16px;
}
.font5 {
  font-family: 'InterRegular', sans-serif;
  font-size: 14px;
}
.font6 {
  font-family: 'InterBold', sans-serif;
  font-size: 20px;
}
.font7 {
  font-family: 'InterExtraBold', sans-serif;
  font-size: 18px;
}
.font8 {
  font-family: 'InterLight', sans-serif;
  font-size: 14px;
}
.font9 {
  font-family: 'InterBlack', sans-serif;
  font-size: 35px;
}
.font10 {
  font-family: 'OpenSansItalic', sans-serif;
  font-size: 18px;
}

/* RESET */

:root {
  --color1: #d5d2c3;
  --color2: #697450;
  --color3: #9f9c79;
  --color4: #ececed;
  --color5: #ffffff;
  --color6: #1a171b;
  --content-width: 800px;
  --transition-duration: 333ms;
}
html {
  font-size: 62.5%; /* 1rem = 10px */
  background-color: inherit;
}

html, body, div, span, applet, object, iframe, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{

}
p,
.menu-meta-menue-container li,
.menu-meta-menue-container a {
  hyphens: auto;
}
ul, ol {
  padding: 0 1.25em;
}
body {
  background-color: var(--color1);
  color: var(--color6);
  font-family: 'InterLight', sans-serif;
  font-size: 14px;
  position: relative;
  left: 0px;
  transition: left 0.5s ease-in-out 0s;
}
.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
  height: calc(0.51*(100vw - 60px) + 30px);
}
.site-header,
.site-content-contain{
  background-color: var(--color1);
}
#wp-custom-header {
  margin: 30px auto;
  width: calc(100vw - 60px);
  height: calc(0.51*(100vw - 60px));
  max-height: calc(100vh - 100px);
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-color: var(--color1);
  /*
  background-size: contain;
  background-position: right;
  background-color: #040402;
   */
}
body:not(.home) #wp-custom-header {
  margin: 30px auto;
  background-size: cover;
  height: 21.875vw;
  background-position: center;
  background-repeat: no-repeat;
}
body:not(.home) #wp-custom-header > img {
  display: none;
}
.custom-header-media:before {
  display: none;
}
.navigation-top {
  background-color: var(--color1);
  border-bottom: none;
  border-top: none;
  position: relative;
  margin-top: 28px;
  z-index: 98;
}
.navigation-top .wrap{
  height: 70px;
  padding:0;
  max-width: 58.75vw;
  margin-left: 25vw;
  margin-right: 16.25vw;
}
.mobile-navigation .menu-oberes-menue-container {
  height: auto;
}
#top-menu {
  display: flex;
  justify-content: space-between;
}
#top-menu > li {
  /*flex-basis: 25%;*/
  text-align: left;
  position: relative;
}
/*
#top-menu > li:nth-of-type(2) {
  flex-basis: 50%;
  text-align: center;
}
#top-menu > li:last-of-type {
  text-align: right;
}
*/
#top-menu > li > a {
  color: var(--color2);
  font-family: 'InterBold', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding:0;
  display: inline;
}
#top-menu > li:hover > a,
#top-menu >  li.current-menu-item > a,
#top-menu >  li.current-menu-ancestor > a {
.navigation-top > li:active > a,
  font-family: 'InterBold', sans-serif;
  font-size: 20px;
}
#top-menu > li.current-menu-item.normal > a {
  font-size: 16px;
}
.main-navigation ul ul {
  border: 1px solid var(--color6);
}
.main-navigation li li:hover,
.main-navigation li li.focus {
  background-color: var(--color3);
}
.main-navigation li li a {
  font-family: 'InterRegular', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--color6);
}
.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
  /* background-color: var(--color3); */
  color: var(--color6);
  width: 100%;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
  left: 0;
}
.main-navigation ul ul a {
  min-width: 14em;
  width: max-content;
}
.main-navigation ul li:last-of-type ul a {
  min-width: 11.75em;
  width: 11.75em;
}
.main-navigation ul li.menu-item-has-children:hover:before {
  border-color: transparent transparent var(--color6);
}
.main-navigation ul li.menu-item-has-children:hover:before,
.main-navigation ul li.menu-item-has-children:hover:after{
  right: 0px;
}
/*
.main-navigation ul li.menu-item-has-children:nth-of-type(1):hover:before,
.main-navigation ul li.menu-item-has-children:nth-of-type(1):hover:after{
  left: 90px;
  right: inherit;
}
.main-navigation ul li.menu-item-has-children:nth-of-type(2):hover:before,
.main-navigation ul li.menu-item-has-children:nth-of-type(2):hover:after{
  left: calc((29.375vw + 283px) / 2);
  right: inherit;
}
.main-navigation ul li.menu-item-has-children:nth-of-type(3):hover:before,
.main-navigation ul li.menu-item-has-children:nth-of-type(3):hover:after{
  right: 0px;
}
*/
#top-menu .sub-menu {
  z-index: 100;
}
/*
#top-menu > li:hover:nth-of-type(1) > .sub-menu{
  left: -1px;
}
#top-menu > li:hover:nth-of-type(2) > .sub-menu{
  width: 315px;
  margin-left: calc((29.375vw - 315px)/2);
}
#top-menu > li:hover:nth-of-type(3) > .sub-menu{
  right: -10px;
}
 */
.site-header .navigation-top .menu-scroll-down {
  display: none;
}
#mobile-navigation {
  position: fixed;
  top: 0;
  right: -260px;
  height: 100vh;
  z-index: 999;
  width: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 13px;
  color: #333;
  background-color: #f8f8f8;
  box-shadow: 0 0 5px 5px #ebebeb inset;
  transition: right 0.5s ease-in-out 0s;
}
#mobile-navigation ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
  height: auto;
}
#mobile-navigation>ul{
  padding-bottom: 20px;
}
#mobile-navigation li {
  list-style-type: none;
  line-height: 2em;
  width: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #dfdfdf;
}
#mobile-navigation ul.children li,
#mobile-navigation ul.sub-menu li{
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid transparent;
}
#mobile-navigation li.page_item_has_children a:first-of-type {
  border-bottom: 1px solid #dfdfdf;
}
#mobile-navigation ul.children li:last-of-type a{
  border-bottom: 1px solid transparent !important;
}
#mobile-navigation ul.children li ul.children li:last-of-type a{
  border-bottom: 1px solid #dfdfdf !important;
}
#mobile-navigation li.heading {
  font-size: 14px;
  padding: 10px;
}
#mobile-navigation li a {
  padding: .5rem 1rem .5rem 20px;
  display: block;
}
#mobile-navigation ul.sub-menu>ul.sub-menu li{
  padding-left: 20px;
}
.entry-content a img, .comment-content a img, .widget a img {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.icon-bar {
  width: 22px;
  height: 2px;
  background-color: var(--color5);
  display: block;
  transition: all 0.5s;
  margin-top: 4px
}
.navbar-toggler {
  border: none;
  cursor: pointer;
  background: transparent !important;
  display: none;
}
.navbar-toggler:focus {
  outline: none;
}
.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
  opacity: 0;
}
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggler.off .top-bar {
  transform: rotate(0);
}
.navbar-toggler.off .middle-bar {
  opacity: 1;
}
.navbar-toggler.off .bottom-bar {
  transform: rotate(0);
}

body.has-header-image .site-title, body.has-header-video .site-title,
body.has-header-image .site-title a, body.has-header-video .site-title a,
.site-title {
  font-family: 'OpenSansRegular', sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--color6);
  text-transform: none;
  width: 110px;
  margin: 120px 0 0 4px;
  text-align: right;
  text-align-last: right;
  /*
  color: var(--color1);
  margin: 116px 0 0 0;
  text-align: left;
  text-align-last: left;
   */
}
body.has-header-image .site-description,
body.has-header-video .site-description,
.site-description {
  font-family: 'OpenSansBold', sans-serif;
  font-size: 14px;
  color: #d5d2c3;
  margin: -20px 0 0 110px;
  display: none;
}
body.home #primary {
  display:none;
}

#secondary,
#secondary a{
  font-family: 'InterExtraBold', sans-serif;
  font-size: 16px;
  color: var(--color3);
  text-decoration: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-transform: uppercase;
}
#secondary li:nth-last-child(-n+2) a{
  font-family: 'InterRegular', sans-serif;
  font-size: 14px;
  color: var(--color5);
  text-transform: none;
}
#secondary a:active,
#secondary a:focus,
#secondary a:hover,
#secondary li:nth-last-child(-n+2) a:active,
#secondary li:nth-last-child(-n+2) a:focus,
#secondary li:nth-last-child(-n+2) a:hover{
  text-decoration: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#secondary li.current-menu-item:nth-last-child(-n+2) a,
#secondary .current-menu-item a {
  font-family: 'InterBold', sans-serif;
  font-size: 20px;
}
.widget ul li, .widget ol li {
border-bottom: none;
border-top: none;
padding: 0.5em 0;
}
.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding {
  position: absolute;
  display:block;
  height: auto;
  margin-bottom: 40px;
  bottom: 0;
}
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
  display:block;
  height: calc(0.51*(100vw - 60px) + 30px);
}
body:not(.title-tagline-hidden) .site-branding-text {

  margin-left: calc(25vw - 190px);
  width: 260px;
  height: 320px;
  background-image: url(assets/images/Note_rot_fett.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50px 0;
  /*
  margin-left: calc(25vw - 130px);
  height: 212px;
 */
}
body:not(.home) .site-branding-text {
  background-image: url(assets/images/Note_weiss_211.png);
}
body:not(.home) .site-branding,
body:not(.home) .custom-header {
  height: calc(21.875vw + 30px);
  margin-bottom: 0 !important;
  padding: 0;
}
body:not(.home) .site-branding .entry-header {
  margin-left: calc(25vw - 30px);
  position: absolute;
  bottom: -5px;
  padding: 0;
}
body:not(.home) .site-title,
body:not(.home) .site-description,
body:not(.home) .site-branding-text,
.single-featured-image-header,
.site-footer {
  display:none;
}
body:not(.home) .site-branding-text.noteunten,
body:not(.home) .site-branding-text.notemittig {
  width: 57px;
  height: 211px;
  display:block;
  background-position: center;
  position: absolute;
  top: calc(21.875vw - 100px);
  left: 40px;
}
body:not(.home) .site-branding-text.noteunten {
  top: calc(21.875vw + 210px);
  left: 120px;
}
.entry-content .subtitle,
header.subtitle {
  color: var(--color6);
  font-family: 'InterExtraBold', sans-serif;
  font-size: 18px;
  float: left;
  width: 140px;
  height: 100%;
  text-transform: uppercase;
  padding: 0 15px 0 0;
  line-height: 1.2;
}
.entry-content .subtitle {
  position: absolute;
  margin-left: -140px;
}
.full-width,
.full-width img{
  width: 100%;
}
.metaslider-flex,
.wp-block-getwid-images-slider {
  max-width: 740px;
}
header.subtitle .nonbold {
  font-family: 'OpenSansItalic', sans-serif;
  font-size: 18px;
}
body.home .panel-image,
.background-fixed .panel-image {
  display: none;
}
.site-content .wrap {
  padding:0;
  max-width: 75vw;
  margin-left: 25vw;
}
.entry-content h2,
.entry-content h3 {
  font-family: 'InterBold', sans-serif;
  font-size: 16px;
  color: var(--color6);
  margin: 0;
  padding: 0;
}
.entry-content h2{
  color: var(--color2);
}
.entry-content b,
.entry-content strong {
  font-family: 'InterBold', sans-serif;
  font-size: 14px;
}
figure {
  margin: 0;
}
.wp-block-audio,
.wp-block-embed {
  max-width: 55%;
}
.wp-block-audio{
  padding-bottom: 15px;
}
.wpcf7 {
  max-width: 41%;
  position: relative;
}
.wpcf7 label {
  font-size: 10px;
}
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 {
  border: 1px solid var(--color2);
  border-radius: 0;
  font-family: 'InterLight', sans-serif;
  font-size: 14px;
  color: var(--color6);
}
button, input[type="button"], input[type="submit"] {
  background-color: var(--color3);
  font-family: 'InterBold', sans-serif;
  font-size: 16px;
  padding: 8px;
  border-radius: 0;
}
:not( .mejs-button ) > button:hover, :not( .mejs-button ) > button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
  background-color: var(--color2);
}
button.featherlight-close-icon:hover,
button.featherlight-close-icon:focus {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%0A%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
div.wpcf7-response-output {
  position: absolute;
  top: 0;
  margin: 15px 0 0 0;
  left: calc(100% + 30px);
  width: 130%;
  padding: 10px;
  border: 2px solid var(--color3);
}
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
  border: 2px solid var(--color2);
}
.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media,
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
  max-height: calc(100vh - 100px);
}
.has-header-image.twentyseventeen-front-page .site-branding{
  padding: 0;
  margin-bottom: -143px !important;
  width: 200px;
  /*
  margin-bottom: 40px !important;
   */
}
.site-branding .wrap {
  max-width: calc(100vw - 60px);
  padding: 0;
  height: 100%;
  position: relative;
}
body.home .site-content .wrap {
  max-width: 100vw;
  padding: 0;
  margin-top: 0 !important;
}
.has-sidebar #secondary {
  padding-top: 0;
  width: 200px;
  margin-right: 30px;
}
.has-sidebar #secondary .menu li:first-of-type{
  padding-top: 0;
}
body:not(.has-sidebar):not(.page-one-column) .page-header, body.has-sidebar.error404 #primary .page-header, body.page-two-column:not(.archive) #primary .entry-header, body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
  position: absolute;
  width: auto;
  top: -135px;
}
.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
  color: var(--color3);
  font-family: 'InterBlack', sans-serif;
  font-size: 35px;
  letter-spacing: inherit;
  margin: 0;
  line-height: 1em;
}
body.page:not(.twentyseventeen-front-page) .entry-title.hell {
  color: var(--color4);
}
body.page:not(.twentyseventeen-front-page) .entry-title.dunkel {
  color: var(--color6);
}
.has-sidebar:not(.error404) #primary,
.has-sidebar #primary {
  width: calc(100% - 230px);
}
.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404 #primary .entry-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
  float: right;
  width: calc(100% - 140px);
  padding: 0 30px 30px 0;
}
body.has-sidebar.error404 #primary .page-header {
  top: -128px;
}
.site-content {
  padding: 0;
}
@media screen and (min-width: 48em) {
  .error404 #primary {
    float: left;
  }
  .has-sidebar:not(.error404) #primary {
    width: calc(100% - 230px);
  }
  /*
  .main-navigation ul :nth-of-type(2) > ul {
    width: 315px;
    margin-left: calc((29.375vw - 315px)/2);
  }
   */
  .main-navigation ul li.menu-item-has-children.focus:before,
  .main-navigation ul li.menu-item-has-children.focus:after,
  .main-navigation ul li.page_item_has_children.focus:before,
  .main-navigation ul li.page_item_has_children.focus:after {
    display: none;
  }
  .main-navigation ul li.menu-item-has-children:hover:before,
  .main-navigation ul li.menu-item-has-children:hover:after,
  .main-navigation ul li.page_item_has_children:hover:before,
  .main-navigation ul li.page_item_has_children:hover:after {
    display: block;
  }
  .main-navigation ul#top-menu > li.menu-item > a::before {
    display: block;
    content: attr(title);
    font-size: 20px;
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .main-navigation ul#top-menu > li.menu-item-has-children > a::before {
    content: attr(title) "--";
  }
}
@media screen and (max-width: 1400px){
  .wp-block-audio, .wp-block-embed {
    max-width: 75%;
  }
}
@media screen and (max-width: 1280px){
  .site-content .wrap {
    max-width: calc(100vw - 60px);
    margin-left: 100px;
  }
  body:not(.home):not(.title-tagline-hidden) .site-branding-text {
    margin-left: 0;
  }
  body.home:not(.title-tagline-hidden) .site-branding-text {
    margin-left: calc(25vw - 155px);
    /*
    margin-left: calc(25vw - 130px);
     */
  }
  body:not(.home) .site-branding .entry-header {
    margin-left: 100px;
  }
  .navigation-top .wrap {
    max-width: calc(100vw - 185px);
    margin-left: 135px;
    margin-right: 50px;
  }
  .navigation-top nav {
    margin-left: 0;
  }
  .has-sidebar #secondary {
    width: 150px;
  }
  .has-sidebar:not(.error404) #primary,
  .has-sidebar #primary {
    width: calc(100% - 180px);
  }
  .wp-block-audio, .wp-block-embed {
    max-width: 100%;
  }
  .wpcf7 {
    max-width: 66%;
  }
  .wpcf7-response-output{
    max-width:  33%;
  }
}
@media screen and (max-width: 900px){
  .navbar-toggler {
    display: block;
    position: absolute;
    top:0;
    left:0;
  }
  .navigation-top {
    margin-top: 40px;
  }
  .navigation-top .wrap {
    height: 40px;
    padding: 0;
    max-width: 40px;
    margin-left: inherit;
    margin-right: inherit;
    position: absolute !important;
    right: 10px;
    top:-35px;
    width: 40px;
  }
  #secondary,
  .main-navigation .menu-oberes-menue-container {
    display: none;
  }
  #wp-custom-header {
    margin: 10px auto;
    width: calc(100vw - 20px);
    height: calc(0.51*(100vw - 20px));
  }
  body:not(.home) #wp-custom-header {
    margin: 10px auto;
  }
  body:not(.home) .site-branding, body:not(.home) .custom-header {
    height: calc(21.875vw);
  }
  .site-branding .wrap {
    width: calc(100vw - 20px);
  }
  body:not(.home) .site-branding-text.notemittig,
  body:not(.home) .site-branding-text.noteunten {
    top: calc(21.875vw + 130px);
    left: 0;
  }
  body:not(.title-tagline-hidden) .site-branding-text {
    margin: 20px;
  }
  .site-content .wrap {
    margin-left:30px;
    max-width: calc(100vw - 30px);
  }
  body:not(.home) .site-branding .entry-header {
    margin-left: 0;
  }
  .has-sidebar:not(.error404) #primary,
  .has-sidebar #primary {
    width: calc(100% - 40px);
  }
  .blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404 #primary .entry-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
    padding: 0 15px 15px 0;
  }
}
@media screen and (max-width: 760px){
  #wp-custom-header {
    margin: 3px auto;
    width: calc(100vw - 6px);
    height: calc(0.51*(100vw - 12px));
    background-position: right;
  }
  body:not(.home) #wp-custom-header {
    margin: 3px auto;
  }
  .has-header-image.twentyseventeen-front-page .site-branding {
    margin-bottom: -50px !important;
  }
  .site-branding .wrap {
    width: auto;
    margin-left: 5vw;
  }
  body:not(.title-tagline-hidden) .site-branding-text {
    margin-left: 2vw;
    width: 185px;
    height: 132px;
    background-position: 35px 0;
  }
  .page .panel-content .entry-title, .page-title,
  body.page:not(.twentyseventeen-front-page) .entry-title {
    font-size: 4vw;
  }
  body:not(.home) .site-branding .entry-header {
    bottom: -0.2em;
  }
  body.has-header-image .site-title, body.has-header-video .site-title,
  body.has-header-image .site-title a, body.has-header-video .site-title a,
  .site-title {
    font-size: 14px;
    width: 62px;
    margin: 62px 0 0 0;
  }
  body.has-header-image .site-description,
  body.has-header-video .site-description,
  .site-description {
    font-size: 10px;
    margin: -13px 0 0 78px;
  }
}
@media screen and (max-width: 680px){
  .wpcf7 {
    max-width: 100%;
  }
  div.wpcf7-response-output {
    max-width: 100%;
    position: relative;
    left: inherit;
  }
  body.home:not(.title-tagline-hidden) .site-branding-text {
    margin-left: 0;
  }
  .site-content .wrap {
    margin-left: 15px;
    margin-right: 15px;
    max-width: 100%;
  }
  .has-sidebar:not(.error404) #primary, .has-sidebar #primary {
    width: 100%;
  }
}
@media screen and (max-width: 480px){
  body:not(.home) .site-branding, body:not(.home) .custom-header {
    height: 33vw;
  }
  body:not(.home) #wp-custom-header {
    height: 33vw;
  }
  body:not(.home) .site-branding-text{
    display: none !important;
  }
  .page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
    font-size: 20px;
  }
  .site-header {
    width: 100vw;
  }
  #mobile-navigation {
    font-size: 3.6vw;
  }
  article {
    display: flex;
    flex-wrap: wrap;
  }
  article > header.subtitle,
  article > .entry-content {
    flex-basis: 100%;
  }
  .blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404 #primary .entry-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
    padding: 15px 0px;
  }
  .wp-block-audio audio {
    min-width: 260px;
  }
}
@media screen and (max-width: 400px){
  body.has-header-image .site-title, body.has-header-video .site-title,
  body.has-header-image .site-title a, body.has-header-video .site-title a,
  .site-title {
    font-size: 3.4vw;
  }
  body.has-header-image .site-description,
  body.has-header-video .site-description,
  .site-description {
    font-size: 2.5vw;
  }
  .site-header {
    width: 100vw !important;
  }
  .custom-header,
  .custom-header-media,
  .wp-custom-header{
    width: 100% !important;
  }
  .site-branding .wrap {
    margin-left: 0;
  }
}
@media screen and (max-width: 365px){
  body.has-header-image .site-title, body.has-header-video .site-title,
  body.has-header-image .site-title a, body.has-header-video .site-title a,
  .site-title {
    font-size: 3.9vw;
  }
  body.has-header-image .site-description,
  body.has-header-video .site-description,
  .site-description {
    font-size: 2.7vw;
  }

}