/**
 * build2 - Citizen Watch - Earth Month 2024
 * @version v1.0.0
 * @date 3-7-2024 at 15:40:25
 * Build A Banner info: https://www.npmjs.com/package/generator-buildabanner
 *
 * Fixed 960 x 961 layout. Positions are the original 1400px+ desktop
 * percentages; every font size, padding and shadow is that desktop value
 * evaluated at a 1920px viewport and halved, because citizenSite.jpg is
 * the 1920px-wide homepage shown at half size.
 */

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  overflow: hidden;
}

body, body * {
  vertical-align: baseline;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  width: 960px;
  height: 961px;
  background: url(images/citizenSite.jpg) 0 0 / 960px 961px no-repeat;
}

/* The hero slot in the screenshot: 134px to 854px at full size. */
#mainContent {
  font-family: "Poppins", sans-serif;
  position: absolute;
  top: 67px;
  left: 0;
  width: 960px;
  height: 360px;
  overflow: hidden;
  opacity: 0;
}

#inner-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.full-width-image {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

.full-width-image img {
  width: 100%;
  height: 107%;
  object-fit: cover;
  object-position: left 0 bottom -10px;
}

/* Starts hidden and fades in with the watch (see script.js). Fading the
   canvas element, not the CreateJS container's alpha, keeps the second
   hand and its shadow from showing before the face in browsers that
   don't apply canvas alpha to shadows. */
#clockCanvas {
  position: absolute;
  left: 71.25%;
  top: 55%;
  transform: translate(-50%, -50%);
  height: 155%;
  width: auto;
  opacity: 0;
}

#myHeadline {
  position: absolute;
  left: 27.5%;
  top: 23%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
  text-align: center;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  opacity: 0;
  text-shadow: rgba(0, 0, 0, 0.25) 0.5px 0.5px 2.5px;
}

.cleaner-planet {
  font-size: 19.1px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.08px;
  padding-bottom: 2.3%;
}

.every-second {
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.16px;
  font-size: 36.5px;
  font-weight: 500;
}

.drag-instructions,
#makePledge {
  text-align: center;
  color: #fff;
  letter-spacing: 0.08px;
  opacity: 0;
}

.drag-instructions {
  position: absolute;
  font-size: 13.9px;
  font-weight: 500;
  line-height: 140%;
  width: 48%;
  left: 3.7%;
  top: 71.5%;
  padding: 5% 0;
  word-wrap: normal;
}

.btn-container {
  position: absolute;
  width: 41%;
  top: 81.5%;
  left: 6.25%;
  text-align: center;
}

#makePledge {
  display: block;
  margin: 0 auto;
  border: 1px solid #d1d1d1;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 7.5px 16px;
  text-decoration: none;
  font-size: 16.4px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

#makePledge:focus {
  outline: 2px solid #f3cb79;
  color: #f5ebd5;
  background-color: #050808;
}

#makePledge:hover {
  background-color: #050808;
  color: #f5ebd5;
}

#myPara {
  position: absolute;
  font-weight: 500;
  font-size: 13.9px;
  line-height: 150%;
  top: 165%;
  width: 74%;
  left: 11.4%;
  text-shadow: rgba(0, 0, 0, 0.25) 0.5px 0.5px 2.5px;
}

#logoDiv {
  position: absolute;
  top: 268%;
  left: 48.5%;
  transform: translate(-50%, 0%);
  width: 20%;
  height: auto;
}

#logoDiv img {
  width: 100%;
  display: block;
}

/* ---------------------------------------------------------------------
   Pledge modal (opened by MAKE A PLEDGE). Every size is the mock-up's
   pixel value x 0.39, which makes the box 464 x 337 and fits it inside
   the 360px hero slot (top 67px) with even margins, like the mock-up.
   Same Poppins as the rest of the banner and the site.
   --------------------------------------------------------------------- */

.pledge-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pledge-overlay[hidden] {
  display: none;
}

.pledge-overlay.is-open {
  opacity: 1;
}

.pledge-modal {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 464px;
  height: 337px;
  padding-top: 33px;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-family: "Poppins", sans-serif;
  text-align: center;
}

.pledge-close {
  position: absolute;
  top: -3px;
  right: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
}

.pledge-close svg {
  width: 11px;
  height: 11px;
}

.pledge-close circle {
  fill: #9c9c9c;
}

.pledge-close path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.pledge-close:hover circle {
  fill: #6f6f6f;
}

.pledge-modal h2 {
  font-size: 17.4px;
  font-weight: 500;
  line-height: 21px;
  text-transform: uppercase;
}

.pledge-intro {
  margin: 6px auto 0;
  font-size: 15.7px;
  font-weight: 300;
  line-height: 20.7px;
}

.pledge-charities {
  display: inline-block;
  margin-top: 13px;
  text-align: left;
}

.pledge-charities legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.pledge-charities label {
  display: flex;
  align-items: center;
  height: 26.9px;
  font-size: 15.6px;
  font-weight: 500;
  cursor: pointer;
}

.pledge-charities input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 9px;
  background: #fff;
  border: 1px solid #222;
  cursor: pointer;
}

.pledge-charities input:checked {
  background: #222;
  box-shadow: inset 0 0 0 2px #fff;
}

.pledge-charities input:focus-visible,
.pledge-close:focus-visible,
.pledge-submit:focus-visible {
  outline: 2px solid #3d78e6;
  outline-offset: 2px;
}

.pledge-info {
  align-self: flex-start;
  margin: 5px 0 0 3px;
  width: 7px;
  height: 7px;
  border: 1px solid #222;
  border-radius: 50%;
  font-size: 5px;
  font-style: normal;
  font-weight: 500;
  line-height: 7px;
  text-align: center;
}

.pledge-field {
  display: block;
  box-sizing: border-box;
  width: 239px;
  height: 22.6px;
  margin: 0 auto;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #1f2a44;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(110, 150, 255, 0.22);
  color: #111;
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
}

.pledge-charities + .pledge-field {
  margin-top: 19px;
}

.pledge-field + .pledge-field {
  margin-top: 13px;
}

.pledge-field::placeholder {
  color: #999;
}

.pledge-field:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(61, 120, 230, 0.4);
}

.pledge-submit {
  display: block;
  width: 239px;
  height: 23.4px;
  margin: 10.4px auto 0;
  background: #2f3a45;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.pledge-submit:hover {
  background: #1d252d;
}