/*
Theme Name: eTale Africa
Theme URI:
Author: Niilo Mäki Foundation
Author URI: https://www.nmi.fi
Description: eTale Africa Theme
Version: 1.0
Tags: custom
Text Domain: Custom theme for eTale Africa
*/
body {
  /*padding-top: calc(300px + var(--wp-admin--admin-bar--height));*/
  /*padding-top: 6.6em;*/
  font-family: 'Optima Regular', Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
}

h1,h2,h3,h4 {
    font-family: 'Optima Bold';
}

h1 {
	font-size: 16pt;
	margin-bottom: 1.5em;
	margin-top: 2em;
}

h2 {
	font-size: 16pt;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

h3 {
	font-size: 14pt;
	margin-top: 1.5em;
	margin-bottom: 1em;

}

strong {
    font-family: Optima Regular Bold;
}

h4 {
	font-size: 14pt;
	font-family: Optima;
	font-weight: regular;
}

@media (max-width: 575.999px) {
    /*body { padding-top: 5.0em; }*/
	div.face-container {
		margin-top: -7em !important;
	}
	ul.nav-buttons img {
		max-width: 50% !important;
	}

	#nutshell div.content {
	    margin: 0 .5em 0 0 !important;
	}
    div.landing-grid p {
        font-size: 10pt !important;
    }
}

@media (max-width: 781px) {
	.etale-pathway div.wp-block-image {
	    float: left !important;
	}
    h2 {
	text-align: center;
    }
	.etale-pathway p {
	    text-align: left !important;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    /*body { padding-top: 5.0em; }*/
	div.face-container {
		margin-top: -7em !important;
	}
	ul.nav-buttons img {
		max-width: 50% !important;
	}
	div.aboutus-col h1 {
	    min-height: 100pt !important;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /*body { padding-top: 5.0em; }*/
	div.face-container {
		margin-top: -5em !important;
	}
	ul.nav-buttons img {
		max-width: 33.333% !important;
	}
	div.aboutus-col h1 {
	    min-height: 80pt !important;
	}
}

@media (max-width:991.999px) {
    /*#etale_content > h1,*/
    div.desktop-features,
    #breadcrumb,
    .footer-menu,
    div.pdfprnt-buttons {
	visibility: hidden;
	width: 0;
	height: 0;
	margin: 0 !important;
    }
    img.header-logo {
	visibility: hidden;
    }
    
    nav.navbar { background: #003F00 !important; }
	#featured div {
	    width: 80% !important;
	}
	
    li.previews {
	flex-wrap: wrap-reverse !important;
    }
    div.preview-image {
        height: 15em !important;
    }
    div.preview-text {
	padding: 0 4em 0 4em !important;
	height: auto !important;
    }
    .read-more a {
        padding: .7em 1em .7em 1em !important;
    }
    #featured div.outer {
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
    }

    div.submenu {
	display: block !important;
    }

    div.content-logo {
	width: 100%;
	visibility: hidden;
    }
}

div.content-logo img {
    display: block;
    height: 4em;
    margin-left: auto;
    margin-right: auto;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /*body { padding-top: 8.8em; }*/

	div.face-container {
		margin-top: -4em !important;
	}
	div.aboutus-col h1 {
	    min-height: 40pt !important;
	}
    li.previews:nth-child(even) {
	flex-direction: row-reverse !important;
    }
    div.content-logo {
	visibility: hidden;
	width: 0;
	height: 0;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}


#ttr_sidebar
{
border-left: 1px solid black;
}

nav {
    border-bottom: 1px #a2a2a2 solid;
	/*background: #90CC9B; */
}

.sidebar {
    margin-left: 3em;
    line-height: 120%;
}

.sidebar h3 {
	display: block;
	padding-left: 4em;
	padding-top: 1em;
	margin-left: 0;
	height: 3em;
	background-size: contain;
	background-repeat: no-repeat;
    font-family: 'Optima Bold';

}

.sidebar p {
	margin-left: 4.7em;
}


.sidebar-material h3 {
	background-image: url("img/other/key_literature.png");
}

.sidebar a,
.references a {
    color: #3376be;
}

.sidebar-video h3 {
	background-image: url("img/other/video_library.png");
}

.sidebar-adread h3 {
	background-image: url("img/other/additional_reading.png");
}

.sidebar-tips h3 {
	background-image: url("img/other/practical_tips.png");
}

/*
 pääväri: #c9dfca
 koroste  #006a37
 banneri  #90cc9b
 painike  #f7cc9a
*/
#etale_footer
{
	padding: 0 0 3em 0;
	margin: 0 0 0 0;
    width: 100%;
	background: #c9dfca;
	color: #000;
	font-size: 11pt;
}

.tlp-team-container {
    margin-top: 5em;
}

form.etale_search {
    margin: 4em 0 5em 0;
    padding: 0;
}

form.etale_search div ul {
    width: 100%;
    margin: 0;
    padding: 0;
}

form.etale_search div ul li {
    width: 100%;
}


form.etale_search div ul li input {
    width: 100%;
    height: 3em;
    padding: 1.0em;
    border: 1px solid #bbb;
    font-family: 'Optima Regular', themify;
    font-size: 14pt;
    -ms-box-sizing: border-box; 
    -khtml-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;   
    box-sizing: border-box;        
    box-sizing: border-box; 
}

form.etale_search div ul li h4 {
    display: inline-block;
    margin: 4em 1em 4em 0;
}

form.etale_search div ul li select {
    display: inline;
    border: 1px solid #bbb;
    padding: .5em;
    background: #fff;
    font-size: 14pt;
    font-family: themify, 'Optima Regular';

}

.etale_pagination {
    margin: 1em;
    
}

#etale_pagelist {
    margin: 0;
    padding: 0;
}

.etale_pagination .page-numbers {
    padding: .7em;
    border: 1px solid #333;
    margin: .3em;
    
}

.etale_pagination .current {
    background: #ddd;
}

.etale_pagination .dots {
    border: none;
}

.etale_pagination .next,
.etale_pagination .prev {
    border: none;
    font-size: 20pt;
    margin: .5em;
    padding: 0;
}

.etale_pagination div {

    text-align: center;
    margin: 1em;
    color: #555;
}


#etale_audiolibrary {
    margin-top: 3em;
    border: collapse;
    width: 100%;
}

