/*
Theme Name: ZZeen 25_C
Description: ZZeen portfolio theme
Author: ZZeen
Text Domain: zz
*/

/*
Theme colors:
#F7F7F2 = off-white
#303030 = off
#111111 = black

#909da7 = grey
#e3e3d9 = soft light grey
}
*/

/* --------------------------------------------------------
   0. RESET
   -------------------------------------------------------- */

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: 500;
  vertical-align: baseline;
  background: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* Responsive images and other embedded objects.
   Note:'img' will cause problems with foreground images, i.e. sprites.
   If so, replace it with .responsive for each responsive image.
   */
img,
object,
embed {
  max-width: 100%;
  height: auto;
}

/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  outline: none;
}

ol,
ul {
  list-style: none;
  margin: 0;
}
li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 0em;
}

blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
  font: 100%;
}
th,
td {
  font-weight: normal;
  vertical-align: bottom;
  padding: 0;
}
td {
  font-weight: normal;
  vertical-align: top;
}
td,
td img {
  vertical-align: top;
}
/* Prevent sup and sub mess up line-height: http://gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

input,
textarea {
  -webkit-font-smoothing: antialiased;
}
input,
select {
  vertical-align: middle;
}

input[type="radio"] {
  vertical-align: text-bottom;
}
input[type="checkbox"] {
  vertical-align: bottom;
}
.ie7 input[type="checkbox"] {
  vertical-align: baseline;
}
.ie6 input {
  vertical-align: text-bottom;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

pre {
  overflow: auto;
}
/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  padding: 0;
  margin: 0;
  border: 0;
}
/* make buttons play nice in IE */
button,
input[type="button"] {
  width: auto;
  overflow: visible;
}

