/*
Template: twentyseventeen
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen-child/
Author: e-stablish business GmbH
Author URI: https://www.e-stablish.biz
Description: Twenty Seventeen Child brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeenchild
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* cust colours
green: 	#347d4b (52, 125, 75)
blue: 	#00456a (0, 69, 106)
sand: 	#f8f6ee (248, 246, 238)
terra: 	#ab4200 (171, 66, 0)
brown: 	#44280c (68, 40, 12)
*/


/* load custom fonts */

@font-face {
    font-family: Lato;  
    src: url(https://www.e-stablish.biz/wp-content/themes/twentyseventeen-child/fonts/Lato-Regular.ttf);  
    font-display: swap;
}


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
0.0 A. Generic custom Classes
0.0 B. Plugin Customisation
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/



/*--------------------------------------------------------------
0.0 A. Generic custom Classes
--------------------------------------------------------------*/

/* spacing before element */
/* ---------------------- */

.space-before-0em5-less {
	margin-top: -0.5em;
}

.space-before-1em-less {
	margin-top: -1em;
}

.space-before-1em5-less {
	margin-top: -1.5em;
}

.space-before-2em-less {
	margin-top: -2em;
}

.space-before-0em5 {
	padding-top: 0.5em;
}

.space-before-1em {
	padding-top: 1em;
}

.space-before-1em5 {
	padding-top: 1.5em;
}

.space-before-2em {
	padding-top: 2em;
}

.space-before-2em5 {
	padding-top: 2.5em;
}

.space-before-3em {
	padding-top: 3em;
}

/* spacing after element */
/* --------------------- */

.space-after-0em5 {
	padding-bottom: 0.5em;
}

.space-after-1em {
	padding-bottom: 1em;
}

.space-after-1em5 {
	padding-bottom: 1.5em;
}

.space-after-2em {
	padding-bottom: 2em;
}

.space-after-2em5 {
	padding-bottom: 2.5em;
}

.space-after-3em {
	padding-bottom: 3em;
}

/* spacing left of element */
/* ----------------------- */

.space-left-0em5 {
	padding-left: 0.5em;
}

.space-left-1em {
	padding-left: 1em;
}

.space-left-1em5 {
	padding-left: 1.5em;
}

.space-left-2em {
	padding-left: 2em;
}

.space-left-2em5 {
	padding-left: 2.5em;
}

.space-left-3em {
	padding-left: 3em;
}

/* line heights */
/* ------------ */

.line-height-1em5 {
	line-height: 1.5em;
}

.line-height-2em {
	line-height: 2em;
}

.line-height-2em5 {
	line-height: 2.5em;
}

.line-height-3em {
	line-height: 3em;
}


/* centering */
/* --------- */

.centered-horizontal {
	width: 100%;
	text-align: center;
}

.centered-vertical {
	height: auto;
	vertical-align: middle;
}


/* clearing & floating */
/* ------------------- */

.clear-both-before {
	clear: both;
}

.clear-left-before {
	clear: left;
}

.clear-right-before {
	clear: right;
}


.float-left {
	float: left;
}

.float-right {
	float: right;
}


/* legend cutline classes */
/* ---------------------- */


.cut-table-of-content::before {
	content: '☰ ';
}

.cut-expected-content::before {
	content: '፧ ';
}

.cut-challenge-question-problem::before {
	content: '≟ ';
}

.cut-solution-pathway::before {
	content: '≗ ';
}

.cut-break-rethink::before {
	content: '⎊ ';
}

.cut-info-reason-why::before {
	content: 'ⓘ ';
}

.cut-important-note::before {
	content: '‼ ';
}

.cut-tips-tricks::before {
	content: '☼ ';
}

.cut-hint-footnote::before {
	content: '* ';
}

.cut-opportunity-chance::before {
	content: '∔ ';
}

.cut-threat-downside::before {
	content: '⚠ ';
}

.cut-save-recommendation::before {
	content: '⏚ ';
}

.cut-difficulty-level-1::before {
	content: '∫ ';
}

.cut-difficulty-level-2::before {
	content: '∬ ';
}

.cut-difficulty-level-3::before {
	content: '∭ ';
}

.cut-code-techie::before {
	content: '<!-?> ';
}

.cut-security::before {
	content: '🔒 ';
}

.cut-legal::before {
	content: '§§ ';
}

.cut-different-no-mix-up::before {
	content: '≠ ';
}

.cut-related-consider-in-parallel::before {
	content: '&& ';
}

.cut-mutual-effect::before {
	content: '⇄ ';
}

.cut-pros-now-cons-later::before {
	content: '༟ ';
}

.cut-cons-now-pros-later::before {
	content: '࿎ ';
}

.cut-check-list::before {
	content: '✓ ';
}

.cut-tldr-summary::before {
	content: '∑ ';
}

.cut-source::before {
	content: '↳ ';
}

.cut-place-of-interest::before {
	content: '⌘ ';
}

.cut-related-topic::before {
	content: '~ ';
}



/*--------------------------------------------------------------
0.0 B. Plugin Customisation
--------------------------------------------------------------*/


/* cookie notice (WebToffee) */

.cli-bar-btn_container a:focus {
	color: #f8f6ee !important;
	background-color: #ab4200 !important;
	padding: 9pt 12pt 9pt 12pt;
}

.cli-plugin-button:hover,
.wt-cli-accept-all-btn:hover {
	color: #f8f6ee;
	background-color: #ab4200 !important;
	padding: 9pt 12pt 9pt 12pt;
}


/* cookie notice (Hu-manity) */

#cookie-notice {
	font-family: "Lato", "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif !important;
	font-size: 16px !important;
	font-size: 1rem !important;
	opacity: 0.85;
}


