/*                Variables               */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans:900");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Base Styling */
body {
  font-family: "Poppins", sans-serif;
  line-height: 1.5;
}

a {
  color: #333;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  width: 100%;
}

/* Utility Classes */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 0 2rem;
  overflow: hidden;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 5px;
  background: #333;
  color: #fff;
  padding: 0.5rem 1.5rem;
  text-align: center;
  font-size: 1.5rem;
}

.btn-apply {
  color: #000;
  background: #0085b5;
  padding: 0.7rem;
  width: 80%;
}

.btn-closed {
  color: #ddd;
  background: #3b3737;
  padding: 0.7rem;
  width: 80%;
  border: 3px #ddd solid;
}

.btn-rule {
  color: #fff;
  background: #0f4c75;
  padding: 0.7rem;
  width: 80%;
}

.btn:hover {
  opacity: 0.9;
}

.btn-closed:hover {
  opacity: 1;
}

.py-1 {
  padding: 1rem 0;
}

.py-2 {
  padding: 2rem 0;
}

.py-3 {
  padding: 3rem 0;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 2rem;
}

.p-3 {
  padding: 3rem;
}

.navbar-fixed {
  top: 1rem;
  z-index: 100;
  position: -webkit-sticky;
  position: sticky;
  width: 70%;
}

.sect-head {
  font-family: "Cairo", sans-serif;
  font-size: 3.5rem;
  text-align: center;
  padding: 3rem 0 0 0;
}

.bottom-line-white {
  height: 6px;
  width: 5rem;
  border-radius: 25px;
  background: #fff;
  display: block;
  margin: 0 auto 1.5rem auto;
}

.bottom-line-black {
  height: 6px;
  width: 5rem;
  border-radius: 25px;
  background: #000;
  display: block;
  margin: 0 auto 1.5rem auto;
}

.bottom-line-black::before {
  display: none;
}

#banner {
  background-color: #1b262c;
  width: 100%;
  height: 110vh;
  overflow: hidden;
}

#banner .banner-img {
  background: url("../img/banner.png") no-repeat center center/cover;
  height: 60vh;
}

#banner .call-to-action .container {
  height: 50vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#banner .call-to-action .date {
  color: #fff;
}

#banner .call-to-action .lastDate {
  color: aliceblue;
  margin-top: 0.4rem;
}

#banner .call-to-action .l-heading {
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: -0.5rem;
}

#main-nav {
  position: -webkit-sticky;
  position: sticky;
  background: #fff;
  border-radius: 10px;
  width: 70%;
  margin: -48.2px auto;
  z-index: 100;
}

#main-nav .container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 3fr auto 6fr;
      grid-template-columns: 2fr 3fr auto 6fr;
  padding: 0 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.menu-toggle .bar {
  width: 25px;
  height: 3px;
  margin: 5px auto;
  border-radius: 30px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #000;
}

#main-nav .logo {
  width: 90px;
}

#main-nav ul {
  -ms-grid-column-align: end;
      justify-self: end;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[7];
      grid-template-columns: repeat(7, auto);
}

#main-nav ul li a {
  padding: 0.75rem;
  font-weight: bold;
  border-radius: 3px;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  text-transform: uppercase;
}

#main-nav ul li a:hover {
  background: #13277538;
  color: #132775;
}

#main-nav .social {
  -ms-grid-column-align: center;
      justify-self: center;
}

#main-nav .social a {
  margin-right: 0.1rem;
}

#main-nav .social a #facebook,
#main-nav .social a #instagram,
#main-nav .social a #mail {
  -webkit-transition: color 250ms ease-in;
  transition: color 250ms ease-in;
}

#main-nav .social a:hover #facebook {
  color: #3b5998;
}

#main-nav .social a:hover #instagram {
  color: #d6249f;
}

#intro {
  padding: 6rem 0 6rem;
  min-height: 200px;
  background: #74bef0;
}

#intro .container {
  display: -ms-grid;
  display: grid;
  max-width: 1300px;
  grid-gap: 3rem;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

#intro .container .btn-apply {
  width: 60%;
  font-size: 2rem;
  margin-bottom: 20px;
}

#intro .container .clg .sect-head {
  font-size: 4.5rem;
}

#intro .container .clg p {
  font-size: 1.3rem;
}

#intro .container .clg .p1 {
  margin-top: -1rem;
}

