/*imported font family from google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');



body{
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
}

/*define global font sizes*/
h1, h2, h3, h4{
  margin: 0;
  padding: 0;
}

h1{
  font-size: 4.6vw;
}
h2{
  font-size: 2.4vw;
}

h3{

  font-size:2.25vw;
}

h4{

  font-size: 1.6vw;
}
p{
  font-size: 1.6vw;
}

/*define layout for all the */
.wrapping{
  display:grid;
  grid-template-areas:
  'banner'
  'slogan'
  'mainContent'
  'footer';
}
.eve_banner, .about_banner, .FO_banner, .contests_banner, .res_banner{
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: rgb(230, 230, 230);
  display: grid;
  grid-area: banner;
  grid-template-areas:
  'nav'
  'heading';
  height: 48.75rem;
}

.eve_banner{
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url('images/eventsBanner.jpg');
  background-position: 50% 85%;
}

.about_banner{
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url('images/aboutBanner.jpg');
  background-position: 50% 25%;
}

.FO_banner{
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url('images/FO_banner.jpg');
}
.contests_banner{
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url('images/contestsBanner.jpg');
}
.res_banner{
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url('images/resources_banner.jpg');
}
.navigation{
  position: fixed;
  background-color: rgb(250, 250, 250);
  border-bottom-style: solid;
  border-bottom-width:1px;
  border-color: rgb(220,220,220);
  display: grid;
  grid-area: nav;
  grid-template-areas: 'logo links socialMedia';
  grid-template-columns: 15% 70% 15%;
  height: 3rem;
  opacity: 0.5;
  transition: 0.28s ease;
  width: 100%;
}

.navigationLogo{
  display: flex;
  flex-direction: row;
  grid-area: logo;
  height: 3rem;
  justify-content: center;
  width: 100%;
}
.navigationLogo1{
  align-self:flex-start;
  display: flex;
  justify-content: flex-start;
}
.navigationLogo2{
  align-self:flex-start;
  display: flex;
  justify-content: flex-start;
}

.navigationLinks {
  align-items: center;
  display: flex;
  grid-area: links;
  height: 3rem;
  justify-content: center;
  width: 100%;
}
.navigationLinks ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  justify-content:flex-end;
  list-style: none;
  margin: 0;
  width: 100%;
}
.navigationLinks  li{
margin-right: 2%;
}
.navigationLinks a{
  align-items: center;
  color: rgb(49, 48, 46);
  cursor: pointer;
  display: flex;
  font-size: 1.1rem;
  font-weight: 600;
  height: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  text-decoration: none;
  transition: 0.28s ease;
}
.navigationLinks  a:hover{
  background-color:rgb(76, 76, 76);
  color: white;
}
.navigationSocialMedia{
  align-items: center;
  display: flex;
  grid-area: socialMedia;
  height: 3rem;
  justify-content: center;
  width: 100%;
}
.navigationSocialMedia a{
  margin: 0 1rem;
}
.heading{
  align-content: center;
  display: flex;
  grid-area: heading;
  justify-content: center;
  padding-bottom: 10%;
  text-align: center;
}
.heading span{
  font-size: 1.2rem;
}

/*define global slogan for each sub page*/
.slogan{
  grid-area:slogan;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  font-weight: 600;
  line-height: 2.8rem;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 15rem;
  color: rgb(230, 230, 230);
  background-color: rgb(51, 51, 51);
}
/*define global subtitles for each sub page*/
.eve_list_title, .gallery_title, .report_title, .FO_industry_title, .FO_school_title, .competitions_title, .challenges_title, .res_title{
  text-align: center;
  color: rgb(230, 230, 230);
  font-weight: 600;
  line-height: 2.8rem;
  display:flex;
  justify-content: center;
  align-items: center;
}

