/*
 Theme Name:   Your Councillor
 Description:  Your Councillor
 Template:     twentyseventeen
 Version:      1.0
 Text Domain:  your-councillor
 Author:       Pinnacle Internet Marketing Ltd
 Author URI:   http://www.pinnacleinternetmarketing.co.uk
*/

/* Global */
html {

}

body {
    font-family: 'proxima-nova', 'sans-serif', 'Arial';
    font-size: .875em;
}

body.colors-dark {
    background: #0D1E38;
}

article {
    overflow: hidden;
}

.flex-container {
    display: flex;
}

.flex-container.flex-wrap {
    flex-wrap: wrap;
}

.flex-col {
    flex: 1 1 auto;
}

#content.site-content {
    margin: 0 0 1em 0;
    padding: 0;
}

/* Global - Read More & More Link */
.read-more-container {
    display: inline-block;
    padding: 0 15px 0 0;
}

.read-more,
.more-link {
    position: relative;
    font-weight: bold;
    color: white;
    width: 113px;
    height: 30px;
    padding: 5px 19px 5px 11px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    background-image: url('images/chevron-right.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* Global - Layout */
body.colors-dark .site-content-contain {
    background: #0D1E38;
}

.page-width {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
}

/* Global - Pagination */
.navigation.pagination {
    display: flex;
    align-items: stretch;
    float: none;
    width: 100%;
    text-align: center;
    justify-content: center;
    font-weight: normal;
}

.navigation.pagination > * {
    display: inline-flex;
    flex: 0 0 auto;
    padding: .25em 1em;
    font-size: 1rem;
    font-family: 'proxima-nova', 'sans-serif', 'Arial';
    line-height: 1;
    align-items: center;
}

.navigation.pagination > a {
    background: #3E95E2;
    color: white;
    font-weight: bold;
    box-shadow: none;
}

.navigation.pagination > a:not(.prev):not(.next):hover,
.navigation.pagination > a:not(.prev):not(.next):focus {
    color: white;
    box-shadow: none;
}

.navigation.pagination > select {
    background: white;
    border: none;
    padding: .25em 1.25em .25em .5em;
    height: 1.5rem;
    box-sizing: content-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.navigation.pagination > select::-ms-expand {
    display: none;
}

.navigation.pagination .total {
    position: relative;
    padding: .25em 1em .25em .6em;
}

body.colors-dark .navigation.pagination .total {
    color: white;
}

.navigation.pagination .total:before {
    font-family: 'FontAwesome';
    content: '\f078';
    position: absolute;
    left: -.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .5rem;
    color: #3E95E2;
    pointer-events: none;
}

/* Global - Entry Content */
.entry-content ul {
    list-style-position: inside;
}

/* Global - Posts (Blog Pages & Site Search) */
ul.posts-list {
    list-style: none;
    margin: 0;
}

ul.posts-list > li {
    overflow: hidden;
}

ul.posts-list > li:not(:last-child) {
    margin: 0 0 2em 0;
    border-bottom: 1px dotted rgba(0, 158, 227, 0.35);
    padding: 0 0 2.5em 0;
}

ul.posts-list > li .title {
    float: left;
    padding: 0;
    font-size: 1.4em;
}

ul.posts-list > li .excerpt {
    float: left;
    clear: left;
}

ul.posts-list > li.has-thumbnail .excerpt {
    width: calc(100% - 200px - 1em);
}

ul.posts-list > li .thumbnail {
    clear: both;
    float: right;
    margin: 0 0 1em 1em;
    max-width: 200px;
}

ul.post-categories {
    list-style: none;
    margin: 0 0 .3em 0;
    float: right;
    clear: right;
    font-size: .9em;
}

ul.post-categories li {
    display: inline;
}

ul.post-categories li a:before {
    font-family: 'FontAwesome';
    content: '\f02b';
    margin: 0 .17em 0 0;
}

ul.post-categories li:not(:last-child) a {
    margin: 0 .35em 0 0;
}

.post-date {
    float: right;
    margin: 0 0 .35em 0;
    font-size: .9em;
}

.post-date:before {
    font-family: 'FontAwesome';
    content: '\f073';
    margin: 0 .25em 0 0;
}

.post-comments {
    font-size: .9em;
    float: right;
    clear: right;
    line-height: 1;
}

.post-comments:before {
    position: relative;
    top: -.064em;
    display: inline-block;
    font-family: 'FontAwesome';
    content: '\f075';
    margin: 0 .25em 0 0;
    transform: scaleX(-1);
}

/* Page - Default */
body.page:not(.home) #content.site-content {
    margin: 0 0 3em 0;
    padding: 0;
}

body.page:not(.home) #content.site-content .col {
}

body.page:not(.home) #content.site-content .col > .content > .thumbnail {
    float: left;
    margin: 0 1em 0 0;
    max-width: 300px;
    height: auto;
}

