/*!
************************************************************************
** Theme Wolle-und-Feines Custom Stylesheet
** 22-08-2026
** 
***********************************************************************/


/* ------------------------------------------------------------------ */
/* Webfonts
/* ------------------------------------------------------------------ */

@import url("./fonts.css");


/* ------------------------------------------------------------------ */
/* Global variables
/* ------------------------------------------------------------------ */

:root {
	--myskin-linkactive: rgb(98, 146, 47);


	/* Fonts */
	--base-font-family: 'PT Serif',serif;
	--base-font-weight-normal: 400;
	--base-font-weight-semibold: 700; /* gibt es nicht der Schriftfamilie */
	--base-font-weight-bold: 700;
	--base-font-style: normal;
	--heading-font-family: 'Oleo Script',system-ui;
	--heading-font-weight-normal: 400;
	--heading-font-weight-bold: 400;
	--heading-font-style: normal;
	--heading-color: #222;
	--mono-font-family: 'Ubuntu Mono',monospace;
	/* --icon-font-family: 'Font Awesome 6 Free'; */

	/* Font sizes */
	--html-font-size: 17px;
	--html-line-height: 1.4rem;
	--header-line-height: 1.4rem;
	--line-height: 1.4rem;
	--line-height-relative: 1.2em;

	--line-height-base: 1.4rem;
	--line-height-sm: 1.2;
	/* --line-height-md: 1.75; */
	/* --line-height-lg: 2; */

	/* General sizes */
	--container-padding-top: 34px;
	--container-padding-bottom: 34px;
	--container-padding-left-right: 24px; /* 1.4rem */
	/* --container-padding: 0rem 1.4rem 3rem; */
	/* --container-mobile-padding: 2rem 0.7rem 2rem; */
	--container-border-width: 20px;
	--lead-font-size: var(--html-font-size) * 1.25;
	--lead-font-weight: 300;
	--small-font-size: .875em;

	--border-radius: 3px;
	--column-padding: 0.4rem;
	--column-gap: 1rem;
	--paragraph-margin-bottom: 0.5rem;
	--header-approx-height: 63px;
	--icon-play-size: 45px;
	--hero-padding-top: 19px;
	/* --skin-headlogo-height: 220px; */
	--header-logo-height: 220px;

	/* Header */
	/* --topnav-item-width: 150px; */
	/* --topnav-item-padding: 7px 10px; */
	/* --topnav-bgcolor: rgb(34, 34, 34); #222 */
	/* --topnav-inner-bgcolor: rgb(68, 68, 68); #444 */

	--header-bg-color: rgb(98, 146, 47);
	--header-color: #eee;
	--header-link-color: #eee;
	--header-hover-color: #fff;
	--header-active-color: #555;

	/* General colors */
	--primary-bg-color: rgb(98, 146, 47);
	--primary-color: #fff;
	--secondary-bgcolor: #2f6698;
	/* --secondary-color: #222; */
	--secondary-color: #a32221; /* rgb(163, 34, 33) */
	--light-color: #fff;
	--dark-color: #000;

	--body-bgcolor: rgba(98, 146, 47, 0.93);
	--body-color: rgb(83, 53, 27); /* #53351b */
	--body-color-muted: #888;

	--main-bg-color: #fff; /* #fff */
	/* --main-linkcolor: rgb(139, 0, 0); #8b0000 */
	--main-linkcolor: var(--secondary-color);
	--main-linkhover: #ce6a06;
	--main-linkvisited: var(--secondary-color);
	--main-linkactive: rgb(0, 100, 0);
	--mobile-logo-svg-fill: #000;
	--divider-color: #333;
	--features-bg-color: rgb(239, 233, 231); /* #efe9e7 */

	--footer-linkcolor: rgb(102, 102, 102); /* #666 */
	--border-color: rgb(83, 53, 27); /*  */
	--header-footer-border: 1px solid rgba(172, 179, 194, 0.3);

	/* Buttons */
	--button-bg-color: var(--main-linkcolor);
	--button-color: var(--light-color);
	--button-border-color: #227ded;
	/* --button-hover-color: #1877ec; */
	--button-hover-color: var(--main-linkhover);

	/* Footer */
	--footer-color: #222;
	--footer-bg-color: rgb(98, 146, 47);

	/* Sections */
	--section-one-bg-color: #F7F7F7; /*  */
	--section-one-headcolor: #333;
	--section-one-txtcolor: var(--body-color); /*  */
	--section-two-bg-color: #23292f; /*  */
	--section-two-headcolor: #333; /*  */
	--section-two-txtcolor: #aaa; /* #7A7A7A */

	--section-screenshots-bgcolor-rgb: 255, 199, 18;
	--section-gallery-bgcolor-rgb: 187, 187, 187; /* #bbb */

	--cards-text-align: left; /* left|center|right */

	--features-feature-icon-size: inherit; /* Gültiger Wert oder inherit */

	--socialmedia-social-pages-icon-size: 24px; /* Gültiger Wert oder inherit */

	/* Forms */
	--form-section-bgcolor: #23292f;
	--form-section-color: #aaa;
	--form-bgcolor: transparent; /*  */
	--form-color: #888; /* --body-color */
	--form-input-bgcolor: #eee;
	--form-input-color: #111;
	--form-input-focus-bgcolor: #dedede;
	--form-input-focus-color: #000;
	--form-input-focus-box-shadow: 0 0 0 1.2px #aaa;
	--form-label-bgcolor: transparent;
	--form-label-color: var(--form-color);
	--form-required-color: orange;
	--form-error-bgcolor: transparent;
	--form-error-color: #db7093;
	--form-placeholder-color: #aaa;
	--form-readonly-color: #2f6698;

	/* Transitions */
	--gallery-item-overlay-transition: opacity 0.4s ease-in-out;

	/* Go-Top */
	--gotop-width: 54px;
}


