/* CLEARFIX */

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/* END FONTS */

html, body {
    padding:0;
    margin:0;
    font-family: 'Metronic Pro',sans-serif;
   /* background-color:#10a3a6; */
}

#main section {
    /* old height: 90.3vh; */
    min-height:100vh;
    height:100%;
    position: relative;
    bottom: 2px;
    margin-bottom: -2px;
    overflow: hidden;
}

@media screen and (min-width: 965px) {
    #main section {
        width: 94.6vw;
        margin-left: 5.3vw;
    }
}

.logged_in #main section {
    height:calc(100vh - 9.7vh -32px)!important;
}

#main section .inner {
    position: relative;
    min-height:100vh;
    min-width: 94.6vw;
    width: 100%;
    height: 100%;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-position: bottom right !important;
}

#main section .inner .two-column {
    min-height:100vh;
    height:100%;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    margin:0!important;
}

@media screen and (min-width: 965px) {
    #main section .inner .two-column {
        /*width: calc(94.6vw / 2);*/
        width: calc(50% - 1px); /* We minus 1px to account for sub pixel rounding errors in some browsers (FF) */
        float: left;
    }
}

.ie #main section.id-103 .two-column.right {
   height:102vh!important;
}

/* Override two column layout width to work in IE */

.ie #main section .inner .two-column {
       width: calc(94.5vw / 2)!important;
}

#main section .inner .two-column.left {
    background-position: left center;
}

#main section .inner .two-column.right {
    background-position: right center;
}

header {
    background: #fff;
    min-height: 75px;
    height: 75px;
    width: 96.4vw;
    left: 5.3vw;
    top: 0;
    z-index: 99999!important;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)!important;
    transition: transform .5s;
}

/* Fix header above ipad portrait */
@media screen and (min-width: 965px) {
    header {
        position: fixed;
    }
}

header #inner-header {
    position: relative;
    display: block;
    width: 95%;
    height: 100%;
    box-sizing: border-box;
    padding-left: 2em;
}

header #shelf {
    background: #333132;
    min-width:75px;
    width: 5.4vw;
    height: 100vh;
    position: fixed;
    z-index: 999999;
    top: 0;
}

header #inner-header h1 {
    color: #00989a;
    text-transform: uppercase;
    font-size: 1.22em;
    margin: 0;
    font-weight: 400;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

section .full-width {
    width: 100%;
    height: 100%;
    display: block;
    padding: 10vh;
    box-sizing:border-box;
    overflow:hidden;
}

@media screen and (min-width: 965px) {
    section .full-width {
        position: absolute;
    }
}

.black {
    color: #333132!important;
}

.caps {
    text-transform: uppercase;
}

/* PAGE STYLES */

section#western-health-strategic-plan-2015-2020 h2 {
    font-size:3em;
    margin:0em 0em 0.2em 0em;
    width: 3em;
}

section#western-health-strategic-plan-2015-2020 h4 {
    font-size:1.6em;
    margin:0em 0em 0.2em 0em;
    font-weight:200;
    color:#fff;
}

section#western-health-strategic-plan-2015-2020 .content {
    padding-top: 15em;
    padding-left: 8em;
    box-sizing: border-box;
}

section#understanding-our-community .two-column.content-left.right {
    background-size: 50px 50px;
}

section#understanding-our-community .two-column.content-left.right {
    background-size: 88% 80%!important;
    background-position: 30% center!important;
}

.ie section#understanding-our-community .two-column.content-left.right {
    background-size: 100%!important;
}

section#we-will-do-this-together-by .two-column.content-right.left {
    background-size: 90% 80%;
    background-position: center center;
}


section.id-75 .two-column.content-right.right {
     float:right!important;
}

/* TWO COLUMN STYLES */

#main section .two-column.content-left.left, #main section .two-column.content-right.right, #main section .left-and-right {
    padding: 6vh 4vw;
    box-sizing: border-box;
}

/* INLINE-SVG STYLES */


#shiftnav-main {
    background: #333132!important;
}

.shiftnav-left-edge.shiftnav {
    left:0!important;
}

.shiftnav:after {
    display:none;
}

#shiftnav-main ul {
  text-align:right;
}

.shiftnav ul li {
    width: 100%;
    border-bottom: 1px solid #3f3c3e;
}

#shiftnav-main ul li a {
    color: #fff;
    font-size: 0.95em;
    line-height: 1.2em;
    padding: 23px 25px;
    font-family: 'Glober',sans-serif;
    font-weight: bold;
    font-style: italic;
}

.shiftnav-inner li.toggle {
    border-bottom: 1px solid #3f3c3e;
    position: relative;
    margin: 0;
    padding: 0;
    background: none;
    list-style-type: none;
    z-index: 30;
    display: block;
}