body.page:not(.home) #content.site-content .col > .content h2,
body.page:not(.home) #content.site-content .col > .content h3,
body.page:not(.home) #content.site-content .col > .content h4 {
    display: inline-block;
}

body.page:not(.home) #content.site-content .col > .content h2:after,
body.page:not(.home) #content.site-content .col > .content h3:after,
body.page:not(.home) #content.site-content .col > .content h4:after {
    content: '';

}

/* Banner - Default */
.banner {
    height: 255px;
    background-position: center center;
    background-size: cover;
    position: relative;
    margin: 0 0 2.3em 0;
}

/* Banner - Front Page */
.banner.front-page {
    height: 510px;
}

.banner.front-page .message > .title {
    color: #173068;
    font-size: 1.35em;
}

.banner.front-page .message {
    position: absolute;
    top: 50%;
    right: 30px;
    max-width: 430px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .9);
    border-radius: 5px;
    padding: 1em;
    border: 1px solid #021F37;
}

/* Banner - Cookies */
.banner-cookies {
    display: none;
    background: #153368;
    color: white;
}

.banner-cookies .container {
    max-width: 96%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    width: 1150px;
    padding: .7em 0;
}

.banner-cookies a {
    color: white;
    text-decoration: underline;
}

.banner-cookies .text {
    flex: 999 1 600px;
    border-left: 4px solid #FFF;
    margin: .5em 0;
    padding: .35em 0 .1em .05em;
}

.banner-cookies .text p {
    margin: 0 1em .5em 1em;
}

.banner-cookies .buttons {
    display: flex;
    flex: 1 1 auto;
    width: 15.5em;
    align-items: center;
    margin: .25em 0;
}

.banner-cookies .buttons .button-container {
    flex: 0 0 auto;
}

.banner-cookies .buttons .button-container button {
    background: white;
    color: #153368;
    padding: .225em 1em;
    margin: 0 1em 0 0;
}

.banner-cookies .buttons span {
    flex: 1 1 auto;
    display: block;
    line-height: 1.2;
    width: 100%;
}

/* Header */
.site-header {
    padding: 2.6em 0 1em 0;
    background: white;
}

body.colors-dark .site-header {
    background: #0D1E38;
}

.site-header > .page-width {
    overflow: hidden;
}

/* Header - Title */
.site-header > .page-width > .title {
    font-size: 3.17em;
    font-weight: bold;
    margin: 0;
    float: left;
    width: calc(100% - 300px);
    clear: none;
    padding: 0;
}

body.colors-dark .site-header > .page-width > .title {
    width: 100%;
    margin: -40px 0 0 0;
}

.site-header > .page-width > .title > a {
    display: inline-block;
    color: #00203d;
}

body.colors-dark .site-header > .page-width > .title > a {
    color: white;
}

.site-header > .page-width > .description {
    color: #009FE3;
    font-size: 1.8em;
    clear: left;
    float: left;
    width: 100%;
    margin: 0 0 .5em 0;
}

/* Header - Logo */
.site-header > .page-width > .logo {
    float: right;
    margin: 0 0 2em 0;
}

body.colors-dark .site-header > .page-width > .logo {
    margin: 0;
}

/* Header - Search */
.site-header > .page-width > .search {
    width: 270px;
    float: right;
    clear: right;
}

.site-header > .page-width > .search > form {
    position: relative;
}

.site-header > .page-width > .search > form > input[type='search'] {
    background: #D9EFFB;
    padding: .7em calc(26px + 2em) .7em 1em;
    border-radius: 2em;
    border: none;
    color: #009ee3;
    line-height: 1;
    font-size: .95em;
}

body.colors-dark .site-header > .page-width > .search > form > input[type='search'] {
    background: white;
}

.site-header > .page-width > .search > form > input[type='search']::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #009ee3;
}

.site-header > .page-width > .search > form > input[type='search']:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #009ee3;
    opacity:  1;
}

.site-header > .page-width  > .search > form > input[type='search']::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #009ee3;
    opacity: 1;
}

.site-header > .page-width > .search > form > input[type='search']:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #009ee3;
}

.site-header > .page-width > .search > form > .search-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-image: url(images/search-icon.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    height: 100%;
    width: 27px;
    padding: 0 1em;
    box-sizing: content-box;
}

/* Header - Menu */
.site-header > .page-width > .menu-container {
    float: right;
    max-width: 100%;
}