img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
/* prevent browser adding extra margin */
figure {
  line-height: 0;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/* clearfix */
.clear:after {
  clear: both;
}
.clear:before,
.clear:after {
  content: "";
  display: table;
}

html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------
   0. ANIMATION
  -------------------------------------------------------- */

/* Intros and images */
/* animation: FadeIn 2s ease 0s 1 normal forwards; */
@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Callout — unused */
/* animation: colorTransition 2s infinite alternate; */
@keyframes colorTransition {
  0% {
    background-color: #ffff71;
  }
  100% {
    background-color: #f0f0e7;
  }
}

/* Logo */
/* animation: LogoTransition 2s infinite alternate; */
@keyframes LogoTransition {
  0% {
    background-color: #909da7;
    background-color: #333;
  }
  100% {
    background-color: #e3e3d9;
  }
}

/* --------------------------------------------------------
   0. BASICS
   -------------------------------------------------------- */

@font-face {
  font-family: "Micro";
  src: url("_fonts/MicrographVF-RomanVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Platipy";
  src: url("_fonts/MicrographWEB-Semibold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

body,
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  border: none;
  color: #101010;
  background: #ffffff;
  font-family:
    "Micro",
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  line-height: 1.667em;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
@media only screen and (min-width: 400px) {
  body,
  button,
  input,
  select,
  textarea {
    font-size: 18px;
  }
}
@media only screen and (min-width: 900px) {
  body,
  button,
  input,
  select,
  textarea {
    font-size: 20px;
  }
}

/* Footer sticks to bottom of page */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
footer {
  margin-top: 4em;
}

/* Colors
 * -------------------------------------------------------- */
.bg_one {
  background-color: #111111;
} /* black */
.bg_white {
  background-color: #ffffff;
}

.color_one {
  color: #111111;
}
.color_two {
  color: #f7f7f2;
}
.color_three {
  color: #303030;
}
.color_white {
  color: #fff4ed;
}

.bg-one {
  background-color: #ffff71;
}
.bg-two {
  background-color: #f0f0e7;
}
.bg-three {
  background-color: #909da7;
}

/* Boxes
 * -------------------------------------------------------- */

.content-box {
  display: block;
  width: calc(100% - 2em);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 550px) {
  .content-box {
    width: calc(100% - 3em);
  }
}
@media only screen and (min-width: 780px) {
  .content-box {
    width: calc(100% - 4em);
  }
}
@media only screen and (min-width: 1000px) {
  .content-box {
    width: calc(100% - 6em);
  }
}
@media only screen and (min-width: 1460px) {
  .content-box {
    width: 100%;
  }
}

.content-box.box-narrow,
.content-box .box-narrow {
  max-width: 650px;
}

/* Grids
 * -------------------------------------------------------- */

.grid-four,
.grid-three,
.grid-two {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  column-gap: 2.6%;
}
.grid-col {
  width: 100%;
  margin-bottom: 2em;
}

@media only screen and (min-width: 680px) {
  .grid-four .grid-col {
    width: 49%;
  }
  .grid-three .grid-col {
    width: 48%;
  }
  .grid-two .grid-col {
    width: 48.2%;
  }
}
@media only screen and (min-width: 800px) {
  .grid-four .grid-col {
    width: 23%;
  }
  .grid-three .grid-col {
    width: 31%;
  }
  .grid-three .grid-col-twothird {
    width: 64%;
  }
}

/* --------------------------------------------------------
   0. TYPOGRAPHY
   -------------------------------------------------------- */

h2,
h3,
h4,
h5,
h6 {
  padding-bottom: 0.5em;
}

h1 {
  font-family: "Platipy";
  font-size: 1.75em;
  line-height: 1em;
}
@media only screen and (min-width: 370px) {
  h1 {
    font-size: 2em;
  }
}
@media only screen and (min-width: 750px) {
  h1 {
    font-size: 2.5em;
  }
}
@media only screen and (min-width: 1000px) {
  h1 {
    font-size: 4em;
  }
}

h2 {
  font-family: "Platipy";
  font-size: 1.5em;
  line-height: 1.2em;
  letter-spacing: 0em;
  margin-bottom: 1em;
}
@media only screen and (min-width: 500px) {
  h2 {
    font-size: 1.75em;
  }
}
@media only screen and (min-width: 1000px) {
  h2 {
    font-size: 1.75em;
  }
}

h3 {
  font-size: 1.2em;
  line-height: 1.2em;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 800px) {
  h3 {
    font-size: 1.25em;
  }
}
@media only screen and (min-width: 1000px) {
  h3 {
    font-size: 1.75em;
  }
}

h4 {
  font-family: "Micro";
  font-size: 1.25em;
  line-height: 1.2em;
  /*
  font-size: 1.125em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  */
}

h5,
h6 {
  font-family: "Micro";
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0;
}

b,
strong {
  font-family: "Micro";
  font-weight: 900;
}
.font-bold {
  font-family: "Micro";
  font-weight: 900;
}
em {
  font-family: "Micro";
  font-weight: 900;
}
.italic {
  font-family: "Micro";
  font-style: italic;
}

.font-reg {
  font-family: "Micro";
  font-weight: normal;
}

small {
  font-size: 80%;
}
big {
  font-size: 125%;
}
p.mini {
  font-size: 12px;
  line-height: 1.25em;
}

.text-alignleft,
has-text-align-left {
  text-align: left;
}
.text-alignright,
has-text-align-right {
  text-align: right;
}
.text-aligncenter,
has-text-align-center {
  text-align: center;
}

dfn {
  font-family: "Micro", sans-serif;
  font-style: italic;
}
mark {
  background: #ffff71;
  color: #111;
}

hr {
  display: block;
  height: 3px !important;
  border: 0;
  border-top: 1px solid #111;
  margin: 1em 0;
  padding: 0;
  box-sizing: content-box;
  width: 100px;
}

/* --------------------------------------------------------
   0. LINKS
   -------------------------------------------------------- */
a,
a:link,
a:visited {
  color: #111111;
  border-bottom: 1px solid #111111;
  text-decoration: none;
  padding-bottom: 3px;
  transition: all 0.2s ease;
}
a:hover {
  color: #99a7b7;
  border-bottom: 1px solid #99a7b7;
  text-decoration: none;
  transition: all 0.2s ease;
}
a:active {
  border-bottom: 1px solid #111111;
  text-decoration: none;
  transition: all 0.2s ease;
}

::selection {
  background: #ebebe2;
}

/* Screensreaders
 * -----------------------------
 * Meant for screen readers only
 * Makes 'skip to content' link invisible on regular screens */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}
/* Don't show outline on skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* --------------------------------------------------------
   0. MAIN NAVIGATION
   -------------------------------------------------------- */

.site-navigation ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  column-gap: 20px;
}
.site-navigation ul li {
  align-self: flex-end;
}

.current-menu-item a,
.current-page-item a {
  color: #99a7b7;
  border-bottom: #99a7b7;
}

/* --------------------------------------------------------
   0. ELEMENTS
   -------------------------------------------------------- */

/* Page intro
 * -------------------------------------------------------- */

#intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 7em;
  margin-bottom: 6em;
  animation: FadeIn 3s ease 0s 1 normal forwards;
}
.single-post #intro {
  margin-bottom: 10em;
}
@media only screen and (max-width: 600px) {
  #intro,
  .single-post #intro {
    margin-top: 5em;
    margin-bottom: 4em;
  }
}