/*events page content section*/
.eve_mainContent{
  display: grid;
  grid-area: mainContent;
  grid-template-areas:
  'eve_list';
}
.eve_list{
  grid-area: eve_list;
  display: grid;
  grid-template-areas:
  'title title title'
  'event_ESD event_CSW event_AEA';
  grid-template-columns: repeat(3, 28.5rem);
  grid-template-rows: 7rem 41.75rem;
  background-color: rgb(76, 33, 42);
  justify-content: center;
  align-content: center;
  grid-gap: 2.5rem;
  height:58rem;
  transition: 0.5s ease;
}
.eve_list_title{
  grid-area: title;
}
/*ESD: employer speed dating*/
/*CSW: cyber security workshop*/
/*academic excellence awards: cyber security workshop*/
.event_ESD, .event_CSW, .event_AEA{
  transition: 0.5s ease;
  display: grid;
  grid-template-areas:
  'cardFace';
  grid-template-rows: 100%;
  color: rgb(240,240,240);
  overflow: hidden;
}
.event_ESD{
grid-area:event_ESD;
}
.event_CSW{
  grid-area:event_CSW;
}
.event_AEA{
  grid-area:event_AEA;
}
.CSW_Background, .AEA_Background, .ESD_Background{
  grid-area: cardFace;
  background-size: cover;
  height: 100%;
  transition: 0.5s ease;
}
.CSW_Background{
  background-position: 5% 70%;
  background-image: url("images/CSW.jpg");
}
.AEA_Background{
  background-position: 65% 50%;
  background-image: url("images/academicExcellence.jpg");
}
.ESD_Background{
  background-size: 58.75rem 41.75rem;
  background-position: 65% 50%;
  background-image: url("images/ESD.jpg");
}
/*card face, title, content and buttons for each card in events page*/
.cardFace{
  position: relative;
  background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.7), rgba(180,180,180,0));
  grid-area: cardFace;
  height: 15%;
  transition: 0.5s ease;
}
.cardTitle hr{
  width: 0;
  opacity: 0;
  transition: 0.6s ease;
  margin-top: 1.7rem;
  background-color: rgb(230,230,230);
  height: 1px;
}
.cardTitle{
  color: rgb(230,230,230);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  height: 10%;
  padding-top: 1.2rem;
}
.cardContent{
  filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  transition: 1.1s ease;
  height: 65%;
  opacity: 0;
  }
.cardContent p{
    font-weight: 600;
    margin: 0.8rem;
    line-height: 2.3rem;
  }
.cardButton{
  height: 21%;
  opacity: 0;
  transition: 0.6s ease;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left:2rem;
  padding-right: 2rem;
}
.reg_Button{
  border-radius: 2rem;
  border-style: none;
  background-color: rgb(0, 103, 192);
  height: 2rem;
  width: 4.5rem;
  color: rgb(230,230,230);
  transition: 0.3s ease;
  cursor: pointer;
}
.reg_Button:hover{
  transform: scale(1.4);
  color: rgb(30, 30, 30);
}
.info_Button{
  background-color:rgb(1, 179, 96);
  border-radius: 2rem;
  border-style: none;
  height: 2rem;
  width: 4.5rem;
  color: rgb(230,230,230);
  transition: 0.3s ease;
  cursor: pointer;
}
.info_Button:hover{
  transform: scale(1.4);
  color: rgb(30, 30, 30);
}
/*hover effects of each card in events content section*/
.event_ESD:hover, .event_CSW:hover, .event_AEA:hover{
  box-shadow: 5px 5px 15px rgba(0,0,0,1);
}
.event_ESD:hover .ESD_Background, .event_CSW:hover .CSW_Background, .event_AEA:hover .AEA_Background{
  filter:  blur(2px);
}
.event_ESD:hover .cardFace, .event_CSW:hover .cardFace, .event_AEA:hover .cardFace{
  height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7), rgba(0,0,0,0.7));
}
.event_ESD:hover .cardTitle hr, .event_CSW:hover .cardTitle hr, .event_AEA:hover .cardTitle hr{
  width:90%;
  opacity: 1;
}
.event_ESD:hover .cardContent, .event_CSW:hover .cardContent, .event_AEA:hover .cardContent{
  opacity: 1;
  filter: blur(0px);
}
.event_ESD:hover .cardButton, .event_CSW:hover .cardButton, .event_AEA:hover .cardButton{
  opacity: 1;
}
/*end of events page content section*/

