/*
Theme Name: CCBC Town Councils
Theme URI: https://www.caerphillytowncouncil.co.uk
Description: Caerphilly Town Council Website
Version: 1.0
Author: Richard Boydell
Author URI: http://www.unitedgraphicdesign.com/
*/


/* Body */

html, body {height: 100%; width: 100%; margin:0; padding:0; color:#464646; font-family: azo-sans-web, sans-serif; font-size: 1em; font-weight: 300; line-height: 165%;}


/* Typography */

h1 {font-size:2.3em; font-weight: 700;}
h2 {font-size:1.8em; font-weight: 700;}
h3 {font-size:1.5em; font-weight: 700;}
h4 {font-size:1.1em; font-weight: 700;}
h1, h2, h3, h4 {color: #464646; line-height: 105%;}

a {color:inherit; text-decoration:underline;}
a:hover {text-decoration: none;}

strong {font-weight: 700;}

hr {display: block; margin-top: 1.5em; margin-bottom: 1.5em; margin-left: auto; margin-right: auto; border-style:solid; border-width: 5px; border-color:#ebebeb; clear: both;}


/* Images */

.alignleft {float:left;	margin-right:15px;}
.alignright {float:right;margin-left:15px;}

img {max-width:100%; height: auto;}

.gallery-thumb {padding: 5px !important;}
.caption-title {font-size: 1.2em; background: #FFFFFF; padding: 15px 15px 20px; margin:0; -webkit-margin-before: 0; -webkit-margin-after:0;}


/* Forms */

form input[type=text], input[type=email], textarea {width: 100%; border: solid 1px #464646; padding: 15px;}
form input[type=submit] {padding: 0 15px; background-color: #464646; color: #FFFFFF; border: none; font-size: 1em; font-weight: 700; -webkit-appearance: none;}
input.wpcf7-form-control.wpcf7-submit {padding: 15px;}


/* Structure */

* {box-sizing: border-box;}

.wrapper {max-width: 1200px; margin: 0 auto;}
.smallwrapper {max-width: 800px; margin: 0 auto;}
.row:after, .wrapper:after, .smallwrapper:after {content: ""; clear: both; display: block;}

[class*="col-"] {float: left; padding: 30px;}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-25 {width: 20%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-95 {width: 80%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

.clear {clear: both;}


/* Top Bar */

#top-bar {padding: 5px; background-color: #EEEEEE;}
.search {padding: 0 30px; border:none;}
fieldset {border: none !important; padding:0 !important; margin:0 !important; float: left;}
.search input[type=text] {width:60%}
legend {display: none;}
.hiddenlabel {height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; clip: rect(0 0 0 0); position: absolute;}
#s {padding:5px; margin:0; background-color:#FFF; border:none; font-size:1.5em; float: left; border-bottom: 3px solid #DCDCDC;}
#s::placeholder {font-size: 0.65em; color:#DCDCDC; padding-top: 5px;}
#submit {height:41px; background-color:#464646; border:none; float:left; border-bottom:3px solid #DCDCDC;}
.language {padding: 0 30px; font-weight: 500;}
.wpml-ls-legacy-list-horizontal {text-align: right;}


/* Header */

#header {color: #FFFFFF; background-color: #464646;}
#logo {padding: 30px; float: left;}
#logo img {max-height: 180px;}
#title {padding: 60px 0 30px 0; float: left;}
.title {font-weight: 700; font-size: 3em; line-height: 105%; padding-bottom: 10px;}
.tagline {font-weight: 400; font-size: 1.8em; line-height: 105%; padding: 0; text-transform: uppercase;}
#headerborder {background-color: #000000; height: 15px;}


/* Navigation */

#navigation {background-color: #464646; font-weight:700; font-size:1.3em; padding: 0 !important;}
nav {margin: 0;}
nav ul {padding: 0; margin:0; list-style: none; position: relative;}
nav ul li {padding: 0; margin: 0 -7px 0 0; display:inline-block;}
nav a {display:block; padding: 20px 30px; color:#FFFFFF; text-decoration:none;}
nav a:hover {color: #464646; background-color: #EEEEEE; text-decoration:none;}
nav ul ul {display: none; position: absolute; top: 100%;}
nav ul li:hover > ul {display:inherit;}
nav ul ul li {z-index: 9999; min-width:170px; display:list-item; position: relative; background-color:#464646; border-bottom: 1px solid #FFFFFF; font-size: 0.9em;}
nav ul ul ul {position: absolute; top:0; left:100%;}
nav li > a:after {content:  " +"; font-size: 0.8em;}
nav li > a:only-child:after { content: ''; }
ul#menu-main-menu.menu, ul#menu-main-menu-1.menu {list-style-type: none; list-style-image: none; margin: 0; padding: 0;}
ul#menu-mobile-menu.menu {list-style-type: none; list-style-image: none;}
@media only screen and (min-width: 768px) {.topnav {display: none;}}


/* Slider */

#slider-wrap {background-color: #EEEEEE;}
.slider-caption {position: absolute; bottom: 30px; width:auto; font-size: 1.5em; font-weight: 700; padding: 15px; color: #FFFFFF; background-color:#464646; z-index: 999;}
.gallery img {max-height: 400px; overflow: hidden; object-fit: cover; object-position: center;}


/* Homepage */

#welcome {font-size:1.3em; text-align: center;}

.feature-box {padding: 0; margin-bottom: 45px;}
.feature-box h2 {-webkit-margin-before: 0; -webkit-margin-after: 0.83em;}
.feature-box h3 {-webkit-margin-after: 0;}
.feature {position: relative; min-height: 400px; background-size: cover;}
.feature-caption {position: absolute; bottom: 0; left: 0; padding: 30px; font-size: 1.3em; text-transform: uppercase; color: #FFF; background-color:#464646;}
.feature-ph {min-height: 220px; background-image: url(images/default_thumb.jpg); background-size: cover; background-position: center; background-repeat:no-repeat;}
.event-ph {min-height: 220px; background-image: url(images/event_thumb.jpg); background-size: cover; background-position: center; background-repeat:no-repeat;}
.feature-image {min-height: 220px; background-size: cover; background-position: center; background-repeat:no-repeat;}
.meeting-tab a {text-transform: uppercase;}
.feature-alt {min-height: 340px; background-size: cover; background-color:#464646;}
.feature-alt-caption {bottom: 0; left: 0; right:0; padding: 30px; color: #FFF;}
.feature-alt-caption a {font-size: 1em; text-transform: uppercase;}
.feature-alt-title {font-size: 1.4em; font-weight: 700;}
.news-box {padding: 0; margin-bottom: 45px;}
.news-box h2 {padding: 0 30px;}
.news {padding: 0;}
.social-box {background-color:#464646; color: #FFFFFF; font-size: 1.3em; font-weight: 700; text-align: center; min-height: 340px; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;}


/* Content */

#content {font-size: 1.2em;}
.social {padding: 30px 0;}


/* Single Post */

.single-date {padding:10px 15px; background-color: #EEEEEE; display: inline; border-radius: 10px;}
.single-content {padding-top: 30px;}


/* Councillors Page */

.councillor {min-height: 350px; line-height: 130%;}
.councillor-ph {height: 220px; padding: 0 !important; background: url(images/councillor_ph.png); background-repeat:no-repeat; background-size:cover; background-position: center;}
.councillor-image {height: 220px; padding: 0 !important; background-repeat:no-repeat; background-size:cover; background-position: center;}
.councillor-caption {bottom: 0; left: 0; right:0; padding: 0 30px 30px;}
.ward {text-align: center; padding: 0 !important;}


/* Sidebar */

.sidebar {background-color: #EEEEEE; padding: 30px;}
.sidebar ul, .sidebar li {list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0;}
.sidebar h2 {-webkit-margin-before: 0; -webkit-margin-after: 0.83em;}


/* Meetings */

.meeting {display: block; padding: 15px; border-bottom: 1px dashed #FFFFFF;}
.meeting:nth-of-type(odd) {background-color: #F8F8F8;}
.meeting:after {content: ""; clear: both; display: block;}
.date {color: #464646; font-weight: 700; text-transform: uppercase; display: block;}
.files {font-size: 0.8em; display: block; float: left;}
.files:before {content:"• ";}
.files:after {content:"\00a0\00a0";}


/* Document Archive */

.collapsible {background-color: #EEEEEE; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; margin-bottom: 2px !important;}
h4.collapsible {margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0;}
.active, .collapsible:hover {background-color: #464646; color: #FFFFFF;}
.collapsible:after {content: '\002B'; font-weight: bold; float: right; margin-left: 5px;}
.active:after {content: "\2212";}
.collapse-content {background-color: #EEEEEE; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}


/* Footer */

#footer {border-top: solid 30px #464646; background-color: #EEEEEE; color: #464646; font-size: 0.95em; line-height: 145%;}
#footer ul, #footer li {list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; margin:0; padding: 0;}
#footer h2 {font-size: 1.4em;}
.copyright {font-size: 0.85em; text-align: center;}