@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');

/*
 custom colours 
*/
:root {
	--cassiopeia-color-primary: #242F40; /*  changed  */
    --cassiopeia-color-link: #00668F;/*  changed  */
    --cassiopeia-color-hover: #003950;/*  changed  */
    --body-font-size: calc(1em + 0.1vw);
    --card-bg: hsla(0, 0%, 100%, .7);
    --bluegray: #b2bfcd;
    --lightbluegray: #f6f9fc;
    --toolbar-bg: #fff;
    --success-border: var(--success);
    --info-border: var(--info);
    --warning-border: var(--warning);
    --danger-border: var(--danger);
    --border: #ced4da;
    --white: #fff;
    --white-offset: #fefefe;
    --focus: #39f;
    --focus-shadow: 0 0 0 0.2rem #eaeaea;
    --toggle-color: #fff;
    --template-sidebar-bg: var(--template-bg-dark-80);
    --template-sidebar-font-color: #fff;
    --template-sidebar-link-color: #fff;
    --template-bg-light: #f0f4fb;
    --template-text-light: #fff;
    --template-special-color: #132f53;
    --template-link-color: #2a69b8;
    --template-link-hover-color: #173a65;
    --template-contrast: #2a69b8;
    --template-bg-dark: hsl(var(--hue), 40%, 20%);
    --template-bg-dark-3: hsl(var(--hue), 40%, 97%);
    --template-bg-dark-5: hsl(var(--hue), 40%, 95%);
    --template-bg-dark-7: hsl(var(--hue), 40%, 93%);
    --template-bg-dark-10: hsl(var(--hue), 40%, 90%);
    --template-bg-dark-15: hsl(var(--hue), 40%, 85%);
    --template-bg-dark-20: hsl(var(--hue), 40%, 80%);
    --template-bg-dark-30: hsl(var(--hue), 40%, 70%);
    --template-bg-dark-40: hsl(var(--hue), 40%, 60%);
    --template-bg-dark-50: hsl(var(--hue), 40%, 50%);
    --template-bg-dark-60: hsl(var(--hue), 40%, 40%);
    --template-bg-dark-65: hsl(var(--hue), 40%, 35%);
    --template-bg-dark-70: hsl(var(--hue), 40%, 30%);
    --template-bg-dark-75: hsl(var(--hue), 40%, 25%);
    --template-bg-dark-80: hsl(var(--hue), 40%, 20%);
    --template-bg-dark-90: hsl(var(--hue), 40%, 10%);
    --gray-100: #f9fafb;
    --gray-200: #eaedf0;
    --gray-300: #dfe3e7;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6d757e;
    --gray-700: #484f56;
    --gray-800: #353b41;
    --gray-900: #22262a;
    --primary: #010156;
    --secondary: #6d757e;
    --success: #448344;
    --info: #30638d;
    --warning: #efa00c;/*  changed  */
    --danger: #d71808;/*  changed  */
    --light: #f9fafb;
    --dark: #353b41;
    --primary-rgb: 1, 1, 86;
    --secondary-rgb: 109, 117, 126;
    --success-rgb: 68, 131, 68;
    --info-rgb: 48, 99, 141;
    --warning-rgb: 239, 160, 12; /*  changed  */
    --danger-rgb: 215, 24, 8; /*  changed  */
    --light-rgb: 249, 250, 251;
    --dark-rgb: 53, 59, 65;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 34, 38, 42;
    --body-bg-rgb: 255, 255, 255;
    --sjblue: #0096D6; /*  new  */
    --sjwhite: #fbfbfb99; /*  new  */
 
}

/*
 custom fonts and heading styles
*/

body.wrapper-fluid .site-grid {
    grid-gap: 0 .5em;
    grid-template-columns:[full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end]
}
body.wrapper-fluid .grid-child {
    max-width:1200px;
}

body.wrapper-fluid footer > .grid-child, body.wrapper-fluid header > .grid-child {
    padding-left: 2em;
    padding-right:2em
}

#jevents_body p {
	font-size: 14px;
}
p {
  	Font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
  	font-size: 1em;
  	Line-height: 1.8em;
    margin-bottom: 1.3333333em;
}

