/* ######################## */
/* # Fonts                #*/
/* ######################## */
@import url("https://use.typekit.net/qwu8prf.css");
/*Usage:
font-family: "roc-grotesk", sans-serif;
font-family: "roc-grotesk-compressed"
font-family: "roc-grotesk-condensed"
font-family: "roc-grotesk-wide"
font-family: "roc-grotesk-extrawide", sans-serif;
font-family: "proxima-nova", sans-serif;
font-family: "navigo", sans-serif;
font-family: "mencken-std", sans-serif;
font-family: "figtree", sans-serif;
*/

@font-face {
    font-family: "Assistant";
    src: url("/_Fonts/Assistant/Assistant-VariableFont_wght.ttf") format("opentype");
}

@font-face {
    font-family: "CosmoballScript";
    src: url('/_Fonts/CosmoballScript/font.woff2') format('woff2'), url('/_Fonts/CosmoballScript/font.woff') format('woff');
}

@font-face {
    font-family: "FuzzyBubbles";
    src: url('/_Fonts/Fuzzy_Bubbles/FuzzyBubbles-Regular.ttf') format('opentype');
}

/* ######################## */
/* # Root                 # */
/* ######################## */
:root {
    --lightgrey: #ececec;        
    --backgroundgrey: #f7f7f7;        
    --lightpink:#fce2ed;
    --lightblue:#dbecfe;
    --darkblue:#1e3df3;
    --darkpink:#ffadca;
    --white: white;
    --yellow: #fefa8e;
    --green: #d9ffdd;    
}

/* ######################## */
/* # Page Level CSS       # */
/* ######################## */
*                                                   {box-sizing: border-box;}
html                                                {scroll-behavior: smooth;}
html body                                           {border:0; margin:0; font-family: "figtree", sans-serif; font-weight:400; font-style: normal; font-size:1rem; letter-spacing: 0.06rem; background-color: rgba(238, 232, 206, 0.85);background: linear-gradient(0deg, rgba(238, 232, 206, 0.85), rgba(238, 232, 206, 0.85)), url('/Images/Background/Birthday_Party_General.png?1=1'); background-size:600px; }
body                                                {overflow-x: hidden; width:100vw; min-height:100vh; opacity: 0;transition: opacity 1.5s;}
.disablescroll                                      {height:400px; overflow-y:hidden; background-color:green}
h1                                                  {font-size:1.9rem; font-weight: 500;font-family: "navigo", sans-serif;}
h2                                                  {font-size:1.4rem; font-weight: 400;font-family: "navigo", sans-serif;}
h3                                                  {font-size:1.2rem; font-weight: 300;font-family: "navigo", sans-serif;}
p                                                   {font-size:1rem; margin-top:20px; margin-bottom:20px}
a                                                   {text-decoration:none;}
a:hover                                             {text-decoration:none;}
a:visited                                           {color:unset}
a:link                                              {color:unset}

/* ######################## */
/* # Animation            # */
/* ######################## */
.animatein                                          {transform: translatey(100px); opacity:0; transition: transform 0.7s ease-in-out 500ms, opacity 0.5s ease-in 500ms}
.animateinright                                     {transform: translatex(-50px); opacity:0; transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in 0s}
.animateinleft                                      {transform: translatex(50px); opacity:0; transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in 0s}
.animateinpop                                       {-webkit-transform:scale(0.5); transform: scale(0.5); opacity:0; transition: transform 0.25s ease-in-out 500ms, opacity 0.25s ease-in 500ms}

/* ######################## */
/* # Buttons & Links      # */
/* ######################## */
.button                                             {border:1px black solid; display: inline-block; padding:10px 20px 10px 20px; cursor: pointer; border-radius: 5px;}
.button.solid.dark                                  {background-color:black; color:white;}
.button.solid.dark:hover                            {background-color:white; color:black;}
.button.transparent.dark                            {background-color:transparent; color:black; }
.button.transparent.dark:hover                      {background-color:black; color:white; }
.button.solid.light                                 {background-color:white; color:black;}



/* ######################## */
/* # UI Styles            # */
/* ######################## */
.tabs .icon                                        {height:35px; width:30px; cursor: pointer; overflow:hidden;padding-bottom:5px; box-sizing: border-box; border-bottom:2px solid transparent;}
.tabs .icon.selected                               {filter: drop-shadow(0px 2000px 0 blue); transform: translateY(-2000px); border-bottom:2px solid blue;}

