/*NAVBAR (TOP-RIGHT CLICK DROPDOWN)*/
      .menu-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      width: 40px;
      z-index: 1;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      top: 60px;
      right: 10px;
      background-color: white;
      z-index: 1000;
      width: 220px;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .dropdown-content > .w3-bar-item > a,
    .dropdown-content > a {
      font-weight: normal;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
      text-align: center;
      padding: 6px 12px !important;
    }

    .dropdown-content .w3-bar-item:hover {
      background-color: #f1f1f1;
    }

    .dropdown-content .active {
      background-color: #2196F3;
      color: white;
      font-weight:bold;
    }

    .has-submenu {
      position: relative;
    }

    .has-submenu > .submenu-toggle {
      position: relative;
      padding-left: 20px !important;
      text-align: center;
      display: block;
    }

    .has-submenu > .submenu-toggle::before {
      content: "◄";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .has-submenu .submenu {
      display: none;
      position: absolute;
      top: 0;
      right: 100%;
      background-color: white;
      width: 200px;
      z-index: 1001;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .has-submenu:hover .submenu {
      display: block;
      overflow-wrap:break-word;
    }

    .submenu .w3-bar-item {
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
      font-size:small;
      padding: 6px 6px !important;
    }

    .submenu a:hover {
      background-color: #ddd;
      overflow-wrap: break-word;
    }

    @media (max-width: 600px) {
      .dropdown-content {
        right: 0;
        width: 100%;
      }

      .has-submenu .submenu {
        right: 100%;
      }
    }
/*NAVIGATION BUTTONS*/
.yarn-button {
      z-index: 1000;
      padding-bottom: 20px;
      cursor: pointer;
      text-decoration: none;
    }

  /* Yarn PNG image container */
    .yarn-ball {
      width: 15vw; /* Responsive width */
      max-width: 100px; /* Prevent it from getting too big on large screens */
      height: auto;
      position: relative;
    }

    .yarn-ball img {
      width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: 5%;
    } 
/*BACK BUTTON*/
.yarn-button.back-button {
      float: left;
      margin-left: 1vw;
}
  /*Back Text overlay inside the image */
    .yarn-text-back {
      position: absolute;
      top: 1%;
      left: 7%;
      font-size: clamp(12px, 1.5vw, 18px);
      color: #333;
      font-weight: bold;
      font-family: sans-serif;
      background: none;
      padding: 0;
      pointer-events: none;
    }

    .yarn-button:hover .yarn-text-back {
      color: #6f5cd4;
    }
/*NEXT BUTTON*/
.yarn-button.next-button {
    float:right;
    margin-right: 1vw;
    z-index:1001;
}
      /*Next text overlay inside the image */
    .yarn-text-next {
      position: absolute;
      top: 1%;
      right: 7%;
      font-size: clamp(12px, 1.5vw, 18px);
      color: #333;
      font-weight: bold;
      font-family: sans-serif;
      background: none;
      padding: 0;
      pointer-events: none;
    }

    .yarn-button:hover .yarn-text-next {
      color: #2a40a3;
    }



  /* Fallback for very small screens */
    @media (max-width: 480px) {
      .yarn-ball {
        width: 60px;
      }

      .yarn-text-back, 
       .yarn-text-next {
        font-size: 12px;
      }
    }

  
/*CONFERENCE CREATURES LANDING PAGE*/
    /*TEXT MARGINS*/
  .w3-margin-40 {
    margin: 40px;
  }

/*IG STYLE */
    .profile-container-home {
      max-width: 400px;
      height: 130px;
      margin: 20px auto;
      border-radius: 10px;
      overflow: hidden;
      text-decoration: none;
      background-color: black;
      display: flex;
      align-items: center;
      padding: 15px;
    }

    .profile-pic-wrapper-home {
      position: relative;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .profile-pic-wrapper-home a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      position: relative;
    }

    .profile-pic-home {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid rgb(154, 154, 154);
      display: block;
    }

    .hover-overlay-home {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.7);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      opacity: 0;
      transition: opacity 0.3s ease;
      text-align: center;
      border-radius: 50%;
      padding: 10px;
      pointer-events: none;
    }

    .profile-pic-wrapper-home a:hover .hover-overlay-home {
      opacity: 1;
    }

    .profile-info-home {
      color: white;
      margin-left: 30px;
    }

    .account-title-home {
      font-size: 18px;
      font-weight: bold;
    }

    .stats-container-home {
      display: flex;
      margin-top: 10px;
      gap: 40px;
    }

    .stat-block-home {
      display: flex;
      flex-direction: column;
      text-align: left;
    }

    .stat-number-home {
      font-weight: bold;
      font-size: 16px;
    }

    .stat-label-home {
      font-size: 12px;
    }
/*LANDING GRID MATERIALS*/
.container-materials {
  max-width: 100%;
  max-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 0.5fr 1.5fr;
  grid-template-rows: repeat(9, 1fr);
  gap: 0;
  overflow: auto;
  background-image: url(images/landing-wood.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: repeat;

}

    .grid-item {
      position: relative;
      overflow: visible;
    }

    .grid-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: contain;
      position: relative;
      
    }

    .overlay-materials {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
     
      opacity: 0;
      transition: 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .grid-item:hover .overlay-materials {
      opacity: .9;
    }

    .overlay-materials a {
      color: white;
      font-size: 20px;
      text-decoration: none;
      background: rgba(0, 0, 0, 0.6);
      padding: 10px 20px;
      border-radius: 5px;
      max-width: 300px;
      display: flex;
    }

  /* Homepage Grid Item Placement*/
  .item1 { grid-column: 1; grid-row: 1 / span 9; }   /*pattern*/           
  .item2 { grid-column: 2; grid-row: 1; max-height:275px; }     /*needle*/
  .item3 { grid-column: 2; grid-row: 5; max-width:75px;}  /*eyes*/
  .item4 { grid-column: 3; grid-row: 2 / span 6; max-height:350px; min-height:100px;}  /*yarn*/
  .item5 { grid-column: 2; grid-row: 7; max-height:100px; }  /*stitch markers*/
  .item6 { grid-column: 3; grid-row: 1; max-height:275px;}        /*fluff*/
  .item7 { grid-column: 3; grid-row: 8; max-width:500px }     /*hook*/

  /*Takeaways Grid Item Placement*/
 
  .itema { grid-column: 1 /span 2; grid-row: 1 / span 3; }   /*taco*/           
  .itemb { grid-column: 3; grid-row: 2; max-height:275px; }     /*penguin*/
  .itemc { grid-column: 4 /span 3; grid-row: 4 ; max-width:300px;}  /*bees*/
  .itemd { grid-column: 1 /span 3; grid-row: 4 / span 6; max-height:350px; min-height:100px;}  /*yarn*/

    /*FULL CREATURE OVERLAY*/

  .image-link-container {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }

  .image-link-container img {
    display: block;
    width: 450px;
    height: 400px;
  }

  .overlay-text-materials {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px 20px;
    font-size: 50px;
    pointer-events: none; 
  }

  .image-link-container:hover .overlay-text-materials {
    opacity: 1; /* Show on hover */
    font-weight:bolder;
  }



/*HEADER BANNERS */
.banner-wrapper {
  position: relative;
  max-width: 85vw;
  margin: auto;
  overflow: auto; /* hides anything that spills out */
  border-radius: 25px;
  border: 3px solid black;
  display:inline-block;
}

/* Image should fill wrapper but be constrained */
.banner-max {
  width: 100%;
  height: auto;
  max-height: 30vh;
  display: block;
  border-radius: 20px;
  object-fit: fill;
}


/*rnm and craft agency*/
.banner-overlay-top-left {
  position: absolute;
  top: 0%;
  left: 0%;
  font-size: 1.5em; 
  color: white;
  padding: 0.5em 1em;
  border-radius: 25px;
  z-index: 1;
}
/*extendingkairotic space*/
.banner-overlay-top-right {
  position: absolute;
  top: 1%;
  left: 30%;
  font-size: 1.5em; 
  color: black;
  padding: 0.5em 1em;
  border-radius: 25px;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.717);
}
/*resonant projects*/
.banner-overlay-right {
  position: absolute;
  top:45%;
  left:60%;
  font-size:2em;
  color: white;
  border-radius:25px;
  z-index:1;
  border-radius: 25px;
}
/*weaving connections home*/
.banner-overlay-weaving {
  position: absolute;
  top:5%;
  left:40%;
  font-size: 2.5em;
  color:white;
  border-radius:25px;
  z-index:1;
}
/*takeaways home*/
.banner-overlay-takeaways {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-70%);
  font-size: 2.5em;
  color: white;
  border-radius: 25px;
  z-index:1;
}
/*references*/
.banner-overlay-center-large {
  position: absolute;
  top: 40%;
  left:40%;
  font-size: 3em;
  color: white;
  border-radius: 25px;
  z-index:1;

}
/*who we are*/
  .banner-overlay-middle {
  position: absolute;
  bottom: 5%;
  left: 20%;
  font-size: 2.5em;
  color:white;
  border-radius:25px;
  }
  /*bloopers*/
    .banner-overlay-bloopers {
  position: absolute;
  bottom: 0%;
  left: 60%;
  transform: translateX(-40%);
  font-size: 3em;
  color:white;
  border-radius: 25px;
  }

  /*feminized labor*/
  .banner-overlay-labor {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  font-size:2.5em;
  color:white;
  text-align: center;
  max-width: 75vw; 
  border-radius: 25px;
  }
  /*get involved*/
     .banner-overlay-involved {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4em;
  color:white; 
  z-index: 1;
  border-radius: 25px;
  }