h1, h2, h3, h4, h5 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
    margin-top: 4ex;
    margin-bottom: 0.5ex;
}

h2 {display: block;
  margin-block-start: 0.2em;
  margin-block-end: 0.2em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
 }

h1 {
    margin-top: 1ex;
	color: var(--sjblue);
}

.page-header h1 {
  	font-size:calc(1.375rem + 3.5vw);
}

@media (min-width: 1200px) {
.page-header  h1 {
        font-size:4rem
    }
}

.h3, h3 {
    font-size:calc(1rem + 0.4vw);
	text-transform: uppercase;
	letter-spacing: 4px;
	color: var(--sjblue);
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: 1.5rem;
    }
}

.h5, h5 {
	text-transform: uppercase;
	font-size:calc(0.7rem + 0.025vw);

}

@media (min-width: 1200px) {
    .h5, h5 {
        font-size:.75rem
    }
}
/*
 custom responsive Iframes for video wrapper
*/

.videoWrapper {
	overflow: hidden;
	position: relative;
  	width: 100%;
}
.videoWrapper::after {
	padding-top: 56.25%;
	display: block;
  	content: '';
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_50 {
	width: 50%;
	margin-left: auto;
    margin-right: auto;
}

@media (max-width: 650px) {
	.video_50 {
		width: 100%;
	}
}

/*
 custom header
*/

.header {
	display: flex;
	align-items: flex-start;
}




/*
 if too narrow relative to the logo then no longer flex

*/
@media (max-width: 287px) {
	.header {
	display: block;
	padding-bottom: 0.5em;     
  }
    }

.container-header {

    background-color: var(--sjwhite);  /*   changed from default and removed backgound image that was a gradient */
    background-image: none;
    box-shadow: inset 0 5px 5px rgba(0, 0, 0, .03);
    position: relative;
    z-index:10;

}

@media (max-width: 991.98px) {
    .container-header {
        position:relative !important
    }
}
 /*   display:none   commented out as stopping dropdown */
.container-header .grid-child {
    padding: 0em;
}
/*
.container-header nav {
    margin-top: 0em;
    padding-top: 0em;
    padding-right: 1em;
}*/
nav.navbar.navbar-expand-lg {
    place-content: flex-end;
}

.container-header .site-description {
    color: #fff;
    font-size: 1rem;
    white-space:normal
}

.container-header .navbar-brand {
    -webkit-margin-end: auto;
    color: #fff;
    display: inline-block;
    font-size: 2rem;
    margin-inline-end: auto;
    position:relative;
    width: 100px;
	margin-left:0.3em;
 
}
.front-page .container-header .navbar-brand {
    width: 300px;
    max-width:50vw;
}
.container-header .navbar-brand a {
    color:#fff 
}

.container-header .navbar-brand:focus, .container-header .navbar-brand:hover {
    color:#f0f0f0
}

.container-header .container-nav {
    flex-wrap: wrap;
	justify-content: flex-end;  /*       justify-content: space-between; changed to justify-content: flex-end; */ 
    padding:0em;
    padding-left:.2em;
    padding-right:0em;
}

@media (max-width: 767.98px) {
    .container-header .container-nav .container-search, .container-header .container-nav nav {
        margin-top:1em
    }
}

.container-header .container-nav .container-search:only-child {
    margin-left:auto
}

.container-header .navbar-collapse.show {
    display: flex;
    flex-wrap: wrap;

      justify-content: flex-end;  /*       justify-content:space-between;    justify-content: space-between; changed to justify-content: flex-end; */ 
}

.container-header .mod-menu {
    color: #000;   /*   changed text to black */
    flex: 1 0 100%;
    list-style: none;
    margin: 0;
    padding:0
}

@media (min-width: 992px) {
    .container-header .mod-menu {
        display: flex;
        flex: 1 1 0%;
        flex-direction:row
    }
}

.container-header .mod-menu > li {
    position:relative
}

@media (min-width: 992px) {
    .container-header .mod-menu > li + li {
        margin-left:1.55em
    }
}

.container-header .mod-menu > li > a, .container-header .mod-menu > li > span {
    color: currentColor;
    position: relative;
    text-decoration:none
}

@media (min-width: 992px) {
    .container-header .mod-menu > li:after {
        background: transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        margin: auto;
        opacity: .2;
        position: absolute;
        right: 50%;
        transition:all .2s ease, background-color .2s ease
    }
}

.container-header .mod-menu > li.active:after, .container-header .mod-menu > li:hover:after {
    background: #fff;
    left: 0;
    right:2px
}

@media (max-width: 991.98px) {
    .container-header .mod-menu > li.active > a, .container-header .mod-menu > li.active > span, .container-header .mod-menu > li > a:hover {
        text-decoration:underline
    }
}

.container-header .mod-menu .parent > ul {
    color: #22262a;
 /*   display:none   commented out as stopping dropdown */
}

.container-header .metismenu > li + li {
    margin-left: 0;

}

@media (min-width: 992px) {
    .container-header .metismenu > li > a:after, .container-header .metismenu > li > button:before {
        background: transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        margin: auto;
        opacity: .2;
        position: absolute;
        right: 50%;
        transition:all .2s ease, background-color .2s ease
    }
}
/*
 Jevents -  sermon lists
*/
.c-sermon-list__item {
    border-bottom: 2px solid #818183;
    display: block;
    width:100%;
    padding: 0.2em 0.2em;
    text-decoration:none;
          
}
a.c-sermon-list__item {
    color: #000;
    text-decoration:none;        
}

a.c-sermon-list__item:hover {
    color:#fff;
    text-decoration:none;
    background-color: #818183;
        
}

.c-sermon-list__item:last-child {
    border-bottom:none
      
}

@media (min-width: 600px) {
    .c-sermon-list__item {
        -webkit-box-align: center;
        align-items: center;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: stretch;
        justify-content:left
    }
}

.c-sermon-list__details__date {
    font-size: 14px;
    line-height:18px
}

.c-sermon-list__details__title {
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
    margin:2px;

}

.c-sermon-list__details__passage {
    font-size: 18px;
    line-height:22px
}

@media (min-width: 603px) {
  .c-sermon-list__details {
    margin-left:5px;
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    }
}


.container-header .metismenu > li.active > a:after, .container-header .metismenu > li.active > button:before, .container-header .metismenu > li > a:hover:after, .container-header .metismenu > li > button:hover:before {
    background: #fff;
    left: 0;
    right:0
}

.container-header .metismenu > li.active > button.mm-toggler-link:before, .container-header .metismenu > li > button.mm-toggler-link:hover:before {
    left: .5em;
    right:0
}

[dir=rtl] .container-header .metismenu > li.active > button.mm-toggler-link:before, [dir=rtl] .container-header .metismenu > li > button.mm-toggler-link:hover:before {
    left: 0;
    right:.5em
}

@media (min-width: 992px) {
    .container-header .metismenu > li.level-1.active > a, .container-header .metismenu > li.level-1.active > button, .container-header .metismenu > li.level-1 > a:hover, .container-header .metismenu > li.level-1 > button:hover {
        text-decoration:none
    }
}

.container-header .metismenu > li.level-1 > ul {
    min-width:12rem
}

.container-header .navbar-toggler {
    border: 1px solid #000;
    color: #000;
    cursor:pointer

}

.container-header .navbar-toggler .fas {
    font-size:1.5rem
}

.container-header .container-search {
    margin-top:.5em
}

.container-header .mod-finder {
    display: flex;
    flex: 1 0 20rem;
    max-width: 100%;
    position:relative;
}

.container-header .mod-finder > label {
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width:1px !important;
}
.metismenu.mod-menu .metismenu-item{
	display: flex;
	flex-wrap: nowrap; /*   added */}


§body.wrapper-fluid footer > .grid-child, body.wrapper-fluid header > .grid-child {
    padding: 0;
    padding-right:1em;
}

.contact-image img {

  height: auto;
  width: 100%;
  max-width: 300px;
  border-radius:50%;
}
.contact-image-sq img {

  height: auto;
  width: 100%;
  max-width: 400px;
  border-radius:10%;
  padding: 10px !important;
}

.item-content h2, h4 {margin-top: 0.5ex;} 


.btn {
  	border-radius: 2em; 
}

/** BLUE **/
.jev_blue .jevdateiconmod {
	background-color: #009fe3!important;
	color:#fff!important;
	border:solid 1px #194fa4;
}
.jev_blue .jevdateicon1 {
	background-color: #fff;
	color:#009fe3!important;
}
@supports (display: grid) {
    .mod-articlesnews-horizontal {
        grid-gap: 0.2rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .mod-articlesnews-horizontal li:not(:last-child) {
        margin-right: 0
    }
  .columns-3 .mod-articlesnews-horizontal .li {
        grid-gap: 0rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

   .columns-3 .mod-articlesnews-horizontal li:not(:last-child) {
        margin-right: 0
    }
}
.blog-items {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
    margin-left: -.5em;
    margin-right: -.5em;
    padding: 0;
    width:100%
}
@supports (display: grid) {
    .blog-items {
        grid-gap: 0.3em;
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        margin:0 0 0.3em
    }

    .blog-items .blog-item {
        padding: 0
    }

    .blog-items[class * =" columns-"] > div, .blog-items[class^=columns-] > div {
        flex: 0 1 auto;
        max-width: none;
        width:auto
    }

    @media (min-width: 992px) {
        .blog-items.columns-2 {
            grid-gap: 1em;
            grid-template-columns:1fr 1fr
        }

        .blog-items.columns-3 {
            grid-gap: 0em;
            grid-template-columns:1fr 1fr 1fr;
            max-width:100%;
        }

        .blog-items.columns-4 {
            grid-gap: 1em;
            grid-template-columns: 1fr 1fr 1fr 1fr
        }
              .blog-items.columns-5 {
            grid-gap: 0.3em;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr
        }
    }
}
.full-width-page .grid-child.container-component {
    grid-column: 1/-1 !important;
    max-width:3600px;
    padding-left:1vw;
    padding-right:1vw;
}

.full-width-page main {
    margin-top: 0 !important;
    padding-left:1vw;
    padding-right: 1vw;
}
.front-page main {
    margin-top: 0 !important;
    padding-left:0vw;
    padding-right: 0vw;
}
.front-page .grid-child.container-component {
    padding-left:0vw;
    padding-right:0vw;
}
.item-page.full-width-page {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
    position: relative;
    grid-template-rows: 1000px;
    grid-auto-rows: auto;
}
.item-page.full-width-page .icons {
    position: absolute;
    right: 0;
    top: 0;
}
.item-page.full-width-page .page-header {
    grid-column: 2/3;
    grid-row: 1;
    z-index: 2;
    color: #fff;
    margin: auto;
}
.item-page.full-width-page .item-image {
    grid-column: 1/-1;
    grid-row: 1/2;
    background-color: rgb(1, 4, 53);
}
.item-page.full-width-page .com-content-article__body {
    grid-column: 2/3;
}
.item-page.full-width-page .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.test4 { 


}

/*


this is a copy of St saviours css for footer

*/

#mod-custom183 { 
      margin-left: auto;
      margin-right: auto;
      text-align: center;

}
#FooterMenu1 {
      justify-content: center;
      background-color: #fff;
      color: #000;
  padding-bottom:1em;

  
}

#FooterMenu1 p a:hover {
    text-decoration: underline; }