.site-header > .page-width > .menu-container ul.menu {
    list-style: none;
    margin: 0 -.5em 0 0;
    font-size: 1.4em;
    clear: both;
}

.site-header > .page-width > .menu-container > ul.menu > li {
    float: left;
}

.site-header > .page-width > .menu-container > ul.menu:after {
    content: '';
    clear: both;
    display: table;
}

.site-header > .page-width > .menu-container ul.menu li.current-menu-item a {
    color: #009FE3;
}

.site-header > .page-width > .menu-container ul.menu li a {
    position: relative;
    display: block;
    color: #00203c;
}

body.colors-dark .site-header > .page-width > .menu-container > ul.menu > li > a {
    color: white;
}

.site-header > .page-width > .menu-container > ul.menu > li > a {
    margin: 0 .75em;
}

.site-header > .page-width > .menu-container > ul.menu > li:not(:last-child) > a:after {
    content: '';
    border-right: 1px solid #00203c;
    transform: translateY(-50%);
    position: absolute;
    right: -.76em;
    top: 50%;
    height: .8em;
}

body.colors-dark .site-header > .page-width > .menu-container > ul.menu > li:not(:last-child) > a:after {
    border-right: 1px solid white;
}

/* Header - Menu - Submenu */
.site-header > .page-width > .menu-container > .menu .sub-menu {
    display: none;
}

.site-header > .page-width > .menu-container > .menu > li.menu-item-has-children {
    position: relative;
}

.site-header > .page-width > .menu-container > .menu > li.menu-item-has-children:hover > .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    z-index: 1;
    margin: 0;
    border-top: 5px solid #d9effb;
    list-style: none;
}

.site-header > .page-width > .menu-container > .menu > li.menu-item-has-children:hover > .sub-menu > li > a {
    color: white;
    margin: 0;
    padding: 1em 2em;
    font-size: .7em;
    background: rgba(0, 32, 61, .94);
    min-width: 250px;
    text-align: center;
}

.site-header > .page-width > .menu-container > .menu > li.menu-item-has-children:hover > .sub-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.94);
    color: black;
}

/* Home Page - Columns */
body.home .cols {
    margin: 0 auto;
}

body.home .col {
    width: 372px;
    margin: .5em 0;
}

/* Colums */
.cols {
    width: 100%!important;
}

.col > .content h2,
.col > .content h3 {
    font-size: 1.2em;
}

.col > .content h4 {
    font-size: 1.1em;
}

.col > .content h2,
.col > .content h3,
.col > .content h4,
.col > .content h2 a,
.col > .content h3 a,
.col > .content h4 a {
    color: #009ee3;
    font-weight: 800;
    padding: 0;
    line-height: 1.1;
}

.col.facebook > .content,
.col.twitter > .content {
    height: 500px;
    box-sizing: content-box;
    text-align: center;
    padding: 0;
    background: inherit;
}

.col > .content {
    background: #E5F4FC;
    padding: 1.4em;
    border-radius: 7px;
}

.col > .content .more-link {
    margin: 2em 0 0 0;
}

.col > .content > p:last-child {
    margin: 0;
}

.col > .title {
    display: flex;
    align-items: center;
    background: #153368;
    color: white;
    font-size: 1.65em;
    margin: 0 0 .65rem 0;
    padding: 0em .5em 0em .5em;
    border-radius: 7px;
}

.col > .title:before {
    background-repeat: no-repeat;
    background-position: center center;
}

body.colors-dark .col > .title {
    background: #0295E2;
}

.col > .title > img {
    flex: 0 0 auto;
    margin: 0 .5em 0 0;
}

.col > .title:before {
    display: inline-block;
    height: 58px;
    content: '';
}

.col > .title > span {
    display: block;
    flex: 1 1 auto;
}

/* Column - Facebook */
.col.facebook > .title:before {
    background-image: url('images/facebook-icon-alt-light.png');
    width: 63px;
    margin: 0 .5em 0 0;
}

.col.facebook > .content > .fb-page-clone {
    display: none;
}

.col.facebook blockquote {
    font-style: normal;
    font-size: 1em;
}

body.colors-dark .col.facebook > .title:before {
    background-image: url('images/facebook-icon-alt.png');
}

/* Column - Latest News */
.col.news > .title:before {
    background-image: url('images/news-icon.png');
    width: 69px;
    margin: 0 .5em 0 0;
}

/* Column - Contact */
.col.contact > .title:before {
    background-image: url('images/contact-icon.png');
    width: 85px;
    margin: 0 .5em 0 0;
}

