/*   
Theme Name: Viv Cole Associates
Theme URI: http://lomokev.com
Description: Bespoke theme created for Viv Cole Associates
Author: Kevin Meredith and Lisa Bamford
Author URI: http://www.stoatsandweasels.com/
Version: 1
*/

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* normalize.css END */

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    /* font-size: 1em; */ /* boilder plate default */
	/* font-size:62.5%;
    line-height: 1.4; */
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles start
   ========================================================================== */

/* show message to ie 8 and lower start */

.lt-ie9 .section-container, .lt-ie9 hr{
  display:none !important;
}

.show-to-ie-8-and-lower{
  display: none;
}

.lt-ie9  .show-to-ie-8-and-lower{
  display: block !important;
}

.lt-ie9  .show-to-ie-8-and-lower p{
  width:500px;
  margin-left: 10px;
}

.lt-ie9  .show-to-ie-8-and-lower a{
  color:#00379e !important;
}

/* show message to ie 8 and lower end */

body {
  margin: 0 0 0 0;
  font-size:15px; /*was 62.5% */
  line-height: 200%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color:#252836;
  line-height:auto;
}

hr {
    border-top-color: #fed83f;
}

@media only screen and (min-width:850px){
  hr {
    margin: 40px 0 40px 0;
  }
}

@media only screen and (max-width:849px){
  hr {
    margin: 20px 0 20px 0;
  }
}

/* remove bottom margin from most common elements */
/* spacing between elements will be controlled by top margins */

p, ol, ul, h1, h2, h3, h4, h5, h6, blockquote{
  margin-bottom: 0 !important;
}

/* font declarations start */

#main-content h2, #main-content h3{
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif; 
  font-weight: 800;
}
#main-content h4{
  font-weight: 700;
}

/* font declarations end */

/* test start */

.test{
	background-color:red;
}
/* test end */

/* colours colors start   

#00379e dark blue for box backgrounds and big paragraphs
#252836 main paragraph also most black / used for the background of the background boxes
#00379e blue for bold paragraphs and previous next buttons amongst and other text
#e5ebf5 light blue for box backgrounds 
#fffbeb light yellow for box background
#fed83f dark yellow for horizontal rules and big quote marks

colours colors end */

/* colour schema start */

.transition_color, .widget_rss a, .widget-siblings ul li a{
  transition: color 0.4s;
  -moz-transition: color 0.4s;
  -ms-transition: color 0.4s;
  -o-transition: color 0.4s;
  -webkit-transition: color 0.4s;
}

.transition_background_color, .children a{
  transition: background-color 0.4s;
  -moz-transition: background-color 0.4s;
  -ms-transition: background-color 0.4s;
  -o-transition: background-color 0.4s;
  -webkit-transition: background-color 0.4s;
}

.black_on_yellow{
  background-color: #fed83f;
  color: #252836;
  border: 1px solid #fed83f;
}

.roll_over:hover .black_on_yellow, a.black_on_yellow:hover{
  background-color: #252836;
  color: white;
  border: 1px solid white;
  text-decoration: none;
}

.roll_over.widget_contact:hover  .black_on_yellow{
  background-color: transparent;
}

.blue_on_white{
  background-color: white;
  color: #d9d9d9;
  border: 1px solid #d9d9d9;
}

.white_on_blue{
  background-color: #00379e;
  color: white;
}

/* colour schema end */

/* section containers and inners for centering content start */
.section-container{
    text-align: center;
}

.inner{
    margin: 0 auto;
    /* padding-bottom:80px; */
    /* ie 6 don't get margin auto so the text align has to set back */
    text-align: left;
    background-color: white;
}

/* for large */

@media only screen and (min-width:1180px){ /* large */

    .section-container{
        min-width: 1140px;
    }

    .inner{ /* large */
        width: 1140px; /* DIFFERENT FROM .section-container min width */
    }
}

/* below large */

@media only screen and (max-width:1179px){ /* medium */
    .section-container{ /* medium */
        width: calc (100% - 40px);
        padding-left:20px;
        padding-right:20px;
        /* padding-top:40px;  not need for footer and menu and header */
    }
    .inner{ 
        width: 100%;/* padding will now by  */
    }
}