/* ------------------------------------------------------------------ */
/* General and Common Styles
/* ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	margin-top: 15px;
	margin-bottom: 9px;
	color: var(--primary-bg-color);
	font-weight: var(--heading-font-weight-normal);
}
h1, h2 {
	font-family: var(--heading-font-family);
}
h3, h4, h5, h6 {
	font-family: var(--base-font-family);
}
h2, .h2 {
	margin: 12px auto 18px;
	color: #ed052d;
	font-family: var(--mono-font-family);
	font-weight: var(--heading-font-weight-normal);
	/* font-size: 1.7647rem; */
	font-size: 34px;
	word-spacing: -.05em;
	letter-spacing: -.2px;
	line-height: 1.15em;
	text-align: center;
	width: 80%;
	/* text-decoration: underline; */
	/* border-bottom: 2px solid red; */
}
.column[class*=" column-count-"] h2,
.column[class*=" column-count-"] .h2 {
	width: 100%;
}
@media (max-width: 840px) {
	h2, .h2 {
		width: 100%;
	}
}

.column[class*=" column-count-"] h2,
.column[class*=" column-count-"] .h2,
h2, .h2 {
	display: inline-block;
	width: 100%;
	margin: 3px auto 10px;
	padding: 30px 0 3px;
	border-radius: 0;
	border-top: 2px dotted #ddd;
	color: var(--secondary-color);
	font-family: var(--heading-font-family);
	font-size: 2.7rem;
	font-weight: var(--heading-font-weight-normal);
	font-style: normal;
	line-height: 2.7rem;
	text-align: center;
}
#body-wrapper h2,
#body-wrapper .h2 {
	border-top: none;
}

h3, .h3 {
	font-size: 1.17647rem;
	font-weight: var(--heading-font-weight-normal);
	line-height: 1.17647rem;
}
h3, .h3 {
	margin-top: 1.1em;
	margin-bottom: 6px;
	color: var(--primary-bg-color);
	font-size: 1.5294rem;
	font-weight: var(--heading-font-weight-normal);
	line-height: 1.5rem;
}
h4, .h4 {
	margin-top: 0.9em;
	/* color: rgb(var(--skin-color-gruen-rgb)); */
	color: var(--primary-bg-color);
	font-weight: var(--heading-font-weight-normal);
	font-size: 1.3125rem;
	line-height: 1.25rem;
}
h5, .h5 {
	margin-top: .8em;
	color: var(--body-color);
	font-family: var(--mono-font-family);
	font-weight: var(--heading-font-weight-normal);
	font-size: 30px;
	line-height: 1em;
	text-align: center;
}
.title-h1h2 h1 {
	font-weight: var(--heading-font-weight-normal);
	margin-bottom: 0;
	line-height: 1.1;
}