#intro .container .clg .p2 {
  margin: 1rem 0;
  font-size: 1.4rem;
}

#intro .container .clg .p3,
#intro .container .clg .p4 {
  font-size: 1.6rem;
}

#intro .container .clg .p4 {
  margin-bottom: 3rem;
}

#intro .container .logo-div .clg-logo {
  width: 240px;
  background-color: #bbe1fa;
  padding: 0.9rem 2rem;
  border-radius: 2rem;
}

#intro .container .logo-div .intro-logo {
  margin-top: 2rem;
  width: 450px;
}

#home {
  min-height: 200px;
  background: #a6f6f1;
  padding: 5rem 0;
}

#home .container {
  display: -ms-grid;
  display: grid;
  grid-gap: 3rem;
  -ms-grid-columns: 0.65fr 1fr;
      grid-template-columns: 0.65fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

#home .container img {
  margin: 5rem 0 0 0;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

#home .container p {
  font-size: 1.05rem;
}

#about {
  min-height: 200px;
  background: #74bef0;
  color: #000;
  padding-bottom: 5rem;
}

#about p {
  font-size: 1.2rem;
}

#about ul li {
  margin-bottom: 1rem;
}

#about ul li div {
  font-size: 1.8rem;
}

#about ul li p {
  padding-left: 1rem;
}

#about .rulebook {
  display: none;
  text-align: center;
  margin-top: 2rem;
}

#themes {
  min-height: 200px;
  background: #bbe1fa;
  padding: 1rem;
}

#themes .container {
  max-width: 1400px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-gap: 1rem;
}

#themes .card {
  position: relative;
  cursor: pointer;
  margin: 0 auto;
}

#themes .card .face {
  width: 300px;
  height: 200px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#themes .card .face.face1 {
  position: relative;
  background: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}

#themes .card:hover .face.face1 {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#themes .card1:hover .face.face1 {
  background: #fd294d;
}

#themes .card2:hover .face.face1 {
  background: #f5ae49;
}

#themes .card3:hover .face.face1 {
  background: #00a655;
}

#themes .card4:hover .face.face1 {
  background: #f40d3a;
}

#themes .card5:hover .face.face1 {
  background: #ff4a41;
}

#themes .card6:hover .face.face1 {
  background: #ffbb3d;
}

#themes .card7:hover .face.face1 {
  background: #c5144a;
}

#themes .card8:hover .face.face1 {
  background: #ff6e41;
}

#themes .card9:hover .face.face1 {
  background: #fc1a74;
}

#themes .card10:hover .face.face1 {
  background: #eb9429;
}

#themes .card11:hover .face.face1 {
  background: #d6913d;
}

#themes .card12:hover .face.face1 {
  background: #00814e;
}

#themes .card13:hover .face.face1 {
  background: #004e6d;
}

#themes .card .face.face1 .content {
  opacity: 0.2;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#themes .card:hover .face.face1 .content {
  opacity: 1;
}

#themes .card .face.face1 .content img {
  max-width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#themes .card .face.face1 .content h3 {
  margin: 10px 0 0;
  padding: 0;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
}

#themes .card .face.face2 {
  position: relative;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
}

#themes .card:hover .face.face2 {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#themes .card .face.face2 .content p {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

#themes .card .face.face2 .content a {
  margin: 15px 0 0;
  display: inline-block;
  text-decoration: none;
  font-weight: 900;
  color: #333;
  padding: 5px;
  border: 1px solid #333;
}

#themes .card .face.face2 .content a:hover {
  background: #333;
  color: #fff;
}

#themes .last-card {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#result {
  background: #0f4c75;
  padding-bottom: 2rem;
}

#result .winp {
  text-align: center;
  font-size: 1.3rem;
  color: white;
  margin: 1rem 0;
}

#result .container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[3];
      grid-template-columns: repeat(3, auto);
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#result img {
  margin: 2.5rem 0;
  width: 150px;
}

@media (max-width: 767px) {
  #result .winp {
    font-size: 1.1rem;
    margin: 1rem 0;
  }
  #result .container {
    -ms-grid-columns: (auto)[1];
        grid-template-columns: repeat(1, auto);
  }
}

