@charset "utf-8";
/* CSS Document */

/* Responsee (trimmed)
   Purpose: keep only the pieces actually used by the Tinker Camp 2019Template + index + curriculum
   Includes: base reset, responsive grid (.line + s/m/l columns), utilities, and .top-nav navigation.
*/

/* ---------- Base / Reset ---------- */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
  background: #fff;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: #444; text-decoration: none; }
a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; }
li { margin: 0; padding: 0; }

/* ---------- Layout container ---------- */
.line {
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 0.625rem;
}
.line:before, .line:after { content: " "; display: table; }
.line:after { clear: both; }

/* Optional explicit max-width helper used in markup */
.size-1280 { max-width: 1280px; margin: 0 auto; }

/* ---------- Grid (only widths actually referenced) ---------- */
/* Base column behavior */
[class*="s-"], [class*="m-"], [class*="l-"] {
  float: left;
  width: 100%;
}

/* Small (default) */
.s-12 { width: 100%; }
.s-10 { width: 83.333333%; }

/* NOTE: This class appears in your template markup (likely a typo).
   We alias it to full-width to avoid layout regressions. */
.s-51-12 { width: 100%; }

/* Medium (>= 768px) */
@media screen and (min-width: 768px) {
  .m-12 { width: 100%; }
}

/* Large (>= 1024px) */
@media screen and (min-width: 1024px) {
  .l-2  { width: 16.666667%; }
  .l-6  { width: 50%; }
  .l-10 { width: 83.333333%; }
  .l-12 { width: 100%; }
}

/* ---------- Utilities ---------- */
.right { float: right; }
.center { text-align: center; }
.center img, img.center { display: block; margin-left: auto; margin-right: auto; }

/* ---------- Top navigation (Responsee-style) ---------- */
nav {
  display:block;
  width:100%;
  background:#4F5A7F;
}

/* Desktop-first dropdown behavior */
.top-nav ul {padding:0;}
.top-nav ul ul {
  position:absolute;
  background:#152732;
}
.top-nav li {
  float:left;
  list-style:none outside none;
  cursor:pointer;
}
.top-nav li a {
  color:#fff; 
  display:block;
  font-size:1rem;
  padding:1.25rem; 
}
.top-nav li ul li a {
  background:none repeat scroll 0 0 #152732;
  min-width:100%;
  padding:0.625rem;
}
.top-nav li a:hover, .aside-nav li a:hover {background:#2b4c61;}
.top-nav li ul {display:none;}
.top-nav li ul li,.top-nav li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
/* Mobile menu label (shown on small screens) */
.nav-text {
  display: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 3;
  margin-right: 0.625rem;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

/* Small screens: collapse menu (expects JS to toggle .active on .top-nav) */
@media screen and (max-width: 767px) {
  .top-nav { float: none; width: 100%; }
  .nav-text { display: block; }
  .top-nav > ul { display: none; width: 100%; }
  .top-nav li { float: none; width: 100%; }
  .top-nav li ul { position: static; min-width: 100%; }
  .top-nav.active > ul { display: block; }
  .top-nav li:hover > ul { display: none; } /* avoid hover-open on touch */
}

/* If your existing JS toggles a different class, add an alias here. */
.top-nav.show-menu > ul { display: block; }

/* ------End responsee css -------- */

/* -------- this is for the cookie question popup box ---- */
    #cookie-banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 14px;
      z-index: 1000;
    }
    #cookie-banner a {
      color: #00aaff;
      text-decoration: underline;
    }
    #cookie-banner button {
      margin-left: 20px;
      padding: 10px 20px;
      background-color: #00aaff;
      border: none;
      color: white;
      cursor: pointer;
    }
/* -- this is for the old slide show, I don't know if we will use it -- */
.slideshow-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important; /* Adjust the height as needed to center vertically */
	max-width: auto !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; /* Optional: Drop shadow for the container */
	background-color: #ffd7b3
}
    #slideshow {
        position: relative !important;
        width: 100% !important; /* Adjust based on your layout */
        height: auto !important;
		max-width: auto;
		/*max-width: 640px !important;*/
		align-content: center !important;
    }

    #slideshow img {
        width: 100%  !important;
        height: auto !important;
		max-width: auto !important;
		/*max-width: 640px !important;*/
		align-content: center !important;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; /* Drop shadow for each image */
    }

    button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #fff;
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    button:nth-child(2) {
        left: 10px;
    }

    button:nth-child(3) {
        right: 10px;
    }


/* Navigation and responsee overrides -- */
nav {
  padding: 0.825rem 0;
}
@media screen and (max-width: 768px) {
  .right {
  float:none;
  }
}