/* styles for the main content start */

#main-content h2{
  margin-top: 80px;
}

#main-content h4{
  color:#00379e;
}

#main-content h4 + p, #main-content h4 + ul, #main-content h4 + ol{
  /* styling elements after #main-content h4 so they have not space between them */
  margin-top: 0;
}

/* editor styles start */

.blue-box{
    background-color: #e5ebf5;

}

.dark-box{
  background-color:#252836;
  color:white;
}

.dark-box h4{
  color:#fed83f !important;
}

.container-box{
    padding: 30px 20px 40px 20px;
}

.big_quote, .container-box, #main-content p{
    margin-top: 40px;
}

.container-box p, .container-box h4, .container-box ul, .container-box ol{
  margin-top: 0;
}

.bold-blue-paragraph{
  color:#00379e;
  font-size: 22px;
  line-height: 35px;
}

/* home page elements start */

/* three in a row guiding | principles shared start */

.three_in_a_row_links, .guiding_principle{
  display: block;
  position: relative;
}

@media only screen and (min-width:850px){
  .three_in_a_row_links, .guiding_principle{
    float: left;
    width: calc(33.333333333333333% - 10px);
    margin-left: 15px;
  }
  .three_in_a_row_cover{
    padding: 33px 10px 33px 10px;
  }
  .three_in_a_row_title{
    font-size: 20px;
  }
  .guiding_principle  p{
    padding-bottom:40px;
    padding-left:20px;
    padding-right:20px;
  }
  .number span{
    width: 50px;
    height: 40px;
    padding-top:10px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px; /* future proofing */
  }
  .hide_on_desktop{
    display: none;
  }
}

@media only screen and (max-width:849px){
  .three_in_a_row_outer_container{
    padding-right: 0;
    padding-left: 0;
  }
  .three_in_a_row_links{
    background-size: cover;
    background-repeat: no-repeat;
  }
  .three_in_a_row_links{
    margin-top: 10px;
  }
  .three_in_a_row_links:first-child{
    margin-top: 0;
  }
  .three_in_a_row_cover{
    padding: 13px 10px 13px 10px;
  }
  .three_in_a_row_title{
    font-size: 18px;
  }
  .guiding_principle{
    margin-bottom: 30px;
    padding-top: 25px;
    border-top:  2px solid #d9d9d9;
  }
  .guiding_principle:first-child{
    padding-top: 0;
    border-top: none;
  }
  .guiding_principle  p{
    padding-bottom:20px;
    padding-left:0;
    padding-right:0;
  }
  .number_and_title{
    overflow: hidden; 
  }
  .number_and_title_outer{
    position: relative; left: 50%; float: left;
  }
  .number_and_title_inner{
    position: relative; left: -50%; float: left;
  }
  .number, .number_and_title h3{
    float: left;
    display: inline;
  }
  .number span{
    width: 30px;
    height: 30px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; /* future proofing */
  }
  .guiding_principle  h3{
    margin-top: 1px;
    margin-left: 10px;
  }
  .hide_on_mobile{
    display: none;
  }
}

.three_in_a_row_links:first-child, .guiding_principle:first-child{
  margin-left: 0 !important;
}

/* three in a row guiding | principles shared end */

/* three in a row start */

@media only screen and (min-width:850px){
  .three_in_a_row_graphic_container{
    margin: 100px 0 100px 0;
  }
}

@media only screen and (max-width:849px){
  .three_in_a_row_graphic_container{
    margin: 30px 0 30px 0;
  }
}

.three_in_a_row_cover{
  background-color: #002955;
  background: rgba(0, 31, 85, 0.8);
  color: white;
  position: absolute;
  bottom: 0px;
  width: calc(100% - 20px);
  text-align: center;

  overflow: hidden;
  transition: top 0.4s;
  -moz-transition: top 0.4s;
  -ms-transition: top 0.4s;
  -o-transition: top 0.4s;
  -webkit-transition: top 0.4s;
}