.etale_audio {
    display: inline-block;
}

#etale_audiolibrary th {
    border-bottom: 1px solid #000;
    font-size: 14pt;
    padding: 1em 1em .7em 2em;
}

#etale_audiolibrary td.letter {
    font-size: 24pt;
    width: 30%;
    font-family: 'Optima Bold';
    border-bottom: 1px solid #000;
    padding: 1em 1em 1em 2em;
}

#etale_audiolibrary td.sound {
    font-size: 14pt;
    width: 70%;
    font-family: 'Optima Bold';
    border-bottom: 1px solid #000;
    padding: 1em 1em 1em 2em;
}

.etale_audio div.phony {
    display: inline-block;
}

#etale_audiolibrary .phony h1,
.etale_audio .phony h1 {
    font-size: 24pt;
    display: inline-block;
    width: 4em;
    margin: 0;
}

.play {
    margin-left: 1em;
    padding: 1em;
    /*visibility: hidden !important;*/
    padding-right: 2em;
}

.lettersound {
    width: 3em;
    display: inline-block;
}

img.etale_audiolibrary-playbtn {
    width: 4em;
    margin-left: 3em;
}

div.has-background div.wp-block-group__inner-container {
    padding: 2em;
}

div.wp-block-column {
    margin-left: 0 !important;
}


#etale_footer a {
    font-weight: normal;
    color: #000;
}

#etale_footer h3 {
	margin-top: 4em;
    font-family: 'Optima Bold';
	font-size: 11pt;
	padding-bottom: 1em;
}

ul.other-logos {
}

ul.other-logos li {
	display: inline-block;
	margin-right: 1.2em;
	margin-top: 1em;
}

.other-logos img {
	max-width: 1.5em;
}

div.footer-logos {
	padding: 0;
	margin-top: 4em;
}

