.section-row{
    &.sow{
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffffff 0%, #daf9fe 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#daf9fe 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #ffffff 0%,#daf9fe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#daf9fe',GradientType=0 ); /* IE6-9 */

        padding: 6rem 0 7rem;
        h2{
            color: $baseColor;
            font-weight: 400;
            margin: 0 0 2rem;
            font-size: 2.5rem;
            letter-spacing: -0.5px;
        }
        .sow-placeholder{
            position: relative;
            .sow-img{
                position: absolute;
                left: 11px;
                top: 12px;
                width: 233px;
                img{
                    height: 142px;
                    width: 100%;
                    object-fit: cover;
                }
            }
        }
        .sow-content{
            padding-right: 40px;
            position: relative;
            z-index: 1;
            h3{
                margin: 0 0 1.25rem;
                text-transform: none;
                color: #00284e;
            }
            p{
                text-align: justify;
                margin: 0 0 2.25rem;
            }
            .btn-details{
                margin: 0;
            }
        }
        .addl-box{
            width: 100%;
            position: relative;
            z-index: 1;
            .btn-details{
                margin-top: 1.2rem;
            }
            ul{
                padding: 0;
                margin: 0;
                li{
                    list-style: none;
                    position: relative;
                    padding-left: 1.5rem;
                    color: #112a28;
                    margin: 0 0 1.2rem;
                    a{
                        color: #112a28;
                    }
                    &:before{
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 7px;
                        background-color: $baseColor;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}

.section-directory{
    padding: 4.75rem 0;
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left,  #000000 0%, #0170a8 0%, #0271a9 0%, #0070a8 46%, #0172aa 47%, #0071a9 48%, #0273ab 48%, #0073aa 51%, #0275ac 51%, #0075ab 53%, #0277ad 55%, #0077ab 55%, #0079ac 58%, #017bae 58%, #007aad 59%, #027caf 60%, #007caf 64%, #017fb1 65%, #007eae 66%, #017faf 68%, #0280b2 68%, #0080af 68%, #0080af 68%, #0282b1 69%, #0083b1 71%, #0383b2 72%, #0083b1 72%, #0186b3 74%, #0085b0 75%, #0186b3 76%, #008bb4 85%, #028db6 85%, #008eb4 88%, #0292b7 92%, #0091b6 94%, #0193b8 94%, #0092b7 95%, #0196b7 98%, #0296ba 98%, #0094b8 98%, #0096b7 99%, #0296ba 99%, #0096b7 99%, #0197b8 100%, #000002 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #000000 0%,#0170a8 0%,#0271a9 0%,#0070a8 46%,#0172aa 47%,#0071a9 48%,#0273ab 48%,#0073aa 51%,#0275ac 51%,#0075ab 53%,#0277ad 55%,#0077ab 55%,#0079ac 58%,#017bae 58%,#007aad 59%,#027caf 60%,#007caf 64%,#017fb1 65%,#007eae 66%,#017faf 68%,#0280b2 68%,#0080af 68%,#0080af 68%,#0282b1 69%,#0083b1 71%,#0383b2 72%,#0083b1 72%,#0186b3 74%,#0085b0 75%,#0186b3 76%,#008bb4 85%,#028db6 85%,#008eb4 88%,#0292b7 92%,#0091b6 94%,#0193b8 94%,#0092b7 95%,#0196b7 98%,#0296ba 98%,#0094b8 98%,#0096b7 99%,#0296ba 99%,#0096b7 99%,#0197b8 100%,#000002 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #000000 0%,#0170a8 0%,#0271a9 0%,#0070a8 46%,#0172aa 47%,#0071a9 48%,#0273ab 48%,#0073aa 51%,#0275ac 51%,#0075ab 53%,#0277ad 55%,#0077ab 55%,#0079ac 58%,#017bae 58%,#007aad 59%,#027caf 60%,#007caf 64%,#017fb1 65%,#007eae 66%,#017faf 68%,#0280b2 68%,#0080af 68%,#0080af 68%,#0282b1 69%,#0083b1 71%,#0383b2 72%,#0083b1 72%,#0186b3 74%,#0085b0 75%,#0186b3 76%,#008bb4 85%,#028db6 85%,#008eb4 88%,#0292b7 92%,#0091b6 94%,#0193b8 94%,#0092b7 95%,#0196b7 98%,#0296ba 98%,#0094b8 98%,#0096b7 99%,#0296ba 99%,#0096b7 99%,#0197b8 100%,#000002 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000002',GradientType=1 ); /* IE6-9 */

    .directory-content{
        color: $white;
        max-width: 930px;
        margin: 0 auto;
        padding: 0 15px;
        text-align: center;
        h2{
            font-size: 3rem;
            font-weight: 300;
            margin: 0 0 2rem;
            strong{
                font-weight: 400;
            }
        }
        p{
            margin: 0;
            font-size: 1.75rem;
            line-height: 2.4rem;
            font-weight: 300;
        }
     
    .sec-box{        
        padding: 4.2rem 0 4.2rem;
        text-align: center;
        color: $white;
        position: relative;
        z-index: 1;
        width: 100%;
        h2{
            color: $white;
            font-weight: 400;
            margin: 0 0 2.75rem;
            font-size: 3rem;
        }
        ul{
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            li{
                list-style: none;
                display: inline-block;
                width: 16.66666666666667%;
                margin: 0 -2px 3.5rem;
                a{
                    color: $white !important;
                    display: inline-block;
                    line-height: 17px;
                    font-size: 1.25rem;
                    &:hover, &:active, &:focus {
                        text-decoration: none;
                        outline: none;
                        box-shadow: none;
                    };
                    span{
                        display: block;
                        margin-top: 0.75rem;
                    }
                }
            }
        }  
        .btn-all{
            margin-top: 1.5rem;
        }      
    }
}

.section-directory .directory-content {
    color: #ffffff;
    max-width: 930px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}
.cat-row{
    position: relative;
    .btn-cat{
        width: 340px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top:-26px;
        background-color: $white;
        border:2px solid $baseColor;
        border-radius: 30px;
        text-transform: uppercase;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 0;
        box-shadow: 0 2px 10px rgba($black,0.25);
        &.active{
            .cat-menu{
                .icon-bar{
                    &:first-child{
                        transform: rotate(45deg);
                        height: 3px;
                        width: 27px;
                    }
                    &:nth-child(2){
                        transform: rotate(-45deg);
                        height: 3px;
                        background-color: transparent;
                    }
                    &:nth-child(3){
                        transform: rotate(45deg);
                        height: 3px;
                        background-color: transparent;
                    }
                    &:nth-child(4){
                        transform: rotate(-45deg);
                        height: 3px;
                        width: 27px;
                        bottom: 5px;
                    }
                }
            }
        }
        .btn{
            background-color: transparent;
            padding: 0;
            border: none;
            font-size: 1.75rem;
            margin-right: 1rem;
            &:hover, &:active, &:focus{
                color: $baseColor!important;
                text-decoration: none;
            }
        }
        .cat-menu{
            color: $baseColor;
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: 600;
            position: relative;
            width: 26px;
            height: 30px;            
            .icon-bar {
                background-color: $baseColor;
                padding: 0;
                width: 26px;
                height: 3px;
                display: block;
                transition: all 0.4s ease-in-out;
                position: absolute;
                &:first-child{
                    transform-origin: 5%;
                    top: 5px;
                }
                &:nth-child(2){
                    top: 13px;
                }
                &:nth-child(3){
                    top: 13px;
                    right: 0;
                }
                &:nth-child(4){
                    transform-origin: 5%;
                    bottom: 6px;
                }
            }
        }
    }
    .grid-content-outer{
        padding: 6rem 0 3rem;
        box-shadow: 0 0 9px rgba(0,0,0,0.25);
        display: none;
        .grid-content{
            .col-lg-3{
                border-right: 1px dashed #15589e;
                border-bottom: 1px dashed #15589e;
                &:nth-child(4n){
                    border-right: none;
                }
                &:nth-child(5), &:nth-child(6), &:nth-child(7){
                    border-bottom: none;
                }
            }
            .cat-box{
                padding: 2rem 1rem 3rem;
                h4{
                    margin: 1rem 0 0;
                    font-weight: 600;
                    font-size: 1.5rem;
                    a{
                        color: #15589e;
                    }
                }
            }
        }    
    }
}