:root {
  --color-navy: #00557E;
  --color-blue-graphic: #008DB2;
  --color-light-blue: #BAD7EC;
  --color-header-blue: #00648E;
  --color-soft-blue-bg: #F1F7FB;
  --color-green: #008076;
  --color-dark-teal: #0F5278;
  --color-magenta: #E50065;
  --color-dropdown-blue: #00648B;
  --color-orange: #EA5A12;
  --color-white: #FFFFFF;
  --color-purple: #775195;
  --color-red: #c02b0a;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Lexend', sans-serif;
}



footer.footer {
     background: url(../img/footer.png) 100% 50px no-repeat var(--color-navy); 
     padding: 40px 0 50px 0;
     position: relative; 
     z-index: 1;
}

footer.footer ul.links li a {
    font-weight: 400;
}

footer.footer ul.social li a svg {
	width: 100%;
	height: 100%;
	}

	footer.footer ul.links.social li a {
	height: 34px !important;
	width: 34px;
	}

	footer.footer ul.social li a .social-icon-hover {
    display: none;
	}

	/* 2. Hover state: Swap the visibility */
	footer.footer ul.social li a:hover .social-icon {
		display: none !important;
	}

	footer.footer ul.social li a:hover .social-icon-hover {
		display: inline-block !important;
	}
footer.footer ul.social li a:hover svg g, footer.footer ul.social li a:focus svg g {
    fill: none !important;
}
/*
Do you find this page useful colour updates
*/

.section.section-useful .field-actions .btn.btn-success {
    background-color: var(--color-green) !important;
    border-color: var(--color-green) !important;
}

.section-useful .gform_wrapper input[type=submit]:hover, .section-useful .gform_wrapper input[type=submit]:focus {
    background: var(--color-white) !important;
}

.section .gform_wrapper input[type="submit"] {
    background: var(--color-green);
}

.section.section-useful .field-feedback.field-feedback-success, .section-useful .gform_wrapper input[type=submit] {
    background-color: var(--color-green) !important;
    
}

.section.section-useful .field-feedback.field-feedback-success {
    background: var(--color-green) !important;
}

.section.section-useful .field-actions .btn.btn-success:hover, .section.section-useful .field-actions .btn.btn-success:focus {
    border-color: var(--color-green) !important;
    background-color: transparent !important;
    color: var(--color-green) !important;

}

.gform_wrapper.gravity-theme .gfield_label {
    text-align: left !important;
    width: 100%;
}

.gform_wrapper.gravity-theme .gfield_required {
    color: var(--color-red) !important;
}

section.section-useful .gform_wrapper.gravity-theme .gfield_required {
    color: var(--color-white) !important;
}

.gform_wrapper.gravity-theme .gfield select:focus, .gform_wrapper.gravity-theme .gfield input:focus, .gform_wrapper.gravity-theme .gfield textarea:focus {
    border: 4px solid #fff!important;
    outline: 2px solid black!important;
    box-shadow: 0 0 0 3px #fff;
    border-radius: 0;
}
/* Media-Filming in Thanet */
.page-template-media-filming .section.section-heading {
    background-color: var(--color-dropdown-blue);
}

.page-template-media-filming .box.box-blue {
    background: var(--color-light-blue);
}

/*Call to action color changes*/
.single-faq .box.box-light {
    background: var(--color-light-blue);
}

.single-faq .btn.btn-danger {
    background: var(--color-magenta);
    border-color: var(--color-magenta);

}

.single-faq .btn.btn-danger:hover {
    background: var(--color-white);
    color: var(--color-magenta);
    border-color: var(--color-magenta);
}
/* Header Navigation */
header.header .header-nav ul.nav li a,
header.header .header-nav ul.nav-no-dd li a {
    background: var(--color-magenta);
    border: 2px solid var(--color-white);
}

.white-tag {
    color: var(--color-header-blue);
}
/* A-Z Search Button */
header.header .header-search .input-group-btn .btn.btn-success {
    background-color: var(--color-light-blue);
    border-color: var(--color-light-blue);
    color: var(--color-dark-teal);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}

header.header .header-search .input-group-btn .btn.btn-success:hover {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}

/* Search Button */
/*header.header .header-search .input-group-btn .btn.btn-warning { 
    
}*/

header.header .header-search .btn-warning {
    background-color: var(--color-orange);
    background: var(--color-orange);
    border-color: var(--color-orange);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}

header.header .header-search .input-group-btn .btn.btn-success {
    background-color: var(--color-light-blue);
    border-color: var(--color-light-blue);
    color: var(--color-dark-teal);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
    border-radius: 25px 0 0 25px;
}

header.header .header-search .btn-warning {
    background-color: var(--color-orange);
    background: var(--color-orange);
    border-color: var(--color-orange);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
    border-radius: 0 25px 25px 0;
}