/*about page content section*/
.about_mainContent{
  display: grid;
  grid-area: mainContent;
  grid-template-areas:
  'about_gallery'
  'about_report';
  background-color: rgb(76, 33, 42);
}
/*about page gallery sub section*/
.about_gallery{
    grid-area: about_gallery;
    display: grid;
    grid-template-areas:
    'gallery_title gallery_title gallery_title gallery_title gallery_title gallery_title'
    'album1 album1 album2 album2 album3 album3'
    'none1  album4 album4 album5 album5 none2';
    grid-template-columns: repeat(6, 12rem) ;
    grid-template-rows: 8rem 19rem 19rem;
    justify-content: center;
    grid-column-gap: 1.5rem;
}
/*about page gallery report sub section*/
.about_report{
  grid-area: about_report;
  display: grid;
  grid-template-areas:
  'report_title report_title'
  'report1 report2';
  grid-template-columns: repeat(2, 18rem);
  grid-template-rows: 8rem 25rem;
  grid-column-gap: 2.5rem;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 5rem;
}
.gallery_title{
  grid-area: gallery_title;
}
.report_title{
  grid-area: report_title;
}
.competitions_title{
  grid-area: title;
}
.album1, .album2, .album3, .album4, .album5{
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  display: grid;
  grid-template-areas: 'face';
}
.album1 a, .album2 a, .album3 a, .album4 a, .album5 a{
  grid-area: face;
  text-decoration: none;
}
.album1_background, .album2_background, .album3_background, .album4_background, .album5_background{
  grid-area: face;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 100%;
  transition: 0.5s ease;
}
.album1_background{
  background-image: url('images/CF2018.jpg');
}
.album2_background{
  background-image: url('images/CF2017.jpg');
}
.album3_background{
  background-image: url('images/CF2016.jpg');
}
.album4_background{
  background-image: url('images/CF2015.jpg');
}
.album5_background{
  background-image: url('images/CF2014.jpg');
}
/*album title for each card in about page*/
.album_title{
  background-position: bottom;
  background-image:linear-gradient(to top, rgb(0, 0, 0, 0.8),rgb(0, 0, 0, 0.7),rgb(230, 230, 230, 0));
  background-size: 100% 50%;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height:100%;
  width: 100%;
  transition: 0.5s ease;
}
.album_title h4{
  color: rgb(230,230,230);
  padding-bottom: 0.7rem;
  transform: translateY(-24px);
  transition: 0.5s ease;
}
.album1{
  grid-area:album1;
}
.album2{
  grid-area:album2;
}
.album3{
  grid-area:album3;
}
.album4{
  margin-top: 3rem;
  grid-area:album4;
}
.album5{
  margin-top: 3rem;
  grid-area:album5;
}
/*hover effects for each card*/
.album1:hover .album1_background, .album2:hover .album2_background, .album3:hover .album3_background, .album4:hover .album4_background, .album5:hover .album5_background{
  transform: scale(1.2);
}
.album1:hover .album_title h4, .album2:hover .album_title h4, .album3:hover .album_title h4, .album4:hover .album_title h4, .album5:hover .album_title h4{
font-size: 1.4rem;
transform: translateY(0px);
}
.album1:hover .album_title, .album2:hover .album_title, .album3:hover .album_title, .album4:hover .album_title, .album5:hover .album_title{
  opacity: 0.8;
  background-size: 100% 20%;
}
/*for each report in about page*/
.report1, .report2{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.3s ease;
}
.report1:hover, .report2:hover{
  transform: scale(1.5);
}
.report1{
  display: grid;
  grid-template-areas:'face';
  background-image: url('images/2016_report.jpg');
  grid-area: report1;
}
.report2{
  display: grid;
  grid-template-areas:'face';
  background-image: url('images/2014_report.jpg');
  grid-area: report2;
}
/*end of about page content section*/


/*contests page main content section*/
.contests_mainContent{
  background-color: rgb(76, 33, 42);
  display: grid;
  grid-area: mainContent;
  grid-template-areas:
  'competitions'
  'challenges';
}
/*competitions and challenges sub sections*/
.contests_competitions, .contests_challenges{
  display: grid;
  grid-column-gap: 1.5rem;
  grid-template-columns: 35rem 35rem;
  grid-template-rows: 10rem 24rem;
  justify-content: center;
  transition: 0.5s ease;
}
.contests_competitions{
  grid-area: competitions;
  grid-template-areas:
  'title title'
  'competitions_CC competitions_PC';
}
.contests_challenges{
  grid-area: challenges;
  grid-template-areas:
  'title title'
  'challenges_BIC challenges_CSC';
  padding-bottom: 5rem;
}
/* titles for competitions and challenges sub sections*/
.competitions_title, .challenges_title{
  grid-area:title;
}
/*CC: coding competition*/
/*PC: poster competition*/
/*BIC: business inovation challenge*/
/*CSC: cyber security challenge*/
.competitions_CC, .competitions_PC, .challenges_BIC, .challenges_CSC{
  display: grid;
  grid-template-areas: 'face';
}
.competitions_CC{
  grid-area:competitions_CC;
}
.competitions_PC{
  grid-area:competitions_PC;
}
.challenges_BIC{
  grid-area: challenges_BIC;
}
.challenges_CSC{
  grid-area: challenges_CSC;
}
.CC_background, .PC_background, .BIC_background, .CSC_background{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  grid-area:face;
}
.CC_background{
  background-image: url('images/CC.jpg');
}
.PC_background{
  background-image: url('images/PC.jpg');
}
.BIC_background{
  background-image: url('images/BIC.JPG');
}
.CSC_background{
  background-image: url('images/CSC.JPG');
}
/*card title, face, content, buttons, for each card in contests page*/
.contests_card_title{
  align-items: flex-start;
  background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.7), rgba(180,180,180,0));
  color: rgb(230, 230, 230);
  display: flex;
  grid-area:face;
  height: 20%;
  justify-content: center;
  padding-top: 0.7rem;
  position: relative;
  z-index: 1;
}
.contests_card_face{
  align-items: center;
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
  display: flex;
  grid-area:face;
  justify-content: center;
  opacity: 0;
  position: relative;
  transition: 0.5s ease;
}
.contests_card_content{
  align-items: center;
  color: rgb(230, 230, 230);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding-top:4rem;
  position: relative;
  text-align: center;
  transition: 0.5s ease;
}
.contests_card_content p{
  margin: 0.3rem;
}
.contests_card_buttons{
  display: flex;
  justify-content: space-between;
  margin-top: 5rem;
  position: relative;
  width: 50%;
}
/*hover effects for each card*/
.competitions_CC:hover .contests_card_face, .competitions_PC:hover .contests_card_face, .challenges_BIC:hover .contests_card_face, .challenges_CSC:hover .contests_card_face{
  opacity: 1;
}
.competitions_CC:hover .CC_background, .competitions_PC:hover .PC_background, .challenges_BIC:hover .BIC_background, .challenges_CSC:hover .CSC_background{
  filter: blur(1px);
}
/*end of contests page main content section*/