.footer-logos img {
	max-width: 90%;
	max-height: 5em;
	display: block;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 1em;
}

.etale_footer_padding {
	height: 4em;
	background: #fff;
}

.etale_footer_container
{
	padding-top: 0;
}

#etale_footer span {
	font-weight: bold;
}

#etale_footer .copyright {
	text-align: center;
	margin: 2em;
    font-size: .9em;
}

a {
	color: #006837;
	font-weight: bold;
}

.etale_light {
	color: #cae0cb;
}

#breadcrumb {
	margin-top: 3em;
	font-family: Acumin Pro;
	font-weight: light;
	font-size: 10pt;
	margin-bottom: 1em;
	margin-left: 1.3em;
}

div#breadcrumb a {
	color: #006837;
}

div#breadcrumb span {
	color: #777;
}

img.header-logo {
    margin-top: .5em;
    padding-bottom: .5em;
	max-width: 8em;
}

ul.navbar-nav {
	display: flex;
	align-items: stretch;
    justify-content: space-between;
    width: 100%;
    padding-right: .5em;
    margin-left: 2.5em;
}


.navbar-collapse {
    /*margin-top: 2em;*/
	padding-left: 1em;
	width: 30em;
	position: absolute;
	z-index: 1;
	float: left;
	padding-bottom: 3em;
}

nav.navbar {
	display: block;
	padding: 0;
	/*padding-top: var(--wp-admin--admin-bar--height);*/
	margin: 0;
}

