.show-grid {
    margin-bottom: 20px
}

.show-grid [class^=col-] {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #E6E9ED;
    border: 1px solid rgba(22, 24, 27, .12)
}

.demo-icon-container {
    position: relative;
    /*overflow-x: auto;*/

}

.demo-icon-container ul.demo-icon {
    margin: 0 auto;
    max-width: 360px
}

.demo-icon-container ul.demo-icon>li {
    text-align: center
}

.demo-icon-container ul.demo-icon>li>span {
    line-height: 80px;
    font-size: 32px
}

@media (max-width:767px) {
    .demo-icon-container ul.demo-icon>li>span {
        line-height: 64px;
        font-size: 26px
    }
}

@media (max-width:480px) {
    .demo-icon-container ul.demo-icon>li>span {
        line-height: 32px;
        font-size: 20px
    }
}

.demo-icon-container a.demo-icon-control {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 0;
    z-index: 2;
    background-color: transparent
}

.demo-icon-container a.demo-icon-control:active,
.demo-icon-container a.demo-icon-control:hover {
    background-color: rgba(245, 247, 250, .1)
}

.demo-icon-list {
    margin: 20px 0;
    padding: 0;
    list-style: none
}

.demo-icon-list:after,
.demo-icon-list:before {
    content: " ";
    display: table
}

.demo-icon-list:after {
    clear: both
}

.demo-icon-list>li {
    margin: 0;
    display: block;
    float: left;
    width: 12.5%;
    height: 120px;
    overflow: hidden;
    line-height: 1.4;
    padding: 12px;
    font-size: 24px;
    list-style: none;
    text-align: center;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: all 250ms ease-in-out
}

@media (max-width:767px) {
    .demo-icon-list>li {
        width: 25%
    }
}

.demo-icon-list>li>.icon--class {
    display: block;
    font-size: 14px
}

.demo-icon-list>li:hover {
    background-color: rgba(255, 255, 255, .2)
}

.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
    list-style: none;
    line-height: 20px
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none
}

.dd-list .dd-list {
    padding-left: 34px
}

.dd-collapsed .dd-list {
    display: none
}

.dd-empty,
.dd-item,
.dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
    line-height: 20px
}

.dd-handle {
    display: block;
    height: 34px;
    margin: 6px 0;
    padding: 6px 12px;
    color: rgba(22, 24, 27, .87);
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(22, 24, 27, .12);
    background: #F5F7FA;
    cursor: move
}

.dd-handle:hover {
    color: #16181B;
    background: #F0F3FA;
    border-color: #48CFAD
}

.dd-item>button {
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 25px;
    height: 20px;
    margin: 6px 0;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    background: 0 0;
    line-height: 1;
    text-align: center;
    font-weight: 700;
    outline: 0
}

.dd-item>button:before {
    font-family: FontAwesome;
    content: "\f067";
    color: rgba(22, 24, 27, .54);
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    text-indent: 0
}

.dd-item>button[data-action=collapse]:before {
    content: "\f068"
}

.dd-empty,
.dd-placeholder {
    margin: 6px 0;
    padding: 0;
    min-height: 34px;
    background: rgba(72, 207, 173, .12);
    border: 1px dashed rgba(72, 207, 173, .26)
}

.dd-empty {
    border: 1px dashed rgba(0, 0, 0, .12);
    min-height: 100px;
    background-color: #F5F7FA
}

.dd-dragel {
    position: absolute;
    pointer-events: none;
    z-index: 60
}

.dd-dragel>.dd-item .dd-handle {
    margin-top: 0
}

.dd-dragel .dd-handle {
    box-shadow: 0 8px 17px rgba(22, 24, 27, .2)
}

.dd3-item:hover>.dd-handle,
.dd3-item:hover>.dd3-content {
    border-color: #48CFAD
}

.dd3-content {
    display: block;
    height: 34px;
    margin: 6px 0;
    padding: 6px 12px 6px 42px;
    color: rgba(22, 24, 27, .87);
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(22, 24, 27, .12);
    background: #F5F7FA
}

.dd3-content:hover {
    color: #16181B;
    background: #F0F3FA
}

.dd-dragel>.dd3-item>.dd3-content {
    margin: 0
}

.dd3-item>button {
    margin-left: 34px
}

.dd3-handle {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    width: 34px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid rgba(22, 24, 27, .12);
    background: #F0F3FA
}

.dd3-handle:before {
    font-family: FontAwesome;
    content: "\f0c9";
    color: rgba(22, 24, 27, .54);
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    text-align: center;
    text-indent: 0;
    font-size: 20px;
    font-weight: 400
}

.dd3-handle:hover {
    color: #16181B;
    box-shadow: none
}

.ux {
    position: relative;
    display: block;
    padding: 12px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px -1px rgba(22, 24, 27, .26)
}

.ux:after,
.ux:before {
    content: " ";
    display: table
}

.ux:after {
    clear: both
}

.ux.ux-box {
    padding-right: 40px;
    padding-left: 40px
}

.ux .ux-primary {
    background-color: rgba(79, 193, 233, .26)
}

.ux .ux-secondary {
    background-color: rgba(93, 156, 236, .26)
}

.ux .ux-contrast {
    background-color: #E4DCF9
}

.ux .ux-caption {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 15px;
    background-color: transparent;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all .4s cubic-bezier(0.25, .8, .25, 1)
}

.ux .ux-caption>.ux-caption-text {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    height: 100px;
    margin-top: -50px;
    line-height: 100px;
    font-size: 1.4em;
    color: rgba(22, 24, 27, .54)
}

.ux .ux-caption:focus,
.ux .ux-caption:hover {
    outline: 0;
    text-decoration: none;
    opacity: 1;
    filter: alpha(opacity=100)
}

.ux .ux-text {
    background-color: rgba(22, 24, 27, .08);
    color: transparent;
    display: inline-block;
    height: 10px;
    margin: 0 3px 3px 0;
    width: 15%
}

.ux .ux-text.ux-text-xs {
    width: 6%
}

.ux .ux-text.ux-text-sm {
    width: 10%
}

.ux .ux-text.ux-text-md {
    width: 20%
}

.ux .ux-text.ux-text-lg {
    width: 25%
}

.ux .ux-block {
    position: relative;
    display: block;
    width: 100%;
    float: left;
    min-height: 1px;
    padding: 3px
}

.ux .ux-block.ux-block-sm {
    width: 40px
}

.ux .ux-block.ux-block-1by4 {
    width: 25%
}

.ux .ux-block.ux-block-2by4 {
    width: 50%
}

.ux .ux-block.ux-block-3by4 {
    width: 75%
}

.ux .ux-block-v-xs {
    height: 40px
}

.ux .ux-block-v-sm {
    height: 80px
}

.ux .ux-block-v {
    height: 150px
}

.ux .ux-block-v-md {
    height: 200px
}

.ux .ux-block-v-lg {
    height: 250px
}

.ux .ux-float-wrapper {
    background-color: #F5F7FA;
    text-align: center
}

.ux .ux-float-wrapper .ux-float {
    display: inline-block;
    padding: 6px;
    top: -50px;
    float: none;
    text-align: left;
    background-color: #fff
}