#result .winner-card {
  background: #e8ffff;
  border-radius: 8px;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  cursor: pointer;
  height: 300px;
  margin: 20px;
  padding: 0 20px;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.025);
  text-align: center;
  -webkit-transition: height 650ms;
  transition: height 650ms;
  width: 260px;
}

@media (max-width: 767px) {
  #result .winner-card {
    left: calc(50% - 20px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

#result .winner-card.expanded {
  height: 335px;
}

#result .label {
  margin-top: 30px;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: -webkit-transform 650ms;
  transition: -webkit-transform 650ms;
  transition: transform 650ms;
  transition: transform 650ms, -webkit-transform 650ms;
}

#result .winner-card.expanded .label {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#result .text2 {
  clip-path: polygon(0% 100%, 0% -80%, 15% -70%, 17.23% -53.59%, 23% -40%, 27.23% -28.94%, 35% -20%, 41.09% -13.59%, 50% -10%, 58.91% -13.23%, 65% -20%, 72.77% -28.23%, 77% -40%, 82.77% -54.65%, 85% -70%, 100% -80%, 100% 100%);
  -webkit-clip-path: polygon(0% 100%, 0% -80%, 15% -70%, 17.23% -53.59%, 23% -40%, 27.23% -28.94%, 35% -20%, 41.09% -13.59%, 50% -10%, 58.91% -13.23%, 65% -20%, 72.77% -28.23%, 77% -40%, 82.77% -54.65%, 85% -70%, 100% -80%, 100% 100%);
  -webkit-transition: -webkit-clip-path 650ms;
  transition: -webkit-clip-path 650ms;
  transition: clip-path 650ms;
  transition: clip-path 650ms, -webkit-clip-path 650ms;
}

#result .winner-card.expanded .text2 {
  clip-path: polygon(0% 100%, 0% -90%, 15% -80%, 17.23% -63.59%, 23% -50%, 27.23% -38.94%, 35% -30%, 41.09% -23.59%, 50% -20%, 58.91% -23.23%, 65% -30%, 72.77% -38.23%, 77% -50%, 82.77% -64.65%, 85% -80%, 100% -90%, 100% 100%);
  -webkit-clip-path: polygon(0% 100%, 0% -90%, 15% -80%, 17.23% -63.59%, 23% -50%, 27.23% -38.94%, 35% -30%, 41.09% -23.59%, 50% -20%, 58.91% -23.23%, 65% -30%, 72.77% -38.23%, 77% -50%, 82.77% -64.65%, 85% -80%, 100% -90%, 100% 100%);
}

#result .text-content {
  -webkit-transform: translateY(-160px);
          transform: translateY(-160px);
  -webkit-transition: -webkit-transform 650ms;
  transition: -webkit-transform 650ms;
  transition: transform 650ms;
  transition: transform 650ms, -webkit-transform 650ms;
}

#result .winner-card.expanded .text-content {
  -webkit-transform: translateY(-13px);
          transform: translateY(-13px);
}

#result .chevron {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 15px);
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: -webkit-transform 650ms;
  transition: -webkit-transform 650ms;
  transition: transform 650ms;
  transition: transform 650ms, -webkit-transform 650ms;
}

#result .winner-card.expanded .chevron {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

#result .title {
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 900;
  margin: 20px 0 12px;
  font-size: 1.3rem;
}

#result .body-text {
  padding: 0 20px;
}

#timeline {
  min-height: 200px;
  background: #e8ffff;
  /* Create Line */
  /* Boxes */
  /* Right side */
  /* Left Side */
  /* Dots */
  /* Arrow Base */
  /* Right Side Arrow */
  /* Left Side Arrow */
}

#timeline .container::before {
  border: none;
}

#timeline .days {
  font-size: 2rem;
  text-align: center;
  margin: 1rem 0 -3rem;
}

#timeline ul {
  padding: 50px 0;
}

#timeline ul li {
  list-style: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #0f4c75;
}

#timeline ul li h3 {
  text-align: center;
  font-size: 1.3rem;
  padding: 0.6rem 0;
}

#timeline ul li p {
  text-align: center;
  font-size: 1.1rem;
  padding: 0.5rem;
}

#timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 1rem;
  background: #0085b5;
  border-radius: 8px;
}

#timeline ul li:nth-child(odd) div {
  left: 40px;
}

#timeline ul li:nth-child(even) div {
  left: -434px;
}

