/*
WOO CUSTOM STYLESHEET
---------------------

Instructions:

Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking. */


/* GLOBAL STYLES
----------------
Add styles beneath this line that you want to be applied across your entire site */

ul.bullet-red-star{
list-style-image: url('images/bullet-star.png');
}

/*Code start by Muhammad Tanweer 28-10-2015*/
#chapter-news {
  padding-left: 3%;  /* Nicci - added left & right padding */
  padding-right: 1%;
}
#chapter-news .wpb_text_column h3{
  padding-bottom: 5px;
}
#chapter-news .vc_col-sm-2{
  width: 13%;
  padding: 0px;  /* Nicci - stop date from wrapping */
}
#chapter-news .vc_gitem-post-data-source-post_date {
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}
#chapter-news .vc_gitem-post-data-source-post_date .day {
  background: #7ab5fa none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 50px;
  font-weight: bold;
  padding: 10px 5px;
  font: bold 20px/1.2em "Oswald",arial,sans-serif;
/*  font-size: 1.8vw;  Nicci - larger font size */
  font-size: 2.5vw;
}
#chapter-news .vc_gitem-post-data-source-post_date .month {
  color: #22387d;
  display: block;
  font-weight: bold;
  padding: 0;
  font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 0;
color: #22387D;
font-family: "Lato",sans-serif;
  margin-top: 5px;
}
#chapter-news .vc_gitem-post-data-source-post_title a {
  text-decoration: none;
  color: #278BFF;
}
#chapter-news .vc_gitem-post-data-source-post_title a {
  color: #278BFF;
}
#chapter-news .wpb_single_image{
  display: none;
}
#chapter-news .vc_gitem-post-data-source-post_excerpt div p {
  color: #637c9a;
}
/*Code end by Muhammad Tanweer 28-10-2015*/

#chapter-news{
  max-width: 1200px;
  margin: 0 auto;
}
#chapter-news .vc_grid .vc_clearfix{
  clear: none !important;
}
#chapter-news .vc_grid .vc_grid-item.vc_visible-item{
  height: auto !important;
  max-height: 100% !important;
  display: inline-block !important;
}
#chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini{
  height: auto !important;
  width: 100% !important;
  max-height: 100% !important;
  display: inline-block !important;
}
#chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini .vc_gitem-animated-block {
  height: auto !important;
  width: 100% !important;
  max-height: 100% !important;
  display: inline-block !important;
}
#chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini .vc_gitem-animated-block .vc_gitem-zone.vc-gitem-zone-height-mode-auto{
  height: auto !important;
  width: 100% !important;
  max-height: 100% !important;
  display: inline-block !important;
}
#chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini .vc_gitem-animated-block .vc_gitem-zone.vc-gitem-zone-height-mode-auto::before{
  height: 100% !important;
  width: 100% !important;
  max-height: 100% !important;
  display: none !important;
  padding: 0 !important;
}
#chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini .vc_gitem-animated-block .vc_gitem-zone.vc-gitem-zone-height-mode-auto .vc_gitem-zone-mini{
  height: auto !important;
  display: table !important;
  position: relative;
  width: 100% !important;
  height: 200px !important;

}
#chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini .vc_gitem-animated-block .vc_gitem-zone.vc-gitem-zone-height-mode-auto .vc_gitem-zone-mini .vc_gitem_row.vc_row.vc_gitem-row-position-top{
  height: auto !important;
  display: table !important;
  position: relative !important;
}



/* CUSTOM GRID */
.grid [class*='col-'] {
  float: left;
  min-height: 1px;
  padding-right: 20px; /* column-space */
}

