/*
 Theme Name:   Lethal Force Understrapped
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       Michel Durinx
 Author URI:   https://centimedia.org
 Template:     understrap
 Version:      1.2.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
*/

/* 
family=Lato:wght@400;700
family=Lora:wght@400;700
family=Francois+One
NO family=Abril+Fatface
family=Karla:wght@400;700
family=Merriweather:wght@400;700 
*/

/*html{font-size: 1px;} */
body {
	font-family: 'lato', sans-serif;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.3;
	color: #222;
}
table td { font-size: 1.25rem;}
/*.clearfix::after {
  content: "";
  clear: both;
  display: table;
}*/

/* all font stacks together: */
header, h1, h2, h3, h4, h5, h6, th, caption {
	line-height: 1.0;
	font-family: 'Francois One', 'Roboto', 'Open Sans', sans-serif; 
	margin: 0; 
	font-weight: bold;
	/*text-transform: uppercase; font-variant: small-caps;*/
	}
header {font-weight: normal;}
h1, h2, h3, h4, h5, h6 {margin: .25em 0;}
/* PUBLICATIONS page */
.post-294 h4 {font-weight: normal;}
.post-294 h4:first-of-type {margin-top: 2em;}
.post-294 p + h4 {margin-top: 1.5em;}

/* Sticky footer */
html, body,#page{
	min-height: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	justify-items: flex-end;
	position: relative;
}
body, #page, #page-wrapper {flex-grow: 2;}

body {
		overflow-x: visible;
    /* overflow-x: hidden; // why? destroys sticky navbar */
     /*color:    #472724;  */
    position: relative;
    /*background: #aaaaaf url('img/neilhall.jpg') no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;*/
    min-height: 100vh;
    /*font-family: "Roboto", sans-serif;*/
}

/* experiment for fixed background iOS */

		
.custom-header {
	position: relative;
		display: table;
	height: 300px;
	height: 0;
	width: 100%;
	background-color: #aaaaaf;
}


.custom-header-media {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}
 
 .custom-header-media img {
	position: fixed;
	height: auto;
	left: 50%;
	max-width: 1000%;
	min-height: 100%;
	min-width: 100%;
	min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
	width: auto;
	top: 50%;
	padding-bottom: 1px; /* Prevent header from extending beyond the footer */
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

  
/* For browsers that support 'object-fit' */
@supports ( object-fit: cover ) {
	.custom-header-media img  {
		height: 100%;
		left: 0;
		-o-object-fit: cover;
		object-fit: cover;
		top: 0;
		-ms-transform: none;
		-moz-transform: none;
		-webkit-transform: none;
		transform: none;
		width: 100%;
	}
}
 

@media screen and (min-width: 48em) {
	.custom-header {
		display: block;
	}
	.custom-header-media {
		height: 1200px; /* 0?! 165px?!*/
		height: 100vh;
		max-height: 100%;
		overflow: hidden;
		position: relative;
	}

	.custom-header-media:before {
		height: 33%;
	}
}
	
.navbar {
	background-color: rgb(53, 71, 88) !important;
	/*font-family: "Nixie One", serif;*/
	
	}
.navbar-brand, .navbar {color: rgba(255, 255, 255, 0.55);}
.navbar-brand {font-size: 1.25em;}
.navbar-brand:hover {color: rgba(255,255,255,0.8);}
body.home .navbar-brand, .active .nav-link {color: white;}
.dropdown-menu li.active a, .dropdown-menu li a:active {background-color: rgba(116, 155, 191, 0.8);}
.navbar .navbar-nav {flex-flow: row wrap;}
 
.row {width:100%; margin:0;} 
#primary {padding:0;}
 
 .im {background-color: rgba(255,255,255,0.5); font-size: 1.25em; margin: 1em 0 2em; padding: .5em 1.5em 1.5em;}
 
#page-wrapper {background-color: rgba(153, 178, 213, 0.9); display:flex;}

#page.site {
	min-height: 100%;
  display: flex;
  flex-direction: column;
}
#page.site #page-wrapper {
  flex: 1;
}
.site-footer, #hero-text {
  /* min-height: 4rem;  Set the fixed height of the footer here */
  line-height: 1.25; /* Vertically center the text there */
	background-color: rgba(116,155,191, .80); 
  padding: 2em 0;
  margin: 0;
  display:flex;
  flex-flow: column nowrap;
}
#hero-text {/*margin-top: 60vh; height: 40vh;*/ box-sizing: border-box; flex-shrink: 0; text-align: center;
padding: 0;}
#hero-text a {color: inherit; padding: 2em 0;}
#hero-text h1 {font-size: 4vw;}
#hero-text h2 {font-size: 2.5vw;}
#hero-text a {text-decoration: none; color: black; }
/*.site-footer {background-color: rgba(116,155,191, .80);}*/