/* Column - About Me */
.col.about-me > .title:before {
    background-image: url('images/about-icon.png');
    width: 40px;
    margin: 0 .5em 0 0;
}

.col.about-me > .content > .thumbnail {
    margin: 0 0 1em 0;
}

/* Column - Twitter */
.col.twitter > .title:before {
    background-image: url('images/twitter-icon-alt.png');
    width: 73px;
    margin: 0 .5em 0 0;
}

/* Column - Recent Posts */
.col.news ul.recent-posts {
    list-style: none;
    margin: 0;
}

.col.news ul.recent-posts li .title {
    display: inline;
    font-size: 1.2em;
}

.col.news ul.recent-posts li .thumbnail {
    float: left;
    width: 90px;
    max-width: 100%;
    margin: 0 1em 1em 0em;
}

/* Column - Get in touch */
.col.contact .content a {
    color: #003670;
}

.col.contact .content dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.col.contact .content dl dt {
    flex: 0 0 auto;
    margin: .5em 1em .5em 0;
}

.col.contact .content dl dt img {
    display: block;
}

.col.contact .content dl dd {
    flex: 1 1 auto;
    width: calc(100% - 40px - 1em);
    margin: 0;
}

@media screen and (max-width: 1214px) {
    body.home .col {
        width: calc(50% - 8px);
    }
}

/* Blog Page */
.blog:not(.has-sidebar) #primary article {
    float: none;
    width: auto;
}

.blog article .cols .col.for-posts-list {
    float: left;
    width: calc(100% - 1em - 350px);
}

.blog article .cols .col.for-categories {
    float: right;
    width: 350px;
    margin: 0 0 1em 0;
}

.blog article .cols .col.for-archives {
    float: right;
    width: 350px;
    clear: right;
}

/* Blog - Single */
.single-post:not(.has-sidebar) #primary {
    max-width: 100%;
    margin: auto;
}

.single-post .cols .col.for-post {
    float: left;
    width: calc(100% - 350px - 1em);
}

.single-post .cols .col.for-post .content > .thumbnail {
    margin: 0 0 1em 0;
}

.single-post .cols .col.for-post .content > .post-date {
    margin: 0 0 1em 0;
}

.single-post .cols .col.for-post .content > .post-categories {
    margin: 0 0 1em 0;
}

.single-post .cols .col.for-post .content > .entry-content {
    clear: both;
    margin: 0 0 1em 0;
    border-bottom: 1px solid rgba(0, 158, 227, 0.35);
    padding: 0 0 2em 0;
}

.single-post .cols .col.for-post .content > .prev-next-links {
    overflow: hidden;
}

.single-post .cols .col.for-post .content > .prev-next-links > a {
    color: #009ee3;
}

.single-post .cols .col.for-post .content > .prev-next-links > a[rel='prev'] {
    float: left;
}

.single-post .cols .col.for-post .content > .prev-next-links > a[rel='next'] {
    float: right;
}

/* Blog - Entry Content */
/* (Formatting for post content on listing & single post page) */
.col > .content .entry-content h1,
.col > .content .entry-content h2,
.col > .content .entry-content h3,
.col > .content .entry-content h4 {
    color: #009ee3;
    font-weight: normal;
    padding: 0;
}

.col > .content .entry-content blockquote {
    background: white;
    border-left: 10px solid #0295E2;
    margin: 1.5em 10px;
    padding: 0.75em 20px;
    quotes: "\201C""\201D""\2018""\2019";
}
.col > .content .entry-content blockquote:before {
    color: #0295E2;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}
.col > .content .entry-content blockquote p {
    display: inline;
}

/* Contact Page */
.page-template-template-contact article .col.contact {
    float: left;
    width: calc(100% - 1em - 350px);
}

body.page-template-template-contact #content.site-content article .col.contact > .content > .thumbnail {
    float: none;
    display: block;
    margin: 0 auto 2em auto;
    max-width: 400px;
    height: auto;
}

.page-template-template-contact article .col.contact-form {
    float: right;
    width: 350px;
}

/* Search Page */
body.search #primary .site-main article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article {
    float: none;
    width: auto;
}

/* Footer */
footer.site-footer {
    background: #3e95e2;
    color: white;
    padding: 1em 0;
    font-size: 1em;
    border-top: none;
    margin: 0;
}

footer.site-footer a {
    color: white;
}

footer.site-footer > .page-width {
    overflow: hidden;
}

/* Footer - Left */
footer.site-footer > .page-width > .left {
    float: left;
}

footer.site-footer > .page-width > .left .title {
    margin: 0 0 1em 0;
    font-size: 1.5em;
}

footer.site-footer > .page-width > .left .menu-footer-menu-container {
    margin: 0 0 2em 0;
}

