/* ----------- reset --------------- */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

pre {
  font-family: monospace, monospace;
  font-size: 1em; }

a {
  background-color: transparent; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

img {
  border-style: none; }

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset {
  padding: 0.35em 0.75em 0.625em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

details {
  display: block; }

summary {
  display: list-item; }

template {
  display: none; }

[hidden] {
  display: none; }

/* ----------- reset --------------- */
:root {
  --heading: 22px;
  --body: 17px;
  --small: 13px;
  --si: 24px;
  --sis: 15px;
  --mi: 4px;
  --ti: 8px;
  --bs: 12px;
  --sm: 16px;
  --st: 24px;
  --md: 32px;
  --lg: 48px;
  --xg: 55px;
  --hg: 64px;
  --tn: 40px;
  --tnfs: 13px;
  --ilp: 5px;
  --ifh: 40px;
  --ifnw: 52px;
  --ifew: 49px;
  --ifpw: 122px;
  --ifsw: 65px;
  --msgpd: 30px;
  --bsep: 300px;
  --cmn: 100px;
  --cmx: 400px;
  --mlw: 390px;
  --mh: 150px;
  --btnw: 100px;
  --btnh: 50px;
  --btnt: 18px;
  --lgw: 140px;
  --lgh: 140px;
  --fsh: 81px;
  --ccw_min: 810px;
  --ccw_max: 992px; }

@media only screen and (max-width: 550px) {
  :root {
    --heading: 22px;
    --body: 17px;
    --small: 11px;
    --si: 24px;
    --sis: 10px;
    --mi: 4px;
    --ti: 8px;
    --bs: 11px;
    --sm: 14px;
    --st: 22px;
    --md: 28px;
    --lg: 40px;
    --xg: 50px;
    --hg: 64px;
    --tn: 50px;
    --tnfs: 10px;
    --ilp: 5px;
    --ifh: 40px;
    --ifnw: 52px;
    --ifew: 49px;
    --ifpw: 122px;
    --ifsw: 65px;
    --msgpd: 30px;
    --bsep: 200px;
    --cmn: 100px;
    --cmx: 320px;
    --mlw: 390px;
    --mh: 150px;
    --btnw: 90px;
    --btnh: 45px;
    --btnt: 16px;
    --lgw: 90px;
    --lgh: 90px;
    --fsh: 79px;
    --ccw_min: 500px;
    --ccw_max: 800px; } }
@media only screen and (max-width: 450px) {
  :root {
    --heading: 18px;
    --body: 15px;
    --small: 9px;
    --si: 20px;
    --sis: 5px;
    --mi: 4px;
    --ti: 6px;
    --bs: 10px;
    --sm: 12px;
    --st: 20px;
    --md: 26px;
    --lg: 36px;
    --xg: 45px;
    --hg: 64px;
    --tn: 50px;
    --tnfs: 12px;
    --ilp: 5px;
    --ifh: 40px;
    --ifnw: 52px;
    --ifew: 47px;
    --ifpw: 107px;
    --ifsw: 57px;
    --msgpd: 30px;
    --bsep: 100px;
    --cmn: 100px;
    --cmx: 204px;
    --mlw: 200px;
    --mh: 150px;
    --btnw: 84px;
    --btnh: 40px;
    --btnt: 16px;
    --lgw: 80px;
    --lgh: 80px;
    --fsh: 60px;
    --ccw_min: 200px;
    --ccw_max: 500px; } }
.hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; }

html * {
  font-family: 'Raleway', sans-serif;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  max-width: 100%; }

p {
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 3 3;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%; }

.body {
  overflow: auto;
               /* this makes the mobile menus respect 
scroll bars in a narrow browser window */
  overflow: initial;
                  /* this makes the mobile menus respect 
scroll bars in a narrow browser window */ }

.grid {
  display: grid;
  height: 100%;
  width: 100%;
  overflow: auto;
  overflow: initial;
  position: absolute;
  grid-template-columns: [full-start] minmax(0em, 1fr) [lpadding] 3% [main-start] minmax(0, 1280px) [rpadding] 3% [main-end] minmax(0em, 1fr) [full-end];
  grid-template-rows: [topnav] var(--tn) [headrows] var(--md) [headrows] var(--md) [headrows] var(--lg) [catsplit] var(--md) [posts] min-content [spc] auto [pagination] var(--hg) [footer] minmax(min-content, var(--lg));
  grid-template-areas: ". . topnav     . ." ". .   .        . ." ". . social     . ." ". .  cats      . ." ". .    .       . ." ". .  posts     . ." ". .   spc      . ." ". . pagination . ." ". .   footer   . ."; }

img {
  width: 100%;
  height: 100%;
  margin-top: calc(var(--bs) + 10px);
  margin-bottom: var(--bs); }

a:link {
  color: #428f8e; }

a:hover {
  color: #0b4668; }

#top {
  background-color: #428f8e;
  grid-column: full;
  grid-row: 1;
  display: grid;
  z-index: 2; }

.tn_list {
  place-self: center;
  justify-self: end;
  grid-area: topnav;
  list-style-type: none;
  z-index: 2; }
  .tn_list li {
    display: inline; }
  .tn_list li:not(:last-child)::after {
    content: " /";
    color: white;
    font-weight: bold;
    font-size: var(--tnfs);
    padding: 0px 5px 0px 5px; }
  .tn_list a {
    color: white;
    font-weight: bold;
    font-size: var(--tnfs);
    letter-spacing: .1em;
    text-decoration: none;
    transition: 0.2s; }
    .tn_list a:hover, .tn_list a:active, .tn_list a:focus {
      color: #acfed3;
      transition: 0.2s; }

#crosscheck {
  display: none; }

#cross_svg {
  display: none; }