/*acknowledgements*/
  .banner-overlay-middle-top {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4em;
  color:white; 
  border-radius: 25px;

  }
  /*ethics*/
    .banner-overlay-ethics {
  position: absolute;
  bottom:0%;
  left:22%;
  font-size: 3em;
  color:white;
  border-radius: 25px;
  }
  /*kairotic space*/
  .banner-overlay-left {
  position: absolute;
  bottom:3%;
  left:2%;
  font-size: 1.75em;
  color:white;
  max-width:30vw; 
  border-radius: 25px;
  }
/*what is conference Creatures banner*/
   .banner-overlay-center {
  position: absolute;
  bottom: 1%;
  left: 55%;
  transform: translateX(-45%);
  font-size: 2.5em;
  color: white;
  text-align: center;
  border-radius:25px;
  }

  .banner-overlay-top {
  position: absolute;
  top: 1%;
  left: 47%;
  transform: translateX(-40%);
  font-size: 4vw;
  text-align: center;
  max-width: 60vw;
  }

/*WHO WE ARE*/
  .w3-who {
    border: 3px solid black;
    border-radius:25px;
    
  }
.img-max-height {
  max-height: 500px;
  width: auto; /* ensures responsiveness */
  object-fit: cover;
  }


/*WHAT IS CONFERENCE CREATURES?*/
/*timeline and instagram stats*/
* {
      box-sizing: border-box;
    }

    body {
      background-color: #ffffff;
      font-family: Helvetica, sans-serif;
      padding-bottom: 200px; 
    }

    .timeline {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
    }
    

    /* Vertical timeline line */
    .timeline::after {
      content: '';
      position: absolute;
      width: 7px;
      background-color: rgb(0, 0, 0);
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -5px;
      z-index: 0;
    }

    /* Timeline item container */
    .container-timeline {
      padding: 5px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
      height: auto;
      z-index: 1;
    }

    

    /* Circle on timeline */
    .container-timeline::after {
      content: '';
      position: absolute;
      width: 35px;
      height: 35px;
      right: -10px;
      background-color: rgb(248, 129, 43);
      border: 4px solid #FF9F55;
      top: 5px;
      border-radius: 50%;
      z-index: 1;
    }

    /* Left container */
    .left {
      left: 0;
    }

    /* Right container */
    .right {
      left: 50%;
    }

    /* Circle fix for right container */
    .right::after {
      left: -16px;
    }

    /* Timeline content box */
    .content {
      padding: 15px 20px;
      background-color: rgb(160, 110, 253);
      position: relative;
      border-radius: 6px;
      color: rgb(0, 0, 0);
    }

    /* Profile container inside timeline */
    .profile-container {
      max-width: 100%;
      height: auto;
      margin: 20px auto 0 auto;
      border-radius: 10px;
      overflow: hidden;
      background-color: black;
      display: flex;
      align-items: center;
      padding: 15px;
      gap: 20px;
      flex-wrap: wrap;
    }

    .profile-pic-wrapper {
      position: relative;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .profile-pic {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid rgb(154, 154, 154);
      display: block;
    }

    .profile-info {
      color: white;
      flex: 1 1 200px;
      min-width: 150px;
    }

    .account-title {
      font-size: 18px;
      font-weight: bold;
    }

    .stats-container {
      display: flex;
      margin-top: 10px;
      gap: 40px;
      flex-wrap: wrap;
    }

    .stat-block {
      display: flex;
      flex-direction: column;
      text-align: left;
      min-width: 50px;
    }

    .stat-number {
      font-weight: bold;
      font-size: 16px;
    }

    .stat-label {
      font-size: 12px;
    }


/* Timeline Image overlay */
.image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #ade1f2;
  border-radius: 6px;
  pointer-events: none; /* Prevents it from blocking clicks unless active */
}
.text {
  position: relative;
  top: 25%;
  transform: translate(0 -50%);
  color:black;
}

