.subMainContent {
    margin-top: 94px;
}

@keyframes slide {
    0% {
        transform: translateY(10%);
    }

    100% {
        transform: translateY(-10%);
    }
}

.subContentHead {
    box-shadow: inset -1px 10px 32px 0px rgba(0, 0, 0, 0.06);
    height    : 60px;

    &>.container {
        display        : flex;
        height         : 100%;
        justify-content: space-between;
        align-items    : center;

        &>div {
            display    : flex;
            align-items: center;
            height     : 100%;
            flex       : 1;
        }

        .filterResultTitle {
            font-family : 'GilroyExtraBold';
            font-size   : 13.11px;
            color       : #1f1d1d;
            padding-left: 24px;
        }

        .searchButton {
            font-family  : 'GilroyBlack';
            font-size    : 12.25px;
            color        : #1f1d1d;
            border-right : 2px solid rgba(175, 175, 175, 0.28);
            height       : 40px;
            padding-right: 20px;
            display      : flex;
            align-items  : center;
            transition   : all .3s ease-in-out;

            &:hover {
                opacity: 0.8;
            }
        }
    }

    .filterButton {
        display        : flex;
        align-items    : center;
        height         : 100%;
        box-shadow     : inset -1px 10px 32px 0px rgba(0, 0, 0, 0.06);
        max-width      : 247px;
        width          : 100%;
        display        : flex;
        align-items    : center;
        padding-left: 20px;

        &:hover {
            .filterIconArea {
                .customIcon {
                    &:nth-child(1) {
                        animation: none;

                    }

                    &:nth-child(2) {
                        animation: none;

                    }

                    &:nth-child(3) {
                        animation: none;
                    }
                }
            }
        }

        .filterIconArea {
            display        : flex;
            align-items    : center;
            justify-content: space-between;
            width          : 21px;
            height         : 18px;
            margin-right: 29px;

            .customIcon {
                width          : 7px;
                font-size      : 17px;
                color          : #1f1d1d;
                display        : flex;
                align-items    : center;
                justify-content: center;

                &:nth-child(1) {
                    animation: slide 1000ms linear infinite alternate;

                }

                &:nth-child(2) {
                    animation: slide 3000ms linear infinite alternate;

                }

                &:nth-child(3) {
                    animation: slide 2000ms linear infinite alternate;
                }
            }
        }

        .title {
            font-family: 'GilroyExtraBold';
            font-size  : 13.94px;
            color      : #1f1d1d;
            letter-spacing: 1.3px;
        }
    }
}

.subContentBody {
    &.shadowTop {
        box-shadow: inset -1px 10px 32px 0px rgba(0, 0, 0, 0.06);
    }

    .dFlex {
        display   : block;
        transition: all .3s linear;
    }

    .filterColumn {
        width        : 100%;
        height       : 100%;
        transition   : all .3s linear;
        
        .filterInput {
            // border        : 2px solid rgba(175, 175, 175, 0.28);
            // border-top    : none;
            // padding-left  : 20px;
            // padding-right : 20px;
            // padding-bottom: 20px;

            .filterTitle {
                font-family: 'GilroyExtraBold';
                font-size  : 12.8px;
                color      : #171717;
                text-align : left;
                // height     : 65px;
                display    : flex;
                align-items: center;
            }

            input[type="text"] {
                border     : 2px solid rgba(175, 175, 175, 0.28);
                outline    : 0;
                width      : 100%;
                height     : 50px;
                font-family: 'GilroySemibold';
                font-size  : 12px;
                color      : rgba(23, 23, 23, 0.67);
                padding    : 0 12px;
            }
        }

        .filterButtonArea {
            display: flex;
            align-items: center;
            height: 44px;
            &.passive{
                display: none;
                &.active{
                    display: flex;
                }
            }

            .grayButton {
                margin-top: 0;
                width     :auto;
                height: 100%;
                padding: 0 20px;
                border    : 2px solid rgba(175, 175, 175, 0.28);
            }

            .clearButton {
                display        : flex;
                align-items    : center;
                justify-content: center;
                font-family    : 'GilroySemibold';
                color          : rgba(23, 23, 23, 0.67);
                font-size      : 10.94px;
                transition     : all .3s linear;
                margin-left: 20px;

                &:hover {
                    color: rgba(23, 23, 23, 1);

                    .customIcon {
                        color: rgba(23, 23, 23, 1);
                    }
                }

                .customIcon {
                    color       : rgba(23, 23, 23, 0.67);
                    font-size   : 17px;
                    margin-right: 7px;
                    transition  : all .3s linear;
                }
            }
        }
    }

    .rightColumn {
        width       : 100%;
        transition  : all .3s linear;
        padding-left: 0;
        .collectionsTags{
            padding: 36px 0;
        }
    }
}