/* Diese Deklaration verhindert saemtliche Klick-, */
/* Scroll- und Hover-Events auf den iframes */
iframe[id^="iframe_osm"] {
	pointer-events: none;
}


/** Links **/
a {
	color: var(--main-linkcolor);
	font-weight: var(--base-font-weight-normal);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: var(--myskin-linkactive);
}
a:visited {
	color: var(--main-linkvisited);
	text-decoration: none;
}


/** Diese hauptsächlich zur Verwendung mit Plugin Grav Shortcode Core **/


/** Farben und Boxen **/
.green:not(.toast),
.green {
	/* color: rgb(var(--skin-color-gruen-rgb)); */
	color: var(--primary-bg-color);
}
.red {
	color: #a32221;
}

/* Beispiel: [div class="box green"]**Mein Text**[/div] */
div.box.green {
	margin-top: 10px;
	/* background-color: rgb(var(--skin-color-gruen-rgb)); */
	background-color: var(--primary-bg-color);
	border: 1px solid var(--body-color);
	color: #fff;
}
.handarbeitsrunde div.box.green {
	overflow: hidden;
}
div.box h3 > .text-large {
	line-height: 1.9rem;
}
div.box.green h3 {
	color: var(--light-color);
	font-size: 1.705rem;
	font-style: italic;
}


/* ------------------------------------------------------------------ */
/* Spectre overrides ... (oder Flex-grid)
/* ------------------------------------------------------------------ */

/** Container .last-section in base.html.twig **/
.container.last-section {
	height: 8px;
	/* background-color: rgb(var(--skin-color-gruen-rgb)); */
	background-color: var(--primary-bg-color);
	margin: 0 auto;
	padding: 0 0;
	border: none;
	/* border: 1px solid red; */
}
@media (max-width: 600px) {
	.container:not(.container-padding-remove).last-section {
		/* padding: 0 10px; */
		padding: 0 0;
	}
}
.last-section.container div {
	height: 8px;
	background: var(--main-bg-color);
	border-radius: 0 0 8px 8px;
}


/** Buttons **/


/** Figures **/
figure figcaption,
figure figcaption.figure-caption-below {
	padding: 0 4px;
	color: #ccc;
	font-size: 10px;
	line-height: 1.2em;
}


/** Diverses **/
.oeffnungszeiten-anfahrt .column > p:has(img#anfahrt-rote-wolle) {
	margin-bottom: 0;
}
img#anfahrt-rote-wolle {
	display: block;
	margin-bottom: 0;
	margin-right: 10px;
}


/* ------------------------------------------------------------------ */
/* Mobile Menu
/* ------------------------------------------------------------------ */

/* Mobile-Menu Toggler */
.mobile-menu {
	/* right: 10px; */
	margin-left: calc(var(--container-border-width) * 0.8);
	margin-right: calc(var(--container-border-width) * 0.8);
}

/* #start > #body-wrapper > .container, */
#start .section:first-of-type:not(#body-wrapper),
#main .section:first-of-type:not(#body-wrapper) {
	padding-top: 0;
	/* border: 2px solid blueviolet; */
	/* z-index: 10; */
}

.container:not(.container-padding-remove) {
	border-left: var(--container-border-width) solid var(--primary-bg-color);
	border-right: var(--container-border-width) solid var(--primary-bg-color);
}

#body-wrapper .container {
	padding: var(--container-padding-top) 0 var(--container-padding-bottom);
	background: var(--main-bg-color);
	border-bottom: none; /* Demo */
}


/* ------------------------------------------------------------------ */
/* Tree (in Quark Treemenu)
/* ------------------------------------------------------------------ */

ul.tree {
	/* margin: 1rem 2rem 2rem 1rem; */
	margin-right: 2rem;
}


/* Animation -------------------------------------------------------- */


/* ------------------------------------------------------------------ */
/* Header
/* ------------------------------------------------------------------ */