.home .tmpl-general-banner .box { 
    background-color: var(--color-navy);
}

.section .section-header a { 
    color: var(--color-navy);
}

.section.section-services {
    background: var(--color-light-blue);
}

.section.section-services .btn {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

.section.section-services .btn.btn-info:hover {
    background: var(--color-white);
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.section.section-services .field-title a {
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
}

.newsroom-intro-section .newsroom-card-categ {
    color: var(--color-navy);
}

.section.section-meetings {
    background: var(--color-light-blue);
}

.btn.btn-danger {
    background: var(--color-magenta);
    border: 2px solid var(--color-magenta);
}

.btn.btn-danger:hover {
    color: var(--color-magenta);
}

.section.section-find {
    background: var(--color-light-blue);
}

.collection-bins-box {
    background-color: var(--color-soft-blue-bg);
    border: 1px solid var(--color-light-blue);
}

.btn.btn-info {
    background: var(--color-navy);
    border: 2px solid var(--color-navy);
}

.btn.btn-info:hover {
    border-color: var(--color-navy);

}

.green .collection-bins-box-bottom:before {
    background-color: var(--color-green);
}

.section.section-heading {
    background-color: var(--color-header-blue) !important;
}
.box.box-light {
    background: var(--color-light-blue);
}

.table-responsive table.blueheadernobackground.responsive-table {
    border-color: var(--color-navy);
}

.table-responsive table.blueheadernobackground.responsive-table thead th {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-right: 1px solid var(--color-white);
}

.table-responsive table.blueheadernobackground.responsive-table thead tr th:last-child {
    border-right: 1px solid var(--color-navy);
}

.table-responsive table.blueheadernobackground.responsive-table td {
    border-color: var(--color-navy);
}

.newsroom-intro-section .newsroom-latest-news .section-header {
    border-top: 15px solid var(--color-magenta);
}

.newsroom-intro-section .blue-border {
    border-top: 10px solid var(--color-navy);
}

.newsroom-intro-section .green-border {
    border-top: 10px solid var(--color-green);
}

.newsroom-intro-section .purple-border {
    border-top: 10px solid var(--color-purple);
}

.newsroom-banner .section-header .btn:hover {
    color: var(--color-magenta);
    border: 2px solid var(--color-magenta);
}

@media screen and (min-width: 992px) {
    .newsroom-banner {
        background-color:  var(--color-light-blue) !important;
    }
}

/* Hyperlink styling*/
.field-body a {
    font-weight: bold;
    color: var(--color-navy) !important;

}
/*Form colour changes*/
.gform_wrapper.gravity-theme .gf_step_completed .gf_step_number {
    background: var(--color-navy) !important;
}

.gform_wrapper.gravity-theme .gf_step:hover .gf_step_number, .gform_wrapper.gravity-theme .gf_step:focus .gf_step_number {
    color: var(--color-navy) !important;
}

.gform_wrapper.gravity-theme .gf_step_number {
    color: var(--color-navy) !important;
    border: 2px solid var(--color-navy) !important;
}

.gform_wrapper.gravity-theme .gf_step_active .gf_step_number {
    color: var(--color-navy) !important;
    border: 2px solid var(--color-navy) !important;
    background: var(--color-light-blue) !important;
}

.gform_wrapper.gravity-theme .gf_step_active.gf_step:not(:first-child) .gf_step_number:before, .gform_wrapper.gravity-theme .gf_step_completed.gf_step:not(:first-child) .gf_step_number:before {
    background: var(--color-navy);
}

.map-and-info-w .info-w {
    background: var(--color-header-blue) !important;

}

.map-and-info-w .info-w .submit-c {
    background: var(--color-light-blue) !important;
    border: 4px solid var(--color-light-blue) !important;
}

.gform_previous_button, .gform_wrapper.gravity-theme .gform_save_link.button, .gform_wrapper.gravity-theme .gform_previous_button.button {
    background: var(--color-green) !important;
    border: 2px solid var(--color-green) !important;

}

.gform_previous_button:hover, .gform_wrapper.gravity-theme .gform_save_link.button, .gform_wrapper.gravity-theme .gform_previous_button.button:hover {
    background: var(--color-white) !important;
    border: 2px solid var(--color-green) !important;
    color: var(--color-green) !important;
}

.gform_next_button {
    background: var(--color-navy) !important;
    border: 2px solid var(--color-navy) !important;
}

.gform_next_button:hover {
    border: 2px solid var(--color-navy) !important;
    background: var(--color-white) !important;
    color: var(--color-navy) !important;
}

@media screen and (max-width: 769px) {
    .gform_wrapper.gravity-theme .gfield input.medium, .gform_wrapper.gravity-theme .gfield select.medium {
        width: 100% !important;
    }
}

header.header .logo {
    background-size: contain;
    height: 90px;
    width: 90px;
}