.footer .icon                                      {height:35px; width:30px; transform: scale(1); opacity:1; transition: transform .15s ease, opacity .15s ease; cursor: pointer; overflow:hidden;padding-top:5px; box-sizing: border-box;border-top:2px solid transparent;}
.footer .icon.selected                             {border-top:2px solid #eee8ce;}

.mobilemenupopout .icon                            {height:25px; width:25px;}

.icon:hover                                         {scale:1.03}
.iconsurround                                       {padding-bottom:5px}
.iconsurround.selected                              {border-bottom:2px solid black}
.statsicon                                          {width:50px; height:50px; opacity:0.7}

/* ######################## */
/* # Fields               # */
/* ######################## */
select                                                          {padding:10px; border-radius: 5px; font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none;background-image: url('/Images/Background/Dropdown-Arrow.png');background-repeat: no-repeat;background-position: right;background-size: 20px; color:black}
input                                                           {border-radius: 5px; font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none; color:black; padding:7px;}
textarea                                                        {font-family: proxima-nova, sans-serif; border-radius: 5px; font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none; color:black; padding:7px}
input[type="date"]                                              {font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none;background-image: url('/Images/Background/Dropdown-Arrow.png');background-repeat: no-repeat;background-position: right;background-size: 20px; color:black}
input[type="date"]::-webkit-inner-spin-button                   {opacity:0;}
input[type="date"]::-webkit-calendar-picker-indicator           {opacity:0}
input[type="datetime-local"]                                    {font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none;background-image: url('/Images/Background/Dropdown-Arrow.png');background-repeat: no-repeat;background-position: right;background-size: 20px; color:black}
input[type="datetime-local"]::-webkit-inner-spin-button         {opacity:0;}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {opacity:0}
input[type="time"]                                              {font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none;background-image: url('/Images/Background/Dropdown-Arrow.png');background-repeat: no-repeat;background-position: right;background-size: 20px; color:black}
input[type="time"]::-webkit-inner-spin-button                   {opacity:0;}
input[type="time"]::-webkit-calendar-picker-indicator           {opacity:0}
.onoffswitchhoriz                                               {height:30px; width:50px; cursor:pointer;}

/* ######################## */
/* # Navigation           # */
/* ######################## */
.icon.hamburger                                     {display:block;}
.icon.close                                         {display:none;}
.navicon                                            {opacity:1; border-bottom:2px solid white;}
.navicon.selected                                   {opacity:1; border-bottom:2px solid black}
.mobilemenupopout                                   {display:block; position:fixed; width:100%; height:100%; top:0; left:0; border:1px white solid; z-index:3; background-color:rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter:blur(5px); overflow-x:hidden; transition: 0.25s ease-in-out; padding: 105px 10px 10px 10px;}
.mobilemenupopout .navoption                        {height:50px; border-bottom:1px var(--lightgrey) solid; border-top:0px white solid; display:flex; align-items: center;}
.mobilemenupopout .navoption p                      {border:0px red solid; margin-left:10px;}
.mobilemenupopout .navoption:first-child            {border-top:0px; }
.mobilemenupopout .navoption:last-child             {border-bottom:0px; }
.mobilemenupopout .bottom                           {bottom:70px; position:absolute; left:10px; right:10px;}

/* ######################## */
/* # Header               # */
/* ######################## */
.welcome                                            {height:38px; display:flex; flex-wrap: nowrap; align-items: center; justify-content: center;border-bottom:0px solid pink;position:relative; z-index:5; background-color:var(--white); background: url('/Images/Background/Gold.png?1=1'); background-size:100%}
.welcome .text                                      {color:white; border:0px red solid; width:100%; text-align: center;}
.welcome .left                                      {color:white; border:0px red solid; width:30px; margin-left:10px;}
.welcome .right                                     {color:white; border:0px red solid; width:30px; margin-right:10px;}
.welcome .left img                                  {width:20px; cursor:pointer;}
.header                                             {position:sticky; top:0;z-index:5}
.header .container                                  {height:85px; background: url('/Images/Background/Gold.png?1=1'); background-size:100%}
.header .container .desktopcontent                  {border:0px red solid; width:1000px; height:100%; margin-left:auto; margin-right:auto; display:flex; align-items: center; justify-content:space-between;}                
.header .container .desktopcontent .contentleft     {width:75%;border:0px red solid; display:flex; align-items: center; justify-content:flex-start; padding: 0 0 0 0px;}
.header .container .desktopcontent .contentright    {width:25%;border:0px red solid; display:flex; align-items: center; justify-content:flex-end; padding: 0 20px 0 0;}
.header .container .desktopcontent .icon            {border:0px solid silver; width:20px; height:20px; margin: 0 0 0 20px;}
.header .container .desktopcontent ul               {list-style-type: none; margin: 0;padding: 0;}
.header .container .desktopcontent li               {float:left; margin: 0 0 0 30px; border:0px solid green}
.header .container .mobilecontent                   {display:none;}
.mobilemenupopout                                   {display:;}

.header .container                                  {height:65px;background-color:var(--white); border-bottom:1px solid var(--lightgrey); border:0px solid red;}
.header .container .desktopcontent                  {display:none;}
.header .container .mobilecontent                   {width:100%; height:100%; display:flex; align-items: center; justify-content:space-between; padding:0 0px 0 0px;}
.header .container .mobilecontent .menuiconcontainer{border:0px red solid; margin:30px 0 0 0; width:100%; height:100%; padding-left:20px}
.header .container .mobilecontent .logocontainer    {border:0px red solid; margin:0 20px 0 20px; width:auto; display:flex; align-items: center; justify-content:center; height:100%}
.header .container .mobilecontent .iconcontainer    {border:0px red solid; margin:30px 0px 0 0; width:100%; height:100%;text-align: right; padding-right:20px}
.header .container .mobilecontent .logo             {height:50px; width:160px;}
.header .container .mobilecontent .icon             {border:0px solid silver; width:25px; height:25px; margin: 0 0 0 0;}


/* ######################## */
/* # Hero                 # */
/* ######################## */
.herocontainer h1                                   {color:white; font-size:2.5rem;}

/* ######################## */
/* # Tabs                 # */
/* ######################## */
#tabanchor                                          {visibility:hidden; border:0px red solid; height:50px; width:100px; position:absolute; transform: translateY(-80px);}
.tabs                                               {position:sticky; top:84px; width:100%; left:0; right:0; z-index: 1; height:50px; background-color:white; border-top:1px var(--lightgrey) solid; border-bottom:1px var(--lightgrey) solid;display:flex; align-items: center; justify-content:space-evenly; padding:0px}

/* ######################## */
/* # Lists                # */
/* ######################## */
.listitemimage                                      {position:sticky; top:84px; width:100%; left:0; right:0; z-index: 2; height:50px; background-color:white; border-top:1px var(--lightgrey) solid; border-bottom:1px var(--lightgrey) solid;display:flex; align-items: center; justify-content:space-evenly; padding:0px}

.listcontainer                                      {width:1000px;border:0px red solid; display:flex; align-items: flex-start; justify-content:space-around; flex-wrap: wrap; padding:70px 0 20px 0; gap:20px}
.listitem                                           {width:230px;  border:0px red solid;}
.listitem .image                                    {border:0px red solid; padding:0px; width:230px; height:230px;border:0px solid silver; border-radius: 10px; padding:0px}
.listitem h4                                        {margin:10px 0 20px 5px; font-weight: 400; font-size:0.9rem;}

/* ######################## */
/* # Footer               # */
/* ######################## */
.footer                                             {position:fixed; bottom:0; left:0; right:0; z-index: 15; height:50px; background-color:var(--white);  border-top:0px var(--darkblue) solid; display:flex; align-items: center; justify-content:space-between; padding:0px 30px 0 30px;background: url('/Images/Background/Gold.png?1=1'); background-size:100%}
.footer .iconcontainer                              {height:40px; width:25px; display:flex; flex-direction: column; align-items: center;}


/* ######################## */
/* # Page Footer          # */
/* ######################## */

.pagefootercontainer                                {height:auto;display:flex; flex-wrap: nowrap; justify-content: space-evenly; gap:20px; border-top: 1px solid var(--lightgrey); margin-bottom:50px;}
.pagefootercontainer                                {height:300px;width:1000px; background-color: white; display:flex; padding:30px 0 30px 0;}
.pagefootercontainer h1                             {font-size:1rem; margin:0 0 5px 0; font-weight: 700;}
.pagefootercontainer p                              {margin:0px 0 15px 0; }
.pagefootercontainer ul                             {list-style: none; margin:0 0 15px 0; padding:0}
.pagefootercontainer li                             {line-height:1.5rem;}
.pagefootercontainer select                         {padding:5px;}
.pagefootercontainer .icon                          {width:40px; margin-right:10px}
.pagefootercontainer .section1                      {border:0px red solid; width:30%;}
.pagefootercontainer .section2                      {border:0px red solid; width:20%;}
.pagefootercontainer .section3                      {border:0px red solid; width:25%;}
.pagefootercontainer .section4                      {border:0px red solid; width:25%;}
.pagefootercontainer .button                        {width:150px; border:0px solid red; padding:0; margin-bottom:10px}

/* ######################## */
/* # Alert/Popup          # */
/* ######################## */
#alertbg					                        {font-size:15px; position: fixed;left: 0px;top: 0px; z-index:1000; background-color:rgba(0, 0, 0, 0.7); width:100%; height:100%; border:0px red solid; text-align:center; display:flex; align-items:center; justify-content: center;}
#alertbox_yn				                        {position: fixed;left: auto; top:50px; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
#alertboxtitle_yn			                        {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#alertboxmessage_yn			                        {border:0px green solid; text-align:center;padding:10px 20px 20px 20px;}
#alertboxbuttons_yn			                        {border-top:1px silver solid;}
#alertbox_yn td				                        {text-align:center;}
#alertbox_yn .leftbutton	                        {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_yn .rightbutton	                        {cursor:pointer; padding:20px;}

#alertbox_ok        				                {position: fixed;left: auto; top:50px; max-height:calc(90vh - 50px); overflow-y:auto; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
#alertboxtitle_ok       			                {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#alertboxmessage_ok                                 {border:0px green solid; text-align:center;padding:10px 20px 20px 20px; }
#alertboxbuttons_ok         		                {border-top:1px silver solid;}
#alertbox_ok td         			                {text-align:center;}
#alertbox_ok .leftbutton        	                {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_ok .rightbutton	                        {cursor:pointer; padding:20px;}

#alertbox_ync				                        {position: fixed;left: auto; top:50px; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
#alertboxtitle_ync			                        {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#alertboxmessage_ync		                        {border:0px green solid; text-align:center;padding:10px 20px 20px 20px;}
#alertboxbuttons_ync		                        {border-top:1px silver solid;}
#alertbox_ync td			                        {text-align:center;}
#alertbox_ync .leftbutton	                        {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_ync .midbutton	                        {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_ync .rightbutton	                        {cursor:pointer; padding:20px;}
#alertboxmessage_generalinfo a                      {text-decoration:underline;}

::-webkit-scrollbar {width: 5px; height:2px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 10px;}
::-webkit-scrollbar-thumb {background: lightgrey;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #5e8cae;}

@media only screen and (max-width: 1000px){ 
    /* ######################## */
    /* # Header               # */
    /* ######################## */
    .header .container                                      {height:65px;}        
    .header .container .desktopcontent                      {display:none;}
    .header .container .mobilecontent                       {width:100%; height:100%; display:flex; align-items: center; justify-content:space-between; padding:0 0px 0 0px;}
    .header .container .mobilecontent .menuiconcontainer    {}
    .header .container .mobilecontent .logocontainer        {}
    .header .container .mobilecontent .iconcontainer        {}
    .header .container .mobilecontent .logo                 {width:160px; height:50px;}
    .header .container .mobilecontent .icon                 {}



    .mobilemenupopout                                       {display:block; position:fixed; width:100%; height:100%; top:0; left:0; border:1px white solid; z-index:3; background-color:rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter:blur(5px); overflow-x:hidden; transition: 0.25s ease-in-out; padding: 105px 10px 10px 10px;}
    .mobilemenupopout .navoption                            {height:50px; border-bottom:1px var(--lightgrey) solid; border-top:0px white solid; display:flex; align-items: center;}
    .mobilemenupopout .navoption p                          {border:0px red solid; margin-left:10px;}
    .mobilemenupopout .navoption:first-child                {border-top:0px; }
    .mobilemenupopout .navoption:last-child                 {border-bottom:0px; }
    .mobilemenupopout .bottom                               {bottom:70px; position:absolute; left:10px; right:10px;}
    
    .tabs                                                   {position:sticky; top:64px;}
    #tabanchor                                              {transform: translateY(-60px);}

    .listcontainer                                          {width:100%; padding:50px 20px 20px 20px;}
    .listitem                                               {width:150px;}
    .listitem .image                                        {width:150px; height:150px;}

    .pagefootercontainer                                    {flex-wrap: wrap; gap:20px; padding:50px; width:100%; margin:0 0px 0 0px; }
    .pagefootercontainer                                    {height:300px;width:100%; background-color: white; display:flex; padding:30px 0 30px 0;}
    .pagefootercontainer .section1                          {width:calc(50% - 30px); border:0px red solid;}
    .pagefootercontainer .section2                          {width:calc(50% - 30px); border:0px red solid;}
    .pagefootercontainer .section3                          {width:calc(50% - 30px); border:0px red solid;}
    .pagefootercontainer .section4                          {width:calc(50% - 30px); border:0px red solid;}

    .onoffswitchhoriz                                       {height:35px; width:60px; cursor:pointer;}

}