#fooheader {
	font-size: .94117rem;
}
/* Container nicht .section enthält die Farben! */
#header .container {
	padding: 0 calc(var(--container-border-width) * 0.8);
	border-left: none;
	border-right: none;
	border-bottom: none;
}
@media (max-width: 600px) {
	#header .container {
		padding: 0 10px; /* --container-border-width-mobile */
	}
}

#header .navbar {
	padding-right: 20px;
	/* box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.2); */
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}


/* Brand Logo Header and Footer ------------------------------------- */

#header .logo svg,
#header .logo img {
	display: block;
	height: 44px;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: default;
	/* border: 1px solid green; */
}
#header:has(+ #start #body-wrapper) .logo svg,
#header:has(+ #start #body-wrapper) .logo img,
#header:has(+ #main #body-wrapper) .logo svg,
#header:has(+ #main #body-wrapper) .logo img,
#header.scrolled .logo svg,
#header.scrolled .logo img {
	cursor: pointer;
	opacity: 1;
	/* border: 1px solid green; */
}


/* ------------------------------------------------------------------ */
/* Footer
/* ------------------------------------------------------------------ */

#footer .container {
	/* padding-left: 0.5rem; */
	/* padding-right: 0.5rem; */
	padding: 0 .94117rem;
	border-top: none;
}
#footer .columns {
	/* padding-top: .5rem; */
	/* padding-bottom: 1rem; */
	padding: .75rem 1rem 1.5rem;
}

#footer .logo {
	display: table-cell;
	vertical-align: middle;
	padding-right: 10px;
}


/* ------------------------------------------------------------------ */
/* Navbar Dropmenu (Desktop-Menu)
/* ------------------------------------------------------------------ */

.dropmenu ul li a:focus,
.dropmenu ul li a.active {
	text-decoration: none;
}


/* ------------------------------------------------------------------ */
/* Error page
/* ------------------------------------------------------------------ */

#main > #body-wrapper > .container {
  /* padding-top: calc(var(--header-approx-height) - 8px); */
  padding-top: calc(var(--header-approx-height) + 14px);
	padding-bottom: 1rem;
}
#error h1 {
	position: absolute;
	top: 1.8rem;
	left: 0;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0rem;
	font-size: 4rem;
	/* border: 1px solid red; */
}
#error h1 {
	color: #fff;
}
.himmel {
	padding: 7rem 0 0;
	background-color: rgb(44, 183, 225);
	/* border: 1px solid red; */
}
.himmel p {
	margin: 0;
}
#error p img {
	display: block;
	padding-bottom: 0;
}
.bg-green {
	background-color: var(--primary-bg-color);
	color: #fff;
	padding: 1rem 1rem 4rem;
}
.bg-green p {
	padding-top: 1rem;
}
body.sticky-footer #page-wrapper:has(#error) {
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
}


/* ------------------------------------------------------------------ */
/* Hero Template
/* ------------------------------------------------------------------ */

.hero {
	background-color: transparent;
}
.hero h1 {
	/* color: rgb(var(--skin-color-gruen-rgb)); */
	color: var(--primary-bg-color);
	font-weight: 400;
	font-style: normal;
	padding: 22px 0 0;
	position: relative;
}

.hero #to-start {
	position: relative;
	margin: 3px auto 0;
	bottom: initial;
	font-size: 2.5rem;
}
.hero #to-start.fa-fade,
.hero #to-start.fa-beat {
	--fa-animation-duration: 5s;
}


/* ------------------------------------------------------------------ */
/* Blog
/* ------------------------------------------------------------------ */




/* ------------------------------------------------------------------ */
/* Forms
/* ------------------------------------------------------------------ */



/** Grav Login **/

#main > #body-wrapper > .container:has(#grav-login) {
	background: var(--primary-bg-color);
}

#grav-login .form-actions {
	text-align: left;
}

#grav-login .button-wrapper .form-data.rememberme {
	width: 100%;
}

#grav-login h1,
#grav-login h2 {
	font-family: var(--base-font-family);
	font-size: 2rem;
	color: var(--body-color);
}

#grav-login .btn,
#grav-login .button {
	margin-bottom: 6px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: inherit;
}


