/* Bundled Ocean theme for blog/classic pages. Source: Opinionated-Themes/styles/Ocean */

/* GLOBAL  */
:root {
  --page-width: 1100px;
  --page-padding: 12px;
  --page-margin: 12px;
  --page-margin-small: 4px;

  --page-font-default: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto, Arial,sans-serif;
  --page-font-headings: Roboto,Lato,Arial,sans-serif;
  --page-font-buttons: Inter, Arial,sans-serif;

  --flex-direction: row;
  --justify-content: space-between;

  --text-normal-size-small: 14px;
  --text-normal-size-medium: 16px;
  --text-normal-size: 21px;
  --text-normal-line-height: 36px;
  --text-normal-weight: 400;
  --text-h1-size: 3.9em;;
  --text-h1-line-height: 1.1em;
  --text-h1-weight: 800;
  --text-h2-weight: 700;
  --text-h3-weight: 500;
  --text-h4-weight: 400;

  --border-radius: 1px;
  --border-size: 1px;

  --transition-speed-fast: 0.05s;
  --transition-speed-normal: 0.2s;
  --transition-speed-slow: 0.5s;
}


:root, [data-theme="light"]{

  --page-header-background: #fff;
  --page-header-foreground: #ccc;
  --page-header-logo-color: #000;
  --page-header-border-size: 1px;
  --page-header-border-color: #e7e9ec;
  --page-header-sidebar-background: rgba(0, 0, 0, 1);
  --page-header-link-weight: 400;
  --page-header-link-color:#000;
  --page-header-link-color-hover:  rgba(37,100,223,1);
  --page-header-link-background-color: #fff;
  --page-header-link-background-color-hover: #fff;

  --page-section-highlight-background: #f2f4f7;
  --page-section-highlight-text: #000;

  --color-background: #fff;
  --color-foreground: #f2f4f7;
  --color-selection: rgba(205, 224, 252, 0.496);

  --color-border: #e7e9ec;

  --color-text-normal:#0e1b2e;
  --color-text-light: #696969;
  --color-text-highlight: rgba(37,100,223,1);

  --button-color-text: rgba(0, 118, 255, 0.39);
  --button-color-foreground: rgb(22, 123, 241);
  --button-color-background: #fff;

  --button-emphasis-color-text: #fff;
  --button-emphasis-color-foreground: rgb(22, 123, 241);
  --button-emphasis-color-background: rgb(22, 123, 241);
  --button-emphasis-color-border: rgba(37,100,223,1);

  --button-shadow: 0 3px 9px 0 rgba(0, 118, 255, 0.39);
  --button-shadow-hover: 0 6px 16px rgba(0, 118, 255, 0.23);

  --button-emphasis-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39);
  --button-emphasis-shadow-hover: 0 6px 20px rgba(0, 118, 255, 0.23);

  --color-link-text-normal: rgba(37,100,223,1); /* blue */
  --color-link-text-hover: hsl(210, 15%, 35%);
  --color-link-text-visited: hsl(210, 15%, 35%);
  --color-link-background-normal: transparent; /* gray */
  --color-link-background-hover: rgba(37,100,223,1); /* blue */

  --shadow-smallest: 0px 4px 8px rgba(0,0,0,0.12);
  --shadow-small: 0 5px 10px rgba(0,0,0,0.12);
  --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-large: 0 30px 60px rgba(0,0,0,0.12);
  --shadow-hover: 0 30px 60px rgba(0,0,0,0.12);
  --shadow-sticky: 0 12px 10px -10px rgba(0,0,0,0.12);

  --image-filter: none;
  --image-filter-hover: none;
  --image-opacity: 0.9;
  --image-opacity-hover: 1;
  --svg-filter: none;

  --page-footer-background: #fff;
  --page-footer-foreground: #ccc;
  --page-footer-logo-color: #000;  
  --page-footer-text-color: #000;
  --page-footer-border-size: 1px;
  --page-footer-border-color:#e7e9ec;
  --page-footer-link-color: #ccc;
  --page-footer-link-color-hover: #000;
  --page-footer-link-background-color: #fff;
  --page-footer-link-background-color-hover: #cece;

  --page-subfooter-background: rgb(245, 245, 245);
  --page-subfooter-foreground: #ccc; 
  
  --page-lastfooter-background: #e7e9ec;
  --page-lastfooter-foreground: #ccc; 

  /* --page-footer-background: #000;
  --page-footer-foreground: #fff;
  --page-footer-logo-color: #fff;
  --page-footer-border-size: none;
  --page-footer-border-color: none;
  --page-footer-sidebar-background: rgba(0, 0, 0, 1);
  --page-footer-link-color: #cccs;
  --page-footer-link-color-hover: #fff;
  --page-footer-link-background-color: #000;
  --page-footer-link-background-color-hover: #000; */

}