body.wrapper-fluid footer > .grid-child {
   padding-left: 0;
   padding-right: 0;
   padding-bottom: 0;
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: none;
}

#left   { background-image: url('/images/home%20page/New_to_Church_2.jpg'); }
#middle { background-image: url('/images/home%20page/Explore_More_4.jpg'); }
#right  { background-image: url('/images/home%20page/Whats_on_2.jpg'); }

.photo {
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-clip: border-box;
    transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);

    display: block;
    width: 100%;
    height: calc(100vh - 127px);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-indent: 100%;
    white-space:nowrap;
}

.photo:hover {
    opacity:0.9;
    width: 102%;
    background-position: center;
    
}
.container-photo {
  position: relative;
  text-align: center;
  color: white;
  z-index: 1;
}
.container-photo:hover {
  position: relative;
  text-align: center;
  color:blue;
  opacity: 0.9;
  z-index: 50;
}
/* Centered text */
.centered {
  position: absolute;
   z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px #000000aa;
}
ul li {
  position: relative;
}

ul li input ~ p {
  position: relative;
  z-index: 2;
}

.a .clickable {
    z-index: 100;
    position: relative;
}
.btn .user1 {
   	border-radius: 2em; 
    background-color: --cassiopeia-color-primary;
}
.mcnButton {
   	border-radius: 2em; 
    background-color: --cassiopeia-color-primary;
}
.com-contact { 
 
  padding:2em;

}

