@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
/* Being kind to myself and allowing some spelling mistakes */
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
/* Being kind to myself and allowing some spelling mistakes */
.navcontainer .logo img {
  max-width: 100%;
}

@media all and (min-width: 768px) {
  .navcontainer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    padding: 40px 0 0;
  }
  .navcontainer .logo {
    float: none;
    display: inline-block;
    vertical-align: middle;
    padding-right: 40px;
    padding-top: 2px;
  }
  .navcontainer .logo img {
    vertical-align: top;
  }
  .navcontainer h1 {
    height: 4.5vw;
    max-height: 67.5px;
    margin-bottom: 0; /* The margin's provided elsewhere */
  }
  .navcontainer h1 img {
    max-height: 100%;
  }
  .navcontainer:after {
    display: none;
  }
  .navcontainer nav {
    border-radius: 3px;
    float: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 75%;
    height: 4.5vw;
    max-height: 67.5px;
    padding-right: 2.5em;
    text-align: right;
    font-size: 1.5vw;
    background-color: #333;
  }
}
@media all and (min-width: 768px) and (min-width: 1500px) {
  .navcontainer nav {
    font-size: 22.5px;
  }
}
@media all and (min-width: 768px) {
  .navcontainer nav .sf-menu {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .navcontainer nav .sf-menu > li {
    float: none;
    display: inline-block;
    vertical-align: middle;
    position: static;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    white-space: nowrap;
    text-align: center;
  }
  .navcontainer nav .sf-menu > li.sfHover li a {
    background-color: transparent;
  }
  .navcontainer nav .sf-menu > li .svg-inline--fa {
    max-width: 1.1em;
  }
  .navcontainer nav .sf-menu > li ul {
    display: table-row;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    top: 100%;
    left: 0;
    width: 100%;
    visibility: hidden;
  }
  .navcontainer nav .sf-menu > li ul:after { /* Horrible hack to provide a background to get rid of the border radius on the menu bar. */
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: -1;
    background-color: #333;
  }
  .navcontainer nav .sf-menu > li ul li {
    display: table-cell;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 0;
    width: auto;
  }
  .navcontainer nav .sf-menu > li ul li:after {
    content: "";
    position: absolute;
    top: 0.5em;
    bottom: 0.5em;
    right: 0;
    border-right: 1px solid #333;
  }
  .navcontainer nav .sf-menu > li ul li:last-child:after {
    content: none;
  }
  .navcontainer nav .sf-menu > li ul a {
    height: auto;
    padding: 0.5em;
    font-size: 1.35vw;
    line-height: 1.5;
    text-align: center;
  }
}
@media all and (min-width: 768px) and (min-width: 1500px) {
  .navcontainer nav .sf-menu > li ul a {
    font-size: 22.5px;
  }
}
@media all and (min-width: 768px) {
  .navcontainer nav .sf-menu a {
    height: 4.5vw;
    max-height: 67.5px;
    font-size: large;
    font-size: 1.5vw;
    line-height: 4.5vw;
    padding: 0;
    background: none;
  }
}
@media all and (min-width: 768px) and (min-width: 1500px) {
  .navcontainer nav .sf-menu a {
    font-size: 22.5px;
    line-height: 67.5px;
  }
}
@media all and (min-width: 768px) {
  .navcontainer nav .sf-menu a.sf-with-ul {
    padding-right: 0;
  }
  .navcontainer nav .sf-menu a.sf-with-ul:after {
    display: inline-block;
    content: "▼";
    font-size: 0.75em;
    padding-left: 0.25em;
  }
  .navcontainer nav .sf-menu a > .sf-sub-indicator {
    display: none;
    top: 41%;
    right: -20px;
    background: url("../images/small-down.png") no-repeat;
    transform: rotateZ(135deg) scale(1.25);
  }
  .navcontainer nav .sf-menu a:hover > .sf-sub-indicator {
    background: url("../images/small-down.png") no-repeat;
  }
  .navcontainer nav .search {
    float: none;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0;
  }
  .navcontainer nav .search form {
    opacity: 1;
    -webkit-transition: opacity;
    transition: opacity;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .navcontainer nav .search form input {
    opacity: 1;
    -webkit-transition: opacity;
    transition: opacity;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .navcontainer nav .search fieldset {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    margin: 0;
    padding: 0;
    border: none;
  }
  .navcontainer nav .search fieldset input#s {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0.5em;
    border: 3px solid #333;
    border-radius: 5px;
    font-size: 1.5vw;
    color: #333;
  }
}
@media all and (min-width: 768px) and (min-width: 1500px) {
  .navcontainer nav .search fieldset input#s {
    font-size: 22.5px;
  }
}
@media all and (min-width: 768px) {
  .navcontainer nav .search .search-button {
    max-width: 1.1em;
    position: absolute;
    right: 1em;
    top: 53%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 12;
    color: #333;
    cursor: pointer;
  }
  .navcontainer nav .search .search-button svg {
    height: 1em;
  }
  .navcontainer nav .search .fa-search {
    display: none;
  }
  .navcontainer nav .search .fa-times {
    position: relative;
    right: 4px;
    bottom: 2px;
  }
  .navcontainer nav .search.hidden form {
    pointer-events: none;
    opacity: 0;
  }
  .navcontainer nav .search.hidden form input {
    opacity: 0;
  }
  .navcontainer nav .search.hidden .search-button {
    color: white;
  }
  .navcontainer nav .search.hidden .fa-times {
    display: none;
  }
  .navcontainer nav .search.hidden .fa-search {
    display: inline;
  }
  .weather-bot {
    margin-top: 0.5em;
    font-size: smaller;
    font-size: 1.2vw;
    text-align: right;
  }
}
@media all and (min-width: 768px) and (min-width: 1500px) {
  .weather-bot {
    font-size: 17.25px;
  }
}
@media all and (min-width: 768px) {
  .weather-bot .tweet-link {
    font-size: smaller;
    font-weight: bold;
  }
}
@media all and (max-width: 767px) {
  header .headerwidget .logowidget {
    margin: 0;
  }
  header.navcontainer {
    padding-top: 2.5em; /* This is where the menu will sit */
    margin-top: 3vw;
    text-align: center;
    display: block;
  }
  header.navcontainer ul {
    font-size: medium;
  }
  header.navcontainer .logo {
    float: none;
    margin-top: 40px;
    margin-bottom: 0;
    line-height: 0; /* Overriding a line-height from the parent  */
  }
  header.navcontainer nav {
    display: none;
  }
  header.navcontainer .mobilenavcontainer {
    position: absolute;
    top: 0;
    background-color: white;
  }
  header.navcontainer .mobilenavcontainer a#jump {
    width: 100%;
    font-size: medium;
    height: 2.5em;
    line-height: 2.5em;
    padding-top: 0;
    padding-bottom: 0;
  }
  header.navcontainer .mobilenavcontainer .mobilenavigation {
    display: none;
    width: 100%;
    /* Most of the following styles recreate the 'display' class from the parent theme.
       This seemed the easiest way to get replace the menu expand/collapse
       with something (really only slightly) less horrible
    */
  }
  header.navcontainer .mobilenavcontainer .mobilenavigation #mobilenav {
    padding: 0;
  }
  header.navcontainer .mobilenavcontainer .mobilenavigation #mobilenav svg {
    max-height: 1em;
  }
  header.navcontainer .mobilenavcontainer .mobilenavigation #mobilenav #back a {
    margin-top: -38px;
  }
  header.navcontainer .mobilenavcontainer .mobilenavigation #mobilenav .hide-navigation {
    margin-bottom: 5px;
  }
  header.navcontainer .mobilenavcontainer .mobilenavigation #mobilenav a {
    font-size: medium;
    height: auto;
    padding: 9px 5px 5px 5px;
    border-bottom-width: 1px;
  }
  header.navcontainer .mobilenavcontainer .mobilenavigation #mobilenav a.display {
    height: auto;
  }
  .weather-bot {
    display: none;
  }
}
@media all and (max-width: 767px) {
  ul#mobilenav {
    width: 100%;
  }
}
.container.front-page .content-holder {
  width: initial;
  display: block;
}
.container.front-page .pagetitle {
  padding-top: 0;
}
.container.front-page a:not(:hover) {
  color: #333;
}
.container.front-page .hero-text h3 {
  color: #00a498;
  font-size: 20px;
}
.container.front-page .hero-text p {
  white-space: preserve-breaks;
}