.three_in_a_row_title{
  text-transform: uppercase;
  font-weight: 800;
  font-family: 'Raleway', sans-serif;
}

.three_in_a_row_text{
  margin: 20px 20px 20px 20px;
  height: 180px;
  overflow: hidden;
}

.three_in_a_row_text, .three_in_a_row_cover .button_wrapper{
  display: none;
}

/* on roll over end */

@media only screen and (min-width:1180px){ /* large only do the roll over stuff a large size */
  .three_in_a_row_links:hover .three_in_a_row_cover{
     top: 0px;
  }
  .three_in_a_row_links:hover .three_in_a_row_text, .three_in_a_row_links:hover .button_wrapper{
    display: block;
  }
  .three_in_a_row_cover{
    top: 244px; /* so that animation works */
  }
}

/* three in a row end */

/* guiding principles start */

.guiding_principle{

}

@media only screen and (min-width:850px){
  .guiding_priciples_container{
    margin: 50px 0 100px 0;
  }
}

@media only screen and (max-width:849px){
  .guiding_priciples_container{
    margin: 30px 0 0 0;
  }
}

.guiding_principles_tittle{
  margin-top: 50px;
  padding-top: 50px;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  border-top: 1px solid #fed83f;
}

.home .guiding_principles_tittle{
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.number, .guiding_principle .button_wrapper, .guiding_principle  p, .guiding_principle  h3{
  text-align: center;
}

.guiding_principle  h3{
  text-transform: uppercase;
}

.guiding_principle .button_wrapper{
  padding-bottom: 5px;
}

.number span{
  background-color: #fed83f;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.guiding_principle:hover{
  text-decoration: none; 
}

.guiding_principle:hover .number span{
  background-color: #00379e;
  color: white;
}
.guiding_principle:hover h3{
  color: #00379e;
}
.guiding_principle:hover .blue_on_white{
  background-color: #00379e;
  color: white;
}
/* guiding principles end */

/* two in a row (case stuides) start */

@media only screen and (min-width:850px){
  .side_by_side_container{
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width:849px){
  .side_by_side_container{
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.side_by_side{
  display: block;
  background-repeat: no-repeat;
}

.text_container{
    float:right;
    text-align: center;
    background-color: #252836;
    color: white;
}

.text_container p{
  padding-right: 20px; 
  padding-left: 20px;
}

.iamge_container{
  float: left;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; 
}

@media only screen and (min-width:720px){ 
  .side_by_side{
    display: block;
    float: left;
    width:calc(50% - 10px);
    background-repeat: no-repeat;
  }
  .side_by_side:first-child{
    margin-right: 20px;
  }
  .text_container{
    width: 330px;
    height: 230px;
  }
  .text_container p{
    height:150px;
  }
  .iamge_container{
    width: calc(100% - 330px);
  }
}

@media only screen and (max-width:719px){
  .side_by_side:first-child{
    margin-bottom: 20px;
  } 

}

@media only screen and (min-width:450px) and (max-width:719px){
  .text_container{
    width:330px;
    height: 230px;
  }
  .text_container p{
    height:150px;
    padding-bottom: 20px;
  }
  .iamge_container{
    width: calc(100% - 330px);
  }
} 

@media only screen and (max-width:449px){
  .text_container{
      width: calc(100% - 80px);
      padding-bottom: 20px;
  }
  .text_container p{
    margin-bottom: 20px !important;
  }
  .text_container .simple_button{
  }
  .iamge_container{
    width: 80px;
  }
}

/* two in a row (case stuides) */

/* home page elements end */


/* big quote start */

.big_quote{
  position: relative;
  background-color:#fffbeb;
}

.big_quote:before, .big_quote:after{
  display: block;
  content: '';
  position: absolute;
}

.big_quote p:first-child{
  margin-top: 0 !important;
}

.big_quote p:last-child{
  margin-top: 20px !important;
}

.big_quote p{
  font-style: italic;
}

.big_quote p:last-child{
  font-style: inherit !important; /* so that last one is not italic */
  font-weight: 700; /* bold */
}


@media only screen and (min-width:600px){ /* everything above 900w */
  .big_quote{
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .big_quote p{
    width: calc(100% - 180px);
    margin-left: 90px;
  }
  .big_quote:before, .big_quote:after{
    width:52px;
    height:40px;
  }
  .big_quote:before{
    top:20px;
    left:20px;
    background-position: -348px -41px;
  }
  .big_quote:after{
    bottom:30px;
    right:20px;
    background-position: -348px 0px;
  }
}

@media only screen and (max-width:599px){ /* everything below 900 */
  .big_quote{
    padding: 40px 20px 40px 20px;
  }
  .big_quote p{
    
  }
  .big_quote p:first-child:before{
    content: '“';
  }
  .big_quote p:nth-last-child(2):after{
    content: '“';
  }
}

/* big quote end */




/* editor styles end */

#main-content ul{
    list-style-type:none;
    /* margin-left: 14px; */
    padding-left: 0;
    margin-top: 0;
    /* margin-bottom: 20px; */ 
}

#main-content li{
    /*margin-bottom: 10px;  same as the line height 14px at 150% is 21px */
    background-image:url(graphics/grey-bullet.svg);
    background-repeat: no-repeat;
    background-position: 0 15px;
    padding-left: 40px;
}

.alignleft.size-thumbnail{
  border: 1px solid #00379e;
  padding: 10px; /*  top and bottom padding will have to set with jquery */
}

/* styles for the main content end */

/* section containers and inners for centering content start */

@media only screen and (min-width:900px){ /* large */
    #main-content{
      float:left;
      width: calc(100% - 380px); /* 380 width of side + the 70px space betweeen the side bar and main content */
    }
    #sidebar{
      float:right;
      width:310px;
    }
}

@media only screen and (max-width:899px){ /* smaller */
    /* .widget_image, .widget-siblings, .widget_otherpage, .widget_rss, hr{ */
    .widget:not(.widget_contact), #sidebar hr{
      display: none !important;
    }
    #sidebar{
      padding-top: 0 !important;
    }
    #main-content h2{
      margin-top: 50px !important;
    }
    .widget_contact{
      margin-bottom: 0 !important;
    }
}