#crossbg {
  display: none; }

#burgerlines {
  display: none; }

#burgercheck {
  display: none; }

#burgerbg {
  display: none; }

.logo {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  justify-self: start; }
  .logo img {
    height: var(--lgh);
    width: var(--lgw);
    margin-top: 0px;
                 /*overriding these 2 because globally images 
					have margin top and bottom set */
    margin-bottom: 0px;
                    /*overriding these 2 because globally images 
						have margin top and bottom set */
    color: rgba(0, 0, 0, 0) !important;
    font-size: var(--body);
    text-decoration: none;
    line-height: 150px; }

#cat_title {
  visibility: hidden; }

.categories_t {
  display: inline;
  grid-area: cats;
  list-style-type: none;
  align-self: end;
  justify-self: right;
  margin-bottom: 20px; }
  .categories_t li {
    padding: 5px 0px 0px 15px;
    display: inline;
    list-style-type: none; }
  .categories_t a {
    padding: 5px 0px 0px 15px;
    text-decoration: none;
    letter-spacing: .1em; }

.categories_b {
  display: inline;
  grid-area: cats;
  list-style-type: none;
  align-self: end;
  justify-self: right; }
  .categories_b li {
    padding: 5px 0px 0px 15px;
    display: inline;
    list-style-type: none; }
  .categories_b a {
    padding: 5px 0px 0px 15px;
    text-decoration: none;
    letter-spacing: .1em; }

.cat_link_current {
  padding: 5px 0px 0px 15px;
  color: #0b4668;
  font-size: .9em;
  font-weight: bold; }

.cat_link, .cat_link:visited {
  padding: 5px 0px 0px 15px;
  color: #428f8e;
  font-size: .9em;
  font-weight: bold; }
  .cat_link:hover, .cat_link:visited:hover {
    padding: 5px 0px 0px 15px;
    color: #0b4668;
    font-size: .9em;
    font-weight: bold;
    transition: 0.2s; }

.postlist {
  grid-column: 3;
  grid-row: 6;
  align-self: start;
  list-style-type: none; }
  .postlist li {
    text-align: center;
    grid-area: txt;
    display: grid;
    grid-row-gap: var(--md);
    grid-template-columns: [text_l_padding] minmax(0, var(--md)) [text] minmax(0, 540px) [text_r_padding] minmax(0, var(--md));
    grid-auto-rows: minmax(min-content, auto); }

.centerer {
  text-decoration: none;
  display: grid;
  background-color: #e4e4e4;
  place-items: center;
  grid-template-columns: [txt] minmax(0, 640px) [im] minmax(0, 640px);
  grid-template-rows: [full] minmax(var(--cmn), var(--cmx));
  grid-template-areas: "txt image"; }
  .centerer:nth-of-type(2n) {
    grid-template-areas: "image txt"; }

#postlist_black_overlay {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: 0.1s; }

