/**
 * sometimes.ca custom code
 */


/* mobile modal nav menu */
/* not currently being used non-mobile */
body.mobile .site_menu {
	/* 4,76,92 */
    background: rgba(235,68,56,0.98) !important;
    background: rgba(30,30,30,0.98) !important;
    /* border: solid 8px rgba(255,255,255,0.93); */
    font-family: "Nitti Grotesk", Icons;
    padding-top: 7vh !important;
    padding-left: 3rem !important;
    padding-bottom: 8rem !important;
}
/* close x button */
body.mobile #site_menu .close {
	font-size: 60px;
    padding-right: 5px;
    margin-top: -3px;
    color: rgba(255, 255, 255, 0.93);
}
/* targets the links to parent sets */
.site_menu /*div*/.set-link > a {
    font-weight: inherit !important;
    font-size: 3.5rem;
    /* set first letter to be capitalized */
    text-transform: capitalize;
}
/* target all page links */
.site_menu /*div*/.page-link a {
	margin-top: 1.2rem;
    line-height: 1.2;
    font-weight: 400;
    margin-left: 0rem; /*if want to indent */
    font-size: 2.0rem;
}
.site_menu /*div*/.page-link a::before {
	content: "/ ";
}
/* UNUSED - use if projects page goes back to
being a non-stack page...
the "projects" link is a page link too,
so to make it look like a parent set link,
target it with... */
.site_menu /*div*/.page-link[data-link-pid="3089444"] a { 
	font-size: 3.5rem !important;
    font-weight: inherit;
    text-transform: capitalize;
    padding-bottom: 0.5rem;
    margin-left: 0;
    line-height: 1.4;
}
.site_menu /*div*/.page-link[data-link-pid="3089444"] a::before {
	content: "";
}

/* footer on every page */
/*div*/.sometimes-footer-1 {
	margin: 5rem 0;
    /* add the small tag border style */
    padding-top: 0.4em;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}
/* remove that style from the small tags */
.sometimes-footer-1 small {
	border: 0;
    padding: 0;
}
.sometimes-footer-1 .sometimes-footer-email {
	text-align: right;
}
.mobile .sometimes-footer-1 .sometimes-footer-email {
	text-align: left;
}



/* homepage - this targets the 1st box
which is set to 100vh */

[local-style="2703268"] .page {
    min-height: 90vh !important;
	background-color: initial /*!page_bgcolor*/;
}
/* homepage top description, email
and About box 'about' link*/
/*div*/.sometimes-home-contact-1 {
	border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding-top: 1rem;
}
	/* on mobile, add a line break, and remove one */
	.mobile .sometimes-home-contact-1 span {
  		display: block;
	}
	.mobile .sometimes-home-contact-1 br {
		display: none;
	}


/* About page
/* this targets the 1st box
which is set to 100vh */
[local-style="3080969"] .page {
    min-height: 80vh !important;
	background-color: initial /*!page_bgcolor*/;
}
/* name, email, CV links */
.sometimes-about-contact-1 {
	border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding-top: 1rem;
    text-align: right;
}
.mobile .sometimes-about-contact-1 {
	margin-top: 1rem;
    text-align: left;
}