@media (prefers-color-scheme: dark){

  :root{

    --page-header-background: rgba(255, 255, 255, 0.47);
    --page-header-foreground: #fff;
    --page-header-logo-color: rgba(0, 0, 0, 1);
  --page-header-border-size: 1px;
  --page-header-border-color: #e7e9ec;
    --page-header-sidebar-background: rgba(0, 0, 0, 1);
    --page-header-link-weight: 500;
    --page-header-link-color: hsl(210, 15%, 35%);
    /* #bebebe; */
    --page-header-link-color-hover: hsl(210, 15%, 15%);
    --page-header-link-background-color: transparent;
    --page-header-link-background-color-hover: transparent;

    --page-section-highlight-background: #24170bb7;
    --page-section-highlight-text: #000;

    --color-background: #f6efe8; /* rgba(14, 27, 46,1); */
    --color-foreground: rgb(14, 23, 38);
    --color-selection: #0076ff3b;

    --color-border: rgba(184, 210, 249, 0.19);

    --color-text-normal:#000;
    /* rgba(204, 209, 217, 1); */
    --color-text-light: hsl(210, 15%, 35%);
    --color-text-highlight:rgba(205, 171, 35, 0.9);

    --button-color-text: rgb(14, 23, 38);
    --button-color-foreground: rgba(237, 200, 53,0.9);
    --button-color-background: #f6efe8;

    --button-emphasis-color-text: rgb(14, 23, 38);
    --button-emphasis-color-foreground: rgba(237, 200, 53,0.9);
    --button-emphasis-color-background: rgba(237, 200, 53,0.9);
    --button-emphasis-color-border: rgba(237, 200, 53,0.9);

    --button-shadow: 0 3px 9px 0 rgba(237, 200, 53,0.9);
    --button-shadow-hover: 0 6px 16px rgba(237, 200, 53,0.9);

    --button-emphasis-shadow: var(--shadow-small);
    --button-emphasis-shadow-hover: var(--shadow-small);

    --color-link-text-normal: rgba(37,100,223,1); /* blue */
    --color-link-text-hover: red;
    --color-link-text-visited: hsl(210, 15%, 35%);    
    --color-link-background-normal: transparent; /* gray */
    --color-link-background-hover: rgba(37,100,223,1); /* blue */    

    --shadow-smallest: 0px 4px 8px rgba(0,0,0,0.12);
    --shadow-small: 0 5px 10px rgba(0,0,0,0.12);
    --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-large: 0 30px 60px rgba(0,0,0,0.12);
    --shadow-hover: 0 30px 60px rgba(0,0,0,0.12);
    --shadow-sticky: 0 12px 10px -10px rgba(0,0,0,0.12);

    --image-filter: none;
    --image-filter-hover: none;
    --image-opacity: 0.9;
    --image-opacity-hover: 1;
    --svg-filter: none;

    --page-footer-background: #000;
    --page-footer-foreground: #fff;
    --page-footer-logo-color: #fff;
    --page-footer-border-size: none;
    --page-footer-border-color: none;
    --page-footer-sidebar-background: rgba(0, 0, 0, 1);
    --page-footer-link-color: #bebebe;
    --page-footer-link-color-hover: #fff;
    --page-footer-link-background-color: #000;
    --page-footer-link-background-color-hover: #000;

    }
}


/* A theme project by Kirill Zubovsky */
/* https://kirillzubovsky.com */
/* All rights reserved, all copyright is mine. For now */
/* Seriously, I got to finish this, then I can share it broadly. */
/* If you see this and you like it, send me an email, I'd love to get in touch. */



html {
  box-sizing: border-box;
  height: 100%;
  line-height: 1.15;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
 }
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-inter), var(--page-font-default), "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-display: swap;
  line-height: 1.65;
  -webkit-font-smoothing: subpixel-antialiased;
  background: var(--color-background);
  color: var(--color-text-normal);
  font-weight: var(--text-normal-weight);
}

body a, a:hover, a:active, a:visited{
  text-decoration: none;
  color: var(--color-link-text-normal);
  background: var(--color-link-background-normal);
  /* padding: calc(var(--page-padding)/4) calc(var(--page-padding)/2);
  margin: 0 var(--page-margin-small); */
}

