#odi-demo-wrap {
    display: block;

    .odi-important-notice {
        padding: 10px 15px;
        background: #fff;
        margin: 15px 0 0;

        p {
            font-size: 14px;
            margin: 0 0 5px;

            &:last-child { margin: 0; }
        }
    }

    .odi-about-description {
        margin-top: 30px;

        p { font-size: 15px; font-weight: 400; line-height: 1.8; margin: 0; }
    }

    hr { margin: 32px 0 40px; }

    .themes { margin: 0 -15px; }

    .odi-header-bar { display: inline-block; width: calc(100% - 40px); background-color: #ffffff; margin-bottom: 30px; padding: 0 20px; }

    .odi-navigation {
        float: left;
        font-size: 13px;
        width: 100%;

        ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }

        li {
            float: left;
            margin: 0 15px;

            &.active a,
            &.active a:hover { border-bottom: 4px solid #666666; }
            a {
                display: block;
                text-align: center;
                text-decoration: none;
                color: #444444;
                border-bottom: 4px solid #ffffff;
                padding: 15px 0;
                outline: 0;
                -webkit-box-shadow: none;
                box-shadow: none;

                &:hover { color: #00a0d2; border-bottom: 4px solid #ffffff; cursor:pointer; }
            }
        }
    }

    .odi-search-input {
        width: 100%;
        margin: 10px 0;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
        outline: 0;
        -webkit-transition: 50ms border-color ease-in-out;
        transition: 50ms border-color ease-in-out;
    }

    .theme-wrap { float: left; width: 33.33%; padding: 0 15px 30px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    .theme { float: none; width: 100%; margin: 0; }
}

.odi-is-fadeout { animation: odi-fade linear 200ms 1 forwards; }
.odi-is-fadein { animation: odi-fade linear 200ms 1 reverse forwards; }

@keyframes odi-fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.demo-import-loader {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;

    &.preview-all { background: rgba( 255, 255, 255, 0.7 ); }
    i { display: inline-block; margin: -16px auto 0 auto; height: 32px; width: 32px; top: 50%; position: relative; font-size: 32px; line-height: 32px; text-align: center; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; }
}

.preview-icon i { color: #333; }
.success-icon i { color: #329e6d; margin: -20px auto 0 auto; height: 40px; width: 40px; font-size: 40px; }
.warning-icon i { color: #ff6c6c; }
.success-icon i, .warning-icon i { -moz-animation: none; -o-animation: none; -webkit-animation: none; animation: none; }

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } }
@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } }
@-o-keyframes spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } }
@-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(359deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }

#odi-demo-wrap .theme-browser .theme {
    &:focus, &:hover { cursor: default; }
    .theme-screenshot { cursor: pointer; }
    .theme-name span { cursor: text; }
}

/* RTL */
.rtl #odi-demo-wrap {
    .theme-wrap,
    .odi-navigation,
    .odi-navigation li { float: right; }
}

/* Responsive */
@media only screen and (min-width: 1640px) {
    #odi-demo-wrap .theme-wrap { width: 25%; }
}

@media only screen and (max-width: 1080px) {
    #odi-demo-wrap .theme-wrap { width: 50%; }
}

@media only screen and (max-width: 780px) {
    #odi-demo-wrap {
        .theme { text-align: center; }
        .theme-actions { display: block; position: relative; opacity: 1; }
        .theme-browser .theme .theme-actions .button-primary { margin-right: 0 !important; margin-left: 0 !important; }
    }
}

@media only screen and (min-width: 640px) {
    #odi-demo-wrap {
        .odi-navigation {
            width: calc(100% - 180px);

            li {
                margin: 0;

                a { padding: 15px; }
            }
        }
       .odi-search-input { display: inline-block; width: 180px; height: 30px; margin: 0; margin-top: 11px; }
    }
}

@media only screen and (max-width: 580px) {
    #odi-demo-wrap .theme-wrap { float: none; width: 100%; }
}