@media all and (min-width: 900px) {
  .container.front-page .hero-image-section-holder .hero-image-holder {
    display: block;
    position: relative;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text {
    position: absolute;
    max-width: 40%;
    max-height: 50%;
    padding: 20px;
    border-radius: 3px;
    overflow: hidden;
    background-color: white;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text p:first-of-type {
    margin-top: 0.5em;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text p:last-of-type {
    margin-bottom: 0;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text.bottom-left {
    bottom: 20px;
    left: 20px;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text.bottom-right {
    bottom: 20px;
    right: 20px;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text.top-left {
    top: 20px;
    left: 20px;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text.top-right {
    top: 20px;
    right: 20px;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white, white);
  }
}
@media all and (min-width: 768px) {
  .container.front-page {
    display: grid;
    margin-top: 40px;
    grid-template-columns: 3fr 1fr;
  }
  .container.front-page .hero-image-section-holder {
    padding-right: 40px;
    padding-bottom: 40px;
  }
  .container.front-page .sidebar-holder {
    grid-column: 2/span 2;
    grid-row: 1/span 2;
    width: 100%;
  }
  .container.front-page .sidebar-holder .pagetitlewrap {
    display: none;
  }
  .container.front-page .sidebar-holder .sidebar {
    border-top-style: none;
    padding-top: 0;
  }
}
@media all and (max-width: 899px) and (min-width: 768px) {
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text {
    padding: 2.2222222222vw;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text h3 {
    font-size: 2.2222222222vw;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text p {
    font-size: 1.7777777778vw;
  }
}
@media all and (max-width: 899px) {
  .container.front-page {
    margin-top: 40px;
  }
  .container.front-page .hero-image-section-holder {
    padding-bottom: 20px;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text {
    padding-top: 0;
    padding-bottom: 0;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text h3 {
    margin-top: 0.5em;
    margin-bottom: 0;
  }
  .container.front-page .hero-image-section-holder .hero-image-holder .hero-text p:first-of-type {
    margin-top: 0;
    font-size: 14px;
  }
}
/* The following quick'n'dirty styles added to make the Dunwich Dynamo pages less ugly - Gareth December 2017*/
body.woocommerce-page .maincontent {
  padding-top: 2em;
}
body.woocommerce-page .woocommerce-product-gallery {
  padding-top: 1.25em;
}
body.woocommerce-page .summary {
  text-align: right;
}
body.woocommerce-page .summary h1 {
  display: none;
}
body.woocommerce-page .summary .reset_variations {
  display: block;
}
body.woocommerce-page .stripe-source-errors {
  clear: both;
}

.woocommerce div.product div.images {
  width: 60%;
}
.woocommerce div.product div.summary {
  width: 39%;
}
.woocommerce div.product div.summary .price {
  font-size: 1.5em;
}
.woocommerce div.product div.summary form.cart .variations {
  display: block;
}
.woocommerce div.product div.summary form.cart .variations * {
  display: block;
}
.woocommerce div.product div.summary form.cart .variations .label {
  display: none;
}
.woocommerce div.product div.summary form.cart .variations select {
  display: inline-block;
  margin-right: 0;
}
.woocommerce div.product div.summary form.cart .variations .reset_variations {
  display: none !important;
}
.woocommerce div.product div.summary form.cart .button, .woocommerce div.product div.summary form.cart div.quantity {
  float: none;
  display: inline-block;
}
.woocommerce div.product .product_meta {
  text-align: right;
}
.woocommerce div.product .product_meta .posted_in {
  display: none;
}
.woocommerce .product-introduction p {
  font-size: larger;
}
.woocommerce #tab-description > h2:first-child {
  display: none;
}
.woocommerce #tab-description .add_to_cart_inline {
  text-align: center;
  font-size: large;
}
.woocommerce #tab-description .add_to_cart_inline .button {
  margin-left: 1em;
}
.woocommerce .related.products {
  display: none;
}

* {
  box-sizing: border-box;
}

.clear {
  display: none;
}

body, p, .single .sidebar .categories a, a.more-link, ul {
  font-size: medium;
  line-height: normal;
}

a {
  outline: none;
}

img {
  border: none;
}
img.alignleft {
  margin-right: 20px;
}
img.alignright {
  margin-left: 20px;
}

ul ul, ul ol, ol ol, ol ul {
  font-size: initial;
  padding-left: 0;
}

@media all and (max-width: 500px) {
  .single-post img.alignleft, .single-post img.alignright {
    float: none;
    display: block;
    margin: auto;
  }
}
.container {
  width: auto;
  max-width: 1500px;
}

.sitecontainer {
  padding-left: 40px;
  padding-right: 40px;
}

.page {
  /* gets rid of the white space between elements, so their widths can add up to 50%*/
  font-size: 0;
}
.page > * {
  font-size: medium;
}

.pagetitlewrap {
  float: none;
}

h1.pagetitle, h3.pagetitle {
  display: inline-block;
  float: none;
  line-height: normal;
  font-size: 27px;
  font-size: 2.9vw;
}
@media all and (min-width: 1500px) {
  h1.pagetitle, h3.pagetitle {
    font-size: 43.5px;
  }
}

.content.container {
  /* gets rid of the white space between elements, so their widths can add up to 50%*/
  font-size: 0;
}
.content.container > * {
  font-size: medium;
}

.content-holder {
  display: inline-block;
  vertical-align: top;
  width: 70%;
}
.content-holder .maincontent {
  position: relative;
  float: none;
  display: inline-block;
  width: 100%;
  margin-right: 0;
  border-color: transparent; /* See below*/
}
.content-holder .maincontent:before {
  /* I'm having to do this to create the top border, because of the way that blog items
     are moved around dynamically, and you can't predict which are going to be where.
     Yes, my head is hung in shame
  */
  content: "";
  position: absolute;
  bottom: 100%;
  height: 8px;
  left: 0;
  right: 40px;
  background-color: #333;
}
.content-holder #isonormal {
  width: 100%;
}

.submenu-item {
  margin-left: 1em;
}

.single-post .categories {
  float: left;
  margin-top: 10px;
}
.single-post .bubble {
  margin-top: 12px;
}
.single-post .bubble:after {
  bottom: -6px;
}
.single-post p.name {
  float: right; /* Yes, this float is correct — I actually want this inset on the right hand side */
  margin-left: 1em;
  border-bottom: none;
  text-align: right;
}
.single-post p.name span {
  display: block;
}
.single-post p.name span.updated {
  display: none;
}
.single-post .featuredimage {
  clear: both;
  text-align: center;
}
.single-post .blogcontent {
  clear: both;
}
.single-post a.post-edit-link {
  margin-bottom: 0.5em;
}

.one_col {
  width: 397px;
  width: 50%;
  margin: 0;
  border-color: transparent;
  padding-right: 40px;
  padding-top: 30px;
}
.one_col .article-content {
  border-top: 1px solid #dcdcdc;
  padding-top: 10px;
}
.one_col .article-content .categories a {
  display: inline-block;
}
.one_col .article-content .thumbnailarea {
  background: none;
}
.one_col .article-content .article-title {
  line-height: 0.85;
}
.one_col .article-content .article-title a {
  font-size: 23px;
  color: #333;
}
.one_col:first-child .article-content, .one_col:nth-child(2) .article-content {
  border-top: none;
}

.sidebar-holder {
  float: none;
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 0;
  padding-top: 0;
}
.sidebar-holder .sidebar {
  clear: both;
  width: 100%;
  margin-left: 0;
}
.sidebar-holder .sidebar .weather-tweets #ctf a, .sidebar-holder .sidebar .southwark-cycle-tweets #ctf a {
  color: #333;
}
.sidebar-holder .sidebar .weather-tweets #ctf #ctf-more, .sidebar-holder .sidebar .southwark-cycle-tweets #ctf #ctf-more {
  display: none;
}
.sidebar-holder .sidebar .tribe-events-list-widget ol, .sidebar-holder .sidebar .tribe-events-list-widget li {
  padding-left: 0;
  margin-left: 25px;
}

.more-link {
  text-align: right;
}
.more-link a {
  border-radius: 3px;
  display: inline-block;
  padding: 0.75em;
  background-color: #00a498;
  color: white;
}

.widget h3 {
  font-family: Bitter !important;
  text-transform: none !important;
  font-size: larger;
}

.content-page {
  /* gets rid of the white space between elements, so their widths can add up to 50%*/
  font-size: 0;
}
.content-page > * {
  font-size: medium;
}
.content-page .maincontent {
  clear: both;
  width: 62.66%;
  margin-right: 4%;
}

iframe {
  width: 100%;
}

.tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a, .tribe-events-month #tribe-events-header .tribe-events-sub-nav li {
  display: block;
}

body #tribe-events-content .summary {
  background-color: #00a498 !important;
}

#footer {
  margin-top: 40px;
}

@media all and (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  .title-bar {
    width: 100%;
  }
  .title-bar .pagetitlewrap {
    max-width: 70%;
    padding-right: 40px;
  }
  .title-bar .pagetitlewrap .pagetitle {
    max-width: 90%; /* It looks a bit nicer if the underline doesn't stretch all the way across */
  }
  h1.pagetitle, h3.pagetitle {
    padding-top: 70px;
    padding-bottom: 20px;
  }
  .single-post .maincontent, .single-event .maincontent, .where-can-i-cycle-to .maincontent {
    padding-right: 40px;
  }
  .sidebar-holder {
    position: relative;
  }
  .sidebar-holder .pagetitlewrap {
    position: absolute;
    bottom: 100%;
  }
  .where-can-i-cycle-to .maincontent {
    padding-top: 40px;
  }
  .tribe-events-pg-template {
    padding-top: 45px;
  }
}
/* Page-specific stuff */
.page-id-12543 h4 {
  margin-bottom: 0;
}
.page-id-12543 p {
  margin-top: 0.25em;
}

@media all and (max-width: 767px) {
  .not-mobile {
    display: none;
  }
  .sitecontainer {
    padding-left: 5%;
    padding-right: 5%;
  }
  h1.pagetitle, h3.pagetitle {
    font-size: 5vw;
    margin-top: 0.5em;
  }
  .content-holder {
    display: block;
    width: auto;
  }
  .content-holder h1.pagetitle, .content-holder h3.pagetitle {
    margin-left: 10px;
  }
  .content-holder .maincontent:before {
    right: 0;
  }
  .sidebar-holder {
    display: block;
    width: auto;
  }
}
@media all and (max-width: 767px) and (min-width: 480px) {
  .content-holder #isonormal {
    width: 105.55%; /* This makes the padding-right of the second column sit exactly outside the container */
    margin-left: -2.75%;
  }
  .content-holder .one_col {
    width: 50%;
    padding-right: 2.5%;
    padding-left: 2.5%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .content-holder .one_col {
    width: 50%; /* Just to override an absolute value in the parent theme */
  }
}
@media all and (min-width: 480px) {
  .one_col:nth-child(2) .articleinner {
    border-top: none;
  }
}
@media all and (max-width: 479px) {
  .sitecontainer {
    padding-left: 10px;
    padding-right: 10px;
  }
  h1.pagetitle, h3.pagetitle {
    font-size: 9vw;
  }
  .content-holder .one_col {
    width: auto;
    padding: 0;
  }
}

/*# sourceMappingURL=southwarkcyclists.css.map */