.grid {
  width: 100%;
  max-width: 1140px;
  min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
  margin: 0 auto;
  overflow: hidden;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.grid-pad {
  padding-top: 20px;
  padding-left: 20px; /* grid-space to left */
  padding-right: 0; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}

.push-right {
  float: right;
}

/* Content Columns */

.grid .col-1-1 {
  width: 100%;
}
.grid .col-2-3, .col-8-12 {
  width: 66.66%;
}

.grid .col-1-2, .col-6-12 {
  width: 48%;
}

.grid .col-1-3, .col-4-12 {
  width: 32.33%;
}

.grid .col-1-4, .col-3-12 {
  width: 25%;
}

.grid .col-1-5 {
  width: 20%;
}

.grid .col-1-6, .col-2-12 {
  width: 16.667%;
}

.grid .col-1-7 {
  width: 14.28%;
}

.grid .col-1-8 {
  width: 12.5%;
}

.grid .col-1-9 {
  width: 11.1%;
}

.grid .col-1-10 {
  width: 10%;
}

.grid .col-1-11 {
  width: 9.09%;
}

.grid .col-1-12 {
  width: 8.33%
}

/* Layout Columns */

.grid .col-11-12 {
  width: 91.66%
}

.grid .col-10-12 {
  width: 83.333%;
}

.grid .col-9-12 {
  width: 75%;
}

.grid .col-5-12 {
  width: 41.66%;
}

.grid .col-7-12 {
  width: 58.33%
}
/* MENU */
#main-nav #menu-item-4062 a, #main-nav #menu-item-4062 a:visited,  /* Nicci OOPS */
#main-nav #menu-item-227 a, #main-nav #menu-item-227 a:visited{
  color: #fff !important;
}
.sub-menu a, .sub-menu a:visited{
  color: #ffffff !important;
text-decoration: none !important;
}

/* Profile page */

/* Commented our per Confluence Design-Dev 
body.two-col-right-770 article.post-10 {
  max-width: 1500px !important;
  width: auto;
}

body.two-col-right article.post-10 section.entry {
  max-width: 1010px !important;
  width: 100% !important;
  padding: 0 !important;
}
*/

#member-form {
  width: 100%;
  padding: 0 !important;
}
#member-form .grid input[type="text"]{
  min-width: auto !important;
  width: 100% !important;
  max-width: 98%;
  margin: 0;
}
#member-form .grid select{
  margin-left: 0;
}
#member-form .grid .col-1-1 input[type="text"]{
  min-width: auto !important;
  width: 100% !important;
  max-width: 94.5%;
  margin: 0;
}
#member-form .grid label{
  display: block;
}
#member-form .grid label.label-inline{
  display: inline;
}
#member-form .grid .checkbox {
  padding-top: 5px;
}
#member-form .grid .checkbox input{
  float: left;
}
#member-form .grid .checkbox label{
  margin-top: -4px;
  display: block;
}
.grid .col-1-3, .col-4-12 {
  width: 30.33% !important;
}



@media handheld, only screen and (max-width: 767px) {
  .grid {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px; /* grid-space to left */
    padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
  }

  .grid [class*='col-'] {
    width: auto;
    float: none;
    margin: 10px 0;
    padding-left: 0;
    padding-right: 10px; /* column-space */
  }

  /* Mobile Layout */

  .grid [class*='mobile-col-'] {
    float: left;
    margin: 0 0 10px;
    padding-left: 0;
    padding-right: 10px; /* column-space */
    padding-bottom: 0;
  }

  .grid .mcol-1-1 {
    width: 100%;
  }
  .grid .mcol-2-3, .mcol-8-12 {
    width: 66.66%;
  }

  .grid .mcol-1-2, .mcol-6-12 {
    width: 50%;
  }

  .grid .mcol-1-3, .mcol-4-12 {
    width: 33.33%;
  }

  .grid .mcol-1-4, .mcol-3-12 {
    width: 25%;
  }

  .grid .mcol-1-5 {
    width: 20%;
  }

  .grid .mcol-1-6, .mcol-2-12 {
    width: 16.667%;
  }

  .grid .mcol-1-7 {
    width: 14.28%;
  }

  .grid .mcol-1-8 {
    width: 12.5%;
  }

  .grid .mcol-1-9 {
    width: 11.1%;
  }

  .grid .mcol-1-10 {
    width: 10%;
  }

  .grid .mcol-1-11 {
    width: 9.09%;
  }

  .grid .mcol-1-12 {
    width: 8.33%
  }

  /* Layout Columns */

  .grid .mcol-11-12 {
    width: 91.66%
  }

  .grid .mcol-10-12 {
    width: 83.333%;
  }

  .grid .mcol-9-12 {
    width: 75%;
  }

  .grid .mcol-5-12 {
    width: 41.66%;
  }

  .grid .mcol-7-12 {
    width: 58.33%
  }

  .hide-on-mobile {
    display: none !important;
    width: 0;
    height: 0;
  }
}