div.landing-grid {
    padding: 0;
    margin: 0;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

div.landing-grid p {
    font-size: 16pt;
    display: grid;
    align-items: center;
    justify-items: center;
    padding-left: 2em;
    padding-right: 2em;
}

.landing-grid1 {
    background: #FAEAD6;
}
.landing-grid2 {
    background: #B25854;
}
.landing-grid3 {
    background: #EE9772;
}

.etale-linkbox-literacy,
.etale-linkbox-primary
{
    background: #C9E0C9;
}

.etale-linkbox-math {
    background: #f6c69b;
}

.etale-linkbox-ecec {
    background: #b6f0ff;
}

.etale-linkbox {
    padding: 1em 2.5em 2em 2.5em;
    margin-top: 4em;
    margin-bottom: 4em;
}

.etale-linkbox p {
    padding-right: 0;
}

.etale-linkbox ul {
    display: flex;
    flex-flow: wrap;
    align-items: stretch;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    column-gap: 7%;
}

.etale-linkbox ul li {
    background-image: url("img/nav/icon_button.svg");
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: right;
    background-position-y: -2px;
    width: 15em;
    margin-bottom: .5em;
    padding-right: 2em;
    /*flex-grow: 1;*/
}

.etale-linkbox ul li a {
    display: inline-block;
}

.etale-pathway {
    background: #b6f0ff;
    padding-top: 3em;
    padding-bottom: 3em;
}

.etale-pathway div.wp-block-image {
    padding-left: 3.8%;
    padding-right: 5%;
    padding-bottom: 1em;
    margin-bottom: 1em;
    float: none;
    /*background: linear-gradient(180deg, rgba(0,0,0,0) calc(35% - 1px), rgb(192, 192, 192) calc(35%), rgba(0,0,0,0) calc(35% + 1px));*/
}

.etale-pathway-study {
    margin-top: 10px;
}

div.logo-container,
div.navbar {
    /*margin: 0 0 1em 1em;*/
    margin: 0;
	padding: 0;
}

div.logo-container {
    margin: 0;
    padding: 1.5em;
    /*height: 7em;*/
}

.navbar-toggler {
    margin-top: .15em;
    font-size: 130%;
    font-weight: bold;
	color: #000 !important;
	float: right;
	display: inline;
	border: none;
}

.navbar-toggler:hover {
    opacity: .7;
}


.navbar-toggler:focus {
    outline: none;
}

.navbar-lines {
    width: 40px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.navbar-lines div {
    height: 4px !important;
    background: #003F00;
    margin: 9px 0px 9px 0px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

/* Header and navigation color */
.navbar-nav .dropdown-menu,
div.logo-container,
.navbar-collapse {
    background: #76d187;
}

.navbar-nav a.dropdown-item {
	background: #90cc9b;
	color: #fff;
}

a.dropdown-item:hover {
    color: #006a37 !important;
}

.one, .two, .three {
    width: 100%;
}

/*
.navbar-lines:hover div {
    width: 50px;
}*/

li.footer-nav-item {
 	margin-bottom: .5em;

}

ul.navbar-nav li {
    color: #003F00 !important;
    font-size: 12pt;
    font-weight: bold;
    font-family: Optima;
}

a.nav-link {
    padding-left: 0 !important;
    color: #000 !important;
}

li.nav-home {
    font-size: 140% !important;
}

li.nav-head {
    font-size: 140% !important;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: .5em;
}

a.nav-link:hover {
    color: #006a37 !important;
}
.aal_svg {
    visibility: hidden !important;
}

ol.references {
    padding-left: 1em;
}

ol.references li {
    margin-bottom: 1em;
    font-size: 90%;
}

figcaption {
    font-style: italic;
    max-width: 70%;
    margin: auto;
}

div.sub-page-links {
    max-width: 100%;
    padding: 0 1em 0 0;
    margin: 0;
}

div.sub-page-links:last-child {
    padding: 0;
}

ul.sub-page-links {
	margin: 0;
	padding: 0;
	display: block;
}

ul.sub-list-1 {
    
}
ul.sub-list-2 {
    
}
ul.sub-list-3 {
/*    float: right;*/
}

div.submenu {
    padding-bottom: 2em;
    padding-right: 0;
    border-bottom: 1px #a2a2a2 solid;
	margin-bottom: 1em;
    display: flex;
}

ul.sub-page-links li {
    margin: 0 0 1em 0;
    padding: 0;
}


ul.sub-page-links li span {
	font-weight: bold;
	font-size: 12pt;
	color: #777;
}


li.previews {
    margin-left: 0;
    margin-right: 0;
    border-radius: 10px;
    margin-top: 3em;
    margin-bottom: 3em;
    box-shadow: 4px 4px 7px #ccc;
}

div.preview-text {
    margin: 0;
	padding: 4em;
	border: 0px solid #ccc;
	height: 30em;
	overflow: hidden;
}

div.preview-text div.read-more {
    margin-top: 2em;
    margin-bottom: 2em;
    white-space: nowrap;

}

div.preview-image {
    margin: 0;
    padding: 0;
    margin: 0px solid #ccc;
    width: 100%;
    background: #ccc;
    overflow: hidden;
    height: 30em;
}

div.preview-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


#etale_content {
   padding: 0;
    /*margin: 0;*/
}


#face {
	background-image: url("img/face2_resized.jpg");
	background-repeat: repeat;
	background-size: cover;
	height: 40em;

	width: 100%;
	display: block;
/*	margin-bottom: -10em; */
}

div.face-container {
	margin-top: -10em;
	margin-bottom: 4em;
}

div.face-container div {
	width: 100%;
    text-align: center;
	background: #c9dfca;
}

div.face-container div.welcome {
	padding: 3em 0 0 0;
    color: #006a33;
	font-family: 'Acumin Pro';
    font-size: 8pt;
}

div.face-container div.welcome span {
    margin: 0 2em 0 2em;
}

#featured {
    color: #006837;
    width: 100%;
    min-height: 33em;
    background-size: cover;
    background-position: right;
    font-family: 'Optima';
    overflow: hidden;
}

#featured div h1 {
    font-family: 'Optima Bold';
    font-size: 18pt;
}

#featured div.outer {
    display: table;
    vertical-align: middle;
    font-size: 14pt;
    background: #c9dfca;
    margin: 5em 5em 4em 5em;
    /*top: 4em;*/
    width: 50%;
    padding: .5em 2em 2.5em 2em;
}

#featured div.middle {
    display: table-cell;
    vertical-align: middle;
}

#featured div.inner {
    margin-left: auto;
    margin-right: auto;
}