body a.inline, a.inline:active, a.inline:visited{
  text-decoration: underline;
  color: inherit;
  background: none;
  padding: 0 0;
}

a.inline.no-style{
  text-decoration: none;
}

a.inline:visited{
  color: var(--color-link-text-visited);
}

body a:hover{
  text-decoration: none;
  color: var(--color-link-text-hover);
}

body a.inline:hover {
  text-decoration: underline;
  color: var(--color-link-text-hover);
}


::selection {
  background-color: var(--color-selection);
}

h1{
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: 0.02em;
  font-family: var(--page-font-headings);
  font-display: swap;
}

@media (max-width: 968px) {
  h1{
    font-size: calc(0.6*var(--text-h1-size));
    line-height: calc(1.1*var(--text-h1-line-height));
  }
}

h2{
  font-size: 1.9em;
  line-height: calc(1.2*var(--text-normal-line-height));
  font-weight: var(--text-h2-weight);
  letter-spacing: 0.01em;
  font-family: var(--page-font-headings);
  font-display: swap;
}
@media (max-width: 767px) {
  h2{
    font-size: initial;
    line-height: initial;
  }
}

h3{
  font-size: calc(1.1*var(--text-normal-size));
  font-weight: var(--text-h3-weight);
  font-family: var(--page-font-headings);
  font-display: swap;
}

h4{
  font-size: 13px;
  line-height: 1em;
  font-weight: var(--text-h4-weight);
  color: var(--color-text-normal);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-family: var(--page-font-headings);
  font-display: swap;
}

section{
  overflow: hidden;
}

img:not([src*=".svg"]) {
  filter: var(--image-filter);
  opacity: var(--image-opacity);
  transition: opacity var(--transition-speed-slow) ease-in-out;
  border-radius: var(--border-radius);
}
img:hover {
  opacity: var(--image-opacity-hover);
  filter: var(--image-filter-hover);
}
img[src*=".svg"] {
  filter: var(--svg-filter);
  opacity: .75;
  transition: opacity var(--transition-speed-slow) ease-in-out;
}

@media (max-width: 768px) {
  .ot-hidden-mobile{
    display: none !important;
  }
}
@media (min-width: 769px) {
  .ot-hidden-desktop{
    display: none !important;
  }
}


.container {
    max-width: var(--page-width);
    margin: auto;
    box-sizing: border-box;
}
.container img {
  max-width: var(--page-width);
}

.container.no-margin{
  margin: 0 auto !important;
}

section > .container {
  margin-top: calc(6* var(--page-margin));
  margin-bottom: calc(6* var(--page-margin));
}
@media (max-width: 1025px) {
  section > .container {
    /* margin-top: calc(4* var(--page-margin));
    margin-bottom: calc(4* var(--page-margin)); */
    margin-right: calc(2* var(--page-margin));
    margin-left: calc(2* var(--page-margin));
  }
  section > .container img{
    max-width: 99% !important;
    margin: 0 auto;
  }
}
@media (max-width: 650px) {
  section > .container{
    margin-right: calc(4* var(--page-margin));
    margin-left: calc(4* var(--page-margin));
  }
}

@media (min-width: 1500px) {
  section>.container.expandable{
    max-width: 1800px;
  }
}

.ot-spacer{
  display: block;
  width: 1px;
  height: 1px;
  margin-left: var(--page-margin);
  margin-top: var(--page-margin);
}

.ot-flex-row{
  display: flex;
  flex-direction: var(--flex-direction);
  position: relative;
  flex-wrap: wrap;
  flex: 1;
  justify-content: var(--justify-content);
}
/* @media (min-width: 1380px) {
  :root {
    --page-margin: calc(2*var(--page-margin)) !important;
  }
} */
@media (max-width: 768px) {
  :root{
    /* --flex-direction: column; */
    --justify-content: stretch;
  }
}
@media (max-width: 450px) {
  :root{
    --flex-direction: column;
    --justify-content: stretch;
  }
}

.ot-flex-row.ot-space-between{
  justify-content: space-between;
}
.ot-flex-row.ot-space-evenly{
  justify-content: space-evenly;
}
.ot-flex-row.ot-center{
  justify-content: center;
}
.ot-flex-row.ot-align-center{
  align-items: center;
}
.ot-flex-row.ot-align-start{
  align-items: flex-start;
}

@media (min-width: 968px) {
  .ot-centered-content{
    max-width: 55%;
    margin: 0 auto;
  }
  .ot-short-content{
    max-width: 55%;
  }
}