#intro p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero-post (Homepage)
 * -------------------------------------------------------- */
.hero-post a {
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}
.hero-post a:hover {
  transition: all 0.3s ease-out;
  opacity: 0.7;
}
.hero-post a:hover img {
  transition: all 0.3s ease-out;
  filter: grayscale(100%);
}

.hero-post a img {
  margin-bottom: 10px;
  border-radius: 4px;
}

/* Postgrid
 * -------------------------------------------------------- */

.postgrid li {
  position: relative;
  height: auto;
  margin-bottom: 2em;
}
@media only screen and (max-width: 600px) {
  .postgrid li {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em;
  }
}
@media only screen and (min-width: 900px) {
  .postgrid li {
    margin-bottom: 4em;
  }
}

.postgrid li img {
  border-radius: 4px;
}

.postgrid a,
.postgrid a:hover,
.postgrid a img,
.postgrid a:hover img {
  transition: all 0.3s ease-out;
  animation: FadeIn 3s ease 0s 1 normal forwards;
}
.postgrid a:hover {
  opacity: 0.7;
}
.postgrid a:hover img {
  filter: grayscale(100%);
}

/* Labels
 * Small text added in intros
 * --------------------------- */

/* labels for postgrid */
h3.client-label {
  color: #909da7;
  font-size: 1em;
  margin-top: 0.75em;
  margin-top: 1em;
  line-height: 1.25em;
  letter-spacing: 0.02em;
}
h3.client-label span {
  color: #303030;
  font-family: "Micro", sans-serif;
  font-size: 1.25em;
}

@media only screen and (min-width: 680px) and (max-width: 1000px) {
  h3.client-label {
    font-size: 0.8em;
  }
}

/* Buttons
 * -------------------------------------------------------- */

a.btn,
.wp-block-button a,
a.wp-block-read-more {
  display: block;
  width: 220px !important;
  height: auto;
  padding: 17px 10px 14px;
  font-size: 1em;
  text-align: center;
  font-weight: normal;
  line-height: 1.2em;
  text-decoration: none;
  color: #111111;
  color: #303030;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #111111;
  border: 1px solid #303030;
  border-radius: 30px;
}
a:hover.btn {
  color: #f7f7f2;
  background-color: #303030;
}

@media only screen and (min-width: 900px) {
  a.btn,
  .wp-block-button a,
  a.wp-block-read-more,
  .news.grid-box a.wp-block-read-more {
    font-size: 0.9em;
  }
}

/* Gutenberg buttons
 * --------------------------- */
.wp-block-button a:hover,
a:hover.wp-block-read-more {
  color: #fff;
  background: #111;
  background-color: #303030;
  transition: all 0.2s;
}

/* Spacers
 * -------------------------------------------------------- */
.spacer,
.spacer-big {
  display: block;
}
.spacer {
  height: 2em;
}
.spacer-big {
  height: 4em;
}

.no_margin {
  margin: 0 !important;
}
.no_padding {
  padding: 0 !important;
}

/* Call to action
 * -------------------------------------------------------- */
.call-out {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 6em 2em;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e3e3d9;
  transition: background-color 0.8s ease 0s;
  /* box-shadow: 0px 1px 22px 4px rgba(227, 227, 222, 0.75);
  -moz-box-shadow: 0px 1px 22px 4px rgba(197, 190, 190, 0.75);
  */
}
.call-out:hover {
  background-color: #ffff71;
  border: 1px solid #ffff71;
  box-shadow: 0px 1px 22px 4px rgba(255, 255, 255, 0.75);
  transition: background-color 0.8s ease 0s;
}

