@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: url(/css/dosis.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Myeongjo';
  font-style: normal;
  font-weight: normal;
  src: url(/css/NanumMyeongjo-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Myeongjo';
  font-style: normal;
  font-weight: bold;
  src: url(/css/NanumMyeongjo-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Nanum Myeongjo';
  font-style: normal;
  font-weight: bold;
  src: url(/css/NanumMyeongjo-ExtraBold.ttf) format('truetype');
}

*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

html
{
    font-family: 'Dosis', sans-serif !important;
  	font-style: normal;
    font-weight: 100;
    letter-spacing: 0.03em;
    font-size: 18px;
    min-width: 355px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a.button {
    display: block;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    padding: 1rem;
    color: #dfd4be;
    cursor: pointer;
    border-radius: 7px;
    background-color: #452c00;
    color: #dfd4be !important;
    text-decoration: none;
}

.pricing .button {
    margin: auto;
    max-width: 80%;
}

body
{
	margin: 0px;
    color: #452c00;
    background-color: #dfd4be;
}

div.content img
{
    position: relative;
    max-width: 90%;
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
}

div.content img.product-tile
{
    left: 10px;
    transform: unset;
    max-width: 70%;
}

div.content img.left
{
    max-width: 42%;
    left: unset;
    transform: unset;
    float: left;
    margin-right: 20px;
}

div.content section {
    display: inline-block;
}

div.content section + section {
    padding-top: 20px;
}

div.content img.right
{
    position: relative;
    max-width: 42%;
    left: unset;
    transform: unset;
    float: right;
    margin-left: 20px;
}

img#site-logo {
    filter: invert(16%) sepia(89%) saturate(559%) hue-rotate(4deg) brightness(96%) contrast(101%);
    cursor: pointer;
}

div.newsletter > img ~ p {
    margin-top: 7px !important;
}

div#footer img
{
    position: relative;
    width: 170px;
    top: 3ex;
}

span.new
{
    border-radius: 5px;
    color: white;
    background-color: rgb(194, 21, 21);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 1px;
    margin-right: 4px;
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 1em;
    display: inline-grid;
}

div.content .important
{
    font-weight: 600;
}

/* details box for classes and workshops */
.strong
{
    font-weight: bold;
}

div.content ul.pricing
{
    vertical-align: top;
    max-width: 100%;
    padding: 0px;
    margin-bottom: 1em !important;
    list-style: none;
    display: grid;
    hyphens: none;
}

ul {
    padding-inline-start: 0px;
}

li {
    margin-left: 1em;
}

div.content ul.pricing ul {
    padding-bottom: 1em;
}

ol.inline li, ul.inline li, div.content ul.pricing ul li {
    margin: unset;
    list-style-position: inside;
}

div.content ul.pricing>li
{
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    padding: 10px;
    border-radius: 7px;
    background-color: #57393908;
    list-style-position: inside;
    border: 1px solid #452c0020;
}

div.content ul.pricing>li + li {
    margin-top: 20px;
}

div.content ul.pricing>li>p.important, div.content ul.pricing>li a.important {
    font-size: 20px;
}

img.sep {
    height: 20px;
    display: block;
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(25deg) brightness(46%) contrast(119%);
    left: 50%;
    transform: translateX(-50%);
}

a.product-tile {
      transition: transform .2s; /* Animation */
}

a.product-tile:hover {
      transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

img.largeSep {
    height: 40px;
    margin-bottom: 14px;
    display: block;
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(25deg) brightness(46%) contrast(119%);
    left: 50%;
    transform: translateX(-50%);
}

/* no extra space before li when li below largeSep */
img.largeSep + ul.pricing li{
    margin-top: 0px;
}

div.content ul.pricing>li>hr
{
    width: 50%;
}

div.content ul.pricing>li>p:last-child
{
    margin: 0px;
}

div#footer
{
    position: relative;
    width: 100%;
    text-align: center;
    padding-bottom: 15px !important;
}

div#footer a
{
    color: #452c00;
    /* text-decoration: none; */
    font-weight: 100;
    font-size: 13px;
}

div.content
{
    padding-top: 190px !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    column-count: 3;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;

}

div.content.singlecolumn
{
    column-count: 1;
    text-align: center;
}

div.content.singlecolumn.narrow
{
    max-width: 720px;
}

div.content.singlecolumn.newsletter
{
    max-width: 500px;
    text-align: left;
}

div.content p
{
    margin-top: 0px !important;
}

div.content>h1
{
    font-size: 150%;
    font-weight: 100;
    margin-top: 0px;
    column-span: all;
    text-align: center;
}

div.content>h2
{
    background-color: #d3c6ac;
    padding: 5px;
    text-align: center;
    font-size: 130%;
    font-weight: 120;
    margin-top: 0px;
    display: inline-block;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

div.content>h5
{
    text-align: center;
}

div.header h1,
div.header h2
{
	text-align: center;
	margin: 0px;
    color: rgba(248, 243, 243, 1.000);
    text-shadow: 0px 0px 6px #100;
}

div.header h1
{
    position: relative;
    left: 2px;
    letter-spacing: 7.0px;
	padding-top: 0.5em;
}

div.header h2
{
	font-size: smaller;
    letter-spacing: 1.9px;
	margin-bottom: 1em;
    margin-top: 10px;
}

div.header
{
	height: 180px;
    overflow: hidden;
    position: fixed;
    display: block;
    background: linear-gradient(0deg,#dfd4be00, #dfd4be 30px);
    z-index: 999;
    width: 100%;
}

div.header div img
{
    width: 356px;
    margin: auto;
    display: block;
    transition: 1s;
    top: 20px;
    left: -1px;
    position: relative;
}

div.header h1:hover, div.header h2:hover
{
    cursor: pointer;
}

div.footnotes hr
{
    border-bottom: 1px solid black;
    border-top: 0px;
    width: 100px;
    left: 0px;
    position: static;
    margin: 2em 0px 5px 0px;
}

a.footnote-src:any-link
{
    vertical-align: super;
    font-size: .73em;
    color: black;
}

a.footnote-dst:any-link
{
    color: black;
}

div.content a:any-link
{
    color: #452c00;
}

div.citation
{
    max-width: 65%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: larger;
}

div.citation p.what
{
    font-style: italic;
    margin-bottom: 0.6em;
}

div.citation p.what:before
{
    content: "„";
    font-size: xx-large;
    line-height: 0em;
}

div.citation p.what:after
{
    content: "“";
    font-size: xx-large;
    position: relative;
    top: 0.5ex;
    line-height: 0em;
}

div.citation p.who:before
{
    content: "— ";
    display: inline-block;
}

div.citation p.who
{
    margin-bottom: 2em;
    text-align: right;
}

div.disclosure div img {
    width: 1em;
    height: 1em;
    top: -0.3em;

    margin-left: auto;
    margin-right: auto;
    left: auto;

    transform: rotate(0deg);
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

div.disclosure div img.expanded {
    width: 1em;
    height: 1em;
    top: -0.3em;

    transform: rotate(180deg);
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

div.disclosure div:last-child
{
    overflow: hidden;
    height: 0px;
    transition-property: height;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

img.flyer
{
    width: 100%;
}

div.calendar {
    font-family: 'Nanum Myeongjo', serif !important;
  	font-style: normal;
    color: #452c00 !important;

    font-weight: 100;
    background-color: white;
    width: 80px;
    margin-left: -60px;
    border-radius: 7px;
    box-shadow: 2px 2px 5px 1px #0005;
    float: right;
    position: relative;
    top: 100px;
    left: -18%;
}

div.calendar>span {
    display: block;
}

div.calendar>span.day {
    font-size: 40px;
    font-weight: bolder;
}   

div.calendar>span.month {
    font-size: 15px;
}   

div.calendar.single {
    height: 68px;
    padding-top: 12px;
}

div.calendar.tba {
    height: 80px;
    font-size: 12px;
}

div.calendar.tba > span.month {
  font-size: 12px;
  position: relative;
  top: 25px;
  font-weight: bolder;
}

div.calendar.multi > span.sep {
    width: 60px;
    height: 0px;
    color: #452c00;
    border-top: 1px solid #452c00;
    left: 10px;
    position: relative;
    padding-bottom: 10px;
}

div.calendar.multi  {
    height: 100px;
    padding-top: 13px;
}

div.calendar.multi > span.end-date {
    font-size: 10px;
}

@media screen and (min-width : 1920px)
{
    div.header
    {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width : 1000px)
{
    div.content
    {
        column-count: 2;
    }
}

@media screen and (max-width : 700px)
{
    div.content
    {
        column-count: 1;
    }
    div.content>h1
    {
        column-span: none;
    }
}

@media screen and (max-width : 620px)
{
    html
    {
        letter-spacing: 0.03em;
        font-size: 16px;
    }

    div.content
    {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-left: 5px;
        margin-right: 5px;
    }

    div.content img.product-tile
    {
        max-width: 94%;
    }

    div.content>h1
    {
        margin-top: 10px;
    }

    div.header
    {
        background-size: auto 100% !important;
    }

    /* .content */
    /* { */
    /*     font-size: 14px; */
    /* } */
    /*  */
    /* .content a.important */
    /* { */
    /*     font-size: 16px; */
    /* } */

    div.calendar {
        left: -7%;
    }

    div.content img.left
    {
        max-width: 80%;
        transform: unset;
        float: none;
    }

    div.content img.right
    {
        max-width: 80%;
        transform: unset;
        float: none;
    }
}



input[type='checkbox'] {
    display: none;
}

.wrap-collabsible {
    margin: 1.2rem 0;
}

ul.pricing .wrap-collabsible {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.lbl-toggle {
    display: block;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    padding: 1rem;
    color: #dfd4be;
    background-color: #452c00;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
    color: #dfd4be;
}

.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}

.toggle:checked+.lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 350px;
}

.toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
    background-color: #57393908;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
}

.collapsible-content p {
    margin-bottom: 0;
}

ul.list-hierarchic {
    text-align: left;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

ul.list-hierarchic ul {
    padding-left: 17px;
}

ul.list-hierarchic li + li,
ul.list-hierarchic ul + li
{
    padding-top: 10px;
}

ul.list-hierarchic ul li + li
{
    padding-top: 0px;
}