/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0;
	font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* -- remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: #000; background: white; }
ol, ul { list-style: none; }
/* -- tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" "";}

/* Structure */
body {
	font-family: "tf_grotesk_italicregular", Helvetica, Arial, sans-serif;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #fffaf6;
}
/* allows hover without horz scroll */
body {
    overflow-x: hidden;
}
body.nav-open {
    height: 100vh;
    overflow: hidden;
}
#page-wrapper {
	width: 100%; max-width: 1460px; margin: 0 auto;
    position: relative;
}
#header {
}
#header .inner {
    width: 100%;
    padding: 36px;
    display: flex;
    align-items: center;
}
    #header .branding {
        width: 220px; padding-right: 36px;
        background-color: #fffaf6;
    }
    #header .branding img {
        width: 100%; height: auto;
    }
#header nav {
    flex: 1;
}
#header nav ul {
    text-align: right;
}
#header nav li {
    margin: 10px 20px 10px 0;
    display: inline-block;
}
#header nav a {
    padding: 10px;
}
#header nav a:hover,
#header nav li.current a,
#header nav li.section a {
    color: #666;
}

/* Hamburger */
#header .hamburger {
    display: none;
}
    #header .hamburger img,
    .nav-button {
        height: 22px; width: auto;
        margin: 10px; padding: 4px;
        cursor: pointer;
    }
    .nav-button {
        margin: 40px 30px;
    }
@media screen and (max-width: 900px) {
    #header nav {
        display: none;
    }
    #header .hamburger {
        display: flex; flex: 1;
        justify-content: flex-end;
    }
}

/* SideNav */
.sidenav {
    width: auto; max-width: 80%;
    position: fixed;
    z-index: 41;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f0ea;
    overflow-y: auto;
}
.sidenav {
    -webkit-transform: translate3d(100%, 0px, 0px);
    -moz-transform: translate3d(100%, 0px, 0px);
    -o-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px);
    visibility: visible;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.sidenav.open {
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    visibility: visible;
}
.sidenav li {
    margin: 0 30px;
    display: block;
}
.sidenav li.last {
    margin-bottom: 30px;
}
.sidenav a {
    padding: 40px 20px 30px 20px;
    display: block;
    font-size: 30px; line-height: 30px;
    text-transform: uppercase; text-align: center;
    border-bottom: 1px solid #00432d;
}
.sidenav li.last a {
    border: 0;
}
.sidenav a:hover,
.sidenav li.current a,
.sidenav li.section a {
    color: #666;
}

section { 
    margin: 0 10%;
}
section.intro {
    margin: 50px 10% 80px 10%;
    text-align: center;
}
section.intro-video {
    margin: 0 0 0 0;
}
section.main {
    text-align: left;
}
section.slider-wrapper {
    margin: 60px 0 100px 0;
}

/* Contact button */
section.contact {
    margin: 80px 0 120px 0;
    text-align: center;
}
@media screen and (max-width: 1000px) {
    section.contact {
        margin: 80px 0 50px 0;
    }
}
section.contact a {
    margin: 0 20px; padding: 20px 120px 18px 120px;
    display: inline-block; position: relative;
    font-size: 22px; line-height: 22px;
    text-transform: uppercase;
    border: 2px solid #000;
}
@media screen and (max-width: 680px) {
    section.contact a {
        padding: 20px 60px 18px 60px;
    }
}
section.contact span.text {
    position: relative; z-index: 2;
}
section.contact span.bg {
    display: none;
}
section.contact a:hover span.bg {
    width: 100%; height: 100%;
    display: block; position: absolute; left: 0; top: 0; z-index: 1;
    opacity: 0.5;
}

/* Footer */
#footer {
    width: 100%; margin-top: 60px;
    font-family: 'Open Sans', sans-serif;
    background: #f5f0ea;
}
#footer .inner {
    max-width: 1460px; margin: 0 auto; padding: 60px 10% 70px 10%;
}
#footer h3 {
    margin: 0 20px 0 0;
    font-size: 26px;
    line-height: 26px; text-transform: none;
}
#footer .left {
    width: 25%;
    float: left;
}
#footer .right {
    width: 75%;
    float: right;
}
@media screen and (max-width: 1025px) {
    #footer .left,
    #footer .right {
        width: 100%;
        float: none;
    }
    #footer .left {
        margin-bottom: 40px;
        text-align: center;
    }
    .socials {
        justify-content: center;
    }
}