/*For Organizations page main content section*/
.FO_mainContent{
  display: grid;
  grid-template-areas:
  'FO_industry'
  'FO_school';
  grid-area: mainContent;
  background-color: rgb(76, 33, 42);
}
.FO_mainContent p{
  font-size: 1.4rem;
}
/*for industry sub section*/
.FO_industry{
  grid-area: FO_industry;
  display: grid;
  grid-template-areas:
  'title title title'
  'FO_industry_ESD FO_industry_judge FO_industry_sponsor';
  grid-template-columns: repeat(3, 23.75rem);
  grid-template-rows: 8rem 31.25rem;
  justify-content: center;
  grid-column-gap: 1.5rem;
}
/*for school sub section*/
.FO_school{
  grid-area: FO_school;
  display: grid;
  grid-template-areas:
  'title'
  'FO_school_CSW';
  grid-template-columns:  23.75rem;
  grid-template-rows: 8rem 31.25rem;
  justify-content: center;
  padding-bottom: 5rem;
}
/*titles for each sub section*/
.FO_industry_title, .FO_school_title{
  grid-area: title;
}
/*ESD: employer speed dating*/
/*judge: jusdge at code fair*/
/*sponsor: Sponsor a prize*/
.FO_industry_ESD, .FO_industry_judge, .FO_industry_sponsor, .FO_school_CSW{
  transition: 0.5s ease;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  display: grid;
  grid-template-areas:
  'cardFace';
  grid-template-rows: 100%;
  color: rgb(240,240,240);
  overflow: hidden;
}
.FO_industry_ESD{
  grid-area: FO_industry_ESD;
}
.FO_industry_judge{
  grid-area: FO_industry_judge;
}
.FO_industry_sponsor{
  grid-area: FO_industry_sponsor;
}
.FO_school_CSW{
  grid-area: FO_school_CSW;
}
.FO_industry_ESD_Background, .FO_industry_judge_Background, .FO_industry_sponsor_Background, .FO_school_CSW_Background{
  grid-area: cardFace;
  background-size: cover;
  background-position: 65% 50%;
  height: 100%;
  background-image: url("images/ESD.jpg");
  transition: 0.5s ease;
}
.FO_industry_judge_Background{
  background-position: 50% 50%;
  background-image: url("images/judge.jpg");
}
.FO_industry_sponsor_Background{
  background-position: 50% 50%;
  background-image: url("images/sponsor.jpg");
}
.FO_school_CSW_Background{
  background-position: 5% 70%;
  background-image: url("images/CSW.jpg");
}
.FO_industry_ESD:hover, .FO_industry_judge:hover, .FO_industry_sponsor:hover{
  box-shadow: 5px 5px 15px rgba(0,0,0,1);
}
.FO_industry_ESD:hover .FO_industry_ESD_Background, .FO_industry_judge:hover .FO_industry_judge_Background, .FO_industry_sponsor:hover .FO_industry_sponsor_Background, .FO_school_CSW:hover .FO_school_CSW_Background{
  filter: blur(2px);
}
.FO_industry_ESD:hover .cardFace, .FO_industry_judge:hover .cardFace, .FO_industry_sponsor:hover .cardFace, .FO_school_CSW:hover .cardFace{
  height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7), rgba(0,0,0,0.7));
}
.FO_industry_ESD:hover .cardTitle hr, .FO_industry_judge:hover .cardTitle hr, .FO_industry_sponsor:hover .cardTitle hr, .FO_school_CSW:hover .cardTitle hr{
  width:90%;
  opacity: 1;
}
.FO_industry_ESD:hover .cardContent, .FO_industry_judge:hover .cardContent, .FO_industry_sponsor:hover .cardContent, .FO_school_CSW:hover .cardContent{
  opacity: 1;
  filter: blur(0px);
}
.FO_industry_ESD:hover .cardButton, .FO_industry_judge:hover .cardButton, .FO_industry_sponsor:hover .cardButton, .FO_school_CSW:hover .cardButton{
  opacity: 1;
}
/*end of for Organizations page content section*/



