/*
 * Globals
 */


/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

button {
  
  left:calc(50% - 4em);
  top:calc(50% - 2em);
  
  transform-origin:50% 4em;
  
  -webkit-animation:wiggle 1.5s linear infinite;
  animation:wiggle 1.5s linear infinite;
}


      @-webkit-keyframes wiggle {
  0% {
    -webkit-transform:rotateZ(0);
    transform:rotateZ(0);
  }
  10% {
    -webkit-transform:rotateZ(-15deg);
    transform:rotateZ(-15deg);
  }
  20% {
    -webkit-transition:rotateZ(10deg);
    transition:rotateZ(10deg);
  }
  25% {
    -webkit-transition:rotateZ(-10deg);
    transition:rotateZ(-10deg);
  }
  30% {
    -webkit-transition:rotateZ(6deg);
    transition:rotateZ(6deg);
  }
  35% {
    -webkit-transform:rotateZ(-4deg);
    transform:rotateZ(-4deg);
  }
  40% {
    transform:rotateZ(7deg);
  }
  50% {
    transform:rotateZ(-6deg);
  }
  60% {
    transform:rotateZ(10deg);
  }
  70% {
    transform:rotateZ(-14deg;)
  }
  80% {
    transform:rotateZ(3deg);
  }
  90% {
    transform:rotateZ(-7deg);
  }
  100% {
    -webkit-transition:rotateZ(0);
    transition:rotateZ(0);
  }
}

hr.dashed {
    border-top: 2px dashed #999;
}

/*
 * Page theme rules restored from the PHP templates.
 * In the original site every page carried these rules in an inline <style>
 * block (identical across pages): base body background, the day/night
 * switch (.toggle + body.day) and the language flag buttons
 * (.togglelang_* / .submit_style_*). The flag URLs are root-absolute here
 * because this stylesheet lives under /css/; the original inline style
 * resolved es.png and gb.png at the page root, the same final URLs.
 */
.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      body {
        margin: 0;
        padding: 0;
        background-color: #2e2b2b;
        transition: 0.5s;
      }

      body.day {
        background-color: #f2f2f2;
      }

      .toggle {
        position: absolute;
        top: 23px;
        right: 25px;
        background: #fff;
        border: 2px solid #00151f;
        width: 35px;
        height: 20px;
        cursor: pointer;
        border-radius: 20px;
        transition: 0.5s;
      }

      .toggle.active {
        background: #2e2b2b;
      }

      .toggle:before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 13px;
        height: 13px;
        background: #00151f;
        border-radius: 50%;
        transition: 0.5s;
      }

      .toggle.active:before {
        left: 16px;
        background: #f2f2f2;
      }

      .content {
        margin: 100px auto;
        width: 1000px;
      }

      .content h1,
      h2 {
        margin: 0 0 20px;
        padding: 0;
        color: #000;
        transition: 0.5s;
      }

      .content p {
        margin: 0;
        padding: 0;
        color: #000;
        transition: 0.5s;
        font-size: 18px;
      }

      body.day .content h1,
      body.day .content h2 {
        color: #ccc;
      }

      /* Day-Night Switch styling */
      body.day .button {
        background-color: #2e2b2b !important;
        color: #fff;
      }

      body.day .active {
        color: #343a40 !important;
      }

      body.day .text-white {
        color: #343a40 !important;
      }

      body.day h8 {
        color: #343a40 !important;
      }

      body.day h5 {
        color: #343a40 !important;
      }

      body.day h6 {
        color: #343a40 !important;
      }

      body.day .form-label {
        color: #343a40 !important;
      }

      body.day .lead-sm {
        color: #343a40 !important;
      }

      body.day .nav-masthead .active {
        border-bottom-color: #343a40 !important;
      }

      body.day .nav-link {
        color: #343a40 !important;
      }

      .togglelang_es {
        position: absolute;
        top: 53px;
        right: 27px;
        background: #fff;
        cursor: pointer;
        border-radius: 20px;
        transition: 0.5s;
      }
      .togglelang_gb {
        position: absolute;
        top: 53px;
        right: 67px;
        background: #fff;
        cursor: pointer;
        border-radius: 20px;
        transition: 0.5s;
      }

      .submit_style_es { 
        background-image: url(/es.png);
        background-size: 30px 20px;
        background-position:  0px 0px;
        background-repeat: no-repeat;
        width: 30px;
        height: 20px;
        border: 0px;
      }
      .submit_style_gb { 
          background-image: url(/gb.png);
          background-size: 30px 20px;
          background-position:  0px 0px;
          background-repeat: no-repeat;
          width: 30px;
          height: 20px;
          border: 0px;
      }

/* Tooltip rules: verbatim from the standalone <style> block every PHP
   page (index.php) carried in its head. Green tooltip-inner (#79f0b0)
   plus the arrow colours and the (empty, as in the original) sustcheck
   rule for the footer sustainability leaf. */
.tooltip-inner {
  background-color: #79f0b0 !important;
  color: black;
  font-size: 8pt;
  text-align: left;
  min-width: 100px; max-width: 100%;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #79f0b0;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #79f0b0;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #79f0b0;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #79f0b0;
}

#sustcheck {
  /* 1 for fully inverted picture or 0 for standard one
  filter: invert(1);*/
}