

:root {
    --accent-color-1: #043A8B;
    --accent-color-2: #FEDD03;

    --button-color: #043A8B;
    --button-color-hover: #FFFBE4;

    --cta-button-color: #043A8B;
    --cta-button-color-hover: #02204D;
    
    --title-color: #014699;
}

.nav-header__navigation-item:before,
.nav-header__navigation-item--active:before,
.nav-header__navigation-item:hover:before,
.nav-header__navigation-item--active:hover:before {
    border: 2px solid #043A8B;
}

.nav-header__navigation-item:hover,
.nav-header__dropdown:hover,
.nav-header__logged-in .settings-dropdown:hover,
.footer__hoplr a:hover,
.settings-dropdown .dropdown-button:hover,
.settings-dropdown .dropdown-menu ul > li > a:hover, 
.settings-dropdown .dropdown-menu ul > li > a:focus {
    color: #043A8B;
    background-color: #FFFBE4;
}

.nav-header__dropdown:hover .nav-header__navigation-item-text,
.nav-header__navigation-item:hover .nav-header__navigation-item-text,
.nav-header__navigation-item--active .nav-header__navigation-item-text {
    color: #043A8B;
}

.nav-header__dropdown-item {
    color: #014699;
}

@media screen and (min-width: 1024px) {
    .nav-header__navigation-item:hover::before {
        border-color: #043A8B;
    }
    .nav-header__dropdown-item:hover {
        background-color: #FFFBE4;
    }
}

.pp-button {
    color: #043A8B;
    border-color: #043A8B;
}

.pp-button:hover {
    background-color: #FFFBE4;
}

.pp-button--primary {
    background-color: rgba(4, 58, 139, 0.9);
    border-color: rgba(4, 58, 139, 0.9);
    color: white;
}

.pp-button--primary:hover {
    background-color: #043A8B;
    border-color: #043A8B;
}

.pp-button--cta {
    background-color: #043A8B;
    color: white;
    border-color: #043A8B;
}

.pp-button--cta:hover {
    background-color: #02204D;
    border-color: #02204D;
}

.bgcolor-theme-1 {
  background-color: #043A8B;
}
.bgcolor-theme-2 {
  background-color: #FEDD03;
}

.bgcolor-theme-1--lightened-5 {
  background-color: rgba(4, 58, 139, 0.05);
}
.bgcolor-theme-2--lightened-5 {
  background-color: rgba(254, 221, 3, 0.05);
}

.bgcolor-button {
    background-color: #043A8B;
}
.bgcolor-button--hover {
    background-color: #FFFBE4;
}

.bgcolor-cta-button {
    background-color: #043A8B;
}
.bgcolor-cta-button--hover {
    background-color: #02204D;
}

.color-theme-1 {
  color: #043A8B;
}
.color-theme-2 {
  color: #FEDD03;
}
.color-title {
    color: #014699;
}
.color-cta-button {
    color: #043A8B;
}
.color-button {
    color: #043A8B;
}

.border-color-theme-1 {
  border-color: #043A8B;
}
.border-color-theme-2 {
  border-color: #FEDD03;
}

.overview .tile--news {
    background-color: #FFFBE4;
}

.overview .idea-cta {
    background-color: #FFFBE4;
}

.perception__button {
    background-color: rgba(4, 58, 139, 0.7);
}

.perception__button:not(:last-child) {
    border-color: rgba(4, 58, 139, 0.2);
}

.perception__button--selected, .perception__button:hover {
    background-color: rgba(4, 58, 139, 1);
}

.project-timeline__circle {
    border-color: #043A8B;
    color: #043A8B;
}

.project-timeline__phase:hover .project-timeline__circle,
.project-timeline__phase--active .project-timeline__circle {
    color: white;
    background-color: #043A8B;
}

.project-timeline .phase-container .phase-info__circle {
    color: #043A8B;
    border-color: #043A8B;
}

.project-timeline .phase-container--active .phase-info__circle {
    color: white;
    background-color: #043A8B;
    border-color: #043A8B;
}

.phase-info-list {
    background-color:#FFFBE4;
}

.settings-dropdown > div:hover, .nav-header__language .settings-dropdown:hover {
    background-color: #FFFBE4;
}

.overview .tile__img-placeholder {
    background-color: #FFFBE4;
}

.overview .tile__img-placeholder i {
    color: #043A8B;
}

.overview .tile--news .tile__content-info-description p:last-child::before {
    background: linear-gradient(rgba(255,255,255,0.001) 200px, #FFFBE4);
}

.survey-questionnaire .survey-item--done .survey-item__question {
    color: #014699;
}

.input-checkbox__input:checked + .input-checkbox__click-area:hover {
    background-color: #FFFBE4;
}

.input-checkbox__input:checked + .input-checkbox__click-area {
    background-color: #FFFBE4;
}

.input-checkbox__input:checked + .input-checkbox__click-area .input-checkbox__button {
    border-color: #043A8B;
    background-color: rgba(4, 58, 139, 0.7);
}

.input-radio__input:checked + .input-radio__click-area .input-radio__button {
    border-color: #043A8B;
    background-color: rgba(4, 58, 139, 0.7);
}

.input-radio__input:checked + .input-radio__click-area:hover,
.input-radio__input:checked + .input-radio__click-area {
    border-color: #043A8B;
    background-color: #FFFBE4;
}

.q-rating-scale__options .input-radio__input:checked + .input-radio__click-area:hover {
    background-color: #043A8B;
}

.q-rating-scale__options .input-radio__input:checked + .input-radio__click-area {
    border-color: #043A8B;
    background-color: rgba(4, 58, 139, 0.7);
}

.project-navigation {
    background-color: rgba(4, 58, 139, 0.05);
    border-bottom: 2px solid #043A8B;
}

.about__text h1,
.about__text h2,
.about__text h3,
.about__text h4 {
    color: #043A8B;
}   

.about__text a:not(.pp-button) {
    color: #043A8B;
}

.about__text a:not(.pp-button):hover {
    color: rgba(4, 58, 139, 0.75);
}

.about .about-button {
    border-color: #043A8B;
}


.overview .overview-section:first-of-type .section__title {
  position: relative;
  visibility: hidden;
}

.overview .overview-section:first-of-type .section__title:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "Lopende projecten in onze stad";
}

.c-partners {
  display: flex;
  flex-direction: row;  
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
} 

.c-partner {
  margin-bottom: 2em;  
}

.c-partner h3 {
  font-size: 16px;
}

.c-partner__image {
  padding: 15px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.21);
  display: flex;
  align-item: center;
  justify-content: center;
}

.c-partner__image img {
  height: 60px;
}