.ot-equal-padding{
  padding: var(--page-padding) var(--page-padding);
}
.ot-top-margin{
  margin-top: calc(4* var(--page-margin));
}
.ot-bottom-margin{
  margin-bottom: calc(4* var(--page-margin));
}
.ot-foreground{
  background: var(--color-foreground) !important;
}
.ot-background{
  background: var(--color-background) !important;
}
.ot-section-highlight{
  background: var(--page-section-highlight-background) !important;
  color: var(--page-section-highlight-text) !important;
}
/* @media (prefers-color-scheme: dark){
  .ot-section-highlight h4 {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }
} */

p, input, textarea{
  font-size:var(--text-normal-size);
  font-weight: var(--text-normal-weight);
  font-family: var(--page-font-headings);
  font-display: swap;
  line-height: var(--text-normal-line-height);
  padding: 0 0;
  margin: 0 0;
}

@media (max-width: 968px) {
  p, input, textarea{
    font-size: calc(1.1* var(--text-normal-size-medium));
    line-height: calc(0.8*var(--text-normal-line-height));
  }
}

ul{
  font-size:16px;
  line-height: 24px;
  list-style: none;
  list-style-type: none;
  padding: 0 0;
  margin-left: 15px;
}

ul.inline{
  display: inline-flex;
}
ul > li {padding: 0 12px 12px 0;}

ul > li::before {
  content: '•';
  display: inline-block;
  color: var(--color-text-light);
  position: relative;
  margin-left: -15px;
  padding: 0 8px 0 0px;
}

ul.ot-style-none{
  margin-left: 0;
}
ul.ot-style-none > li::before{
  content: none;
  margin-left: 0;
}

/* All styles for buttons */

.ot-button {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  border-radius: var(--border-radius);
  letter-spacing: 0.4px;
  color: var(--button-color-text);
  font-family: var(--page-font-buttons);
  font-display: swap;
  background-color: transparent;
  border: none;
  font-size: inherit;
  line-height: inherit;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s cubic-bezier(0.14, 0.42, 0.58, 1);
  outline: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* line-break: anywhere; /* fix button break in Safari */
  line-break: auto; /* fix button break in Safari */
  white-space: break-spaces;
  overflow: hidden;

  font-feature-settings: "case" 0, "cpsp" 0, "dlig" 0, "frac" 0, "dnom" 0, "numr" 0, "salt" 0, "subs" 0, "sups" 0, "tnum" 0, "zero" 0, "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "cv11" 0, "calt", "kern";
  
}
.ot-button.no-shadow{
  box-shadow: none !important;
}
.ot-button.no-shadow:hover{
  box-shadow: none !important;
}
.ot-button.pop:hover{
  -webkit-transform: translate3d(0px,-1px,0px);
  -ms-transform: translate3d(0px,-1px,0px);
  transform: translate3d(0px,-1px,0px);
}
.ot-button.slide:hover{
  -webkit-transform: translate3d(-1px,0px,0px);
  -ms-transform: translate3d(-1px,0px,0px);
  transform: translate3d(-1px,0px,0px);
}

.ot-button:hover {
  color: var(--button-color-text);
  background: rgba(0, 118, 255, 0.1);
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  font-size: inherit;
  line-height: inherit;
}
.ot-button.emphasis {
  margin: 0;
  height: 2.81rem;
  padding: 0 1.5rem;
  /* line-height: 2.8rem; */
  border-radius: var(--border-radius);
  background: var(--button-emphasis-color-background);
  box-shadow: var(--button-emphasis-shadow);
  color: var(--button-emphasis-color-text);
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .ot-button.emphasis {
    height: 2rem;
    padding: 0 1rem;
  }
}
.ot-button.emphasis:hover {
  color: var(--button-emphasis-color-text-hover);
  background: var(--button-emphasis-color-background-hover);
  box-shadow: var(--button-emphasis-shadow-hover);
}
.ot-button.emphasis:focus {
  border: 2px solid var(--button-emphasis-color-background-hover);
}
.ot-button.emphasis:active {
  background: var(--button-emphasis-color-background);
}
.ot-button.emphasis.outline {
  background: transparent;
  color: var(--button-color-text) !important;
  box-shadow: var(--shadow-small);
  border: var(--border-size) solid var(--button-color-border);
}
.ot-button.emphasis.outline:hover {
  background: rgba(255, 255, 255, 1);
  border: var(--border-size) solid var(--button-color-border-hover);
  box-shadow: 0 6px 20px rgba(93, 93, 93, 0.23);
}
.ot-button.small {
  font-size: 0.875rem;
  height: 2rem;
  padding: 0 0.75rem;
  line-height: inherit;
  border-radius: var(--border-radius);
  box-shadow: none;
}
.ot-button.small.emphasis { 

}
.ot-button.loading {
  background: #fafafa;
  color: #888888;
  border: var(--border-size) solid #000;
  border-color: #eaeaea;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.ot-button.no-style {
  color: inherit;
  padding: 0 0;
  margin: 0 0;
  display: inline-block;
}