.centerer:hover #postlist_black_overlay {
  opacity: .05;
  transition: 0.1s; }

.postimage {
  grid-area: image;
  overflow: hidden;
  object-position: center;
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-top: 0px;
                 /*overriding these 2 because globally images 
have margin top and bottom set */
  margin-bottom: 0px;
                    /*overriding these 2 because globally images 
have margin top and bottom set */ }

.post_title {
  grid-column: 2;
  letter-spacing: .05em;
  font-weight: 600;
  font-size: 2em;
  color: #0b4668;
  place-self: center; }

.title_separator {
  grid-column: 2;
  width: var(--xg);
  transition: 0.2s;
  height: 5px;
  background-color: #79bb99;
  place-self: center; }

.centerer:hover .title_separator {
  width: 150px;
  transition: 0.2s;
  height: 5px; }

.post_summary {
  grid-column: 2;
  color: #0b4668;
  font-size: var(--body);
  place-self: center; }

.dateauthortag {
  grid-column: 2;
  font-weight: 600;
  font-size: var(--small);
  color: #0b4668;
  place-self: center; }

.postpadding {
  height: var(--md); }

.blogpostgrid {
  align-self: start;
  grid-column: 3;
  grid-row: 6;
  display: grid;
  background-color: #e4e4e4;
  grid-template-columns: [lpad] minmax(0px, var(--md)) [lpad] minmax(0px, var(--md)) [txt] minmax(600px, auto) [rpad] minmax(0px, var(--md)) [rpad] minmax(0px, var(--md));
  grid-template-rows: [pic] minmax(0px, 600px) [pad] var(--lg) [title] auto [sep] auto [btext] minmax(min-content, 100px) [bcats] auto;
  grid-template-areas: "pic pic pic pic pic" ".  . .           . ." ". . title . ." ".  .    sep      . ." ".  .   btext     . ." ".  .   bcats     . . "; }

.blogtitle {
  grid-area: title;
  align-self: center;
  text-align: center;
  font-weight: 600;
  font-size: calc(var(--heading) + 10px);
  letter-spacing: .05em;
  color: #0b4668;
  margin: -5px 0px -5px 0px; }

.blogsep {
  width: var(--bsep);
  height: 5px;
  background-color: #79bb99;
  grid-area: sep;
  align-self: center;
  justify-self: center;
  margin-top: var(--md);
  margin-bottom: var(--md); }

.blogtext {
  grid-area: btext;
  align-self: start;
  justify-self: center;
  color: #0b4668;
  font-size: var(--body); }
  .blogtext p:nth-child(n+2) img {
    width: auto;
    height: auto;
    max-height: 450px;
    display: block;
    margin: 20px auto 0px auto;
    object-fit: scale-down; }

.blogpostgrid img:first-of-type {
  grid-area: pic;
  align-self: center;
  width: 100%;
  height: 100%;
  margin: 0px 0px 0px 0px;
  object-fit: cover; }

.bottomcats {
  list-style-type: none;
  grid-area: bcats;
  align-self: center;
  justify-self: center;
  font-weight: bold;
  text-align: center;
  font-size: var(--small);
  color: #0b4668;
  margin-top: var(--lg);
  margin-bottom: var(--xg); }

#spacer {
  grid-area: bcats;
  height: var(--lg); }

.pagination {
  grid-area: pagination;
  place-self: center;
  list-style-type: none;
  margin-bottom: var(--md); }
  .pagination li {
    display: inline; }
  .pagination a {
    text-decoration: none;
    padding: 0px 3px 0px 3px;
    font-size: var(--body);
    font-weight: bold;
    color: #428f8e;
    transition: 0.2s; }
    .pagination a:hover {
      color: #0b4668;
      transition: 0.2s; }

li.pagenum {
  padding: 0px 3px 0px 3px;
  font-size: var(--body);
  font-weight: bold;
  color: #428f8e; }
  li.pagenum a {
    color: #428f8e; }

li.pagenum_current a {
  color: #0b4668; }

.footer {
  background-color: #428f8e;
  width: 100%;
  height: var(--lg);
  grid-column: full;
  grid-row: 9; }

#footertext {
  grid-area: footer;
  align-self: center;
  justify-self: start; }
  #footertext p {
    color: white;
    font-size: calc(var(--body) - 4px);
    letter-spacing: 1px;
    font-weight: bold; }
  #footertext a {
    color: white;
    transition: 0.2s; }
    #footertext a:hover, #footertext a:active, #footertext a:focus {
      color: #acfed3;
      transition: 0.2s; }