/*Filtreleme*/
.filterAccList {
    margin-top:14px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    transition: all .3s linear;
    .passive{
        display: none;
        &.active{
            display: block;
        }
    }
    .filterDd{
        position: relative;
        margin: 0 0 20px 0;
        padding: 0 5px 0 5px;
        transition: all .3s linear;
    }
    .filterTitle {
        position    : relative;
        font-family : 'GilroyExtraBold';
        font-size   : 12.8px;
        color       : #171717;
        text-align  : left;
        height      : 44px;
        display     : flex;
        align-items : center;
        border: 2px solid rgba(175, 175, 175, 0.28);
        padding: 0 15px 0 10px;

        &:hover {
            cursor: pointer;
        }
        &:after {
            content            : "";
            background-image   : url('../img/icons/dd-arrow.png');
            background-repeat  : no-repeat;
            background-size    : contain;
            background-position: center;
            width              : 8px;
            height             : 7px;
            display: inline-block;
            position: relative;
            margin-left: 25px;
            transition: all .3s linear;
        }
    }

    .filterContent {
        height      : 0;
        opacity     : 0;
        overflow    : hidden;
        visibility  : hidden;
        transition  : all .3s linear;
        direction   : rtl;
        text-align  : left;
        padding: 20px 10px;
        position: absolute;
        left: 5px;
        top: 44px;
        box-shadow : -1px 10px 32px 0px rgba(0, 0, 0,  0.06);
        background-color: #ffffff;
        width: calc(100% - 10px);
        z-index: 2;
        .cb-checkbox {
            padding-left : 27px;
            margin-bottom: 5.6px;
            height: auto;

            &.radio {
                .checkmark {
                    width : 17px;
                    height: 17px;

                    &:after {
                        width : 9px;
                        height: 9px;
                    }
                }
            }

            span {
                &.text {
                    text-align : left;
                    width      : 100%;
                    font-family: 'GilroyBold';
                    font-size  : 11.88px;
                    color      : #171717;
                    line-height: 17px;
                }

                &.length {
                    color      : #aeaeae;
                    font-family: 'GilroyExtraBold';
                }
            }
        }

        .filterList {
            height       : 100%;
            overflow     : auto;
            overflow-x   : hidden;
            padding: 0 10px;
        }

        &.active {
            overflow  : visible;
            visibility: visible;
            opacity   : 1;
            height: 220px;
        }
    }
}
.filterArea{
    position: relative;
    padding-right: 40px;
    .allFilterButton{
        position: absolute;
        right: 0;
        top:0;
        border:2px solid rgba(175, 175, 175, 0.28);
        height: 44px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(175, 175, 175, 0.28);
            display: block;
        }
        &:before,
        &:after{
            content:"";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(175, 175, 175, 0.28);
            position: absolute;
        }
        &:before{
            top:6px;
        }
        &:after{
            bottom:6px;
        }
    }
}

