*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 16px; 
    font-family: 'Source Sans Pro', sans-serif; 
    color: #161616; 
    line-height: 150%;

}

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

body { background-color: #FFFFFF; overflow-x: hidden; }

.newsletter-container { max-width: 1000px; margin: 0 auto; }

.newsletter-header { background-color: #161616; color: #FFFFFF; padding: 0em; }
.newsletter-header img { max-width: 100%; height: auto; }

.newsletter > header { position: relative; background: rgb(199,53,179); background: linear-gradient(140deg, rgba(199,53,179,1) 0%, rgba(170,20,68,1) 60%, rgba(133,18,67,1) 100%); text-align: center; }
.newsletter > header::before {  position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: repeating-linear-gradient(to right, #333333, #333333 0px, transparent 1px, transparent 4px); }
.newsletter > header > div { position: relative; display: inline-block; z-index: 10; margin: 2em 0em; padding: 0.2em 0.5em 0.4em 0.5em; border: 0.1em solid #FFFFFF; font-weight: bold; font-size: 3em; color: #FFFFFF; white-space: nowrap; }

.newsletter > section { margin: 1em 0em; padding: 1em 0em; }
.newsletter > section:first-of-type { margin: 0em; padding: 0em; }

.newsletter > section.featured { background: rgb(199,53,179); background: linear-gradient(140deg, rgba(199,53,179,1) 0%, rgba(170,20,68,1) 60%, rgba(133,18,67,1) 100%); color: #FFFFFF; }
.newsletter > section.well { background: #EFEFEF; }

.newsletter-hero { display: flex; flex-direction: column; font-weight: lighter; height: 500px; max-height: 500px; background-color: rgb(199,53,179); text-align: right; align-items: flex-end; justify-content: center; align-content: center; text-decoration: none; }
.newsletter-hero > div {  margin-right: 1em; margin-bottom: 0.2em; padding: 0.0em 0.1em; background-color: #161616; color: rgb(199,53,179); font-size: 5em; line-height: 100%; }
.newsletter-hero > span {  margin-right: 1em; margin-bottom: 0.2em; padding: 0.0em 0.1em; color: rgb(199,53,179); font-size: 3.5em; line-height: 100%; text-decoration: underline; }

@media only screen and (max-width: 600px) {
    .newsletter-hero { justify-content: flex-end; } 
    .newsletter-hero > div { width: 100%; max-width: 100%; margin-right: 0; font-size: 3em; text-align: center; }
    .newsletter-hero > span { display: none; }
}

.newsletter h2, .newsletter h3, .newsletter h4 { color: #535353; margin-left: 0.2em; margin-bottom: 0.3em; line-height: 120%; letter-spacing: -1px; } 

.newsletter h2 { font-size: 2.5em; font-weight: 900; } /*h1*/
.newsletter h3 { font-size: 2.0em; font-weight: 600; } /*h2*/
.newsletter h4 { font-size: 1.5em; font-weight: 600; } /*h3*/

.newsletter p > a { color: #161616; font-weight: 600; } 
.newsletter p > a:hover { color: #b5d334; }

.newsletter h2:first-child { margin-top: 0em; }

a { text-decoration: none; color: #161616; }

.newsletter-video h2, .newsletter-video h3 { color: #FFFFFF; }
.newsletter-video h2  { margin: 0.5em; text-align: center; }

ul { max-width: 80%; }
ul li { margin: 0.3em 0em; }

.youtube-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* make sure the adverts are responsive*/
picture img { border: none; max-width: 100%; height:auto; }

.newsletter-grid { display: flex; flex-flow: row wrap; justify-content: space-between; }
.newsletter-grid-item { height: 420px; flex-basis: 24%; width: 230px; padding: 0.5em; }
.newsletter-grid-item img { width: 100%; height: auto; }

.newsletter-grid-item h3 { font-weight: 600; font-size: 16px; letter-spacing: 0; margin: 0.5em 0em 0em 0em; }

@media only screen and (max-width: 900px) {
  .newsletter-grid-item { flex-basis: 50%;  }
}
@media only screen and (max-width: 600px) {
  .newsletter-grid-item { flex-basis: 100%; height: auto; }
}


/* ==== NEWS ARTICLES ======================================================= */
.newsletter-article > header { background-color: #EFEFEF; }
.newsletter-article > header > div { display: flex; align-items: center; justify-content: space-between; }

@media only screen and (max-width: 900px) {
  .newsletter-article > header > div { flex-direction: column; }
  .newsletter-article > header > div > img { width: 100%; height: auto; }
  .newsletter-article > header > div > h1 { order: 2; margin: 0 0.2em; }

  .newsletter-article > .newsletter-container { margin: 0 0.2em; }

}

.newsletter-article h1, .newsletter-article h2, .newsletter-article h3, .newsletter-article h4 { color: #161616; margin-bottom: 0.3em; line-height: 120%; letter-spacing: -1px; } 

.newsletter-article h1 { font-size: 2.5em; font-weight: 900; }
.newsletter-article h2 { font-size: 2.0em; font-weight: 600; }
.newsletter-article h3 { font-size: 1.5em; font-weight: 600; }
.newsletter-article h4 { font-size: 1.2em; font-weight: 600; }

.newsletter-article p > a { color: #161616; font-weight: 600; } 
.newsletter-article p > a:hover { color: #b5d334; }

.newsletter-article .youtube-embed {
    max-width: 800px;
    margin: 1em auto;
}