////Default styles
//
//html {
//    box-sizing: border-box;
//}
//*, *:before, *:after {
//    box-sizing: inherit;
//}
//
//body {
//    // display: flex;
//    // min-height: 100vh;
//    // flex-direction: column;
//}
//
//main {
//    // flex: 1 0 auto;
//}
//
//ul {
//    &:not(.browser-default) {
//        padding-left: 0;
//        list-style-type: none;
//
//        li {
//            list-style-type: none;
//        }
//    }
//}
//
a {
    //color: $link-color;
    text-decoration: none;

    // Gets rid of tap active state
    -webkit-tap-highlight-color: transparent;
}
//
//
//// Positioning
.valign-wrapper {
    display: flex;
    align-items: center;

    .valign {
        display: block;
    }
}
//
//
//// classic clearfix
//.clearfix {
//    clear: both;
//}
//
//
// Z-levels
.z-depth-0 {
    box-shadow: none !important;
}
.z-depth-1 {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.z-depth-1-half {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-3 {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-4 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
.z-depth-5 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
//
.hoverable {
    transition: box-shadow .25s;
    box-shadow: 0;
}

.hoverable:hover {
    transition: box-shadow .25s;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
//
//// Dividers
//
.divider {
    height: 1px;
    overflow: hidden;
    background-color: color("grey", "lighten-2");
}
//
//
////  Blockquote
//
//blockquote {
//    margin: 20px 0;
//    padding-left: 1.5rem;
//    border-left: 5px solid $primary-color;
//}
//
//// Icon Styles
//
//i {
//    line-height: inherit;
//
//    &.left {
//        float: left;
//        margin-right: 15px;
//    }
//    &.right {
//        float: right;
//        margin-left: 15px;
//    }
//    &.tiny {
//        font-size: 1rem;
//    }
//    &.small {
//        font-size: 2rem;
//    }
//    &.medium {
//        font-size: 4rem;
//    }
//    &.large {
//        font-size: 6rem;
//    }
//}
//
//// Images
img.responsive-img,
video.responsive-video {
    max-width: 100%;
    height: auto;
}
//
//
//// Pagination
//
//.pagination {
//
//    li {
//        display: inline-block;
//        border-radius: 2px;
//        text-align: center;
//        vertical-align: top;
//        height: 30px;
//
//        a {
//            color: #444;
//            display: inline-block;
//            font-size: 1.2rem;
//            padding: 0 10px;
//            line-height: 30px;
//        }
//
//        &.active a { color: #fff; }
//
//        &.active { background-color: $primary-color; }
//
//        &.disabled a {
//            cursor: default;
//            color: #999;
//        }
//
//        i {
//            font-size: 2rem;
//        }
//    }
//
//
//    li.pages ul li {
//        display: inline-block;
//        float: none;
//    }
//}
//@media #{$medium-and-down} {
//    .pagination {
//        width: 100%;
//
//        li.prev,
//        li.next {
//            width: 10%;
//        }
//
//        li.pages {
//            width: 80%;
//            overflow: hidden;
//            white-space: nowrap;
//        }
//    }
//}
//
//// Breadcrumbs
//.breadcrumb {
//    font-size: 18px;
//    color: rgba(255,255,255, .7);
//
//    i,
//    [class^="mdi-"], [class*="mdi-"],
//    i.material-icons {
//        display: inline-block;
//        float: left;
//        font-size: 24px;
//    }
//
//    &:before {
//        content: '\E5CC';
//        color: rgba(255,255,255, .7);
//        vertical-align: top;
//        display: inline-block;
//        font-family: 'Material Icons';
//        font-weight: normal;
//        font-style: normal;
//        font-size: 25px;
//        margin: 0 10px 0 8px;
//        -webkit-font-smoothing: antialiased;
//    }
//
//    &:first-child:before {
//        display: none;
//    }
//
//    &:last-child {
//        color: #fff;
//    }
//}
//
//
//// Parallax
//.parallax-container {
//    position: relative;
//    overflow: hidden;
//    height: 500px;
//}
//
//.parallax {
//    position: absolute;
//    top: 0;
//    left: 0;
//    right: 0;
//    bottom: 0;
//    z-index: -1;
//
//    img {
//        display: none;
//        position: absolute;
//        left: 50%;
//        bottom: 0;
//        min-width: 100%;
//        min-height: 100%;
//        -webkit-transform: translate3d(0,0,0);
//        transform: translate3d(0,0,0);
//        transform: translateX(-50%);
//    }
//}
//
//// Pushpin
//.pin-top, .pin-bottom {
//    position: relative;
//}
//.pinned {
//    position: fixed !important;
//}
//
///*********************
//  Transition Classes
//**********************/
//
ul.staggered-list li {
    opacity: 0;
}

.fade-in {
    opacity: 0;
    transform-origin: 0 50%;
}
//
//
///*********************
//  Media Query Classes
//**********************/
//.hide-on-small-only, .hide-on-small-and-down {
//    @media #{$small-and-down} {
//        display: none !important;
//    }
//}
//.hide-on-med-and-down {
//    @media #{$medium-and-down} {
//        display: none !important;
//    }
//}
//.hide-on-med-and-up {
//    @media #{$medium-and-up} {
//        display: none !important;
//    }
//}
//.hide-on-med-only {
//    @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
//        display: none !important;
//    }
//}
//.hide-on-large-only {
//    @media #{$large-and-up} {
//        display: none !important;
//    }
//}
//.show-on-large {
//    @media #{$large-and-up} {
//        display: block !important;
//    }
//}
//.show-on-medium {
//    @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
//        display: block !important;
//    }
//}
//.show-on-small {
//    @media #{$small-and-down} {
//        display: block !important;
//    }
//}
//.show-on-medium-and-up {
//    @media #{$medium-and-up} {
//        display: block !important;
//    }
//}
//.show-on-medium-and-down {
//    @media #{$medium-and-down} {
//        display: block !important;
//    }
//}
//
//
//// Center text on mobile
//.center-on-small-only {
//    @media #{$small-and-down} {
//        text-align: center;
//    }
//}
//
//// Footer
//footer.page-footer {
//    margin-top: 20px;
//    padding-top: 20px;
//    background-color: $footer-bg-color;
//
//    .footer-copyright {
//        overflow: hidden;
//        height: 50px;
//        line-height: 50px;
//        color: rgba(255,255,255,.8);
//        background-color: rgba(51,51,51,.08);
//        @extend .light;
//    }
//}
//
//// Tables
//table, th, td {
//    border: none;
//}
//
//table {
//    width:100%;
//    display: table;
//
//    &.bordered > thead > tr,
//    &.bordered > tbody > tr {
//        border-bottom: 1px solid $table-border-color;
//    }
//
//    &.striped > tbody {
//        > tr:nth-child(odd) {
//            background-color: $table-striped-color;
//        }
//
//        > tr > td {
//            border-radius: 0;
//        }
//    }
//
//    &.highlight > tbody > tr {
//        transition: background-color .25s ease;
//        &:hover {
//            background-color: $table-striped-color;
//        }
//    }
//
//    &.centered {
//        thead tr th, tbody tr td {
//            text-align: center;
//        }
//    }
//
//}
//
//thead {
//    border-bottom: 1px solid $table-border-color;
//}
//
//td, th{
//    padding: 15px 5px;
//    display: table-cell;
//    text-align: left;
//    vertical-align: middle;
//    border-radius: 2px;
//}
//
//// Responsive Table
//@media #{$medium-and-down} {
//
//    table.responsive-table {
//        width: 100%;
//        border-collapse: collapse;
//        border-spacing: 0;
//        display: block;
//        position: relative;
//
//        td:empty:before {
//            content: '\00a0';
//        }
//
//        th,
//        td {
//            margin: 0;
//            vertical-align: top;
//        }
//
//        th { text-align: left; }
//        thead {
//            display: block;
//            float: left;
//
//            tr {
//                display: block;
//                padding: 0 10px 0 0;
//
//                th::before {
//                    content: "\00a0";
//                }
//            }
//        }
//        tbody {
//            display: block;
//            width: auto;
//            position: relative;
//            overflow-x: auto;
//            white-space: nowrap;
//
//            tr {
//                display: inline-block;
//                vertical-align: top;
//            }
//        }
//        th {
//            display: block;
//            text-align: right;
//        }
//        td {
//            display: block;
//            min-height: 1.25em;
//            text-align: left;
//        }
//        tr { padding: 0 10px; }
//
//        /* sort out borders */
//        thead {
//            border: 0;
//            border-right: 1px solid $table-border-color;
//        }
//
//        &.bordered {
//            th { border-bottom: 0; border-left: 0; }
//            td { border-left: 0; border-right: 0; border-bottom: 0; }
//            tr { border: 0; }
//            tbody tr { border-right: 1px solid $table-border-color; }
//        }
//
//    }
//
//}
//
//
//// Collections
.collection {
    margin: $element-top-margin 0 $element-bottom-margin 0;
    border: 1px solid $collection-border-color;
    border-radius: 2px;
    overflow: hidden;
    position: relative;

    .collection-item {
        background-color: $collection-bg-color;
        line-height: 1.5rem;
        padding: 10px 20px;
        margin: 0;
        border-bottom: 1px solid $collection-border-color;

        // Avatar Collection
        &.avatar {
            min-height: 84px;
            padding-left: 72px;
            position: relative;

            .circle {
                position: absolute;
                width: 42px;
                height: 42px;
                overflow: hidden;
                left: 15px;
                display: inline-block;
                vertical-align: middle;
            }
            i.circle {
                font-size: 18px;
                line-height: 42px;
                color: #fff;
                background-color: #999;
                text-align: center;
            }


            .title {
                font-size: 16px;
            }

            p {
                margin: 0;
            }

            .secondary-content {
                position: absolute;
                top: 16px;
                right: 16px;
            }

        }


        &:last-child {
            border-bottom: none;
        }

        &.active {
            background-color: $collection-active-bg-color;
            color: $collection-active-color;

            .secondary-content {
                color: #fff;
            }
        }
    }
    a.collection-item{
        display: block;
        transition: .25s;
        color: $collection-link-color;
        &:not(.active) {
            &:hover {
                background-color: $collection-hover-bg-color;
            }
        }
    }

    &.with-header {
        .collection-header {
            background-color: $collection-bg-color;
            border-bottom: 1px solid $collection-border-color;
            padding: 10px 20px;
        }
        .collection-item {
            padding-left: 30px;
        }
        .collection-item.avatar {
            padding-left: 72px;
        }
    }

}
//// Made less specific to allow easier overriding
.secondary-content {
    float: right;
    color: $secondary-color;
}
.collapsible .collection {
    margin: 0;
    border: none;
}
//
//
//
//// Badges
//span.badge {
//    min-width: 3rem;
//    padding: 0 6px;
//    margin-left: 14px;
//    text-align: center;
//    font-size: 1rem;
//    line-height: inherit;
//    color: color('grey', 'darken-1');
//    float: right;
//    box-sizing: border-box;
//
//    &.new {
//        font-weight: 300;
//        font-size: 0.8rem;
//        color: #fff;
//        background-color: $badge-bg-color;
//        border-radius: 2px;
//    }
//    &.new:after {
//        content: " new";
//    }
//
//    &[data-badge-caption]::after {
//        content: " " attr(data-badge-caption);
//    }
//}
//nav ul a span.badge {
//    display: inline-block;
//    float: none;
//    margin-left: 4px;
//    line-height: 22px;
//    height: 22px;
//}
//.side-nav span.badge.new,
//.collapsible span.badge.new {
//    &::before {
//        content: '';
//        position: absolute;
//        top: 10px;
//        right: 0;
//        bottom: 10px;
//        left: 0;
//        background-color: $badge-bg-color;
//        border-radius: 2px;
//        z-index: -1;
//    }
//
//    position: relative;
//    background-color: transparent;
//}
//.collapsible span.badge.new {
//    z-index: 1;
//}
//
//
//
//// Responsive Videos
//.video-container {
//    position: relative;
//    padding-bottom: 56.25%;
//    height: 0;
//    overflow: hidden;
//
//    iframe, object, embed {
//        position: absolute;
//        top: 0;
//        left: 0;
//        width: 100%;
//        height: 100%;
//    }
//}
//
//// Progress Bar
//.progress {
//    position: relative;
//    height: 4px;
//    display: block;
//    width: 100%;
//    background-color: lighten($progress-bar-color, 40%);
//    border-radius: 2px;
//    margin: $element-top-margin 0 $element-bottom-margin 0;
//    overflow: hidden;
//    .determinate {
//        position: absolute;
//        top: 0;
//        left: 0;
//        bottom: 0;
//        background-color: $progress-bar-color;
//        transition: width .3s linear;
//    }
//    .indeterminate {
//        background-color: $progress-bar-color;
//        &:before {
//            content: '';
//            position: absolute;
//            background-color: inherit;
//            top: 0;
//            left:0;
//            bottom: 0;
//            will-change: left, right;
//            // Custom bezier
//            animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
//
//        }
//        &:after {
//            content: '';
//            position: absolute;
//            background-color: inherit;
//            top: 0;
//            left:0;
//            bottom: 0;
//            will-change: left, right;
//            // Custom bezier
//            animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
//            animation-delay: 1.15s;
//        }
//    }
//}
@keyframes indeterminate {
    0% {
        left: -35%;
        right:100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}
//
//
///*******************
//  Utility Classes
//*******************/
//
.hide {
    display: none !important;
}
//
//// Text Align
//.left-align {
//    text-align: left;
//}
//.right-align {
//    text-align: right
//}
//.center, .center-align {
//    text-align: center;
//}
//
//.left {
//    float: left !important;
//}
//.right {
//    float: right !important;
//}
//
//// No Text Select
.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
//
.circle {
    border-radius: 50%;
}
//
//.center-block {
//    display: block;
//    margin-left: auto;
//    margin-right: auto;
//}
//
//.truncate {
//    display: block;
//    white-space: nowrap;
//    overflow: hidden;
//    text-overflow: ellipsis;
//}
//
//.no-padding {
//    padding: 0 !important;
//}