/*hover*/
@media (hover: hover) and (pointer: fine) {
  .container-timeline:hover .overlay {
    opacity: 0.9;
    pointer-events: auto;
  }
}

/* Tap */
.overlay.active {
  opacity: 0.9;
  pointer-events: auto;
}




/* Responsive adjustments */
@media screen and (max-width: 600px) {
  .timeline::after {
    left: 31px;
  }

  .container {
    width: 100%;
    padding-left: 725x;
    padding-right: 25px;
  }

  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  .left::after,
  .right::after {
    left: 15px;
  }

  .right {
    left: 0%;
  }

  /* Stack profile container vertically on mobile */
  .profile-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
  }

  .profile-info {
    margin-left: 0;
    margin-top: 10px;
    min-width: unset;
    flex: none;
  }

  .stats-container {
    justify-content: center;
    gap: 20px;
  }
}



/*WEAVING CONNECTIONS PHOTO GRID*/
      .image-container-weaving {
    position: relative;
    
  }

  .image-container-weaving img {
    width: 100%;
    display: block;
    transition: opacity 0.3s ease;
  }

  .full-review-container {
  max-width: 400px;
  max-height: 400px;
  margin: 0 auto; /* horizontally center the block */
  overflow: hidden;
}

.full-review-container img {
  width: 100%;
  height: auto;
  max-height: 400px;
  display: block;
}