div.face-container div.box {
	font-size: 28pt;
	padding: .5em 2em 2em 2em;
	color: #003f00;
	font-weight: bold;
	font-family: 'Optima Bold';
	font-weight: normal;
}

div.middle-header {
    padding: 0 0 1.5em .4em;
	display: block;
	font-family: 'Optima Bold';
	font-size: 22pt;
}

#baobab {
	background-image: url("img/baobab.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 0;
	/*padding-top: 66.64%;*/
	padding-top: 60%;;
}

ul.nav-buttons {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	margin-bottom: 5.5em;
}

ul.nav-buttons :hover {
    opacity: .8;
}

ul.nav-buttons li {
	display: inline;
}

ul.nav-buttons img {
	max-width: 100%;
	padding-bottom: .5em;
	padding-left: .25em;
	padding-right: .25em;

}

div.aboutus {
    margin-bottom: 6em;
}

div.aboutus-col {
}

div.aboutus-col h1 {
    text-align: center;
	font-family: 'Optima Bold';
	font-size: 16pt;
	color: #003f00;
/*	min-height: 90pt; defined per screen size */
}

div.aboutus-col ul {
    padding: 0 1em 0 2em;
}

div.aboutus-col ul li {
    margin-bottom: 1.5em;
}

.read-more :hover {
    opacity: .8;
}
.read-more img {
    height: 3em;
    max-width: 100%;
    object-fit: contain;
}
.read-more a,
.return-to,
.return-to a {
    background: #ffce92;
}

.read-more a {
    font-size: 14pt;
    font-family: Optima Bold;
    padding: .7em 5em .7em 5em;
    border-radius: 10px;
    font-weight: bold;
    color: #000;
}

.return-to {
    margin-top: 4em;
    margin-bottom: 2em;
    padding: 2em 2em 3em 2em;
    max-width: 33em;
    border-radius: 10px;
}

.return-to img {
    width: 5em;
    margin-bottom: 5em;
}

.return-to h4 {
    font-size: 10pt;
}

.return-to h3 {
    font-size: 20pt;
    font-family: Optima Bold;
    margin-bottom: 1.5em;
}

.return-to a {
    font-size: 11pt;
    color: #c09b74;
    border: 1px solid #c09b74;
    border-radius: 10px;
    padding: 1.3em;
}

.return-to a:hover {
    background: #fff0e0;
}

a.anchor, .aal_anchor {
    display: block;
    position: relative;
    top: -9em;
    visibility: hidden;
}

.sitemap {
	margin-top: -5em !important;
}

.sitemap img {
	height: 3em;
	opacity: 1;
}

.etale-team .tlp-content {
    background: #fff;
}

.etale-team .tlp-content h3 {
    margin-top: 2em !important;
    font-size: 14pt !important;
    text-align: center;
    color: #003f00 !important;
    font-family: 'Optima Bold';
    
}

.etale-team .short-bio:before {
    background: #fff;
    margin-top: .5em !important;
    margin-bottom: .5em !important;
    content: "";
    display: block;
    margin: 0 auto;
    border-top: 1px solid #000;
    width: 4em;
}

.etale-team .short-bio {
    text-align: center;
}

.etale-table table {
    border-spacing: .7em .7em;
    border-collapse: separate;
}

.etale-table thead tr th {
    font-size: 14pt;
    font-family: Optima Bold;
    margin: 2em;
    height: 100%;
    padding: .5em 1.5em .5em 1.5em;
    background: #b9cfba;
}

.etale-table tbody tr {
    vertical-align: top;
}

.etale-table tbody tr td {
    font-size: 12pt;
    font-family: Optima Regular;
    margin: 2em;
    height: 100%;
    padding: .5em 1.5em .5em 1.5em;
    background: #c9dfca;
}

.etale-square {
    padding: 0;
    margin-bottom: 0;

}

.etale-square div.wp-block-column {
    margin-bottom: 1em;
}

.etale-square div.wp-block-column h4 {
    font-size: 12pt;
    font-family: Optima Bold;
}

.etale-square div.wp-block-group {
    font-size: 12pt;
    font-family: Optima Regular;
    margin-right: 1em;
    height: 100%;
    padding: 0 0 0 1em;
}