.rock {
  background-color: #93D5CC; >
}

.rock h1 {
  color: #000000; >
}

.youth {
  background-color: rgba(255,0,0,0);
}

.youth1 {
  background-image: url("/images/whats%20on/low-poly-grid-haikei-C-v10.png");
  background-size: 600px 750px;
  background-repeat: repeat-y;
  background-position: right;
  background-color: #007ba8;
   color: #ffffff;
}
.youth1 h1, h3{
   color: #ffffff;
}
.youth {
  color: #ffffff;  
}

.youth h1, h3 {  
  color: #ffffff;  
}

#jevents_body {

	font-size: 14px;
}


/*Andrew updates 18-04-22 create new contact page layout move miscellaneous infomation up the page */



	.com-contact{
        display:flex;
        flex-flow: column;
    }
	.com-contact h3 {
        display:none;
    }
    .com-contact__miscinfo h3 {
        display:block; 
    }
    .page-header{
        order:1;
    }

	.com-contact__container{
        order:2;
    }

	.com-contact__form.contact-form{
		order:4;  
	}
	
	.com-contact__miscinfo.contact-miscinfo
	{
      	order:3;
	}


/*malcolm updates 6-05-22 church life responsive button grid */

	.btn-primary.user1 {
      	background-color: var(--cassiopeia-color-primary);
	}

	.church-life-grid-container {
  		display: grid;

        grid-template: repeat(4, minmax(50px, auto)) / repeat(2, minmax(100px, auto));

  		gap: 1rem;
        grid-auto-flow: dense;

	}