.ot-button.no-style:hover {
  color: inherit;
  padding: 0 0;
  margin: 0 0;
  display: inline-block;
  background: inherit;
}
.ot-button.inline, .ot-button.inline:hover{
  margin: 0 4px 0 0;
  border-radius: none !important;
}

.ot-button.loading > .text {
  visibility: hidden;
}
.ot-button > .loading-dots {
  position: absolute;
}


@media (max-width: 650px) {
  .ot-button.emphasis {
    padding: 0 .5rem;
  }
}

/* All lists and lists containers */

.ot-list{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.ot-list-item{
  padding: var(--page-padding);
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  min-width: 0;
  justify-content: var(--justify-content);
  overflow: hidden;
}


.ot-list-item.no-style{
  padding: 0 0;
  display: inline-block;
}

.ot-list-item.no-style:hover{
  padding: 0 0;
  display: inline-block;
}

.ot-list-item.ot-button-content-container{
  flex-basis: 20%;
  padding: 0 0;
}

@media (max-width: 998px) {
  .ot-list-item{
    flex-grow: 1;
  }
  .ot-list-item > .ot-button{
    width: 100%;
  }
}

@media (min-width: 769px) {
  section > .container > .ot-list-item{
    max-width: 50%;
  }
}


/* All the header logic here */

.ot-application-header{

  /* Application Container Outer */

  width: 100%;
  overflow:visible;
  box-sizing: border-box;
  background: var(--page-header-background);
  position: relative;
  z-index: 900;
  border-bottom: var(--page-header-border-size) solid var(--page-header-border-color);
  padding: 14px calc(2*var(--page-padding));

}

.ot-application-header a, .ot-application-header a:active, .ot-application-header a:visited {
  color: var(--page-header-link-color);
  background: var(--page-header-link-background-color);
  font-size: var(--text-normal-size-medium);
  font-weight: var(--page-header-link-weight);
  line-height: var(--text-normal-line-height);
  white-space: unset;
}

.ot-application-header a:hover {
  color: var(--page-header-link-color-hover);
  background: var(--page-header-link-background-color-hover);
  font-size: var(--text-normal-size-medium);
  font-weight: var(--page-header-link-weight);
  line-height: var(--text-normal-line-height);
  white-space: unset;
}

.ot-application-header .ot-list{
  flex-basis: 0;
  flex-grow: 1;
  justify-content: flex-end;
}

.ot-application-header .ot-list > .ot-list-item{
  padding-top: 0; padding-bottom: 0;
  margin-top: 0; margin-bottom: 0;
}

@media (max-width: 998px) {

  .ot-application-header > .container{
    justify-content: flex-start;
    flex-direction: row;
  }
  .ot-application-logo{
    display: flex;
    flex-basis: 0px;
    flex-grow: 0.5;  
  }
  .ot-application-header .ot-list{
    flex-basis: 0;
    position: absolute;
    right: 0;
    justify-content: center;
  }

  .ot-application-header .ot-list .ot-list-item > .ot-button{
    width: auto;
  }
}

/* @media (min-width: 769px) {
  .ot-application-header .ot-list > .ot-list-item:last-child{
  display: none;   
  }
} */

.ot-application-header > .container{
  align-items: center;
}

.ot-application-logo {
  color: var(--page-header-logo-color);
}
.ot-application-logo text{
  fill: var(--page-header-logo-color);
}
.ot-application-logo:hover{
  cursor: pointer;
}

.ot-nav-sidebar{
  position: fixed;
  z-index: 250;
  width: 20rem;
  height: 100%;
  top: 0;
  right: -20rem;
  bottom: 0;
  background: none;

  opacity: 0;
  overflow-y: scroll;
  box-sizing: border-box;
}

body.ot-sidebar-is-opened .ot-nav-sidebar{
  z-index: 800;
  right: 0rem;
  opacity: 1;
  padding: 4rem 2rem;
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  width: 100vw;
  background: var(--page-header-sidebar-background);
}

body.ot-sidebar-is-opened .ot-nav-sidebar .ot-button{
  width: 100%;
}

.ot-js-sidebar-trigger{
  height: 22px; width: 22px;
  z-index: 900;
  margin-top:2px;
  margin-left: calc(var(--page-margin)/2);
}
.ot-js-sidebar-trigger > .ot-js-nav-opened{
  display: none;
}

.ot-js-sidebar-trigger svg path {
  fill: var(--page-header-link-color);
}
.ot-js-sidebar-trigger:hover{
  cursor: pointer;
}
.ot-js-sidebar-trigger:hover svg path {
  fill: var(--page-header-link-color-hover);
}

.ot-js-sidebar-trigger .ot-js-nav-open-buttom{
  display: block;
}
.ot-js-sidebar-trigger .ot-js-nav-close-buttom{
  display: none;
}
body.ot-sidebar-is-opened .ot-js-sidebar-trigger .ot-js-nav-open-buttom{
  display: none !important;
}

body.ot-sidebar-is-opened .ot-js-sidebar-trigger .ot-js-nav-close-buttom{
  display: block !important;
}

.ot-line{
  height: 5px;
  border-top: 1px solid var(--color-border);
  width: 100%;
  margin: auto;  
}

/* Tiles Container and Tile */

.ot-tile{
  flex-basis: 20%;
  flex-grow:2;
  margin-right: var(--page-margin);
  margin-bottom: calc(4* var(--page-margin));
  padding: calc(2* var(--page-padding));
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--color-text-normal);
}
.ot-tile h3{font-weight: 600;}