.overlay-text-weaving {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  width: 100%;
  padding: 0 5px; 
  color: rgb(0, 0, 0);

  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  z-index: 2;

  font-size: 3vw;
  white-space: normal;                         
  word-wrap: break-word;
}
.image-container-weaving:hover img {
  opacity: .3; 
}
  .image-container-weaving:hover .overlay-text-weaving {
    opacity: 1;
  }
/* Hover styles apply only on non-touch devices */
.image-container-weaving.hover-supported:hover img {
  opacity: 0.3;
}

.image-container-weaving.hover-supported:hover .overlay-text-weaving {
  opacity: 1;
}

/* Active class used on tap devices */
.image-container-weaving.active img, 
.image-container-weaving.fixed-size.active img {
  opacity: 0.3;
}

.image-container-weaving.active .overlay-text-weaving,
.image-containger-weaving.fixed-size.active .overlay-text-weaving{
  opacity: 1;
}
/*CONTENT PAGE IMAGE STYLES*/
    .content-img-left {
      float: left;
      margin: 0 1em 1em 0;
      width: min(25vw, 200px);
      max-width: 100%;
    }

    .content-img-right {
      float: right;
      margin: 0 0 1em 1em;
      width: min(25vw, 200px);
      max-width: 100%;
    }
/*smaller caption text */
.caption-small {
  font-size: 0.85em;
  color: #555; /* Optional: makes it more visually subtle */
  margin-top: 0.5em;
}