div.etale_search {
    border-top: 1px solid #000;
    padding: 4em 1em 4em 1em;
}

div.etale_search img {
    width: 75%;
}

div.etale_search h1 {
    margin-top: 1em;
    font-family: 'Optima Bold';
    font-size: 18pt;
}

div.etale_search h2 {
    font-size: 10pt;
    font-style: italic;
}

div.etale_search h3 {
    font-size: 10pt;
    font-family: Acumin Pro;
}

.aal_anchor:target {
  position: relative;
  top: -10em;
}

@font-face {
font-family: 'Optima Regular';
font-style: normal;
font-weight: normal;
src: url('fonts/unicode.optima-webfont.woff2') format('woff2'),
     url('fonts/unicode.optima-webfont.woff') format('woff');
}

@font-face {
font-family: 'Optima';
font-style: normal;
font-weight: normal;
src: url('fonts/OPTIMA.woff') format('woff');
}


@font-face {
font-family: 'Optima Italic';
font-style: normal;
font-weight: normal;
src: url('fonts/Optima_Italic.woff') format('woff');
}


@font-face {
font-family: 'Optima Medium';
font-style: normal;
font-weight: normal;
src: url('fonts/Optima Medium.woff') format('woff');
}


@font-face {
font-family: 'Optima Bold';
font-style: normal;
font-weight: normal;
src: url('fonts/OPTIMA_B.woff') format('woff');
}

@font-face {
font-family: 'Acumin Pro';
font-style: normal;
font-weight: normal;
src: url('fonts/Acumin-RPro.woff') format('woff');
}


@font-face {
font-family: 'Acumin Pro Italic';
font-style: normal;
font-weight: normal;
src: url('fonts/Acumin-ItPro.woff') format('woff');
}


@font-face {
font-family: 'Acumin Pro Bold';
font-style: normal;
font-weight: normal;
src: url('fonts/Acumin-BdPro.woff') format('woff');
}


@font-face {
font-family: 'Acumin Pro Bold Italic';
font-style: normal;
font-weight: normal;
src: url('fonts/Acumin-BdItPro.woff') format('woff');
}

@font-face {
    font-family: 'themify';
    src:url('fonts/themify.eot?-fvbane');
    src:url('fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'),
	url('fonts/themify.woff?-fvbane') format('woff'),
	url('fonts/themify.ttf?-fvbane') format('truetype'),
	url('fonts/themify.svg?-fvbane#themify') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="ti-"], [class*=" ti-"] {
    font-family: 'themify';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nutshell {
    background: #ffce9260 0% 0% no-repeat padding-box;
    box-shadow: 4px 4px 4px #00000012;
    border: 1px solid #707070;
    border-radius: 15px;
    margin-bottom: 3em;
}

.nutshell div.heading {
    background: #ffce92 0% 0% no-repeat padding-box;
    border-bottom: 1px solid #707070;
    border-radius: 15px 15px 0 0;
    padding: 1em;
}

.nutshell-hidden div.heading {
    border: 0 !important;
    border-radius: 15px !important;
}

.nutshell div.heading span {
    margin-left: 1em;
    font-size: 16pt;
    padding-left: 2em;
    background-image: url("img/nav/read.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.nutshell div.heading span.arrow {
    float: right;
    margin-top: .5em;
    margin-right: .5em;
    padding: .7em;
    background-size: contain;
    background-repeat: no-repeat;
}

.nutshell-visible div.heading span.arrow {
    background-image: url("img/nav/arrow_up.png") !important;
}

.nutshell-hidden div.heading span.arrow {
    background-image: url("img/nav/arrow_down.png") !important;
}

.nutshell-visible div.content {
    margin: 0.5em 2em 2em 2em;
    overflow: hidden;
    transition: max-height 0.5s ease-in;
    max-height: 1000px;
}

.nutshell-hidden div.content {
    margin: 0 2em 0 2em;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
    max-height: 0;
}

/* Make wide Gutenberg tables scroll on small screens */
.etale-scroll-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.etale-scroll-table table {
  min-width: 900px; /* tweak if needed */
}