/* DESKTOP STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
@media only screen and (min-width: 768px) {
  /* Desktop styles go below this line */



}


/* @media only screen  -- Nicci - aren't these supposed to NOT be "device-width"?
and (min-device-width: 768px)  
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 1) { 
Nicci -- having the -webkit-min-device-pixel-ratio:1 command caused this not to be executed on IE and Mozilla, did execute on Chrome */
@media only screen 
and (min-width: 768px)
and (max-width: 1024px) 
{
  .grid .mcol-1-1 {
    width: 93% !important;
  }
  .grid .mcol-1-1 input[type="text"] {
    max-width: 100% !important;
  }
  #main-nav #menu-item-4062 a, #main-nav #menu-item-4062 a:visited,  /* Nicci OOPS */
  #main-nav #menu-item-227 a, #main-nav #menu-item-227 a:visited{
    color: #fff !important;
  }
  .sub-menu a, .sub-menu a:visited{
    color: #ffffff !important;
  }
/*  #menu-item-227 > ul.sub-menu{  Nicci MENU - don't want full width
    width: 100vw !important;
  }
*/
  .sub-menu{
    margin-left: -15px !important;
    max-width: 100vw; 
    position: absolute !important;
    width: 100vw;
  }
  .sub-menu li{
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
border-bottom: 1px solid #ffffff;
  }
  .sub-menu li a{
    padding: 10px 0 10px 0 !important;
  }
  .sub-menu .menu-item-has-children .sub-menu{
    margin-left: 200px !important;
    max-width: 100vw;
    position: relative !important;
    background: #015dca;
/*    width: 100vw !important;  Nicci MENU - don't want full width */
    //display: table !important;
  }
  .sub-menu .menu-item-has-children .sub-menu li{
    background: #015dca;
/*    border-top: 1px solid #ffffff;  Nicci MENU - already has bottom border */
    border-bottom: 0;
  }
  .sub-menu .menu-item-has-children{
    display: block;
    width: 100%;
/*    height: 70px;  Nicci MENU - reduce height */
    height: 45px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent url('images/btn-arrow.png') no-repeat;
/*    background-position : calc(100% - 20px) 20px;  Nicci MENU - move arrow up slightly */
    background-position : calc(100% - 20px) 10px;
  }
  .sub-menu .menu-item-has-children ul.sub-menu{
	//display: none !important;
  }
  .sub-menu .menu-item-has-children.active ul.sub-menu{
	//display: table !important;
  }
  .sub-menu .menu-item-has-children.active{
    width: 100%;
    height: 100% !important;
    display: table !important;
    background: transparent url('images/btn-arrow-down.png') no-repeat;
/*    background-position : calc(100% - 20px) 20px;  Nicci MENU - move arrow up slightly */
    background-position : calc(100% - 20px) 10px;  
  }

  #navigation ul.nav li#menu-item-4062 ul ul,  /* Nicci OOPS */
  #navigation ul.nav li#menu-item-227 ul ul {
    left: 0;
    position: relative !important;
    margin: 0 !important;
    display: table !important;
    padding: 0px;  /* Nicci - test */
  }

  /* Nicci MENU - increase sub-menu indent on wider screens */
  #navigation ul.sub-menu ul.sub-menu {
    left: 150px !important;
  }
  .sub-menu .menu-item-has-children a{
    text-decoration: none !important;
  }
  .sub-menu .menu-item-has-children ul.sub-menu{
    display: table !important;
    z-index: 1000;
    position: relative; 
    width: 100vw;
    left: -200px;
  }

  .sub-menu .menu-item-has-children > a{
    background: none !important;
    width: 85% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
  }
  .sub-menu .menu-item-has-children.active > a{
    width: 85% !important;
  }

  #top .nav li.parent > a:after, #top .nav li ul li.parent > a:after, #navigation .nav li.parent > a:after, #navigation .nav li ul li.parent > a:after{
    display: none;
  }
  .sub-menu .menu-item-has-children ul.sub-menu li:last-child{
    margin-bottom: -15px !important;
  }