/* .ot-tile img:empty{display: none;} */
.ot-tile h3:empty{display: none;}
.ot-tile h4:empty{display: none;}
.ot-tile p:empty{display: none;}
i

.ot-tile:nth-child(3n){margin-right: 0px;}

.ot-tile.solid{
  margin-right: calc(2*var(--page-margin));
  margin-bottom: calc(4* var(--page-margin));  
  background: var(--color-background);
  box-shadow: var(--shadow-smallest);
}

.ot-tile.-with-pop{
  margin-right: calc(2*var(--page-margin));
  margin-bottom: calc(4* var(--page-margin));  
  background: var(--color-background);
  box-shadow: var(--shadow-small);

  -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
       -o-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;  
}

.ot-tile.-with-pop:hover{
  box-shadow: var(--shadow-medium);

 /* Scale*/
  -webkit-transform: scale(1.01);
     -moz-transform: scale(1.01);
      -ms-transform: scale(1.01);
       -o-transform: scale(1.01);
          transform: scale(1.01); 

  cursor: pointer;
}
.ot-tile.-with-pop.-no-transform:hover{
 
  /* Scale*/
  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;   

  cursor: default;
  box-shadow: inherit;
  
}

.ot-tile.-with-small-icon > img{
  max-width: 50% !important;
  margin: 10% 25%;
}

@media (min-width: 969px) {
  .ot-tile.-with-hidden-icon > img{
    display: none;
  }
}

@media (max-width: 968px) {
  .ot-tile{
    flex-basis: 40% !important;
    margin-right: 5% !important;
    margin-bottom: calc(4*var(--page-margin));
  }
  .ot-tile:nth-child(2n){margin-right: 0px !important;}
}

@media (max-width: 650px) {
  .ot-tile{
    flex-basis: 100% !important;
    margin: var(--page-margin) 0 !important;
    padding: calc(4*var(--page-padding)) !important;
  }
}

.ot-tile.-no-transform {
  box-shadow: none;
}

@media (min-width: 968px) {
  .ot-tile.horizontal {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
  }
}


/* Notifications and Banners */