@media (max-width: 400px) {
        .church-life-grid-container {
  		display: grid;

        grid-template: repeat(4, minmax(50px, auto)) /  minmax(100px, auto);

  		gap: .1rem;
        grid-auto-flow: dense;

	}
}
/* testing Mens page format ------------------------------------------------------------------------*/

.men {
  
  background-color: #c7d7de;	
  background-image: url("/images/banners/blueBackground.jpg");
  background-size: cover;
  
}

.parallelogram-1 {
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.5em;
  border: 1em;
  margin: .6em;
  z-index:5;
  background: transparent;
  text-align: center;
  color: black;
}

.parallelogram-1:before {
    content:'';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index:-1;
    background: #7fced8;
    transform: skew(-25deg);
  }

        
.parallelogram {
  position: relative;

  padding: 0.5em 1em 0.5em .6em;
  border: 0;
  margin: .6em;
  z-index:2;
  background: transparent;
  color: white;
}

.parallelogram:before {
    content:'';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: -2em;
    z-index:-1;
    background: #000;
    transform: skew(-25deg);
    margin: -1em 0 0 0 ;
  }

.parallelogram-1.back1:before {

    background: #7fced8;

  }
.parallelogram-1.back2:before {

    background: #ed635e;

  }
.parallelogram-1.back3:before {

    background: #f6bf6a;

  }
.circle {
  position: relative;
  border-radius: 50%;
  Border-width: 0.5em;
  border-color: #fff;
  color: black;
  z-index:3;
  align-items: center;
  text-align: center;
  font-size: 1.5em;
  min-width: 2.5em;
}

.circle.BackColor {
    background-color: #000;
}
.circle.BackColor1 {
    background-color: #7fced8;
}
.circle.BackColor2 {
    background-color: #ed635e;
}
.circle.BackColor3 {
    background-color: #f6bf6a;
}

