/*
Theme Name: Blitz Boutique
Theme URI: http://www.blitz-boutique.de
Description: This Theme is designed for Blitz Boutique, Heumarkt 6, 96047 Bamberg. It is not allowed to use this theme on other sites without permission. It is not allowed to change the code and use it elsewhere.
Author: Heimatbüro Fotografie & Gestaltung, Handwerkerhof 11, 74076 Heilbronn
Author URI: https://www.heimatbuero.de
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
Version: 2.0
Text Domain: heimat
*/

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* LOADING FONTS */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Heimat Webfont */
@font-face {
     font-display: swap;
     font-family: 'heimat';
     font-weight: normal;
     font-style: normal;
     src: url('assets/fonts/heimat.woff2') format('woff2');
}

/* Menlo Font */
@font-face {
    font-family: 'Menlo';
    src: url('assets/fonts/menlo-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Menlo';
    src: url('assets/fonts/menlo-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* Iowan Old Style Font */
@font-face {
    font-family: 'Iowan Old Style';
    src: url('assets/fonts/iowan-old-style.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Iowan Old Style';
    src: url('assets/fonts/iowan-old-style-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

.heimat-icon {
  font-family: 'heimat';
}

:root {
     --common-font: "Menlo", Monaco, "Courier New", monospace;
     --headline-font: "Iowan Old Style", Georgia, serif;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

html,
body                                    { margin: 0; padding: 0; width: 100%; height: 100%; min-height: 100%; font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body                                    { height: 100%; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; font-family: var(--common-font); font-size: var(--para); color: var(--txt-col); font-style: normal; letter-spacing: var(--letter-spacing); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--body-bg-color); }

*, *:before, *:after                    { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.hb-ico                                 { font-family: "heimat"; font-style: normal; }

article, aside, details, figcaption, figure, header, main, nav, section	{ display: block; }

.aligncenter,
div.aligncenter                         { display: block; margin: 5px auto 5px auto; }

img.alignleft                           { margin: 0 20px 20px 0; float: left; }
img.alignright                          { margin: 0 0 20px 20px; float: right; }

.left,
.alignleft                              { float: left; }

.right,
.alignright                             { float: right; }

.wow                                    { visibility: hidden; }

img                                     { margin: 0; }

ul,
ol                                      { margin: 0 0 3rem 0rem; list-style-position: inside; }

ul                                      { padding-left: 20px; }
li                                      { line-height: 28px; }
ol                                      { padding-left: 36px; }

ul                                      { list-style: disc; }
ul ul                                   { list-style: circle; }
ul ul ul                                { list-style: square; }
ol                                      { list-style: decimal; }
ol ol                                   { list-style: lower-alpha; }
ol ol ol                                { list-style: lower-roman; }

dt,
dd                                      { line-height: 1.5; }
dt                                      { font-weight: 700; }
dt + dd                                 { margin-top: 0.5rem; }
dd + dt                                 { margin-top: 1.5rem; }

.sr-only                                { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* TYPOGRAPHY */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

h1                                      { font-size: var(--h1); color: var(--h1-col); }
h2                                      { font-size: var(--h2); color: var(--h2-col); }
h3                                      { font-size: var(--h3); color: var(--h3-col); }
h4                                      { font-size: var(--h4); color: var(--h4-col); }
h5                                      { font-size: var(--h5); color: var(--h5-col); }
h6                                      { font-size: var(--h6); color: var(--h6-col); }

h1, h2, h3, h4, h5, h6                  { font-family: var(--headline-font); margin-bottom: 0.62rem; /* line-height: 110%; */ }

h1                                      { line-height: calc(1ex / 0.42); }
h2                                      { line-height: calc(1ex / 0.42); }
h3                                      { line-height: calc(1ex / 0.38); }
h4                                      { line-height: calc(1ex / 0.37); }

/* h3                                      { line-height: calc(var(--h3) + 12px);} */

/* p                                       { margin-bottom: 20px; line-height: 28px; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } */
p                                       { margin-bottom: 20px; line-height: calc(1ex / 0.32); }
p:empty                                 { height: 0; margin: 0; padding: 0; }

a,
a:link                                  { pointer-events: all; text-decoration: none; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

a                                       { color: var(--a-col); }
a:hover                                 { color: var(--a-hover-col); text-decoration: underline; text-underline-offset: 5px; }
/*a:active                              { color: var(--aactive-color); }
a:visited,
a:visited strong                        { color: var(--avisited-color); background-color: var(--text-decoration-color); } */

a[href$=".PDF"]::before, 
a[href$=".pdf"]::before 		          { content: "\f02e"; font-family: "heimat"; padding: 0 14px 0 0; color: var(--txt-col); }

a img                                   { border: none; }

.more_link                              { color: var(--a-col); }
.more_link:hover                        { color: var(--a-hover-col); }

::selection                             { background: var(--a-col); color: var(--body-bg-color); }
::-moz-selection                        { background: var(--a-col); color: var(--body-bg-color); }

.pp-title							  { color: var(--pp-title-col); }
.archive-title					{ color: var(--archive-title-color); }
.meta-text						  { color: var(--meta-txt-color); }
.meta-text a						{ color: var(--meta-link-color); }
.meta-text a:hover			{ color: var(--meta-link-hover-color); }

strong                                  { font-weight: 700; }
em                                      { font-style: italic; }

blockquote                              { margin: 0 0 30px 0; padding: 0 30px 0 30px; font-style: italic; font-size: 1.2rem; font-family: "Helvetica Neue", sans-serif, Helvetica, Arial; border-left: 5px solid #9bab9a; }

code                                    { font-family: "Courier New", Courier, serif; overflow: auto; padding: 2px; background: #fff; }
pre code                                { background: none; }
pre                                     { margin: 0 auto 20px auto; padding: 10px; max-width: 80%; background: #f7f7f7; overflow: auto; border: 1px solid #e4e4e4; font-family: "Helvetica Neue", sans-serif, Helvetica, Arial; }
.dropcap                                { float: left; font-size: 5rem; padding-right: 7px; line-height: 4.5rem; }

small, sub, sup                         { font-size: .83em; }
sub                                     { vertical-align: sub; }
sup                                     { vertical-align: super; }

.is_align_left                          { justify-content: flex-start; }
.is_align_center                        { justify-content: center; }
.is_align_right                         { justify-content: flex-end; }

.block_is_left                          { flex-direction: row; }
.block_is_right                         { flex-direction: row-reverse; }

.is_align_left h3                       { left: 0; }
.is_align_center h3                     { left: 0; }
.is_align_right h3                      { right: 16px; }

.font-thin 						  { font-weight: 100; }
.font-extralight 				{ font-weight: 200; }
.font-light 						{ font-weight: 300; }
.font-normal 						{ font-weight: 400; }
.font-medium 						{ font-weight: 500; }
.font-semibold 					{ font-weight: 600; }
.font-bold 						  { font-weight: 700; }
.font-extrabold 				{ font-weight: 800; }
.font-black 						{ font-weight: 900; }

.has-small-font-size                    { font-size: 0.75rem; line-height: 1rem; }
.has-medium-font-size                   { font-size: 0.88rem; line-height: 1.12rem; }
.has-large-font-size                    { font-size: 1.25rem; line-height: 1.50rem; }
.has-x-large-font-size                  { font-size: 1.38rem; line-height: 1.62rem; }

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GENEREL LAYOUT */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* BASICS ---------------------------------------------------------------------------------------------------------------------*/

.is--hidden    { 
  display: none!important; 
}

/* HEADER ---------------------------------------------------------------------------------------------------------------------*/

header    { 
  width: 100%; 
  height: 160px;
  display: flex;
  justify-content: center;
}

body.admin-bar header.sticky-header {
  top: 32px;
}

.page-header.page-header--sticky { 
  position: fixed;
  animation: slideDown 0.35s ease-out;
  background-color: var(--header-bg-col); 
  z-index: 10000;
}

.page-header.is_shrinked,
.page-header.is_shrinked .page-header__bar #mainmenu { 
  height: 100px;
}

.page-header.is_shrinked .page-header--logo { 
  display: flex; 
  align-items: center; 
}

.page-header.is_shrinked .page-header--logo img { 
  margin: 0; 
  width: 250px; 
  height: auto; 
}

.page-header.is_shrinked .page-header__bar .page-header__logo {
  margin: 20px 0 0 0; 
}

.page-header.is_shrinked .page-header__bar .page-header__logo svg,
.page-header.is_shrinked .page-header__bar .page-header__logo img {
  height: 60px;
  width: auto;
}

@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* body.logged-in.admin-bar header    { 
  top: 32px; 
} */

.page-header.has--bg { 
  background-color: var(--header-bg-col); 
  -webkit-box-shadow: 0px 10px 20px 0px rgba(255,255,255,0.95); 
  -moz-box-shadow: 0px 7px 5px 0px rgba(255,255,255,0.95); 
  box-shadow: 0px 7px 5px 0px rgba(255,255,255,0.95); 
  -webkit-transition: background-color .5s ease; 
  -moz-transition: background-color .5s ease; 
  -ms-transition: background-color .5s ease; 
  -o-transition: background-color .5s ease; 
  transition: background-color .5s ease; 
}

header .page-header__bar { 
  width: 100%;
  max-width: 1200px;
  display: flex; 
}

header .page-header__bar .page-header__logo { 
  width: 280px; 
  height: fit-content;
  height: -moz-fit-content; 
  margin: 30px 0 0 0; 
}


.error404 header .page-header__bar .page-header__logo a svg #logo,
header .page-header__bar .page-header__logo a svg #logo { 
  fill: var(--logo-color-1); 
}

/* MENU ----------------------------------------------------------------------------------------------------------------------*/

.mobile-menu-wrapper,
.mobile--menu { 
  display: none; 
}

#mainmenu { 
  font-family: var(--common-font);
  height: 160px; 
  display: flex; 
  flex-grow: 1; 
  justify-content: flex-end;
}

#mainmenu ul { 
  display: flex;
  align-items: flex-end;
  margin: 0 0 20px 0; 
  list-style: none; 
  text-transform: uppercase; 
}

#mainmenu ul li { 
  height: 46px;  
  float: left; 
}

#mainmenu ul ul { 
  text-align: right; 
}

#mainmenu ul li a  { 
  padding: 1px 2px; 
  margin-right: 20px; 
  font-size: 1.12rem; 
  position: relative; 
  display: inline-block; 
  padding: 0.5em 0; 
  text-decoration: none; 
  letter-spacing: var(--letter-spacing); 
  color: var(--menu-text-col);  
  -webkit-transition: color .4s ease; 
  -moz-transition: color .4s ease; 
  -ms-transition: color .4s ease; 
  -o-transition: color .4s ease; 
  transition: color .4s ease; 
  -webkit-transition: background-color .4s ease; 
  -moz-transition: background-color .4s ease; 
  -ms-transition: background-color .4s ease; 
  -o-transition: background-color .4s ease; 
  transition: background-color .4s ease; 
}

#mainmenu li.current-menu-item a,
#mainmenu li.current_page_item a { 
  color: var(--menu-text-col); 
}

#mainmenu ul li a:hover::after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 100%; 
  height: 12px; 
  border-radius: 20px; 
  z-index: -1; 
}

#mainmenu ul li a.is-active::after,
#mainmenu ul li a.is-active::after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 100%; 
  height: 12px; 
  border-radius: 20px; 
  z-index: -1; 
}

#mainmenu ul ul { 
  position: absolute; 
  list-style: none; 
  right: -9999px; 
  font-size: 16px; 
  float: right; 
  height: 46px; 
  line-height: 46px; 
  z-index: 478; 
}

#mainmenu ul ul a { 
  padding: 1px 2px; 
  margin-right: 12px; 
}

#mainmenu ul ul li { 
  float: left; 
}