.ot-banner {
  width: 100%;
  height: 40px;
  text-align: center;
  background: var(--page-header-link-color-hover);
  color: var(--page-header-background);
  border-bottom: var(--border-size) solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ot-banner .ot-list-item{
  flex-grow: 0;
}
@media (max-width: 968px) {
  .ot-banner {
    padding: calc(4*var(--page-padding)) var(--page-padding);
  }
}

/* All footer logic here */

footer.ot-application-footer{
  width: 100%;
  overflow:visible;
  box-sizing: border-box;
  background: var(--page-footer-background);
  position: relative;
  z-index: 900;
  border-top: var(--page-footer-border-size) solid var(--page-footer-border-color);
  color: var(--page-footer-text-color);
}

footer.ot-application-footer .ot-application-logo {
  color: var(--page-footer-logo-color) !important;
}
footer.ot-application-footer .ot-application-logo text{
  fill: var(--page-footer-logo-color) !important;
}

footer.ot-application-footer a, footer.ot-application-footer a:active, footer.ot-application-footer a:visited {
  /* color: var(--page-footer-link-color);
  background: var(--page-footer-link-background-color);
  font-size: var(--text-normal-size-small);
  font-weight: var(--text-normal-weight);
  font-family: var(--page-font-headings);
  line-height: var(--text-normal-line-height); */
}

footer.ot-application-footer a:hover {
  /* color: var(--page-footer-link-color-hover);
  background: var(--page-footer-link-background-color-hover); */
}

footer > section{
  padding: 20px calc(2*var(--page-padding));
}

footer > section.ot-application-subfooter{
 background: var(--page-subfooter-background);
}
footer > section.ot-application-subfooter ul{
  list-style-type: none;
}
footer > section.ot-application-subfooter ul > li {
  display: inline;
}
footer > section.ot-application-subfooter ul > li:before {
  content: none;
  margin: none;
}
footer > section.ot-application-subfooter a{
  list-style-type: none;
}


footer > section.ot-application-lastfooter {
 background: var(--page-lastfooter-background);
 font-size: 13px;
}

/* Custom Page Specific */

.ot-blog-post-preview{
  margin: 3em auto;
  display: flex;
}
.ot-blog-post-preview-image{
  flex-basis: 30%;
}
.ot-blog-post-preview-image > img{
  width: 90%;
}
.ot-blog-post-preview-text{
  flex-basis: 60%;
}

@media (max-width: 968px) {
  .ot-blog-post-preview{
    flex-wrap:wrap;
  }  
  .ot-blog-post-preview-image{
    flex-basis: 100vw;
  }
  .ot-blog-post-preview-image > img{
    width: 100%;
  }
  .ot-blog-post-preview-image > .ot-list-item{
    padding: 0 0;
  }
  .ot-blog-post-preview-text{
    flex-basis: 100vw;
  }
}

.ot-blog-post{
  max-width: 800px;
  margin: 0 auto 10em auto !important;
}

@media (max-width: 1025px) {
  .ot-blog-post {
    width: auto !important;
    margin-top: calc(4* var(--page-margin)) !important;
    margin-bottom: calc(4* var(--page-margin)) !important;
    margin-right: calc(2* var(--page-margin)) !important;
    margin-left: calc(2* var(--page-margin)) !important;
  }
}

.ot-blog-post p{
  margin-bottom: 2rem;
  font-size: var(--text-normal-size);
  line-height: var(--text-normal-line-height);
}

.ot-blog-post h2{
  margin-top: calc(var(--page-margin)*5);
  margin-bottom: calc(var(--page-margin)*2);
}

.ot-blog-post ol, .ot-blog-post ul, .ot-blog-post blockquote{
  margin: calc(var(--page-margin)*3) 0 calc(var(--page-margin)*3) 0;
}

.ot-blog-post blockquote {
  padding: calc(var(--page-margin)*2);
  border-radius: var(--border-radius);
  background-color: var(--color-foreground);
  color: var(--color-text-normal);
}

.ot-blog-post blockquote p {
  margin-bottom: 12px;
}

.ot-notification-bar{
  color: #fff;
  background: transparent;
  text-align: center;
  height: 1px;
  display:inline;
}

.ot-notification-message{
  opacity: 0;
  position: relative;
  top: -100px;
  left: 0px;

  -webkit-transition: 'all 0.6s ease-in-out';
    -moz-transition: 'all 0.6s ease-in-out';
      -o-transition: 'all 0.6s ease-in-out';
        transition: 'all 0.6s ease-in-out';
}

.ot-notification-message.visible{
  visibility: visible;
  font-weight: 400;
  color: #fff;
  opacity: 1;
  padding: 1rem 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  margin: 1rem 0rem;

  -webkit-transform: translate(0px, 100px);
     -moz-transform: translate(0px, 100px);
      -ms-transform: translate(0px, 100px);
       -o-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
}

.ot-notification-message.visible.error{
  background-color: var(--app-notification-error);
}
.ot-notification-message.visible.notice{
  background-color: var(--app-notification-notice);
}
.ot-notification-message.visible.alert{
  background-color: var(--app-notification-alert);
}
.ot-notification-message.visible.success{
  background-color: var(--app-notification-success);
}

/* Components for Giggles */

blink,
.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  67% {
    opacity: 0
  }
}