/* default link styles start */

a:link, a:visited {
	color:inherit;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active{
	
}

/* default link styles end */

/* header stuff start */


header{
    /* padding-top: 20px; */
    position: relative;
}


header h1{
    margin:0 0 0 0 !important;
    /* over rides style in normalize pushed the page down by 13px */
    padding-bottom: 0;
    width: 340px;
    height: 30px;
    background-position: 0px 0px;
    float: left;
}

/* ---------- 780 and 779 value will have to change if more items are added to the menu --------- */

@media only screen and (min-width:850px){ /* up to large */
    header h1{
      width: 340px;
      height: 30px;
      position: relative;
      top:40px;
    }
    #header-container{
      height:100px;
    }
}

@media only screen and (max-width:849px){ /* width of an iphone 6 */
    header h1{
        background-position: -70px -80px;
        width:220px;
        height:20px;
        margin: 25px 0 0 20px !important;
    }
    header{
        background-color: #ff6d37
    }
    nav{
        /* background-color: white; */
    }
}

/* header stuff end */

/* banner start */

.blue-banner{
  background-color: #070d1d;
  font-family: 'Raleway', sans-serif;  
}

.blue-banner .inner{
  color:white;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media only screen and (min-width:940px){ /* biger than 940 */
  .home .blue-banner .inner{
    height:800px; /* only make the home banner tall on large screens on smaller ones the 3 sentences and icons disappear */
  }
}

@media only screen and (max-width:939px) and (min-width:50px){ /* medium */
  .three_sentences{
    display: none;
  }
}

.blue-banner .text-content{
  position:relative;
}

.blue-banner .inner h3{
  font-size: 37px;
  line-height: 50px;
  font-weight: 700;
  margin-top: 0;
  position: absolute;
}

.blue-banner .inner p{
  font-size: 21px;
  font-weight: 400;
  position: absolute;
}

.three_sentences{
  position: absolute;
  top: 590px;
}

.sentence{
  line-height: 130%;
}

.three_sentences > div{
  float: left;
  margin-right: 50px;
  width: 250px;
}

.header_home_icon{
  width: 47px;
  height: 40px;
  margin-bottom: 30px;
}

.blue-banner .hi-lighted{
  color: #fed83f;
}

@media only screen and (min-width:1440px){ /* large */

    .blue-banner{
        min-width: 100%;
    }

    .blue-banner .inner{ /* large */
        width: 1440px; 
    }

}

/* below large */

@media only screen and (max-width:1439px){ /* medium */
    .blue-banner{
        min-width: 100%;
        padding-left:0;
        padding-right:0;
    }
    .blue-banner .inner{ 
        min-width: 100%;
    }
}

@media only screen and (min-width:811px){ /* big */
  .blue-banner .inner{
    height:490px;
  }
  .blue-banner .inner p{
    width: 760px;
    top: 300px;
  }
  .blue-banner .inner h3{
    top: 160px;
  }
}

@media only screen and (min-width:610px) and (max-width:810px){ /* small */
  .blue-banner .inner{
    height:390px;
  }
  .blue-banner .inner p{
    width: 100%;
    top: 180px;
  }
  .blue-banner .inner h3{
    top: 70px;
  }
}

@media only screen and (max-width:610px){ /* small */
  .blue-banner .inner{
    height:200px; /*  */
  }
  .blue-banner .inner p{
    display: none;
  }
  .blue-banner .inner h3{
    top: 60px;
    font-size: 28px;
    line-height: 32px;
  }
}


@media only screen and (min-width:1180px){ /* large */
  .blue-banner .text-content{
    width:1140px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* below large */

@media only screen and (max-width:1179px){ /* medium */
  .blue-banner .text-content{
    width:calc(100% - 40px);
    margin-right: auto;
    margin-left: auto;
  }
}

/* yellow strip start */

.yellow-strip{
  background-color: #fffbeb;
  color: #252836;
  border-bottom:  1px solid #fed83f;
}

.yellow-strip .inner{
  background-color: transparent;
}

.contact_call_to_action_title, .contact_call_to_action_text{

}

.contact_call_to_action_title{
  /* margin-right: 115px; */
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif; 
  font-weight: 800;
  color: #00379e;
  font-size: 20px;
}

@media only screen and (min-width:790px){

  .yellow-strip{
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .yellow-strip .header_contact_button_wrapper{
    float:right;
  }

  .contact_call_to_action_title, .contact_call_to_action_text{
    float:left;
  }

  .contact_call_to_action_title{
    width: 270px;
  }

  .contact_call_to_action_text{
    width: calc(100% - 520px);
    margin-left: 40px;
    text-align: center;
  }

}

@media only screen and (max-width:789px){

  .yellow-strip{
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .yellow-strip .header_contact_button_wrapper{
    text-align: center;
    margin-top: 20px;
  }
}

/* yellow strip end */

/* banner end */

/* footer start */

footer{
  margin-top: 80px;
  background-color: #252836;
}

@media only screen and (min-width:850px){
  footer {
    margin-top: 80px;
  }
}

@media only screen and (max-width:849px){
  footer {
    margin-top: 30px;
  }
}

footer .inner{
	color:white;
  background-color: transparent;
  font-size: 14px;
}

#social_media_icons{
  float:right;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0; /* removed default padding from the list */
}

#social_media_icons li{
  display: inline-block;
  float: right;
}

.social_icon{
  display: block;
  height: 15px;
  margin-left: 25px;
  margin-top: 8px;
} 

.twitter{         width: 19px;      
                  background-position:-15px -30px; }
.twitter:hover{   background-position:-15px -45px; }
.rss{             width: 15px;
                  background-position:0px -30px; }
.rss:hover{       background-position:0px -45px; }
.linkedin{        width: 17px;
                  background-position:-35px -30px; }
.linkedin:hover{  background-position:-35px -45px; }

#footer_info, #mini_menu{
  float:left;
}

#mini_menu a:hover{
  text-decoration: none;
  color: #fed83f;
}

#mini_menu ul{
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

#mini_menu li:first-child{
  margin-left: 0;
}