/* Footer - Left - Menu */
footer.site-footer > .page-width > .left ul.menu {
    list-style: none;
    margin: 0 0 1em 0;
}

footer.site-footer > .page-width > .left ul.menu li {
    line-height: 1.2;
    margin: 0 0 .5em 0;
}

/* Footer - Right */
footer.site-footer > .page-width > .right {
    float: right;
    text-align: right;
    max-width: 370px;
    font-size: .95em;
}

footer.site-footer > .page-width > .right > .logo {
    margin: 0 0 1em 0;
}

footer.site-footer > .page-width > .right > .promoted-by {
    margin: 0 0 1em 0;
    line-height: 1.4;
}

footer.site-footer > .page-width > .right > .promoted-by > .widget_text {
    padding: 0;
}

/* Responsive */
@media screen and (max-width: 1023px) {
    /* Banner - Front Page */
    .banner.front-page {
        text-align: center;
    }

    .banner.front-page .message {
        right: auto;
        width: 80%;
        max-width: none;
        position: relative;
        display: block;
        margin: 0 auto;
    }

    /* Header */
    .site-header > .page-width {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-header > .page-width > .title {
        order: 1;
        width: 100%;
    }

    body.colors-dark .site-header > .page-width > .title {
        margin: 0;
    }

    .site-header > .page-width > .description {
        order: 2;
        margin: 0 0 .65em 0;
    }

    .site-header > .page-width > .search {
        order: 3;
        margin: 0 0 1.35em 0;
    }

    .site-header > .page-width .menu-container {
        order: 4;
    }

    /* Header - Logo */
    .site-header > .page-width > .logo {
        float: none;
    }

    body.colors-dark .site-header > .page-width > .logo {
        margin: 0 0 2em 0;
    }

    /* Columns */
    .cols {
        width: 100%!important;
    }

    .cols .col {
        position: static!important;
        flex: 0 0 auto;
        width: 100%!important;
        margin: 0 0 1em 0;
    }

    /* Column - Recent Posts */
    .col.news ul.recent-posts {
        list-style: none;

    }

    .col.news ul.recent-posts li .title {
        display: block;
    }

    .col.news ul.recent-posts li .title a {
        display: block;
    }

    .col.news ul.recent-posts li .thumbnail {
        float: none;
        width: 100%;
        margin: 0;
    }

    /* Home Page - Columns */
    body.home .col {
        margin: 0 0 1em 0;
    }

    /* Page - Default */
    body.page:not(.home) #content.site-content {
        margin: 0 0 3em 0;
        padding: 0;
    }

    body.page:not(.home) #content.site-content .col > .content > .thumbnail {
        float: none;
        max-width: none;
        width: 100%;
    }

    /* Global - Pagination */
    .navigation.pagination .prev.page-numbers,
    .navigation.pagination .next.page-numbers {
        font-size: 1em;
    }

    .navigation.pagination .page-numbers.current {
        box-shadow: none;
    }

    /* Global - Posts (Blog Pages & Site Search) */
    ul.posts-list > li .title {
        float: none;
        text-align: center;
    }

    .post-date {
        float: none;
        text-align: center;
        margin: 0 0 1.5em 0;
    }

    ul.posts-list > li .thumbnail {
        float: none;
        max-width: none;
        width: 100%;
    }

    ul.posts-list > li.has-thumbnail .excerpt {
        float: none;
        width: 100%;
    }

    ul.post-categories {
        float: none;
        text-align: center;
        clear: left;
    }

    ul.post-categories li {
        display: inline-block;
    }

    ul.post-categories li a {
        padding: 1em .5em;
        display: inline-block;
    }

    .post-comments {
        display: block;
        float: none;
        text-align: center;
        padding: .75em 0 0 0;
    }

    .comment-body {
        margin: 0 0 4em 0;
    }

    /* Contact Page */
    .page-template-template-contact article .col.contact {
        float: none;
    }

    body.page-template-template-contact #content.site-content article .col.contact > .content > .thumbnail {
        float: none;
        display: block;
        margin: 0 auto 2em auto;
        max-width: 400px;
        height: auto;
    }

    .page-template-template-contact article .col.contact-form {
        float: none;
    }

    body.page-template-template-contact #content.site-content article .col.contact > .content > .thumbnail {
        width: 100%;
        max-width: none;
    }

    /* Footer */
    footer.site-footer > .page-width > .left {
        float: none;
        text-align: center;
        margin: 0 0 1em 0;
    }

    footer.site-footer > .page-width > .right {
        float: none;
        text-align: center;
        width: 100%;
        max-width: none;
    }

}