//Vendor
@import "vendor/__vendor-dir";
/* = Table of Contents =

 * Base
 * Grouping
 * Layout
 * Typography
 * Page Specific
 * Media Queries
 * Print Styles
 */

/* = Base = */
a,
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
cite,
code,
dd,
div,
dl,
dt,
em,
fieldset,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
iframe,
img,
label,
li,
nav,
object,
ol,
p,
pre,
section,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul,
video {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
}

* {
    box-sizing: border-box;
}

html {
    color: #414141;
    font-family: "canada-type-gibson", "Gibson", Arial, sans-serif;
    font-weight: 300;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    background: #FFF;
    font-size: 18px;
    line-height: 1.5;
    min-width: 310px;
}

img {
    -ms-interpolation-mode: bicubic;
    max-width: 100%;
    vertical-align: middle;
}

::-moz-selection {
    background: #FF4500;
    color: #FFF;
    text-shadow: none;
}

::selection {
    background: #FF4500;
    color: #FFF;
    text-shadow: none;
}

nav ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

nav ul:before,
nav ul:after {
    content: "";
    display: table;
}

nav ul:after {
    clear: both;
}

/* = Grouping = */
.group:before,
.group:after,
.container:before,
.container:after {
    content: "";
    display: table;
}
.group:after,
.container:after {
    clear: both;
}

/* + Columns = */
.columns > hr {
    display: none;
    border: none;
}