#mainmenu ul ul li.menu-item-10::after { 
  content: '\21B2'; 
  margin-right: 0px!important;
}

#mainmenu li:hover ul { 
  position: absolute; 
  right: 42px; 
  top: 46px;  
}

/* CONTENT --------------------------------------------------------------------------------------------------------------------*/

#page-wrapper {
  flex: 1 0 auto; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 100%; 
  height: 100%;
  min-height: 100%;
}

.page__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------- SECTIONS ----------------- */

.page__container section {
  width: 1200px;
}

.content__container {
  display: flex;
  position: relative;
}

.content__container .content__container__content {
  width: 100%;
}

.has-spacing {
  padding: 0 20px;
}

/* WP Blocks ---------------------------------------------------------------------------------------------------------------- */

.wp-block-social-links.is-layout-flex { 
  display: flex; 
}

.wp-block-social-links li { 
  margin: 0 10px!important; 
}

.wp-block-social-links li:last-child { 
  margin-right: 0; 
}

/*  */

.block-box-shadow { 
  -webkit-box-shadow: 5px 5px 14px 0px rgba(0,0,0,0.2); 
  box-shadow: 5px 5px 14px 0px rgba(0,0,0,0.2); 
}

.wp-block-flex {
  display: flex;
}

.wp-block-flex.wp-block-is-left {
  flex-direction: row;
}

