Removed hidden images from work section.

@import "{thriver:core-styles}/lib/index.less";
@import "{thriver:core-styles}/lib/styles/animate.less";

//Setup
@backgroundWork: saturate(@blue, 10%);
section.work{
    background-color: lighten(@gray, 5.5%);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+38,f2f2f2+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 38%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-size: 110%;
    @media @mobile{
        .shadowNone !important;
        padding-bottom:0px !important;
    }
    h2.sidebarTitle{display: none;}
    > .main{
        background-color:transparent;
        //.accelerate;
        //.flex;
        .workTextContainer{
            width: 620px;
            min-height: 543px;
            max-height: 543px;
            overflow: hidden;
            //.accelerate;
            //Truncation Gradient
            .backToTopWork{
                .buttonColor(@teal);

            }
            &:after{
                content: '';
                display: block;
                position: absolute;
                width: 100%;
                height: 50px;
                bottom: 40px;
                left: 0px;
                .truncatedTextGradient;
            }
        }
    }
    @media @mobile{opacity: 1 !important;}
    .workContent, .workNav, .workTertiary{
        display: block;
        vertical-align: top;
    }
}

.workReading section.work > .main .workTextContainer:after{display: none;}

//About SA
@media @mobile{section.work .sa.container{margin-bottom:40px; margin-top:40px;}}
section.work .sa details{
    text-align: center;
    margin: -26px 0px 0px 0px;
    summary{
        .buttonColor(@orange);
        display: inline-block;
        color: @white;
        .down{display: none;position: static;}
    }
    >div{
        //.insetBoxShadow(0px,0px,10px,0px,0.1);
        //.shadow(far);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        margin: 40px 0px 0px 0px;
        padding: 15px 40px 15px 40px;
        //width: 100%;
        background-color: darken(@white, 1%);
        text-align: left;
        .clearfix;
        .column{
            width: 30.5%;
            padding: 0px 2% 0px 2%;
            float: left;
            &:first-child{padding: 0px 2% 0px 0px;}
            &:last-child{padding: 0px 0px 0px 2%;}
        }
        p{
            .rw;
            .font(1.4,1.8,0,@normal,none);
            text-align: left;
            width: auto;
        }
        h2{
            //color: @white;
            //border-bottom: 2px solid darken(@white, 10%);
            padding: 0px 0px 0px 0px;
            color: @orange;
        }
        @media (max-width:945px){
            padding:20px;
            .column, .column:first-child, .column:last-child{
                width: 100%;
                padding: 10px 0px;
            }
        }
        @media @mobile{
            padding: 15px;
            .shadowNone;
            background: #f9f9f9;
            margin-left: -15px;
            margin-right: -15px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            h2{
                font-size: 115%;
                line-height: 115%;
            }
            p{
                .font(1.2,1.8,0,@normal,none);
            }
        }
    }
    &[open]{
        > div {animation: detailsopen 500ms 0ms 1 @easeDefault alternate;}
        summary{
            .down{display: inline-block;}
            .up{display: none;}
            &:after{
                .fa;
                content:"\f0d7";
                color:@orange;
                position: absolute;
                bottom: -29px;
                left: 50%;
                margin-left: -8px;
                .font(2.4,2.4,0,@light,none);
            }
        }
    }
}
//Nav Landing
section.work .workNav{width: 100%;}
section.work .workNav > ul{
    margin: 0px;
    .clearfix;
    width: 100%;
    text-align: center;
    @media (max-width:945px){
        padding-bottom: 60px;
    }
    @media @mobile{ padding-bottom: 0px;}
    > li {
        list-style: none;
        vertical-align: top;
        text-align: left;
        margin: 0px;
        //background-color: lighten(@lightBlue, 90%);
        //box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.15);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        width: 23.6%;
        @media (max-width:1100px){
            width:28%;
        }
        @media (max-width:865px){
            width:42%;
        }
        margin: 0 0.5% 1% 0.5%;
        display: inline-block;
        //min-height: 228px;
        .borderRadius(2px);
        overflow: hidden;
        @media @mobile{
            width:100%;
            margin: 0px;
            .borderRadius(0px);
            .shadowNone;
        }
        &:first-child{display: none;}
        i{display: none;}
        &:hover{
            //background-color: @white;
            //box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.15);
            > ul{background-color: rgba(255,255,255,1);}
        }
        > ul{
            margin: 0px;
            padding: 20px;
            .font(1.4,2.0,0.025,@light,none);
            background-color: rgba(250,250,250,1);
            min-height: 82px;
            @media @mobile{
                display: none;
                min-height: 0px;
                padding: 15px;
            }
            will-change:background;
            .trans(background-color @durationDefault @easeDefault 0ms);
            > li{
                display: inline;
                position: relative;
                margin: 0px;
                &:after{
                    content: ',';
                    font-weight: @bold;
                }
                &:last-child:after{display: none;}
                a{
                    //.textButtonColor(darken(@blue, 10%));
                    position: relative;
                    //text-decoration: underline;
                    &:hover{
                        color: saturate(@blue, 80%);
                        color: @teal;
                    }
                }
                @media @mobile{
                    display: block;
                    &:after{display: none;}
                }
            }
        }
    }
    h2{
        display: block;
        text-align: left;
        margin: 0px;
        .font(2.4,2.4,0.025,@light,uppercase);
        a{
            display: block;
            color: @white;
            font-weight: @light;
            .buttonColor(#4b96b6);
            text-indent: 4px;
            white-space: nowrap;
            padding: 20px;
            @media @mobile{
                padding:20px 15px;
                font-weight: 600;
            }
        }
        @media @mobile{
             .font(1.6,1.6,0.025,600,uppercase);
        }
        span.fa{
            font-size: 19px;
            position: relative;
            top: -1px;
            left: 2px;
        }
        span.fa.down{display: none;}
        i{font-style: normal;text-transform: none;}
    }
    //Gradient Titles
    li h2 a{color: @white;}
    //li:first-child h2 a{.buttonColor(lighten(@backgroundWork, 21%));}
    li:nth-child(2) h2 a{.buttonColor(lighten(@backgroundWork, 19%));}
    li:nth-child(3) h2 a{.buttonColor(lighten(@backgroundWork, 17%));}
    li:nth-child(4) h2 a{.buttonColor(lighten(@backgroundWork, 15%));}
    li:nth-child(5) h2 a{.buttonColor(lighten(@backgroundWork, 13%));}
    li:nth-child(6) h2 a{.buttonColor(lighten(@backgroundWork, 11%));}
    li:nth-child(7) h2 a{.buttonColor(lighten(@backgroundWork, 9%));}
    li:nth-child(8) h2 a{.buttonColor(lighten(@backgroundWork, 7%));}
    li:nth-child(9) h2 a{.buttonColor(lighten(@backgroundWork, 5%));}
    li:nth-child(10) h2 a{.buttonColor(lighten(@backgroundWork, 3%));}
    //Interior Links
    li:nth-child(10) a{.textButtonColor(darken(@backgroundWork, 21%));}
    li:nth-child(9) a{.textButtonColor(darken(@backgroundWork, 19%));}
    li:nth-child(8) a{.textButtonColor(darken(@backgroundWork, 17%));}
    li:nth-child(7) a{.textButtonColor(darken(@backgroundWork, 15%));}
    li:nth-child(6) a{.textButtonColor(darken(@backgroundWork, 13%));}
    li:nth-child(5) a{.textButtonColor(darken(@backgroundWork, 11%));}
    li:nth-child(4) a{.textButtonColor(darken(@backgroundWork, 9%));}
    li:nth-child(3) a{.textButtonColor(darken(@backgroundWork, 7%));}
    li:nth-child(2) a{.textButtonColor(darken(@backgroundWork, 5%));}
    //li:first-child a{.textButtonColor(darken(@backgroundWork, 3%));}

    li:first-child h2 a{.textButtonColor(desaturate(@backgroundWork,30%));}
    li a:hover{text-decoration: underline;}
    //li h2 a{background-color: rgba(6,33,49,0.2) !important;color: @white !important;}
    li h2 a{color: @white !important;text-decoration: none !important;}

}

//Nav Open
.workActive section.work .workNav{
    width: 236px;
    min-height: 601px;
    float: left;
    padding: 36px 30px 30px 30px;
    @media (max-width:945px){
        padding:20px;
        width:200px;
    }
    h2.sidebarTitle{
        display: block;
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 22px;
        line-height: 2.2rem;
        letter-spacing: 0.25px;
        letter-spacing: 0.025rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #ffffff;
        margin: 2px 0px 16px 0px;
        padding: 0px 0px 0px 0px;
        zoom: 1;
        .opacity(0.7);
        text-align: left;
    }
    //media query temp for mobile UX flow
    //@media @mobile{display: none !important;}
    > ul{
        width: auto;
        margin: 0px;
        text-align: left;
        li:focus{ .shadowNone; }
        li h2 > a{
            background-color: transparent !important;
            padding: 6px 0px 15px 0px;
            margin: 0px;
            text-indent: 0px;
            .opacity(0.5);
            &:focus{ .shadowNone; }
        }
        @media @1024{width:220px;}
        @media (max-width:945px){
            width:200px;
            padding-bottom:0px;
        }
        > li.active h2 span.fa.down{display: inline;}
        > li.active h2 span.fa.up{display: none;}
        > li{
            width: auto;
            padding: 0px;
            margin: 0px;
            text-align: left;
            min-height: 0px;
            .shadowNone;
           // &:active{background-color: darken(@navy, 1.5%);}
            &.backToIndexWork{
                //.opacity(0.85);
                h2:after{display: none;}
                .fa{
                    display: inline-block !important;
                    font-size: 14px;
                    margin-right: 5px;
                }
            }
            list-style: none;
            display: block;
            .font(1.4,1.7,0.025,@normal,uppercase);
            margin: 0px;
            .textButtonColor(@white);
            cursor: pointer;
            .opacity(1);
            border-bottom: 2px solid transparent;
            //padding:20px 20px;
            .trans(opacity @durationDefault @easeDefault 0ms);
            &.active{
                .opacity(1);
                //border-bottom: 2px solid @gray;
                //border-bottom: 2px solid rgba(255,255,255,0.15);
            }
            .fa{display: none;}
            &:last-child{
                margin:0px;
            }
            //display: block;
            position: relative;
            //margin: 0px 12px 0px 12px;
            &:after {
                pointer-events: none;
                .trans(all 250ms ease);
            }
            h2{
                text-align: left;
                position: relative;
                display: block;
                a{.font(1.4,1.4,0.025,@normal,uppercase);}
                .fa{display: none !important;}
                &:after {
                    content: '';
                    position: absolute;
                    top: 100%;
                    left: 0px;
                    width: 100%;
                    height: 2px;
                    background-color: @white;
                    top: 83%;
                    //width: ~'calc(100% - 20px)';
                    width: 100%;
                    .opacity(0);
                    .trans(all 250ms ease);
                    .transform(translate(0px,10px));
                    transition: opacity @durationDefault @easeDefault 0ms, transform 350ms @easeDefault 0ms;
                }
                &:hover {
                    a{
                        .trans(opacity @durationDefault @easeDefault 100ms);
                        .opacity(1);
                    }
                    &:after {
                        transition: opacity @durationDefault @easeDefault 100ms, transform 350ms @easeDefault 100ms;
                        .opacity(1);
                        .transform(translate(0px,0px));
                    }
                }
            }
            ul{
                .opacity(0);
                transition: max-height 300ms @easeDefault 100ms, opacity 200ms linear 0ms !important;
            }
            &.active{
                h2:after{
                    .opacity(1);
                    .transform(translate(0px,0px));
                    //background-color: @teal;
                }
                ul{
                    animation: workaccordion 1000ms 0ms 1 @easeDefault alternate;
                    .opacity(1);
                }
            }
            > a{
                margin-bottom: 0px;
                padding:16px 0px 16px 0px;
                text-decoration: none;
                font-weight: @normal;
                &:after{
                    content:"\f0da";
                    .fa;
                    position: relative;
                    top: -2px;
                    margin-left: 5px;
                    font-size: 14px;
                }
            }
            .icon, > a{
                display: inline-block;
                height: auto;
                width: auto;
                background-color: transparent;
                color: @white;
                //.font(2.0,2.0,0,@light,none);
                .opacity(1);
                .transform(scale(1,1));
                //.accelerate;
                //@media @1024{.font(1.6,16.0,0,@light,none);}
            }
            .icon{margin: 0px 20px 0px 5px;}
            .icon{display: none;}
            > ul{
                max-height: 0px;
                padding: 0px;
                overflow: hidden;
                //background-color: darken(@navy, 3%);
                min-height: 0px;
                background-color: transparent;
                text-align: left;
                .trans(all 500ms @easeDefault 0ms);
                padding-left: 15px;
                //padding-top: 10px;
                @media (min-width:768px){ &>li:nth-child(2){padding-top: 5px;} }
                >li{
                    display: block;
                    //background-color: transparent !important;
                    &:after{display: none;}
                    .shadowNone;
                    margin: 0px;
                    padding: 0px;
                    > a{
                        padding: 0px;
                        //background-color: transparent !important;
                        display: block;
                        text-decoration: none;
                        text-indent: 0px;
                        .font(1.4,1.8,0.05,@normal,none);
                        padding: 5px 0px 5px 0px;
                        color: @white;
                        .opacity(1);
                        &:hover{background-color: transparent !important;}
                        &:hover{
                            .opacity(1);
                            //background-color: darken(@navy,7%);
                            //text-decoration: none;
                        }
                        //&:active{background-color: darken(@teal, 2.5%);}
                        //&:first-child{padding-top: 14px;}
                        //&:last-child{padding-bottom: 14px;}
                    }
                    &.active > a{
                        //background-color: darken(@navy, 2%);
                        //&:hover, &:active{background-color: darken(@teal, 2.5%);}
                    }
                    &:last-child{padding-bottom: 15px;}
                }
            }
            //Active List Item
            &.active{
                h2 > a{
                    //background-color: lighten(@navy, 10%);
                    color: @white;
                    .opacity(1);
                }
                > ul{
                    //background-color: @navy;
                    max-height: 9999px;
                    .trans(all @durationDefault @easeDefault 0ms);
                    > li > a{
                        color: @white;
                        .trans(color 200ms @easeDefault 0ms);
                        &:hover{color: lighten(@yellow, 22%);}
                    }
                    > li.active a{
                        color: @yellow;
                    }
                }
            }
        }
    }
}

//Content Styles
section.work .main.container{
    padding: 0px 0px !important;
    @media (max-width:1180px){
        margin: 40px !important;
    }
    @media (max-width:945px){
        margin:0px !important;
        //.shadowNone !important;
    }
    .workContent{
        // Only show active content articles
        article { display: none; .clearfix; }
        article.active { display: block; }
        position: absolute; //forFadeOutAnimation
        display: none;
        background-color: @white;
        padding: 30px;
        .boxShadow(-11px,0px,5px,-6px,0.3);
        .opacity(0);
        @media (max-width:1100px){
            .shadowNone !important;
        }
        header{
            //border-bottom: 3px solid #ebf2f2;
            background: transparent;
            //color: @white;
            //padding: 12px 21px 0px 21px;
            @media @mobile{padding: 20px;}
            h2{
                margin: 0px;
                border: none;
                //color: @teal;
                color: @navy;
                border-bottom: 2px solid lighten(@lightBlue, 39%);
                padding-bottom: 12px;
                .font(2.8,3.2,0.025,@light,none);
                @media @mobile{.font(2.4,2.4,0.1,@light,none);}
                border-bottom: 2px solid #dce8e8;
                color: #062031;
                padding: 0px 10px 10px 0px;
                margin-bottom: 10px;
            }
            /*i{
                position: relative;
                top: 5px;
                margin-right: 16px;
                font-style: normal;
                color:@black;
                .font(5.4,5.4,0,@light,none);
                @media @mobile{
                    .font(2.4,2.4,0,@light,none);
                    top: 0px;
                }
            }*/
            i{display: none;}
            .print{ //Rework Me
                position: absolute;
                right: 40px;
                font-size: 19px;
                opacity: 0.5;
                margin-top: 28px;
                display: none;
                @media @mobile{
                    display: none;
                }
            }
        }
        .main{
            //width: 890px;
            //padding: 20px;
            ul{
                li{
                    margin: 10px 0px;
                    display: block;
                    font-weight: 600;
                    letter-spacing: 0.5px;
                    font-size: 14px;
                    //padding-left: 20px;
                    &:before{
                        content:'';
                        height: 6px;
                        width: 6px;
                        background-color: darken(@teal, 5%);
                        display: block;
                        margin-top: 8px;
                        margin-left: -20px;
                        position: absolute;
                        border-radius: 50%;
                    }
                }
            }
            //.flex;
            @media @mobile{padding: 20px;}
            .workInner, .workTextContainer{display: block;}
            .workTextContainer{
                //padding-right: 40px;
                @media @mobile{padding-right: 0px;}
                *:first-child{margin-top: 0px;}
            }
            .workTertiary{
                //display: none !important;
                //width: 200px;
                //position:absolute;
                position: static;
                //padding: 20px;
                //background-color: @altWhite2;
                //box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                //-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                border-bottom: 2px solid #dce8e8;
                margin: 0px 0px 15px 0px;
                padding: 0px 0px 9px 0px;
                .title{
                    display: inline-block;
                    padding: 0px 0px 5px 0px;
                    margin-bottom: 15px;
                    text-align: left;
                    border-bottom: 2px solid @lightBlue;
                    color: @darkBlue;
                    .font(2.0,2.0,0.025,@light,uppercase);
                }
                ul{
                    margin: 0px;
                    .columns(70px,3,30px);
                    li{
                        margin: 0px;
                        padding: 0px;
                        .font(1.4,1.8,0.025,@normal,none);
                        .avoidColumnSplit;
                        a{.textButtonColor(lighten(@navy, 12%));}
                        &:nth-child(even) a{.textButtonColor(lighten(@navy, 16%));}
                    }
                }
                ul li{
                    list-style: none;
                    &:before{display: none;}
                    a:before{
                        .fa;
                        content:"\f054";
                        margin: 0px;
                        padding: 0px;
                        position: absolute;
                        .borderRadius(0px);
                        background-color: transparent;
                        display: inline;
                        margin-left: -12px;
                        font-size: 12px;
                        font-weight: 100;
                    }
                    a{
                        padding: 5px 0px 6px 15px;
                        display: inline-block;
                        position: relative;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
        footer{
            position: absolute;
            text-align: center;
            background: @orange;
            width: 100%;
            margin-left: -30px;
            bottom:0px;
            .opacity(1);
            visibility: visible;
            .transform(translate(0px,0px));
            transition: visibility 0ms linear 300ms, opacity 300ms ease 0ms);
            //.shadow(closeUp);
            &:hover{background-color: darken(@orange, 5%);}
            button{
                .rw;
                display: block;
                width: 100%;
                height: 40px;
                padding: 10px 0px;
                text-align: center;
                color: @white;
                .font(1.6,1.6,0,@normal,uppercase);
                .shadowNone;
                span{
                    font-size: 12px;
                }
            }
        }
    }
}

//Active Work Object

//body.workReading section.work >main .workContent{height: 100vh;}
body.workActive section.work .main.container{
        //margin-top: 42px;
        //background-color: desaturate(@backgroundWork,35%);
        //.shadow(closeLeft);
        //max-width: 1056px;
        //box-shadow:0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.05);
        //-webkit-box-shadow:0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.05);

    //Needs to be moved
    .workContent{
        position: relative;
        box-shadow: -11px 0px 5px -6px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow:-11px 0px 5px -6px rgba(0, 0, 0, 0.2);
        min-height: 607px;
        .transform(translate(0px,0px));
        .opacity(1);
        display: block;
    }
    .workContent, li.backToIndexWork{display: block;}
    .workTertiary{
        display: block;
        @media @mobile{display: none;}
    }
    .workTextContainer{
        //table{.tableColor(@gray, @blueGray, @white);}
        //padding-right: 20px;
        //width: 661px;
        width: auto;
    }
}

//Tuncation Open
.workReading section.work > .main{
    .workTextContainer{
        max-height: 9999px;
        overflow: hidden;
        //&:after{display: none;}
    }
    .workContent footer.truncate{.opacity(0);visibility: hidden;pointer-events: none;}
}

section.work > .main{overflow: visible;}
section.work > .main .workTextContainer{
    will-change:min-height;
    .trans(max-height 500ms ease 0ms);
}
.workReadingAnimate{
    .workContent footer.truncate{.opacity(0);visibility: hidden;pointer-events: none;}
    section.work > .main .workTextContainer{max-height: 9999px;}
}

//Animations and Transitions
body section.work > .main{
    //max-width: 1016px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#296078+0,8299a3+100 */

//padding: 10px;
.borderRadius(2px);
//background-color: #f2f2f2;
    .workContent{overflow: hidden;}
}

body.workActive section.work > .main{
    .trans(opacity @durationDefault @easeDefault 0ms);
    //.accelerate;
    will-change:opacity,transform;
    overflow: hidden;
    transform-origin: 50% 25%;
    //max-width: 1016px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    @media (max-width:945px){
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.11);
        -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.11);
    }
    animation: workmain 350ms 0ms 1 cubic-bezier(0.860, 0.000, 0.070, 1.000) alternate;
}

body section.work > .main{
    transition: background-color 100ms ease 0ms, opacity @durationDefault @easeDefault 0ms;
}

//Work Out
body.workFadeIn section.work > .main{
        will-change:opacity,transform;
        animation: workfadein 350ms 0ms 1 cubic-bezier(0.860, 0.000, 0.070, 1.000) alternate;
}

body.workBack section.work > .main{
    .workNav > ul > li{opacity: 1;}
    animation: workfadeinend 300ms 0ms 1 @easeDefault alternate !important;
    .opacity(1);
}

section.work .workNav > ul > li:first-child{
    margin-left: 25px;
}

section.work .workNav > ul > li:nth-child(3){
    margin-right: 25px;
}

body.workActive section.work .workNav > ul > li:first-child, section.work .workNav > ul > li:nth-child(3){
    margin-left: 0px;
    margin-right: 0px;
}

body.workFadeIn section.work .workNav > ul > li{
    //display: none;
    &.active{
        .opacity(1);
        transform-origin:50% 50%;
        will-change:opacity,transform;
        .scale(3,3);
        .opacity(0);
        transition: opacity 175ms @easeDefault 0ms, transform 300ms @easeDefault 0ms;
        > ul, a.toggle{
            //.opacity(0);
            //will-change:opacity;
            .trans(opacity 150ms ease-out 0ms);
        }
    }
}

body.workFadeOut section.work > .main{
    .opacity(0);
    .trans(opacity 175ms @easeDefault 0ms);
}

body section.work > .main{
    .opacity(1);
    .trans(opacity 505ms @easeDefault 0ms);
}

/*body.workActive section.work .workNav > ul > li{
    .scale(1,1);
    > ul, a.toggle{.opacity(1);}
}*/

//Work Back Out
body.workBack section.work .workNav > ul > li{
    transform-origin:50% 25%;
    will-change:opacity;
    .opacity(0);
    transition: opacity 300ms ease-out 150ms, transform 250ms ease-out 150ms;
}

body.openNavItem.workActive section.work .workNav > ul > li.active > ul{
   .noAnimation;
    .opacity(1);
}

section.work .workContent article{
    .opacity(0) !important;
    .trans(opacity 300ms ease 0ms) !important;
    animation: workcontentout 1500ms 0ms 1 @easeDefault alternate !important;
}

section.work .workContent article.active{
    .opacity(1) !important;
    animation: workcontentin 400ms 0ms 1 ease alternate !important;
}

.workActive section.work > .main{
    background-color: @blue;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4097bc+0,30728f+100 */
    background: rgb(64,151,188); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(64,151,188,1) 0%, rgba(48,114,143,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(64,151,188,1) 0%,rgba(48,114,143,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(64,151,188,1) 0%,rgba(48,114,143,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4097bc', endColorstr='#30728f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

//Mobile Context
@media @mobile{
    section.work{}
    .workActive section.work{
        //Navigation
        .workNav{
            .transform(translate(0%,0px));
            .trans(all 350ms ease-out 0ms);
            width:100%;
            padding:0px;
            min-height: 0px;
            height:auto;
            overflow: auto;
            visibility: visible;
            opacity: 1;
            > .sidebarTitle{display: none !important;}
            > ul{
                padding: 15px;
                width: auto;
                &, >li, >li>ul{
                animation-duration: 0ms !important;
                transition-duration: 0ms !important;
                transition-delay:0ms !important;
                animation-delay:0ms !important;
                .trans(none) !important;
                >li a{
                    padding: 10px 0px;
                }
                }
                >li >ul{display: block;}

                >li.backToIndexWork a{
                    padding: 20px 10px;
                    background: rgba(0,0,0,0.1) !important;
                    opacity: 1;
                    margin-bottom: 20px;
                }
            }
        }
        //Content
        .workContent{
            display: none !important;
            header{
                padding: 0px !important;
            }
            footer{ margin-left: -15px !important;}
            padding:15px !important;
            .transform(translate(0px,100%)) !important;
            opacity: 0 !important;
            .trans(all 350ms ease 0ms) !important;
            > article > h2{
                display: block;
            }
            .main{padding:0px !important;}
            .backToPrevious{
                padding: 20px 10px;
                background: @teal;
                color:@white;
                opacity: 1;
                margin-bottom: 20px;
                font-size: 14px;
                font-size: 1.4rem;
                line-height: 14px;
                line-height: 1.4rem;
                letter-spacing: 0.25px;
                letter-spacing: 0.025rem;
                font-weight: 600;
                text-transform: uppercase;
                display: block;

            }
        }
    }
    .workActive.mobile-article-open section.work{
        .workNav{
            height:0px;
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
        }
        .workContent{
            display: block !important;
            .transform(translate(0px,0%)) !important;
            opacity: 1 !important;
        }
    }
}

main section.work h2.sidebarTitle{
    display: block;
    text-align: center;
    font-weight: 300;
    border-bottom: 2px solid #eee;
    margin: 20px 40px;
    padding-bottom: 10px;
}

@media @mobile{
    main section.work .workContent{
        height: 0px !important;
        overflow: hidden !important;
    }
}

section.work .workNav > ul > li > ul > li.mobile{
    display: none !important;
    @media @mobile{
        display: block !important;
    }
}

// Admin styles
h2.workContentAdmin {
    &:hover {
        border: 2px dashed;
    }
    cursor: pointer;
    min-height: 31px; // in case there's no text
}
section.workContent article button {
    color: #0d4668;
}
section.workContent textarea {
    width: 100%;
    height: 450px;
}

//
//
// EOGHAN:  You may want to move this somewhere
//
//
section.workContent header button {
    color: #0d4668;
    box-shadow: none;
    font-size: 20px;
    padding: 5px;
    cursor: pointer;
}

@import "{thriver:core-styles}/lib/index.less";
@import "{thriver:core-styles}/lib/styles/animate.less";

//Hide broken images for demo purposes
section.work img{display: none;}

//Setup
@backgroundWork: saturate(@blue, 10%);
section.work{
    background-color: lighten(@gray, 5.5%);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+38,f2f2f2+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 38%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 38%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-size: 110%;
    @media @mobile{
        .shadowNone !important;
        padding-bottom:0px !important;
    }
    h2.sidebarTitle{display: none;}
    > .main{
        background-color:transparent;
        //.accelerate;
        //.flex;
        .workTextContainer{
            width: 620px;
            min-height: 543px;
            max-height: 543px;
            overflow: hidden;
            //.accelerate;
            //Truncation Gradient
            .backToTopWork{
                .buttonColor(@teal);

            }
            &:after{
                content: '';
                display: block;
                position: absolute;
                width: 100%;
                height: 50px;
                bottom: 40px;
                left: 0px;
                .truncatedTextGradient;
            }
        }
    }
    @media @mobile{opacity: 1 !important;}
    .workContent, .workNav, .workTertiary{
        display: block;
        vertical-align: top;
    }
}

.workReading section.work > .main .workTextContainer:after{display: none;}

//About SA
@media @mobile{section.work .sa.container{margin-bottom:40px; margin-top:40px;}}
section.work .sa details{
    text-align: center;
    margin: -26px 0px 0px 0px;
    summary{
        .buttonColor(@orange);
        display: inline-block;
        color: @white;
        .down{display: none;position: static;}
    }
    >div{
        //.insetBoxShadow(0px,0px,10px,0px,0.1);
        //.shadow(far);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        margin: 40px 0px 0px 0px;
        padding: 15px 40px 15px 40px;
        //width: 100%;
        background-color: darken(@white, 1%);
        text-align: left;
        .clearfix;
        .column{
            width: 30.5%;
            padding: 0px 2% 0px 2%;
            float: left;
            &:first-child{padding: 0px 2% 0px 0px;}
            &:last-child{padding: 0px 0px 0px 2%;}
        }
        p{
            .rw;
            .font(1.4,1.8,0,@normal,none);
            text-align: left;
            width: auto;
        }
        h2{
            //color: @white;
            //border-bottom: 2px solid darken(@white, 10%);
            padding: 0px 0px 0px 0px;
            color: @orange;
        }
        @media (max-width:945px){
            padding:20px;
            .column, .column:first-child, .column:last-child{
                width: 100%;
                padding: 10px 0px;
            }
        }
        @media @mobile{
            padding: 15px;
            .shadowNone;
            background: #f9f9f9;
            margin-left: -15px;
            margin-right: -15px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            h2{
                font-size: 115%;
                line-height: 115%;
            }
            p{
                .font(1.2,1.8,0,@normal,none);
            }
        }
    }
    &[open]{
        > div {animation: detailsopen 500ms 0ms 1 @easeDefault alternate;}
        summary{
            .down{display: inline-block;}
            .up{display: none;}
            &:after{
                .fa;
                content:"\f0d7";
                color:@orange;
                position: absolute;
                bottom: -29px;
                left: 50%;
                margin-left: -8px;
                .font(2.4,2.4,0,@light,none);
            }
        }
    }
}
//Nav Landing
section.work .workNav{width: 100%;}
section.work .workNav > ul{
    margin: 0px;
    .clearfix;
    width: 100%;
    text-align: center;
    @media (max-width:945px){
        padding-bottom: 60px;
    }
    @media @mobile{ padding-bottom: 0px;}
    > li {
        list-style: none;
        vertical-align: top;
        text-align: left;
        margin: 0px;
        //background-color: lighten(@lightBlue, 90%);
        //box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.15);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.15), 3px 3px 5px 1px rgba(0,0,0,0.1);
        width: 23.6%;
        @media (max-width:1100px){
            width:28%;
        }
        @media (max-width:865px){
            width:42%;
        }
        margin: 0 0.5% 1% 0.5%;
        display: inline-block;
        //min-height: 228px;
        .borderRadius(2px);
        overflow: hidden;
        @media @mobile{
            width:100%;
            margin: 0px;
            .borderRadius(0px);
            .shadowNone;
        }
        &:first-child{display: none;}
        i{display: none;}
        &:hover{
            //background-color: @white;
            //box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.15);
            > ul{background-color: rgba(255,255,255,1);}
        }
        > ul{
            margin: 0px;
            padding: 20px;
            .font(1.4,2.0,0.025,@light,none);
            background-color: rgba(250,250,250,1);
            min-height: 82px;
            @media @mobile{
                display: none;
                min-height: 0px;
                padding: 15px;
            }
            will-change:background;
            .trans(background-color @durationDefault @easeDefault 0ms);
            > li{
                display: inline;
                position: relative;
                margin: 0px;
                &:after{
                    content: ',';
                    font-weight: @bold;
                }
                &:last-child:after{display: none;}
                a{
                    //.textButtonColor(darken(@blue, 10%));
                    position: relative;
                    //text-decoration: underline;
                    &:hover{
                        color: saturate(@blue, 80%);
                        color: @teal;
                    }
                }
                @media @mobile{
                    display: block;
                    &:after{display: none;}
                }
            }
        }
    }
    h2{
        display: block;
        text-align: left;
        margin: 0px;
        .font(2.4,2.4,0.025,@light,uppercase);
        a{
            display: block;
            color: @white;
            font-weight: @light;
            .buttonColor(#4b96b6);
            text-indent: 4px;
            white-space: nowrap;
            padding: 20px;
            @media @mobile{
                padding:20px 15px;
                font-weight: 600;
            }
        }
        @media @mobile{
             .font(1.6,1.6,0.025,600,uppercase);
        }
        span.fa{
            font-size: 19px;
            position: relative;
            top: -1px;
            left: 2px;
        }
        span.fa.down{display: none;}
        i{font-style: normal;text-transform: none;}
    }
    //Gradient Titles
    li h2 a{color: @white;}
    //li:first-child h2 a{.buttonColor(lighten(@backgroundWork, 21%));}
    li:nth-child(2) h2 a{.buttonColor(lighten(@backgroundWork, 19%));}
    li:nth-child(3) h2 a{.buttonColor(lighten(@backgroundWork, 17%));}
    li:nth-child(4) h2 a{.buttonColor(lighten(@backgroundWork, 15%));}
    li:nth-child(5) h2 a{.buttonColor(lighten(@backgroundWork, 13%));}
    li:nth-child(6) h2 a{.buttonColor(lighten(@backgroundWork, 11%));}
    li:nth-child(7) h2 a{.buttonColor(lighten(@backgroundWork, 9%));}
    li:nth-child(8) h2 a{.buttonColor(lighten(@backgroundWork, 7%));}
    li:nth-child(9) h2 a{.buttonColor(lighten(@backgroundWork, 5%));}
    li:nth-child(10) h2 a{.buttonColor(lighten(@backgroundWork, 3%));}
    //Interior Links
    li:nth-child(10) a{.textButtonColor(darken(@backgroundWork, 21%));}
    li:nth-child(9) a{.textButtonColor(darken(@backgroundWork, 19%));}
    li:nth-child(8) a{.textButtonColor(darken(@backgroundWork, 17%));}
    li:nth-child(7) a{.textButtonColor(darken(@backgroundWork, 15%));}
    li:nth-child(6) a{.textButtonColor(darken(@backgroundWork, 13%));}
    li:nth-child(5) a{.textButtonColor(darken(@backgroundWork, 11%));}
    li:nth-child(4) a{.textButtonColor(darken(@backgroundWork, 9%));}
    li:nth-child(3) a{.textButtonColor(darken(@backgroundWork, 7%));}
    li:nth-child(2) a{.textButtonColor(darken(@backgroundWork, 5%));}
    //li:first-child a{.textButtonColor(darken(@backgroundWork, 3%));}

    li:first-child h2 a{.textButtonColor(desaturate(@backgroundWork,30%));}
    li a:hover{text-decoration: underline;}
    //li h2 a{background-color: rgba(6,33,49,0.2) !important;color: @white !important;}
    li h2 a{color: @white !important;text-decoration: none !important;}

}

//Nav Open
.workActive section.work .workNav{
    width: 236px;
    min-height: 601px;
    float: left;
    padding: 36px 30px 30px 30px;
    @media (max-width:945px){
        padding:20px;
        width:200px;
    }
    h2.sidebarTitle{
        display: block;
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 22px;
        line-height: 2.2rem;
        letter-spacing: 0.25px;
        letter-spacing: 0.025rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #ffffff;
        margin: 2px 0px 16px 0px;
        padding: 0px 0px 0px 0px;
        zoom: 1;
        .opacity(0.7);
        text-align: left;
    }
    //media query temp for mobile UX flow
    //@media @mobile{display: none !important;}
    > ul{
        width: auto;
        margin: 0px;
        text-align: left;
        li:focus{ .shadowNone; }
        li h2 > a{
            background-color: transparent !important;
            padding: 6px 0px 15px 0px;
            margin: 0px;
            text-indent: 0px;
            .opacity(0.5);
            &:focus{ .shadowNone; }
        }
        @media @1024{width:220px;}
        @media (max-width:945px){
            width:200px;
            padding-bottom:0px;
        }
        > li.active h2 span.fa.down{display: inline;}
        > li.active h2 span.fa.up{display: none;}
        > li{
            width: auto;
            padding: 0px;
            margin: 0px;
            text-align: left;
            min-height: 0px;
            .shadowNone;
           // &:active{background-color: darken(@navy, 1.5%);}
            &.backToIndexWork{
                //.opacity(0.85);
                h2:after{display: none;}
                .fa{
                    display: inline-block !important;
                    font-size: 14px;
                    margin-right: 5px;
                }
            }
            list-style: none;
            display: block;
            .font(1.4,1.7,0.025,@normal,uppercase);
            margin: 0px;
            .textButtonColor(@white);
            cursor: pointer;
            .opacity(1);
            border-bottom: 2px solid transparent;
            //padding:20px 20px;
            .trans(opacity @durationDefault @easeDefault 0ms);
            &.active{
                .opacity(1);
                //border-bottom: 2px solid @gray;
                //border-bottom: 2px solid rgba(255,255,255,0.15);
            }
            .fa{display: none;}
            &:last-child{
                margin:0px;
            }
            //display: block;
            position: relative;
            //margin: 0px 12px 0px 12px;
            &:after {
                pointer-events: none;
                .trans(all 250ms ease);
            }
            h2{
                text-align: left;
                position: relative;
                display: block;
                a{.font(1.4,1.4,0.025,@normal,uppercase);}
                .fa{display: none !important;}
                &:after {
                    content: '';
                    position: absolute;
                    top: 100%;
                    left: 0px;
                    width: 100%;
                    height: 2px;
                    background-color: @white;
                    top: 83%;
                    //width: ~'calc(100% - 20px)';
                    width: 100%;
                    .opacity(0);
                    .trans(all 250ms ease);
                    .transform(translate(0px,10px));
                    transition: opacity @durationDefault @easeDefault 0ms, transform 350ms @easeDefault 0ms;
                }
                &:hover {
                    a{
                        .trans(opacity @durationDefault @easeDefault 100ms);
                        .opacity(1);
                    }
                    &:after {
                        transition: opacity @durationDefault @easeDefault 100ms, transform 350ms @easeDefault 100ms;
                        .opacity(1);
                        .transform(translate(0px,0px));
                    }
                }
            }
            ul{
                .opacity(0);
                transition: max-height 300ms @easeDefault 100ms, opacity 200ms linear 0ms !important;
            }
            &.active{
                h2:after{
                    .opacity(1);
                    .transform(translate(0px,0px));
                    //background-color: @teal;
                }
                ul{
                    animation: workaccordion 1000ms 0ms 1 @easeDefault alternate;
                    .opacity(1);
                }
            }
            > a{
                margin-bottom: 0px;
                padding:16px 0px 16px 0px;
                text-decoration: none;
                font-weight: @normal;
                &:after{
                    content:"\f0da";
                    .fa;
                    position: relative;
                    top: -2px;
                    margin-left: 5px;
                    font-size: 14px;
                }
            }
            .icon, > a{
                display: inline-block;
                height: auto;
                width: auto;
                background-color: transparent;
                color: @white;
                //.font(2.0,2.0,0,@light,none);
                .opacity(1);
                .transform(scale(1,1));
                //.accelerate;
                //@media @1024{.font(1.6,16.0,0,@light,none);}
            }
            .icon{margin: 0px 20px 0px 5px;}
            .icon{display: none;}
            > ul{
                max-height: 0px;
                padding: 0px;
                overflow: hidden;
                //background-color: darken(@navy, 3%);
                min-height: 0px;
                background-color: transparent;
                text-align: left;
                .trans(all 500ms @easeDefault 0ms);
                padding-left: 15px;
                //padding-top: 10px;
                @media (min-width:768px){ &>li:nth-child(2){padding-top: 5px;} }
                >li{
                    display: block;
                    //background-color: transparent !important;
                    &:after{display: none;}
                    .shadowNone;
                    margin: 0px;
                    padding: 0px;
                    > a{
                        padding: 0px;
                        //background-color: transparent !important;
                        display: block;
                        text-decoration: none;
                        text-indent: 0px;
                        .font(1.4,1.8,0.05,@normal,none);
                        padding: 5px 0px 5px 0px;
                        color: @white;
                        .opacity(1);
                        &:hover{background-color: transparent !important;}
                        &:hover{
                            .opacity(1);
                            //background-color: darken(@navy,7%);
                            //text-decoration: none;
                        }
                        //&:active{background-color: darken(@teal, 2.5%);}
                        //&:first-child{padding-top: 14px;}
                        //&:last-child{padding-bottom: 14px;}
                    }
                    &.active > a{
                        //background-color: darken(@navy, 2%);
                        //&:hover, &:active{background-color: darken(@teal, 2.5%);}
                    }
                    &:last-child{padding-bottom: 15px;}
                }
            }
            //Active List Item
            &.active{
                h2 > a{
                    //background-color: lighten(@navy, 10%);
                    color: @white;
                    .opacity(1);
                }
                > ul{
                    //background-color: @navy;
                    max-height: 9999px;
                    .trans(all @durationDefault @easeDefault 0ms);
                    > li > a{
                        color: @white;
                        .trans(color 200ms @easeDefault 0ms);
                        &:hover{color: lighten(@yellow, 22%);}
                    }
                    > li.active a{
                        color: @yellow;
                    }
                }
            }
        }
    }
}

//Content Styles
section.work .main.container{
    padding: 0px 0px !important;
    @media (max-width:1180px){
        margin: 40px !important;
    }
    @media (max-width:945px){
        margin:0px !important;
        //.shadowNone !important;
    }
    .workContent{
        // Only show active content articles
        article { display: none; .clearfix; }
        article.active { display: block; }
        position: absolute; //forFadeOutAnimation
        display: none;
        background-color: @white;
        padding: 30px;
        .boxShadow(-11px,0px,5px,-6px,0.3);
        .opacity(0);
        @media (max-width:1100px){
            .shadowNone !important;
        }
        header{
            //border-bottom: 3px solid #ebf2f2;
            background: transparent;
            //color: @white;
            //padding: 12px 21px 0px 21px;
            @media @mobile{padding: 20px;}
            h2{
                margin: 0px;
                border: none;
                //color: @teal;
                color: @navy;
                border-bottom: 2px solid lighten(@lightBlue, 39%);
                padding-bottom: 12px;
                .font(2.8,3.2,0.025,@light,none);
                @media @mobile{.font(2.4,2.4,0.1,@light,none);}
                border-bottom: 2px solid #dce8e8;
                color: #062031;
                padding: 0px 10px 10px 0px;
                margin-bottom: 10px;
            }
            /*i{
                position: relative;
                top: 5px;
                margin-right: 16px;
                font-style: normal;
                color:@black;
                .font(5.4,5.4,0,@light,none);
                @media @mobile{
                    .font(2.4,2.4,0,@light,none);
                    top: 0px;
                }
            }*/
            i{display: none;}
            .print{ //Rework Me
                position: absolute;
                right: 40px;
                font-size: 19px;
                opacity: 0.5;
                margin-top: 28px;
                display: none;
                @media @mobile{
                    display: none;
                }
            }
        }
        .main{
            //width: 890px;
            //padding: 20px;
            ul{
                li{
                    margin: 10px 0px;
                    display: block;
                    font-weight: 600;
                    letter-spacing: 0.5px;
                    font-size: 14px;
                    //padding-left: 20px;
                    &:before{
                        content:'';
                        height: 6px;
                        width: 6px;
                        background-color: darken(@teal, 5%);
                        display: block;
                        margin-top: 8px;
                        margin-left: -20px;
                        position: absolute;
                        border-radius: 50%;
                    }
                }
            }
            //.flex;
            @media @mobile{padding: 20px;}
            .workInner, .workTextContainer{display: block;}
            .workTextContainer{
                //padding-right: 40px;
                @media @mobile{padding-right: 0px;}
                *:first-child{margin-top: 0px;}
            }
            .workTertiary{
                //display: none !important;
                //width: 200px;
                //position:absolute;
                position: static;
                //padding: 20px;
                //background-color: @altWhite2;
                //box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                //-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                border-bottom: 2px solid #dce8e8;
                margin: 0px 0px 15px 0px;
                padding: 0px 0px 9px 0px;
                .title{
                    display: inline-block;
                    padding: 0px 0px 5px 0px;
                    margin-bottom: 15px;
                    text-align: left;
                    border-bottom: 2px solid @lightBlue;
                    color: @darkBlue;
                    .font(2.0,2.0,0.025,@light,uppercase);
                }
                ul{
                    margin: 0px;
                    .columns(70px,3,30px);
                    li{
                        margin: 0px;
                        padding: 0px;
                        .font(1.4,1.8,0.025,@normal,none);
                        .avoidColumnSplit;
                        a{.textButtonColor(lighten(@navy, 12%));}
                        &:nth-child(even) a{.textButtonColor(lighten(@navy, 16%));}
                    }
                }
                ul li{
                    list-style: none;
                    &:before{display: none;}
                    a:before{
                        .fa;
                        content:"\f054";
                        margin: 0px;
                        padding: 0px;
                        position: absolute;
                        .borderRadius(0px);
                        background-color: transparent;
                        display: inline;
                        margin-left: -12px;
                        font-size: 12px;
                        font-weight: 100;
                    }
                    a{
                        padding: 5px 0px 6px 15px;
                        display: inline-block;
                        position: relative;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
        footer{
            position: absolute;
            text-align: center;
            background: @orange;
            width: 100%;
            margin-left: -30px;
            bottom:0px;
            .opacity(1);
            visibility: visible;
            .transform(translate(0px,0px));
            transition: visibility 0ms linear 300ms, opacity 300ms ease 0ms);
            //.shadow(closeUp);
            &:hover{background-color: darken(@orange, 5%);}
            button{
                .rw;
                display: block;
                width: 100%;
                height: 40px;
                padding: 10px 0px;
                text-align: center;
                color: @white;
                .font(1.6,1.6,0,@normal,uppercase);
                .shadowNone;
                span{
                    font-size: 12px;
                }
            }
        }
    }
}

//Active Work Object

//body.workReading section.work >main .workContent{height: 100vh;}
body.workActive section.work .main.container{
        //margin-top: 42px;
        //background-color: desaturate(@backgroundWork,35%);
        //.shadow(closeLeft);
        //max-width: 1056px;
        //box-shadow:0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.05);
        //-webkit-box-shadow:0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.05);

    //Needs to be moved
    .workContent{
        position: relative;
        box-shadow: -11px 0px 5px -6px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow:-11px 0px 5px -6px rgba(0, 0, 0, 0.2);
        min-height: 607px;
        .transform(translate(0px,0px));
        .opacity(1);
        display: block;
    }
    .workContent, li.backToIndexWork{display: block;}
    .workTertiary{
        display: block;
        @media @mobile{display: none;}
    }
    .workTextContainer{
        //table{.tableColor(@gray, @blueGray, @white);}
        //padding-right: 20px;
        //width: 661px;
        width: auto;
    }
}

//Tuncation Open
.workReading section.work > .main{
    .workTextContainer{
        max-height: 9999px;
        overflow: hidden;
        //&:after{display: none;}
    }
    .workContent footer.truncate{.opacity(0);visibility: hidden;pointer-events: none;}
}

section.work > .main{overflow: visible;}
section.work > .main .workTextContainer{
    will-change:min-height;
    .trans(max-height 500ms ease 0ms);
}
.workReadingAnimate{
    .workContent footer.truncate{.opacity(0);visibility: hidden;pointer-events: none;}
    section.work > .main .workTextContainer{max-height: 9999px;}
}

//Animations and Transitions
body section.work > .main{
    //max-width: 1016px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#296078+0,8299a3+100 */

//padding: 10px;
.borderRadius(2px);
//background-color: #f2f2f2;
    .workContent{overflow: hidden;}
}

body.workActive section.work > .main{
    .trans(opacity @durationDefault @easeDefault 0ms);
    //.accelerate;
    will-change:opacity,transform;
    overflow: hidden;
    transform-origin: 50% 25%;
    //max-width: 1016px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    @media (max-width:945px){
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.11);
        -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.11);
    }
    animation: workmain 350ms 0ms 1 cubic-bezier(0.860, 0.000, 0.070, 1.000) alternate;
}

body section.work > .main{
    transition: background-color 100ms ease 0ms, opacity @durationDefault @easeDefault 0ms;
}

//Work Out
body.workFadeIn section.work > .main{
        will-change:opacity,transform;
        animation: workfadein 350ms 0ms 1 cubic-bezier(0.860, 0.000, 0.070, 1.000) alternate;
}

body.workBack section.work > .main{
    .workNav > ul > li{opacity: 1;}
    animation: workfadeinend 300ms 0ms 1 @easeDefault alternate !important;
    .opacity(1);
}

section.work .workNav > ul > li:first-child{
    margin-left: 25px;
}

section.work .workNav > ul > li:nth-child(3){
    margin-right: 25px;
}

body.workActive section.work .workNav > ul > li:first-child, section.work .workNav > ul > li:nth-child(3){
    margin-left: 0px;
    margin-right: 0px;
}

body.workFadeIn section.work .workNav > ul > li{
    //display: none;
    &.active{
        .opacity(1);
        transform-origin:50% 50%;
        will-change:opacity,transform;
        .scale(3,3);
        .opacity(0);
        transition: opacity 175ms @easeDefault 0ms, transform 300ms @easeDefault 0ms;
        > ul, a.toggle{
            //.opacity(0);
            //will-change:opacity;
            .trans(opacity 150ms ease-out 0ms);
        }
    }
}

body.workFadeOut section.work > .main{
    .opacity(0);
    .trans(opacity 175ms @easeDefault 0ms);
}

body section.work > .main{
    .opacity(1);
    .trans(opacity 505ms @easeDefault 0ms);
}

/*body.workActive section.work .workNav > ul > li{
    .scale(1,1);
    > ul, a.toggle{.opacity(1);}
}*/

//Work Back Out
body.workBack section.work .workNav > ul > li{
    transform-origin:50% 25%;
    will-change:opacity;
    .opacity(0);
    transition: opacity 300ms ease-out 150ms, transform 250ms ease-out 150ms;
}

body.openNavItem.workActive section.work .workNav > ul > li.active > ul{
   .noAnimation;
    .opacity(1);
}

section.work .workContent article{
    .opacity(0) !important;
    .trans(opacity 300ms ease 0ms) !important;
    animation: workcontentout 1500ms 0ms 1 @easeDefault alternate !important;
}

section.work .workContent article.active{
    .opacity(1) !important;
    animation: workcontentin 400ms 0ms 1 ease alternate !important;
}

.workActive section.work > .main{
    background-color: @blue;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4097bc+0,30728f+100 */
    background: rgb(64,151,188); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(64,151,188,1) 0%, rgba(48,114,143,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(64,151,188,1) 0%,rgba(48,114,143,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(64,151,188,1) 0%,rgba(48,114,143,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4097bc', endColorstr='#30728f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

//Mobile Context
@media @mobile{
    section.work{}
    .workActive section.work{
        //Navigation
        .workNav{
            .transform(translate(0%,0px));
            .trans(all 350ms ease-out 0ms);
            width:100%;
            padding:0px;
            min-height: 0px;
            height:auto;
            overflow: auto;
            visibility: visible;
            opacity: 1;
            > .sidebarTitle{display: none !important;}
            > ul{
                padding: 15px;
                width: auto;
                &, >li, >li>ul{
                animation-duration: 0ms !important;
                transition-duration: 0ms !important;
                transition-delay:0ms !important;
                animation-delay:0ms !important;
                .trans(none) !important;
                >li a{
                    padding: 10px 0px;
                }
                }
                >li >ul{display: block;}

                >li.backToIndexWork a{
                    padding: 20px 10px;
                    background: rgba(0,0,0,0.1) !important;
                    opacity: 1;
                    margin-bottom: 20px;
                }
            }
        }
        //Content
        .workContent{
            display: none !important;
            header{
                padding: 0px !important;
            }
            footer{ margin-left: -15px !important;}
            padding:15px !important;
            .transform(translate(0px,100%)) !important;
            opacity: 0 !important;
            .trans(all 350ms ease 0ms) !important;
            > article > h2{
                display: block;
            }
            .main{padding:0px !important;}
            .backToPrevious{
                padding: 20px 10px;
                background: @teal;
                color:@white;
                opacity: 1;
                margin-bottom: 20px;
                font-size: 14px;
                font-size: 1.4rem;
                line-height: 14px;
                line-height: 1.4rem;
                letter-spacing: 0.25px;
                letter-spacing: 0.025rem;
                font-weight: 600;
                text-transform: uppercase;
                display: block;

            }
        }
    }
    .workActive.mobile-article-open section.work{
        .workNav{
            height:0px;
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
        }
        .workContent{
            display: block !important;
            .transform(translate(0px,0%)) !important;
            opacity: 1 !important;
        }
    }
}

main section.work h2.sidebarTitle{
    display: block;
    text-align: center;
    font-weight: 300;
    border-bottom: 2px solid #eee;
    margin: 20px 40px;
    padding-bottom: 10px;
}

@media @mobile{
    main section.work .workContent{
        height: 0px !important;
        overflow: hidden !important;
    }
}

section.work .workNav > ul > li > ul > li.mobile{
    display: none !important;
    @media @mobile{
        display: block !important;
    }
}

// Admin styles
h2.workContentAdmin {
    &:hover {
        border: 2px dashed;
    }
    cursor: pointer;
    min-height: 31px; // in case there's no text
}
section.workContent article button {
    color: #0d4668;
}
section.workContent textarea {
    width: 100%;
    height: 450px;
}

//
//
// EOGHAN:  You may want to move this somewhere
//
//
section.workContent header button {
    color: #0d4668;
    box-shadow: none;
    font-size: 20px;
    padding: 5px;
    cursor: pointer;
}


Initial commit

Initial commit

.editor {
  &,
  .gutter {
    background-color: #FFFFFF;
    color: #555;
  }

  .invisible-character,
  .indent-guide {
    color: rgba(85, 85, 85, .2);
  }

  .gutter .line-number.fold,
  .gutter .line-number:after,
  .fold-marker:after {
    color: #e87b00;
  }

  .invisible {
    color: #555;
  }

  .selection .region {
    background-color: #e1e1e1;
  }

  &.is-focused {
    .cursor {
      border-color: #000;
    }

    .selection .region {
      background-color: #afc4da;
    }

    .line-number.cursor-line-no-selection,
    .line.cursor-line {
      background-color: rgba(255, 255, 134, 0.34);
    }
  }

  .comment {
    color: #999988;
    font-style: italic;
  }

  .string {
    color: #D14;
  }

  // String interpolation in Ruby, CoffeeScript, and others
  .source .string {
    .source,
    .meta.embedded.line {
      color: #5A5A5A;
    }

    .punctuation.section.embedded {
      color: #920B2D;

      .source {
        color: #920B2D;  // Required for the end of embedded strings in Ruby #716
      }
    }
  }

  .constant {
    &.numeric {
      color: #D14;
    }

    &.language {
      color: #606aa1;
    }

    &.character,
    &.other {
      color: #606aa1;
    }

    &.symbol {
      color: #990073;
    }

    &.numeric.line-number.find-in-files .match {
      color: rgba(143, 190, 0, 0.63);
    }
  }

  .variable {
    color: #008080;

    &.parameter {
      color: #606aa1;
    }
  }

  // Keywords
  .keyword {
    color: #222;
    font-weight: bold;

    &.unit {
      color: #445588;
    }

    &.special-method {
      color: #0086B3;
    }
  }

  .storage {
    color: #222;

    &.type {
      color: #222;
    }
  }

  .entity {
    &.name.class {
      text-decoration: underline;
      color: #606aa1;
    }

    &.other.inherited-class {
      text-decoration: underline;
      color: #606aa1;
    }

    &.name.function {
      color: #900;
    }

    &.name.tag {
      color: #008080;
    }

    &.other.attribute-name {
      color: #458;
      font-weight: bold;
    }

    &.name.filename.find-in-files {
      color: #E6DB74;
    }
  }

  .support {
    &.constant,
    &.function,
    &.type {
      color: #458;
    }

    &.class {
      color: #008080;
    }
  }

  .invalid {
    color: #F8F8F0;
    background-color: #00A8C6;

    &.deprecated {
      color: #F8F8F0;
      background-color: #8FBE00;
    }
  }

  .meta {
    &.structure.dictionary.json > .string.quoted.double.json,
    &.structure.dictionary.json > .string.quoted.double.json .punctuation.string {
      color: #000080;
    }

    &.structure.dictionary.value.json > .string.quoted.double.json {
      color: #d14;
    }

    &.diff,
    &.diff.header {
      color: #75715E;
    }

    &.function span {
      color: #990000;
      font-weight: bold;
    }
  }

  // CSS Styles
  .css {
    &.support.property-name {
      font-weight: bold;
      color: #333;
    }

    &.constant {
      color: #099;
    }
  }

  // Markdown
  .source.gfm {
    color: #444;
  }

  .gfm {
    .markup.heading {
      color: #111;
    }

    & .link {
      color: #888;
    }

    .variable.list {
      color: #888;
    }
  }

  .markdown {
    .paragraph {
      color: #444;
    }

    .heading {
      color: #111;
    }

    .link {
      color: #888;

      .string {
        color: #888;
      }
    }
  }
}

.bracket-matcher {
  background-color: #C9C9C9;
  opacity: .7;
  border-bottom: 0 none;
}


Change desktop font-size so it matches with landing page

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hevnly/asset-bazaar.git/'


Fix vertical position for IE and safari

Fix vertical position for IE and safari

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-theme-gluon-pjax.git/'


Fix text align on account wrapper

Fix text align on account wrapper

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-theme-gluon.git/'


happier paddings in siblings

happier paddings in siblings

fatal: unable to access 'https://github.com/montogeek/ponyfoo.git/': The requested URL returned error: 403


move login.less to apostrophe core

move login.less to apostrophe core

.login-page
{
  min-height: 100%;
  min-width: 100%;
  background-image: url('/images/alps.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.apos-login-container
{
  width: 100%;

  .login-logo-container
  {
    margin: 66px auto;
    width: 100px;
    width: 100px;

    .login-logo
    {
      background-image: url('/images/logo-apos-login.png');
      width: 100px;
      height: 100px;
      background-size: 100% 100%;
      // margin: 33px auto;
    }
  }

  .apos-login-description
  {
    p
    {
      max-width: 500px;
      margin: 15px auto 33px auto;
      text-align: center;
      .Chivo-Italic;

    }

  }

  .warning
  {
    color: #FF4043;
    padding: 10px;
    background-color: lighten(#FF4043, 30%);
    margin-bottom: 6px;
  }

  .apos-login
  {
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 5px 5px 5px rgba(33, 33, 33, 0.25);

    h4
    {
      text-transform: uppercase;
      text-align: center;
      color: #fff;
      margin-bottom: 0;
      background: #212121;
      padding: 15px;
    }

    .login-inputs
    {
      padding: 15px;
      .Chivo-Italic;

      input
      {
        padding: 6px;
        width: 100%;
        .Chivo-Italic(150%);
        border: 2px solid white;
        &:focus
        {
          outline: none;
          border: 2px solid @dark;
        }
      }

      .login-submit
      {
        margin-top: 15px;

        input[type=submit]
        {
          border: none;
          .Chivo-Italic;
          color: #b2b2b2;
          background: #4c4c4c;
          width: 50%;
          height: 40px;
          float: right;

          &:hover
          {
            background-color: darken(rgb(247,160,50), 10%);
            color: @dark;
          }
        }
      }
    }

    label
    {
      display: block;
      margin-bottom: 3px;
      margin-top: 10px;
    }
  }
}

error: pathspec 'public/css/login.less' did not match any file(s) known to git


Deletes a useless file

Deletes a useless file

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/studiomotio/www1.git/'


Add 'less' style to repo

Add 'less' style to repo

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/iamfelicio/Tutorial.git/'


Removed redundant color

Removed redundant color

/*
 * The MIT License (MIT)
 * Copyright (c) 2012 Dennis Kehrig. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

.CodeMirror {
	.cm-space.dk-leading, .cm-tab.dk-leading, .cm-space.dk-normal, .cm-tab.dk-normal {
		position: relative;
		&:before {
			content: "";
			position: absolute;
			display: block;
			height: 0;
			top: 50%;
			border-radius: 1ex;
			height: 0.2ex;
		}
	}
	.cm-space.dk-leading:before, .cm-space.dk-normal:before {
		left: 50%;
		width:        0.2ex;
		margin-left: -0.1ex;

		min-width:  2px;
		min-height: 2px;
	}
	.cm-tab.dk-leading:before, .cm-tab.dk-normal:before {
		left: 0.2ex;
		right: 0.2ex;

		min-width:  2px;
		min-height: 1px;
	}
	.cm-space.dk-leading:before, .cm-tab.dk-leading:before {
		background-color: #ccc;
	}
	.cm-space.dk-normal:before, .cm-tab.dk-normal:before {
		background-color: #ccc;
	}
}

/*
 * The MIT License (MIT)
 * Copyright (c) 2012 Dennis Kehrig. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

.CodeMirror {
	.cm-space.dk-leading, .cm-tab.dk-leading, .cm-space.dk-normal, .cm-tab.dk-normal {
		position: relative;
		&:before {
			content: "";
			position: absolute;
			display: block;
			height: 0;
			top: 50%;
			background-color: #ccc;
			border-radius: 1ex;
			height: 0.2ex;
		}
	}
	.cm-space.dk-leading:before, .cm-space.dk-normal:before {
		left: 50%;
		width:        0.2ex;
		margin-left: -0.1ex;

		min-width:  2px;
		min-height: 2px;
	}
	.cm-tab.dk-leading:before, .cm-tab.dk-normal:before {
		left: 0.2ex;
		right: 0.2ex;

		min-width:  2px;
		min-height: 1px;
	}
	.cm-space.dk-leading:before, .cm-tab.dk-leading:before {
		background-color: #ccc;
	}
	.cm-space.dk-normal:before, .cm-tab.dk-normal:before {
		background-color: #ccc;
	}
}


Small fix

Small fix

// MODALS
// ------

// Recalculate z-index where appropriate
.modal-open {
	.dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
	.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
	.popover       {  z-index: @zindexPopover  + @zindexModal; }
	.tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
}

@modal-base-width : 460px;
@modal-large-width : 660px;
@modal-big-width : 820px;

@modal-border-radius: 4px;

@modal-header-height : @nav-height;
@modal-footer-height : 58px;
@modal-subnav-height : @nav-height;

// Background
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: @zindexModalBackdrop;
	background-color: @black;
	// Fade for backdrop
	&.fade { opacity: 0; }
}

.modal-backdrop,
.modal-backdrop.fade.in {
	.opacity(30);
}

body:not(:-moz-handler-blocked) .modal{
	&.moz-scroll-fix{
		.modal-dialog{
			height: 100%;
		}
	}
}

// Base modal
.modal {
	position: fixed;
	left: 40px; right: 40px; top: 40px; bottom:40px;
	justify-content: center;
	align-items: flex-start;
	z-index: @zindexModal;
	display: none;
	&.in {
		display: flex !important;
	}
	.modal-dialog {
		width: @modal-base-width + 20px;
		display: flex;
		max-height: 100%;
	}
	.modal-content {
		flex: 1 1 auto;
		margin: 10px;
		.box-shadow(0 0 8px 2px rgba(0, 0, 0, 0.3));
		.modal-header, .modal-footer {
			flex: 0 0 auto;
			width: 100%;
			.border-box();
		}
		.modal-body {
			flex: 1 1 auto;
			width: 100%;
			.border-box();
		}
	}
        &.child-shadow {
            .modal-content {
                .box-shadow(0 0 0 0 rgb(0, 0, 0));
                > * {
                    .box-shadow(0 0 8px 2px rgba(0, 0, 0, 0.3));
                }
            }
        }
}
.modal-header {
	background-color: @white;
	padding: 9px 15px;
	border-bottom: 1px solid #e4e4e4;
	.box-sizing(border-box);
	height: @modal-header-height !important;
	.border-radius(@modal-border-radius @modal-border-radius 0 0);
	// Close icon
	.close {
		margin-top: 2px;
		border: 0;
		background: 0;
	}
	h3 {
		font-size: 18px;
		font-weight: 100;
	}
}

// Body (where all modal content resises)
.modal-body {
	background: @white;
	overflow-y: auto;
	//max-height: 400px;
	padding: 20px;
	position: relative;

	.nav-tabs {
		position: absolute;
		left: 0; right: 0; top: 0;
		border-bottom: 1px solid #e4e4e4;
		height: @modal-subnav-height;
		line-height: @modal-subnav-height - 20;
		padding: 0px 20px;
		.box-sizing(border-box);
		background: @sd-background;
	}
	.tab-content {
		margin-top: @modal-subnav-height;
	}

	.modal-screen {
		position: absolute;
		left: 0; right: 0; top: 0; bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 20px;
	}
}
// Remove bottom margin if need be
.modal-form {
	margin-bottom: 0;
}

// Footer (for actions)
.modal-footer {
	background-color: @white;
	padding: 14px 15px 15px;
	margin-bottom: 0;
	text-align: right; // right align buttons
	border-top: 1px solid #e4e4e4;
	.border-radius(0 0 @modal-border-radius @modal-border-radius);
	.clearfix(); // clear it in case folks use .pull-* classes on buttons

	// Properly space out buttons
	.btn + .btn {
		margin-left: 5px;
		margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
	}
	// but override that for button groups
	.btn-group .btn + .btn {
		margin-left: -1px;
	}
}

.modal {
	&.modal-strech {
		.modal-dialog {
			height: 100%;
		}
		.modal-body {
			.tab-content {
				position: absolute;
				left: 0; right: 0; bottom: 0;
				top: @modal-subnav-height;
				margin: 0;
				padding: 20px;
				overflow: auto;
				display: block;
				width: auto;
			}
		}
	}
	&.modal-static {
		.modal-dialog {
			height: auto;
			.modal-body {
				height: 400px;
				max-height: 400px;
				.tab-content {
					position: absolute;
					left: 0; right: 0; bottom: 0;
					top: @modal-subnav-height;
					margin: 0;
					padding: 20px;
					overflow: auto;
					display: block;
					width: auto;
				}
			}
		}
	}
	&.modal-body-grey {
		.modal-body {
			background: @sd-background;
		}
	}
	&.modal-large {
		.modal-dialog {
			width: @modal-large-width + 20px;
		}
	}
	&.modal-big {
		.modal-dialog {
			width: @modal-big-width + 20px;
		}
	}
	&.modal-responsive {
		.modal-dialog {
			width: 100%;
			height: 100%;
			.modal-body {
				max-height: none;
			}
		}
	}
	&.with-subnav {
		.modal-dialog {
			height: 100%;
			.modal-body {
			}
		}
	}
}

.mini-modal {
	padding: 20px;
	border: 1px solid #9ecbde;
	.border-box();
	.box-shadow(0 0 2px 0 #bbb);
	background: #fff;
	width: 300px;
	margin-left: -150px;
	&.inline {
		position: relative;
		width: auto;
		margin-left: auto;
	}
	.title {
		font-size: 11px;
		.text-semibold();
		color: @black;
		text-transform: uppercase;
	}
	.close {
		position: absolute;
		right: 12px;
		top: 8px;
	}
	.content {
		margin: 15px 0;
		.field {
			margin-bottom: 10px;
		}
	}
	.footer {
		text-align: right;
	}
}

// SPLIT POPUP (left sidebar)
// > used for upload avatar task
@split-modal-sidebar : 230px;
.split-popup {
	.sidebar {
		position: absolute;
		top:0; left: 0; bottom: 0;
		width: @split-modal-sidebar;
		border-right: 1px solid #ddd;
	}
	.main {
		position: absolute;
		top:0; right: 0; bottom: 0;
		left: @split-modal-sidebar;
	}
}

.activity-choose-modal {
	.border-radius(0px);
	width: 300px;
	margin-left: -150px;
	margin-top: -100px;
	background: none;
	.box-shadow(none);
	border: 0;
	.list-group {
		margin-bottom: 10px;
		.list-group-item {
			border-color: #c0c0c0;
			&:hover, &.active {
				background: #e0e0e0;
			}
		}
	}
	.btn {
		.box-shadow(inset 0 1px 0 #707070);
	}
}

// MODALS
// ------

// Recalculate z-index where appropriate
.modal-open {
	.dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
	.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
	.popover       {  z-index: @zindexPopover  + @zindexModal; }
	.tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
}

@modal-base-width : 460px;
@modal-large-width : 660px;
@modal-big-width : 820px;

@modal-border-radius: 4px;

@modal-header-height : @nav-height;
@modal-footer-height : 58px;
@modal-subnav-height : @nav-height;

// Background
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: @zindexModalBackdrop;
	background-color: @black;
	// Fade for backdrop
	&.fade { opacity: 0; }
}

.modal-backdrop,
.modal-backdrop.fade.in {
	.opacity(30);
}

body:not(:-moz-handler-blocked) .modal{
	&.moz-scroll-fix{
		.modal-dialog{
			height: 100%;
		}
	}
}

// Base modal
.modal {
	position: fixed;
	left: 40px; right: 40px; top: 40px; bottom:40px;
	justify-content: center;
	align-items: flex-start;
	z-index: @zindexModal;
	display: none;
	&.in {
		display: flex !important;
	}
	.modal-dialog {
		width: @modal-base-width + 20px;
		display: flex;
		max-height: 100%;
	}
	.modal-content {
		margin: 10px;
		.box-shadow(0 0 8px 2px rgba(0, 0, 0, 0.3));
		.modal-header, .modal-footer {
			flex: 0 0 auto;
			width: 100%;
			.border-box();
		}
		.modal-body {
			flex: 1 1 auto;
			width: 100%;
			.border-box();
		}
	}
        &.child-shadow {
            .modal-content {
                .box-shadow(0 0 0 0 rgb(0, 0, 0));
                > * {
                    .box-shadow(0 0 8px 2px rgba(0, 0, 0, 0.3));
                }
            }
        }
}
.modal-header {
	background-color: @white;
	padding: 9px 15px;
	border-bottom: 1px solid #e4e4e4;
	.box-sizing(border-box);
	height: @modal-header-height !important;
	.border-radius(@modal-border-radius @modal-border-radius 0 0);
	// Close icon
	.close {
		margin-top: 2px;
		border: 0;
		background: 0;
	}
	h3 {
		font-size: 18px;
		font-weight: 100;
	}
}

// Body (where all modal content resises)
.modal-body {
	background: @white;
	overflow-y: auto;
	//max-height: 400px;
	padding: 20px;
	position: relative;

	.nav-tabs {
		position: absolute;
		left: 0; right: 0; top: 0;
		border-bottom: 1px solid #e4e4e4;
		height: @modal-subnav-height;
		line-height: @modal-subnav-height - 20;
		padding: 0px 20px;
		.box-sizing(border-box);
		background: @sd-background;
	}
	.tab-content {
		margin-top: @modal-subnav-height;
	}

	.modal-screen {
		position: absolute;
		left: 0; right: 0; top: 0; bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 20px;
	}
}
// Remove bottom margin if need be
.modal-form {
	margin-bottom: 0;
}

// Footer (for actions)
.modal-footer {
	background-color: @white;
	padding: 14px 15px 15px;
	margin-bottom: 0;
	text-align: right; // right align buttons
	border-top: 1px solid #e4e4e4;
	.border-radius(0 0 @modal-border-radius @modal-border-radius);
	.clearfix(); // clear it in case folks use .pull-* classes on buttons

	// Properly space out buttons
	.btn + .btn {
		margin-left: 5px;
		margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
	}
	// but override that for button groups
	.btn-group .btn + .btn {
		margin-left: -1px;
	}
}

.modal {
	&.modal-strech {
		.modal-dialog {
			height: 100%;
		}
		.modal-body {
			.tab-content {
				position: absolute;
				left: 0; right: 0; bottom: 0;
				top: @modal-subnav-height;
				margin: 0;
				padding: 20px;
				overflow: auto;
				display: block;
				width: auto;
			}
		}
	}
	&.modal-static {
		.modal-dialog {
			height: auto;
			.modal-body {
				height: 400px;
				max-height: 400px;
				.tab-content {
					position: absolute;
					left: 0; right: 0; bottom: 0;
					top: @modal-subnav-height;
					margin: 0;
					padding: 20px;
					overflow: auto;
					display: block;
					width: auto;
				}
			}
		}
	}
	&.modal-body-grey {
		.modal-body {
			background: @sd-background;
		}
	}
	&.modal-large {
		.modal-dialog {
			width: @modal-large-width + 20px;
		}
	}
	&.modal-big {
		.modal-dialog {
			width: @modal-big-width + 20px;
		}
	}
	&.modal-responsive {
		.modal-dialog {
			width: 100%;
			height: 100%;
			.modal-body {
				max-height: none;
			}
		}
	}
	&.with-subnav {
		.modal-dialog {
			height: 100%;
			.modal-body {
			}
		}
	}
}

.mini-modal {
	padding: 20px;
	border: 1px solid #9ecbde;
	.border-box();
	.box-shadow(0 0 2px 0 #bbb);
	background: #fff;
	width: 300px;
	margin-left: -150px;
	&.inline {
		position: relative;
		width: auto;
		margin-left: auto;
	}
	.title {
		font-size: 11px;
		.text-semibold();
		color: @black;
		text-transform: uppercase;
	}
	.close {
		position: absolute;
		right: 12px;
		top: 8px;
	}
	.content {
		margin: 15px 0;
		.field {
			margin-bottom: 10px;
		}
	}
	.footer {
		text-align: right;
	}
}

// SPLIT POPUP (left sidebar)
// > used for upload avatar task
@split-modal-sidebar : 230px;
.split-popup {
	.sidebar {
		position: absolute;
		top:0; left: 0; bottom: 0;
		width: @split-modal-sidebar;
		border-right: 1px solid #ddd;
	}
	.main {
		position: absolute;
		top:0; right: 0; bottom: 0;
		left: @split-modal-sidebar;
	}
}

.activity-choose-modal {
	.border-radius(0px);
	width: 300px;
	margin-left: -150px;
	margin-top: -100px;
	background: none;
	.box-shadow(none);
	border: 0;
	.list-group {
		margin-bottom: 10px;
		.list-group-item {
			border-color: #c0c0c0;
			&:hover, &.active {
				background: #e0e0e0;
			}
		}
	}
	.btn {
		.box-shadow(inset 0 1px 0 #707070);
	}
}


LESS Mixins

LESS Mixins

/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, @start),
                               color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
                                  @start,
                                  @stop);
  background: -moz-linear-gradient(center bottom,
                                   @start 0%,
                                   @stop 100%);
  background: -o-linear-gradient(@stop,
                                 @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, rgb(@start,@start,@start)),
                               color-stop(1, rgb(@stop,@stop,@stop)));
  background: -ms-linear-gradient(bottom,
                                  rgb(@start,@start,@start) 0%,
                                  rgb(@stop,@stop,@stop) 100%);
  background: -moz-linear-gradient(center bottom,
                                   rgb(@start,@start,@start) 0%,
                                   rgb(@stop,@stop,@stop) 100%);
  background: -o-linear-gradient(rgb(@stop,@stop,@stop),
                                 rgb(@start,@start,@start));
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
}

.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
  border-top: solid 1px @top-color;
  border-left: solid 1px @left-color;
  border-right: solid 1px @right-color;
  border-bottom: solid 1px @bottom-color;
}

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
  .background-clip(padding-box);
}

.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius: @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius: @bottomleft;
  -webkit-border-top-left-radius: @topleft;
  -moz-border-radius-topright: @topright;
  -moz-border-radius-bottomright: @bottomright;
  -moz-border-radius-bottomleft: @bottomleft;
  -moz-border-radius-topleft: @topleft;
  border-top-right-radius: @topright;
  border-bottom-right-radius: @bottomright;
  border-bottom-left-radius: @bottomleft;
  border-top-left-radius: @topleft;
  .background-clip(padding-box);
}

.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}

.transition-duration(@duration: 0.2s) {
  -moz-transition-duration: @duration;
  -webkit-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}

.transform(...) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -o-transform: @arguments;
  -ms-transform: @arguments;
  transform: @arguments;
}

.rotation(@deg:5deg){
  .transform(rotate(@deg));
}

.scale(@ratio:1.5){
  .transform(scale(@ratio));
}

.transition(@duration:0.2s, @ease:ease-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease;
  transition: all @duration @ease;
}

.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}

.box-sizing(@sizing: border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}

.user-select(@argument: none) {
  -webkit-user-select: @argument;
  -moz-user-select: @argument;
  -ms-user-select: @argument;
  user-select: @argument;
}

.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
  -moz-column-width: @colwidth;
  -moz-column-count: @colcount;
  -moz-column-gap: @colgap;
  -moz-column-rule-color: @columnRuleColor;
  -moz-column-rule-style: @columnRuleStyle;
  -moz-column-rule-width: @columnRuleWidth;
  -webkit-column-width: @colwidth;
  -webkit-column-count: @colcount;
  -webkit-column-gap: @colgap;
  -webkit-column-rule-color: @columnRuleColor;
  -webkit-column-rule-style: @columnRuleStyle;
  -webkit-column-rule-width: @columnRuleWidth;
  column-width: @colwidth;
  column-count: @colcount;
  column-gap: @colgap;
  column-rule-color: @columnRuleColor;
  column-rule-style: @columnRuleStyle;
  column-rule-width: @columnRuleWidth;
}

.translate(@x:0, @y:0) {
  .transform(translate(@x, @y));
}

.background-clip(@argument: padding-box) {
  -moz-background-clip: @argument;
  -webkit-background-clip: @argument;
  background-clip: @argument;
}

error: pathspec 'mycroft/base/static/less/elements.less' did not match any file(s) known to git


add flex-wrap on badge container to automatically create a new row

fatal: unable to access 'https://github.com/VoiSmart/Rocket.Chat.git/': The requested URL returned error: 403


Added loading spinner css

Added loading spinner css

fatal: unable to access 'https://github.com/limestudios/limestudios-site.git/': The requested URL returned error: 403


Added clearfix to parent container of floats

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/putterschool/styleguide.git/'


Delete stacked.less

Delete stacked.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/19smitgr/19smitgr.github.io.git/'


Fix `.fa` font size for `.btn-group`.

Fix `.fa` font size for `.btn-group`.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/gmist/five-studio2.git/'


adjust event archive page font weight

adjust event archive page font weight

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/lukesmmr/piracanga.git/'


Actually, that nav problem is more o f a mark up problem than a CSS problem

fatal: unable to access 'https://github.com/hevnly/asset-bazaar.git/': The requested URL returned error: 403