.shiftnav-inner li.toggle a {
     display: block;
     padding: 6px 25px;
     line-height: 300%;
     text-decoration: none;
     position: relative;
     cursor: pointer;
     -webkit-transition: .2s all ease;
     -moz-transition: .2s all ease;
     -ms-transition: .2s all ease;
     -o-transition: .2s all ease;
     transition: .2s all ease;
    text-align: right;
    color: #fff;
    font-family: 'Glober',sans-serif;
    font-weight: bold;
    font-style: italic;
}



/* ADD ITEM NUMBERS TO SPANS */

body {
    counter-reset: navcounter;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#menu-main-menu li :after {
    content: counter(navcounter) '\0000a0\0000a0';
    counter-increment: navcounter;
    position: absolute;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Metronic Pro',sans-serif;
    font-weight: normal;
    font-style: normal;
}

/* Don't count home button, use font awesome for icon */

li#menu-item-108 :after {
    font-family: FontAwesome;
    content: "\f015";
    counter-increment: none;
    font-weight: normal;
    font-style: normal;
    margin-right: 2px;
}

/* Hamburger bars icon for toggle */

.shiftnav-inner li.toggle :after {
    font-family: FontAwesome;
    content: "\f0c9";
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    font-weight: normal;
    font-style: normal;
}


/* after hover styles */

#menu-main-menu li:hover :after, #menu-main-menu li:hover a, #menu-main-menu li.active :after, #menu-main-menu li.active a {
    color: #d4e15b;
    transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    -webkit-transition: color .25s ease-in-out;
    -ms-transition: color .25s ease-in-out;
}

#menu-main-menu li :before {
    content: url('../images/menu-hover.svg');
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Metronic Pro',sans-serif;
    font-weight: normal;
    font-style: normal;
}


#menu-main-menu li:hover :before, #menu-main-menu li.active :before {
    opacity:1;
}

/* CONTENT STYLES */


/* SCALES IMAGES TO THE HEIGHT OF THEIR CONTAINERS, MAY NEED TO ADD SVG SPECIFIC CLASS */

/* NOTE: Height: 100% causing images to skew in IE9 */
/*p.img,
.inline-svg {
    margin: 0;
    width:100%;
    height:100%;
    position:relative;
    display:inline-block;
    overflow:hidden;
}

p.img img {
    max-height:100%;
}*/

/* replacing the above with standard responsive media styles */
img, object, embed, video, svg {
	height: auto !important;
	max-width: 100%;
}

/* fix for IE */
table img {
	width: 100%!important;
}


/* STICKY ELEMENTS */

.sticky {
    position: fixed;
    left: 5.3vw;
    top: calc(9.7vh + 32px);
}


/* ADJUST ELEMENTS IF THE USER IS LOGGED IN */

.logged-in .sticky {
    top: calc(9.7vh + 32px)!important;
}

.logged-in header {
    top: 32px!important;
}

.spacer {
    height: 80px;
}

@media screen and (min-width: 965px) {
    .spacer {
        height: 15vh;
    }
}

.sticky-wrapper {
    /*width: calc(94.6vw / 2)!important;*/
    width: 50%;
}

.sticky-wrapper > div {
    height: calc(100vh)!important;
    /*width: calc(94.6vw / 2)!important;*/
    width: 50%;
}

.is_stuck {
}

.header-logo {
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   -ms-transition: opacity .25s ease-in-out;
}

.header-logo.hidden {
    opacity:0;
}

a.scroll-to-home {
    display: inline-block;
}

section.id-103 .spacer {
    height: 16vh;
}

section.id-22 .right .spacer {
        height: 152vh;
}

/* Add margin to top of strategic aims tables in right column */
/* TODO add classes to each of the below */
#strategic-aim-s .two-column.right > table,
#strategic-aim-2 .two-column.right > table,
#strategic-aim-3 .two-column.right > table,
#strategic-aim-4 .two-column.right > table,
#strategic-aim-5 .two-column.right > table,
.content-top-margin {
    margin-top: 3vh;
}

/* 'WE NEED' SVG: FADE IN EACH HEX SEPARATELY */
svg.inline-svg > g {
  opacity: 0;
}

/* Set height in vh to avoid it being cropped if taller than container */
#svg-we-need {
    height: 90vh!important;
}

#listening-and-responding-to-our-community .right svg {
    height: 60vh!important;
}

/* WANDER UP

section.id-75.wanderUp {
    top: 94.7vh;
    margin-top: -100vh;
}

section.id-75 {
    transition: all 0.8s ease-in-out 0.5s;
    z-index: 0;
    top:0;

}

*/