.caption-small a {
  font-weight: bold;
  color: #172aa5;
}

    /* Justified text with spacing */
    .justified {
      text-align: justify;
    }

    /* Clear floats on smaller screens */
    @media screen and (max-width: 600px) {
      .content-img-left,
      .content-img-right {
        float: none;
        display: block;
        margin: 1em auto;
        width: 80%;
      }
    }

    /*GENERAL CONTENT*/
.block-quote-section {
  font-style:italic;
}

/*Bloopers flip cards*/
.multi-image-card {
      
      max-width: 400px;
      display: inline-block;
      margin: 10px;
      vertical-align: middle;
      position: relative;
      cursor: pointer;
      border-radius: 8px;
      border:2px solid black;
      overflow:hidden;
    }


    .multi-image-card img {
      width: 100%;
      height: auto;
      object-fit: cover;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      display:none;
    }


    .multi-image-card img.active {
      opacity: 1;
      z-index: 1;
      display:block;
    }

    .multi-image-card-left {
      float: left;
      margin: 1em 1em 1em 0;
      width: min(25vw, 200px);
      max-width: 100%;
    }

    .multi-image-card-right {
      float: right;
      margin: 0 0 1em 1em;
      width: min(25vw, 200px);
      max-width: 100%;
    }
      .video-a video {
    max-width: 400px;
    width: auto;
    max-height: 50vh;
    height: auto;
    display: inline-block;
    position: relative;
    cursor: pointer;
      border-radius: 8px;
      border:2px solid black;
      overflow:hidden;
  }
  .video-a-right {
  float: right;
  margin: 0 0 1em 1em;
  max-width: 400px;
  width: min(25vw, 200px);
  max-height: 50vh;
  border-radius: 8px;
  border: 2px solid black;
  overflow: hidden;
  display: inline-block;
}

/*EXAMPLES TAKEAWAYS FLIP CARDS*/
.w3-dropdown-content {
  z-index:3;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  max-width:95%;
  justify-content: center; 
  gap: 50px;
  padding: 50px;
  box-sizing: border-box;
  
}

.card-container {
  position: relative;
  cursor: pointer;
  border-radius: 30px;
  display: inline-block;
    overflow: hidden;
}

    .card-container img {
      width: auto;
      height: auto;
      display: block;
      max-width:100%;
      border-radius: 30px;
      transition: transform 0.5s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border: 4px solid black;
    }

    /* Zoom effect on image when active */
    .card-container.zoom img {
      transform: scale(1.4);
    transform-origin: center top;
    }

    .card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 2;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: auto;
      pointer-events: none; /* Prevent blocking clicks when hidden */
      background: rgba(0, 0, 0, 0.7);
      overflow:hidden;
    }

    .card-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .overlay-text-examples {
      color: white;
      text-align: center;
     
      padding: 5px;
      font-size: 1em;
    
      text-shadow: 0 2px 6px rgba(0,0,0,0.7);
      max-width: 95%;
      background: none;
      border-radius: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap:10px;
      position: relative;
      overflow: contain;
    }
    .overlay-subtext {
    font-size: .9em;   
    font-weight: 400;     
    color: #f0f0f0;       
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    position:relative;
    display: flex;
  }
