/*
Theme Name: FHuwiler
Author: Didier Grand
Author URI: https://digitalgarage.ch/
Template: twentytwentyone
Description: fhuwiler.ch
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fhuwiler
Tags: one-column, accessibility-ready, custom-colors,
custom-menu, custom-logo, editor-style, featured-images,
footer-widgets, block-patterns, rtl-language-support, sticky-post,
threaded-comments, translation-ready

*/


@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;700&display=swap');

body{
	font-size: 18px;
	color: #424442;
	overflow-x: hidden;
}
.entry-title{
	color: #424442;
}
.site .button, input[type="submit"], input[type="reset"], .wp-block-search__button, .wp-block-button .wp-block-button__link{
	text-transform: uppercase;
	font-size: 16px;
}
.site-header {
    padding-bottom: 50px;
}
.wp-block-button.is-style-outline .wp-block-button__link{
	border: 1px solid #424442 !important;
	color: #424442 !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:hover{
	background-color: #424442 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
    padding: 25px 50px;
}
.site .button, input[type="submit"], input[type="reset"], .wp-block-search__button, .wp-block-button .wp-block-button__link,
.primary-navigation a,
.entry-content, .entry-summary, .widget-area,
.site-footer > .site-info,
blockquote p,
ul, ol, p,
footer,
#toTop{
	font-family: 'Mulish', sans-serif;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Fira Sans Condensed', sans-serif;
	text-transform: uppercase;
	color: #424442;
}
@media only screen and (min-width: 822px) {
	.home .site-content h2{
		font-size: 82px;
	}
}
.singular .entry-header{
	border: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.page-template-default h1{
	text-align: center;
}
.has-yellow-background-color[class]{
	background-color: rgba(238,234,221,0.5);
}
.fh-intro-text{
	margin-bottom: 80px;
	max-width: 500px !important;
	padding: 20px;
}
.wp-block-spacer.with-endline{
	position: relative;
}
.wp-block-spacer.with-endline:after {
    content:'';
    background-color: rgba(238,234,221,0.5);
    display: block;
    height: 200px;
    width: 200vw;
    position: absolute;
    left: -50vw;
    top: -160px;
    z-index: -10;
}
footer{
    font-size: 14px;
    background-color: rgba(238,234,221,0.5);
    padding: 20px;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
    background: none;
}
.contact-map iframe{
    width: 100%;
}
.wp-block-cover .wp-block-cover__inner-container > :first-child{
    margin-top: 50px;
}
.entry-content > h2{
    margin-top: 100px;
}
.primary-navigation .primary-menu-container > ul > .menu-item > a{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
    color: #424442;
}
:root {
	--branding--logo--max-width: 260px;
    --branding--logo--max-height: 170px;
}
@media only screen and (min-width: 482px) {

	.site-logo .custom-logo {
		max-width: var(--branding--logo--max-width);
		max-height: var(--branding--logo--max-height);
	}
}


@media only screen and (min-width: 822px) {
	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1000px);
	}

}

/**
 * Extends
 */
.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width {
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}

#toTop.scrollToTopBtn {
  border: none;
  cursor: pointer;
  width: 48px;

  /* place it at the bottom right corner */
  position: fixed;
  bottom: 30px;
  right: 30px;
  /* keep it at the top of everything else */
  z-index: 100;
  /* hide with opacity */
  opacity: 0;
  /* also add a translate effect */
  transform: translateY(100px);
  /* and a transition */
  transition: all .5s ease
}
#toTop figcaption{
	position: absolute;
	left: 0;
  top: 0px;
	opacity: 0;
	width: 130px;

}
#toTop:hover figcaption{
	opacity: 1;
  left: -130px;
  transition: all .5s ease;
}

#toTop.showBtn {
  opacity: 1;
  transform: translateY(0)
}
.singular:not(.tw-title-no-border) .entry-header::after {
	display: none;
}