.cn-button.wp-default {
	font-size: 16px !important;
	font-size: 1rem !important;
	background: #ab4200 !important;
	border-color: #ab4200 !important;
	color: #fff !important;
	text-shadow: none;
	border-width: 1px;
	opacity: 0.85;
}


.cn-button.wp-default:hover {
	background: #fff !important;
	border-color: #fff !important;
	border-width: 2px;
	position: relative;
	margin: -1px -1px;
	color: #ab4200 !important;
	opacity: 0.85;
}


/* collapsomatic */

.collapseomatic-cust-frame {	/* margins require div, but plugin uses span */
	margin-top: -1em;
	margin-bottom: 2em;
}

.collapseomatic {
	background-image: none;
	color: #f8f6ee;
	background-color: rgba(68, 40, 12, 0.85); /* brown */
	padding: 1px 4px 3px 4px;
	border-radius: 3px;
}

.collapseomatic::before {
	content: '↓ show: ';
}

.colomat-close {
	background-image: none;
}

.colomat-close::before {
	content: '↑ hide: ';
}

.colomat-hover {
	text-decoration: none;
	color: #44280c;
	background-color: transparent;
}

.collapseomatic_content {
	padding-top: 1em;
	padding-bottom: 2em;
}


/* Passster */

.passster-form {
	background: #f8f6ee !important;
}

.passster-form p {
	color: #44280c !important;
}

.passster-form h4 {
	color: #ab4200 !important;
}

input.passster-password {
	border-color: #44280c !important;
}

input.passster-password::placeholder {
	color: #44280c !important;
}

button.passster-submit,
.passster-error {
	background: #ab4200 !important;
	background-color: #ab4200 !important;
}

button.passster-submit:hover {
	background: #347d4b !important;
}

/* SyntaxHighlighter */

.syntaxhighlighter .php.keyword,
.syntaxhighlighter .xml.keyword {
	color: #347d4b !important; /* green */
}

.syntaxhighlighter .php.functions {
	color: #00456a !important; /* blue */
}

.syntaxhighlighter .php.plain,
.syntaxhighlighter td.gutter {
	color: #f8f6ee !important;
}



/*--------------------------------------------------------------
1.0 Normalize
Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
--------------------------------------------------------------*/

a {
	color: #ab4200;
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-color: #ab4200;
	box-shadow: none !important;
}

a:active,
a:hover,
a:focus {
	color: #f8f6ee !important;
	background: rgba(171, 66, 0, 0.85);
	text-decoration: none;
	box-shadow: none !important;
	padding: 0px 2px 3px 4px;
	border-radius: 3px;
}



/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {
	color: #44280c;
	background-color: #f8f6ee;
	font-size: 16px;
	font-size: 1rem;
	font-family: "Lato", "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 16px;
	font-weight: 700;
	padding: 2px 3px 3px 7px;
	border-radius: 3px;
}

h2 {
	padding-left: 7px;
}

.home h2 {
	padding-left: 0px;
}

h1:not(.site-title) {
	color: #f8f6ee !important;
	background: rgba(171, 66, 0, 0.85);
}

h2:not(.entry-title) {
	color: #f8f6ee;
	background: rgba(52, 125, 75, 0.85);
}

h3 {
	color: #f8f6ee;
	background: rgba(0, 69, 106, 0.85);
	padding-left: 12px;
}

h4, h5, h6 {
	padding-left: 15px;
	background: transparent;
}

.table-of-content-heading {
	color: #f8f6ee;
	background-color: rgba(68, 40, 12, 0.85); /* brown */
	padding: 1px 4px 3px 4px;
	border-radius: 3px;
}

