html{
    width: 100%;
    margin: 0;
    padding:0;
    min-width: 330px;
  }
  body{
    font-family: "News Cycle", sans-serif;
    overflow-x: hidden;
  }
  
  h1, h2{
    font-family: din-condensed, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: black;
  }
  
  a{
    color: #0D1D2C;
  }
  
  a:hover{
    color: #212529;
    text-decoration: none;
  }
  
  a.icon-nav{
    color: white;
  }
  
  a.icon-nav:hover{
    color: #e2b6de;
  }
  
  #mlh-trust-badge{
    display:block;
    max-width:150px;
    min-width:60px;
    width:10%;
    position:absolute;
    top: 60px;
    right: 0px;
  }
  
  .hexagon {
    text-align: center;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    }
  .hexagon-in1 {
    text-align: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
  .hexagon-in2 {
    text-align: center;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-position: top;
    background-size: 45%;
    /* background-image: url(http://placekitten.com/240/240); */
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
  
  #textshadow 
  {     
    color: white;
    text-shadow:
     -1px 1px 0 #050000,  
      0px 1px 0 #000000,
      -1px 0px 0 #000000,
       0px 0px 0 #000000;
  }
  
  .image-crop {
    width: 500px; /* Set the desired width */
    height: 250px; /* Set the desired height */
    overflow: hidden; /* Hide any content that overflows the container */
    /* margin-bottom: 20px; */
  }
  
  .image-bee{
    width: 100%;
    height: 100%;
    background-size: contain; /* Crop and scale the background image to cover the container */
    background-repeat: no-repeat;
    background-position: center;
  }
  
  
  .hexagon1 {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
    }
  .director-hex {
    text-align: center;
  }
  
  .custom-nav{
      background-color: #fff;
      color: #000;
  }
  
  .landing{
    position: relative;
    text-align: center;
  }
  .container-landing{
    height:400px;
    margin: 0;
    padding: 0;
    background-color: #0D1D2C;
  }
  
  
  .headings{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 30%;
    /* width: 10%; */
    width: 200px;
    height: 10%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(15px);
  }

  .modal-content-popup {
      padding: 30px;
      border-radius: 5px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      text-align: center;
      background-color: #6F939B;
      width: 35%;
  }

  .apply-popup {
      margin-top: 10px;
      padding: 10px 20px;
      background: #000;
      color: #fff;
      border: none;
      width: 30%;
      /* height: 90%; */
      border-radius: 5px;
      cursor: pointer;
  }

  .apply-popup-img {
    width: 125px;
    margin-top: -110px;
    border-radius: 50%;
  }

  .close-btn {
      margin-top: 10px;
      padding: 10px 20px;
      background: #c4ddca78;
      color: #000;
      border: none;
      width: 30%;
      /* height: 90%; */
      border-radius: 5px;
      cursor: pointer;
  }

  .button {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 217px;
    height: 50px;
    font-size: 1.1em;
    text-align: center;
    text-transform: uppercase;
    /* cursor: pointer; */
    text-decoration:none;
    font-family: 'News Cycle';
    font-weight:900;
    letter-spacing: 0.045em;
    background-color: #6F939B;
    border: 2px solid #fff;
  }
  
  
  .btn-primary {
  
    width: 150px;
    color: #212529;
    background-color: #c4ddca;
    border-color: #6F939B
  
  }
  
  .btn-primary:hover {
    color: #212529;
    background-color: #8d95d1;
    border-color: #8d95d1
  }
  
  .btn-primary:focus,
  .btn-primary.focus {
    box-shadow: 0 0 0 .2rem #8d95d1
  }
  
  .btn-primary.disabled,
  .btn-primary:disabled {
    color: #212529;
    background-color: #6F939B;
    border-color: #8d95d1
  }
  
  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:not(:disabled):not(.disabled).active,
  .show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #6F939B;
    border-color: #8d95d1
  }
  
  .btn-primary:not(:disabled):not(.disabled):active:focus,
  .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem hwb(307 40% 22% / 0.5)
  }
  
  .btn-outline-primary {
    color: rgb(255, 255, 255);
    background-color: transparent;
    background-image: none;
    border-color: #6F939B
  }
  
  
  .Btn {
    width: 250px;
    height: 60px;
    border: none;
    /* left: 24%; */
    border-radius: 10px;
    background: linear-gradient(to right, #aeb2d4,#9499C7,#7980B9,#8d95d1,#8d95d1,#F0FFFF);
    background-size: 250%;
    background-position: left;
    color: #c4ddca;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
  }
  
  .Btn::before {
    position: absolute;
    content: "Check out last year's photos!";
    color: #8d95d1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .Btn:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Btn:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Btn:active {
    transform: scale(0.95);
  }
  
  /*Volunteer Application Button*/
  .Vol {
    width: 250px;
    height: 60px;
    border: none;
    /* left: 24%; */
    border-radius: 10px;
    background: linear-gradient(to right,#aeb2d4,#9499C7,#7980B9,#8d95d1,#8d95d1,#F0FFFF);
    background-size: 250%;
    background-position: left;
    color: #fcfcfc;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    
  }
  
  .Vol::after {
    position: absolute;
    content: "Volunteer Applications";
    color: #e2b6de; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .Vol:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Vol:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Vol:active {
    transform: scale(0.95);
  }
  
  /*Mentor Application Button*/
  
  .Mentor {
    width: 250px;
    height: 60px;
    border: none;
    /* left: 24%; */
    border-radius: 10px;
    background: linear-gradient(to right,#aeb2d4,#9499C7,#7980B9,#8d95d1,#8d95d1,#F0FFFF);
    background-size: 250%;
    background-position: left;
    color: #c4ddca;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
  }
  
  .Mentor::before {
    position: absolute;
    content: "Be a Mentor";
    color: #e2b6de;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .Mentor:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Mentor:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Mentor:active {
    transform: scale(0.95);
  }
  
  /*Mailing List*/
  
  .Mail {
    width: 250px;
    height: 60px;
    border: none;
    /* left: 24%; */
    border-radius: 10px;
    background: linear-gradient(to right,#aeb2d4,#9499C7,#7980B9,#8d95d1,#8d95d1,#F0FFFF);
    background-size: 250%;
    background-position: left;
    color: #c4ddca;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
  }
  
  .Mail::before {
    position: absolute;
    content: "Subscribe to our Mailing List";
    color: #8d95d1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .Mail:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Mail:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Mail:active {
    transform: scale(0.95);
  }
  
  
  #textshadow 
  {     
    color: white;
    text-shadow:
     -1px 1px 0 #000000,  
      0px 1px 0 #000000,
      -1px 0px 0 #000000,
       0px 0px 0 #000000;
  }
  
  
  .btn-outline-primary:hover {
    color: #222;
    background-color: white;
    border-color: white
  }
  
  .btn-outline-primary:focus,
  .btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem #b2d6c8;
  }
  
  .btn-outline-primary.disabled,
  .btn-outline-primary:disabled {
    color: rgb(164, 219, 202);
    background-color: transparent
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active,
  .btn-outline-primary:not(:disabled):not(.disabled).active,
  .show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #6F939B;
    border-color: #6F939B
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
  .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(205, 156, 202, 0.5)
  }
  .btn-secondary {
    width: 248px;
    color: #212529;
    background-color: white;
    border-color: rgb(0, 0, 0)
  
  }
  
  .btn-secondary:hover {
    color: #212529;
    background-color: rgb(206, 194, 207);
    border-color: white
  }
  
  .btn-secondary:focus,
  .btn-secondary.focus {
    box-shadow: 0 0 0 .2rem #6F939B
  }
  
  .btn-secondary.disabled,
  .btn-secondary:disabled {
    color: #212529;
    background-color: #6F939B;
    border-color: #6F939B
  }
  
  .btn-secondary:not(:disabled):not(.disabled):active,
  .btn-secondary:not(:disabled):not(.disabled).active,
  .show>.btn-secondary.dropdown-toggle {
    color: #212529;
    background-color: #6F939B;
    border-color: #c17c89
  }
  
  .btn-secondary:not(:disabled):not(.disabled):active:focus,
  .btn-secondary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(205, 156, 202, 0.5)
  }
  
  .btn-outline-secondary {
    color: rgb(255, 255, 255);
    background-color: transparent;
    background-image: none;
    border-color: white
  }
  
  
  #textshadow 
  {     
    color: white;
    text-shadow:
     -1px 1px 0 #ffffff,  
      0px 1px 0 #ffffff,
      -1px 0px 0 #ffffff,
       0px 0px 0 #ffffff;
  }
  #textshadow2 
  {     
    color: white;
    text-shadow:
     -1px 1px 0 #000000,  
      0px 1px 0 #000000,
      -1px 0px 0 #000000,
       0px 0px 0 #000000;
  }
  
  
  .btn-outline-secondary:hover {
    color: #222;
    background-color: white;
    border-color: white
  }
  
  .btn-outline-secondary:focus,
  .btn-outline-secondary.focus {
    box-shadow: 0 0 0 .2rem rgba(205, 156, 202, 0.5)
  }
  
  .btn-outline-secondary.disabled,
  .btn-outline-secondary:disabled {
    color: rgb(167, 212, 212);
    background-color: transparent
  }
  
  .btn-outline-secondary:not(:disabled):not(.disabled):active,
  .btn-outline-secondary:not(:disabled):not(.disabled).active,
  .show>.btn-outline-secondary.dropdown-toggle {
    color: #212529;
    background-color: #6F939B;
    border-color: #6F939B
  }
  
  .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
  .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-prisecondarymary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(205, 156, 202, 0.5)
  }
  
  
  /* Email Sign-Up Modal */
  /* Full-width input fields */
  input[type=text], input[type=email] {
    width: 65%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
  }
  
  /* Add a background color when the inputs get focus */
  input[type=text]:focus, input[type=email]:focus {
    background-color: #ddd;
    outline: none;
  }
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #dbc3d3;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  .disable{
    cursor: not-allowed;
  
  }
  
  /* The Close Button */
  /* .close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  } */
  
  .logo{
    width: 200px;
  }
  
  /* About */
  #about{
    background-color: #ffffff;
    /* padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%; */
    display: inline-block;
    width: 100%;
  }
  
  .about-heading{
    font-size: 2em;
    color: #6F939B;
    text-align: center;
    font-family: 'News Cycle';
  }
  
  .about-para{
    padding-top: 10px;
    text-align: left;
    font-family: 'News Cycle';
    font-size: 1.2em;
  }
  
  .about-para-state{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
    font-style: italic;
  }
  
  .about-bee{
    width: 200px;
    transform: rotate(15deg);
  }
  
  .hopper-heading{
    font-size: 2em;
    color: #744063;
    text-align: center;
    font-family: 'News Cycle';
  }
  
  .hopper-para{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
  }
  
  .hopper-para-state{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
    font-style: italic;
  }
  
  .hopper-bee{
    width: 200px;
    transform: rotate(15deg);
  }
  
  
  /* WHITE BG */
  .whitebg{
    background-color: #ffffff;
    padding: 5%;
    /* display: inline-block; */
  }
  
  .whitebg-heading{
    font-size: 2em;
    color: #c18893;
    text-align: center;
    font-family: 'News Cycle';
  }
  
  .whitebg-para{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
  }
  
  .whitebgBLUETXT-para{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
    color: #c18893;
  }
  
  /* LIGHT GREEN BG */
  .greenbg{
    background-color: #c4ddca;
    padding: 5%;
    display: inline-block;
  }
  
  .greenbg-heading{
    font-size: 2em;
    color: #000000;
    text-align: center;
    font-family: 'News Cycle';
  }
  
  .greenbg-para{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
  }
  
  .greenbgBLUETXT-para{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
    color: #8d95d1;
  }
  
  /* GREY BG */
  .greybg{
    background-color: #e9e9e9;
    padding: 5%;
    display: inline-block;
  }
  
  .greybg-heading{
    font-size: 2em;
    color: #000000;
    text-align: center;
    font-family: 'News Cycle';
  }
  
  .greybg-para{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
  }
  
  .greybgBLUETXT-para{
    padding-top: 10px;
    text-align: center;
    font-family: 'News Cycle';
    font-size: 1.2em;
    color: #8d95d1;
  }
  
  /* Dark Section Speaker */
  .darkbg{
    background:#8d95d1;
    padding: 5%;
    /*display: inline-block;*/
  }
  
  .darkbg-heading{
    font-size: 2em;
    color: white;
    font-family: 'News Cycle';
    text-align: center;
  }
  
  .darkbg-para{
    padding-top: 10px;
    font-family: 'News Cycle';
    font-size: 1.2em;
    text-align: center;
    color: white;
  }
  
  /* Light Blue Section */
  .lightbg{
    background-color: #8d95d1;
    padding: 5%;
    /* display: inline-block; */
  }
  
  .lightbg-heading{
    font-size: 2em;
    color:#6F939B;
    font-family: 'News Cycle';
    text-align: center;
  }
  .lightbg-heading2{
    font-size: 2.3em;
    color: #6F939B;
    font-family: 'News Cycle';
    text-align: center;
  }
  
  .lightbg-heading3{
    font-size: 2em;
    color: #6F939B;
    font-family: 'News Cycle';
    text-align: left;
    transform: translateX(50%);
  }
  
  .lightbg-para{
    padding-top: 10px;
    font-family: 'News Cycle';
    font-size: 1.2em;
    text-align: center;
    color: #6F939B;
  }
  
  
  /* Image Tiles */
  .p-0 {
    padding: 0 !important;
  }
  
  
  .no-gutters {
    margin-right: 0;
    margin-left: 0;
  }
  
  .no-gutters > .col,
  .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
  
  
  
  .img-fluid {
    max-width: 100%;
    height: auto;
  }
  
  .img-circle {
      border-radius: 50%;
      display: block;
      margin-left: auto;
      margin-right: auto
  }
  
  .img-sq {
    filter: drop-shadow(0 0 0.25rem #8d95d1);
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px
  }
  
  .workshop-img{
    width: 200px;
    height: 200px;
  }
  
  #portfolio .container-fluid {
    max-width: 1920px;
  }
  
  #portfolio .container-fluid .portfolio-box {
    position: relative;
    display: block;
  }
  
  #portfolio .container-fluid .portfolio-box .portfolio-box-caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    opacity: 0;
    color: #fff;
    background: #6F939B;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
    text-align: center;
  }
  
  #portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category {
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  #portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name {
    font-size: 1.2rem;
  }
  
  #portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
  }
  
  /* Keynote */
  .hopper-para{
    /* padding-top: 75px; */
    text-align: left;
    font-family: 'News Cycle';
    font-size: 1em;
  }
  
  .blockquote-wrapper {
     display: flex;
     /* height: 100vh; */
  }
  
  /* Blockquote main style */
  .blockquote {
      position: relative;
      font-family: 'Poppins', sans-serif;
      padding: 15px;
      width: 250px;
      max-width: 600px;
      z-index: 1;
      margin: auto;
  }
  
  /* Blockquote right double quotes */
  .blockquote:after {
      position: absolute;
      content: "”";
      color: #aecbb5;
      font-size: 20em;
      line-height: 1;
      left: calc(50% - 3rem);
      bottom: -0.8em;
      z-index: 1;
  }
  
  /* Blockquote background */
  .blockquote::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
     background-color: #F9FFED;
      background-image: linear-gradient(45deg, #F9FFED 0%, #F9FFED 24%, #6F939B 49%, #F9FFED 75%, white 100%);
  
      background-size: 400% 400%;
      animation: gradientborders 8s ease infinite;
  }
  
  /* Blockquote background animation */
  @keyframes gradientborders {
    0%{background-position:0% 25%}
    50%{background-position:100% 76%}
    100%{background-position:0% 25%}
  }
  
  /* Blockquote header */
  .blockquote h1 {
      position: relative;
      background-color: white;
      color: #FFFFFF;
      font-size: 40px;
      text-align: center;
      font-weight: normal;
      line-height: 1;
      margin: 0;
      padding: 30px 30px 5px 30px;
  }
  
  /* increase header size after 600px */
  @media all and (min-width: 600px) {
      .blockquote h1 {
          font-size: 60px;
     }
  }
  
  /* Blockquote subheader */
  .blockquote h4 {
      position: relative;
      color: #8d95d1;
      background-color: white;
      text-transform: uppercase;
      font-size: 1rem;
      text-align: center;
      font-weight: normal;
      line-height: 1;
      letter-spacing: 5px;
      margin: -5px 0 0 0;
      padding: 20px 20px 5em 20px;
  }
  
  
  
  
  
  /* CFP */
  .cfp-section{
    display: block;
    text-align:center;
    background-color: #c4ddca;
    padding: 20px;
    border-bottom: 6px solid #c4ddca;
  }
  
  .cfp-section p{
    font-size: 1.3em;
  }
  
  .hackher413-cfp-logo{
    max-width: 300px;
      max-height: 250px;
      padding: 20px;
  }
  
  /* Sponsor */
  .sponsor-section{
    display: block;
    text-align:center;
    background-color: #ffffff;
    padding: 20px;
    border-bottom: 6px solid #fff;
  }
  
  .sponsor-section p{
    font-size: 1.3em;
  }
  
  .center-center{
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100vh;*/ /* 100% of the viewport height */
  }
  
  .hackher413-sponsor-logo{
    max-width: 200px;
      max-height: 150px;
      padding: 20px;
  }
  
  /* hexagons */
  /*#hexGrid {
    display: flex;
    flex-wrap: wrap;
    left: -100%;
    right: -100%;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    list-style-type: none;
  }
  
  .hex {
    position: relative;
    visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
  /* }
  
  .hex::after {
    content: '';
    display: block;
    padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
  /*}
  
  .hexIn {
    position: absolute;
    width: 96%;
    padding-bottom: 110.851%; /* = width / sin(60) */
    /*margin: 0 2%;
    overflow: hidden;
    visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    /*-webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
    -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
    transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  }
  
  .hexIn * {
    position: absolute;
    visibility: visible;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
  /*}
  
  .hexLink {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
    -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
    transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
    /* Add glowing neon effect */
  /*  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); /* Change color and size for desired effect */
   /* text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); /* Change color and size for desired effect */
  /*} */
  
  .hexagon-container {
    display: flex;
  }
  
  .hexagon-test {
    width: 200px;
    height: 110px;
    background-color: #db8db8;
    position: relative;
    margin: 50px 10px;
  }
  
  .hexagon-test:before,
  .hexagon-test:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
  }
  
  .hexagon-test:before {
    bottom: 100%;
    border-bottom: 50px solid #db8db8;
  }
  
  .hexagon-test:after {
    top: 100%;
    width: 0;
    border-top: 50px solid #db8db8;
  }
  
  .hexagon-inner-test {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }
  
  .hexagon-inner-image {
    width: 100%;
    height: 100%;
    /* background-color: red; */
  }
  
  .hexagon-inner-image img {
    width: 100%;
    height: 100%;
  }
  /* .hexagon-inner-test img {
    width: 100%;
    height: auto;
  } */
  
  .hex-grid {
    display: flex;
    flex-wrap: wrap;
    max-width: 90%; /* Adjust to your desired width */
  }
  
  .h {
    width: 100px; /* Adjust the hexagon size as needed */
    height: 115px; /* Adjust the hexagon size as needed */
    background-color: #ca6579; /* Hexagon background color */
    position: relative;
    margin: 20px; /* Adjust the margin to create spacing between hexagons */
    transform: rotate(120deg);
    margin-top: -58px; /* Adjust to center hexagons vertically */
  }
  
  .h img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Style hexagon corners to create a hexagonal shape */
  .h:before,
  .h:after {
    content: '';
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
  }
  
  .h:before {
    bottom: 100%;
    border-bottom: 29px solid #ca6579;
  }
  
  .h:after {
    top: 100%;
    width: 0;
    border-top: 29px solid #ca6579;
  }
  
  /* hexagons */
  #hexGrid {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
    margin-left: 3%;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    list-style-type: none;
    /*border-style: solid; */
  }
  
  .hex {
    position: relative;
    visibility:hidden;
    /*outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    /*border-style: solid;*/
    border: 4px solid #000;
  }
  .hex::after{
    content:'';
    display:block;
    padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
  }
  .hexIn{
    position: absolute;
    width:96%;
    padding-bottom: 110.851%; /* =  width / sin(60) */
    margin:0 2%;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
        -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
            transform: rotate3d(0,0,1,-60deg) skewY(30deg);
  }
  .hexIn * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  }
  .hexLink {
      display:block;
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
      overflow: hidden;
      -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
          -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
              transform: skewY(-30deg) rotate3d(0,0,1,60deg);
  }
  .hexLink::after {
    content:'';
    display:block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    /* z-index: 1; */
  }
  
  
  /*** HEX CONTENT **********************************************************************/
  .hex img {
    left: -100%;
    right: -100%;
    /* max-width: 100%; */
    position: absolute;
    /*width: auto;
    height: 100%;*/
    margin: 0 auto;
    -webkit-transform: rotate3d(0,0,0,0deg);
        -ms-transform: rotate3d(0,0,0,0deg);
            transform: rotate3d(0,0,0,0deg);
  }
  
  .hex h1, .hex p {
    width: 100%;
    padding: 5%;
    box-sizing:border-box;
    /* background-color: rgba(0, 128, 128, 0.8); */
    font-weight: 500;
    color: white;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
  }
  .hex h1 {
    bottom: 50%;
    padding-top:50%;
    font-size: 1.5em;
    z-index: 1;
    -webkit-transform:translate3d(0,-100%,0);
        -ms-transform:translate3d(0,-100%,0);
            transform:translate3d(0,-100%,0);
  }
  .hex h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 10%;
    text-align: center;
    border-bottom: 1px solid #fff;
  }
  .hex p {
    top: 50%;
    padding-bottom:50%;
    -webkit-transform:translate3d(0,100%,0);
        -ms-transform:translate3d(0,100%,0);
            transform:translate3d(0,100%,0);
  }
  
  
  /*** HOVER EFFECT  **********************************************************************/
  .hexLink:hover h1, .hexLink:focus h1,
  .hexLink:hover p, .hexLink:focus p{
    -webkit-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
  }
  .hexLink:hover::after {
    background-color: rgba(141, 149, 209, 0.75);
  }
  
  /*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
  
  /* Styles for 6-5 hexagons per row */
  /* @media (min-width: 1401px) {
    #hexGrid {
      padding-bottom: 3.6%;
    }
    .hex {
      width: calc(16.666% - 2.4%);
    }
    .hex:nth-child(11n+1) {
      margin-left: 4.8%;
    }
  } */
  
  @media  (min-width:1201px) { /* <- 5-4  hexagons per row */
    #hexGrid{
      padding-bottom: 4.4%
    }
    .hex {
      width: 20%; /* = 100 / 5 */
    }
    .hex:nth-child(9n+6){ /* first hexagon of even rows */
      margin-left:10%;  /* = width of .hex / 2  to indent even rows */
    }
  
     /* Styles for 6-5 hexagons per row
     #hexGrid {
      padding-bottom: 3.6%;
    }
    .hex {
      width: calc(16.666% - 2.4%);
    }
    .hex:nth-child(11n+6) {
      margin-left: 4.8%;
    } */
  }
  
  @media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
    #hexGrid{
      padding-bottom: 5.5%
    }
    .hex {
      width: 25%; /* = 100 / 4 */
    }
    .hex:nth-child(7n+5){ /* first hexagon of even rows */
      margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
    }
  }
  
  @media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
    #hexGrid{
      padding-bottom: 7.4%
    }
    .hex {
      width: 33.333%; /* = 100 / 3 */
    }
    .hex:nth-child(5n+4){ /* first hexagon of even rows */
      margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
    }
  }
  
  @media (max-width: 600px) { /* <- 2-1  hexagons per row */
    #hexGrid{
      padding-bottom: 11.2%
    }
    .hex {
      width: 50%; /* = 100 / 3 */
    }
    .hex:nth-child(3n+3){ /* first hexagon of even rows */
      margin-left:25%;  /* = width of .hex / 2  to indent even rows */
    }
  }
  
  @media (max-width: 400px) {
      #hexGrid {
          font-size: 13px;
      }
  }
  
  #lab_social_icon_footer a {
    color: #f0f0f0;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 40px;
  }
  
  #lab_social_icon_footer .social:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
  
  #lab_social_icon_footer .social {
    -webkit-transform: scale(0.8);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    /* Browser Variations: */
  
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
  }
  
  .social-media{
    padding: 20px;
    padding-top: 10%;
    background-color: #aecbb5;
  }
  
  /* Extra small devices (phones, 600px and down) */
  @media only screen and (max-width: 600px) {
    div{
      padding-left: 0;
      padding-right: 0;
    }
  
    .social-media{
      padding-top: 20%;
    }
  
    iframe{
      width: 110%;
      padding-top: 20px;
      margin: 0 auto;
    }
  
  
  
  }
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
    div{
      padding-left: 0;
      padding-right: 0;
    }
  
    .social-media{
      padding-top: 20%;
    }
    iframe{
      width: 600px;
      padding-top: 20px;
    }
  
  
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    div{
      padding-left: 0;
      padding-right: 0;
    }
  
    .social-media{
      padding-top: 10%;
    }
    iframe{
      width: 600px;
      padding-top: 20px;
    }
  
  
  }
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
  
    .social-media{
      padding-top: 10%;
    }
    iframe{
      width: 400px;
    }
    .vl{
      border-left: 3px dashed #c4ddca;
    }
    .coming-soon{
      padding-top: 20%;
      padding-bottom: 20%;
    }
  
  
  
  }
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
  
    .social-media{
      padding-top: 10%;
    }
    iframe{
      width: 200%;
    }
    
    .vl{
      border-left: 3px dashed #c4ddca;
    }
    .coming-soon{
      padding-top: 20%;
      padding-bottom: 20%;
    }
  
  
  }
  
  .text-left iframe {
    width: 100%;
  }
  
  
  
  /* Feature Area css
  ============================================================================================ */
  .feature_area {
    background: #f9f9ff; }
    .feature_area.feature_tow {
      background: #fff; }
      .feature_area.feature_tow .feature_item {
        background: #f9f9ff; }
        .feature_area.feature_tow .feature_item:hover {
          background: #fff; }
  
  .feature_inner {
    margin-bottom: -30px; }
  
  .feature_item {
    padding: 25px 20px;
    border-radius: 10px;
    transition: all 300ms linear 0s;
    background: #ffffff;
    margin-bottom: 30px; }
    .feature_item i {
      margin-bottom: 35px;
      display: block; }
      .feature_item i:before {
        margin-left: 0px;
        font-size: 60px;
        color: #ffffff;
        line-height: 60px; }
    .feature_item h4 {
        text-align: center;
      color: black;
      font-size: 19px;
      font-family: "Heebo", sans-serif;
      font-weight: bold;
      margin-bottom: 20px;
      text-transform: none; }
    .feature_item p {
      text-align: center;
      margin-bottom: 0px; }
    .feature_item .main_btn {
      padding: 0px 30px;
      line-height: 38px; }
    .feature_item:hover {
      box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
      border-color: #fff; }
      .feature_item:hover i:before {
        background: linear-gradient(to right, #aeb2d4 0%, #8d95d1 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; }
  
  /* End Feature Area css
  ============================================================================================ */
  .p_120 {
    padding-top: 120px;
    padding-bottom: 120px; }
  
  /* Main Title Area css
  ============================================================================================ */
  .main_title {
    text-align: center;
    margin-bottom: 75px; }
    .main_title h2 {
      font-family: "Heebo", sans-serif;
      font-size: 36px;
      color: #222222;
      font-weight: bold;
      margin-bottom: 15px;
      text-transform: uppercase; }
    .main_title p {
      font-size: 16px;
      font-family: "Roboto", sans-serif;
      line-height: 26px;
      color: #777777;
      margin-bottom: 0px;
      max-width: 570px;
      margin: auto; }
    .main_title.white h2 {
      color: #fff; }
    .main_title.white p {
      color: #fff;
      opacity: .6; }
  
  /* End Main Title Area css
  ============================================================================================ */
  /*---------------------------------------------------- */
  /* Welcome Area css
  ============================================================================================ */
  .welcome_inner .welcome_img {
    background: #eeeeee;
    margin-left: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px; }
    .welcome_inner .welcome_img img {
      margin-top: -30px; }
  
  .welcome_text {
    margin-top: 45px; }
    .welcome_text h4 {
      color: #222222;
      font-family: "Heebo", sans-serif;
      font-size: 36px;
      margin-bottom: 18px;
      text-transform: uppercase; }
    .welcome_text p {
      max-width: 495px;
      line-height: 24px;
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      margin-bottom: 40px; }
  
  .wel_item {
    border: 1px solid #eeeeee;
    padding: 30px 25px;
    border-radius: 5px; }
    .wel_item i {
      font-size: 24px;
      background: linear-gradient(to right, #8d95d1 0%, #6F939B 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
    .wel_item h4 {
      font-size: 24px;
      font-family: "Heebo", sans-serif;
      font-weight: bold;
      color: #222222;
      margin-bottom: 5px;
      margin-top: 10px; }
    .wel_item p {
      font-size: 14px;
      font-family: "Roboto", sans-serif;
      color: #777777;
      margin-bottom: 0px; }
  
  .tools_expert {
    box-shadow: 0px 8px 30px 0px rgba(153, 153, 153, 0.1);
    padding: 50px 35px; }
    .tools_expert h3 {
      color: #222222;
      font-size: 21px;
      text-transform: uppercase; }
    .tools_expert .skill_main .skill_item {
      margin-bottom: 18px; }
      .tools_expert .skill_main .skill_item:last-child {
        margin-bottom: 0px; }
      .tools_expert .skill_main .skill_item h4 {
        text-align: right;
        font-size: 14px;
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        color: #777777;
        margin-bottom: 15px; }
      .tools_expert .skill_main .skill_item .progress {
        height: 20px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid #eeeeee;
        padding-left: 5px;
        padding-right: 5px;
        box-shadow: 0px 20px 20px 0px rgba(132, 144, 255, 0.2); }
        .tools_expert .skill_main .skill_item .progress .progress-bar {
          width: 0%;
          transition: width .6s ease;
          height: 10px;
          border-radius: 5px;
          vertical-align: middle;
          align-self: center;
          background-image: -moz-linear-gradient(0deg, #8d95d1 0%, #c4ddca 100%);
          background-image: -webkit-linear-gradient(0deg, #8d95d1 0%, #c4ddca 100%);
          background-image: -ms-linear-gradient(0deg, #8d95d1 0%, #c4ddca 100%); }
  
  /* End Welcome Area css
  ============================================================================================ */
  /* Venue Section  */
  #venue-section{
    display: block;
    text-align:center;
    background:#8d95d1;
    padding: 20px;
    padding-top: 35px;
    border-bottom: 6px solid #E6F4F4;
  }
  .single-gallery-image {
    margin-top: 30px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    height: 200px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s; }
  
  .single-gallery-image:hover {
    opacity: .8; }
    /* End venue css
    ============================================================================================ */
  
  
    /* Last Year's Event  */
    .last-year{
      background-color: #8d95d1;
      padding: 3% 0;
    }
  
    .last-year-content{
      font-size: 1.1em;
    }
  
    .last-year-facts{
      text-align: left;
      list-style-type: square;
    }
  
    .last-year-pic{
      width: 100%;
      padding-top: 40px;
    }
  
    .highlight{
    background: linear-gradient(180deg,rgba(255,255,255,0) 60%, #8d95d1 40%);
    }
  
    .highlight:hover {
    background: linear-gradient(180deg,rgba(255,255,255,0) 80%, #8d95d1 40%);
    }
  
    .last-year-link{
      color: #fff;
      font-size: 1.1em;
      padding-left: 40px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
    }
  
  
  
    /* Team */
  
  .team{
    padding-top: 5%;
    background-image: linear-gradient(to bottom, #fff , #aecbb5);
  }
  
  
    /* Add some shadows to create a card effect */
  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
  
  .team-member {
    margin-bottom: 50px;
    text-align: center;
  }
  
  .team-member img {
    width: 225px;
    height: 225px;
    border: 7px solid rgba(0, 0, 0, 0.1);
  }
  
  .team-member h4 {
    margin-top: 25px;
    margin-bottom: 0;
    text-transform: none;
  }
  
  .team-member p {
    margin-top: 0;
  }
  
  .apply-btns {
      text-align: center;
      background-color: #c4ddca;
      border: 1px solid #c4ddca;
      color: #fff;
      font-size: 1.3em;
      padding: 5px;
      border-radius: 5px;
  }
  .card-footer{
      text-align: center;
  }
  
  /* Tracks */
  .tracks{
    background-color: #8d95d1;
    padding: 3% 0;
  }
  
  .tracks h3{
    text-align: center;
  }
  
  .split{
    padding: 10px;
    margin: 0 auto;
    background-color: #fff;
  }
  
  .split li{
    list-style:square;
  }
  
  .track-img{
    width: 100px;
    padding-bottom:  20px;
  }
  
  .coming-soon{
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  
  .workshops{
    margin-bottom: 10px;
  }
  
  /* FAQ Section */
  
  .row2 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -80px;
    margin-left: -80px;
  }
  
  #faq{
    background-color: #8d95d1;
    padding: 95px;
  }
  
  .faq-heading{
    padding-bottom: 5px;
  }
  
  .faq-tile{
    text-align: center;
    /* padding-left: 50px;
    margin-left: 10px; */
    width: 80%;
    margin: 10px auto;
  }
  
  #press{
    padding: 50px;
  }
  
  .press-heading{
    padding-bottom: 20px;
  }
  
  .newsImg{
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .news{
    text-align: center;
  }
  
  /* The actual timeline (the vertical ruler) */
  .timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* The actual timeline (the vertical ruler) */
  .timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
  }
  
  /* Container around content */
  .timeline_container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .timeline_container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #c4ddca;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
  .timeline_left {
    left: 0;
  }
  
  /* Place the container to the right */
  .timeline_right {
    left: 50%;
  }
  
  /* Add arrows to the left container (pointing right) */
  .timeline_left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
  }
  
  /* Add arrows to the right container (pointing left) */
  .timeline_right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
  .timeline_right::after {
    left: -16px;
  }
  
  /* The actual content */
  .timeline_content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
  }
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 600px) {
  /* Place the timelime to the left */
    .timeline::after {
      left: 31px;
    }
  
  /* Full-width containers */
    .timeline_container {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
    }
  
  /* Make sure that all arrows are pointing leftwards */
    .timeline_container::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
    }
  
  /* Make sure all circles are at the same spot */
    .timeline_left::after, .timeline_right::after {
      left: 15px;
    }
  
  /* Make all right containers behave like the left ones */
    .timeline_right {
      left: 0%;
    }
  }
  
  .bus{
    text-align: center;
    padding: 50px 0;
  }
  
  .bus_head{
    padding-bottom: 20px;
  }
  
  /* SCHEDULE */
  .schedule{
    padding-bottom: 5%;
  }
  .main {
    list-style: none;
  }
  
  .date {
    width: 17%;
    padding: 15% 1% 0 0;
    float: left;
  
  }
  .date h3 {
    font-size: 1.5em;
  }
  .date p {
    font-size: 0.8em;
    color: #000;
  }
  .events {
    float: left;
    width: 80%;
    border-left: 1px solid #000;
    margin-top: 10%;
    padding-top: 3%;
  
  }
  .events-detail {
    max-width: 550px;
    list-style-type: none;
  
  }
  .events-detail li {
    padding: 10px;
    border-bottom: 1px dashed #000;
    line-height: 22px;
    transition: ease 0.4s all;
  
  }
  .events-detail li:hover {
    background: #8d95d1;
  }
  .event-time {
    font-weight: 900;
    color: #000;
  }
  .event-name {
    color: #000;
  }
  .events-detail li a {
    text-decoration: none;
    color: #444;
    width: 100%;
    height: 100%;
    display: block;
  }
  .event-location {
    font-size: 0.8em;
    color: #8d95d1;
    margin-left: 70px;
  }
  @media all and (max-width: 641px) {
    .date {
      width: 100%;
      border-bottom: 1px solid #000;
      margin-bottom: 10px;
    }
    .events {
      border: none;
      width: 100%;
      margin-top: 0;
    }
    .events-detail {
      padding: 0;
    }
    li.date p {
      margin: 0;
    }
  }
  
  
  .cards-list {
    z-index: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  .cardfr {
    margin: 30px auto;
    width: 280px;
    height: 280px;
    border-radius: 40px;
   /* box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22); */
    cursor: pointer;
    transition: 0.4s;
  }
  
  .cardfr .card_image {
    width: inherit;
    height: inherit;
    border-radius: 40px;
  }
  
  .cardfr .card_image img {
    width: inherit;
    height: inherit;
    border-radius: 40px;
    object-fit: cover;
  }
  
  .cardfr .card_title {
    text-align: center;
    border-radius: 0px 0px 40px 40px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 25px;
    /*text-shadow:1px 1px 10px #b67777, 1px 1px 10px #d8b5b5;*/
    
    margin-top: -20%;
    height: 10px;
  }
  
  /* .cardfr:hover {
    transform: scale(0.9, 0.9);
    box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 
      -5px -5px 30px 15px rgba(0,0,0,0.22);
  }*/
  
  .title-white {
    color: white;
  }
  
  .title-black {
    color: black;
  }
  
  @media all and (max-width: 500px) {
    .card-list {
      /* On small screens, we are no longer using row direction but column */
      flex-direction: column;
    }
  }
  
  
  /* LANDING */
  
  #jsi-hex-container {
    height: 100vh;
    width: 100%;
  }
  
  .loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(196, 221, 202);;
    background: radial-gradient(circle, rgb(196, 221, 202, 1) 0%, rgb(198, 222, 203, 1) 50%, rgb(198, 222, 203, 1) 100%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .loader {
    color: #FFF;
    position: relative;
    display: inline-block;
    margin-top: 40px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 48px;
    letter-spacing: 4px;
    box-sizing: border-box;
  }
  .loader::before {
    content: '';
    position: absolute;
    right: 70px;
    bottom: 20px;
    height: 28px;
    width: 5.15px;
    background: currentColor;
    box-sizing: border-box;
    animation: animloader1 1s linear infinite alternate;
  }
  .loader::after {
    content: '';
    width: 20px;
    height: 80px;
    position: absolute;
    left: 125px;
    top: -40px;
    border-radius: 50%;
    background: url("../images/bee.svg") no-repeat center center / contain;
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
  }
  
  @keyframes animloader {
    0% {
      transform: translate(0px, 0px) scaleX(1);
    }
    14% {
      transform: translate(-12px, -16px) scaleX(1.05);
    }
    28% {
      transform: translate(-27px, -28px) scaleX(1.07);
    }
    42% {
      transform: translate(-46px, -35px) scaleX(1.1);
    }
    57% {
      transform: translate(-70px, -37px) scaleX(1.1);
    }
    71% {
      transform: translate(-94px, -32px) scaleX(1.07);
    }
    85% {
      transform: translate(-111px, -22px) scaleX(1.05);
    }
    100% {
      transform: translate(-125px, -9px) scaleX(1);
    }
  }
  
  @keyframes animloader1 {
    0% {
      box-shadow: 0 -6px, -122.9px -8px;
    }
    25%, 75% {
      box-shadow: 0 0px, -122.9px -8px;
    }
    100% {
      box-shadow: 0 0px, -122.9px -16px;
    }
  }