.nobr	{ 
    white-space:nowrap; 
}

#main-banner {
    

    // box-shadow: 
    //     inset 0px 15px 8px -10px theme-color('shadow-gray');
    
    // box-shadow:
        // inset 0 -9px 10px -10px #cccccc;
        // inset 0px -15px 8px -15px theme-color('shadow-gray');
    background-color: lighten(theme-color('gray'), 5%);


    .container {
        padding-top: 3rem;
        padding-bottom: 3rem;
        align-items: center;
        display: flex ;
        // background: url('/images/svg/bg-flame-banner.svg') no-repeat right bottom;
        min-height: 400px;;
    }

    #particle-js {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        height: 480px;
      }
      

    .txt-wrapper {
        background-color: rgba(246, 246, 246, 0.5);
        width: 100%;
        position: relative;
        
    }

    h1 {
        text-align: center;
        font: normal normal normal 28px/44px Open Sans;
        letter-spacing: 0px;
        white-space: nowrap;
        color: #212529;
        margin-bottom: 3rem;

        
        strong {
            text-align: center;
            font: normal normal 600 56px/76px Open Sans;
            letter-spacing: 0px;
            color: #055799;
            text-transform: uppercase;
            margin-bottom: 1rem;
            display: block;
        }

    }
    p {
        text-align: center;
        font: normal normal normal 20px/32px Open Sans;
        letter-spacing: 0px;
        color: #666666;
        margin-bottom: 2rem;
    }
    .buttons { text-align: center; }
    .btn {
        font-size: 18px;
        line-height: 1.5em;
        padding: 0.5rem 1.5rem;
        
        span {
            margin-left: 10px;

        }
    }
    
    
}

#github-stats-bar {
    padding:  0.5rem 0 0.2rem;
    background-color: theme-color('gray');
    
    a {
        font-size: 18px;
        margin-right: 2rem;
    }

    
    .twitter-follow {
        iframe {
            position: absolute !important;
            top: 5px;
            right: 0;
        }
    }
}

.github-stats {
    .github-link {
        
        .fa-github {
            color: theme-color('primary');
            font-size: 30px;
            margin-right: 1rem;
            vertical-align: top;
        }
    }
}
.github-wrapper {
    .fa-github {
        color: #000000 !important;
    }
    
    > * {
        display: inline-block;
        
    }
    * {
        vertical-align: top !important; 
        line-height: 24px;;
    }

}

#intro-text {
    // margin-bottom: 3rem; 
    padding: 2rem 0 2rem;
    // box-shadow: inset 0 11px 10px -10px #c5c5c5;

    h2 {
        font-size: 18px;
        margin-bottom: 1rem;;
    }
    p {
        border-radius: 5px;
        padding: 0 10rem;
        font-size: 24px;
        text-align: center;
        margin-bottom: 0;
        font-weight: 300;
    }
    .poweredby-logos {
        display: flex;
        // flex-wrap: nowrap;
        justify-content: center;
        padding: 0rem 2em 1em;


        img {
            width: 120px;
            height: auto;
            opacity: 0.7;
            align-self: center;            
            transition: filter 300ms ease-in-out, 
                opacity 500ms ease-in-out;
            filter: grayscale(100%);
            margin: 0 1rem;

        }
    }

    .cta-link {
        text-align: center;
        margin-top: 1rem;;
        font-size: 16px;;
    }

    :hover {
        .poweredby-logos img {
            filter: none;
            opacity: 0.85 !important;
        }
    }
}