.overlay-credit {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: .9em;
  font-weight: 300;
  color: #ccc;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}


/* Medium screens: 2 columns */
@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens: 1 column */
@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

    body {
      padding-top: 50px;
    }


/*GET INVOLVED*/
/*LANDING PAGE PHOTO GRID*/

.grid-wrapper {
  margin: 0 10px; /* 10px left and right margins */
}

.responsive-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}

.responsive-grid .image-container {
  flex: 1; /* Each image takes up equal space */
  position: relative;
  overflow: hidden; /* hides overflow when using object-fit */
  border: 2px solid black; /* black border around image container */
}

  .image-container img {
    width: 100%;
    height: 500px; /* fixed height for all images */
    object-fit: fill;
    display: block;
    transition: opacity 0.3s ease;
    
  }

.overlay-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  width: 100%;
  padding: 0 5px; 
  color: rgb(0, 0, 0);

  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  z-index: 2;

  font-size: 3em;
  white-space: normal;                         
  word-wrap: break-word;
}
.image-container:hover img {
  opacity: .2; 
}
  .image-container:hover .overlay-text {
    opacity: 1;
  }
    /*Responsive stacking on smaller screens */
    @media (max-width: 768px) {
      .responsive-grid {
        flex-direction: column;
      }
    }

/*CREATING - PDF CONTAINER*/
.pdf-wrapper {
  width: 50%; /* 25% smaller */
  height: auto;
  margin: auto;
}

.responsive-pdf {
  position: relative;
  min-width: 100%;
  min-height: 50%;
  padding-top: 97.5%; /* Aspect ratio for 750x975 */
}

.responsive-pdf iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.download-button {
  text-align: center;
  margin-top: 16px;
}

/*CREATING - TUTORIAL VIDEO CONTAINERS*/
.video-wide-left {
  float: left;
  margin: 0 0 1em 1em;
  width: min(45vw, 600px);
  max-width: 100%;
}

/* Justified text with spacing */
.justified {
  text-align: justify;
}

/*ENGAGING - TAGGING VIDEO TUTORIAL*/
  .container {
    display: flex;
    gap: 16px; /* space between columns */
    margin: 10px;
    flex-wrap: wrap;
  }

    .left-col, .right-col {
      flex: 1;
      min-width: 250px;
    }
    .left-col {
      max-width: 50%;
    }
    .right-col {
      max-width: 50%;
    }
    .image-a {
      max-width:80%;
      margin: auto;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .left-col, .mid-col, .right-col {
        max-width: 90%;
        width: 90%;
      }
    }

    video {
      width: 100%;
      height: auto;;
      display: block;
      margin: auto;
    }


    


/*w3.css stylesheet*/
/* W3.CSS 5.01 March 14 2025 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}
summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}
figure{margin:0}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px;}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap; margin-bottom: 5px;}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin-left:1.5rem}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}
.w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-grid{
    display:grid;}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
.w3-hover-none:hover{box-shadow:none!important}
/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
.w3-danger{color:#fff!important;background-color:#dd0000!important}
.w3-note{color:#000!important;background-color:#fff599!important}
.w3-info{color:#fff!important;background-color:#0a6fc2!important}
.w3-warning{color:#000!important;background-color:#ffb305!important}
.w3-success{color:#fff!important;background-color:#008a00!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important; border-radius: 25px;}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

.weaving-landing-width {
  max-width:1500px; 
  margin-bottom:15px
}

p a {
  font-weight: bold;
  color: #172aa5;
}
p a:hover {
  font-weight: bold;
  color: #5222a0;
}

h2 a {
  font-weight: bold;
  color: #172aa5;
}

h2 a:hover {
  font-weight: bold;
  color: #5222a0;
}

body {
  margin-left: auto;
      margin-right: auto;
      max-width: 1200px;
}