.social {
  list-style-type: none;
  align-self: center;
  justify-self: end;
  grid-area: footer; }
  .social li {
    display: inline; }
  .social i {
    font-size: var(--si);
    padding: 0px 0px 0px var(--sis);
    color: white;
    transition: 0.2s; }
    .social i:hover, .social i:active, .social i:focus {
      color: #acfed3;
      transition: 0.2s; }

#the_form {
  padding: 0px var(--lg) 0px var(--lg);
  grid-column: 3;
  grid-row: 6;
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: #e4e4e4;
  grid-template-columns: [fields] minmax(0, 640px) [input] minmax(0, 640px);
  grid-gap: var(--st);
  grid-template-rows: [tp] var(--lg) [title] minmax(min-content, max-content) [sep] minmax(min-content, max-content) [msg] minmax(min-content, max-content) [inps] minmax(min-content, max-content) [msg] minmax(min-content, max-content) [cpt] minmax(min-content, max-content) [btn] 100px;
  grid-template-areas: ". ." "title title" "sep sep" "txt txt" "inp_l inp_r" "msg msg" "cpt cpt" "btn ."; }

#contact_title {
  grid-area: title;
  font-weight: 600;
  font-size: var(--heading);
  color: #0b4668;
  place-self: center;
  text-align: center;
  margin-top: -5px;
  margin-bottom: -5px; }

#contact_sep {
  width: 100px;
  height: 5px;
  background-color: #79bb99;
  grid-area: sep;
  align-self: center;
  justify-self: center;
  margin: var(--bs) 0px var(--bs) 0px; }

#hello {
  grid-area: txt;
  justify-self: center;
  text-align: center;
  align-self: center;
  color: #0b4668;
  margin: 0px 0px var(--bs) 0px;
  font-size: var(--body); }

#ty_grid {
  grid-column: 3;
  grid-row: 6;
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: #e4e4e4;
  grid-template-columns: [fields] minmax(0, 640px);
  grid-gap: var(--st);
  grid-template-rows: [tp] var(--md) [title] minmax(min-content, max-content) [sep] minmax(min-content, max-content) [msg] minmax(min-content, max-content) [spc] auto;
  grid-template-areas: ". " "title" "sep" "txt" "spc"; }

#thankyou_title {
  grid-area: title;
  font-weight: 600;
  font-size: var(--heading);
  color: #0b4668;
  place-self: center;
  text-align: center;
  margin-top: -5px;
  margin-bottom: -5px; }

#thankyou_sep {
  width: 100px;
  height: 5px;
  background-color: #79bb99;
  grid-area: sep;
  align-self: center;
  justify-self: center;
  margin: var(--bs) 0px var(--bs) 0px; }

#thankyou {
  grid-area: txt;
  justify-self: center;
  text-align: center;
  align-self: center;
  color: #0b4668;
  margin: 0px var(--bs) var(--md) var(--bs);
  font-size: var(--body); }

#nameinput {
  grid-area: inp_l;
  color: #0b4668;
  border: none;
  background-color: transparent;
  height: var(--ifh);
  -webkit-user-select: text;
                           /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -moz-user-select: text;
                        /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -ms-user-select: text;
                       /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  user-select: text;
                   /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
                                                         /* get rid of 
chrome yellow fill when auto-completing*/
  resize: none;
  padding-left: calc(var(--ifnw) + var(--ilp)); }
  #nameinput:focus {
    border: 1px solid #0b4668;
    box-shadow: none;
    outline: none; }

#nameinput_bck {
  grid-area: inp_l;
  color: #0b4668;
  background-color: transparent;
  height: var(--ifh);
  line-height: calc(var(--ifh) + 3px);
  padding-left: var(--ilp);
  width: var(--ifnw); }

#emailinput {
  grid-area: inp_r;
  color: #0b4668;
  border: none;
  background-color: transparent;
  height: var(--ifh);
  -webkit-user-select: text;
                           /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -moz-user-select: text;
                        /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -ms-user-select: text;
                       /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  user-select: text;
                   /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
                                                         /* get rid of 
chrome yellow fill when auto-completing*/
  resize: none;
  padding-left: calc(var(--ifew) + var(--ilp)); }
  #emailinput:focus {
    border: 1px solid #0b4668;
    box-shadow: none;
    outline: none; }

