* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'quarklight';
    letter-spacing:0.06em;
    /* color:#2e3440; */
}
/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    margin: 0em;
    background-image: url('bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color:#f2f1f0;
}
/* Headings
 * ====================================================== */
h1, h2, h3 { font-family: 'quarkbold'; }
h2, h3 {
    text-transform:uppercase;
}

.cce-container .block-content > h2,
.cce-container .block-content > h3 {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    border-bottom: dashed 2px #aaaaaa;
}
.cce-container .block-content > h2 {
    width:40%;
    margin-top:30px;
}
.cce-container .block-content.block-column > h2 {
    width:60%;
    margin-top:30px;
}

.cce-container .block-content > h3 {
    font-weight:800;
    font-size:120%;
    width:80%;
}
h4 {
    font-weight:800;
    font-size:120%;
}

/* Content = container class
 * Put all content in here
 * ====================================================== */
.cce-container {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}
.cce-contact {padding-right:50px;}
.cce-banner { margin-bottom: 20px; }
.cce-logo { margin-top: 20px; }

/* Nav
 * ====================================================== */

.cce-nav {
    padding:3px;
    width:100%;
    text-align:right;
    /* No good for Firefox position:absolute; */
    /* No good for Firefox vertical-align: bottom;*/
    /* No good for Firefox top:0;bottom:0;left:0;right:0;*/
}
.cce-nav > p {
    margin-top:125px;
    line-height:90%;
    font-family: 'quarkbold';
    /* No good for Firefox position:absolute; */
    /* No good for Firefox margin:0;bottom:0;right:0;*/
}
.cce-menulink  {
    text-transform: uppercase;
    white-space: nowrap;
}
.button-small {
    text-transform: uppercase;
    font-size:116%;
    background:transparent;
    padding:2px 3px 2px 3px;
}
.button-small:hover,.button-small:active {background:none;}

.slash-small {
    margin:2px -5px 2px -5px;
    padding:0px;
}


/* Indent
 * For instance the content on the home page
 * ====================================================== */
.cce-indent {
    padding: 0.5em 4.5em 0em 4.5em;
}

.pure-input-1-2  {
    width:100%;
    min-width:100%;
    max-width:100%;
}


/* Wall
 * Any child elements will be organised into columns and
 * scaled to 100% the column width
 * ====================================================== */

.cce-wall {
    width: 100% !important;
    -moz-column-count: 3 !important;
    -webkit-column-count: 3 !important;
    column-count: 3 !important;
    -webkit-column-gap:   50px;
    -moz-column-gap:      50px;
    column-gap:           50px;
    padding: 10px;
}
.cce-wall.margin-wide {
    -webkit-column-gap:   75px;
    -moz-column-gap:      75px;
    column-gap:           75px;
    padding-top:30px;
    clear: both;
}
.cce-wall.margin-small {
    -webkit-column-gap:   25px;
    -moz-column-gap:      25px;
    column-gap:           25px;
}

/* Column
 * Need this for the Catch Up Page using 1/3 puregrids to create
 * "columns" that do not wrapped across the entire page.
 * ====================================================== */
.cce-column {
    padding-left:24px;
    padding-right:24px;
}
.cce-column.margin-wide {padding-left:36px;padding-right:36px;}
.cce-column.margin-small {padding-left:12px;padding-right:12px;}

.cce-table {
    margin-bottom:12px;
}

.pure-table td, .pure-table th {
    vertical-align: top;
}

/* Important. The left and right margin for 1 and 3 child in this 3 column layout
 * are either 2*20px or 1*40px. The total margin is always 60px. */
.slide-show-padding {margin-top:40px;}
.links-padding-wide {padding:0 20px 0 20px;}
.links-padding-wide:nth-child(3n-2) {padding:0 40px 0 0;}
.links-padding-wide:nth-child(3n) {padding:0 0 20px 40px;}

/* Brick
 * Any immediate child of the wall or column
 * ====================================================== */
.outer-brick {
  display: block-inline !important;
  /* prevent brick's padding splitting across columns */
  -webkit-column-break-inside: avoid !important;
  break-inside: avoid !important;
  /* !useful padding between bricks to match column-gap   */
  padding-bottom: 50px;
}
.cce-wall.margin-wide .outer-brick {
  padding-bottom: 75px;
}
.cce-wall.margin-small .outer-brick {
  padding-bottom: 25px;
}

.cce-brick {
  /* CSS3: border and padding taken away from width */
  box-sizing: border-box !important;
  overflow: hidden;    /* stops pictures escaping their boundary  */
}


.links-padding-wide .outer-brick {
  padding-bottom: 25px;
}
.links-padding-wide .cce-brick,
.cce-column .cce-brick,
.cce-general .cce-brick,
.cce-wall .cce-brick {
    border: #dddddd solid 1px;
    background-color:rgba(255,255,255,.3);
}



