/* These Styles get loaded on all pages */

/* Globals ----------------------------------------- */

html {
    color: hsl(0,0%,25%);
    /*font: 13px/1.231 'Gotham A', 'Gotham B', sans-serif;*/
    background-color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}



body {
    font-family: 'Gotham A', 'Gotham B', sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    background-color: #fff; /* Fixes resizing header gap glitch in FF */
    /* fixed nav */
    margin-top: 67px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

@media screen and (min-width: 1041px) {
    body {
        margin-top: 64px;
    }
}

main {
    /*flex: 1;*/
}

main {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}


p, ul, ol, pre, table, blockquote {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Sanitation */

b, strong, em, small, code {
  line-height: 1;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub {
  top: 0.4em;
}

a {
    text-decoration: none;
    color: hsl(220,60%,60%);
}
a:hover {
    color: hsl(220,60%,70%);
}
a:active {
    color: hsl(220,60%,50%);
}

strong, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

hr {
    margin: 4em 33%;
    border: none;
    border-bottom: 1px dashed #999;
}

h1,
.title,
.title-x,
.alpha {
    font-size: 2.8125em;
    line-height: 1.066666666em;
    margin-top: 1.06666667em;
    margin-bottom: 0.53333333em;
    /*font-size: 2.4em;*/
    /*line-height: 1.2;*/
    font-weight: 300;
}

h2,
.sub-title,
.title-xx,
.beta {
    font-size: 2em;
    line-height: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    /*font-size: 2em;*/
    /*line-height: 1.2;*/
    font-weight: 300;
}

h3,
.title-xxx,
.gamma {
    font-size: 1.4375em;
    line-height: 1.043478261em;
    margin-top: 1.04347826em;
    margin-bottom: 1.04347826em;
    /*font-weight: 400;*/
    /*font-size: 1.4em;*/
    /*line-height: 1.2;*/
}

h4,
.delta {
    font-size: 1em;
    line-height: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    font-weight: 400;
}

p {
    letter-spacing: .1px;
}

.hasIframe {
    /* Adds scroll support for iFrames on iOS */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.nowrap {
    white-space: nowrap;
}

blockquote,
.quote {
    margin: 1.5em 0;
    padding: 0 15%;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    color: hsl(0, 0%, 30%);
}

.quote-source {
    color: hsl(0, 0%, 60%);
}

.subtitle {
    font-size: 1.4375em;
    line-height: 1.5em;
    font-weight: 300;
}

/* $fix - lets just make one title class */

.section-title {
    margin-top: 0;
}

/****************

Helpers

****************/

.center {
    text-align: center;
}

/* clearfix */

.cf:before,
.cf:after {
    content: '';
    display: table;
}

.cf:after {
    clear: both;
}


@media all and (max-width: 700px) {
    .title-x {
        font-size: 1.6em;
    }

    .title-xxx {
        font-size: 1em;
    }
    blockquote,
    .quote {
        padding: 0;
        font-size: 1em;
    }
}

/****************

Colors

*****************/

.bg-grey {
    background: rgba(0,0,0,.1);
}

.bg-light {
    background: rgba(255,255,255,.75);
}



/* Sections ----------------------------------------- */

section {
    position: relative;
    /*padding: 6em 40px;*/
    padding: 30px 0;
}


.wrapper {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 1080px;
    padding: 0 15px;
    margin: 0 auto;
}

@media all and (min-width: 701px) {
    .wrapper { padding: 0 30px; }

    section { padding: 60px 0; }
}


/* Page ----------------------------------------- */

@media all and (max-width: 700px) {

    .page {
        background: url(../images/bg-light-small.jpg) no-repeat center top;
        background-size: 100% auto;
    }

}

@media all and (min-width: 701px) {

    .page {
        background: url(../images/bg-light.jpg) no-repeat center top;
        background-size: 100% auto;
    }

}



/* Intro ----------------------------------------- */

.intro .title-x {
    text-align: center;
    margin: 0 0 0.3em 0;
}

.intro,
.intro .cols > .col {
    /*font-size: 18px;*/ /* TODO: refactor */
}


/* Content ----------------------------------------- */

.content,
.content .cols > .col {
    /*font-size: 14px;*/ /* TODO: refactor */
}

.content {
    margin: 0 8%;
}

.content-section {
    margin-bottom: 4em;
}

@media all and (max-width: 920px) {

    .content {
        margin: 0;
    }

    .content ul {
        padding-left: 1.2em;
    }

}




/* Gird ---------------------------------------------------------------------------------- */

.cols {
    font-size: 0; /* removes white-space but */
}
.cols > .col {
    display: inline-block;
    vertical-align: top;
    margin-right: 4%;
    font-size: 16px ;
}

.cols > .col:last-child {
    margin-right: 0;
}

.col-1-2 { width: 48%; }
.col-1-3 { width: 30.666%; }
.col-2-3 { width: 65.333%; }

.text-col-2 {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 1.5em;
       -moz-column-gap: 1.5em;
            column-gap: 1.5em;
}

@media all and (max-width: 700px) {
    .cols > .col {
        display: block;
        vertical-align: top;
    }
    .col-1-2,
    .col-1-3,
    .col-2-3  {
        width: 100%;
        margin-right: 0;
    }

    .text-col-2 {
        -webkit-column-count: auto;
           -moz-column-count: auto;
                column-count: auto;
    }
}


/* Components ---------------------------------------------------------------------------------- */


/* Bar (background is light grey) */

.bar {
    padding: 20px;
    border-top: 1px solid hsl(0,0%,99%);
    border-bottom: 1px solid hsl(0,0%,85%);
    text-align: center;
    background-color: hsl(0,0%,88%);
    background-image:         linear-gradient(top, hsl(0,0%,90%), hsl(0,0%,86%) );
}


/* Button ----------------------------------------- */

.button {
    display: inline-block;
    margin: 0 .5em;
    padding: .5em 1em;
    border-radius: 2em;
    border: 1px solid hsl(0,0%,80%);
}

.button:hover {
    background: hsla(0,0%,100%,.3);
}

.button:active {
    background: hsla(0,0%,0%,.05);
}

.button.disabled {
    opacity: .4;
    color: hsl(0,0%,50%);
    pointer-events: none;
}

/* Action Button ----------------------------------------- */

.button--action {
    display: inline-block;
    margin-left: 10px;
    padding: 0 20px;
    line-height: 36px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    border: 1px solid hsl(204, 65%, 50%);
    background-color: #479dd8;
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
}
.button--action:hover {
    color: #fff;
    background-color: hsl(204, 65%, 60%);
}
.button--action:focus {
    border-color: hsl(204, 65%, 40%);
    background-color: hsl(204, 65%, 60%);
}
.button--action:active {
    background-color: hsl(204, 65%, 36%);
}

.button--action[disabled] {
    color: hsl(0,0%,30%);
    text-shadow: none;
    border: 1px solid hsl(0,0%,80%);
    background: hsl(0,0%,90%);
    box-shadow: none;
}


/* Form ---------------------------------------------------------------------------------- */

.form {
    color: #6C6C6C;
    text-align: right;
    margin: 1em 0;
    font-size: 15px;
    line-height: 2;
}

.form label {
    display: inline-block;
    width: 32%;
    margin-right: 1em;
    vertical-align: top;
}

.form select {
    width: 48%;
    margin-bottom: 0.6em;
}

.form textarea {
    resize: vertical;
}

.form input,
.form textarea,
.form select[multiple] {
    width: 60%;
    box-sizing: border-box;
    margin-bottom: 0.6em;
    border-radius: 4px;
    border: 1px solid #BEBEBE;
    padding: 0.2em 0.4em;
}

.form input:focus,
.form textarea:focus,
.form select[multiple]:focus {
    outline: none;
    border-color: hsl(0,0%,30%);
}

.form input[type="submit"] {
    width: auto;
    margin-top: 0.4em;
    padding: 0.5em 1.5em;
    color: #fff;
    border: 1px solid hsl(204, 65%, 50%);
    background-color: #479dd8;
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
}

.form input[type="submit"]:hover {
    background-color: hsl(204, 65%, 60%);
}

.form input[type="submit"]:focus {
    border-color: hsl(204, 65%, 40%);
    background-color: hsl(204, 65%, 60%);
}

.form input[type="submit"]:active {
    background-color: hsl(204, 65%, 36%);
}


@media all and (max-width: 880px) {

    .form {
        text-align: left;
    }

    .form label {
        display: block;
        width: 100%;
        margin-right: 0;

        margin-top: 0.6em;
}

    .form select,
    .form textarea,
    .form select[multiple] {
        display: block;
        width: 100%;
    }

    .form input {
        display: block;
        width: 100%;
        margin: 0;
    }

    .form input[type="submit"] {
        display: block;
        width: 100%;
        margin: 0;
    }

}


/* Images ---------------------------------------------------------------------------------- */

.img {
    max-width: 100%;
}

.img-fill {
    width: 100%;
    vertical-align: top;
}

.img--float {
    float: left;
    margin: 0 10px 10px 0;
}

.img--33 {
    width: 33%;
}

.img--50 {
    width: 50%;
}

.img--66 {
    width: 66%;
}

.img--100 {
    width: 100%;
}

.img--montagejs {
    float: left;
    margin: 0 10px 10px 0;
    width: 60px;
}

.img--explore {
    float: left;
    margin: 0 10px 6px 0;
    width: 56px;
    border-radius: 28px;
}

/********************

Title

********************/

.title-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 6em;
}





/* 404 ---------------------------------------------------------------------------------- */

.title-404 {
    font-size: 8em;
    text-align: center;
    line-height: 0;
    color: hsl(0,0%,80%);
}