#emailinput_bck {
  grid-area: inp_r;
  color: #0b4668;
  background-color: transparent;
  height: var(--ifh);
  line-height: calc(var(--ifh) + 3px);
  padding-left: var(--ilp);
  width: var(--ifew); }

#message {
  grid-area: msg;
  color: #0b4668;
  border: none;
  background-color: transparent;
  height: var(--ifh);
  -webkit-user-select: text;
                           /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -moz-user-select: text;
                        /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -ms-user-select: text;
                       /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  user-select: text;
                   /* re-enable selections, as disabled in global 
settings because of mobile highlights*/
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
                                                         /* get rid of 
chrome yellow fill when auto-completing*/
  resize: none;
  height: var(--mh);
  padding-left: 3px;
  padding-top: var(--msgpd); }
  #message:focus {
    border: 1px solid #0b4668;
    box-shadow: none;
    outline: none; }

#message_bck {
  grid-area: msg;
  align-self: start;
  color: #0b4668;
  background-color: transparent;
  height: var(--ifh);
  line-height: calc(var(--ifh) + 3px);
  padding-left: var(--ilp);
  margin-top: -5px;
  width: 50px; }

#something {
  grid-area: cpt;
  align-self: center; }

#submit_button {
  grid-area: btn;
  border: 0;
  letter-spacing: 1px;
  height: var(--btnh);
  width: var(--btnw);
  font-size: var(--btnt);
  color: white;
  background-color: #428f8e;
  font-weight: bold;
  margin: 0px 0px var(--lg) 0px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #submit_button:hover {
    background-color: #0b4668; }

@media only screen and (max-width: 900px) {
  .grid {
    grid-template-rows: [topnav] var(--tn) [headrows] var(--lg) [headrows] var(--sm) [headrows] var(--lg) [catsplit] var(--md) [posts] min-content [spc] auto [pagination] var(--hg) [footer] minmax(min-content, var(--xg)); }

  .blogpostgrid {
    grid-template-columns: [lpad] minmax(0px, var(--md)) [lpad] minmax(0px, var(--md)) [txt] minmax(500px, auto) [rpad] minmax(0px, var(--md)) [rpad] minmax(0px, var(--md));
    grid-template-rows: [pic] minmax(0px, 450px) [pad] var(--hg) [title] auto [sep] auto [btext] minmax(min-content, 100px) [bcats] auto; }

  .social i {
    font-size: 1.5em; }

  .centerer {
    text-decoration: none;
    display: grid;
    place-items: center;
    grid-template-columns: [txt] 1fr;
    grid-template-rows: [full] minmax(var(--cmn), var(--cmx));
    grid-template-areas: "image" "txt"; }
    .centerer:nth-of-type(2n) {
      text-decoration: none;
      display: grid;
      place-items: center;
      grid-template-columns: [txt] 1fr;
      grid-template-rows: [full] minmax(var(--cmn), var(--cmx));
      grid-template-areas: "image" "txt"; }

  .postlist li {
    text-align: center;
    grid-area: txt;
    display: grid;
    grid-row-gap: var(--st);
    grid-template-columns: [text_l_padding] minmax(0, var(--md)) [text] minmax(0, auto) [text_r_padding] minmax(0, var(--md));
    grid-auto-rows: minmax(min-content, auto); }
    .postlist li:nth-of-type(2n) {
      text-align: center;
      grid-area: txt;
      display: grid;
      grid-row-gap: var(--st);
      grid-template-columns: [text_l_padding] minmax(0, var(--md)) [text] minmax(0, 540px) [text_r_padding] minmax(0, var(--md));
      grid-auto-rows: minmax(min-content, auto); }

  .post_title {
    margin-top: var(--xg);
    font-size: var(--heading); }

  .dateauthortag {
    margin-bottom: var(--xg); } }