#home-use-cases {
    padding: 5rem 0;
    background-color: #ffffff;
    // box-shadow: inset 0 15px 8px -10px #d5d5d5;

    .container {
        .row {
            padding: 5rem 0;
            border-bottom: 4px solid #EEEEEE;

            &:last-of-type {
                border-bottom: 0;
            }

            &:first-of-type {
                padding-top: 0;
            }

                
            .txt-wrapper {
                width: 50%;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                padding-right: 1.5rem;


                h3 {
                    font-size: 20px;
                    margin-bottom: 15px;
                    font-weight: 600;
                }
                

                p {
                    font-size: 16px;
                    line-height: 2em;
                    margin-bottom: 20px;
                }
                .ctas {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    h4 {
                        width: 100%;
                        font-size: 17px;
                        font-weight: 600;
                    }
                
                    .btn {
                        display: flex;
                        flex-wrap: wrap;
                        width: 49%;
                        border: 1px solid theme-color('primary');
                        border-radius: 5px;
                        align-items: center;
                        justify-content: center;
                        padding: 1rem;

                        .icon-wrapper{
                            display: flex;
                            align-content: center;
            
                            svg {
                                width: 100px;
                                height: 50px;
                                fill: theme-color('primary');

                                .a { 
                                    stroke:theme-color('primary') !important;
                                }
                            }
                        }

                        span {
                            display: block;
                            width: 100%;
                            text-align: center;
                            color: theme-color('primary');
                            font-weight: 600;
                        }

                        &:hover {
                            background-color: lighten(theme-color('primary'), 5%);

                            .icon-wrapper > svg {
                                fill: white;

                                .a { 
                                    stroke: white !important;
                                }
                            }
                            span {
                                color: white;
                            }
                        }
                    }
                }
            }
            .diagram-wrapper {
                padding-left: 1.5rem;

                width: 50%;
                text-align: center;

                img {
                    max-width: 100%;
                }
            }

            &:nth-of-type(2) {
                flex-direction: row-reverse;

                .diagram-wrapper {
                    padding-right: 1.5rem;
                }
                .txt-wrapper {

                    padding-left: 1.5rem;

                }
            }
        }
    }

}

section.section-block {
    
    h2 {
        text-align: center;
        font-size: 32px;
        text-transform: uppercase;
        margin-bottom: 2em;

        strong {
            color: theme-color('primary');

            font-weight: 900;
        }
    }
}


#home-features {


    .wrapper {
        padding: 5rem 0;
    }

   
    #home-features-vtab {
        a.nav-link {
            display: flex;
            align-items: center;
            width: 100%;
            background-color: theme-color('primary');
            color: #ffffff;
            margin-bottom: 1.35em;
            transition: background-color 0.5s ease-in-out;
            box-shadow: 0 15px 8px -10px #d5d5d5;
            padding: 1em 1em;

            svg {
                width: 50px;
                height: 50px;
                fill: #ffffff;
                
                                
            }

            span {
                font-size: 16.5px;
                line-height: 1.5em;
                font-weight: 600;
            }
        
            &.active {
                text-decoration: none;
                background-color: theme-color('secondary');
            }
            
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }

    #v-pills-tabContent {
        background-color: #ffffff;
        border-radius: 5px;;
        padding: 2em;
        height: 100%;
        box-shadow: 0 15px 8px -10px #d5d5d5;

        .tab-pane {
            h3 {
                font-size: 22px;
                text-align: center;
                font-weight: 600;
                a {
                    text-decoration: none;
                    cursor: default;

                    &:hover {
                        color: theme-color('primary');
                    }
                }
            }
            p {
                font-size: 16px;
                font-weight: 400;;
                line-height: 2em;
            }

            pre {
                margin:  0 0 1em 0;
                max-height: 270px;
            }
            code {
                font-size: 16px;
                
            }

            .nav-tabs {
                .nav-item {
                    a.nav-link {
                        color: #495057;
                        font-size: 1.2em;

                        &.active {
                            color: theme-color('primary');
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }
        
    
}


// Large devices (desktops, less than 1200px)
// @media (max-width: 1199.98px) { ... }
@include media-breakpoint-down(lg) {
    #main-banner {
        h1 {
            font-size: 24px;

            strong {
                font: normal normal 600 50px/64px Open Sans;
            }
        }
        .container {
            min-height: 360px;

            #particle-js {
                height: 440px;
            }
        }
    }

    #home-use-cases {
        #use-cases-tabs {
            width: 85%;

            .active:after {
                left: calc(28% - 15px);
            }

            li:last-child {
                .active:after {
                    left: calc(73% - 15px);
                }
            }
        }
    }
    #home-features #v-pills-tabContent .tab-pane pre {
        max-height: 265px;
    }

    #intro-text {
        .poweredby-logos {
            img {
                margin: 0 .5rem;
            }
        }
    }
    
}


// Medium devices (tablets, less than 992px)
// @media (max-width: 991.98px) { ... }
@include media-breakpoint-down(md) {

    #main-banner {
        .container {

            background-size: 300px;

            .txt-wrapper {
                // width: 70%;
            }
            h1 {
                font: normal normal normal 28px/38px Open Sans;
                white-space: normal;

                strong {
                    font: normal normal 600 52px/70px Open Sans;
                }
            }
        }
        .buttons {
            margin-top: 1.5rem;
        }
    }

    #github-stats-bar {
        .github-stats {
            span {
                &:nth-of-type(3) {
                    display: none;
                }
            }
        }
    }

    #intro-text {

        .poweredby-logos {
            padding: 1rem;
        }
    }
       

    #home-use-cases {
        
    }
    #home-features {
        #v-pills-tabContent .tab-pane pre {
            max-height: 215px;
        }
        #home-features-vtab {
            a.nav-link {
                span {
                    font-size: 14px;
                    margin-left: 7px;
                }
            }
        }
    }

    
}