@media only screen and (min-width: 600px) {
    .columns {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .columns > * {
        display: table-cell;
        vertical-align: top;
    }
    .columns > hr {
        display: table-cell;
        width: 1rem;
    }
}

/* = Layout = */
.container {
    padding-left: 16px;
    padding-right: 16px;
}

.header_container {
    width: 100%;
    z-index: 5;
}

header.primary {
    background: #FFF;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    padding: 16px;
    position: relative;
}

header.primary .branding {
    background: #FFF;
    max-width: 180px;
    position: relative;
    text-align: center;
    text-size: 2em;
}

header.primary .branding a {
    display: block;
    margin-top: 3px;
    transition: opacity 200ms linear;
}

header.primary .branding a:hover,
header.primary .branding a:focus {
    opacity: 0.7;
}

nav.primary ul {
    text-align: center;
}

nav.primary li {
    display: inline-block;
    font-size: 1.1em;
    margin-bottom: 0;
    margin-left: 0.35em;
}

nav.primary li:first-child {
    margin-left: 0;
}

nav.primary li a {
    color: #333;
    display: block;
}
nav.primary li a:hover,
nav.primary li a:focus {
    color: #005B9A;
}

nav.primary .active a {
    color: #005B9A;
}
nav.primary .active a:hover,
nav.primary .active a:focus {
    color: #117E99;
}

.heading {
    background: #071159;
    color: #FFF;
    overflow: hidden;
    width: 100%;
    z-index: 4;
}

body .heading h1:before {
    background-repeat: no-repeat;
    content: "";
    display: block;
    -webkit-filter: grayscale(0.4);
    filter: grayscale(0.4);
    height: 100%;
    left: -40px;
    opacity: 0.4;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.heading h1 {
    font-size: 2.8em;
    margin: 0 auto;
    max-width: 1100px;
    padding: 1em 16px;
    position: relative;
    z-index: 2;
    
}

.torso {
    margin-bottom: 3em;
}

.main .intro {
    padding-top: 1.4em;
}

.main h2 {
    border-top: 1px solid #E4E4E4;
    color: #FF4500;
    font-size: 2.2em;
    margin-bottom: 0.1em;
    margin-top: 1.4em;
    padding-top: 1.4em;
}

.main a:focus {
    background-color: rgba(3,148,212,0.2);
}

aside.primary {
    display: none;
}

aside.primary nav > ul > li {
    border-top: 1px solid #E5E5E5;
    margin-top: 1em;
    padding-top: 1em;
}

aside.primary nav li a {
    display: block;
}
aside.primary nav li a:focus {
    background-color: rgba(3,148,212,0.1);
    box-shadow: -4px 0 0 rgba(3,148,212,0.1);
}

aside.primary nav li a:active {
    background-color: transparent;
    box-shadow: none;
}


aside.primary nav > ul li a:hover {
    color: #555;
}

aside.primary nav > ul > li > a {
    font-size: 1.1em;
    font-weight: 400;
}

aside.primary nav ul ul {
    margin: 0;
}

aside.primary nav > ul li li a {
    color: #414141;
    font-size: 0.9em;
}

aside.primary nav > ul li li a:hover,
aside.primary nav > ul li li a:focus {
    color: #777;
}

aside.primary nav > ul li li {
    margin: 0;
}

aside.primary nav > ul > li:first-child {
    border-top: none;
}

footer.primary {
    background: #071159;
    color: #FFF;
    font-size: 0.9em;
    padding: 8em 0 12em;
}

footer.primary a {
    color: #f0f0f0;
    text-decoration: underline;
}

footer.primary img {
    display: inline-block;
    margin-bottom: 1.5em;
    max-width: 60%;
}

.footer_container {
    width: 33rem;
    padding-left: 3em;
    padding-right: 3em;
    float:left;   
    margin-top:-1em;
    margin-left:3em;
  }
.footer_container img {
  min-width: 50%;
  margin-top:-0.6em;
}

/* = Typography = */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    margin-bottom: 0.2em;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2.2em;
}

h3 {
    font-size: 1.7em;
    font-weight: 400;
}

h4 {
    font-size: 1.4em;
    font-weight: 400;
}

h5 {
    font-size: 1em;
    font-weight: 400;
}

h6 {
    font-size: 0.9em;
}

.intro {
    color: #181818;
    font-size: 1.6em;
    line-height: 1.4;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: 400;
}

i,
em {
    font-style: italic;
}

blockquote,
pre {
    color: #888;
    margin-bottom: 1.5em;
}

blockquote {
    border-left: 1px solid #EAEAEA;
    font-style: italic;
    margin-left: 2em;
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

pre,
code {
    font-family: Menlo, "Ubuntu Mono", Consolas, "Courier New", monospace;
    font-size: 0.9em;
}

pre {
    white-space: pre-wrap;
    white-space: pre;
    word-wrap: break-word;
}

p {
    margin-bottom: 1.5em;
}

hr {
    border: 0;
    border-top: 1px solid #BBB;
    display: block;
    height: 0;
    margin: 2em 0 3em;
    width: 100%;
}

a {
    color: #005B9A;
    text-decoration: none;
    transition: color 200ms;
}
a:hover,
a:focus {
    color: #FF4500;
    outline: 0;
}

.button {
    -webkit-appearance: none;
    background: linear-gradient(to bottom, #005B9A 0%,#0174B5 100%);
    background: #005B9A;
    border: none;
    border-radius: 3px;
    color: #FFF;
    display: inline-block;
    font-size: 18px;
    padding: 0.2em 0.8em;
    text-align: center;
}
.button:hover {
    background: #0084B8;
}

ol,
ul,
dl {
    margin-bottom: 1.5em;
}

dt {
    background: #727272;
    color: #FFF;
    display: inline-block;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.2em;
    padding: 0.3em 0.8em;
    position: relative;
    text-transform: uppercase;
}

dt:after {
    border-left: 14px solid transparent;
    border-top: 14px solid #727272;
    content: "";
    left: 12px;
    position: absolute;
    top: 2em;
}

dd {
    margin: 0 0 1.8em 2em;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

h2 + dl {
    margin-top: 0.8em;
}

h3 + dl {
    margin-top: 0.4em;
}

ul ul {
    margin: 0.5em 0 0;
}

ol,
ul {
    padding-left: 2em;
}

ol li,
ol dt,
ol dd,
ul li,
ul dt,
ul dd {
    margin-bottom: 0.5em;
}

ul {
    list-style: disc;
}

dt,
dd {
    vertical-align: top;
}


pre,
code {
    overflow: auto;
    white-space: pre;
    word-wrap: normal;
}


sup,
sub {
    font-size: 80%;
}

sup {
    vertical-align: top;
}

sub {
    vertical-align: bottom;
}


/* = Page Specific = */

/* == Homepage == */
body.homepage {
    background-attachment: fixed;
    background-color: #222;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                       rgba(0, 0, 0, 0.5)),url(/img/bg_home.jpg);
    
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: 100%;
    padding: 20px 0 100px;
    text-align: center;
}
body.homepage header.primary,
body.homepage footer.primary {
    background: none;
    box-shadow: none;
    padding: 0;
}
body.homepage header.primary .branding {
    background: none;
    float: none;
    margin: 0 auto;
    max-width: none;
    width: 90%;
}
body.homepage .branding a:hover,
body.homepage .branding a:focus {
    opacity: 0.5;
}

body.homepage .branding h1 {
    background: rgba(0,0,0,0.6);
    margin: 0 auto 0.6em;
    padding: 14px;
    width: 90%;
}
body.homepage h2.intro {
    color: #CCC;
    font-weight: 400;
    line-height: 1.4;
}
body.homepage nav.primary {
    float: none;
    margin: 8em auto 10em;
    width: 90%;
}
body.homepage nav.primary ul {
    float: none;
    text-align: center;
}
body.homepage nav.primary li {
    display: inline-block;
    margin-left: 0.8em;
    margin-top: 1em;
    vertical-align: top;
}
body.homepage nav.primary li:first-child {
    margin-left: 0;
}
body.homepage nav.primary li a {
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
body.homepage nav.primary li a,
.front,
.back {
    height: 300px;
    width: 274px;
}
body.homepage nav.primary li a:hover .flipper,
body.homepage nav.primary li a:focus .flipper {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flipper {
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: 400ms;
}
.front,
.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 0 6px 2px rgba(0,0,0,0.8);
    left: 0;
    position: absolute;
    top: 0;
}
.front {
    background: rgba(0,0,0,0.8);
    color: #FFF;
    padding: 50px 20px 40px;
    z-index: 2;
}
.back {
    background-color: rgba(0,0,0,0.8);
    color: #5E5E5E;
    padding: 20px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 4;
}
.front h3,
.back h3 {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 18px;
}
.back h3 {
    color: #FF4500;
    font-size: 24px;
}
.front img,
.back img {
    display: inline-block;
    margin-bottom: 15px;
}
.back p {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 0.8em;
}

body.homepage footer.primary {
    font-size: 13px;
    padding: 0;
    text-align: center;
    text-shadow: 1px 1px 12px #000;
}

body.homepage footer.primary img {
    display: inline-block;
    float: none;
    margin-bottom: 0.4em;
    width: 64px;
}


/* == headings == */

body.about .heading h1:before {
    background-image: url(/img/watermark_carpentryconnect.png);
    left: -100px;
}
body.in-person .heading h1:before {
    background-image: url(/img/watermark_carpentryconnect.png);
    left: -100px;
}
body.online .heading h1:before {
    background-image: url(/img/watermark_carpentryconnect.png);
    left: -100px;
}
body.case-studies .heading h1:before {
    background-image: url(/img/watermark_carpentryconnect.png);
    left: -100px;
}
body.contributing .heading h1:before {
    background-image: url(/img/watermark_carpentryconnect.png);
    left: -100px;
}
/* = Tables = */
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1.5em;
    width: 100%;
}
table caption {
    font-size: 0.75em;
    margin-bottom: 0.75em;
}
table td,
table th {
    padding: 0.5em 1em;
    text-align: left;
    vertical-align: top;
}
table th {
    background: #555;
    border: 1px solid #555;
    color: #FFF;
    font-weight: 400;
    text-transform: uppercase;
}
table td {
    border: 1px solid #E3E3E3;
}
table tr:nth-child(even) td {
    background: #F3F3F3;
}

td.supported,
table tr:nth-child(even) td.supported {
    background: #005B9A;
    color: white;
    font-weight: 400;
}

tr:first-child th:first-child {
    background: #444;
}


/* = Media Queries = */

@media only screen and (max-width: 479px) {
    body.homepage nav.primary {
        margin: 2em auto;
    }
    nav.primary li,
    body.homepage nav.primary li {
        display: block;
        float: none;
        margin-bottom: 0.8em;
        margin-left: 0;
        text-align: center;
    }
    body.homepage nav.primary li a,
    .front {
        height: auto;
        position: static;
        width: 100%;
    }
    body.homepage nav.primary li a:hover .flipper {
        -webkit-transform: none;
        transform: none;
    }
    .front {
        padding: 1em 0;
    }
    .front h3 {
        margin: 0;
    }
    .front img,
    .back {
        display: none;
    }
}
@media only screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }

    header.primary .branding {
        float: left;
        margin-bottom: 0;
    }

    nav.primary {
        float: right;
    }

    .jump {
        display: none;
    }

    .container {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    }

    footer.primary p {
        margin: 0;
    }

    footer.primary img {
        margin-bottom: 1em;
    }

    body.homepage header.primary .branding {
        max-width: 480px;
    }

    body.homepage .branding h1 {
        max-width: 400px;
    }

    body.homepage h2.intro {
        font-size: 1.9em;
    }
}

@media only screen and (min-width: 1024px) {
    body {
        font-size: 18px;
    }

    .header_container {
        left: 0;
        position: absolute;
        top: 0;
    }

    header.primary {
        padding: 30px;
    }

    header.primary .branding a {
        display: block;
        margin-top: 3px;
    }

    .heading {
        height: 14em;
        padding: 0;
    }

    .heading h1 {
        font-weight: 3.5em;
        padding: 130px 30px;
    }

    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    nav.primary li {
        margin-left: 1.4em;
    }

    .torso {
        margin-bottom: 0;
        padding-bottom: 0;
        position: relative;
    }

    .main {
        margin-right: 270px;
        padding-bottom: 3em;
    }

    aside.primary {
        background: #FFF;
        box-shadow: -4px -4px 6px rgba(70,70,70,0.1);
        display: block;
        float: right;
        height: 100%;
        padding: 0 16px;
        position: absolute;
        right: 0;
        top: -24px;
        width: 250px;
    }

    footer.primary {
        text-align: left;
    }

    footer.primary img {
        display: block;
        float: left;
        margin-right: 2em;
    }

    body.homepage footer.primary {
        width: 100%;
    }
}


@media only screen and (min-height: 1000px) {
    body.homepage footer.primary {
    }
}

@media print {
    * {
        background: transparent !important;
        box-shadow: none !important;
        color: #000 !important;
        /* Black prints faster: h5bp.com/s */
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #888;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
    
    figure img { border: 1px solid #999999;}
    figure figcaption { font-style: italic; font-size: 0.85em; text-align: center;}

    .needscontent { 
    	padding: 1em;
    	margin: 1em;
    	font-size: bigger;
    	border: 4px dotted #fbce78;	
    }
    .needscontent:before {
    	content: "Needs Update: ";
    	font-style: italic;
    	font-weight: bold;
    	color: #41322f;				
    	background-color: #fbce78;	
    }
    .reading, .templates { 
    	margin: 0 3em 0 3em;
    	background-color: #F4ECE6;  
    	padding: 0.25em 1em 0.25em 1em;
    	color: #41322f;				
    }
}