@media only screen and (max-width: 550px) {
  .grid {
    grid-template-rows: [topnav] var(--tn) [headrows] var(--md) [headrows] var(--st) [headrows] var(--md) [catsplit] var(--st) [posts] min-content [spc] auto [pagination] var(--hg) [social] minmax(min-content, var(--xg)) [footer] minmax(min-content, var(--xg)); }

  .blogpostgrid {
    grid-template-columns: [lpad] minmax(0px, var(--st)) [lpad] minmax(0px, var(--st)) [txt] minmax(var(--xg), auto) [rpad] minmax(0px, var(--st)) [rpad] minmax(0px, var(--st));
    grid-template-rows: [pic] minmax(0px, 320px) [pad] var(--xg) [title] auto [sep] auto [btext] minmax(min-content, 90px) [bcats] auto; }

  #top {
    position: fixed;
    height: var(--tn);
    width: 100%;
    z-index: 2; }

  #crosscheck {
    display: block;
    opacity: 0;
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0px;
    left: 0px;
    cursor: pointer;
    z-index: 4; }
    #crosscheck:checked ~ #crossbg {
      visibility: visible;
      right: 0%;
      width: 100%;
      transition: 0.5s; }
    #crosscheck:checked ~ #crosslines {
      transform: rotate(135deg);
      transition: 0.5s;
      margin-top: 0px; }
    #crosscheck:checked ~ #burgerlines {
      display: none; }

  #crosslines {
    display: block;
    position: fixed;
    top: 19px;
    left: 15px;
    width: 24px;
    margin-top: 4px;
    transform: rotate(0deg);
    transition: 0.3s;
    z-index: 3; }

  .crossline {
    height: 4px;
    width: 25px;
    background-color: white; }
    .crossline:first-of-type {
      transform: rotate(90deg);
      transition: 0.3s; }
    .crossline:last-of-type {
      transform: translateY(-4px); }

  #crossbg {
    height: 100vh;
    background-color: #428f8e;
    position: fixed;
    display: block;
    visibility: hidden;
    width: 100%;
    margin-top: var(--lg);
    right: 100%;
    transition: 0.5s;
    z-index: 2; }

  #burgercheck {
    opacity: 1;
    display: block;
    opacity: 0;
    position: fixed;
    top: 0%;
    right: 0%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 4; }
    #burgercheck:checked ~ #burgerbg {
      visibility: visible;
      left: 0%;
      width: 100%;
      height: 10000px;
      transition: 0.5s ease-in-out; }
    #burgercheck:checked ~ #crosslines {
      display: none; }
    #burgercheck:checked ~ #burgerlines {
      transform: translateX(8px);
      transition: 0.3s; }
    #burgercheck:checked ~ #burgerlines > .burgerline:first-of-type {
      transform-origin: 13px;
      transform: translateY(10px) rotate(45deg);
      width: 25px;
      transition: 0.3s; }
    #burgercheck:checked ~ #burgerlines > .burgerline:nth-of-type(2) {
      width: 0px;
      opacity: 0;
      transition: 0.3s; }
    #burgercheck:checked ~ #burgerlines > .burgerline:last-of-type {
      transform: translateY(-10px) rotate(-45deg);
      width: 25px;
      transition: 0.3s; }

  #burgerlines {
    display: block;
    grid-area: 1 / 3;
    width: 30px;
    position: fixed;
    top: 13px;
    right: 15px;
    z-index: 3;
    transform: translateX(0px);
    transition: 0.3s; }

  .burgerline {
    height: 3px;
    width: 30px;
    background-color: white; }
    .burgerline:first-of-type {
      transform-origin: 0px;
      transform: translateY(0px) rotate(0deg);
      transition: 0.3s; }
    .burgerline:nth-of-type(2) {
      margin-top: 7px;
      width: 30px;
      opacity: 1;
      transition: 0.3s; }
    .burgerline:last-of-type {
      margin-top: 7px;
      transform: translateY(0px) rotate(0deg);
      transition: 0.3s; }

  #burgerbg {
    height: 100vh;
    margin-top: var(--lg);
    background-color: #428f8e;
    display: block;
    position: fixed;
    width: 100%;
    left: 100%;
    top: 0px;
    transition: 0.5s ease-in-out;
    z-index: 2; }

  #burgerlist {
    padding-top: var(--bs); }
    #burgerlist li {
      list-style-type: none;
      text-align: center; }
    #burgerlist a {
      color: white;
      font-weight: bold;
      font-size: var(--heading);
      letter-spacing: .1em;
      text-decoration: none;
      transition: 0.2s; }
      #burgerlist a:hover, #burgerlist a:active, #burgerlist a:focus {
        color: #acfed3;
        transition: 0.2s; }

  #crosslist {
    padding-top: var(--bs); }
    #crosslist li {
      list-style-type: none;
      text-align: center; }
    #crosslist a {
      color: white;
      font-weight: bold;
      font-size: var(--heading);
      letter-spacing: .1em;
      text-decoration: none;
      transition: 0.2s; }
      #crosslist a:hover, #crosslist a:active, #crosslist a:focus {
        color: #acfed3;
        transition: 0.2s; }

  #cross_sep {
    width: var(--xg);
    height: 2px;
    background-color: white;
    opacity: .5;
    margin: var(--sm) auto var(--sm) auto; }

  #cross_sep:last-of-type {
    visibility: hidden; }

  #burger_sep {
    width: var(--xg);
    height: 2px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    opacity: .5;
    margin: var(--sm) auto var(--sm) auto; }

  #burger_sep:last-of-type {
    visibility: hidden; }

  .tn_list li {
    display: inline;
    visibility: hidden; }

  #cat_title {
    visibility: visible;
    grid-row: 4;
    grid-column: 3;
    align-self: end;
    justify-self: end;
    font-size: var(--heading);
    letter-spacing: 1px;
    font-weight: bold;
    color: #0b4668;
    margin-bottom: -5px; }

  .categories_t {
    list-style-type: none;
    visibility: hidden; }

  .categories_b {
    list-style-type: none;
    visibility: hidden; }

  .social {
    grid-row: 9;
    list-style-type: none;
    align-self: start;
    justify-self: center; }
    .social i {
      font-size: var(--si);
      padding: 15px 0px var(--st) var(--st);
      color: white;
      transition: 0.2s; }
      .social i:hover, .social i:active, .social i:focus {
        color: #acfed3;
        transition: 0.2s; }

  .footer {
    height: 100%;
    grid-row: 9 / span 2; }

  #footertext {
    justify-self: center;
    margin-top: 50px;
    margin-bottom: 10px; }
    #footertext p {
      text-align: center; } }