.call-out h2 {
  margin-bottom: 0.125em;
  font-size: 2.5em;
}
.call-out p {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.75em;
}
.call-out .btn {
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 900px) {
  .call-out p {
    max-width: 80%;
  }
}

/* Positioning
 * -------------------------------------------------------- */

.item-center {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

/* Social icons
 * -------------------------------------------------------- */

/* Grid-box
 * -------------------------------------------------------- */

/* Site Header
 * -------------------------------------------------------- */

.grid-header {
  display: flex;
  flex-direction: row;
  margin: 30px 0 30px;
}
.grid-header-col {
  width: 48%;
}
.grid-header-col-center {
  width: 2%;
}

@media only screen and (min-width: 500px) {
  .grid-header-col {
    calc: (48% - 40px);
  }
  .grid-header-col-center {
    width: 60px;
  }
}

.grid-header a {
  border-bottom: 0;
}

.logo-box {
  width: 40px;
  height: 40px;
  background-color: #909da7;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: LogoTransition 5s infinite alternate;
}
.logo-in-box {
  background-image: url("_img/logo-zzeen-white.svg");
  width: 20px;
  height: 20px;
  background-size: 20px auto;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 900px) {
  .logo-box {
    width: 30px;
    height: 30px;
  }
  .logo-in-box {
    width: 16px;
    height: 16px;
    background-size: 16px auto;
  }
}
@media only screen and (max-width: 500px) {
  .logo-box {
    display: none;
  }
}

a:hover .logo-box {
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}

/* Site Footer
 * -------------------------------------------------------- */

/* Logo
 * --------------------------- */

.logo,
.logo.white {
  background-image: url("_img/logo-zzeen.svg");
  width: 40px;
  height: 40px;
  background-size: 40px auto;
  text-indent: -9999px;
  background-repeat: no-repeat;
  margin: 0;
}
.logo.white {
  background-image: url("_img/logo-zzeen-white.svg");
}

/* Post navigation
 * -------------------------------------------------------- */

/* Post grid navigation
 * --------------------------- */

/* Single post navigation
 * --------------------------- */

.postnav .grid-col {
  padding: 1.25em 0 0 0;
  color: #909da7;
  border-radius: 0px;
  border-top: 1px solid #303030;
}
.postnav h3 {
  font-size: 1.2em;
  margin-top: -0.6em;
}

@media screen and (max-width: 800px) {
  .postnav .grid-three .grid-col:nth-of-type(2n) {
    order: 3;
    flex-grow: 2;
  }
}

/* --------------------------------------------------------
   0. PAGES
   -------------------------------------------------------- */

@media screen and (max-width: 600px) {
  .page-home-one .entry-content {
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
  }
  .page-home-one .entry-content hr {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Homepage One — 1 query
 * -------------------------------------------------------- */

.page-home-one .grid-two .grid-col:nth-child(1) {
  width: 100%;
  margin-bottom: 6em;
}
.page-home-one .grid-two .grid-col:nth-child(1) figure {
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}
.page-home-one .grid-two .grid-col:nth-child(1) h3 {
  text-align: center;
}

/* Homepage — with 2 queries
 * -------------------------------------------------------- */

#first-project {
  display: flex;
  justify-content: center;
  max-width: 1100px;
}

/* Page Info
 * -------------------------------------------------------- */
.page-info img {
  border-radius: 3px;
  animation: FadeIn 3s ease 0s 1 normal forwards;
}

/* Single
 * -------------------------------------------------------- */

.single #intro h2 {
  font-family: Micro, sans-serif;
  font-size: 1em;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}

.single img {
  border-radius: 3px;
  animation: FadeIn 3s ease 0s 1 normal forwards;
}

/* Page Soon + Page 404
 * -------------------------------------------------------- */

main.page-soon,
main.page-error {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-left: 1em;
  padding-right: 1em;
  height: calc(100vh - 360px);
}

/* --------------------------------------------------------
   0. GUTENBERG EDITOR STYLES
   -------------------------------------------------------- */

/* Fix for uneven spacing between stacked columns
 * --------------------------- */
.wp-block-columns {
  row-gap: 0 !important;
}

/* Gutenberg editor font sizes
 * see functions.php
 * --------------------------- */
p,
p.has-normal-font-size {
  font-family: "Micro", Helvetica, Arial, sans-serif;
  font-size: 1em;
}
p.big,
p.has-big-font-size {
  font-size: 1.333em !important;
  line-height: 1.667em;
} /*24px*/
p.small,
p.has-small-font-size {
  font-size: 0.778em !important;
  line-height: 1.667em;
} /*14px*/

p.has-large-font-size {
  font-size: 1.2em !important;
  line-height: 1.667em;
}
p.has-xlarge-font-size {
  font-size: 1.3em !important;
  line-height: 1.25em;
}
@media screen and (min-width: 600px) {
  p.small,
  p.has-small-font-size {
    font-size: 0.7em !important;
  }
  p.has-large-font-size {
    font-size: 1.5em !important;
  }
  p.has-xlarge-font-size {
    font-size: 2em !important;
  }
}

p.has-large-font-size + hr {
  margin-top: -5px;
}

/* Colors
 * --------------------------- */
.has-black-color {
  color: #111111;
}
.has-off-white-color {
  color: #f7f7f2;
}
.has-dark-green-color {
  color: #303030;
}
.has-white-color {
  color: #ffffff;
}

/* Gutenberg editor styles
 * --------------------------- */
.content-box h1 {
  margin-bottom: 0.25em;
}
.content-box h2 {
  padding: 0.5em 0 0.5em;
}
.content-box h3 {
  padding: 0.5em 0 0.5em;
}
.content-box h4 {
  padding: 0.75em 0 0.75em;
}
.content-box p {
  font-size: 1.2em;
  line-height: 1.667em;
  padding: 0 0 1em;
}

/* List style
 * --------------------------- */
.entry-content ul {
  padding: 0 0 1em;
}
.entry-content ol {
  padding: 0 0 1em;
}
.entry-content li {
  padding: 0 0 0.25em;
}

.entry-content ul li {
  list-style: disc;
  list-style-position: outslide;
}
.entry-content ol li {
  list-style: decimal;
  list-style-position: outslide;
}

.entry-content ul li .grid-box,
.entry-content ul li.type-case,
.entry-content ul li.type-post {
  list-style: none !important;
}

/* Images blocks
 * --------------------------- */
figure.wp-block-image,
.wp-block-image figure img {
  margin: 1em 0;
}
@media screen and (min-width: 600px) {
  figure.wp-block-image,
  .wp-block-image figure img {
    margin: 1.5em 0;
  }
}

/* WP core override */
.wp-block-image .alignleft,
.wp-block-image .alignright {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* add class for round images */
/* and select Square in Gutenberg editor */
.img-rounded img {
  border-radius: 50% !important;
}

/* Images captions
 * --------------------------- */
.thumbnail_caption,
figcaption {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 0.875em;
  font-size: 12px;
  line-height: 1.33em;
  color: #99a7b7;
  background: none;
}

/* Spacer block
 * --------------------------- */
@media screen and (max-width: 600px) {
  .wp-block-spacer {
    height: 40px !important;
  }
}

/* Separator block
 * --------------------------- */
.wp-block-separator {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #e3e3d9;
  margin: 2em 0 3em;
  padding: 0;
  box-sizing: content-box;
}

hr.wp-block-separator {
  width: 100%;
}

/* Quote block
 * --------------------------- */
.wp-block-quote,
.wp-block-quote p {
  font-size: 1.5em;
  line-height: 1.2em;
}

/* Extras
 * -------------------------------------------------------- */

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.bullet-number {
  display: inline-flex;
  justify-content: center;
  align-content: center;
  padding-top: 5px !important;
  width: 40px;
  height: 40px;

  border-radius: 50%;
  border: 1px solid #333;
  margin-top: 0.5em;
  margin-bottom: 1em;
}




/* Page iframe — For tests only 
 * -------------------------------------------------------- */

 .page-template-page-iframe iframe {
  width: 100%;
  height: 100vh;
 }