/* testing MailChimpstyles */
        .MailChipstyles p{
			margin:10px 0;
			padding:0;
		}
        .MailChipstyles table{
			border-collapse:collapse;
		}
        .MailChipstyles  h1,h2,h3,h4,h5,h6{
			display:block;
			margin:0;
			padding:0;
		}
        .MailChipstyles img,a img{
			border:0;
			height:auto;
			outline:none;
			text-decoration:none;
		}
		 .MailChipstyles body,#bodyTable,#bodyCell{
			height:100%;
			margin:0;
			padding:0;
			width:100%;
		}
		 .MailChipstyles .mcnPreviewText{
			display:none !important;
		}
		 .MailChipstyles #outlook a{
			padding:0;
		}
		 .MailChipstyles img{
			-ms-interpolation-mode:bicubic;
		}
		 .MailChipstyles table{
			mso-table-lspace:0pt;
			mso-table-rspace:0pt;
		}
		 .MailChipstyles .ReadMsgBody{
			width:100%;
		}
		 .MailChipstyles .ExternalClass{
			width:100%;
		}
		 .MailChipstyles p,a,li,td,blockquote{
			mso-line-height-rule:exactly;
		}
		 .MailChipstyles a[href^=tel],a[href^=sms]{
			color:inherit;
			cursor:default;
			text-decoration:none;
		}
		 .MailChipstyles p,a,li,td,body,table,blockquote{
			-ms-text-size-adjust:100%;
			-webkit-text-size-adjust:100%;
		}
		 .MailChipstyles .ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
			line-height:100%;
		}
		 .MailChipstyles a[x-apple-data-detectors]{
			color:inherit !important;
			text-decoration:none !important;
			font-size:inherit !important;
			font-family:inherit !important;
			font-weight:inherit !important;
			line-height:inherit !important;
		}
		 .MailChipstyles .templateContainer{
			max-width:100% !important;
		}
		 .MailChipstyles a.mcnButton{
			display:block;
		}
		 .MailChipstyles .mcnImage,.mcnRetinaImage{
			vertical-align:bottom;
		}
		 .MailChipstyles .mcnTextContent{
			word-break:break-word;
		}
		 .MailChipstyles .mcnTextContent img{
			height:auto !important;
		}
		 .MailChipstyles .mcnDividerBlock{
			table-layout:fixed !important;
		}
		 .MailChipstyles body,#bodyTable{
			background-color:#FAFAFA;
		}
		 .MailChipstyles #bodyCell{
			border-top:0;
		}
		 .MailChipstyles h1{
			color:#202020;
			font-family:Helvetica;
			font-size:26px;
			font-style:normal;
			font-weight:bold;
			line-height:125%;
			letter-spacing:normal;
			text-align:left;
		}
		 .MailChipstyles h2{
			color:#202020;
			font-family:Helvetica;
			font-size:22px;
			font-style:normal;
			font-weight:bold;
			line-height:125%;
			letter-spacing:normal;
			text-align:left;
		}
		 .MailChipstyles h3{
			color:#202020;
			font-family:Helvetica;
			font-size:20px;
			font-style:normal;
			font-weight:bold;
			line-height:125%;
			letter-spacing:normal;
			text-align:left;
		}
		 .MailChipstyles h4{
			color:#202020;
			font-family:Helvetica;
			font-size:18px;
			font-style:normal;
			font-weight:bold;
			line-height:125%;
			letter-spacing:normal;
			text-align:left;
		}
		 .MailChipstyles #templatePreheader{
			background-color:#fafafa;
			background-image:none;
			background-repeat:no-repeat;
			background-position:center;
			background-size:cover;
			border-top:0;
			border-bottom:0;
			padding-top:9px;
			padding-bottom:9px;
		}
		 .MailChipstyles #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
			color:#656565;
			font-family:Helvetica;
			font-size:12px;
			line-height:150%;
			text-align:left;
		}
		 .MailChipstyles #templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{
			color:#656565;
			font-weight:normal;
			text-decoration:underline;
		}
		 .MailChipstyles #templateHeader{
			background-color:#FFFFFF;
			background-image:none;
			background-repeat:no-repeat;
			background-position:center;
			background-size:cover;
			border-top:0;
			border-bottom:0;
			padding-top:9px;
			padding-bottom:0;
		}
		 .MailChipstyles #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
			color:#202020;
			font-family:Helvetica;
			font-size:16px;
			line-height:150%;
			text-align:left;
		}
		 .MailChipstyles #templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
			color:#007C89;
			font-weight:normal;
			text-decoration:underline;
		}
		 .MailChipstyles #templateBody{
			background-color:#ffffff;
			background-image:none;
			background-repeat:no-repeat;
			background-position:center;
			background-size:cover;
			border-top:0;
			border-bottom:0;
			padding-top:9px;
			padding-bottom:9px;
		}
		 .MailChipstyles #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
			color:#202020;
			font-family:Helvetica;
			font-size:16px;
			line-height:150%;
			text-align:left;
		}
		 .MailChipstyles #templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{
			color:#007C89;
			font-weight:normal;
			text-decoration:underline;
		}
		 .MailChipstyles #templateFooter{
			background-color:#FAFAFA;
			background-image:none;
			background-repeat:no-repeat;
			background-position:center;
			background-size:cover;
			border-top:0;
			border-bottom:0;
			padding-top:9px;
			padding-bottom:9px;
		}
		 .MailChipstyles #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
			color:#656565;
			font-family:Helvetica;
			font-size:12px;
			line-height:150%;
			text-align:center;
		}
		 .MailChipstyles #templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
			color:#656565;
			font-weight:normal;
			text-decoration:underline;
		}




	@media only screen and (min-width:768px){ 
		.MailChipstyles .templateContainer{
			width:100% !important;
		}

	}	



	@media only screen and (max-width: 480px){ 
		.MailChipstyles body,table,td,p,a,li,blockquote{
			-webkit-text-size-adjust:none !important;
		}

	}	
	
	@media only screen and (max-width: 480px){ 
		.MailChipstyles body{
			width:100% !important;
			min-width:100% !important;
		}

	}	
	
	@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnRetinaImage{
			max-width:100% !important;
		}

}	

		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnImage{
			width:100% !important;
		}

}	

    


		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{
			max-width:100% !important;
			width:100% !important;
		}

}	

		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnBoxedTextContentContainer{
			min-width:100% !important;
		}

}	

		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnImageGroupContent{
			padding:9px !important;
		}

}	
		
		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
			padding-top:9px !important;
		}

}	
		
		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
			padding-top:18px !important;
		}

}	
 	  	

		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnImageCardBottomImageContent{
			padding-bottom:9px !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnImageGroupBlockInner{
			padding-top:0 !important;
			padding-bottom:0 !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnImageGroupBlockOuter{
			padding-top:9px !important;
			padding-bottom:9px !important;
		}
}

		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnTextContent,.mcnBoxedTextContentColumn{
			padding-right:18px !important;
			padding-left:18px !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
			padding-right:18px !important;
			padding-bottom:0 !important;
			padding-left:18px !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcpreview-image-uploader{
			display:none !important;
			width:100% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles h1{
			font-size:22px !important;
			line-height:125% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles h2{
			font-size:20px !important;
			line-height:125% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles h3{
			font-size:18px !important;
			line-height:125% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles h4{
			font-size:16px !important;
			line-height:150% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles .mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{
			font-size:14px !important;
			line-height:150% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles #templatePreheader{
			display:block !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
			font-size:14px !important;
			line-height:150% !important;
		}

}	
		@media only screen and (max-width: 480px) {  .MailChipstyles #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
			font-size:16px !important;
			line-height:150% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
			font-size:16px !important;
			line-height:150% !important;
		}

}	
		@media only screen and (max-width: 480px){ 
		.MailChipstyles #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
			font-size:14px !important;
			line-height:150% !important;
		}

}


/* Andrew add in override attempt for al limages from mailchimp */
	.MailChimpstyles img.mcnImage {
		width: 100%;
		max-width: 100% !important;
}
	.MailChimpstyles img.mcnImage {
		width: 100%;
		max-width: 100% !important;
}
	.MailChimpstyles img.small{
		width: 50%;
		max-width: 50% !important;
      	text-align: center;
}
	.MailChimpstyles table.mcnCaptionLeftTextContentContainer {
		min-width: 50%;
}
	.MailChimpstyles table.mcnCaptionLeftImageContentContainer {
		min-width: 50%;
}
	.MailChimpstyles table.mcnCaptionRightTextContentContainer {
		min-width: 48%;
}
	.MailChimpstyles table.mcnCaptionRightImageContentContainer {
		min-width: 48%;
}
	.MailChimpstyles table.mcnCaptionBottomContent {
		min-width: 100%;
}