#timeline ul li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 25px;
  height: 25px;
  background: inherit;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 50%;
  -webkit-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out;
}

#timeline div::before {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 0;
  height: 0;
  border-style: solid;
}

#timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #0085b5 transparent transparent;
}

#timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #0085b5;
}

#sponsors {
  min-height: 200px;
  background: #41aea9;
  padding-bottom: 3rem;
}

#sponsors .sub-head {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 0.7rem;
}

#sponsors p {
  text-align: center;
  line-height: 1.3;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

#sponsors .sponsor-grid-back {
  padding: 2rem 1rem;
  min-height: 200px;
  border-radius: 25px;
  background: #e8ffff;
  margin-top: 2rem;
}

#sponsors .sponsor-grid-back .sponsor-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[3];
      grid-template-columns: repeat(3, auto);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 2rem;
}

#sponsors .sponsor-grid-back .sponsor-grid .sponsor {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 300px auto;
      grid-template-rows: 300px auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sponsors .sponsor-grid-back .sponsor-grid .sponsor img {
  width: 300px;
}

#sponsors .sponsor-grid-back .sponsor-grid .sponsor .sponsor-title {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
}

#sponsors .sponsor-grid-back .last-sponsor {
  margin: 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[3];
      grid-template-columns: repeat(3, auto);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 2rem;
}

#sponsors .sponsor-grid-back .last-sponsor .sponsor {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 300px auto;
      grid-template-rows: 300px auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sponsors .sponsor-grid-back .last-sponsor .sponsor img {
  width: 300px;
}

#sponsors .sponsor-grid-back .last-sponsor .sponsor .sponsor-title {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
}

#faq {
  min-height: 200px;
  background: #0f4c75;
  color: white;
}

#faq .question-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  grid-gap: 0.5rem;
  padding: 1rem 0 4rem;
}

#faq .question-grid .grid1 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  grid-gap: 1rem;
}

#faq .collapsible {
  font-family: "Poppins", sans-serif;
  background-color: #e8ffff;
  color: #333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 3px solid #1b262c;
  border-radius: 5px;
  text-align: left;
  outline: none;
  font-size: 1.2rem;
  color: #1b262c;
}

#faq .active,
#faq .collapsible:hover {
  border-color: #74bef0;
}

#faq .collapsible:after {
  content: "\002B";
  color: #333;
  font-weight: bolder;
  font-size: 1.5rem;
  float: right;
  margin-left: 5px;
}

#faq .active:after {
  content: "\2212";
}

#faq .content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.1s ease-out, padding 0.1s linear, opacity 0.1s ease-in;
  transition: max-height 0.1s ease-out, padding 0.1s linear, opacity 0.1s ease-in;
  background-color: #e8ffff;
  border-bottom: 3px solid #74bef0;
  border-left: 3px solid #74bef0;
  border-right: 3px solid #74bef0;
  opacity: 0;
  font-size: 1.1rem;
  color: #1b262c;
}

#contact {
  min-height: 200px;
  background: #213e3b;
  padding-bottom: 2rem;
  color: #f4f4f4;
}

#contact p {
  text-align: center;
  font-size: 1.5rem;
}

#contact .num {
  -webkit-transition: all 250ms ease-in;
  transition: all 250ms ease-in;
  color: #f4f4f4;
}

#contact .num:hover {
  color: springgreen;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

#contact .social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1rem;
}

#contact .social a {
  color: #fff;
  text-align: center;
  margin-right: 0.5rem;
}

#contact .social a #facebook,
#contact .social a #instagram,
#contact .social a #mail,
#contact .social a #twitter,
#contact .social a #linkedin,
#contact .social a #youtube {
  -webkit-transition: color 250ms ease-in;
  transition: color 250ms ease-in;
}

#contact #mail {
  display: none;
}

#contact .social a:hover #facebook {
  color: #3b5998;
}

#contact .social a:hover #instagram {
  color: #d6249f;
}

#contact .social a:hover #mail {
  color: red;
}

#contact .social a:hover #twitter {
  color: #00acee;
}

#contact .social a:hover #linkedin {
  color: #0e76a8;
}

#contact .social a:hover #youtube {
  color: red;
}

#footer {
  background: #000;
}

#footer .container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
}

#footer .container a {
  color: #fff;
}

#footer .container .logo {
  width: 80px;
}