/* ------------------------------------------------------------------ */
/* Cards Template
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* Cardsgallery Template
/* ------------------------------------------------------------------ */

.cardsgallery-card {
	padding: 6px;
	background: var(--features-bg-color);
	border: none;
}

.cardsgallery-card .square {
	background: transparent;
	margin: 0;
}

.cardsgallery-card .card-body h3 {
	line-height: var(--line-height-sm);
}


/* ------------------------------------------------------------------ */
/* Clients Template
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* Default Template
/* ------------------------------------------------------------------ */

.default.logo {
	position: relative;
	text-align: center;
	/* border: 1px solid blue; */
}
.default.logo .container {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
}
.default.logo .column {
	position: relative;
	padding-left: 0;
	padding-right: 0;
	padding-top: calc(var(--header-approx-height) + var(--hero-padding-top));
	background-color: var(--primary-bg-color);
	text-align: center;
}

.default.logo p {
	margin: 0;
}

.default.logo img {
	position: relative;
	display: block;
	height: var(--header-logo-height);
	width: auto;
	margin: 0 auto;
}

.default.logo h1 {
	margin: 30px 20px 0;
	padding: 12px 20px 10px;
	background-color: var(--features-bg-color);
	border-radius: var(--border-radius);
	font-size: 1.5294rem;
	line-height: 1.6rem;
	text-align: center;
}
@media only screen and (min-width: 360px) {
	.default.logo h1 {
		font-size: 2.3rem;
		line-height: 2.3rem;
	}
}
@media only screen and (min-width: 480px) {
	.default.logo h1 {
		font-size: 2.7rem;
		line-height: 2.7rem;
	}
}

.default.logo h2 {
	position: relative;
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0 12px;
	border: none;
	border-radius: 0;
	background-color: transparent;
	color: var(--body-color);
	font-family: var(--mono-font-family);
	font-size: 25px; /* 21px */
	font-weight: var(--heading-font-weight-normal);
	font-style: normal;
	line-height: .9em;
	text-align: center;
	word-spacing: -.1em;
	letter-spacing: .5px;
	text-decoration: none;
	/* border: 1px solid red; */
}

.default.logo #logo-background {
	position: absolute;
	/* top: 188px; */
	top: calc(var(--header-approx-height) + var(--hero-padding-top) + (var(--header-logo-height) * 0.48181));
	height: 100%;
	margin: 0;
	padding: 0;
	border-radius: 8px 8px 0px 0px;
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	/* border: 1px solid red; */
}


/* ------------------------------------------------------------------ */
/* Features Template
/* ------------------------------------------------------------------ */

.features .container {
	padding-top: 1px;
}

.features .column:nth-child(1) .feature-card figure {
	transform: rotate(-1.5deg);
	/* ... oder die modernere Form */
	/* rotate: 1deg; */
}
.features .column:nth-child(2) .feature-card figure {
	transform: rotate(.75deg);
}
.features .column:nth-child(3) .feature-card figure {
	transform: rotate(-1.3deg);
}
.features .column:nth-child(4) .feature-card figure {
	transform: rotate(1.2deg);
}
.features .column:nth-child(5) .feature-card figure {
	transform: rotate(-.85deg);
}
/* Wenn nur 1 .column vorhanden */
.features .column:nth-child(1):last-child .feature-card figure {
	transform: rotate(-0.5deg);
}
.foofeatures .column:nth-child(1):last-child .feature-card {
	background-color: transparent;
}
.features.no-rotate .column:nth-child(1):last-child .feature-card figure {
	transform: none;
}

.features .column .feature-card figure figcaption.figure-caption-top {
	padding: 7px 8px 0;
	/* border: 1px solid red; */
}
.features .column .feature-card figure figcaption.figure-caption-bottom {
	padding: 0 8px 7px;
	/* border: 1px solid orange; */
}

.features .img-responsive {
	padding: 5px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 2px;
	box-shadow: 3px 3px 4px 0px rgba(170, 170, 170, 0.3);
}

.features h3 {
	font-family: var(--heading-font-family);
}

.xxfeatures.bildkarten .cols.feature-cards,
.xxfeatures.bildkarten .columns.feature-cards {
	padding-top: 1rem;
	border-top: 2px dotted #ddd;
}


