@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap');

body {
    background: #f3f3f4;
    font-family: 'Nunito Sans', sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

a {
    color: #9f50a1;
}

header {
    background-color: #9f50a1;
    color :#fff;
}

header nav {
    background: linear-gradient(to top, rgba(0,0,0,.4), rgba(0,0,0,.4));
}

.logo {
    height: 8rem;
    padding: 1rem;
    display: none;
}

.main-menu {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.main-menu li {
    flex-basis: 100%;
}

.main-menu a {
    display: block;
    padding: .75rem 1rem;
    color: #fff;
    width: 100%;
    text-align: center;
    font-weight: 700;
    transition: all .3s;
}

.main-menu a:hover {
    text-decoration: none;
}

.main-menu a:hover, .main-menu a:active, .main-menu a:focus, .main-menu a.active {
    background-color: rgba(0,0,0,.4);
}

section, footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.hero {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #2f4050;
}

.featured-items {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 18rem 18rem;
    grid-template-areas: "first second" "first third";
    grid-gap: 1rem;
}

.featured-items li:nth-child(1){
    grid-area: first;
}

.featured-items li:nth-child(2){
    grid-area: second;
}

.featured-items li:nth-child(2){
    grid-area: third;
}

.featured-items img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s;
}

.featured-items li:hover img {
    transform: scale(1.1);
}

.featured-items li {
    position: relative;
    overflow: hidden;
}

.featured-items div {
    position: absolute;
    bottom: -3.5rem;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: rgba(0,0,0,.5);
    color: #fff;
    transition: all .3s;
}

.featured-items li:hover div {
    bottom: 0;
}

.featured-items .h5 {
    margin-bottom: 1rem;
}

.intro {
    background: #fff;
}

footer {
    background-color: #2f4050;
    color: #fff;
}

footer a {
    color: #fff;
}

.btn-primary {
    background-color: #9f50a1;
    border-color: #9f50a1;
}

.btn-primary:hover {
    color: #fff;
    background-color: #963e98;
    border-color: #963e98;
}

.newsletter {
    background-color: #9f50a1;
    color: #fff;
}

.pod-img {
    height: 16rem;
    width: 100%;
    overflow: hidden;
    box-shadow: 0.5rem 0.5rem #9f50a1;
    transition: all .3s;
}

.pod-img:hover {
    box-shadow: 0 0 #9f50a1;
}

.pod-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all .3s;
}

.pod-img:hover img {
    transform: scale(1.1);
}