@font-face {
  font-family: "Rock3D";
  src: url('/assets/fonts/Rock3D-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Custom styles */
@media (prefers-color-scheme: dark) {
  :root {
    --page-section-highlight-background: #010910ef;
    --page-section-highlight-text: #cccccc;
  }
}

img.blogimage {
  position: relative; 
  left: -20%;
}

.ot-blog-post ol {
  font-size: var(--text-normal-size);
  line-height: var(--text-normal-line-height);
}

.ot-blog-post p {
  font-size: 1.4em;
  line-height: 1.8em;
}

@media (max-width: 768px) {
  .ot-blog-post p {
    font-size: 1.1em;
    line-height: 1.8em;
  }
}

@media (max-width: 768px) {
  .column-on-mobile {
    flex-direction: column !important;
    row-gap: 12px;
  }
}

@media (max-width: 768px) {
  .tiny-on-mobile {
    width: 100px !important; 
    height: 100px !important;
  }
}

.newsletter-banner {
  background: #fe6a18;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 6px var(--page-padding);
}

.newsletter-banner > .dismiss-newsletter-banner {
  align-self: flex-end;
  position: absolute;
}

.newsletter-banner a {
  background-color: transparent;
  color: white;
  text-decoration: underline;
  font-family: var(--font-inter), sans-serif;
}

.newsletter-banner a:hover {
  color: white;
}

.my-photography a:hover {
  filter: brightness(110%);
}

.press-container {
  display: flex;
  align-content: center;
  flex-direction: row;
  align-items: top;
  justify-content: flex-start;
}

/* Social icon styles from your globals.css */
.social-icon {
  font-size: 2rem;
  color: #3758b1e5;
}

.social-icon:hover {
  color: #ea580c;
}

.press-tile{
  border-radius: 9px;
  border: 2px solid var(--border-color);
  padding: calc(2 * var(--page-padding));
  background-color: #fff;
  box-shadow: var(--shadow-smallest);
  flex-basis: 33%;
  margin-right: 22px;
  vertical-align: revert;
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.substack-container {
  display: flex;
  align-content: center;
  flex-direction: row;
  justify-content: flex-start;
}

.substack-image-tile {
  border-radius: 3px;
  border: 0;
  padding: 0;
  box-shadow: var(--shadow-smallest);
  flex-basis: 33%;
  margin-right: 1rem;
  filter: grayscale(100%) contrast(80%);
}

.substack-image-tile:hover{
  filter: grayscale(10%);
}

#zipper {
  width: 10px;
  /* Adjust as necessary */
  height: 500px;
  /* Adjust for the length of the zipper */
  background: repeating-linear-gradient(to bottom,
      #000000,
      #000000 10px,
      #ffffff 10px,
      #ffffff 20px);
  /* Creates a black and white striped pattern */
  transition: height 0.1s;
  /* Smooth transition for animation */
  float: left;

}
#zipper2{
  margin-top: 10px;
  width: 10px;
  /* Adjust as necessary */
  height: 500px;
  /* Adjust for the length of the zipper */
  background: repeating-linear-gradient(to bottom,
      #000000,
      #000000 10px,
      #ffffff 10px,
      #ffffff 20px);
  /* Creates a black and white striped pattern */
  transition: height 0.1s;
  /* Smooth transition for animation */
  float: left;

}

                .highlight-x {
                  animation: highlightFade 1s forwards;
                }
        
                @keyframes highlightFade {
                  0% {
                    background: yellow;
                  }
        
                  100% {
                    background: white;
                  }
                }

                .wordWrap{
                  display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                }

.image-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Adjust the space between items */
}

.image-container > img {
  max-height: 300px;
  border-radius: 3px;
}

.image-container,
.text-container {
  flex: 1;
}

@media (min-width: 768px) {

  /* Adjust this value based on your definition of "big screen" */
  .image-wrapper {
    flex-direction: row;
  }
}

/* Opinionated-Themes/components/lists/image-list.module.css */

.imageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2rem;
  row-gap: 3rem;
}

.imageGrid li:before {
  display: none;
}

.imageGrid li {
  margin: 0;
  padding: 0;
}

.imageTile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imageTile a {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  text-align: left;
  color: #333;
  text-decoration: none;
}

.imageTile a:hover {
  text-decoration: underline;
}

.imageTile img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.imageTile img:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  filter: saturate(1.1);
}