/* ######################## */
/* # Hero                 # */
/* ######################## */
.herocontainer                                              {width:100%; min-height:560px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 20%),url('/Images/Header/Pattern-Orange.png'); background-attachment: fixed; background-size: contain cover; background-position: center; background-repeat: no-repeat; padding:0px; z-index:2; position:relative; display:flex; align-items: center; justify-content: center;}
.herologo                                                   {width:400px; }
.herocontainer .stamp                                       {z-index:1000; position:absolute; visibility:hidden; transform:translate(0, 0) rotate(0deg) scale(20); opacity:0; transition:opacity 0.3s ease-in 1.5s, transform 0.3s ease-in 1.5s;}
.stampintoview                                              {visibility:visible !important; opacity:1 !important; transform:translate(20px, 165px) rotate(-10deg) scale(0.67) !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;}
}

/* ######################## */
/* # 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(-150px);}
.categories                                                 {border:0px red solid;text-align: left; padding:30px 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:0 px;}
.category .iconcontainer                                    {display:flex; flex-wrap: wrap; width:100%; border:0px red solid; justify-content: center;}
.category .categoryicon                                     {width:50px;}
.category .text h3                                          {margin-top:0;}

/* ######################## */
/* # Stats                # */
/* ######################## */
.statscontainer                                             {background-color:white; width:100vw; display:flex; justify-content: center; margin:50px 0 50px 0;background-image:url('/Images/Backgrounds/Background-Confetti-Gold.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-evenly; 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;}

/* ######################## */
/* # Monthly Promo        # */
/* ######################## */
.promocontainer                                             {border:0px red solid; width:1000px; display:flex; flex-direction: row; justify-content: space-between;}
.promocontainer .promotextcontainer                         {border:0px solid green; width:400px; min-height:200px; text-align: center;}
.promocontainer .promoimagecontainer                        {border:0px solid blue; width:500px; min-height:200px; position:relative}
.promocontainer .promoimage                                 {width:100%;}
.promocontainer .promobadgeimage                            {position:absolute; bottom:0; right:0; width:150px;}
.promocontainer .promobadge                                 {width:150px;}

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

/* ######################## */
/* # Lists                # */
/* ######################## */
.listitem h4                                                {display:none; text-align:center; font-size:1.2rem;}
.listitem.creative                                          {display:none;}
.listitem.competition                                       {display:none;}
.listitem.target                                            {display:none;}

.loadingicon                                                {height:60px;}

.challengelistsubheading                                    {text-align: center; border:0px red solid; margin-bottom:20px;}

/* ######################## */
/* # Popups               # */
/* ######################## */
.popup                                                      {width:1000px; background-color:white; position:fixed; bottom:0; margin-bottom:0px; border-radius: 20px 20px 0 0; z-index:20; box-shadow: 0px 0px 10px 1px #b4b3b3; transition: transform 0.5s ease-in-out 0s; overflow-y:hidden; transform:translateY(110%)}
.popup .header                                              {display:flex; align-items: center; justify-content: space-between;; border-bottom:1px solid var(--lightgrey); background-color:transparent; padding:10px 15px 10px 15px; margin:0;}
.popup .header h2                                           {padding:0; margin:0;}
.popup .header .icon                                        {width:20px; height:20px; cursor:pointer}                
.popup .content                                             {padding:20px;}
.pupup .content .popupList                                  {overflow-y:scroll}
.popupbackground                                            {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0, 0, 0, 0.481); z-index:16; display:none; opacity:0; transition: opacity 0.5s}
.popup .searchfield                                         {padding:10px; border-radius: 10px; width:100%; border:1px solid grey}
.popup .infoicon                                            {width:15px; position:absolute; right:0px; cursor:pointer;}
.popup .actionbuttons                                       {display:flex; padding:0 20px 20px 20px; justify-content: space-between; gap:20px}

/* ######################## */
/* Challenge Details Popup# */
/* ######################## */
.challengedetailscontainer                                 {height:100%; transform: translateY(140%);overflow-y:hidden; }
.challengedetailscontainer .header                         {align-items: flex-start; background-color:white;}
.challengedetailscontainer .header h2                      {width:calc(100% - 60px); text-align: left;}
.challengedetailscontainer .divsessionlistheadericons      {border:0px red solid; width:60px; text-align: right;}
.challengedetailscontainer .content                        {height:calc(100% - 70px); text-align: center; padding-top:0; border:0px red solid; height:calc(100% - 50px); overflow-y:auto; padding:30px}
.challengedetailscontainer .challengeicon                  {width:230px; max-width:80%; }
.challengedetailscontainer .challengedescription           {border:0px red solid; margin-top:20px;}
.challengedetailscontainer .challengesignupinstructionscontainer    {border:0px red solid; margin-top:30px;}
.challengedetailscontainer .challengesignupinstructionstext{border:0px red solid; margin-bottom:30px; display:block; }
.challengedetailscontainer .challengedetailsstats          {display:flex; flex-wrap: wrap; justify-content: space-evenly; gap:10px; margin-top:20px; padding-top:20px; border-top:1px solid var(--lightgrey)}
.challengedetailscontainer .challengedetailsstat           {border:0px red solid; min-width:100px;}
.challengedetailscontainer .challengedetailsstats .iconcontainer {margin-bottom:10px}
.challengedetailscontainer .challengedetailsstats h1       {font-size:2rem; font-weight: 300; margin:0; border:0px red solid; line-height: 3rem;}
.challengedetailscontainer .challengedetailsstats p        {margin:0;  border:0px red solid;}

/* ######################## */
/* # 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) 17%),url('/Images/Header/Pattern-Orange.png'); background-attachment:scroll; background-size:cover ; background-position:center; background-repeat: no-repeat; padding:0px; z-index:2; position:relative; display:flex; align-items: center; justify-content: center;}
    .herologo                                               {height:250px; width:auto; }

    /* ######################## */
    /* # POPUPS               # */
    /* ######################## */    
    .popup                                                  {width:calc(100% - 20px);}    
    .challengedetailscontainer                              {height:100%; width:100%; border-radius:0;}
    .challengedetailscontainer .content                     {padding:10px 10px 50px 10px}
    .challengedetailscontainer .challengeicon               {width:150px;}

    /* ######################## */
    /* # 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(-130px);}
    .categories                                             {border:0px red solid;text-align: left; padding:30px 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;}
    .category .text h3                                      {display:; margin-top:10px;}
    .category .image h3                                     {margin-bottom:0;display:none;}

    .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(15px,100px) rotate(-12deg) scale(0.4) !important; }

    .promocontainer                                         {border:0px red solid; width:100%; display:flex; flex-direction: column-reverse; justify-content: space-between; padding:10px 20px 50px 20px; align-items: center;}
    .promocontainer .promotextcontainer                     {border:0px solid green; width:100%; min-height:200px; text-align: center;}
    .promocontainer .promoimagecontainer                    {border:0px solid blue; width:100%; max-width:500px; min-height:200px; position:relative; text-align: center;}
    .promocontainer .promoimage                             {width:100%; max-width:500px;}
    .promocontainer .promobadgeimage                        {position:absolute; bottom:0; left:unset; right:0; width:35%;}
    .promocontainer .promobadge                             {width:150px;}
    

}