.cce-brick > * {
  padding: 0 10px;
}

.cce-general > *:after,  {
    clear: both;
    content: '';
    display: table;
}

/* Make any images responsive */
.cce-brick > img,
.cce-sticky {  /* option to make any object sticky */
    width: 100%;
    height: auto;
    padding: 10px 0px;
}
/* "Sticky" top for first immediate image in a Brick */
.cce-brick img:first-child,
.cce-sticky {
    padding-top:0px;
}
/* "Sticky" bottom for last immediate image in a Brick */
.cce-brick img:last-child,
.cce-sticky {
    padding-bottom:0px;
}

/* Sticky first immediate anchored image in a Brick */
.cce-brick > a:first-child > img,
.cce-sticky {
    padding-top:0px;
    margin-top:-22px;
}

.cce-brick > a:first-child > img.stick-right,
.cce-brick > a:first-child > img.stick-left,
.cce-sticky.stick-right,
.cce-sticky.stick-left {
    padding-top:0;
    margin-top:0;
}

/* Sticky last immediate anchored image in a Brick */
.cce-brick a:last-child > img,
.cce-sticky {
    padding-bottom:0px;
    margin-bottom:-22px;
    margin-right:-22px;
}

/* stick an image left */
img.stick-left {
    float:left;
    padding: 0;
    margin-right:25px;
}
img.stick-right {
    float:right;
    padding: 0;
    margin-left:25px;
}
img.stick-1-2 {
    width: 50%;
}
img.stick-1-3 {
    width: 33%;
}
img.stick-1-4 {
    width: 25%;
}
img.stick-2-3 {
    width: 66%;
}


.cce-column > h2 {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    width:98%;
    padding-left:0px;
    padding-right:0px;
    border:none;
}

@media (min-width: 10px) and (max-width: 567px) {
    .cce-general{width:100%;min-width:100%;}
    .cce-container { width:98%; }
    .cce-wall {
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
        -webkit-column-gap:   2%;
        -moz-column-gap:      2%;
        column-gap:           2%;
    }
    .outer-brick {
      padding-bottom: 20px;
    }
    .cce-column {padding-left:2px;padding-right:2px;}
    .cce-column.margin-wide {padding-left:2px;padding-right:2px;}
    .cce-column.margin-small {padding-left:2px;padding-right:2px;}
    .button-small {font-size:80%;}
    .cce-indent {padding: 10px 2px 0 2px;}
    .cce-nav > p {margin-top:13px; line-height:80%;}
    .links-padding-wide {padding:0 5px 0 5px;}
    .links-padding-wide:nth-child(3n-2) {padding:0 10px 0 0;}
    .links-padding-wide:nth-child(3n) {padding:0 0 0 10px;}
}

@media (min-width: 568px) and (max-width: 1023px) {
  .cce-container { width:98%; }
  .cce-wall {
      -moz-column-count: 2 !important;
      -webkit-column-count: 2 !important;
      column-count: 2 !important;
      -webkit-column-gap:   20px;
      -moz-column-gap:      20px;
      column-gap:           20px;
  }
  .outer-brick {
    padding-bottom: 20px;
  }
  .cce-column {padding-left:4px;padding-right:4px;}
  .cce-column.margin-wide {padding-left:4px;padding-right:4px;}
  .cce-column.margin-small {padding-left:4px;padding-right:4px;}
  .cce-nav > p {margin-top:20px;}
  .links-padding-wide {padding:0 10px 0 10px;}
  .links-padding-wide:nth-child(3n-2) {padding:0 20px 0 0;}
  .links-padding-wide:nth-child(3n) {padding:0 0 0 20px;}
}

@media (min-width: 568px) and (max-width: 739px) {
  .cce-nav > p {margin-top:5.7vw;}
}

@media (min-width: 740px) and (max-width: 899px) {
  .cce-nav > p {margin-top:10.3vw;}
}

@media (min-width: 900px) and (max-width: 1023px ) {
  .cce-wall {
      column-count: 3 !important;
  }
  .cce-nav > p {margin-top:11.3vw;}
}

/* Slideshow
 * Uses a ul list. Single item in the list deactivates the sliding
 * ====================================================== */
.bxslider {margin:0px;padding:0px;border:0px;}
.bxslider ul {list-style:none;}



/* Footer
 * ====================================================== */
#footer {
    margin-top:30px;
    background-color: #3989ba;
    padding: 15px 0px 15px 0px;
    font-size:90%;
}

#footer .ccefooterleft {
    text-align:right;
}

#footer .fontawesome {
    font-family: 'FontAwesome';
    colour: red;
}

#footer * {
    font-family: 'quarkbold';
}

.cce-alert {
    font-size:120%;
    color: #195379;
    text-transform: uppercase;
}