p.justify {
  text-align: justify;
}

p.justifyWithMarginAfter {
  text-align: justify;
  margin-bottom: 3em;
}

/* float content (e.g. text) around object (e.g. image tables) */
p.FloatContent {
	text-align: justify;
	word-break: normal;
}

/* color of mouse-selected, highlighted text */ 

::selection {
	background: #ab4200;
	color: #f8f6ee;
}

::-moz-selection {
	background: #ab4200;
	color: #f8f6ee;
}


/*--------------------------------------------------------------
8.0 Lists
--------------------------------------------------------------*/

ul.content-area__list-structure--showcase-focus {
	padding-left: 2em;
	margin-top: -1em;
}

ul.content-area__list-structure--ul-link-tips li {
	list-style: none;
	padding-top: 0.5em;
}

ul.content-area__list-structure--ul-link-tips > li::before {
	content: '☼ ';
}


/*--------------------------------------------------------------
9.0 Tables
--------------------------------------------------------------*/

table {
	border: none;
}

tr,
thead th {
	border: none;
}

table.content-area__table-structure--2-col--symbol-explanation tr td {
	width: auto;
	vertical-align: middle;
	text-align: left;
}

table.content-area__table-structure--2-col--symbol-explanation td + td {
	width: auto;
	vertical-align: middle;
	text-align: left;
}

.content-area__table-of-content--intra-page-frame {
	display: block;
	width: max-content;
	border: 1px dotted #44280c;
	border-radius: 7px;
	padding: 1em;
}


/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

.site-footer .widget-area a {
	display: block;
	border: none;
	padding: 15px;
	color: #f8f6ee;
	background: rgba(68, 40, 12, 0.85);
	text-decoration: none;
	border-radius: 3px 3px 3px 3px;
	font-size: 16px;
	font-size: 1rem;
	font-weight: 400;
}

.site-footer .widget-area a:hover,
.site-footer .widget-area a:focus {
	display: block;
	padding: 15px;
	color: #f8f6ee;
	background: rgba(171, 66, 0, 0.85);
	text-decoration: none;
	box-shadow: none;
	border-radius: 3px 3px 3px 3px;
}

.site-footer .widget-area a::before {
	content: ': ';
}

.site-footer .widget-area a::after {
	content: ' :';
}

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/

.navigation-top {
	background: #f8f6ee;
}

.navigation-top a {
	color: #f8f6ee;
	background: rgba(68, 40, 12, 0.85); /* brown */
	font-size: 16px;
	font-size: 1rem;
	font-weight: 400;
}

.main-navigation a:hover {
	color: #f8f6ee;
	background: rgba(52, 125, 75, 0.85); /* green */
	font-size: 16px;
	font-size: 1rem;
}

.main-navigation ul {
	background: #f8f6ee;
}

.main-navigation li {
	border-radius: 3px 3px 3px 3px;
}

/* Menu toggle */

.menu-toggle {
	color: #44280c; /* change colour of hamburger menu symbol */
	font-size: 16px;
	font-size: 1rem;
}

.menu-toggle:hover,
.menu-toggle:focus {
	color: #f8f6ee;
	background: rgba(171, 66, 0, 0.85) !important; /* terra */
}

.content-area__table-of-content-navigation--intra-page {
	display: inline-block;
	list-style: none;
	margin-bottom: 0.5em;
}

.content-area__table-of-content-navigation--intra-page a {
	display: block;
	margin: 5px 0px 5px 0px;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
	color: #44280c;
	text-decoration-color: #44280c;
	background-color: transparent;
}

.content-area__table-of-content-navigation--intra-page a:hover {
	color: #f8f6ee;
	background: rgba(68, 40, 12, 0.85); /* brown */
	text-decoration: none;
}

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

/* Site branding */

.custom-header-media:before {
    background: none; /* avoid transition shadow over front page top image */
}

.site-title {
	text-transform: none;
}

.custom-logo-link {
	margin-left: -40px; /* in order to have the company claim in a left vertical line to the navigation */
}

.site-title,
.site-title a {
	color: #f8f6ee;
}

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 {
	color: #f8f6ee;
}

body.has-header-image .site-title a:hover,
body.has-header-video .site-title a:hover {
	color: #f8f6ee;
	background: #ab4200;
	margin-left: -10px;
	padding: 10px;
	border-radius: 3px 3px 3px 3px;
}