.footer_outer{
  position: relative; left: 50%; float: left;
}
.footer_inner{
  position: relative; left: -50%; float: left;
}

@media only screen and (min-width:1000px){
  footer .inner{
    padding-top:80px;
    padding-bottom:80px;
  }
  #mini_menu{
    width: calc(100% - 560px);
  }

  #mini_menu li{
    display: inline-block;
    margin-left: 10px;
  }
  #footer_info, #social_media_icons{
    width: 280px;
  }
}

@media only screen and (max-width:999px){
  footer{
    position: relative;
  }
  footer .inner{
    padding-top:12px;
    padding-bottom:12px;
  }
}

@media only screen and (max-width:999px) and (min-width: 400px){
  #footer_info{
    position: absolute;
    bottom:12px;
    right:20px;
  }
}

@media only screen and (max-width:399px){
  #footer_info{
    position: absolute;
    bottom:12px;
    left:20px;
  }
  #mini_menu{
    margin-bottom: 50px;
  }
}

/* footer end */

/* page quote is showin the tinyMCE drop down and also must be in the editor-style.css or the srtyle wont show in the tinyMCE */
.page_quote{
	color:#32237b;
	text-align:center;
	font-weight:bold;
	font-style:italic;
}

/* ==========================================================================
   Author's custom styles end
   ========================================================================== */


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* add this class to elements that you want there text content hidden add by me */