/*  #top .nav li.parent > a:after, #top .nav li ul li.parent > a:after, #navigation .nav li.parent > a:after, #navigation .nav li ul li.parent > a:after{
    display: none;
  }
Nicci - duplicate of 2 above */

/* Nicci -- use 2-column defaults for 768-1024px (vs 1-column below)
  .news-excerpt.vc_col-sm-6:nth-child(odd){
    margin-left: 0;
  }
  #news-tablet-desktop{
    display: table;
  }

  .news-excerpt.vc_col-sm-6{
    width: 100%;
    display: block;
    float: left;
    min-height: 100px;
    padding: 0 3% 0 0; !important;
  }

  #chapter-news .vc_col-sm-2{
  width: 18% !important;
  float: left;
  height: 100%;
  }
  #chapter-news .vc_col-sm-10.vc_gitem-col{
  width: 80%;
  display: table;
  }
  #chapter-news .vc_col-sm-10.vc_gitem-col{
  
  }
  #chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini .vc_gitem-animated-block .vc_gitem-zone.vc-gitem-zone-height-mode-auto .vc_gitem-zone-mini{
  height: auto !important;
  }
  #chapter-news .vc_gitem-post-data-source-post_date .day {
  font-size: 350%;
  padding-top: 18px;
  padding-bottom: 18px;
  }
  #chapter-news .vc_grid-item.vc_col-sm-6{
  width: 100%;
  }
*/
}


@media only screen 
/* and (max-device-width: 736px) {  Nicci -- shouldn't this be 767px and NOT device-width? */
and (max-width: 767px) {

  .grid .mcol-1-1 {
    width: 93% !important;
  }
  .grid .mcol-1-1 input[type="text"] {
    max-width: 100% !important;
  }
  #main-nav #menu-item-4062 a, #main-nav #menu-item-4062 a:visited,  /* Nicci OOPS */
  #main-nav #menu-item-227 a, #main-nav #menu-item-227 a:visited{
    color: #fff !important;
  }
  .sub-menu a, .sub-menu a:visited{
    color: #ffffff !important;
  }
/*  #menu-item-227 > ul.sub-menu{  -- Nicci MENU - Replacing with below
    width: 100vw !important;
left: -193px !important;
  }
*/
  #menu-item-4062 > ul.sub-menu,  /* Nicci OOPS - changed from -75 to -175 for Donate Now removal */
  #menu-item-227 > ul.sub-menu{
    left: -175px !important;
  }

  .sub-menu{
    margin-left: 0px !important;
    max-width: 100vw;
    position: absolute !important;
    width: 100vw;
  }
  .sub-menu li{
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .sub-menu li a{
    padding: 10px 0 10px 0 !important;

  }
  .sub-menu .menu-item-has-children .sub-menu{
    margin-left: 200px !important;
    max-width: 100vw;
    position: relative !important;
/*    width: 100vw !important;  Nicci MENU - don't want full width */
    //display: table !important;
  }
  .sub-menu .menu-item-has-children .sub-menu li{
    background: #015dca;
/*    border-top: 1px solid #ffffff;  Nicci MENU - already has bottom border */
    border-bottom: 0;
margin: 0 !important;
  }
  .sub-menu .menu-item-has-children{
    display: block;
    width: 100%;
/*    height: 70px;  Nicci MENU - reduce height as reduced font size */
    height: 45px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent url('images/btn-arrow.png') no-repeat;
/*    background-position : calc(100% - 20px) 20px;  Nicci MENU - move arrow up slightly */
    background-position : calc(100% - 20px) 10px;
padding: 0 !important;
  }
  .sub-menu .menu-item-has-children ul.sub-menu{
	//display: none !important;
padding: 0 !important;
  }
  .sub-menu .menu-item-has-children.active ul.sub-menu{
	//display: table !important;

  }
  .sub-menu .menu-item-has-children.active{
    width: 100%;
    height: 100% !important;
    display: table !important;
    background: transparent url('images/btn-arrow-down.png') no-repeat;
/*    background-position : calc(100% - 20px) 20px;  Nicci MENU - move arrow up slightly */
    background-position : calc(100% - 20px) 10px;
padding: 0 !important;
  }

  #navigation ul.nav li#menu-item-4062 ul ul,  /* Nicci OOPS */
  #navigation ul.nav li#menu-item-227 ul ul {
    left: 0;
    position: relative !important;
    margin: 0 !important;
    display: table !important;
  }
  .sub-menu .menu-item-has-children a{
    text-decoration: none !important;
  }
  .sub-menu .menu-item-has-children ul.sub-menu{
    display: table !important;
    z-index: 1000;
    position: relative; 
    width: 100vw;
    left: -200px;
  }