/* ------------------------------------------------------------------ */
/* Sbs-list Template
/* ------------------------------------------------------------------ */

.sbs-list .sbs-row .sbs-media img,
.sbs-list .sbs-row .sbs-media video {
	border: 1px solid #eee;
}
.sbs-list .sbs-row h3,
.sbs-list .sbs-row h4 {
	margin-top: 2px;
	line-height: 1.6rem;
}

/* ------------------------------------------------------------------ */
/* Services Template
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* Socialmedia Template
/* ------------------------------------------------------------------ */

.socialmedia.section .container {
	border-top: none;
}
.socialmedia.section .container-inner {
	border-top: 1px dashed #ccc;
	border-radius: 8px;
}
.socialmedia .social-pages a,
.socialmedia .social-pages a:visited {
	color: var(--primary-bg-color);
	text-decoration: none;
}
.socialmedia .social-pages a:hover {
	/* color: var(--main-linkcolor); */
	text-decoration: none;
}


/* ------------------------------------------------------------------ */
/* Text Template
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* Animations (using Animate.css)
/* ------------------------------------------------------------------ */

/** Animiertes Hero-Bild **/
.column img#strickkurse-schaf {
	/* display: block; */
	/* opacity: 0 für Animation .animate__bounceIn... */
	opacity: 0;
}
.column img#strickkurse-schaf.show {
	opacity: 1;
}
/* Angepasste Eigenschaften für Animate.css */
.column img#strickkurse-schaf.animate__animated.animate__bounceInLeft {
	--animate-duration: 4s;
}
/* opacity: 0 für Animation */
img#fooanfahrt-rote-wolle {
	opacity: 0;
}
img#fooanfahrt-rote-wolle.show {
	opacity: 1;
}



/* ------------------------------------------------------------------ */
/* Foo / Custom Shortcode Probe
/* ------------------------------------------------------------------ */

.sc-callout.sc-callout--info {
	background-color: #fff;
}
.sc-callout.sc-callout--success {
	background-color: green;
	color: #fff;
}
.sc-callout.sc-callout--warning {
	background-color: orange;
	color: #000;
}
.sc-callout img {
	max-width: 200px;
}



/* ------------------------------------------------------------------ */
/* Media Queries
/* ------------------------------------------------------------------ */

/* Spectre sm */
@media only screen and (max-width: 600px) {

	img.float-right {
		margin-left: .3rem;
		/* margin-right: 0; */
		/* float: none !important; */
		/* width: 33%; */
		max-width: 33%;
	}
	#foo p:has(.float-right)::after {
		clear: both;
		content: "";
		display: table;
	}

	#footer .columns {
		padding-left: 0;
		padding-right: 0;
	}

	.mobile-menu {
		margin-left: calc(var(--container-border-width) / 2);
		margin-right: calc(var(--container-border-width) / 2);
	}

	/* .container:not(.container-padding-remove):not(~ #logo-background) { */
	.container:not(.container-padding-remove) {
		border-left-width: calc(var(--container-border-width) / 2);
		border-right-width: calc(var(--container-border-width) / 2);
		padding-left: calc(var(--container-padding-left-right) / 4);
		padding-right: calc(var(--container-padding-left-right) / 4);
		/* background-color: yellow; */
	}

	.container:has(#logo-background) {
		padding-left: 0;
		padding-right: 0;
	}

	.features .cols.feature-cards,
	.features .columns.feature-cards {
		row-gap: 1rem;
	}

	.features .cols .feature-card,
	.features .columns .feature-card {
		margin-left: .1rem;
		margin-right: .1rem;
		margin-bottom: 0;
		padding-top: .75rem;
		padding-bottom: .3rem;
	}

}


/* Spectre xs */
@media only screen and (max-width: 480px) {

	img.float-left,
	img.float-right {
		margin-left: 0;
		margin-right: 0;
		float: none !important;
		/* width: 100%; */
		max-width: 100%;
	}

}


/* Print styles */
@media print {

	#header.no-print ~ #main > .default.logo .column {
		padding-top: var(--hero-padding-top);
		/* border: 2px solid red; */
	}

	body {
		background: #fff;
	}

}