.introbox {background: rgba(255,255,255,.4); padding: 1em 1.5em; margin: 1em 0;}
.introbox p {text-indent: 0; font-size: 1.1em; }

header a, header a:hover, footer a:hover, footer a:focus, header a:focus, header a:visited {color: inherit;}
a, a:active, a.active, .footer-below a, .footer a {outline: 0; color: #749bbf; text-decoration: none; text-decoration-color: rgba(0,0,0,0); /*police blue? */}
a:hover, a:focus {color: #354758; text-decoration:underline;}

a.sup {font-size: .83em; vertical-align: super; position: relative;}
.wrapper a {color: rgba(255, 255, 255, 0.80);}
.wrapper a:focus, .wrapper a:hover, .wrapper .table a:hover, .wrapper .table a:focus {color:white;}
.wrapper .table a {color: rgba(240,240,240);}
a {word-break: break-word;}

p {margin: .25em 0 .75em;}
p, dl, dt, blockquote { text-indent: .75em;}
ol, ul {padding-left: 2em;}
dd {padding-left: .75em;}
h2+ol, h2+p, h2+dl, h2+ul, h3+ol, h3+p, h3+dl, h3+ul, h4+ol, h4+p, h4+dl, h4+ul, h5+ol, h5+p, h5+dl, h5+ul {margin-top: .5em;}
/*Toplogos extra markup */
.container.top .logos img.inv {filter: invert(1);}
.container.top .logos img {max-width: 120px;}
.container.top .logos img.gent {max-width: 90px;}

/*Footer logos markup */
footer a:hover {opacity: .5;}
footer .footer-above {
    padding-top: 2.5em; 
    padding-bottom: 1em;
    text-align: center;
}

footer.second   {background-color: #354758;}
footer .footer-below {
    padding: .75em 0 .75em;
    color: #eee;
}
footer .footer-above a {color: #eee;}
footer p {text-indent: 0;}
.terug {unicode-bidi:bidi-override; direction: rtl;} /* unscramble email! */

.logos {
	/*background-color: #9B745D;*/
	margin: 1em 0 1em;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	}

.logos > * {

	max-width: 100px;
	margin: 0 2% 1em;
}
.logos :first-child {margin-left: 0;}
.logos :last-child {margin-right: 0;}
.logos a.gent, .top.container .logos img.gent {-webkit-flex-basis: 20%; -ms-flex-preferred-size: 20%; flex-basis: 20%;}
.logos a.oak {-webkit-flex-basis: 22%; -ms-flex-preferred-size: 22%; flex-basis: 22%;}
.logos img {
	width: 100%; height: auto;
	display: block;
	border: solid 1px transparent;
	/*margin:.25em; height:50px;*/}

footer a:hover img, .logos a:hover img {-webkit-filter: brightness(.2) blur(2px);
  	filter: brightness(0.2) blur(2px);}

/*--------------------------------------------------------------
## MAPSTYLES  
--------------------------------------------------------------*/
/*
.leaflet-container {
	border: 1px solid #ccc;
}

.leaflet-container.right {
	max-width: 70%;
	float: right;
	margin-left: 0;
	margin-right:0;
}
.leaflet-container.left{
	max-width: 70%;
	float: left;
	margin-left: 0;
	margin-right:0;
}
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
    }
*/
.leaflet-container {
	overflow: hidden;
	max-width: 100%; 
	height: 500px;
	max-height: 90vh;
	width: 100%;
	margin-left: auto; margin-right: auto;}

.leaflet-container a {color: rgb(166,195,166) !important;}
.leaflet-container a:hover {color: #666 !important; text-decoration: none !important;}

.leaflet-top {margin-top: 10px;}
.leaflet-right {margin-right: 10px;}
.leaflet-bottom { height: 5.5em; margin-right: 10px;}

.leaflet-container h3 {display: inline-block;}
.leaflet-container h5 {margin: 0;}

.leaflet-top .leaflet-control {margin-top: 0;}
/*#progress {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 400px;
    top: 300px;
    width: 200px;
    height: 20px;
    margin-top: -20px;
    margin-left: -100px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 2px;
}

#progress-bar {
    width: 0;
    height: 100%;
    background-color: #76A6FC;
    border-radius: 4px;
}*/

/*.legend { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8);	-webkit-border-radius: 4px; border-radius: 4px; border: 2px solid black; border-color: rgba(0,0,0,0.2);}
.legend img.icon {width:16px; vertical-align: middle;}
*/
 
img.partial { filter: brightness(1.3) hue-rotate(205deg);}

blockquote {font-size: 1.15em; line-height: 1.35; margin: .5em 3.0em .5em 1.75em; padding-bottom: .25em; padding-left: 1em; border-left: 1em solid rgba(116,155,191, .90); position:relative; text-align: justify;}
blockquote p {display: inline;}
blockquote:before {content: "\201C"; font-family: "Arial", serif; color: #354758; font-size: 4em; line-height: .8; position: absolute; top: -0.035em; left: -.4em; }
blockquote:after {content: "\201D"; font-family: "Arial", serif; color: #354758; font-size: 4em; line-height: 0; position: absolute; bottom: -0.035em; right: -.5em; }

td.filterDiv blockquote {font-size: 1em; line-height: inherit; margin: .5em 2em; padding:0; border-left: 0; position: inherit; text-indent: 0; text-align: justify;}
td.filterDiv blockquote:after, td.filterDiv blockquote:before {
	content: ""; color: inherit; font-size: inherit; line-height: inherit; position: inherit; left: auto; right: auto; top:auto; bottom: auto;}
td.filterDiv {position: relative;}
td.filterDiv a.link {position: absolute; left: 0; right:0; top:0; bottom:0;}

tr.country-reminder td {padding: 0;}

.centered {margin-left: auto; margin-right: auto;}
figure.centered {text-align: center;}
table.numbers td:not(:first-child), table.numbers th:not(:first-child) {text-align: right;}

table.table {margin: 1em auto; width: 90%;}
.archive table.table {margin: 1em 0; width: 100%;}
tbody {width: 100%;}
tr {width: 100% !important;}
table.tabularGroup.twocolumn td:last-child { width: 10%; min-width:8em;}
.tabularGroup.sticky-top h2 {margin: 0;}
table.table.tabularGroup.sticky-top tr {background-color: #B7C5DD;}

table.tabularGroup td.traffic {height: 4.25em; max-width: 20%; vertical-align: middle; text-align: center;}
table.tabularGroup td.traffic {min-height: 4.25em;}
table.tabularGroup tbody.traffic td[value*="good"] {background-color: #70ad47;}
table.tabularGroup tbody.traffic td[value*="partial"] {background-color: #ffc000;}
table.tabularGroup tbody.traffic td[value*="limited"] {background-color: red;}
table.tabularGroup tbody.traffic td[value*="not"] {background-color: black; color: white;}
table.tabularGroup tbody.traffic td[value*="unknown"] {background-color: grey;}
table.tabularGroup tbody.traffic td[value*="na"] {background-color: white;}
table.tabularGroup td.traffic[value*="good"] {background-color: #70ad47;}
table.tabularGroup td.traffic[value*="partial"] {background-color: #ffc000;}
table.tabularGroup td.traffic[value*="limited"] {background-color: red;}
table.tabularGroup td.traffic[value*="not"] {background-color: black; color: white;}
table.tabularGroup td.traffic[value*="unknown"] {background-color: grey;}
table.tabularGroup td.traffic[value*="na"] {background-color: white;}


audio {border-radius:3px;}
.container {
  flex-flow: row wrap;
  width: 100%;
 box-sizing:border-box;
}

.sticky-back-to-top {position: fixed; right: 0; bottom: 0; z-index:1010; padding: .25em; background-color: rgba(116, 155, 191, 0.6);}
.sticky-back-to-top .dashicons {bottom: -1em;}

.dashicons {font-size: 0.9em;}
			
.mbox {background-color: inherit; padding: 2em 2em; position: relative;}
.mbox:before, .mbox:after {content:open-quote; font-size: 250%; position: absolute;}
.mbox:before {top: .2em;}
.mbox:after {content:close-quote; right: .8em; bottom: -.1em; }

.flr {float:right; margin: 0em 0 1em 1em; position:relative;}
.fll {float:left; margin: .5em 1em 1em 0; position:relative;}
.fll {
	-webkit-transform: scale(.9);
		-ms-transform: scale(.9);
			transform: scale(.9); 
	-webkit-transition: all .3sec; 
		 -o-transition: all .3sec; 
			transition: all .3sec;
}
.fll:hover {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

table {border-collapse: collapse;}
table.key {float:right; margin-bottom: .5em;}

caption {text-align: center; font-size: 1.2em; margin-bottom: .5em;}
table.key caption {font-size: 1em; } 

.img-label{
	padding: .375em 0px;
	right: 0;
	bottom: .375em;
	font-size: 90%;
	position: absolute;
	width: 100%; 
	z-index: 10;
	color:black;
	background-color: rgba(255,255,255,.8);
	overflow: visible;
	text-align: center;
}
a:hover .img-label {color: rgba(128,128,128,.8);}
.download {width: 100%; display:flex; flex-flow: row wrap; justify-content: space-evenly; margin-bottom: 1em; gap: 1em; }
.download a {text-indent: 0; flex: 0 1 auto; position: relative;}
.download a:hover img { 
	-webkit-filter: brightness(1.5) blur(1px);
  	filter: brightness(1.5) blur(1px);}
 
/* ** mugshots/teamgallery markup** */

ul.gallery {
display: -webkit-box;
    		display: -webkit-flex;
    		display: -ms-flexbox;
    		display: flex; 
		-webkit-box-orient: horizontal; 
		-webkit-box-direction: normal; 
		-webkit-flex-flow: row wrap; 
		    -ms-flex-flow: row wrap; 
		        flex-flow: row wrap; 
		-webkit-box-pack: justify; 
		-webkit-justify-content: space-between; 
		    -ms-flex-pack: justify; 
		        justify-content: space-between; 
		padding-left: 0;
		gap: 4em 2.5em;
	margin-top: 2.5em;
		}
		
ul.gallery li {
	    -webkit-box-flex: 1;
    -webkit-flex: 1 .5 18em;
        -ms-flex: 1 .5 18em;
            flex: 1 .5 18em;
	min-height: 15em;
	position: relative; 
	padding: 1em 1em 1em;
	z-index: 1;
	display: inline-block;
	background-color: #fafafd;
	background-color: rgba(255,255,255,.5);
  }

ul.gallery li.dummy {min-height: 0; max-height: 0; padding: 0; background: rgba(0,0,0,0); box-shadow: none; }

ul.gallery li:after {
  content: "";
  clear: both;
  display: table;
}

ul.gallery .name {font-size: 1.25em;}

ul.gallery .about {padding-top: .5em;}

img.mugshot {
		-webkit-box-sizing: content-box;
				box-sizing: content-box;
		float: left; 
		margin: 0em .8em .8em 0;
		width: 20%; 
		max-width: 180px; 
		min-width: 120px;
		outline: 1px solid rgba(175,175,195,.9);
		background-color: rgba(175,175,195,.5);
		}
.gallery .name a:after{content:"\f504"; font-family: 'Dashicons'; padding-left: .25em; font-size: .8em;}
/* PUBLICATIONS page */
.page-id-294 .h4 {font-weight: normal;}

/* The "show" class is added to the filtered elements */
.table > :not(caption) .sub-question{ display: list-item; list-style-type: square; list-style-position: inside; padding-left: 1em;}
.countriesHead {display: none;}
.countriesHead.show {display: table-row;}
.countriesHead h2 {margin:0;}
.container .show.filterDiv {display: block;}
.table .show.filterDiv {display: table-cell;}
.container .section {display: none;}
.container .show.section {display: flex;}
.container .table.show.section {display: table;}
.table tbody.show.section {display: table-row-group;}
.table tr.show.section {display: table-row;}
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: .5em .75em;
  background-color: #f1f1f1;
  cursor: pointer;
  border-radius:5px;
}
/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Comparison page: countriesList and sectionsList main instances of next! */

div.buttonsblock {flex-flow: row wrap;}
div.buttonsblock > div {margin: 1em 0; display: flex; flex-flow: row wrap; justify-content: center;}
div.buttonsblock button {margin-right: 2px; margin-bottom:2px;}
div.buttonsblock button:last-child {margin-right: 0;}

/* Add a dark background [Navbar] to the active button */
#sectionsList .btn.active {
  background-color: rgb(53, 71, 88);
  color: white;
}
#countriesList .btn.active.rank1, .rank1, .table > :not(caption) > * > td.rank1 {background-color: rgba(253,151,198,.6);}
#countriesList .btn.active.rank2, .rank2, .table > :not(caption) > * > td.rank2 {background-color: rgba(251,247,192,.6);}
#countriesList .btn.active.rank3, .rank3, .table > :not(caption) > * > td.rank3 {background-color: rgba(209,245,223,.6);}
#countriesList .btn.active.rank4, .rank4, .table > :not(caption) > * > td.rank4 {background-color: rgba(171,222,248,.6);}
#countriesList .btn.active.rank5, .rank5, .table > :not(caption) > * > td.rank5 {background-color: rgba(228,191,247,.6);}
.table.table-mystripes > * > *:nth-child(even)  {background-color: rgba(53, 71, 88,.25); border:0;}
.table.table-mystripes > * > *:nth-child(odd)  {background-color: rgba(255, 255,255,.25); border:0;}
.table.table-mystripes > :not(caption) > * > * { border:0;}
.table.table-mystripes > * > .countriesHead.sticky-top {background-color: rgba(159, 178, 209, .9);}

.filterDiv {
  margin: 2px;
  display: none; /* Hidden by default */
  flex-grow: 4;
  padding: .25em 1em;
}

.container {margin: 0 auto; padding: 0; position: relative; }

@media screen and (max-width: 575px) {
	.container, footer .footer-below {padding: 0 2%;} 
	.wideboy {display: none;}
	ul.navbar-nav {display: block;}
	ul.navbar-nav li {display: block;}
	ul.navbar-nav li ul.dropdown-menu {padding:0; background-color: rgba(255,255,255,.5); border-radius:0;}
	}
@media (min-width: 601px) {.container {width: 580px;}	}
@media(min-width:768px) {	.container {width: 746px;}}
@media (min-width: 892px) {.container {width: 870px;}}
@media (min-width: 942px) {.container {width: 920px;}}
@media (min-width: 992px) {.container {width: 970px;}}
@media (min-width: 1042px) {.container {width: 1020px;}}
@media (min-width: 1092px) {.container {width: 1070px;}}
@media (min-width: 1142px) {.container {width: 1120px;}}
@media (min-width: 1192px) {.container {width: 1170px;}}