/* ---------------------------------------------------------------------------------------------------------------------- */
/* Style Sheet                                                                                                            */
/*                                                                                                                        */
/* CSS Styles for the Site created by Cream Projects, Site by Cream Web System                                            */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */

:root {
    --main-color-1: #cccc00;
    --main-color-2: #000000;
    --main-color-3: #ffffff;
    --main-color-4: #ff0000;
    --main-color-5: #f2f2f2;
    --main-font: verdana;
    --main-margin: 20px;
}

html, body		{font-family: var(--main-font), verdana, sans-serif; font-size: 12px; background: white; color: black; text-align: left; margin: auto; padding: 0; overflow: auto; }

/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* DIV definitions                                                                                                        */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */

#wrapper		{max-width: 1320px; height: auto; margin: auto; line-height: 150%;}
#topwrapper		{ }

@media screen and (min-width: 801px) {
#top-small		{display: none;}
#top-large		{float: left; display: block; justify-content: left;  background-color: white;} }
@media screen and (max-width: 800px) {
#top-small		{float: left; display: block; margin: auto; background-color: white;}
#top-large		{display: none;} }

#header			{display: block; width:100%; margin: auto;}
#postheader		{display: block; width:100%; margin: auto;}
#prefooter		{display: block; width:100%; margin: auto;}
#footer			{color: var(--main-color-3); background-color: var(--main-color-1); padding: 10px 10px; text-align: center; font-family: var(--main-font); font-size: 16px; font-weight: 700; border-top: 1px solid white; border-bottom: 1px solid white; }
#postfooter		{max-width: 1320px; margin: auto; text-align: right; color: #888888; background-color: transparant; font-family: var(--main-font); font-size: 10px; font-weight: normal; }

@media screen and (min-width: 801px) {
#footer-small		{display: none;}
#footer-large		{display: block; width:100%; margin: auto; } }
@media screen and (max-width: 800px) {
#footer-small		{display: block; width:100%; margin: auto; }
#footer-large		{display: none;} }

#menutop		{height: 100px; text-align: right; border-bottom: 2px solid var(--main-color-1); }
#menubottom		{text-align: right; border-top: 2px solid var(--main-color-1); }
#content		{height: auto; color: var(--main-color-2); background-color: var(--main-color-3); padding: 0px; padding-left: 0px; border-top: 0px solid #B7B7B7; font-family: var(--main-font); font-size: 16px; font-weight: 400; text-align: left; line-height: 150%;}
.contenttext		{background-color: var(--main-color-3); margin-left: var(--main-margin); margin-right: var(--main-margin);}

#testmode		{ border:1px solid #CCCCCC; padding-left:5px; margin-top:5px; }

#footer a, #footer a:visited, #footer a:link {font-family: var(--main-font); font-size: 16px; font-weight: 700; color: var(--main-color-3); text-decoration: none;}
#footer a:active, #footer a:hover, #footer a:visited.active {font-family: var(--main-font); font-size: 16px; font-weight: 700; color: var(--main-color-3); text-decoration: underline;}

#postfooter a, #postfooter a:visited, #postfooter a:link {font-family: var(--main-font); font-size: 10px; font-weight: bold; color: #888888; text-decoration: none;}
#postfooter a:active, #postfooter a:hover, #postfooter a:visited.active {font-family: var(--main-font); font-size: 10px; font-weight: bold; color: #888888; text-decoration: underline;}

#div004left       {float:left;  width: 289px; margin-left: var(--main-margin); padding-right: var(--main-margin); background-color: black; border-right: 1px solid #333333;}
#div004mid        {float:left;  width: 289px; margin-left: var(--main-margin); padding-right: var(--main-margin); background-color: black; border-right: 1px solid #333333;}
#div004right      {float:right; width: 289px; margin-left: var(--main-margin); margin-right:  var(--main-margin); background-color: black; }
#div004left hr, #div004mid hr, #div004right hr  {background-color: #333333; color: #333333; width: 100%; height: 1px; border: none; }

#div101left       {float:left; text-align: left; font-family: var(--main-font); font-size: 16px; border-right: 1px solid #333333; padding-left: var(--main-margin); padding-right: var(--main-margin);}
#div101right      {float:right; text-align: left; font-family: var(--main-font); font-size: 16px; margin-left: 0px; padding-right: var(--main-margin); padding: 0px;}

#div400           {background-color: black; margin-left:  0px; margin-right:  0px;}

#div101left a, #div101left a:visited, #div101left a:link
                  {font-family: var(--main-font); font-size: 16px; font-weight: bold; color: var(--main-color-1); border-bottom: 3px solid #FFFFFF; text-decoration: none;}
#div101left a:active, #div101left a:hover, #div101left a:visited.active
                  {font-family: var(--main-font); font-size: 16px; font-weight: bold; color: var(--main-color-1); border-bottom: 3px solid #B7B7B7; text-decoration: none;}

img.galleryphoto	{border: 2px solid #F2F2F2; }
.photocontainer		{display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fit, 140px); grid-template-rows: repeat(auto-fit, auto-fit); justify-content: center; }
.photogrid		{background-color: black; margin-left: 10px; margin-right: 10px;}
.photobutton		{min-width: 50px; margin-top: 3px; background-color: white; color: black; border: 2px solid var(--main-color-3); padding: 6px 3px; text-align: center; text-decoration: none; display: inline-block;}
.photobutton:hover	{color: white; background-color: var(--main-color-1); border: 2px solid var(--main-color-1); }

/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* HTML definitions                                                                                                       */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */

span.title0       {font-family: var(--main-font); font-size: 18px; background-color: transparant; color: var(--main-color-1);   font-weight: 700; text-decoration: none}
span.title1       {font-family: var(--main-font); font-size: 18px; background-color: transparant; color: var(--main-color-1);   font-weight: 700; font-style:normal;}
span.title2       {font-family: var(--main-font); font-size: 18px; background-color: transparant; color: var(--main-color-1);   font-weight: 700; font-style:italic;}
span.title3       {font-family: var(--main-font); font-size: 16px; background-color: transparant; color: var(--main-color-1);   font-weight: 700; font-style:normal;}
span.title4       {font-family: var(--main-font); font-size: 12px; background-color: transparant; color: #B7B7B7;   font-weight: 400; font-style:normal;}

span.normal       {font-family: var(--main-font); font-size: 12px; background-color: transparant; color: #FFFFFF;   font-weight: 400}
span.ticket       {font-family: var(--main-font); font-size: 12px; background-color: transparant; color: var(--main-color-1);   font-weight: 700}
span.error        {font-family: var(--main-font); font-size: 18px; background-color: transparant; color: red;       font-weight: 700}
table.workshop    {font-family: var(--main-font); font-size: 11px; background-color: white;       color: black;     font-weight: 400; text-align:center;
                   border-spacing: 0; border: 3px solid #B7B7B7; border-collapse:collapse;}
table.workshop td {padding: 8px; vertical-align: top; border-top: 1px solid #B7B7B7; border-bottom: 1px solid #B7B7B7;}
table.workshop th {padding: 8px; vertical-align: top; font-size: 14px; font-weight: 700; border: 1px solid white; }
table.workitem    {width: 100%; text-align:center; border-spacing: 0; border: 0px; }
table.workitem td {width: 100%; height: 40px; padding: 0px; vertical-align: top; border: 0px; }

hr.order          {background-color: #333333; color: #333333; clear: both; float: left; width: 100%; height: 1px; border: none; }
hr.homepage       {border: 1px solid var(--main-color-1); }
hr.submenupage    {border: 1px solid #333333; }

a, a:visited, a:link {font-weight: bold; color: var(--main-color-1); text-decoration: none;}
a:active, a:hover, a:visited.active {font-weight: bold; color: var(--main-color-1); text-decoration: underline;}

ul                {padding:0px; margin:var(--main-margin); }
ul.normal         {list-style-type: square}

/* ---------------------------------------------------------------------------------------------------------------------- */
/*                                                                                                                        */
/* FORM definitions                                                                                                       */
/*                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------- */

form.contactform       {font-family: var(--main-font); font-size: 16px; font-weight: 400; background-color: #f2f2f2; color: var(--main-color-2); border-radius: 0px; padding: var(--main-margin); }
table.contactform {border=0 cellpadding=0 cellspacing=0 max-width=660;}

#extrafield { display:none; }
input[type=text], select, textarea { font-family: var(--main-font); font-size: 16px; font-weight: 700; width: 100%; color: black; background-color: #d2d2d2; padding: 8px; border: 2px solid white; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; }
input[type=submit], .actionbutton { font-family: var(--main-font); font-size: 16px; font-weight: 700; color: white; background-color: var(--main-color-1); padding: 12px 24px; border: 2px solid var(--main-color-3); border-radius: 4px; cursor: pointer; }
input[type=submit]:hover, .actionbutton:hover { background-color: #33CC33; }

div.guestbookitem {font-family: var(--main-font); font-size: 16px; font-weight: 400; background-color: #2f2f2f; color: var(--main-color-2); border-radius: 5px; padding: var(--main-margin); }
hr.guestbook {background-color: #333333; color: #333333; width: 100%; height: 1px; border: none; }
span.guestbookdate {font-size: 12px;}
span.inputerror {font-family: var(--main-font); font-weight: 700; background-color: var(--main-color-1); color: var(--main-color-2); width: 100%; padding: 8px 16px; border: 2px solid white; border-radius: 4px; box-sizing: border-box;}

/* ---------------------------------------------------------------------------------------------------------------------- */
/* AGENDA VIEW */
a.agedit            {color: black; background-color: transparant; font-family: var(--main-font); font-size: 10px; font-weight: 400}
td.monthdaytit      {border:solid 1px black;       width:115px; text-align:center; background-color:white; font-family: var(--main-font); font-size: 12px; color: black; font-weight: 400}
td.monthdaynot      {border:solid 1px transparant; width:115px; height:60px; vertical-align: top; background-color: transparant; }
td.monthdaynow      {border:solid 1px white;       width:115px; height:60px; vertical-align: top; background-color:#FFFFFF; font-family: var(--main-font); font-size: 12px; color: var(--main-color-1);  font-weight: 700}
td.monthdayok       {border:solid 1px white;       width:115px; height:60px; vertical-align: top; background-color:#F2F2F2; font-family: var(--main-font); font-size: 12px; color: var(--main-color-1);  font-weight: 700}

/* ---------------------------------------------------------------------------------------------------------------------- */

.home-large { display: block; }
.home-small { display: none; }
.home-title { display: none; }
@media screen and (max-width: 800px) {
.home-large { display: none; }
.home-small { display: block; }
.home-title { display: block; color: var(--main-color-2); background-color: var(--main-color-1); font-family: var(--main-font); font-size: var(--main-margin); font-weight: 700; border-top: 1px solid white; border-bottom: 1px solid white; padding: 15px 10px; }
}

.column001 { float: left; width: 100%; padding: 0px var(--main-margin); }
.column002 { float: left; width: 50%; padding: 0px var(--main-margin); }
@media screen and (max-width: 800px) {
.column002 { width: 100%; height: auto; }
}
.column003 { float: left; width: 33%; padding: 0px var(--main-margin); }
@media screen and (max-width: 800px) {
.column003 { width: 100%; height: auto; }
}
.column004 { float: left; width: 25%; padding: 0px var(--main-margin); }
@media screen and (max-width: 800px) {
.column004 { float: left; width: 50%; padding: 0px var(--main-margin); }
}
@media screen and (max-width: 500px) {
.column004 { width: 100%; height: auto; }
}
.column022 { display: flex; flex-wrap: nowrap; width=100%; }
.column022>div { min-width: 20%; padding: 0px var(--main-margin); }
@media screen and (max-width: 800px) {
.column022 { display: flex; flex-wrap: wrap;  }
}
.bottom022 { height: 1px; background-color: #333333;}

.subpage { float: left; }
@media screen and (max-width: 500px) {
.subpage { width: 100%; height: auto; }
}
@media screen and (min-width: 401px) {
.home-notverysmall { display: block; }
.subpage-col-small        {display: none;}
.subpage-col-large        {display: block;} }
@media screen and (max-width: 400px) {
.home-notverysmall { display: none; }
.subpage-col-small        {display: block;}
.subpage-col-large        {display: none;} }

.Video16-9 { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.Video16-9 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* RWD MENUS ------------------------------------------------------------------------------------------------------------ */

* { box-sizing: border-box; }

.navbar { overflow: hidden; background-color: var(--main-color-3); font-family: var(--main-font); font-size: 20px; font-weight: 700; }
.navbar a { float: left; font-size: 20px; color: var(--main-color-2); text-align: center; padding: 15px 10px; text-decoration: none; border-left: 1px solid var(--main-color-3); border-right: 1px solid var(--main-color-3);}
.navbar a:hover { color: var(--main-color-1); background-color: var(--main-color-3); font-weight: 700; border-left: 1px solid var(--main-color-2); border-right: 1px solid var(--main-color-2);}
.navbar-right { float: right; }
.navbar-large { display: block; }
.navbar-small { display: none; }
.navbar-side { display: none; }
.menu-active { font-size: 20px; color: var(--main-color-1); background-color: transparant; font-weight: 700; }

@media screen and (max-width: 800px) {
.navbar-large { display: none; }
.navbar-small { display: block; }
.navbar-side { display: block; }
}

.sidenav { height: auto; width: 0; position: absolute; z-index: 1; top: 1; right: 0px; background-color: var(--main-color-5); text-align: right; overflow-x: hidden; transition: 0.5s; padding-top: 20px; line-height: 100%; border: 2px solid var(--main-color-1); }
.sidenav a { text-decoration: none; font-size: 20px; color: var(--main-color-2); display: block; margin-left: var(--main-margin); margin-right: var(--main-margin); padding: 15px 10px; }
.sidenav a:hover { color: var(--main-color-3); background-color: var(--main-color-1); }

/* SCROLL TOP ----------------------------------------------------------------------------------------------------------- */

#scrollTop { display: none; position: fixed; bottom: var(--main-margin); right: var(--main-margin); z-index: 99; font-size: 18px; border: none; outline: none; background-color: white; color: black; cursor: pointer; padding: 15px; border: 4px solid black; border-radius: 4px; }
#scrollTop:hover { background-color: var(--main-color-1); }