/* About page img outline graphic */
.sometimes-wrap-outline-img-1 {
    background-image: url("https://files.cargocollective.com/c17509/sometimes-about-monkey-outline-01b.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-position: right center;
}
body.mobile .sometimes-wrap-outline-img-1 {
    /* a lighter version of monkey outline */
    background-image: url("https://files.cargocollective.com/c17509/sometimes-about-monkey-outline-01a.png");
    background-size: cover;
    background-position: left center;
}

/* About page Process entries */
/*ul*/.sometimes-shapes-1 {
	padding:0;
    margin: 0;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
/*ul*/.sometimes-shapes-1 li {
	list-style: none;
    border: solid 2px rgba(255, 255, 255, 0.2);
    /* background-color: #2e2e2e; */
    padding: 5rem;
    margin: 2rem 2rem;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 34rem;
    height: 34rem;
    border-radius: 50%;
    text-align: center;
    /* allows vertically centering
    on children */
    display: flex; 
    align-items: center;
}
/* remove side margins for single-col circles
and make them boxes*/
.mobile .sometimes-shapes-1 li {
	margin: 1rem 1rem;
    padding: 4rem;
    height: auto;
    border-radius: 10px;
}

/* About page - experience timeline */

/*ul*/.sometimes-shapes-2 {
	padding: 0;
    /* for browswers without grid */
    max-width: 45rem;
}
.sometimes-shapes-2 li {
	/* center content vertically */
    display: flex;
    align-items: center;
    /* for browsers without grid */
    margin: 2rem 0;
    /* hyphens: auto; */
}
/* the arrows - hide them by default */
.sometimes-shapes-2 li.sometimes-arrow-1 {
	display: none;
}
/* but show the first one (with baby emoji) */
.sometimes-shapes-2 li:nth-child(1) {
	display: flex;
}
/* target lis that don't have arrows */
.sometimes-shapes-2 li:not(.sometimes-arrow-1) {
    /* for browsers without grid */
    border-radius: 2vw;
}
/* target lis that don't have arrows */
.sometimes-shapes-2 li:not(.sometimes-arrow-1) > div {
    padding: 4vh 6vh;
}

/* for browsers with grid: */ 
@supports (display: grid) {

	/*ul*/.sometimes-shapes-2 {
    	max-width: none;
	}
    .sometimes-shapes-2 li {
        margin: 0;
    }
    /* target lis that don't have arrows */
    .sometimes-shapes-2 li:not(.sometimes-arrow-1) {
        border-radius: 7vw;
    }
    /* the arrows */
    .sometimes-shapes-2 li.sometimes-arrow-1 {
        /* re-show the arrows, which were hidden by default */
        display: flex;
        font-size: 3.5rem; /* same size as H2s */
        font-weight: 200;
        line-height: 1;
    }
    /* Setup the grid for non-mobile */
    /*ul*/.sometimes-shapes-2 {
        padding:0;
        display: grid;
        /* 5 cols: minmax for text, auto for arrows */
        grid-template-columns: minmax(min-content, 55rem) auto minmax(min-content, 55rem) auto minmax(min-content, 55rem);
        /* 12 rows: (6x2). 1fr for text (and some arrows),
        auto for arrows */
        grid-template-rows: repeat(6, auto 1fr);
        grid-gap: 1rem;
        grid-template-areas:
            "a0 . . . ."
            "e1 a1 e2 . ."
            ". . a2 . ."
            ". . e3 . ."
            ". a3 . a4 ."
            "e4 . . . e5"
            "a5 . . . a6"
            ". . e6 . ."
            ". . . a7 ."
            ". . . . e7"
            ". . . . a8"
            ". . . . e8";
        justify-items: center;
    }
}

    
/* the individual entries in the grid.
e = entry
a = arrow */
/* the first one is the baby emoji in the
circle and is more complex than the rest */
.sometimes-shapes-2 li:nth-child(1) {
	grid-area: a0;
}
.sometimes-shapes-2 li:nth-child(1) /*span*/.sometimes-circle-1 {
	display: block;
    background-color: #eb344c;
    border-radius: 50%;
    font-size: 2rem;
    width: 4rem;
    height: 4rem;
    text-align: center;
    line-height: 4.4rem; /* center the emoji */
}
.sometimes-shapes-2 li:nth-child(1) /*span*/.sometimes-arrow-1-2 {
	display: block;
    transform: rotate(90deg);
    color: #eb344c;
    text-align: center;
}
.sometimes-shapes-2 li:nth-child(2) {
	grid-area: e1;
    background-color: #eb386b;
}
.sometimes-shapes-2 li:nth-child(3) {
	grid-area: a1;
    color: #eb386b;
}
.sometimes-shapes-2 li:nth-child(4) {
	grid-area: e2;
    background-color: #e53c82;
}
.sometimes-shapes-2 li:nth-child(5) {
	grid-area: a2;
    transform: rotate(90deg);
    color: #e53c82;
}
.sometimes-shapes-2 li:nth-child(6) {
	grid-area: e3;
    background-color: #e03f98;
}
.sometimes-shapes-2 li:nth-child(7) {
	grid-area: a3;
    transform: rotate(135deg);
    color: #e03f98;
}
.sometimes-shapes-2 li:nth-child(8) {
	grid-area: a4;
    transform: rotate(45deg);
    color: #e03f98;
}
.sometimes-shapes-2 li:nth-child(9) {
	grid-area: e4;
    background-color: #db42ab;
}
.sometimes-shapes-2 li:nth-child(10) {
	grid-area: e5;
    background-color: #db42ab;
}
.sometimes-shapes-2 li:nth-child(11) {
	grid-area: a5;
    transform: rotate(45deg);
    color: #db42ab;
    justify-self: right;
    padding: 4rem 0;
}
.sometimes-shapes-2 li:nth-child(12) {
	grid-area: a6;
    transform: rotate(135deg);
    color: #db42ab;
    justify-self: left;
    padding: 4rem 0;
}
.sometimes-shapes-2 li:nth-child(13) {
	grid-area: e6;
    background-color: #d645bb;
}
.sometimes-shapes-2 li:nth-child(14) {
	grid-area: a7;
    transform: rotate(45deg);
    color: #d645bb;
}
.sometimes-shapes-2 li:nth-child(15) {
	grid-area: e7;
    background-color: #d147ca;
}
.sometimes-shapes-2 li:nth-child(16) {
	grid-area: a8;
    transform: rotate(90deg);
    color: #d147ca;
}
.sometimes-shapes-2 li:nth-child(17) {
	grid-area: e8;
    background-color: #c149cc;
}

/* for browsers that support grid,
tweak the grid for mobile = 2 col */
@supports (display: grid) {
    .mobile .sometimes-shapes-2 li {
		hyphens: auto;    
	}
    .mobile /*ul*/.sometimes-shapes-2 {
        /* switch to 3 col */
        grid-template-columns: minmax(min-content, 55rem) auto minmax(min-content, 55rem);
        /* switch row height to be auto for all
        = variable height on text entries */
        grid-template-rows: repeat(6, auto auto);
        grid-gap: 0.5rem;
        /* now a 3col grid */
        grid-template-areas:
            "a0 . ."
            "e1 a1 e2"
            ". . a2"
            ". . e3"
            ". a3 a4"
            "e4 . e5"
            "a5 . a6"
            "e6 e6 e6"
            ". a7 ."
            ". . e7"
            ". a8 ."
            "e8 . .";
    }
}

/* for mobile, make arrows smaller */
.mobile .sometimes-shapes-2 li.sometimes-arrow-1 {
    font-size: 2rem;
    font-weight: 400;
}
/* for mobile, target LIs that don't have arrows */
.mobile .sometimes-shapes-2 li:not(.sometimes-arrow-1) > div {
    /* padding: 4vh; */
    padding: 2.5rem;
}
/* for mobile, rotate a few arrows differently */
.mobile .sometimes-shapes-2 li:nth-child(8) {
    /* a4 */
    transform: rotate(90deg);
}
.mobile .sometimes-shapes-2 li:nth-child(16) {
	/* a8 */
    transform: rotate(135deg);
}

/* when the screen gets more portrait,
ALSO kick into 2 col layout
basically a duplicate of the .mobile setup above */
@media only screen and (max-aspect-ratio: 11/10) {
	
    @supports (display: grid) {
        .sometimes-shapes-2 li {
            hyphens: auto;    
        }
        /*ul*/.sometimes-shapes-2 {
            /* switch to 3 col */
            grid-template-columns: minmax(min-content, 55rem) auto minmax(min-content, 55rem);
            /* switch row height to be auto for all
            = variable height on text entries */
            grid-template-rows: repeat(6, auto auto);
            grid-gap: 0.5rem;
            /* now a 3col grid */
            grid-template-areas:
                "a0 . ."
                "e1 a1 e2"
                ". . a2"
                ". . e3"
                ". a3 a4"
                "e4 . e5"
                "a5 . a6"
                "e6 e6 e6"
                ". a7 ."
                ". . e7"
                ". a8 ."
                "e8 . .";
        }
    }
    
    /* make arrows smaller */
    .sometimes-shapes-2 li.sometimes-arrow-1 {
        /* 
        font-size: 2rem;
        font-weight: 400;
        */
    }
    /* target LIs that don't have arrows */
    .sometimes-shapes-2 li:not(.sometimes-arrow-1) > div {
        /* padding: 4vh; */
        padding: 4vh;
    }
    /* rotate a few arrows differently */
    .sometimes-shapes-2 li:nth-child(8) {
        /* a4 */
        transform: rotate(90deg);
    }
    .sometimes-shapes-2 li:nth-child(16) {
        /* a8 */
        transform: rotate(135deg);
    }

}


/* About page - tidbits entries */
/*ul*/.sometimes-shapes-3 {
	list-style: none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
/*ul*/.sometimes-shapes-3 > li {
    border-top: solid 5px rgba(0, 0, 0, 0.8);
    /* border-top: solid 5px #9529a6; */
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 36rem;
    /* min-width: 30rem;
    max-width: 40rem; */
    padding: 0.5rem 0 0 0;
    margin: 3rem 2rem;
    /* 292 75 65 */
    /* color: #9529a6; */
}
/* on mobile, get rid of side margins */
.mobile .sometimes-shapes-3 > li {
	margin: 3rem 0;
}
/*ul*/.sometimes-shapes-3 > li > a > img {
    width: 8.5rem !important;
    height: auto !important;
    border-radius: 50%;
    margin:0;
    /* not needed in chrome, but maybe somewhere? */
    overflow: hidden;
}


/* projects (main) page */

/* thumbnail image captions on Projects page */
body[data-page-id="3716970"] .gallery_image_caption {
	margin-top: 3rem;
    margin-bottom: 4rem;
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.90);
    text-align: center;
}
body[data-page-id="3716970"] .gallery_image_caption {
	color: rgba(0,0,0,0.35);
}
body[data-page-id="3716970"] .gallery_image_caption::first-line {
	color: rgba(0, 0, 0, 0.90);
}



/* project c.study pages, wrapped
around title and intro
for non-mobile, add space below intro para */
/*div*/.sometimes-project-intro {
    padding-top: 16rem;
    padding-bottom: 16rem;
    /* border: solid 1px red; */
}
/* for mobile, remove that space,
add space above title */
body.mobile .sometimes-project-intro {
	padding-top: 20rem;
    padding-bottom: 6rem;
}

/* project c.study cover styling step 1:
sets cover image to display at browser
width with auto height */
.sometimes-project-cover-1 {
    text-align: center; /* needed? */
    /* pulls image wrap out of the cargo positioning */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left:-50vw;
    /* border: solid 5px blue; */
}
.sometimes-project-cover-1 > img {
	margin:0 !important;
    width: 100% !important;
    height: auto !important;
}

/* cover styling step 2:
if want to display image at 100vh,
use this style. Only works if
object-fit is supported */
@supports (object-fit: cover) {
    .sometimes-project-cover-1-cover {
        height: 100vh;
    }
    .sometimes-project-cover-1-cover > img {
        object-fit: cover;
        /* override the inline sizing that cargo sets */
        height: 100% !important;
        /* border: solid 5px pink; */
    }
}

/* project c.study details */
/* content within is laid out in a two-col grid */
.sometimes-project-details {
	padding-top: 14rem;
    padding-bottom: 14rem;
    max-width: 64rem;
    margin: 0 auto;
}
body.mobile .sometimes-project-details {
	/* padding-top: 6rem;
    padding-bottom: 10rem; */
}

/* boxes with bg color */
.sometimes-wrap-1 {
	/*
    5rem padding on whole content area set in
    the global design settings.
    Neg margins moves the bg into that space,
    and it must be offset by padding to get
    the text back inline with content not
    bg boxes.
    note: -5rem would make the bg boxes flush
    with viewport
    */
    margin: 0 -3.5rem;
    /* side padding needs to offset negative
    margins set above */
	padding: 14rem 3.5rem;
}
body.mobile .sometimes-wrap-1 {
	/* less vert padding on bg boxes */
    padding-top: 14rem;
    padding-bottom: 14rem;
}
/* for bg boxes where I want the image
to sit tight to the bottom of it */
.sometimes-wrap-tight-bottom-1,
body.mobile .sometimes-wrap-tight-bottom-1 {
	padding-bottom: 0;
    line-height: 0;
}
.sometimes-wrap-tight-bottom-1 img {
	margin-bottom: 0 !important;
}

/* colour - for light boxes */
.sometimes-wrap-light-0 {
	background-color: #fff;
}
.sometimes-wrap-light-1 {
	/* 95% white */
    background-color: #f3f3f3;
}
.sometimes-wrap-light-2 {
	/* 92% white */
    background-color: #ebebeb;
}
.sometimes-wrap-light-3 {
	/* 89% white */
    background-color: #e3e3e3;
}
/* used in Legacies Cache to match an
mp4 vid bg that exported lighter */
.sometimes-wrap-light-3b {
	/* 91% white */
    background-color: #e7e7e7;
}
.sometimes-wrap-light-4 {
	/* 85% white */
    background-color: #d9d9d9;
}
.sometimes-wrap-light-5 {
	/* 81% white */
    background-color: #cecece;
}
.sometimes-wrap-light-6 {
	/* 77% white */
    background-color: #c4c4c4;
}
.sometimes-wrap-light-10 {
	/* 55% white */
    /* background-color: #8c8c8c; */
    /* this is a test to see if being used */
    background-color: red;
}
.sometimes-wrap-yellow-1 {
	background-color: #e5c345;
}
/* bright-yellow for Hoyne */
.sometimes-wrap-yellow-5 {
    /* 45 78 100 */
    background-color: #ffcd38;
}
.sometimes-wrap-yellow-6 {
    /* 45 80 97 */
    background-color: #f7c631;
}
/* light blues for HMM */
.sometimes-wrap-lightblue-1 {
	/* 198 5 98 */
    background-color: #edf6fa;
}
.sometimes-wrap-lightblue-2 {
	/* 200 6 96 */
    background-color: #e6f0f5;
}
.sometimes-wrap-lightblue-3 {
	/* 199 7 93 */
    background-color: #dde8ed;
}
/* light blues for Bear71 */
.sometimes-wrap-lightblue-4 {
	/* 190 12 92 */
    background-color: #cee6eb;
}
/* unused so far - light blues for Circa */
.sometimes-wrap-lightblue-5 {
	/* 195 10 80 */
    background-color: #c3d3d9;
}
/* light blues for Cache */	
.sometimes-wrap-lightblue-10 {
	/* 205 24 94 */
    background-color: #b6d8f0;
}
.sometimes-wrap-lightblue-11 {
	/* 205 25 90 */
    background-color: #accee5;
}
/* unused so far */
.sometimes-wrap-lightblue-12 {
	/* 205 27 86 */
    background-color: #a0c3db;
}
/* light greens for Bear71 */
.sometimes-wrap-lightgreen-1 {
    /* 60 65 67 */
    background-color: #abab3c;
}
.sometimes-wrap-lightgreen-2 {
/* 60 65 71 */
    background-color: #b5b53f;
}
.sometimes-wrap-lightgreen-3 {
    /* 60 65 75 */
    background-color: #bfbf43;
}
.sometimes-wrap-lightgreen-4 {
    /* 60 65 79 */
    background-color: #c9c947;
}
.sometimes-wrap-lightgreen-5 {
    /* 60 65 83 */
    background-color: #d4d44a;
}
.sometimes-wrap-lightgreen-6 {
    /* 60 65 87 */
    background-color: #dede4e;
}
/* sprout */
.sometimes-wrap-lightgreen-10 {
    /* 70 25 93 */
    background-color: #e3edb2;
}
/* lighttan for c150-Janet */
.sometimes-wrap-lighttan-1 {
    /* 35 15 98 */
    background-color: #faead4;
}
.sometimes-wrap-lighttan-2 {
    /* 35 17 95 */
    background-color: #f2e1c9;
}
/* sprout */
.sometimes-wrap-lighttan-5 {
    /* 48 15 85 */
    background-color:#D9D2B8;
}
.sometimes-wrap-lighttan-6 {
    /* 48 15 89 */
    background-color:#E3DCC1;
}
.sometimes-wrap-lighttan-8 {
    /* 57 7 97 */
    /* matches some vid bgs */
    background-color: #f7f3e5;
}

/* lightyelloww for c150-Gift */
.sometimes-wrap-lightyellow-1 {
    /* 60 30 95 */
    background-color: #f2f2aa;
}
.sometimes-wrap-lightyellow-2 {
    /* 60 33 92 */
    background-color: #ebeb9d;
}
/* sprout */
.sometimes-wrap-lightyellow-5 {
    /* 48 30 99 */
    background-color: #fcedb1;
}
/* sprout */
.sometimes-wrap-lightteal-1 {
    /* 140 10 93 */
    background-color: #d5eddd;
}
/* sprout */
.sometimes-wrap-lightorange-1 {
    /* 15 15 99 */
    background-color: #fce0d7 ;
}
/* for About page top box */
.sometimes-wrap-lightred-1 {
    /* 4 76 92 */
    background-color: #eb4438;
}

/* for an About page box */
.sometimes-wrap-lightred-2 {
    background: linear-gradient(#eb4438, #eb386b);
}
/* for circa */
.sometimes-wrap-lightred-5 {
    /* 10 83 65 */
    background-color: #bf3b21;
}

/* colour - dark boxes
needs 2 classes applied */
/* 1 text color */
.sometimes-wrap-dark {
    /* type settings below */
}
/* 2 bg color */
.sometimes-wrap-dark-1 {
    /* bl 9% */
    background-color: #171717;
}
.sometimes-wrap-dark-2 {
    /* bl 12% */
    background-color: #1f1f1f;
}
.sometimes-wrap-dark-3 {
    /* bl 15% */
    background-color: #262626;
}
.sometimes-wrap-dark-4 {
    /* bl 18% */
    background-color: #2e2e2e;
}
.sometimes-wrap-dark-7 {
    /* bl 30% */
    background-color: #4d4d4d;
}
.sometimes-wrap-dark-8 {
    /* bl 33% */
    background-color: #545454;
}
.sometimes-wrap-darkred-1 {
    /* coho red-but-darker */
    background-color: #992c08;
}
.sometimes-wrap-darkred-2 {
    /* coho red-but-darker 2 */
    background-color: #a12e08;
}
.sometimes-wrap-darkred-3 {
    /* bear71 darkkred */
    background-color: #8c1515;
}
/* for Janet */
.sometimes-wrap-darkpurple-1 {
    /* 320 60 35 */
    background-color: #592447;
}
.sometimes-wrap-darkpurple-2 {
    /* 320 60 38 */
    background-color: #61274e;
}
.sometimes-wrap-darkpurple-3 {
    /* 320 60 41 */
    background-color: #692a54;
}
.sometimes-wrap-darkpurple-4 {
    /* 320 60 44 */
    background-color: #702d5a;
}
.sometimes-wrap-darkpurple-5 {
    /* 320 60 47 */
    background-color: #783060;
}
/* for Cache */
.sometimes-wrap-darkblue-1 {
    /* 240 83 25 */
    background-color: #0b0b40;
}
.sometimes-wrap-darkblue-2 {
    /* 240 80 29 */
    background-color: #0f0f4a;
}
/* for Hoyne (IPA) */	
.sometimes-wrap-darkgreen-1 {
    /* 140 45 22 */
    background-color: #1f3827;
}
.sometimes-wrap-darkgreen-2 {
    /* 140 45 25 */
    background-color: #23402d;
}
/* unused so far, but might for "results" */
.sometimes-wrap-darkgreen-3 {
    /* 140 45 28 */
    background-color: #274732;
}

	
/* misc proj page classes */

/* wrapped around images that I want to
stack seamlessly, vertically, to look like
one big image */
.sometimes-image-vertical-tight {
	line-height:0;
}
.sometimes-image-vertical-tight img {
	margin-bottom: 0 !important;
}

/* creates a line down the middle of the screen */
.sometimes-vert-connector-1 {
	border-left: solid 1px #888;
    margin-left: 50%;
    height: 50vh;
}

/* replaces the old <text-limit> tag, this is 
Cargo's css code, not sure if inline-block is 
needed, and I override it for centre blocks 
(below) */
/*div*/.sometimes-text-limit {
	display: inline-block;
	max-width: 45rem;
}
/* to put a text block in the middle. Centre-
justified is done with cargo's formatting
button with applies text-align:center to
an item */
/*div*/.sometimes-text-middle {
    display: block;
	margin: 0 auto;
}
/* to put dropshadow on a video player */
/*div*/.sometimes-vid-dropshadow-1 iframe {
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.4);
}

/* to overlap a div with the div below it*/
/* used on hoyne devices image, at least */
/*div*/.sometimes-image-overlap-1 {
	margin-bottom: -30vh;
}
/* used on the next sometimes-wrap-1 div,
to keep content away from overlap devices
above */
.sometimes-wrap-xtrapadtop-1 {
	padding-top: 46vh !important;
}

/* wrap around framed device stills,
when want to restrict width */
.sometimes-phonesize-1 img {
    /* whichever is smaller */
    max-width: min(390px, 100%);
    height: auto !important;
}
.sometimes-tabletsize-1 img {
    /* whichever is smaller */
    max-width: min(700px, 100%);
    height: auto !important;
}

/* to restrict the height to viewport */
.sometimes-vh-1 img, .sometimes-vh-1 video {
    max-height: 90vh !important;
    width: auto !important;
}

/* used on multi-col layouts where cols have
int divs w bg colours, and want padding
on those divs. ie) side x side phones for
Sprout */
.sometimes-cell-pad-1 {
    padding: 8vw;
}

/* limits the width of a 2-col layout area,
same width as project details section, for now */
.sometimes-2col-constrain {
	max-width: 64rem;
    margin: 0 auto; 
}



/* case-study-specific styling */

/* esp cover img = background still
behind small vid player */
/*div*/.sometimes-background-esp-1 {
	height: 80vh;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center;
    /* pulls this div out of the cargo positioning */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left:-50vw;
    background-image: url("https://files.cargocollective.com/c17509/esp-video-background-01e.jpg");
}

/* hoyne img behind 'experience' video */
.sometimes-background-hoyne-1 {
	background-image: url("https://files.cargocollective.com/c17509/hoyne-final-experience-bg-01h.jpg");
    background-size: cover;
}

/* sprout about page tall comp */
/* graphic is 800px w */
.sprout-about-full-1 img {
	max-width: 600px;
    height: auto !important;
}






/* typography */

/* small tags = project detail labels and some captions */
/* wraps around project details 2-col layout */
small {
    /* display: block !important; */
    width: 100%;
    padding-top: 0.4em;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.sometimes-project-details small {
	 text-transform: uppercase;
    /* rest of styling is controlled in cargo type settings */
}

sup {
	opacity: 0.6;
}

/* used on second line of section titles */
.sometimes-faint {
	opacity: 0.45;
}

/* at top of project pages, below the details, wrapped
around anchor subnav. This affects the text (numbers)
that aren't anchor tags */
/*div*/.sometimes-subnav {
    color: rgba(0, 0, 0, 0.4);
}

/* in boxes with dark bg color */
.sometimes-wrap-dark,
.sometimes-wrap-dark h1,
.sometimes-wrap-dark h2 {
	color: rgba(255, 255, 255, 0.93) !important;
}
.sometimes-wrap-dark .gallery_image_caption {
	color: rgba(255, 255, 255, 0.4) !important;
}
.sometimes-wrap-dark small {
	color: rgba(255, 255, 255, 0.4) !important;
    border-top-color: rgba(255, 255, 255, 0.25); /* #595959 */
}

/* this targets the text in circles (on dark bg)
on the About page */
.sometimes-wrap-dark ul.sometimes-shapes-1 li {
	color: rgba(255, 255, 255, 0.4) !important;
}
.sometimes-wrap-dark ul.sometimes-shapes-1 li b {
	/* set it back to default text color in dark boxes */
    color: rgba(255, 255, 255, 0.93) !important;
    font-weight: 400;
}


/* About page - for some links on troublesome bgs */
.sometimes-wrap-lightred-1 a,
.sometimes-wrap-lightred-2 a,
.sometimes-shapes-2 a {
	color: rgba(255,255,255,0.7) !important; 
    /* border-bottom: solid 1px rgba(255,255,255,0.7) !important; */
}
/* About page - small tags on lightred bg */
.sometimes-wrap-lightred-1 small,
.sometimes-wrap-lightred-2 small {
	color: rgba(0,0,0,0.6) !important;
}


/* other colour settings */
/* reds used on some About page text + symbols, at least */
.sometimes-colour-red-1,
.sometimes-colour-red-1 h1,
.sometimes-colour-red-1 h2 {
	/* 4 76 92 */
    color: #eb4438 !important;
    /* e53e32 is a bit darker/richer */
}
/* used on hearts on About page, at least */
.sometimes-colour-hearts-1 {
	/* 292 70 50 */
    color: rgba(0,0,0,0.75) !important;
}






/**
 * END OF sometimes.ca custom code
 */







/**
 * Content
 */

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	line-height: 1.2;	
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.9);
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	line-height: 1.2;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(22, 168, 217);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
    transition: opacity .5s;
}

[data-predefined-style="true"] bodycopy a:hover {
	opacity: 0.6;
    transition: none;
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	font-size: 2rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.9);
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] h2 {
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	font-weight: 200;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.9);
	font-size: 3.5rem;
	line-height: 1;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1.2;
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
}

[data-predefined-style="true"] small a {
	color: rgb(22, 168, 217);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(250, 250, 250) /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 5rem /*!main_margin*/;
	padding-bottom: 5rem /*!main_margin*/;
	padding-left: 5rem /*!main_margin*/;
	padding-right: 5rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 45rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 1px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
        margin-top: 1.2rem;
        margin-bottom: 0.0rem;
        font-size: 2.0rem;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.90);
        font-family: "Nitti Grotesk", Icons;
        font-style: normal;
        line-height: 1.0;
    }

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 10px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
	top: 3rem /*!site_menu_button*/;
	right: 3rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 30px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	background: rgba(20, 20, 20, 0.95);
    font-style: normal;
	font-weight: 200;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: 0.85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 36px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 2rem /*!shop_button*/;
	right: 2rem /*!shop_button*/;
}

#shop_button.text {
    font-size: 2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
    padding: 0;
    line-height: 1.2;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}


body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 40px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, .75);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 0.95) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.8rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 1px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}