/*Filtreleme Başlık Alanı*/
.filterHead {
    display        : flex;
    align-items    : flex-end;
    justify-content: space-between;
    text-align     : left;
    margin-bottom: 53px;
    margin-top: 11px;

    &.type-2 {
        margin-top: -60px;
    }

    .filterResultColumn {
        span {
            font-family: 'GilroyRegular';
            font-size  : 2.075rem;
            color      : #1f1d1d;

            &.collectionName {
                font-family: 'GilroyExtraBold';
            }

        }
    }

    .resultCountArea {
        font-family: 'GilroyMedium';
        font-size  : 1.269rem;
        color      : rgba(31, 29, 29, 0.41);

        strong {
            font-family: 'GilroyBlack';
        }

        .resultCollectionCount {
            font-family: 'GilroyBlack';
            font-size  : 1.269rem;
            color      : rgba(31, 29, 29, 0.41);
        }
    }

    .filterListingFormat {
        display        : flex;
        align-items    : center;
        justify-content: flex-end;

        span {
            font-family: 'GilroySemibold';
            font-size  : 12.42px;
            color      : rgba(67, 66, 66, 0.30);
        }

        a {
            margin-left: 7px;

            img {
                filter    : invert(88%);
                transition: all .3s linear;
            }

            &:hover,
            &.active {
                img {
                    filter: invert(78%);
                }
            }
        }
    }
}

/*Diğer Select Listeleme*/
.otherFilterSelectArea {
    display    : flex;
    align-items: center;
    padding-top: 60px;

    .selectArea {
        min-width  : 148px;
        margin-left: 3px;

        &:first-child {
            margin-left: 0;
        }
    }
}

/*Profil*/
.tabsContent {
    .tabContent{
        .head{
            margin-top: 70px;
            margin-bottom: 30px;
        }
    }
    .filterHead {
        margin-bottom: 25px;
    }
    .gallery-box{
        margin-bottom:26px;
    }
}
/*paragraph */
.paragraph{
    padding-bottom: 20px;
    p{
        font-size: 1.333rem;
        color: #171717;
        padding: 9px 0;
        font-family: 'GilroyMedium';
        line-height: 1.3rem;
    }
}
@media screen and(max-width:1024px) {
    .filterHead {
        &.type-2 {
            margin-top: 40px;
            display   : block;

            .filterListingFormat {
                margin-top: 30px;
            }

            .otherFilterSelectArea {
                padding-top: 30px;
            }
        }
    }
}

@media screen and(max-width:768px) {
    .subContentBody {
        .dFlex {
            display: block;
        }

        &.filterShow {
            .leftColumn {
                position        : absolute;
                background-color: #ffffff;
                z-index         : 99;
                box-shadow      : -2px 29px 40px 18px rgba(0, 0, 0, 0.64);
                overflow        : scroll;
                overflow-x      : hidden;
                height          : calc(100% - 135px);
                padding-bottom  : 20px;
                left            : 0;
                max-width       : initial;
                width           : 100%;
                box-shadow      : none;
            }

            .rightColumn {
                width       : 100%;
                padding-left: 0;
            }
        }
    }

    .filterHead {
        display: block;

        .filterListingFormat {
            justify-content: flex-end;
            margin-top     : 20px;
        }
    }

    .subContentHead {
        .filterButton {
            max-width: 165px;
        }
    }
    .filterAccList{
        .filterDd{
            width: 50%;
            .filterTitle{
                &:after{
                    position: absolute;
                    right: 20px;
                }
            }
        }
    }
}

@media screen and (max-width: 630px) {
    .filterHead {
        &.type-2 {
            .otherFilterSelectArea {
                display: block;

                .selectArea {
                    margin-left  : 0;
                    margin-bottom: 3px;
                }
            }
        }
    }
}

@media screen and (max-width: 560px) {
    .subContentHead {
        .filterButton {
            width      : auto;
            padding    : 0 20px;
            margin-left: -15px;

            .title {
                display: none;
            }
        }
    }
}

@media screen and(max-width:480px) {
    .filterHead {
        margin-bottom: 35px;

        .filterResultColumn {
            text-align: center;
        }

        .filterListingFormat {
            margin-top: 35px;
        }
    }
}