@media(min-width:768px) {

    #home-features {
        #v-pills-tabContent {
            .nav-tabs {
                display: flex;
            }

            .card .card-header {
                
            }  

            .card .collapse{
                display:block;
            }

            >.tab-pane h3 a svg {
                display: none;
            }
        }
    }
}


// Small devices (landscape phones, less than 768px)
// @media (max-width: 767.98px) { ... }
@include media-breakpoint-down(sm) {
    #home-features {
        #home-features-vtab {
            display: none;
            
            a.nav-link {
                padding: 1.25em 2em;
                margin-bottom: 0.5em;


                span {
                    font-size: 16px;
                }

                &:last-of-type {
                    margin-bottom: 1.5em;
                }
            }

        }
        

        #v-pills-tabContent {
            padding: 2em 1em;
            
            > .tab-pane {
                display: block !important;
                opacity: 1;

                h3 {
                    a {
                        display: block;
                        width: 100%;
                        // height: 3rem;

                        display: flex;
                        align-items: center;
                        width: 100%;
                        
                        margin-bottom: 1.35em;
                        transition: background-color 0.5s ease-in-out;
                        box-shadow: 0 15px 8px -10px #d5d5d5;
                        padding: .5em 1em;
                        text-decoration: none;
                        background-color: theme-color('secondary');
                        color: white;
                        
                        &:hover {
                            color: white;
                        }

                        &.collapsed {
                            background-color: theme-color('primary');
                            color: #ffffff;
                        }


                        svg {
                            width: 50px;
                            height: 50px;
                            fill: #ffffff;
               
                        }

                        span {
                            margin-left: 1.5rem;
                            display: inline-block;
                    width: 100%;
                    text-align: left;
                        }
                    
                    }
                }

                
                .card-body {
                    margin-bottom: 2rem;
                    padding: 0 1em;
                }
            }
        }
    }

    #intro-text {
        .poweredby-logos {
            img {
                width: 76px;
                max-width: 15%;
            }
        }
    }

    #github-stats-bar {
        a {
            margin-right: 0;
        }
        span {
            &:nth-of-type(2) {
                display: none;
            }
        }
    }

    .twitter-follow {
        // display: none;
    }

    
    #main-banner {
        .container {
            h1 {
                font-size: 26px;

                strong {
                    font-size: 50px;;
                }
            }
        }
    }
    
    
    #home-use-cases {
        padding: 3rem 1rem;
        

        .container {
            .row {
                padding: 4rem 0;
                flex-wrap: wrap;
                position: relative;

                h3 {
                    width: 100%;
                }
                
                .txt-wrapper, .diagram-wrapper {
                    width: 100%;
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                    margin-bottom: 2rem;
                    text-align: left;
                }
                .txt-wrapper {
                    p {
                        margin-bottom: 0;;
                    }
                }
                .diagram-wrapper {
                    text-align: center;
                    img {
                        height: auto;
                    }
                }
                
                .btn {
                    margin: 0 auto;
                    position: absolute;
                    bottom: 10px;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    
}


// Extra small devices (portrait phones, less than 576px)
// @media (max-width: 575.98px) { ... }
@include media-breakpoint-down(xs) { 
    #main-banner {
        .container {
            background-size: unset;
            background-position-x: 200%;
            .txt-wrapper {
                width: 100%;
                padding-right: 1rem;
                padding-left: 1rem;
            }
            h1 {
                font-size: 22px;
                strong {
                    font-size: 40px;
                }
            }
            
            .btn {
                margin-bottom: 10px;
            }
        }
    }
    #home-features {
        #v-pills-tabContent {
            >.tab-pane {
                h3 {
                    a {
                        span {
                            margin-left: .8rem;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }

    #github-stats-bar {
        padding-left: 1rem;
        padding-right: 1rem;
        a {
            margin-right: 0;
        }
        span {
            &:nth-of-type(1) {
                display: none;
            }
        }
    }

   
}