.hide_text{
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  /* for elements were the background is an image and the text needs to hidden */
}

/* elements with background image SVG */

header h1, .social_icon, .big_quote:after, .big_quote:before, .header_home_icon, #mobile-show-hide-menu{
  background-image: url(graphics/sprite-map-vca.png);
  background-image:
    linear-gradient(transparent, transparent),
    url(graphics/sprite-map-vca.svg);
     background-size: 400px 200px;
}

/* common button start */

.simple_button{
    text-transform: uppercase;
    padding-right: 29px; 
    padding-left: 29px;
    font-family: 'Raleway', sans-serif; 
    font-weight: 800;
}

@media only screen and (min-width:850px){
  .simple_button{
      padding-top: 15px;
      padding-bottom: 15px;
  }
}

@media only screen and (max-width:849px){
  .simple_button{
      padding-top: 10px;
      padding-bottom: 10px;
  }
}

.button_wrapper{
  margin-top: 1px;
  margin-bottom: 1px;
}

/* common button end */

/* sidebar start */

#sidebar{
  padding-top: 70px;
}

.widget{

}

.widget ul, .widget ol{
  list-style: none;
  padding-left: 0px;
}

#sidebar hr:last-child{ /* hr are added with query using insertAfter() so one to many is added this just hides the last one */
    display:none;
}

.widget{
    margin: 40px 0 40px 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 1px; /* space at bottom of widget to give space for button */
    display: block;
}

.widget:first-child{
  margin-top: 0;
}

.widget:link, .widget:visited{
  color:white;
}

.widget:hover{
  text-decoration: none;
}

#sidebar h3{
    font-size: 14px;
    text-transform: uppercase;
    color: #00afab;
    font-weight: 400;
    padding-bottom: 50px;
}

/* comment to all widgets start */

.widget p, .widget li{ /* same for all widigts */
  line-height: 20px;
}

.widget p{
  text-align: center;
  padding-bottom: 45px; /* so that button underneath is not over lapping it */
}