.wp-block-flex.wp-block-is-center {
  justify-content: center; 
}

.wp-block-flex.wp-block-is-right {
  flex-direction: row-reverse; 
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Footer /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

footer { 
  width: 100%; 
  margin-top: auto; 
  padding: 80px 0 0 0; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: var(--footer-bg-col); 
}

footer .page-footer__container { 
  width: 100%; 
  max-width: 1200px; 
  color: var(--footer-txt-col); 
}

footer .page-footer__container a {
  color: var(--footer-link-col); 
}

footer .page-footer__container a:hover { 
  color: var(--footer-link-hover-col); 
  text-decoration: none; 
}

footer nav .footer-menu a { 
  letter-spacing: var(--letter-spacing); 
}

footer nav .footer-menu a:hover { 
  text-decoration: underline; 
  text-underline-offset: 5px;
  cursor: pointer;
}

.wp-block-social-links {
  list-style: none;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Kontakt Formular */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea                 { color: var(--kf-text-col) !important; }

::-webkit-input-placeholder 		{ /* WebKit browsers */ color: var(--txt-col) !important; opacity: 1; }
:-moz-placeholder 							{ /* Mozilla Firefox 4 to 18 */ color: var(--txt-col) !important; opacity: 1; }
::-moz-placeholder 							{ /* Mozilla Firefox 19+ */ color: var(--txt-col) !important; opacity: 1; }
:-ms-input-placeholder 					{ /* Internet Explorer 10+ */ color: var(--txt-col) !important; opacity: 1; }

.wpcf7-form-control.name,
.wpcf7-form-control.street,
.wpcf7-form-control.zip,
.wpcf7-form-control.tel,
.wpcf7-form-control.email,
.wpcf7-form-control.message     { border: none; outline: none; border-radius: 0; border-bottom: 2px solid var(--kf-text-col); background-color: transparent; width: 100%; font-size: 1rem; padding: 0.625rem 0; margin: 0 0 2.1875rem 0; }

.wpcf7-form-control.message     { margin: 0; }

.wpcf7-submit                           { display: block; background-color: var(--kf-btn-bkg-col); color: var(--kf-btn-txt-col) !important; padding: 17px; width: 100%; cursor: pointer; border: 2px solid var(--theme-color); font-size: 18px; font-weight: 400; }
.wpcf7-form input[type="submit"]:hover  { background-color: var(--body-bg-color); color: var(--text-decoration-color) !important; border: 2px solid var(--text-decoration-color); text-decoration: none; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; }

.acceptance                     { margin: 10px 0; font-size: 0.8rem; }
.wpcf7-list-item                { margin: 0!important; }

.mail-capcha p                  { display: flex; align-items: center; }
.mail-capcha p img              { margin-right: 10px; }
.mail-capcha p .Scapcha         { width: 100%; max-width: 60px; font-size: 1rem; margin-left: 10px; padding: 5px; border: none; outline: none; border-radius: 0; color: #000000; background-color: rgb(240, 240, 240); }

.wpcf7-response-output          { border: none!important; color: rgb(255, 20, 20); text-align: center; }