@media only screen and (max-width: 450px) {
  .blogpostgrid {
    grid-template-columns: [lpad] minmax(0px, var(--bs)) [lpad] minmax(0px, var(--bs)) [txt] minmax(0px, auto) [rpad] minmax(0px, var(--bs)) [rpad] minmax(0px, var(--bs));
    grid-template-rows: [pic] minmax(0px, 200px) [pad] var(--hg) [title] auto [sep] auto [btext] minmax(min-content, 100px) [bcats] auto; }

  #the_form {
    grid-template-columns: [fields] minmax(370px, 600px);
    grid-template-rows: [tp] var(--lg) [title] minmax(min-content, max-content) [sep] minmax(min-content, max-content) [msg] minmax(min-content, max-content) [inps] minmax(min-content, max-content) [inps] minmax(min-content, max-content) [msg] minmax(min-content, max-content) [cpt] auto [btn] 0px [pad] 0px;
    grid-template-areas: ". " "title " "sep " "txt " "inp_l " "inp_r " "msg " "cpt " "btn " " . "; }

  .footer {
    height: 100%;
    grid-row: 9 / span 2; }

  #footertext {
    align-self: end;
    justify-self: center;
    margin-top: 55px; }
    #footertext p {
      margin-left: 0px;
      text-align: center;
      font-size: 12px; }

  .g-recaptcha > div > div {
    width: 150% !important;
    height: 100px !important;
    max-width: 300px;
    transform: scale(0.65);
    transform-origin: 0 0; }

  .g-recaptcha iframe {
    width: 100%;
    height: 100%;
    overflow: visible; } }
@media only screen and (max-width: 410px) {
  #the_form {
    grid-template-columns: [fields] minmax(350px, 400px); } }
@media only screen and (max-width: 390px) {
  #the_form {
    grid-template-columns: [fields] minmax(330px, 320px); } }
@media only screen and (max-width: 370px) {
  #the_form {
    grid-template-columns: [fields] minmax(300px, 320px); } }
@media only screen and (max-width: 350px) {
  #the_form {
    grid-template-columns: [fields] minmax(280px, 320px); } }

/*# sourceMappingURL=styles.css.map */