.widget h2{ /* same for all widget headers */
  text-align: center;
  padding-top: 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

/* comment to all widgets end */

/*  sibling menu start */

.widget-siblings, .widget_image{
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.widget-siblings ul{
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif; 
    font-weight: 800;
}

.widget-siblings ul li a{
    background-color: #00379e;
    color:white;
    display: block;
    margin-bottom: 10px;
    padding: 9px 0 10px 12px; /* padding to make the box 30px height when type is takeon into account */
}

.widget-siblings ul li a:hover, .widget-siblings .current_page_item a{
    text-decoration: none;
    color: #fed83f;
}

/* sibling menu end */

/* rss feed start */

.widget_rss{
  background-color: #252836;
  color:white;
  padding-bottom: 1px;
}

.widget_rss li{
  border-top: 1px solid white;
  padding-top: 20px;
  margin-bottom: 20px;
}

.widget_rss li:first-child{
  border-top: none;
  padding-top: 0;
}

.rss-widget-icon{
  display: none;
}

.widget_rss a:hover{
  text-decoration: none;
  color: #fed83f;
}

/* rss feed end */

/* contact start */

.widget_contact{
  background-color: #00379e;
  color: white;
}

/* contact end */

/* other page start */

.widget_otherpage{
  background-color: #252836;
}

.widget_otherpage img{
  margin-left: -20px;
}

/* other page end */

/* sidebar end */

/* image styles for embedded images start */

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
  max-width: 100%; /* When images are too wide for containing element, force them to fit. */
  height: auto; /* Override height to match resized width for correct aspect ratio. */
}

@media only screen and (min-width:600px){ /* large */
  .alignleft,
  img.alignleft {
    display: inline;
    float: left;
    margin-right: 24px;
    margin-top: 4px;
  }
  .alignright,
  img.alignright {
    display: inline;
    float: right;
    margin-left: 24px;
    margin-top: 4px;
  }
  .aligncenter,
  img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width:599px){ /* small */
  .alignleft,
  img.alignleft,
  .alignright,
  img.alignright,
  .aligncenter,
  img.aligncenter  {
    display: block;
  }
}

img.alignleft,
img.alignright,
img.aligncenter {
  margin-bottom: 12px;
}
  
.wp-caption {
  /* background: #f1f1f1; */
  line-height: 18px;
  margin-bottom: 20px;
  max-width: 725px !important; /* prevent too-wide images from breaking layout / max with of the layout */
  padding: 0;
  text-align: center;
}
.wp-caption img {
  margin: 5px 5px 0;
  max-width: 622px; /* caption width - 10px */
}
.wp-caption p.wp-caption-text {
  color: black;
  font-size: 15px;
  margin: 5px;
}

/* image stayels styles for embedded images end */

/* link styles for inside the articles start / sometimes pages will not use the Article element so there container will have to added here to */

article a:link, article a:visited{
  color: #00379e;
}

article a:hover, article a:active{
  color: #00379e;
}

/* link styles for inside the articles end */

/* back and next buttons start */

.previous-next-page{
  margin-top: 40px;
}

.previous, .next{
  text-transform: uppercase;
  color: #00379e;
}

.previous-next-page a:hover{
  text-decoration: none;
}

.previous{
  float:left;
}

.next{
  float:right;
}

/* back and next buttons end */

/* different styles for different break points */

nav{
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

@media only screen and (min-width:850px){ /* large and medium for menu */
    /* menu link styles start */

    /* menu css from http://acroweb.co.uk/adding-css-drop-down-menus-to-wordpress-3-0-theme/ */

    #nav-container{ /* so that that black background color fills the background */
        height: 68px;
    }

    nav {
        background-color: white;
        display: block;
        float: right; /* so the menu is on the right */
        /* margin: 0 auto; */
        width: auto;
        height: 68px; /* extra 3 temp for border bottom */
        font-size: 14px;
        text-transform: uppercase;

        position: relative;

        top:20px;

        /* margin-top: 26px; */
 
       /* margin-right: 30px;  to make the space on the right 40px when combined wit the padding of the last button */
    }

    #mobile-show-hide-menu{
        display:none;
    }

    nav ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
     
    nav li{
        float: left;
        position: relative;
    }
     
    nav ul ul {
        display: none;
        position: absolute;
        top: 48px; /* this is were the sub menu will be displayed height of menu */
        left: 0;
        float: left;
        width: 270px; /* min width of dropdown items */
        z-index: 99999;
    }

    nav > ul > li > span > a { /* top level menu items */
        padding-bottom: 4px;
        border-bottom: 2px solid white; /* black so it's hidden -  menu item underline is white to start with blending into the background; */

        transition: border-bottom-color 0.8s;
        -moz-transition: border-bottom-color 0.8s;
        -ms-transition: border-bottom-color 0.8s;
        -o-transition: border-bottom-color 0.8s;
        -webkit-transition: border-bottom-color 0.8s;

        color: #252836 !important; /* near black colour */
    }

    .page_item_has_children > span > a { /* top level item with children ADD TO BARE BONES */

    }

   nav > ul > li > span, nav > ul > li > ul a  {
        /*color: #aaa;  top level nav normal color */
        display: block;
        text-decoration: none;
    }

    nav > ul > li > ul a  { /* child item */
        padding: 0 10px;
    }

    nav > ul > li > span{ /* top level item */
        padding: 0 7px;
    }

    nav > ul > li:last-child > span{
      padding-right: 0; /* so that last item is toching the edge of the container */
    }

    nav > ul > li > span{ /* top level */
        line-height: 65px;
    }

    nav > ul > li > ul a  { /* second level items */
        line-height: 38px;
    }

    nav ul li:hover > ul {
        display: block; /* what makes the submenu appear */
    }

    nav li > a{
        color: #252836 !important;
    }

    nav li:hover > span > a,
    nav > ul > li.current_page_item > span > a,
    nav > ul > li.current_page_parent > span > a,
    nav > ul > li.current_page_ancestor > span > a { /* top level rollover */
        text-decoration:none;
        border-bottom-color: #00379e; /* menu item underline  */
    }

    .children a {
        color: #252836; /* sub menu color */
        background: white !important;
    }

    nav > ul > li > ul > li.current_page_item > span > a,
    nav ul ul :hover > a { /* color of the sub menu rollover and active item */
        color: #252836 !important;
        background: #e5ebf5 !important;
        /* background: pink !important; back ground stays the same color */
    }

    nav ul ul a { /* sub menu items  */
        line-height: 120% !important;
        padding: 10px 10px 10px 10px !important;
        display: block;
        width: 239px;
        height: auto;
    }

    /* menu link styles end */   
}