@media screen and (max-width: 1500px) and (min-width: 601px) {
  .social {
    display: none;
  }
  #mail {
    display: none;
  }
  #main-nav .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto 3fr;
        grid-template-columns: 1fr auto 3fr;
    padding: 1rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #themes .container {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .sect-head {
    font-size: 2.7rem;
  }
  #main-nav .social {
    display: none;
  }
  #main-nav ul {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    margin: 0;
    position: absolute;
    top: -50%;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 100%;
    margin-left: -1rem;
  }
  #main-nav .nav-menu.active {
    background-color: #fff;
    top: 90px;
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    border-radius: 7px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  #main-nav .nav-links {
    text-align: center;
    line-height: 40px;
  }
  #main-nav #mobile-menu {
    position: absolute;
    top: 30%;
    right: 10%;
    z-index: 200;
  }
  #main-nav .menu-toggle .bar {
    display: block;
    cursor: pointer;
  }
  #main-nav .menu-toggle:hover {
    cursor: pointer;
  }
  #main-nav #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
  }
  #main-nav #mobile-menu.is-active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
  }
  #main-nav #mobile-menu.is-active .bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
  }
  #banner .banner-img {
    height: 55vh;
  }
  #banner .call-to-action .container {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    text-align: center;
    grid-gap: 2rem;
  }
  #banner .call-to-action .container .lastDate {
    margin-left: 0;
  }
  #intro .container {
    display: -ms-grid;
    display: grid;
    grid-gap: 1rem;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  #intro .container .clg {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #intro .container .clg .sect-head {
    font-size: 3rem;
  }
  #intro .container .clg p {
    font-size: 1rem;
  }
  #intro .container .clg .p1 {
    margin-top: -1rem;
  }
  #intro .container .clg .p2 {
    margin: 1rem 0;
    font-size: 1.2rem;
  }
  #intro .container .clg .p3,
  #intro .container .clg .p4 {
    font-size: 1.4rem;
  }
  #intro .container .clg .p4 {
    margin-bottom: 1rem;
  }
  #intro .container .logo-div {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  #intro .container .logo-div .intro-logo {
    width: 250px;
    margin-bottom: -1rem;
  }
  #home .container {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  #home .container p {
    font-size: 1rem;
  }
  #about p {
    font-size: 1rem;
  }
  #about ul li {
    margin-bottom: 1rem;
  }
  #about ul li div {
    font-size: 1.3rem;
    font-weight: 500;
  }
  #about ul li p {
    padding-left: 1rem;
  }
  #about .rules {
    display: none;
  }
  #about .rulebook {
    display: block;
  }
  #themes .container {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  #themes .card .face.face1 {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #themes .card .face.face1 .content {
    opacity: 1;
  }
  #themes .card .face.face2 {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #themes .last-card {
    margin-top: 1rem;
  }
  #timeline .days {
    text-align: left;
  }
  #timeline ul li {
    margin-left: 20px;
  }
  #timeline ul li div {
    width: calc(100vw - 100px);
  }
  #timeline ul li:nth-child(even) div {
    left: 40px;
  }
  #timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #0085b5 transparent transparent;
  }
  #sponsors {
    min-height: 200px;
    background: #41aea9;
    padding-bottom: 3rem;
  }
  #sponsors .sub-head {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 0.7rem;
  }
  #sponsors p {
    text-align: center;
    line-height: 1.2;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  #sponsors .sponsor-grid-back .sponsor-grid {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  #sponsors .sponsor-grid-back .sponsor-grid .sponsor {
    -ms-grid-rows: auto;
        grid-template-rows: auto;
  }
  #sponsors .sponsor-grid-back .sponsor-grid .sponsor img {
    width: 250px;
  }
  #sponsors .sponsor-grid-back .last-sponsor {
    margin-top: 2rem;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  #sponsors .sponsor-grid-back .last-sponsor .sponsor {
    -ms-grid-rows: auto;
        grid-template-rows: auto;
  }
  #sponsors .sponsor-grid-back .last-sponsor .sponsor img {
    width: 250px;
  }
  #faq .question-grid {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #contact p {
    font-size: 1.4rem;
  }
  #contact #mail {
    display: block;
  }
  #contact #mailid {
    display: none;
  }
  #footer div {
    text-align: center;
  }
  #footer .container {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
  }
  #footer .dept {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */