/*
Theme Name: Jægermark Theme
Theme URI: 
Version: 1
Author: Jan Jægermark
Author URI: https://jaegermark.dk
Description: 
Tags: 
Text Domain:
*/



/* 
####################
NOTES

MAIN COLORS:
ORANGE: #ff9933
VIOLET: #9933ff
LIGHT BLUE: #33ffff

FLYTTET FRA BODY
line-height:1.5; overflow-wrap: break-word;

FONTS
font-family: 'Inter', sans-serif
####################
*/



/* 
####################
####################
####################
MOBILE FIRST
SCREEN WIDTH 0-800
####################
####################
####################
*/



/* BASICS MOBILE */

* {margin:0; padding:0;}
body {font-size:100%; font-family:'Inter', sans-serif, times new roman; text-align:left; color:#000; width:100%; padding:0%; margin:0; background-color:#f8f8f8;}
#body-simple {font-size:120%; font-family:georgia, times new roman !important; background-color:#fff !important;}

html {scroll-behavior:smooth; line-height: 1.5;}



/* SPEC MODIFIERS MOBILE */

.text-align-center {text-align:center !important;}
.text-align-left {text-align:left !important;}

#hide-content {display:none !important;}

.font-size-times-two {font-size:200%;}

.no-effect-on-underline {text-decoration:none !important; color:#000 !important;}
.no-underline {text-decoration:none !important;}

.center {width:100% margin:0 auto;}

#click-button {display:inline-block; border:1px solid #ccc; border-radius:20px; padding:5px 15px; background-color:#fff; color:#000; font-size:75%; text-decoration:none !important; transition:0.5s; box-shadow:0 1px 2px #ccc;}
#click-button:hover {background-color:#f8f8f8; color:#000 !important;}
#click-button-grey {border:1px solid #ccc; border-radius:20px; padding:5px 15px; background-color:#f8f8f8; color:#000; font-size:80%; text-decoration:none !important;}
#click-button-grey:hover {background-color:#fff; color:#000 !important;}

#click-button-author {display:inline-block; border:1px solid #ccc; border-radius:20px; padding:5px 15px; background-color:#f8f8f8; color:#000; font-size:75%; text-decoration:none !important; transition:0.5s; box-shadow:0 1px 2px #ccc; margin-bottom:30px;}
#click-button-author:hover {background-color:#fff; color:#000 !important;}

#click-button-more {display:inline-block; border:1px solid #ccc; border-radius:20px; padding:5px 15px; margin-top:0px !important; margin-bottom:10px !important; background-color:#fff; color:#000; font-size:80%; text-decoration:none !important; transition:0.5s; box-shadow:0 1px 2px #ccc;}
#click-button-more:hover {background-color:#f8f8f8; color:#000 !important;}

#click-button-to-top {display:inline-block; border:1px solid #ccc; border-radius:20px; padding:5px 15px; margin-top:0px !important; margin-bottom:0px !important; background-color:#fff; color:#000; font-size:80%; text-decoration:none !important; transition:0.5s; box-shadow:0 1px 2px #ccc;}
#click-button-to-top:hover {background-color:#f8f8f8; color:#000 !important;}

#cool-cats {display:inline-block; margin-bottom:10px !important;}
#cool-cats a {display:inline-block; color:#333 !important; border:1px solid #ccc; border-radius:2px; padding:2px 7px; margin-bottom:7px !important; background-color:#fcfcfc; color:#000; font-size:70%; text-decoration:none !important; transition:0.5s;}
#cool-cats a:hover {color:#000 !important; background-color:#f8f8f8 !important; box-shadow:0 1px 5px #ccc;}

#credit {display:inline-block; padding:1%; border:1px solid #ccc; border-radius:5px; background-color:#f8f8f8; text-align:center !important; font-size:50%; margin-bottom:30px;}


/* ACCORDIAN MOBILE */

#clickburgermenu {display:inline;}
#showburgermenu {display:none;}

#clicktoc {display:inline;}
#showtoc {display:none;}

.clickgridmenu {display:inline;}
.showgridmenu {display:none;}

#clickpostinfo {display:inline;}
#showpostinfo {display:none; float:left; width:96%; padding:2%; margin-top:-20px !important;}

#clickauthorinfo {display:inline;}
#showauthorinfo {display:none; float:left; width:100%;}

.click {display:inline;}
.show {display:none;}




/* POPUP BY CHATGPT | MOBILE */

.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  overflow: auto;
}

.popup-content {
  background-color: #fefefe;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}






/* CONTENT FONT TYPE | MOBILE */

#content-full-width h1 {margin:40px 20px 20px 20px;}
#content-full-width h2 {margin:30px 20px 20px 20px;}
#content-full-width h3 {margin:30px 20px 20px 20px;}
#content-full-width p#subheader {margin:-20px 20px 20px 20px !important;}
#content-full-width h4 {margin:30px 20px 20px 20px;}
#content-full-width p {margin:20px;}
#content-full-width ul {margin:20px;}
#content-full-width ol {margin:20px;}
#content-full-width li {margin:20px 20px 20px 30px;}
#content-full-width blockquote {}
#content-full-width small {}

#content-fixed-width h1 {margin:40px 20px 20px 20px;}
#content-fixed-width h2 {margin:30px 20px 20px 20px;}
#content-fixed-width h3 {margin:30px 20px 20px 20px;}
#content-fixed-width p#subheader {margin:-20px 20px 20px 20px !important;}
#content-fixed-width h4 {margin:30px 20px 20px 20px;}
#content-fixed-width p {margin:20px;}
#content-fixed-width ul {margin:20px;}
#content-fixed-width ol {margin:20px;}
#content-fixed-width li {margin:20px 20px 20px 30px;}
#content-fixed-width blockquote {}
#content-fixed-width small {}



/* TEXT SIZE & WEIGHT & ALIGNMENT | MOBILE */

h1 {font-size:180%; font-weight:bold; text-align:center;}
h2 {font-size:140%; font-weight:bold; text-align:center;}
h3 {font-size:120%; font-weight:bold; text-align:center;}
h3#subheader {font-size:120%; font-weight:normal; text-align:center;}
p#subheader {font-size:120%; font-weight:normal; text-align:center;}
h4 {font-size:100%; font-weight:bold; text-align:center;}
p {font-size:100%; font-weight:normal;}
ul {font-size:100%; font-weight:normal;}
blockquote {font-size:100%; font-weight:normal;}
small {font-size:80%; font-weight:normal;}



/* LINKS | MOBILE */

#content-fixed-width a {text-decoration:underline; color:000;}
#content-fixed-width a:hover {text-decoration:none; color:#666;}
#content-full-width a {text-decoration:underline; color:000;}
#content-full-width a:hover {text-decoration:none; color:#666;}
a {text-decoration:none; color:000;}
a:hover {text-decoration:none; color:#666;}
h1 a {text-decoration:none; color:#000;}
h1 a:hover {text-decoration:none; color:#666;}

a.big-box-link-white {display:block; padding:15px !important; border:1px solid #ccc !important; border-radius:5px; background-color:#fff; margin-left:3%; margin-right:3%; margin-top:0px !important; margin-bottom:20px; text-decoration:none !important; box-shadow: 0px 1px 4px #ccc; font-size:100%; text-align:center; transition:0.5s;}
a:hover.big-box-link-white {border-radius:5px; box-shadow: 0px 4px 16px #ccc !important; color:#000 !important;}

a.cta-forever-green-yellow {display:block; padding:15px !important; border:1px solid #fff !important; border-radius:50px; color:#fff !important; background-color:#66b14f; margin-left:3%; margin-right:3%; margin-top:0px !important; margin-bottom:20px; text-decoration:none !important; box-shadow: 0px 1px 4px #ccc; font-size:100%; text-align:center; transition:0.5s;}
a:hover.cta-forever-green-yellow {border-radius:50px; box-shadow: 0px 4px 16px #ccc !important; color:#fff !important; background-color:#ffc700;}

a.cta-forever-yellow-green {display:block; padding:15px !important; border:1px solid #fff !important; border-radius:50px; color:#fff !important; background-color:#ffc700; margin-left:3%; margin-right:3%; margin-top:0px !important; margin-bottom:20px; text-decoration:none !important; box-shadow: 0px 1px 4px #ccc; font-size:100%; text-align:center; transition:0.5s;}
a:hover.cta-forever-yellow-green {border-radius:50px; box-shadow: 0px 4px 16px #ccc !important; color:#fff !important; background-color:#66b14f;}

a.cta-grey {display:block; padding:15px !important; border:1px solid #fff !important; border-radius:50px; color:#fff !important; background-color:#999; margin-left:3%; margin-right:3%; margin-top:0px !important; margin-bottom:20px; text-decoration:none !important; box-shadow: 0px 1px 4px #ccc; font-size:100%; text-align:center; transition:0.5s;}
a:hover.cta-grey {border-radius:50px; box-shadow: 0px 4px 16px #ccc !important; color:#fff !important; background-color:#666;}

a.big-box-link-white-cta {display:block; padding:15px !important; border:1px solid #ccc !important; border-radius:5px; background-color:#fff; margin-left:2%; margin-right:2%; margin-top:0px !important; margin-bottom:20px; text-decoration:none !important; box-shadow: 0px 2px 8px #ccc; font-size:100%; text-align:center;}
a:hover.big-box-link-white-cta {border-radius:5px; box-shadow: 0px 3px 12px #ccc !important;}
a.medium-box-link-white {display:block; padding:15px !important; border:1px solid #ccc !important; border-radius:5px; background-color:#fff; margin-left:2%; margin-right:2%; margin-top:0px !important; margin-bottom:20px; text-decoration:none !important; box-shadow: 0px 2px 8px #ccc; font-size:100%; text-align:center;}
a:hover.medium-box-link-white {border-radius:5px; box-shadow: 0px 3px 12px #ccc !important;}
a.read-more-link-button {float:left; width:auto; padding:5px 10px; border:1px solid #ccc; background-color:#fff; border-radius:25px; font-size:60%; text-decoration:none !important;}
a:hover.read-more-link-button {color:#000; background-color:#f8f8f8; text-decoration:none !important;}



/* SITE CONTAINERS | MOBILE */

#header {float:left; width:100%;}

#bg-grey {float:left; width:100%; background-color:#f8f8f8;}
#bg-grey-two {float:left; width:100%; background-color:#eee;}
#bg-white {float:left; width:100%; background-color:#fff;}

#center-fixed-width {width:100%; margin:0 auto;}
#center-full-width {width:100%; margin:0 auto;}

#main-fixed-width {float:left; width:100%;}
#main-full-width {float:left; width:100%;}

#content-fixed-width {float:left; width:100%; padding:0 0 30px 0;}
#content-full-width {float:left; width:100%; padding:0 0 30px 0;}

#footer {float:left; width:92%; padding:30px 4% 30px 4%; border-top:1px solid #ccc; background-color:#f8f8f8;}
#footer a {color:#666;}
#footer a:hover {color:#666; text-decoration:underline;}
#footer p {font-size:70%; text-align:center; color:#666;}



/* CONTENT STUFF MOBILE */

#author-box {display:none;}
#cat {float:left; width:100%; font-size:60%;}
#cat a {text-align:left; padding:0.5%; margin:0% 0% 1% 0%; border:1px solid #ccc; border-radius:3px; background-color:#fcfcfc;}



/* TOP MOBILE */

#top {float:left; width:100%; height:auto; background-color:#fff; border-bottom:1px solid #ccc;}
#top p {color:#000; text-align:center !important; padding:17.5px; font-family: 'Pacifico', cursive; font-size:25px;}
#top a {color:#000; text-decoration:none;}
#top a:hover {color:#000;}

p#top-nav-font {color:#000; text-align:center !important; padding:17.5px; font-family:'Inter', sans-serif !important; font-size:8px;}
a#click-button-top-nav {display:inline-block; border:1px solid #ccc; border-radius:1px; padding:2px 6px; margin:1px !important; background-color:#f8f8f8; color:#000; text-decoration:none !important; transition:0.5s;}
a:hover#click-button-top-nav {background-color:#fff; box-shadow:0 2px 8px #ccc;}

p#top-nav-cal-font {color:#000; text-align:center !important; padding:10px; font-family: monospace, georgia !important; font-size:10px; text-transform:uppercase;}
a#top-nav-cal-link {display:inline-block; border:1px solid #ccc; border-radius:3px; padding:2px 6px; margin:4px 1px !important; background-color:#fff; color:#000; text-decoration:none !important; transition:0.5s;}
a:hover#top-nav-cal-link {background-color:#fff; box-shadow:0 2px 8px #ccc;}


/* NAV MOBILE */

#nav {float:left; width:100%; height:auto; border-bottom:1px solid #ccc;}

#nav-left {width:20%; display:inline-block; float:left;}
#nav img#logo {float:left; width:auto; height:50px; margin:10px 0px 10px 10px;}
#nav img#logo:hover {}

#nav-right {width:20%; display:inline-block; float:right;}
#nav img#menu {float:right; width:50px; height:50px; margin:10px 10px 10px 0px; outline:1px solid #ccc; outline-offset:-1px;}
#nav img#menu:hover {}
#burgermenu {float:right;}

#sub-nav {float:left; width:100%;}
#sub-nav li {font-size:100%; list-style:none; display:block; width:100%; margin-left:0 !important;}
#sub-nav a {float:left; width:95%; padding:2% 2% 2% 3%; color:#000; background-color:#fff; border-bottom:1px solid #eee;}
#sub-nav a.sub-nav-indent {float:left; width:93%; padding:2% 2% 2% 5%;}
#sub-nav a:hover {background-color:#f8f8f8;}
.sub-nav-first-link {border-top:0px solid #ddd;}
.sub-nav-last-link {border-bottom:1px solid #ccc !important;}




/* HTML TABLE MOBILE */

table {float:left; width:100%; background-color:#fff; font-size:90%; text-align:left;}

table a {color:#000;}
table a:hover {color:#000; text-decoration:underline;}

th {text-align:left; padding:10px; background:#fff; font-weight:normal;}
tr {}
td {text-align:left; padding:10px; border-bottom:1px solid #fff; border-bottom:1px solid #f8f8f8;}

td strong {font-weight:bold;}
th strong {font-weight:bold;}




/*

TABLE ALTERNATE BG COLOR / STRIBER

tr:nth-child(even) {background:#f8f8f8;}
tr:nth-child(odd) {background:#fff;}

*/



blockquote {float:left; width:82%; padding:3% 4% 4% 4%; margin:0 5% 30px 5%; border:1px solid #ccc; background-color:#f8f8f8;} 
.wp-block-code {float:left; width:92%; padding:4% 4% 4% 4%; margin:0 0 30px 0; background-color:#f8f8f8;} 



/* BOX-WRAPPER MOBILE */

#box-wrapper-white, #box-wrapper-grey, #box-wrapper-cta, #box-wrapper-map, #white-box, #grey-box, #cta-box {}
#comments-container {float:left; width:92%; padding:0% 4% 8% 4%; margin:0px 0 0px 0%; background-color:#f8f8f8; border-top:1px solid #ccc;}



/* POST OVERVIEW CONTAINER MOBILE */

#post-overview-container {float:left; width:92%; padding:0% 4% 10px 4%; margin:0px 0%; background-color:#fff; border-top:1px solid #ccc;}
#post-overview-container h3  {text-align:center;}
#post-overview-container a  {text-decoration:none;}
#post-overview-container p  {margin-top:-10px !important; font-size:100%;}
p.blog-post-info {font-size:70% !important; color:#000 !important;}
p.blog-post-info a {color:#000 !important;}
#post-overview-container-last {float:left; width:92%; padding:0% 4% 10px 4%; margin:0px 0% 0px 0%; background-color:#fff; border-top:1px solid #ccc;}



/* TOC MOBILE */

#toc {width:100%; margin:0 auto;}
#ez-toc-container {float:left; width:92%; padding:2% 4% 4% 4%; margin:0px 0 30px 0%; background-color:#f8f8f8; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.ez-toc-title {font-size:100% !important; margin-top:10px !important; margin-bottom:0px !important;}
ul.ez-toc-list {list-style:none !important;}
.ez-toc-link {font-size:90% !important; text-decoration:none !important; color:#000 !important;}
.ez-toc-link:hover {text-decoration:underline !important; color:#000;}
#toc-button-container {float:left; width:100%; text-align:center; margin-top:0px !important; margin-bottom:30px !important;}
#ez-toc-container li, #ez-toc-container ul {margin:0px 0px 0px 4% !important;}


/* BOX-WRAPPER-POSTS | MOBILE */

#box-wrapper-posts, #post-box {}

#box-wrapper-posts ul li {display:block; padding:10px 10px 10px 15px !important; border-top:1px solid #ddd !important; border-radius:5px; background-color:#fff; margin-top:0px; margin-bottom:15px !important; text-decoration:none !important; box-shadow: 0 1px 5px #ccc; list-style:none !important; margin-left:0px !important;}
#box-wrapper-posts ul.children li {display:block; padding:0px !important; border:0px solid #ccc !important; border-radius:5px; background-color:#fff; margin-top:10px; margin-bottom:0px !important; text-decoration:none !important; box-shadow: 0 0px 0px rgba(0, 0, 0, .2); list-style:none !important; margin-left:15px !important;}

#box-wrapper-posts ul li a {display:block;}
#box-wrapper-posts ul li a:hover {display:block; text-decoration:underline; color:#333;}
#box-wrapper-posts ul li:hover {}

#box-wrapper-posts.wp-block-latest-posts {margin-left:0px !important;}
#box-wrapper-posts a {text-decoration:none; border-bottom:0px solid #fff;}
#box-wrapper-posts a:focus {outline:none !important; border:0px solid #fff !important}
#box-wrapper-posts img {border-radius:3px !important;}

.wp-block-latest-posts__post-date {text-transform:capitalize !important;}
.wp-block-latest-posts__post-excerpt {font-size:80% !important; color:#444 !important;}
.wp-block-latest-posts__post-excerpt {margin-bottom:0px !important;}

a.box-wrapper-bottom-link {display:block; text-align:center !important; text-decoration:underline !important; margin-bottom:4% !important; border-bottom:0px solid #fff !important;}

.box-wrapper-desc {text-align:center; margin:-10px 20px 20px 20px !important;}



/* IMAGES MOBILE */


img a {border:0; margin:0; padding:0; text-decoration:none;}
.circular-img {border-radius:50% !important;}
.attachment-post-thumbnail {width:100%; height:auto;}

#full-size-featured-img img {width:100% !important; height:auto !important;}
.material-icons {font-size:80% !important; line-height:1.5 !important;}
.alignright {float:right; max-width:150px !important; height:auto !important;}
.aligncenter {}
.size-large {height:100px !important;}

figcaption {text-align:center; font-size:70%;}

.full-size-img {width:100% !important; height:auto !important;}



/* BREADCRUMBS MOBILE */

#bc {float:left; width:92%; padding:30px 4% 0px 4%; font-size:70% !important; border-top:1px solid #ccc; color:#333 !important; display:block;}
#bc a {text-decoration:none !important; color:#333 !important;}



/* LISTS MOBILE */

ol {}
ol li {}

ul {}
ul li {margin-left:15px !important;}

ol,ul {}

ul#inline-list li {}
ul#inline-list li:hover {}

li.has-child {}

.wp-block-pages-list__item {}



/* GRID MENU | MOBILE */

#grid-menu {float:left; width:94%; text-align:center; padding:0% 3%;}
a.grid-menu-box {display:inline-block; width:auto; color:#000; background-color:#fff; text-align:center; border:1px solid #ccc; border-radius:2px; font-size:75%; text-decoration:none !important; padding:5px 11px; margin:4px 1px; transition:0.5s; box-shadow:0 1px 3px #ccc;}
a.grid-menu-box:hover {color:#000 !important; background-color:#f8f8f8 !important; text-decoration:none !important;}
#grid-menu-button-container {float:left; width:100%; text-align:center; margin-top:30px !important;}
.grid-menu-desc {text-align:center; margin:-10px 20px 20px 20px !important;}


/* (OLD DESIGN) CAT-BOX | MOBILE */

#cat-box {float:left; width:98%; text-align:center; padding:0% 1%; display:none;}
#cat-box-link {display:inline-block; width:auto; color:#000; background-color:#fff; text-align:center; border:1px solid #ccc; border-radius:1px; font-size:80%; text-decoration:none !important; padding:5px 11px; margin:3px 0.5px;}
#cat-box-link:hover {color:#000 !important; background-color:#f8f8f8 !important; text-decoration:none !important;}



/* GRID MOBILE */

#grid {float:left; width:99%; margin:0.5%;}
a.grid-box {float:left;	max-width:30.2%; min-width:30.1%; margin:0.5%; padding:2% 1%; font-size:100%; color:#000; background-color:#fff; box-shadow:0 1px 3px #ccc; text-align:center; outline:1px solid #ccc; outline-offset:-1px; white-space:nowrap; overflow: hidden; text-decoration:none !important; transition:0.5s;}
a:hover.grid-box {color:#000 !important; background-color:#fcfcfc; overflow:visible; text-decoration:none !important; box-shadow:0 1px 12px #ccc;}
p.grid-desc {text-align:center; margin:-10px 20px 20px 20px !important;}
img.grid-box-img {width:32px; height:32px; margin-bottom:0px;}
p.grid-box-title {font-size:75%; padding:0.5% !important; margin:0 !important;}
p.grid-box-disclaimer-text {font-size:50%; padding:0 !important; margin:0 !important;}
.grid-box-disclaimer {color:#999; padding:0 !important; margin:0 !important;}
p.grid-box-text {font-size:55%; padding:0 !important; margin:0 !important;}



p.go-to-top-menu {float:left; display:block; text-align:center; margin:0 !important; width:100%; padding-top:30px; padding-bottom:30px;}
a.go-to-top-menu-link {font-family: 'Pacifico', cursive; display:inline-block; padding:15px 20px; border:1px solid #ccc; border-radius:25px; box-shadow:0 3px 6px #ccc; background-color:#fff; text-align:center; text-decoration:none !important;}
a:hover.go-to-top-menu-link {color:#000 !important; background-color:#fff !important; text-align:center; text-decoration:none !important; box-shadow:0 3px 12px #ccc;}



/* PIC GRID MOBILE */

#pic-grid {float:left; width:98%; padding:1%; background-color:#f8f8f8; border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin-top:10px; margin-bottom:30px;}
.pic-grid-box {float:left;	max-width:31.3%; min-width:31.3%; margin:1%; padding:0% 0%; background-color:#fff; box-shadow:0 1px 3px #ccc; outline:1px solid #ccc; outline-offset:-1px; transition:0.3s; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%);}
.pic-grid-box:hover {box-shadow:0 1px 12px #ccc;-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%);}



/* CAL GRID MOBILE */

#cal-grid {float:left; width:98%; padding:1%; background-color:#f8f8f8; border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin-top:10px; margin-bottom:30px;}
.cal-grid-box {float:left;	max-width:30.3%; min-width:30.3%; margin:0.5%; padding:1% 1%; text-align:center; background-color:#fff; box-shadow:0 1px 3px #ccc; outline:1px solid #ccc; outline-offset:-1px; transition:0.3s; text-decoration:none !important; font-size:70%;}
.cal-grid-box:hover {box-shadow:0 1px 12px #ccc; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); color:#000 !important;}

.grid-box-two {float:left;	max-width:47%; min-width:47%; margin:0.5%; padding:1% 1%; text-align:left; background-color:#fff; box-shadow:0 1px 3px #ccc; outline:1px solid #ccc; outline-offset:-1px; transition:0.3s; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); text-decoration:none !important; font-size:70%;}
.grid-box-two:hover {box-shadow:0 1px 12px #ccc; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); color:#000 !important;}

.grid-box-one {float:left; max-width:97%; min-width:97%; margin:0.5%; padding:1% 1%; text-align:center; background-color:#fff; box-shadow:0 1px 3px #ccc; outline:1px solid #ccc; outline-offset:-1px; transition:0.3s; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); text-decoration:none !important; font-size:70%;}
.grid-box-one:hover {box-shadow:0 1px 12px #ccc; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); color:#000 !important;}

.grid-box-one-two {float:left; max-width:97%; min-width:97%; margin:0.5%; padding:1% 1%; text-align:left; background-color:#fff; box-shadow:0 1px 3px #ccc; outline:1px solid #ccc; outline-offset:-1px; transition:0.3s; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); text-decoration:none !important; font-size:70%;}
.grid-box-one:hover {box-shadow:0 1px 12px #ccc; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); color:#000 !important;}





/* COMMENTS MOBILE */ 

#comment, #author, #email, #url {padding:2%; width:100%; font-size:80%; font-family: 'Inter', sans-serif;}
li.comment {list-style:none; width:96%; padding:2%; margin:2%; background-color:#fff; outline:1px solid #ccc; outline-offset:-1px; font-size:95%; box-shadow:0 1px 2px #ccc; margin-left:0 !important;}
.commentmetadata a {text-decoration:none !important;}
.navigation {float:left; display:block; width:100%; margin-top:30px !important;}
h3#reply-title {float:left; display:block; width:100%; margin-top:0px !important;}
input[type=submit] {font-size:100%; padding:10px 15px; border:1px solid #ccc; background-color:#fff; border-radius:15px; box-shadow:0 1px 2px #ccc;}
input[type=submit]:hover {background-color:#fff; border:1px solid #ccc; transform: scale(1.1); box-shadow:0 4px 16px #ccc;}
input[type=text] {font-size:100% !important; padding:20px;}
#cancel-comment-reply-link {margin-left:20px;}




/* 
####################
####################
####################
TABLET
SCREEN WIDTH 800-1280
####################
####################
####################
*/



@media screen and (min-width: 800px) {



/* BASICS TABLET */

body {font-size:130%;}



#click-button-more {display:inline-block; border:1px solid #ccc; border-radius:20px; padding:5px 15px; margin-top:10px !important; margin-bottom:0px !important;}



#center-full-width {width:100%; margin:0 auto;}
#main-full-width {float:left; width:100%;}

#center-fixed-width {width:800px; margin:0 auto;}
#main-fixed-width {float:left; width:800px;}

#content-fixed-width {width:800px;}



/* TEXT SIZE & WEIGHT & ALIGNMENT | TABLET */

h1 {font-size:220%; font-weight:bold; text-align:center;}



/* TOP TABLET */

#top p {}



/* IMAGES TABLET */

.attachment-post-thumbnail {width:800px; height:auto; margin-top:60px;}



/* BOX-WRAPPER TABLET */

#box-wrapper-white, #white-box  {float:left; width:90%; padding:4% 4% 4% 4%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-top:0px; border-radius:5px; font-size:100%; box-shadow:0 2px 4px #ccc; background-color:#fff;} 

#box-wrapper-grey, #grey-box {float:left; width:90%; padding:4% 4% 4% 4%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-top:0px; border-radius:5px; font-size:100%; box-shadow:0 2px 4px #ccc; background-color:#f8f8f8;} 

#box-wrapper-map, #map-box {float:left; width:90%; padding:4% 4% 4% 4%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-top:0px; border-radius:5px; font-size:100%; box-shadow:0 2px 4px #ccc; background-color:#f2f1f0;} 

#comments-container {float:left; width:90%; padding:3% 4% 4% 4%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-radius:5px; border-top:0px; font-size:100%; box-shadow:0 2px 4px #ccc;}
#box-wrapper-cta, #cta-box {float:left; width:90%; padding:3% 4% 4% 4%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-top:0px; border-radius:5px; font-size:100%; box-shadow:0 2px 4px #ccc;}

#post-overview-container {float:left; width:94%; padding:1% 2% 2% 2%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-radius:5px; border-top:0px; font-size:100%; box-shadow:0 2px 4px #ccc;}
#post-overview-container h3  {text-align:left;}



/* TOC TABLET */

#ez-toc-container {float:left !important; width:90% !important; padding:3% 4% 4% 4% !important; margin:10px 1% 40px 1% !important; border:1px solid #ccc !important; border-radius:5px !important; font-size:100% !important; box-shadow:0 2px 4px #ccc  !important;}
#post-overview-container-last {float:left; width:94%; padding:1% 2% 2% 2%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-radius:5px; border-top:0px; font-size:100%; box-shadow:0 2px 4px #ccc;}


/* BOX-WRAPPER-POSTS TABLET */

#box-wrapper-posts, #post-box {float:left; width:90%; padding:3% 4% 4% 4%; margin:30px 1%; outline:1px solid #ccc; outline-offset:-1px; border-top:0px; border-radius:5px; font-size:100%; box-shadow:0 2px 4px #ccc;}



/* GRID TABLET */

#grid-menu {float:left; width:66%; text-align:center; padding:0% 17%;}
a.grid-menu-box {}
a.grid-box {float:left;	max-width:19%; min-width:20%; margin:0.5%; padding:2% 2%; font-size:100%;}



/* PIC GRID TABLET */

#pic-grid {float:left; width:98%; padding:1%; background-color:#f8f8f8; border-top:0px solid #ccc; border-bottom:0px solid #ccc; margin-top:10px; margin-bottom:30px; outline:1px solid #ccc; outline-offset:-1px;}
.pic-grid-box {float:left;	max-width:31.3%; min-width:31.3%; margin:1%; padding:0% 0%; background-color:#fff; box-shadow:0 1px 3px #ccc; outline:1px solid #ccc; outline-offset:-1px; transition:0.5s;}



/* CAL GRID TABLET */

#cal-grid {float:left; width:98%; padding:1%; background-color:#f8f8f8; border-top:0px solid #ccc; border-bottom:0px solid #ccc; margin-top:10px; margin-bottom:30px; outline:1px solid #ccc; outline-offset:-1px;}
.cal-grid-box {font-size:80%;}

.grid-box-one {float:left; max-width:47%; min-width:47%;}
.grid-box-two {float:left; max-width:47%; min-width:47%; font-size:80%;}
.grid-box-one-two {float:left; max-width:47%; min-width:47%; font-size:80%;}




/* BREADCRUMBS DESKTOP */

#bc {float:left; width:92%; padding:0 4%; margin-top:0 !important; border-top:0px solid #fff;}



}



/* 
####################
####################
####################
DESKTOP
SCREEN WIDTH 1280+
####################
####################
####################
*/



@media screen and (min-width: 1281px) {



/* BASICS DESKTOP */

body {font-size:160%;}



#click-button-more {display:inline-block; border:1px solid #ccc; border-radius:20px; padding:5px 15px; margin-top:10px !important; margin-bottom:0px !important;}



/* MAIN CONTAINERS | DESKTOP */

#center-full-width {width:100%; margin:0 auto;}
#main-full-width {float:left; width:100%;}
#center-fixed-width {width:1024px; margin:0 auto;}
#main-fixed-width {float:left; width:1024px;}
#content-fixed-width {float:left; width:1024px;}
#footer {float:left; width:96%; padding:40px 2%; border-top:1px solid #ccc;}



/* TEXT SIZE & WEIGHT & ALIGNMENT DESKTOP */

h1 {font-size:240%; font-weight:bold; text-align:center;}



/* TOP DESKTOP */

#top p {font-size:40px;}

p#top-nav-font {color:#000; text-align:center !important; padding:17.5px; font-family:'Inter', sans-serif !important; font-size:20px;}

p#top-nav-cal-font {font-size:18px;}



/* NAV DESKTOP */

#nav {float:left; width:100%; height:auto; border-bottom:1px solid #ccc;}
#nav img#logo {float:left; width:auto; height:75px; margin:10px 0px 10px 10px;}
#nav img#menu {float:right; width:75px; height:75px; margin:10px 10px 10px 0px;}

#sub-nav a {float:left; width:98%; padding:1% 1% 1% 1%;}
#sub-nav a.sub-nav-indent {float:left; width:96%; padding:1% 1% 1% 3%;}



/* IMAGES DESKTOP */

.attachment-post-thumbnail {width:1024px; height:auto; margin-top:60px;}



/* GRID DESKTOP */

a.grid-menu-box {}
a.grid-box {float:left;	max-width:15%; min-width:15%; margin:0.5%; padding:2% 2%; font-size:100%;}
img.grid-box-img {width:32px; height:32px;}



/* PIC GRID DESKTOP */

#pic-grid {float:left; width:98%; padding:1%; background-color:#f8f8f8; border-top:0px solid #ccc; border-bottom:0px solid #ccc; margin-top:10px; margin-bottom:30px; outline:1px solid #ccc; outline-offset:-1px;}
.pic-grid-box {float:left;	max-width:14.6%; min-width:14.6%; margin:1%; padding:0% 0%; background-color:#fff; box-shadow:0 1px 3px #ccc; outline:1px solid #ccc; outline-offset:-1px; transition:0.5s;}


/* BREADCRUMBS DESKTOP */

#bc {float:left; width:92%; padding:0 4%; margin-top:0 !important; border-top:0px solid #fff;}




}