@media only screen and (max-width:849px){ /* small */

    /* .section-container .inner mot styled for small version */ 

    header{
        margin-bottom:0px; /* height of menu */
    }

    #header-container{
      padding-left:0;
      padding-right:0;
    }

    /* menu start */

    /* padding purple margin yellow - Fire bug colors */

    nav {
        /* border-bottom:1px solid black; */
        font-size: 18px;
        line-height: 22px;
        text-transform:uppercase;
    }

    nav > ul{
        padding-bottom:0 !important;
        margin-bottom:0 !important;
        margin-top:0 !important;
    }

    .children{
        padding:0 0 0 0;
        margin:0 0 0 0;
    }

    nav ul{
        padding: 0 0 0 0;
        list-style: none;
    }

    nav li{
        display:none;
        border-top:1px solid #fed83f;
    }

    nav ul ul {
    }

    nav a{
        color: #00379e !important;
    }

    nav li > span > a{
        display:block; /* now it's set to block it takes up the entiere width of it's container so enitire with is the button was inline-block */
        width:calc (100% - 20px);
        padding:10px 0 10px 20px;
    }

    nav li li > span > a{
        width:calc (100% - 30px);
        padding-left:30px;
    }

    nav a:hover{
        text-decoration:none;
    }

    nav li:hover > a{
        /* top level rollover */
        /* color:#03ACB9; */
    }

    .children a { /* submenu color */
    }

    nav ul ul :hover > a {
    }

    nav ul ul a {
    }

    nav li.current_page_parent > a,
    nav li.current_page_ancestor > a,
    nav li.current_page_item > a
    {
        color:white;
    }


    nav li > a{
    }

    #mobile-show-hide-menu{
        display:block;
        width: 60px;
        height: 60px;
        background-position: 0px -70px;
        float:right;
        cursor: pointer;
    }

    .mobile_clearfix:before,
    .mobile_clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .mobile_clearfix:after {
        clear: both;
    }

    .mobile_clearfix {
        *zoom: 1;
    }

    /* menu end */
} /* end of small media query */


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    nav{
      display:none;
    }
}