/* Add here all your css styles (customizations) */

/* Have copied here required feincms and other specific styles from old app*/

/*.imageContent {*/
  /*padding-bottom: 2px; }*/
  /*.imageContent.right {*/
    /*float: right;*/
    /*padding-left: 12px; }*/
  /*.imageContent.left {*/
    /*float: left;*/
    /*padding-right: 12px; }*/
  /*.imageContent.block {*/
    /*float: none; }*/
  /*#sidebar .imageContent {*/
    /*padding: 10px; }*/

/*img#logo-header {*/
    /*float: left;*/
    /*height: 75px;*/
    /*margin: 10px;*/
    /*z-index: 11;*/
    /*position: relative;*/
/*}*/


/*
  Add styles to create a 'flex-row' which makes Bootstrap columns all the same height i.e. they are all size to
  the same as the one with the largest height. Use flexible row as per Bryan Willis answer below:
    https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
    https://codepen.io/bootstrapped/pen/RrabNe
*/

/*@media(min-width:768px) {*/
    .flex-row.row {
        display: flex;
        flex-wrap: wrap;
    }

    .flex-row.row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }

    .flex-row.row:after,
    .flex-row.row:before {
        display: flex;
    }

    .flex-row.row > [class*='col-'] > .box {
        display: flex;
        flex: 1;
    }
/*}*/

/* Grow thumbnails to fill columns height */
.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

/* Flex Grow Text Container */
.flex-row .caption p.flex-text {
    flex-grow: 40;
}

/* Flex Grow Text Container for buttons */
.flex-row .caption span.flex-text {
    flex-grow: 40;
}

/* Flex Grow Text Container for buttons */
.flex-row .caption button {
    /*height: 80px;*/
    /*overflow: auto;*/
}

/* Flex Responsive Image */
.flex-row img {
    width: 100%;
    height: auto;
}

/* Grow thumbnails to fill columns height */
.flex-row .thumbnails,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

/*
  end of flex-row styles
*/


/*
  Add styles to create a 'resources-button-*' style which makes the 4 'Resources' buttons display well on all sizes
*/

/* event-overlay XS */
@media(max-width:767px) {
    .resources-button-xs {
    }
    .resources-button-xs a {
    }
    .resources-button-xs button {
        width: 90%;
        margin-top: 0.7em;
    }
}

/* event-overlay - SM */
@media(min-width:768px) and (max-width:991px){
    .resources-button-sm {
    }
    .resources-button-sm a {
        font-size: 0.8em;
    }
    .resources-button-sm button {
        height: 5em;
        width: 100%;
    }
}

/* event-overlay - MD */
@media(min-width:992px) and (max-width:1199px){
    .resources-button-md {
    }
    .resources-button-md a {
    }
    .resources-button-md button {
        height: 5em;
        width: 100%;
    }
}

/* event-overlay - LG */
@media(min-width:1200px){
    .resources-button-lg {
    }
    .resources-button-lg a {
    }
    .resources-button-lg button {
        height: 5em;
        width: 100%;
    }
}

/*
  end of resources-button-* styles
*/




#slideshow {
  clear: both;
  margin: 0;
  padding: 0;
  border-top: 4px solid white; }
  #slideshow ul,
  #slideshow li {
    margin: 0;
    padding: 0;
    list-style: none; }
  #slideshow ul {
    position: relative;
    height: 213px; }
  #slideshow li {
    position: absolute; }

/* Logo in header */
.header-company-logo > img {
  /*padding: 15px 15px 15px 0px;*/
  padding-right: 15px;
}

body {
  font-family: "Source Sans Pro";
  font-size: 18px;
  font-weight: normal;
}

p {
  font-family: "Source Sans Pro";
  font-size: 18px;
  font-weight: normal;
}

h1 {
  font-family: "Source Sans Pro";
  font-size: 36px;
  font-weight: normal;
}

h2 {
  font-family: "Source Sans Pro";
  font-size: 22px;
  font-weight: 900;    /* 900 = ultra bold */
  /* RT menu background colour options */
  /* Citizan 'blue' R91 G145 B192  = #5B91C0 */
  /* Citizan 'light blue' R142 G186 B218 = #8EBADA */
  color: #5B91C0;
}

h3 {
  font-family: "Source Sans Pro";
  font-size: 18px;
  font-weight: 700;   /* 700 = bold */
}

label {
  color: #999;
  font-size: 16px;
}

/* custom Citizan width */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

.btn-primary {
  background-color: #5B91C0;
}

.caption {
  font-size: 16px;
  font-weight: bold;
  padding-top: 8px;
}
.caption li {
  font-weight: normal;
}
.copyright {
  font-size: 14px;
  font-style: italic;
}

.read-more-caption {
  /*background-color: #5B91C0;*/
  /*font-size: 14px;*/
  /*font-style: italic;*/
}

/*
 sidebar section styles
*/
.events-latest p {
    font-size: 16px;
    padding-bottom: 10px;
  	border-bottom: 1px dotted #e4e9f0;
}

.event-archive p {
    font-size: 16px;
    margin: 0px;
}

.event-archive-years p {
    font-size: 16px;
    margin: 0px;
}

.event-locations p {
    font-size: 16px;
    margin: 0px;
}

.blog-latest p {
    font-size: 16px;
    padding-bottom: 10px;
  	border-bottom: 1px dotted #e4e9f0;
}

.blog-archive-years p {
    font-size: 16px;
    margin: 0px;
}

.blog-tags a {
    font-size: 16px;
    margin: 0px;
    color: #555;
}

.archive-years p {
    font-size: 16px;
    margin: 0px;
}

.child-links p {
    font-size: 20px;
    margin: 0px;
    color: #555;
    /*text-transform: uppercase;*/
}

.checkbox {
    /* Temp fix for crispy-forms Bootstrap 3 checkbox alignment issue which is */
    /* fixed in dev branch of crispy forms but not in our 1.4 branch. */
    padding-left: 20px;
}

.radio {
    /* Temp fix for crispy-forms Bootstrap 3 radio button alignment issue which is */
    /* fixed in dev branch of crispy forms but not in our 1.4 branch. */
    padding-left: 20px;
}

#cookie-law {
    background:grey;
    margin:10px auto 0;
    border-radius: 17px;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
}

#cookie-law p {
    padding:10px;
    font-weight:normal;
    text-align:center;
    color:white;
    margin:0;
}

.photo-upload-size-error p {
    color: #a94442;
}