/*resources page content section*/
.res_mainContent{
  display: grid;
  grid-area: mainContent;
  grid-template-areas:
  'title'
  'res_display ';
  grid-template-rows: 8rem auto;
  text-align: center;
  justify-content: center;
  background-color: rgb(76, 33, 42);


}

.res_title{
  grid-area: title;
}
/*this class is the container for the display area that shows series of resources */
.res_display{
  display: grid;
  grid-area: res_display;
  grid-template-areas:
  'resource1-1 resource1-2 resource1-3'
  'content1 content2 content3';
  grid-template-columns: repeat(3, 28rem);
  grid-template-rows: 20rem 20rem;
  height: 50rem;
  grid-column-gap:1.5rem;
  padding-top: 2%;
  text-decoration: none;
  justify-content: center;

}

.res_display a{
  color:black;
  text-decoration:none;
  transition: 0.3s ease;

}
.res_display a:hover{
  color: rgb(158, 8, 7);
}
/*resource cubes*/
.resource1-1, .resource1-2, .resource1-3{
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  position: relative;
  transition:0.5s ease;
  width: 100%;
}
.resource1-1{
  background-image: url("images/poster.jpg");
  grid-area: resource1-1;
}
.resource1-2{
  background-image: url("images/webDev.jpg");
  grid-area: resource1-2;
}
.resource1-3{
  background-image: url("images/presentation.JPG");
  grid-area: resource1-3;
}

/*resource title masks*/
.resource1-1Title, .resource1-2Title, .resource1-3Title{
  align-items: center;

  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
  color:rgb(230,230,230);
  display: flex;
  font-size: 1.5rem;
  justify-content: center;
  opacity: 1;
  position: relative;
  transition: 0.2s ease;
  width: 100%;
  z-index: 2;
}
.resource1-1Title{
  grid-area: resource1-1;
}
.resource1-2Title{
  grid-area: resource1-2;
}
.resource1-3Title{
  grid-area: resource1-3;
}
/*resources display panels for each resource cube*/
.resource1-1_panel, .resource1-2_panel, .resource1-3_panel{
  background-image: linear-gradient(rgb(210,210,210),rgb(180,180,180));

  display: none;
  font-size: 1.3rem;
  font-weight: 400;
  height: 0rem;
  opacity:0;
  position: relative;
  width: 100%;

}
.resource1-1_panel{
  grid-area: content1;
}
.resource1-2_panel{
  grid-area: content2;
}
.resource1-3_panel{
  grid-area: content3;
}

.resource1-1_panel ul, .resource1-2_panel ul, .resource1-3_panel ul {
  list-style: none;
  text-align: center;
  line-height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100%;

}

/*end of resource page content section*/





/* More info page starts here */

.more_info_container{
  width:80%;
  max-width: 900px;
  color: #333333;
  margin-left: auto;
  margin-right: auto;
}
.image{
  width: 100%;
}
.red_text{
  color: red;
}

.more_info_content{
  padding: 20px;
  box-shadow: 0 4px 8px;
  background: #dcdcdc;
}

.students_container{
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: auto auto auto;
}

.student{
  background: white;
  text-align: center;
  padding: 10px;
  font-size: 20px;
  box-shadow: 0 4px 4px;
}

.blurb{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  margin-top: 3rem;
  color: rgb(30,30,30);
}


/*Registration form css starts here */

/* Container that holds the content */
.form_container{
  width: 80%;
  max-width: 500px;
  margin: 20px auto;
  box-shadow: 0 4px 8px;
  padding: 20px;
}

/* Styling and position for registration content title */
.title{
  margin-bottom: 25px;
  color: #ff2020;
  text-align: center;
}