.socials {
    display: flex;
    justify-content: flex-end; align-items: center;
}
.socials ul,
.socials p {
    display: block;
}
.socials ul {
    margin-right: 20px;
}
.socials li {
    margin-right: 10px; margin-left: 10px;
    display: inline-block;
}
.socials a {
    width: 30px; height: 30px;
    display: block;
}
.social img {
    width: 100%; height: auto;
}
@media screen and (max-width: 700px) {
    .socials {
        flex-direction: column;
    }
    .socials ul,
    .socials p {
        text-align: center;
    }
    .socials ul {
        margin: 24px 0 24px 0;
    }
}

/* Navigation – Secondary */
nav.secondary {
    width: 80%; max-width: 800px; margin: 0 auto 120px auto;
}
nav.secondary ul {
    width: 100%;
    display: flex; flex-wrap: wrap;
}
nav.secondary li {
    flex: 22%; margin-right: 4%;
    position: relative;
}
nav.secondary li::before {
    content: "";
    display: block;
    padding-top: 100%;
}
nav.secondary li.last {
    margin-right: 0;
}
nav.secondary li a {
    width: 100%; height: 100%;
    display: block;
    position: absolute; left: 0; top: 0;
}
nav.secondary li a span.bg {
    width: 100%; height: 100%;
    display: block;
    position: absolute; left: 0; top: 0;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% auto;
}
nav.secondary li a span.bg:hover,
nav.secondary li.current a span.bg,
nav.secondary li.section a span.bg {
    background-position: bottom;
}
nav.secondary span.title {
    width: 100%;
    position: absolute; left: 0; bottom: -40px;
    display: block;
    text-transform: uppercase; white-space: nowrap;
    color: #000;
    font-size: 16px; text-align: center;
}
@media screen and (min-width: 1200px) {
    nav.secondary span.title {
        font-size: 20px;
    }
}
@media screen and (max-width: 769px) {
    nav.secondary {
        max-width: 400px;
    }
    nav.secondary li {
        flex: 48%; margin-right: 4%;
    }
    nav.secondary li.first,
    nav.secondary li.pos-2 {
        margin-bottom: 60px;
    }
    nav.secondary li.pos-2 {
        margin-right: 0;
    }
    nav.secondary span.title {
        bottom: -30px;
        font-size: 16px;
    }
}

/* Video */
.video-wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    background-color: #000;
}
.video-wrapper iframe,
.video-wrapper .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Home Page */
.HomePage #header,
.HomePage #header .branding {
    display: none;
}
@media screen and (max-width: 900px) {
    .HomePage #header {
        display: block;
    }
    .HomePage section.intro {
        margin-top: 0 !important;
    }
}
.HomePage section.intro {
    margin: 50px 0 60px 0;
}
.main-logo {
    width: 500px; max-width: 50%; margin: 0 auto;
}
    .main-logo img {
        width: 100%; height: auto;
    }
.HomePage nav {
    margin-top: 40px;
    margin-bottom: 0;
}
@media screen and (max-width: 681px) {
    .HomePage nav {
        margin-top: 20px;
    }
}
.HomePage .headline {
    text-align: center;
}
.HomePage .headline h2,
.HomePage .headline p {
    max-width: 60%; margin: 50px auto;
    font-size: 32px; line-height: 36px;
}
.HomePage .headline h2 {
    margin: 0;
}
@media screen and (max-width: 860px) {
    .HomePage .headline h2,
    .HomePage .headline p {
        max-width: 80%;
    }
}
@media screen and (max-width: 600px) {
    .HomePage .headline h2,
    .HomePage .headline p {
        max-width: 90%;
    }
    .HomePage .headline p {
        font-size: 18px; line-height: 26px;
    }
}

