/* ######################## */
/* # Hero                 # */
/* ######################## */
.herocontainer                                              {width:100%; min-height:560px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 17%),url('/Images/Header/Pattern-Purple.png'); background-attachment: fixed; background-size: contain cover; background-position: center; background-repeat: no-repeat; padding:0px; z-index:0; position:relative; display:flex; align-items: center; justify-content: center;}
.herologo                                                   {width:400px; }
.herocontainer .stamp                                       {z-index:1000; position:absolute; transform:translate(0, 0) rotate(-15deg) scale(20); opacity:0;transition:opacity 0.3s ease-in 1.5s, transform 0.3s ease-in 1.5s;}
.stampintoview                                              {opacity:1 !important; transform:translate(55px, 160px) rotate(-12deg) scale(0.7) !important; }

/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .herocontainer {background-attachment:scroll;}
  }
/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .herocontainer {background-attachment:scroll;}
}



/* ######################## */
/* # Videi Popup          # */
/* ######################## */
#videobox_generalinfo				                        {position: fixed; top:50px; height:calc(90vh - 50px); overflow-y:hidden; width:75%; max-width:500px; background-color:white; border:1px solid black; border-radius:10px; }
#videoboxtitle_generalinfo			                        {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#videoboxmessage_generalinfo                                {border:0px green solid; text-align:center;padding:10px 20px 20px 20px; }
#videoboxbuttons_generalinfo		                        {border-top:1px silver solid; height:60px; bottom:0; position:absolute; width:100%}
#videobox_generalinfo td			                        {text-align:center;}
#videobox_generalinfo .leftbutton	                        {border-right:1px solid silver; cursor:pointer; padding:20px;}
#videobox_generalinfo .rightbutton	                        {cursor:pointer; padding:20px;}
#videobox_generalinfo video 	                            {border-radius:10px; }

/* ######################## */
/* # Body                 # */
/* ######################## */
.body                                                       {padding:0px; display:flex; flex-direction: column; align-items: center; justify-content: flex-start;}
.cta                                                        {border:0px blue solid; text-align: center; padding:10px 10px 20px 30px;}
#categoryanchor                                             {visibility:hidden; border:1px red solid; height:50px; width:100px; position:absolute; transform: translateY(-80px);}
.categories                                                 {border:0px red solid;text-align: left; padding:20px 0px 20px 0px; width:1000px; margin-left:0; margin-right:0; position:relative}
.category                                                   {border:0px blue solid; display:flex; flex-direction: row; gap:20px; margin-bottom:150px}
.category.odd                                               {flex-direction: row-reverse;}
.category .image                                            {border:0px red solid; padding:0px; width:30%}
.category .text                                             {border:0px blue solid; padding:0 30px 0 30px; width:65%; text-align: center;}
.categoryimage                                              {width:100%; border:0px solid silver; border-radius: 10px; padding:0px;}
.category .text h3                                          {margin-top:0;}

.videoplayer                                                {border:0px blue solid; display:flex; flex-direction: row; gap:20px; margin-bottom:150px; margin-top:80px}
.videoplayer.odd                                            {flex-direction: row-reverse;}
.videoplayer .image                                         {border:0px red solid; padding:0px; width:60%}
.videoplayer .text                                          {border:0px blue solid; padding:0 30px 0 30px; width:65%; text-align: center;}
.videoplayer img                                            {width:100%; border:0px solid silver; border-radius: 10px; padding:0px;}
.videoplayer .text h3                                       {margin-top:0;}


.statscontainer                                             {background-color:white; width:100vw; display:flex; justify-content: center; margin:50px 0 50px 0;background-image:url('/Images/Backgrounds/Background-Confetti-colour.png'); background-size:300px}
.stats                                                      {width:1000px; border:0px blue solid; text-align: center; padding:50px 10px 50px 10px; display:flex; flex-wrap: wrap; flex-direction:row; align-items: center; justify-content:space-between; gap:50px;}
.stats .iconcontainer                                       {margin-bottom:10px}
.stats h1                                                   {font-size:3rem; font-weight: 300; margin:0; border:0px red solid; line-height: 3rem;}
.stats p                                                    {margin:0;  border:0px red solid; font-weight:400}
.stat                                                       {border:0px red solid; width:190px; background-color:white;}

/* ######################## */
/* # Tabs                 # */
/* ######################## */
.tabs                                                       {display:none}
.tabbody                                                    {display:flex; flex-direction: column; align-items: center;}
.tabbody .info                                              {display:block}
.tabbody .list                                              {display:none}

/* ######################## */
/* # Mobile               # */
/* ######################## */
@media only screen and (max-width: 1000px){ 
    .herocontainer                                          {width:100%; height:350px; min-height:350px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 20%),url('/Images/Header/Pattern-Purple.png'); background-attachment:scroll; background-size:cover ; background-position:center; background-repeat: no-repeat; padding:0px; z-index:0; position:relative; display:flex; align-items: center; justify-content: center;}
    .herologo                                               {height:250px; width:auto; }

    /* ######################## */
    /* # Body                 # */
    /* ######################## */    
    .cta                                                    {border:0px blue solid; text-align: center; padding:10px 20px 20px 20px}
    .cta h1                                                 {border:0px blue solid; margin-top:25px}
    #categoryanchor                                         {visibility:; border:1px red solid; height:50px; width:100px; position:absolute; transform: translateY(-70px);}
    .categories                                             {border:0px red solid;text-align: left; padding:0px 20px 20px 20px; width:100%}
    .categories h2                                          {text-align: center;}
    .category                                               {border:0px blue solid; display:flex; flex-direction: column;margin-bottom:50px; gap:10px;text-align: center;display:flex; align-items: center; justify-content: center;}
    .category.odd                                           {flex-direction: column}
    .category .image                                        {border:0px red solid; padding:0px; width:100%;max-width:300px;}
    .category .text                                         {border:0px red solid; padding:0px 0 0px 0; width:100%; text-align: center;}
    .categoryimage                                          {width:100%; max-width:500px; border:0px solid silver; border-radius: 10px;}
    .category .text h3                                      {margin-top:10px;}
    .category .image h3                                     {display:none;margin-bottom:0;}

    .videoplayer                                            {border:0px blue solid; display:flex; flex-direction: column;margin-bottom:50px; gap:10px;text-align: center;display:flex; align-items: center; justify-content: center;margin-top:30px}
    
    .videoplayer.odd                                        {flex-direction: column}
    .videoplayer .image                                     {border:0px red solid; padding:0px; width:100%;max-width:500px;}
    .videoplayer .text                                      {border:0px red solid; padding:0px 0 0px 0; width:100%; text-align: center;}
    .videoplayer img                                        {width:100%; max-width:500px; border:0px solid silver; border-radius: 10px;}
    .videoplayer .text h3                                   {margin-top:10px;}
    .videoplayer .image h3                                  {display:none;margin-bottom:0;}


    .stats                                                  {text-align:center; justify-content:space-evenly; gap:30px; padding:80px 10px 20px 10px;}
    .stats h1                                               {font-size:2rem; font-weight: 300; line-height: 2rem;}
    .stats p                                                {}
    .stat                                                   {width:100px; padding-bottom:30px}
 
    .stampintoview                                          {opacity:1 !important; transform:translate(45px,100px) rotate(-12deg) scale(0.5) !important; }

    #videobox_generalinfo				                    {width:90%;}

}