/* Styling for the form fields */
.field{
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

/* Styling and position for registration content title */
label{
   width: 30%;
   margin-right: 10px;
}

/* Styling for text fields on the form */
.details,
.textbox,
.hiddenbox{
  width: 95%;
  outline: none;
  border: 1px solid #d5dbd9;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 3px;
  transition: all 0.3s ease;
}


/* Position and size for the select menus on the form */
.select_menu{
  position: relative;
  width: 100%;
  height: 37px;
}

/* Styling and positioning for the selection menus on the form */
.select_menu:before{
  content: "";
  position: absolute;
  top: 12px;
  right: 10px;
  border: 8px solid;
  border-color: #d5dbd9 transparent transparent transparent;
}

/* Size and styling for the arrow on the selection menu */
.select_menu select{
  -webkit-appearance: none;
  -moz-appearance:   none;
  appearance:        none;
  outline: none;
  width: 100%;
  height: 100%;
  border: 1px solid #d5dbd9;
  border-radius: 3px;
}

/* Interactive feature colour for the form fields */
.details:focus,
.textarea:focus,
.select_menu select:focus{
  border: 1px solid #ff2020;
}

/* position and size for the checkbox text */
.check{
  width: 15px;
  height: 15px;
  position: relative;
  display: block;
}

/* Position for the checkbox */
input[type="checkbox"]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* Styling for the checkbox */
.checked{
  width: 15px;
  height: 15px;
  border: 1px solid #ff2020;
  display: block;
  position: relative;
}

/* Sets the checkbox color to red when clicked */
.check input[type="checkbox"]:checked ~ .checked{
  background: #ff2020;
}

/* Set the font family to same as the rest of the page for textbox */
textarea{
  
}


/* Styling for the registration button */
.btn{
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  border: 0px;
  background:  #ff2020;
  color: #fff;
  border-radius: 3px;
}

/* Hover effect for the redistration button */
.btn:hover{
  background: #ff5959;
}

.submission_text{
  text-align: center;
}

.hidden{
  display: none;
}

span{
  color: #ff2020;
}

p,
strong{
  font-size: 20px;
}



/*contest information page content section*/

/* This sets the size of the banner images for the pages*/
.comps_info_cover_image{
  max-width: 100%;
}

/* This sets the position and colour of the blurb under the top banner on the pages*/
.contestsInfo_heading, .caption{
  text-align: center;
  max-width:80%;
  color: #333333;
  margin-left: auto;
  margin-right: auto;
}


/* Competitions More Details page (Contributed by Shaakya Weerasundera s307943)*/

.comps_details_container{
  width:80%;
  max-width: 900px;
  color: #333333;
  margin-left: auto;
  margin-right: auto;
}

/* This style is for every card (coding Competition, poster Competition, Business Innovation Challenge, Cybersecurity Challenge )*/

.coding, .poster, .bic, .cyber{
  padding: 20px;
  box-shadow: 0 4px 8px;
  background: #dcdcdc;
}

p,
strong{
  font-size: 20px;
}
/*end of contest information page content section*/


/* This sets the background colour, padding and text colou for footer*/
footer{
  background-color: rgb(240,240,240);
  padding: 3px 3px;
  color: #333333;
  text-align: center;
  grid-area:footer;
  font-weight: 600;
}


/*responsive feature for events page*/
@media screen and (max-width: 1466px){
  .eve_list{
    grid-template-columns: repeat(3, 18.5rem);
    grid-template-rows:8rem 27.12rem;
    grid-column-gap: 1.5rem;
  }
  .eve_list p{
    font-weight: 600;
    margin: 0.3rem;
    line-height: 1.2rem;
    font-size: 1.1rem;
  }
}


@media screen and (max-width: 955px){
  .eve_list{
    grid-template-areas:
    'title title title title'
    'event_ESD event_ESD event_CSW event_CSW'
    'none1 event_AEA event_AEA none2';
    grid-template-columns: repeat(4, 9.25rem);
    grid-template-rows:8rem 27.12rem 27.12rem;
    grid-column-gap: 1.5rem;
    height: 74rem;
  }

}
@media screen and (max-width: 681px){
  .eve_list{
    grid-area: eve_list;
    display: grid;
    grid-template-areas:
    'title'
    'event_ESD'
    'event_CSW'
    'event_AEA';
    grid-template-columns: repeat(1, 95%);
    grid-template-rows: 6% 30% 30% 30%;
    background-color: rgb(76, 33, 42);
    justify-content: center;
    align-content: center;
    grid-row-gap: 1%;
    height:120rem;
    transition: 0.5s ease;
  }

  .eve_banner{
    height: 39rem;
  }
  .eve_banner h1{
    font-size: 7.2vw;
  }
  .eve_banner + h2{
    font-size: 6.2vw;
  }
  .eve_mainContent h3{
    font-size: 5.2vw;
  }
  .eve_list h4{
    font-size: 4.4vw;
  }
  .eve_list p, footer p{
    font-size: 4vw;
  }
  .cardContent p{
    font-weight: 600;
    margin: 0.8rem;
    line-height: 2.4rem;

  }
}




/*responsive feature for contests page*/
@media screen and (max-width: 1161px){
  .contests_competitions, .contests_challenges{
    display: grid;
    justify-content: center;
    grid-template-columns: 22rem 22rem;
    grid-template-rows: 8rem 15rem;
    grid-column-gap: 1rem;
  }
}

@media screen and (max-width: 747px){
  .contests_competitions, .contests_challenges{
    display: grid;
    justify-content: center;
    grid-template-columns: 95%;
    grid-template-rows: 6rem 24rem 24rem;
    grid-column-gap: 0rem;
    grid-row-gap:2rem;
  }
  .contests_competitions{
    grid-template-areas:
    'title'
    'competitions_CC'
    'competitions_PC';
  }
  .contests_challenges{
    grid-template-areas:
    'title'
    'challenges_BIC'
    'challenges_CSC';
  }
  .contests_banner{
    height: 39rem;
  }
  .contests_banner h1{
    font-size: 7.2vw;
  }
  .contests_banner + h2{
    font-size: 6.2vw;
  }
  .contests_mainContent h3{
    font-size: 5.2vw;
  }
  .contests_mainContent h4{
    font-size: 4.4vw;
  }
  .contests_mainContent p, footer p{
    font-size: 4vw;
  }

}



/*responsive feature for about page*/
@media screen and (max-width: 1295px) {
  .about_gallery{
      grid-template-areas:
      'gallery_title gallery_title gallery_title gallery_title gallery_title gallery_title'
      'album1 album1 album2 album2 album3 album3'
      'none1  album4 album4 album5 album5 none2';
      grid-template-columns: repeat(6, 9rem) ;
      grid-template-rows: 7rem 14.5rem 14.5rem;
      justify-content: center;
      grid-column-gap: 1rem;
}

@media screen and (max-width: 965px) {
  .about_gallery{
      grid-template-areas:
      'gallery_title gallery_title gallery_title gallery_title'
      'album1 album1 album2 album2'
      '..... album3 album3  ......'
      'album4 album4 album5 album5 ';
      grid-template-columns: repeat(4, 9rem) ;
      grid-template-rows: 7rem 14.5rem 14.5rem 14.5rem;
      justify-content: center;
      grid-column-gap: 1rem;
    }
    .album3{
      margin-top: 1.5rem;
    }
    .album4, .album5{
      margin-top: 3rem;
    }
}

@media screen and (max-width: 655px){
  .about_gallery{
      grid-area: about_gallery;
      display: grid;
      grid-template-areas:
      'gallery_title'
      'album1'
      'album2'
      'album3'
      'album4'
      'album5';
      grid-template-columns: 90%;
      grid-template-rows: 7rem repeat(5, 19rem);
      justify-content: center;
      grid-row-gap: 1rem;
    }

    .about_report{
      grid-area: about_report;
      display: grid;
      grid-template-areas:
      'report_title'
      'report1'
      'report2';
      grid-template-columns: 18rem;
      grid-template-rows: 8rem 25rem 25rem;
      grid-row-gap: 2.5rem;
      justify-content: center;
      padding-top: 3rem;
      padding-bottom: 5rem;

    }

    .about_banner{

      height: 39rem;
    }
    .about_banner h1{
      font-size: 7.2vw;
    }
    .about_banner + h2{
      font-size: 6.2vw;
    }
    .about_mainContent h3{
      font-size: 5.2vw;
    }
    .about_mainContent h4{
      font-size: 4.4vw;
    }
    .about_mainContent p, footer p{
      font-size: 4vw;
    }

}


/*resonsive design for For organizations page*/

@media screen and (max-width: 1208px) {

  .FO_industry{
    grid-template-areas:
    'title title title'
    'FO_industry_ESD FO_industry_judge FO_industry_sponsor';
    grid-template-columns: repeat(3, 17.85rem);
    grid-template-rows: 7rem 23.45rem;
    justify-content: center;
    grid-column-gap: 1rem;
    }
    .cardContent p{
      font-weight: 600;
      margin: 0.3rem;
      line-height: 1.5rem;
      font-size: 1.2rem;
    }
  }

  .FO_school{
    grid-area: FO_school;
    display: grid;
    grid-template-areas:
    'title'
    'FO_school_CSW';
    grid-template-columns:  17.85rem;
    grid-template-rows: 7rem 23.45rem;
    justify-content: center;
    padding-bottom: 5rem;

  }
}

@media screen and (max-width: 915px){

  .FO_industry{
    grid-template-areas:
    'title title title title title title'
    '..... FO_industry_ESD FO_industry_ESD FO_industry_judge FO_industry_judge ....'
    '... ... FO_industry_sponsor FO_industry_sponsor .. ..';
    grid-template-columns: repeat(6, 8.92rem);
    grid-template-rows: 7rem 23.45rem 23.45rem;
    justify-content: center;
    grid-column-gap: 1rem;
    }

    .FO_industry_sponsor{
      margin-top:1rem;
    }

}

@media screen and (max-width: 800px){
  .FO_industry{
    grid-area: FO_industry;
    display: grid;
    grid-template-areas:
    'title'
    'FO_industry_ESD'
    'FO_industry_judge'
    'FO_industry_sponsor';
    grid-template-columns:  23.75rem;
    grid-template-rows: 8rem repeat(3, 31.25rem);
    justify-content: center;
    grid-row-gap: 1rem;
  }
  .FO_school{
    grid-area: FO_school;
    display: grid;
    grid-template-areas:
    'title'
    'FO_school_CSW';
    grid-template-columns:  23.75rem;
    grid-template-rows: 8rem 31.25rem;
    justify-content: center;
    padding-bottom: 5rem;
  }
  .cardContent p{
    font-weight: 600;
    margin: 0.8rem;
    line-height: 2.4rem;
  }
  .FO_banner{
    height: 39rem;
  }
  .FO_banner h1{
    font-size: 7.2vw;
  }
  .FO_banner + h2{
    font-size: 3.2vw;
  }
  .FO_mainContent h3{
    font-size: 3.8vw;
  }
  .FO_mainContent h4{
    font-size: 3.4vw;
  }
  .FO_mainContent p, footer p{
    font-size: 3vw;
  }
}





/*resources page responsive design */
@media screen and (max-width: 1415px){

  .res_display{
    grid-template-areas:
    'resource1-1 resource1-2 resource1-3'
    'content1 content2 content3';
    grid-template-columns: repeat(3, 21rem);
    grid-template-rows: 15rem 15rem;
    height: 50rem;
    grid-column-gap:1rem;
    padding-top: 2%;
    text-decoration: none;
  }


}

@media screen and (max-width: 1060px){

  .res_display{
    grid-template-areas:
    'resource1-1 resource1-1 resource1-2 resource1-2'
    'content1 content1 content2 content2'
    '..... resource1-3 resource1-3 ....'
    '..... content3 content3 ....';
    grid-template-columns: repeat(4, 10.5rem);
    grid-template-rows: 15rem 25rem 15rem 25rem;
    height: 80rem;
    grid-column-gap:1rem;
    padding-top: 2%;
    text-decoration: none;
  }

}

@media screen and (max-width: 738px){

  .res_display{
    grid-template-areas:
    'resource1-1'
    'content1'
    'resource1-2'
    'content2'
    'resource1-3'
    'content3';
    grid-template-columns: 28rem;
    grid-template-rows: 20rem 28rem 20rem 28rem 20rem 28rem;
    height: 150rem;
    padding-top: 2%;
    text-decoration: none;
  }

  .res_banner{
    height: 39rem;
  }
  .res_banner h1{
    font-size: 7.2vw;
  }
  .res_banner + h2{
    font-size: 3.2vw;
  }
  .res_mainContent h3{
    font-size: 3.8vw;
  }
  .res_mainContent h4{
    font-size: 3.4vw;
  }
  .res_mainContent p, footer p{
    font-size: 4.2vw;
  }
}





/*navigation responsive design*/
@media screen and (max-width: 1200px) {
  .navigation{
    grid-template-columns: 50% 50%;
    grid-template-areas:
    'logo socialMedia'
    'links links';
    height: 6rem;
  }

  .navigationLinks ul{
    justify-content:space-evenly;
  }

}

@media screen and (max-width: 980px) and (min-width: 506px){
  .navigation{
    grid-template-columns: 50% 50%;
    grid-template-areas:
    'logo socialMedia'
    'links links';
    height: 6rem;
  }
  .navigationLinks ul{
    justify-content:flex-start;
  }
  .navigationLogo{
    justify-content: flex-start;
  }
  .navigationSocialMedia{
    justify-content: flex-start;
  }

}


@media screen and (max-width: 505px) and (min-width: 0px){
  .navigation{
    grid-template-columns: 100%;
    grid-template-areas:
    'logo'
    'socialMedia'
    'links';
    height: 12rem;
    align-content: center;
  }
  .navigationLinks ul{
    justify-content:center;
  }

  .sideNav{
    margin-top: 70%;
  }
  .banner{
    width: 100%;
    background-position: 70% 35%;
  }

}