/* ######################## */
/* # Hero                 # */
/* ######################## */
.herocontainer                                              {width:100%; height:560px; 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-Yellow.png'); background-attachment:fixed; background-size:cover contain; 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; }

/* 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;}
.cta h1                                                     {font-weight:400}

.banner                                                     {border:0px blue solid; text-align: center;  background-color:#810b0b; width:100%; display:flex; justify-content: center; color:white;}
.bannercontent                                              {border:0px red solid; max-width:1000px; padding:0px 20px 20px 20px;}
.banner h1                                                  {font-weight:400}

#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: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:100px}
.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:5px solid silver; border-radius: 10px; padding:5px;}
.category .text h3                                          {margin-top:0;}
.category .image h3                                         {border:0px red solid; margin-top:10px;}

/* ######################## */
/* # Stats                # */
/* ######################## */
.statscontainer                                             {background-color:white; width:100%; 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;}

.divider                                                    {max-width:900px;}

/* ######################## */
/* # RollStart For ...    # */
/* ######################## */
.infocontainer                                              {background-color:white; width:100vw; position:relative; display:flex; justify-content: center; background-image:url('/Images/Backgrounds/Background-Confetti-colour.png'); background-size:300px; min-height:500px; padding:100px; flex-wrap: wrap; gap:50px; justify-content:center; padding:100px 10% 100px 10%; }
.infopanel                                                  {position:relative}
.infopanel h1                                               {position:absolute; color:white; text-align: center; width:100%}
.infopanel p                                                {position:absolute; color:black; text-align: center; width:100%; padding: 130px 50px 0 50px;box-sizing: border-box;}

/* ######################## */
/* # Download App         # */
/* ######################## */
.downloadanchor                                             {visibility:hidden; position:relative; transform:translateY(-85px); scroll-behavior: smooth;}
.downloadappcontainer                                       {width:1000px; border:0px red solid; display:flex; padding:60px 0 100px 0; justify-content: center;}
.downloadappcontainer .text                                 {width:45%; border:0px red solid; padding:0 0 0 30px;}
.downloadappcontainer .buttons                              {width:100%; border:0px red solid; display:flex; align-items:center; justify-content: center; gap:10px;}
.downloadappcontainer .button                               {width:100px; height:auto; padding:0; border:0;}
.downloadappcontainer .image                                {width:55%;}
.downloadappcontainer .phones                               {width: 100%; height: auto; padding: 0; border: 0;}

/* ######################## */
/* # Feed back            # */
/* ######################## */
.feedbackcontainer                                          {height:400px;width:100%; background-color:#2da3a7; display:flex; padding:30px 0 30px 0; align-items:center; justify-content: center;background-image:url('/Images/Header/Pattern-Grey-25.png'); background-attachment: fixed; background-size:  cover; background-position: center; background-repeat: no-repeat; }
.feedbackcontainer .arrow                                   {height:400px; width:50px; position:relative; margin-left:25px; display:flex; justify-content:center; align-items:center}
.feedbackcontainer .hidden                                  {display:none}
.feedbackcontainer .arrow .button                           {width:30px; height:30px; z-index:99; position:absolute; background-color:transparent; border:1px red solid}
.feedbackcontainer .arrow .img                              {width:30px; height:auto; opacity:0.5; transition:all 0.3s ease}
.feedbackcontainer .arrow .img:hover                        {width:30px; height:auto; opacity:0.9; cursor:pointer}
.feedbackcontainer .contentcontainer                        {border:0px red solid; width:850px; display:flex; gap:100px}
.feedbackcontainer .carousel                                {border:0px red solid; width:750px; padding-left:55px; display:flex; align-items:center; overflow:hidden; gap:60px}
.feedbackcontainer .carousel .arrow                         {width:100px; height:100px; border:1px red solid}
.feedbackcontainer .carousel .item                          {display:flex; flex-direction: column; max-width:100%; position:absolute; padding-right:20px;}
.feedbackcontainer .carousel .next                          {transform:translateX(750px); transition-duration:0.75s}
.feedbackcontainer .carousel .current                       {transform:translateX(0); transition-duration:0.75s}
.feedbackcontainer .carousel .prev                          {transform:translateX(-750px); transition-duration:0.75s}
.feedbackcontainer .carousel .feedback                      {border:0px red solid; color:white; font-size:1.5rem}
.feedbackcontainer .carousel .feedback::before              {content: "\201C"; color:#197275; font-size:9rem; position:absolute; margin-left:-55px; margin-top:-50px}
.feedbackcontainer .carousel .person                        {border:0px red solid; color:white; font-size:1rem; font-weight: 900; padding-top:20px}
.feedbackcontainer .carousel .role                          {border:0px red solid; color:white; font-size:1rem}
.feedbackcontainer .carousel .date                          {border:0px red solid; color:white; font-size:1rem}
.feedbackcontainer .image                                   {border:0px red solid;width:350px;display:flex; align-items: center; justify-content: center; position:relative; z-index:1;}
.feedbackcontainer .image img                               {width:450px; margin-left:-100px}



/* ######################## */
/* # 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-Yellow.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: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; border:5px solid silver; border-radius: 10px;}
    .category .text h3                                      {margin-top:10px;}
    .category .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}

    /* ######################## */
    /* # Download App         # */
    /* ######################## */
    .downloadanchor                                         {visibility:hidden; position:relative; transform:translateY(-20px); scroll-behavior: smooth;}
    .downloadappcontainer                                   {width:100%; flex-wrap: wrap; padding:50px 20px 70px 20px;}
    .downloadappcontainer .text                             {width:100%; border:0px red solid; text-align: center; padding:0 10px 0 10px;}
    .downloadappcontainer .buttons                          {width:100%; display:flex; align-items: center; justify-content: center; gap:10px; border:0px red solid; flex-wrap:wrap}
    .downloadappcontainer .image                            {width:100%; display:flex; align-items: center; justify-content: center; gap:10px; border:0px red solid; flex-wrap:wrap; padding-top:30px;}
    .downloadappcontainer .button                           {width:150px; height:auto; padding:0; border:0;}

    /* ######################## */
    /* # Feed back            # */
    /* ######################## */
    .feedbackcontainer                                          {border:0px solid red; height:auto;width:100%; background-color: #2da3a7; display:flex; margin-top:50px;padding:0px 0 0px 0; align-items: flex-start; justify-content: center;background-image:url('/Images/Header/Pattern-Grey-25.png'); background-attachment: fixed; background-size: auto; background-position: center; background-repeat: no-repeat; }
    .feedbackcontainer .arrow                                   {display:none}
    .feedbackcontainer .arrow .img                              {display:none}
    .feedbackcontainer .contentcontainer                        {border:0px red solid;width:100%; height:100%; display:flex; position:relative; flex-direction: column-reverse; gap:0px}
    .feedbackcontainer .carousel                                {border:0px blue solid;width:100%; height:400px; position:relative; display:flex;}
    .feedbackcontainer .carousel .arrow                         {display:none}
    .feedbackcontainer .carousel .item                          {border:0px green solid; display:flex; flex-direction: column; max-width:100%; position:absolute; padding-right:20px; padding-bottom:30px}
    .feedbackcontainer .carousel .next                          {transform:translateX(750px); transition-duration:0.75s}
    .feedbackcontainer .carousel .current                       {transform:translateX(0); transition-duration:0.75s;}
    .feedbackcontainer .carousel .prev                          {transform:translateX(-750px); transition-duration:0.75s}
    .feedbackcontainer .carousel .feedback                      {border:0px red solid; color:white; font-size:1.5rem}
    .feedbackcontainer .carousel .feedback::before              {content: "\201C"; color:#197275; font-size:9rem; position:absolute; margin-left:-55px; margin-top:-50px}
    .feedbackcontainer .carousel .person                        {border:0px red solid; color:white; font-size:1rem; font-weight: 900; padding-top:20px}
    .feedbackcontainer .carousel .role                          {border:0px red solid; color:white; font-size:1rem}
    .feedbackcontainer .image                                   {border:0px red solid;width:100%; display:flex; align-items: center; justify-content: center; position:relative; z-index:1;}
    .feedbackcontainer .image img                               {width:80%; max-width:400px; margin-left:0px; margin-top:-40px}    
    
    .challenge_learnbutton                                      {position:relative; min-width:220px; margin:0 0 10px 5px;}
    .challenge_choosebutton                                     {position:relative; min-width:220px; margin:0;}    
}