/*  .sub-menu .menu-item-has-children.active:after{   Nicci removed as sub-menu indented
    border-bottom: 5px solid #015dca;
width: 100%;
content: "";
display: table;
margin-top: -5px;
  } */
  .sub-menu .menu-item-has-children > a{
    background: none !important;
    width: 85% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
  }
  .sub-menu .menu-item-has-children.active > a{
    width: 85% !important;
  }

#top .nav li.parent > a:after, #top .nav li ul li.parent > a:after, #navigation .nav li.parent > a:after, #navigation .nav li ul li.parent > a:after{
    display: none;
  }
  .sub-menu .menu-item-has-children ul.sub-menu li:last-child{
    margin-bottom: -5px !important;
  }
  ul.header-buttons-inner li a.button{
/*    font-size: 10px !important;  Nicci - this is too small on PCs, created another section below for phones */
    font-size: 14px !important;
  }

  .news-excerpt.vc_col-sm-6:nth-child(odd){ 
    margin-left: 0;
  }

  #news-tablet-desktop{
    display: table;
  }

  .news-excerpt.vc_col-sm-6{
    width: 100%;
    display: block;
    float: left;
/*    min-height: 350px;  -- Nicci - remove to eliminate blank spaces on short posts */
    padding: 0 3% 0 0; !important;
  }

  .news-excerpt .news-date.vc_col-sm-2 {
    width: 100%;
    float: none;
    display: table;
    clear: both;
    padding-top: 0 !important;
  }
  .news-excerpt .news-date h3{
/*    padding: 5px 3px;  Nicci - increase side padding */
    padding: 5px 10px;
    width: auto;
    font-size: 36px;  /* Nicci - want larger font than <1023 */
    display: table;
    float: left;
    margin-right: 5px;
    position: relative;
  }
  .news-excerpt .news-date h4{
    line-height: 50px;
    text-align: left !important;

  }
  .news-excerpt .excerpt-left{
    margin-top: 0
  }
  .news-excerpt .excerpt-left.vc_col-sm-10 {
    width: 100%;
    display: table;

  }
  #chapter-news .vc_col-sm-2{
  width: 20% !important;
  float: left;
  height: 100%;
  }
  #chapter-news .vc_col-sm-10.vc_gitem-col{
  width: 78%;
  display: table;
  }
  #chapter-news .vc_col-sm-10.vc_gitem-col{
  
  }
  #chapter-news .vc_grid .vc_grid-item.vc_visible-item .vc_grid-item-mini .vc_gitem-animated-block .vc_gitem-zone.vc-gitem-zone-height-mode-auto .vc_gitem-zone-mini{
  height: auto !important;
  }
  #chapter-news .vc_gitem-post-data-source-post_date .day {
  font-size: 30px;
  }
  #chapter-news .vc_grid-item.vc_col-sm-6{
  width: 100%;
  }
}



/* @media screen and (device-aspect-ratio: 40/71) {  Nicci MENU - replacing with below
  #menu-item-227 > ul.sub-menu{
    width: 100vw !important;
left: -139px !important;
  }
*/
@media screen and (device-aspect-ratio: 40/71) {
  #menu-item-4062 > ul.sub-menu,  /* Nicci OOPS - changed to -175 (was -75) */
  #menu-item-227 > ul.sub-menu{
    left: -175px !important;
  }
}

/* Nicci - for really small screens */
@media only screen and (max-width: 414px) {
  ul.header-buttons-inner li a.button{
    font-size: 10px !important;
  }