body.has-header-image .site-description,
body.has-header-video .site-description {
	color: #f8f6ee;
	opacity: 0.85;
	font-size: 16px;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.custom-logo-link {
	opacity: 0.85;
}

/*--------------------------------------------------------------
13.2 Front Page
--------------------------------------------------------------*/

/* overwrite the default transition shadow (originally from 0% at the top of featured images to 30% at the bottom) by setting all values to 0% */ 
.panel-image:before {
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#00000000", GradientType=0); /* IE6-9 */
	bottom: 0;
	content: "";
	left: 0;
	right: 0;
	position: absolute;
	top: 100px;
}

/*--------------------------------------------------------------
13.3 Regular Content
--------------------------------------------------------------*/

.site-content-contain {
    background-color: #f8f6ee;
}


/*--------------------------------------------------------------
13.4 Posts
--------------------------------------------------------------*/

/* Post Landing Page */

.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
	color: #ab4200;
	font-size: 16px;
	font-size: 1rem;
	text-transform: none;
}

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

/* Social nav */

.social-navigation a {
	background-color: #767676;
	color: #fff;
	display: inline-block;
	height: 40px;
	margin: 0 1em 0.5em 0;
	text-align: center;
	width: 40px;
}

.social-navigation a:hover,
.social-navigation a:focus {
	background-color: #333;
}

/*--------------------------------------------------------------
15.0 Widgets
--------------------------------------------------------------*/

.widget ul li,
.widget ol li {
	border: none;
}

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

.custom-logo-link img {
    display: none; /* remove logo from main top image */
}

@media screen and (min-width: 20em) {

	.main-navigation li a {
		color: #f8f6ee !important;
		background: rgba(68, 40, 12, 0.85);
		padding-left: 3px;
		border-radius: 3px 3px 3px 3px;
	}

	.main-navigation li a:hover {
		color: #f8f6ee !important;
		background: rgba(171, 66, 0, 0.85);
	}

		/* hash tag link padding to work-around the fixed top navigation element - smaller screens */

	ol::before { 
	  display: block; 
	  content: " "; 
	  margin-top: -50px; 
	  height: 50px; 
	  visibility: hidden; 
	  pointer-events: none;
	}

}

@media screen and (min-width: 30em) {

	.panel-content .entry-header {
		margin-bottom: 1.0em;
	}
}

@media screen and (min-width: 48em) {

	/* hash tag link padding to work-around the fixed top navigation element - larger screens */

	ol::before { 
	  display: block; 
	  content: " "; 
	  margin-top: -135px; 
	  height: 135px; 
	  visibility: hidden; 
	  pointer-events: none;
	}

	.panel-content .wrap {
		padding-bottom: 2em;
		padding-top: 2em;
	}

	.page.page-one-column .entry-header,
	.twentyseventeen-front-page.page-one-column .entry-header,
	.archive.page-one-column:not(.has-sidebar) .page-header {
		margin-bottom: 1em; /* margin after entry-header (page title) and actual content text */
	}

	.panel-content .entry-header {
		margin-bottom: 1.0em;
	}

	.main-navigation li a::before {
		content: ': ';
	}

	.main-navigation li a::after {
		content: ' :';
	}

	.main-navigation li a {
		color: #44280c !important;
		background: #f8f6ee;
		padding-left: 10px;
	}

	.main-navigation li a:hover {
		color: #f8f6ee !important;
		background: rgba(171, 66, 0, 0.85);
	}

	/* Scroll down arrow */

	.site-header .navigation-top .menu-scroll-down {
		color: #44280c;
		background: transparent;
	}

	.menu-scroll-down:hover {
		color: #f8f6ee !important;
		background: rgba(171, 66, 0, 0.85) !important;
		/* background: #ab4200 !important; */
		border-radius: 3px 3px 3px 3px;
	}
}

@media screen and (min-width: 67em) {

	.panel-content .entry-header {
		margin-bottom: 1.0em;
	}
}

@media screen and (min-width: 79em) {

	.panel-content .entry-header {
		margin-bottom: 1.0em;
	}
}

/*--------------------------------------------------------------
xyz Special Solutions
--------------------------------------------------------------*/

/* flexbox */

.LogoClaimFlexBox {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
}

.LogoClaimFlexItem1 {
	flex-basis: 75px;
}

.LogoClaimFlexItem2 {
	min-width: 78%;
	padding-left: 1em;
}


/* grid container */

.LogoClaimGridContainer {
	display: grid;
	/* grid-template-columns: 80px auto; */
	grid-template-columns: minmax(auto, 80px) minmax(60%, auto);
	grid-gap: 20px;
	align-items: center;
}

.LogoClaimGridItem1 {
	grid-column: 1;
	grid-row: 1;
}

.LogoClaimGridItem2 {
	grid-column: 2;
	grid-row: 1;
}