.county-image {
    width: 5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.newsletter .form-control {
    background: none;
    border: 2px solid white;
    border-radius: 0;
    color: #fff !important;
    padding: .5rem 1rem;
    height: calc(1.5em + 1rem + 2px);
}

.newsletter ::placeholder {
    color: #fff;
}

.meetings {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.meetings li {
    display: grid;
    grid-template-areas: "date title" "date text";
}

.meetings .date {
    background: #efefef;
    padding: 1rem 2rem;
    display: inline-block;
    margin-bottom: 1rem;
    margin-right: 1rem;
    grid-area: date;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.meetings a {
    grid-area: title;
}

.meetings p {
    grid-area: text;
}

.news {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.news li {
    display: flex;
    margin-bottom: 1rem;
}

.news img {
    width: 10rem;
    height: 10rem;
    margin-right: 1rem;
    object-fit: cover;
}

.reports {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.reports img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
    transition: all .3s;
}

.reports a h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;
    color: #fff;
    background: rgba(0,0,0,.5);
    width: 100%;
    margin-bottom: 0;
}

.reports a {
    display: block;
    width: fit-content;
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
}

.reports a:hover img {
    transform: scale(1.1);
}

.table {
    background: #f3f3f3;
}

.video {
    padding-top: 0;
    padding-bottom: 0;
}

.menu-toggle > button {
    display: block;
    padding: .75rem 1rem;
    color: #fff;
    width: 100%;
    text-align: center;
    font-weight: 700;
    transition: all .3s;
    background: none;
    border: none;
}

.previous-reports {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.previous-reports li {
    background: #efefef;
    padding: 1rem;
    margin-bottom: 1rem;
}

.consultations {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.consultations li {
    background: #efefef;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.open {
    padding: .15rem .75rem;
    margin: .15rem;
    display: inline-block;
    background: #009700;
    color: #fff;
    font-size: .75rem;
}

span.closed {
    padding: .15rem .5rem;
    margin: .15rem;
    display: inline-block;
    color: #fff;
    background: #ec2727;
    font-size: .75rem;
}

.documents {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.documents li {
    background: #efefef;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.documents a {
    margin-left: auto;
}

.documents img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    margin-right: 1rem;
}

.range-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.range-numbers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: .75rem;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;  
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
  }
  
  .input[type="range"]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
  }

  .board {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }

  @media (min-width: 768px){
      .board {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (min-width: 992px){
    .board {
        grid-template-columns: repeat(5, 1fr);
    }
}

  .board li {
      padding: 1rem;
      background: #efefef;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: .9rem;
  }

  .board img {
      max-width: 70%;
      margin-bottom: 1rem;
  }

  .wellbeing-goals {
      list-style-type: none;
      padding-left: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

  .wellbeing-goals li {
      width: calc(100% - 1rem);
      margin: .5rem;
      padding: 1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  @media(min-width:768px){
      .wellbeing-goals li {
          width: calc(25% - 1rem);
      }
  }

.wellbeing-goals li:nth-child(1) .icon {
    border-color: #2bb800;
}

.wellbeing-goals li:nth-child(2) .icon {
    border-color: #b83000;
}

.wellbeing-goals li:nth-child(3) .icon {
    border-color: #00b8a9;
}

.wellbeing-goals li:nth-child(4) .icon {
    border-color: #b80064;
}

.wellbeing-goals li:nth-child(5) .icon {
    border-color: #005bb8;
}

.wellbeing-goals li:nth-child(6) .icon {
    border-color: #b6b800;
}

.wellbeing-goals li:nth-child(7) .icon {
    border-color: #00b882;
}

  .development-principles {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .development-principles li {
    width: calc(100% - 1rem);
    margin: .5rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width:768px){
    .development-principles li {
        width: calc(33% - 1rem);
    }
}

.development-principles li:nth-child(1) .icon {
    border-color: #fdb601;
}

.development-principles li:nth-child(2) .icon {
    border-color: #c00000;
}

.development-principles li:nth-child(3) .icon {
    border-color: #02bffe;
}

.development-principles li:nth-child(4) .icon {
    border-color: #3cb003;
}

.development-principles li:nth-child(5) .icon {
    border-color: #d538df;
}

.icon {
    width: 8rem;
    height: 8rem;
    margin-bottom: 1rem;
    border: 3px solid black;
    border-radius: 50%;
    padding: .5rem;
    transition: all .3s;
}

.development-principles li:hover .icon, .wellbeing-goals li:hover .icon, .groups li:hover .icon {
    padding: 0;
}

.icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.groups {
    list-style-type: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    margin-top: 2rem;
}

@media (min-width: 768px){
    .groups {
        grid-template-columns: repeat(3, 1fr);
    }
}

.groups li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.groups li:nth-child(1) .icon {
    border-color: #13a335;
}

.groups li:nth-child(2) .icon {
    border-color: #1372a3;
}

.groups li:nth-child(3) .icon {
    border-color: #a31313;
}


@media (max-width:767px) {

    .pod-img ~ a {
        margin-bottom: 2rem;
    }

    .main-menu {
        flex-direction: column;
    }

    .menu-toggle:not(.open) ~ li {
        display: none;
    }

    header .row > .d-flex {
        flex-direction: column-reverse;
    }

    .search {
        display: none;
    }

    .county-image {
        width: 4rem;
    }

    header h1 {
        font-size: 1.5rem;
    }

    header h1 .h4 {
        font-size: 1.25rem;
    }

    .logo {
        height: 7rem;
    }

    .featured-items {
        display: block;
    }

    .featured-items li {
        margin-bottom: 1rem;
    }

    .featured-items p {
        display: none;
    }

    .news li {
        flex-direction: column;
    }

    .news img {
        margin-right: 0;
        margin-bottom: 1rem;
        width: 100%;
    }

    .meetings li {
        display: block;
    }

    .meetings .date {
        display: inline-block;
    }

    .featured-items h2 {
        margin-bottom: 1rem;
    }
}

@media (min-width:768px){
    .menu-toggle {
        display: none;
    }
}

.newsletter {
    display: none;
}

/* Language selector */

.popOverlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    top: -3000px;
    -webkit-transition: all 500ms ease-in-out 1s;
    -moz-transition: all 500ms ease-in-out 1s;
    -o-transition: all 500ms ease-in-out 1s;
    transition: all 500ms ease-in-out 1s;
}

.popOverlay.slide {
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out 1s;
    -moz-transition: all 500ms ease-in-out 1s;
    -o-transition: all 500ms ease-in-out 1s;
    transition: all 500ms ease-in-out 1s;
    position: fixed;
    z-index: 0;
}

.pop {
    width: 50vw;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    margin-top: 30vh;
    background-repeat: no-repeat;
    background-position: right;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
    overflow: hidden;
    display: flex;
}

.pop > .fifty {
    padding: 2rem;
}

.pop > .fifty:first-child {
    border-right: 1px solid rgba(0,0,0,.1);
}

.history-disabled {
    opacity: .5;   
    pointer-events: none;
}

.display-text {
    background-color: #efefef;    
}

.fade-in {
    opacity: 1;
    transition: opacity 1s; 
}

.fade-in.hide {
    opacity: 0;
}

.appear {
    opacity: 1;
    transition: all .2s ease;
    border-bottom: 1px solid rgb(239, 239, 239);
    max-height: 10000px;
}

.appear.hide {
    opacity: 0;
    max-height: 0;
}

.loader {
  border: 16px solid #ffffff;
  border-radius: 50%;
  border-top: 16px solid #007e79;
  border-bottom: 16px solid #007e79;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader-sm {
border: 8px solid #ffffff;
  border-radius: 50%;
  border-top: 8px solid #007e79;
  border-bottom: 8px solid #007e79;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}