/* Video grid */
section.video-grid {
    margin: 120px 10% 70px 10%;
}
section.video-grid .video {
    width: 50%; margin-bottom: 20px;
    float: left;
}
section.video-grid .video.odd {
    padding-right: 1%;
}
section.video-grid .video.even {
    padding-left: 1%;
}
@media screen and (max-width: 600px) {
    section.video-grid {
        margin-top: 70px;
    }
    section.video-grid .video {
        width: 100%; margin-bottom: 20px;
        float: none;
    }
    section.video-grid .video.odd {
        padding-right: 0;
    }
    section.video-grid .video.even {
        padding-right: 0;
    }
}
.video-grid img {
    width: 100%; height: auto;
    display: block;
}
section.video-grid .video-title,
section.video-grid .photo-title {
    width: 100%; padding: 0;
    display: block;
    text-align: center;
    border: 2px solid #000;
    background: transparent;
}
section.video-grid .video-title a,
section.video-grid .video-title .no-link,
section.video-grid .photo-title a,
section.video-grid .photo-title .no-link {
    width: 100%; height: 100%; padding: 20px;
    /*display: block;*/
}
.grid-title a {
    display: flex;
    justify-content: center;
    align-items: center;
}

section.video-grid .video-title a:hover,
section.video-grid .video-title .no-link:hover {
    background: #b8dbe8;
}
section.video-grid .photo-title a:hover,
section.video-grid .photo-title .no-link:hover {
    background: #f6ddb1;
}


/* allows link over top of iframe */
section.video-grid.overlay .video-wrapper iframe {
    pointer-events: none;
}
section.video-grid a.clickthrough {
    width: 100%; height: 100%;
    position: absolute; left: 0; top: 0;
}

/* AboutPage */
.AboutPage .main {
    margin-bottom: 20px;
}

.AboutPage .image-grid {
    margin: 60px 10% 70px 10%;
}
.AboutPage .image-grid .generic-image {
    width: 50%; margin-bottom: 20px;
    float: left;
}
    .AboutPage .image-grid .generic-image img {
        width: 100%; height: auto;
    }
.AboutPage .image-grid .generic-image.odd {
    padding-right: 1%;
}
.AboutPage .image-grid .generic-image.even {
    padding-left: 1%;
}
.AboutPage section.secondary,
.ServicesPage section.secondary {
    margin-top: 40px;
    margin-bottom: 60px;
}
.AboutPage section.secondary .content ,
.ServicesPage section.secondary .content {
    width: 30%;
    margin: 0 5% 0 0;
    float: left;
}
.AboutPage section.secondary .content.last,
.ServicesPage section.secondary .content.last {
    margin-right: 0;
}
.AboutPage section.secondary .content img {
    width: 100%; height: auto;
}
.AboutPage section.secondary h2 {
    margin: 20px 0;
    font-size: 26px;
    line-height: 26px;
}
@media screen and (max-width: 780px) {
    .AboutPage section.secondary .content ,
    .ServicesPage section.secondary .content {
        width: 100%;
        margin-right: 0;
    }
}

/* ServicesPage */
.ServicesPage section.service {
    margin: 0 14% 100px 14%;
}
.ServicesPage .content {
    margin: 40px 0 20px 0;
}
@media screen and (max-width: 1025px) {
    .ServicesPage section.secondary .content {
        width: 45%;
    }
}
@media screen and (max-width: 1025px) {
    .ServicesPage section.secondary .content.last {
        margin-top: 30px;
    }
}
@media screen and (max-width: 780px) {
    .ServicesPage section.secondary .content:not(.first) {
        width: 100%;
        margin-right: 0; margin-top: 30px;
    }
}
@media screen and (max-width: 780px) {
    .ServicesPage section.secondary .content:not(.first) {
        width: 100%;
        margin-right: 0; margin-top: 30px;
    }
}
.ServicesPage .secondary .content h2,
.ServicesPage .logos h2 {
    margin-bottom: 30px;
    font-size: 26px; line-height: 26px;
    text-transform: none;
}
.ServicesPage .bullets {
    margin-top: 30px;
}
.ServicesPage .bullets li {
    margin-right: 20px;
    display: block;
    text-transform: uppercase;
    white-space: nowrap;
}
@media screen and (max-width: 960px) {
    .ServicesPage .content li {
        line-height: 20px;
    }
}
@media screen and (max-width: 481px) {
    .ServicesPage section.service {
        margin: 0 14% 60px 14%;
    }
}
section.logos {
    margin-top: 70px; margin-bottom: 70px;
    text-align: center;
}
section.logos .testimonial {
    max-width: 80%; margin: 20px auto 30px auto;
    font-size: 22px; line-height: 26px;
}
@media screen and (max-width: 600px) {
    section.logos .testimonial  {
        max-width: 90%;
        font-size: 18px; line-height: 26px;
    }
}
section.logos div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
section.logos a {
    display: inline-block;
    max-width: 14%; margin: 20px;
}
section.logos img {
    display: block;
}
section.logos img {
    width: 100%; height: auto;
}
@media screen and (max-width: 769px) {
    section.logos a {
        display: inline-block;
        max-width: 30%;
    }
}
@media screen and (max-width: 481px) {
    section.logos a {
        display: inline-block;
        max-width: 50%; margin: 20px;
    }
}

/* Livestream Page */
.LivestreamPage .intro-video {
    padding: 0 36px;
}
.LivestreamPage .content p {
    font-size: 18px;
    line-height: 26px;
}
.LivestreamPage .main .content {
    width: 48%;
    margin: 0 4% 0 0;
    float: left;
}
.LivestreamPage .main .content.last {
    margin-right: 0;
}

@media screen and (max-width: 780px) {
    .LivestreamPage .main .content {
        width: 100%;
        margin-right: 0;
    }
}

/* Sliders */
.slick-slide,
.slick-slide:focus {
    outline: none;
}
.slick-slide img {
    width: 100%; height: auto;
}
.slick-prev, .slick-next {
    width: 40px;
    z-index: 100;
}
.slick-prev {
    height: 100%;
    left: 0;
}
.slick-next {
    height: 100%;
    right: 0;
}
.slick-prev::before,
.slick-next::before {
    font-size: 40px;
}
@media screen and (max-width: 481px) {
    .slick-prev::before,
    .slick-next::before {
        font-size: 20px;
    }
}
/* allows link over top of iframe */
.slick-slide .video-wrapper iframe {
    pointer-events: none;
}
.slick-slide {
  position: relative;
}
/* to postion over headings */
.slick-slider {
    z-index: 10;
}
/* allows hover without horz scroll */
.slick-list {
    overflow: visible;
    padding: 0 40px;
}
.slick-slide .video-title,
.slick-slide .photo-title {
    padding: 10px 20px;
    display: none;
    font-size: 14px;
    text-transform: uppercase;
    background: #b8dbe8;
}
.slick-slide .photo-title {
    background: #f6ddb1;
}
@media screen and (max-width: 600px) {
    .slick-slide .video-title,
    .slick-slide .photo-title {
        padding: 10px 10px 8px 10px;
        font-size: 10px;
    }
}
.slick-slide:focus .video-title,
.slick-slide:hover .video-title,
.slick-slide:focus .photo-title,
.slick-slide:hover .photo-title {
    margin-top: -1px;
    width: 100%;
    display: block;
}
.slick-slide .details {
    width: 100%; height: 100%;
    visibility: hidden; opacity: 0;
    position: absolute; left: 0; top: 0;
    z-index: 20;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 0.4s ease-in-out 0s;
    -moz-transition: transform 0.4s ease-in-out 0s;
    -o-transition: transform 0.4s ease-in-out 0s;
    transition: transform 0.4s ease-in-out 0s;
}
/*
.slick-slide .details a {
    display: block;
    border: 2px solid #000;
}
*/
slick-slide .details span.details-outline {
    display: block;
}
@media screen and (min-width: 600px) {
.slick-slide:focus .details,
.slick-slide:hover .details {
        visibility: visible; opacity: 1;
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
}

.slick-slide:focus .details,
.slick-slide:hover .details {
    visibility: visible; opacity: 1;
}

.slick-slide:not(.slick-active) {
    pointer-events: none;
}
/* greys out left and right */
.slick-slide .cover {
    display: none;
}
.slick-slide[aria-hidden="true"] .cover {
    width: 100%; height: 100%;
    display: block;
    position: absolute; left: 0; top: 0; z-index: 100;
    background: #000; opacity: 0.6;
}
a.clickthrough {
    width: 100%;
    display: block;
}


.slick-slide .details a {
    display: block;
    border: 2px solid #000;
}

.vimeo-video {
    width: 100%; height: auto;
    display: block;
}
.slick-slide .details .spacer {
    width: 100%; height: auto;
    display: block;
}


.thumbnail {
    width: 100%; height: auto;
    overflow: hidden; position: relative;
}
.thumbnail img:not(.spacer) {
    width: 100%; height: 100%;
    position: absolute; left: 0; top: 0;
  object-fit: cover;      /* crop instead of squish */
  object-position: center; /* keep focus centered */
  display: block;
}


/* PhotosPage */
.PhotosPage .content {
    widtH: auto; margin: 60px 12% 40px 12%;
}
.PhotosPage .my-slider {
    margin-bottom: 100px;
}
.photo-header {
    margin: 0 40px 40px 40px;
}
@media screen and (max-width: 481px) {
    .photo-header {
        margin: 0 40px 20px 40px;
    }
}
.photo-header .outline-button {
    float: right;
}

/* VideoCategory */
.VideoCategory section.main {
    margin: 0 100px;
}
.VideoCategory .video-grid {
    margin-top: 40px;
}
.VideoCategory section.main div {
    width: 50%; margin-bottom: 40px;
    float: left;
    border-left: 20px solid #fffaf6;
    border-right: 20px solid #fffaf6;
}
.VideoCategory section.main div img {
    width: 100%; height: auto;
    display: block;
}

/* Masonry */
/* fluid 5 columns */
.masonry-grid {
    width: 100%;
}
.grid-sizer,
.grid-item { width: 25%; }
.grid-item img {
    width: 100%; max-width: 400px; height: auto;
}
.grid-item img {
    display: block;
    border: 3px solid #FFF;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
@media screen and (max-width: 769px) {
    .grid-sizer,
    .grid-item { width: 50%; }
}

/* PhotoGallery */
.mfp-figure figure {
    margin-left: 50px; margin-right: 50px;
}
.mfp-figure::after {
    background: transparent;
}
.mfp-image-holder .mfp-close {
    padding: 0; right: 0;
}
.mfp-close {
    margin-left: 50px; margin-right: 50px;
    background-image: url(../images/icon-nav-close.svg) !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}
.mfp-arrow-left ,
.mfp-arrow-right {
    width: 50px; height: 50px;
    background-size: 30px 30px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
}
.mfp-arrow-left {
    background-image: url(../images/icon-arrow-prev.svg) !important;
}
.mfp-arrow-right {
    background-image: url(../images/icon-arrow-next.svg) !important;
}
    .mfp-arrow-left::before,
    .mfp-arrow-right::before {
      display: none;
      content:''
    }
    .mfp-arrow-left::after,
    .mfp-arrow-right::after {
      display: none;
      content:''
    }
.mfp-title {
    font-family: "tf_grotesk_italicregular", Helvetica, Arial, sans-serif;
    font-size: 16px; line-height: 20px;
}

/* VideoPage */
.VideoPage .intro-video,
.LiveStream .intro-video {
    width: 60%; margin: 40px auto 120px auto;
}
.VideoPage .video-details,
.LiveStream .video-details {
    width: 100%;
    padding: 40px;
    border: 2px solid #000;
    border-top: 0;
}
.VideoPage .video-details p,
.LiveStream .video-details p {
    font-size: 18px;
    line-height: 26px;
}
@media screen and (max-width: 600px) {
    .VideoPage .intro-video,
    .LiveStream .intro-video {
        width: 80%;
    }
}

/* ContactPage */
.ContactPage .content {
    margin: 50px 0 180px 0;
    text-align: center;
}
.ContactPage .content p {
    font-size: 22px; line-height: 26px;
}

/* Typography */
.heading-wrapper {
    margin: 80px 0 50px 0;
}
/*
h1:not(.branding h1) {
	margin: 0 auto;
    display: inline-block; position: relative;
    font-family: "tf_grotesk_italicregular", Helvetica, Arial, sans-serif;
    font-size: 56px; line-height: 58px;
    text-transform: uppercase; text-align: center;
}
*/
.intro h1 {
	margin: 0 auto;
    display: inline-block; position: relative;
    font-family: "tf_grotesk_italicregular", Helvetica, Arial, sans-serif;
    font-size: 56px; line-height: 58px;
    text-transform: uppercase; text-align: center;
}
    h1 span {
        position: relative;
        z-index: 2;
    }
    h1 span.bg {
        display: block; content: ""; position: absolute; bottom: 2px; left: -3%; z-index: 1;
        width: 106%; height: 24px;
    }
@media screen and (max-width: 700px) {
    /*
    h1:not(.branding h1) {
        font-size: 36px; line-height: 38px;
    }
    */
    .intro h1 {
        font-size: 36px; line-height: 38px;
    }
    h1 span.bg {
        width: 106%; height: 16px;
    }
}
h2 {
    display: inline-block; position: relative;
    font-family: "tf_grotesk_italicregular", Helvetica, Arial, sans-serif;
    font-size: 46px; line-height: 48px;
    text-transform: uppercase;
}
    h2 span {
        position: relative;
        z-index: 2;
    }
    h2 span.bg {
        display: block; content: ""; position: absolute; bottom: 2px; left: -3%; z-index: 1;
        width: 106%; height: 20px; /*height: 2vw;*/
        margin-right: auto;
    }
@media screen and (max-width: 700px) {
    h2 {
        font-size: 26px; line-height: 26px;
    }
    h2 span.bg {
        width: 106%; height: 12px;
    }
}
h3 {
    margin: 0 0 18px 0;
    display: inline-block; position: relative;
    font-family: "tf_grotesk_italicregular", Helvetica, Arial, sans-serif;
    font-size: 22px; line-height: 22px;
    text-transform: uppercase;
}
    h3 span {
        position: relative;
        z-index: 2;
    }
    h3 span.bg,
    .ServicesPage .secondary .content h2 span.bg,
    .ServicesPage .logos h2 span.bg {
        display: block; content: ""; position: absolute; bottom: 2px; left: -3%; z-index: 1;
        width: 106%; height: 11px;
    }
.content p,
.content li {
    margin: 0 0 18px 0;
    font-size: 18px; line-height: 26px;
}
.content li {
    margin: 0 0 10px 0;
}
    .content li span {
        width: 12px; height: 12px; margin: 0 10px 0 0;
        display: inline-block;
        border-radius: 50%;
    }
.intro-text {
    max-width: 60%; margin: 50px auto 0 auto;
    font-size: 22px; line-height: 26px;
}
@media screen and (max-width: 860px) {
    .intro-text {
        max-width: 80%; margin: 50px auto 0 auto;
    }
}

/* two col content */
.two-col.main .content p {
    font-size: 18px; line-height: 26px;
}
.two-col.main .content {
    width: 48%;
    margin: 0 4% 0 0;
    float: left;
}
.two-col.main .content.last {
    margin-right: 0;
}
@media screen and (max-width: 780px) {
    .two-col.main .content {
        width: 100%;
        margin-right: 0;
    }
}

a {
    color: #000;
    text-decoration: none;
}
a.outline-button {
    padding: 10px 10px 8px 10px;
    display: inline-block; position: relative;
    font-size: 22px; line-height: 22px;
    text-transform: uppercase;
    border: 2px solid #000;
}
a.outline-button span.text {
    position: relative; z-index: 2;
}
a.outline-buttonspan.bg {
    display: none;
}
a.outline-button:hover span.bg {
    width: 100%; height: 100%;
    display: block; position: absolute; left: 0; top: 0; z-index: 1;
    opacity: 0.5;
}
a.view-all {
    padding: 10px 0 8px 10px;
    float: right;
    display: inline-block; position: relative;
    font-size: 22px; line-height: 22px;
    text-transform: uppercase;
}
@media screen and (max-width: 700px) {
    a.view-all {
        font-size: 18px; line-height: 18px;
    }
}
@media screen and (max-width: 481px) {
    a.view-all {
        padding: 0 0 0 10px;
        line-height: 26px;
    }
}

/* Colours */
.teal {
    color: #86a5ab;
}
.yellow {
    color: #eec26f;
}
.green {
    color: #636e52;
}
.blue {
    color: #b8dae8;
}

/* Stuff & Things */
.clearme:after {
	display: block; content: ""; clear: both;
}
.clear {
    clear: both;
}
.fit {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.center {
    text-align: center;
}
#Breadcrumbs {
    margin: 40px 40px 60px 40px;
    font-size: 14px; line-height: 20px;
}
.pattern {
    height: 62px; margin: 70px 0; 
    background-image: url(../images/header-pattern.png);
    background-repeat: repeat-x;
    background-position: left center; 
}
.noMar-bottom {
    margin-bottom: 0 !important;
}
.block {
    display: block;
}

/* Responsive styles */
@media screen and (max-width: 480px) {
    section,
    section.intro,
    section.main {
        margin-left: 40px; margin-right: 40px;
    }
    #footer {
        padding-left: 0; padding-right: 0;
    }
}

@media screen and (max-width: 1920px) {
}
@media screen and (max-width: 1025px) {
}
@media screen and (max-width: 769px) {
}
@media screen and (max-width: 481px) {
}