.minihead {
    position: relative;
    text-align: center;
    width: 100%;
    height: calc(100% - 660px);
    min-height: 520px;
    display: flex
;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 120px 0 0;
    z-index: 2;
}


.minihead-txt {
    display: block;
    z-index: 1;
    width: 100%;
    padding: 0 30px;
    text-align: center;
    margin: -50px auto 0;
}

.minihead h1 {
    font-size: 120px;
    margin: 20px 0;
}
.minihead p {
    margin: 20px auto;
    font-size: 24px;
    line-height: 1.5;
    max-width: 960px;
}



.f-name {
    text-align: center;
    width: 100%;
    margin: 60px 0 0 0;
}

.f-img {
    position: absolute;
    top: 0;
    left: calc(50% - 30px);
}
.f-img img {
width: 60px;
}


.gallery-filter {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}


.filter-group {
max-width: 100%;
display: grid;
}

.filter-header {
    font-size: 15px;
    height: 60px;
    padding: 20px;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    vertical-align: top;
    transition: width 0.2s linear;
    border: 1px solid #eee;
}

.filter-header span{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
max-width: calc(100% - 20px);
}

.filter-header:after {
top: 23px;
width: 15px;
height: 15px;
right: 20px;
}

.has-selection .clear-filter {
display: inline-block;
}

.gal-drop {
display: block;
position: fixed;
top: -200%;
z-index: 100;
width: 100%;
right: 0;
transition: right 0.3s linear, top 0.3s linear, opacity 0.3s linear 0.5s;
}

.filter-in {
width: 100%;
max-width: 1200px;
background: #fff;
height: 100vh;
transition: right 0.3s linear, opacity 0.3s linear 0.5s;
margin: 0 auto;
position: relative;
}

.show-filter{
overflow:hidden;
}

.clear-filter{
display:none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;fill: %23000;' xml:space='preserve'%3e%3cpath class='st0' d='M50.6,59.1L69.4,78c1.1,1.1,2.5,1.6,4,1.6c1.5,0,2.9-0.6,4-1.6c1.1-1.1,1.6-2.5,1.6-4c0-1.5-0.6-2.9-1.6-4 L58.5,51.2l18.9-18.9c1.1-1.1,1.6-2.5,1.6-4c0-1.5-0.6-2.9-1.6-4c-1.1-1.1-2.5-1.6-4-1.6c-1.5,0-2.9,0.6-4,1.6L50.6,43.2l-18-18 c-1.1-1.1-2.5-1.6-4-1.6c0,0,0,0,0,0c-1.5,0-2.9,0.6-4,1.6c-1.1,1.1-1.6,2.5-1.6,4c0,1.5,0.6,2.9,1.6,4l18,18l-18,18 c-1.1,1.1-1.6,2.5-1.6,4c0,1.5,0.6,2.9,1.6,4c2,2,5.9,2,7.9,0L50.6,59.1'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 20px;
content: '';
height: 20px;
width: 20px;
background-position: 50%;
cursor: pointer;
border: 0;
background-color: #fff;
position: absolute;
right: 18px;
top: 20px;
z-index: 2;
}

.gal-drop.active {
top:0;
display:block
}


.filter-close{
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;fill: %23fff;' xml:space='preserve'%3e%3cpath class='st0' d='M50.6,59.1L69.4,78c1.1,1.1,2.5,1.6,4,1.6c1.5,0,2.9-0.6,4-1.6c1.1-1.1,1.6-2.5,1.6-4c0-1.5-0.6-2.9-1.6-4 L58.5,51.2l18.9-18.9c1.1-1.1,1.6-2.5,1.6-4c0-1.5-0.6-2.9-1.6-4c-1.1-1.1-2.5-1.6-4-1.6c-1.5,0-2.9,0.6-4,1.6L50.6,43.2l-18-18 c-1.1-1.1-2.5-1.6-4-1.6c0,0,0,0,0,0c-1.5,0-2.9,0.6-4,1.6c-1.1,1.1-1.6,2.5-1.6,4c0,1.5,0.6,2.9,1.6,4l18,18l-18,18 c-1.1,1.1-1.6,2.5-1.6,4c0,1.5,0.6,2.9,1.6,4c2,2,5.9,2,7.9,0L50.6,59.1'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 20px;
content: '';
height: 36px;
width: 36px;
border-radius: 50%;
display: block;
position: absolute;
top: 20px;
right: 20px;
background-position: 50%;
background-color: #000;
cursor: pointer;
font-size: 0;
}

.f-elements {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 40px 30px;
max-height: calc(100vh - 80px);
overflow: auto;
padding: 20px 0;
}


.search-f {
background: #f7f7f7;
height: 80px;
}
.search-input {
width: calc(100% - 100px);
box-sizing: border-box;
margin: 20px;
padding: 10px;
color: #212529;
background-color: #fff;
border-color: #bdbdbd;
outline: 0;
border: 1px solid #f1f1f1;
border-radius: 0.25rem;
}

.f-el {
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
width: 100%;
margin: 0 auto;
position: relative;
}

.f-models{
grid-template-columns: repeat(4, 1fr);
}

.f-models .f-img img {
width: 200px;
}
.f-models .f-img{
left: calc(50% - 100px);
}
.f-models .f-name {
margin: 130px 0 0 0;
}

.f-color {
grid-template-columns: repeat(5, 1fr);
}
.f-color .f-img img {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.f-color .f-img {
left: calc(50% - 60px);
}
.f-color .f-name {
margin: 120px 0 0 0;
}


.f-design{
grid-template-columns: repeat(4, 1fr);
gap: 40px 10px;
}

.f-design .f-img img {
width: 200px;
}
.f-design .f-img{
left: calc(50% - 100px);
}

.f-design .f-name {
margin: 200px 0 0 0;
}

.disabled .filter-header {
background: #eee;
cursor: not-allowed;
}

.filter-group.disabled{
display:none;
}

.fr2.gallery-filter{
grid-template-columns: repeat(2, 1fr);
}
.fr3.gallery-filter{
grid-template-columns: repeat(3, 1fr);
}
.fr4.gallery-filter{
grid-template-columns: repeat(4, 1fr);
}
.fr5.gallery-filter{
grid-template-columns: repeat(5, 1fr);
}

.portfoliocat .ob-block {
width: 100%;
height: 670px;
border: none;
white-space: normal;
color: #fff;
transition: opacity 0.5s ease-in, translate 2.5s cubic-bezier(0.22,1,0.36,1);
transition-delay: 0.3s;
translate: 0 50px;
border-radius: 30px;
margin:0;
}
.portfolio .ob-block a, .portfoliocat .ob-block a{
color:#fff;
}
.portfoliocat .cat{
grid-template-columns: repeat(2, 1fr);
gap: 20px 20px;
margin-top:0;
}



@media screen and (max-width:1220px){
.portfoliocat .cat {
    margin: 0;
}
.portfoliocat .ob-block {
    height: 620px;
}

.minihead h1 {
    font-size: 65px;
}
.minihead p{
font-size:22px;
max-width: 870px;
}
.minihead{
min-height: 420px;
}
}



@media screen and (max-width:1100px){
.portfoliocat .ob-block {
    height: 570px;
}
}


@media screen and (max-width:1024px){
.gallery-filter{
gap: 0px;
}
.filter-header {
border-radius: 0;
border-right: 0;
font-size: 14px;
padding: 21px 20px 20px 20px;
}
.filter-group:nth-child(1) .filter-header {
border-radius: 15px 0 0 15px;
}
.filter-group:nth-last-child(1) .filter-header {
border-radius: 0 15px 15px 0;
border-right: 1px solid #eee;
}
.f-elements{
grid-template-columns: repeat(5, 1fr);
}
.f-models {
grid-template-columns: repeat(3, 1fr);
gap: 30px 0px;
}
.f-design {
grid-template-columns: repeat(3, 1fr);
}
.f-color {
grid-template-columns: repeat(4, 1fr);
gap: 40px 0;
}

.gal-drop{
top:0;
right: -200%;
}
.gal-drop.active {
    right: 0;
}


.2filter-close {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 22 22' version='1.1' x='0px' y='0px' style='&%2310; fill: %23fff;&%2310;'%3e%3cg stroke='none' stroke-width='1' fill-rule='evenodd'%3e%3cpath d='M8.41421356,11 L15.7071068,3.70710678 C16.0976311,3.31658249 16.0976311,2.68341751 15.7071068,2.29289322 C15.3165825,1.90236893 14.6834175,1.90236893 14.2928932,2.29289322 L6.29289322,10.2928932 C5.90236893,10.6834175 5.90236893,11.3165825 6.29289322,11.7071068 L14.2928932,19.7071068 C14.6834175,20.0976311 15.3165825,20.0976311 15.7071068,19.7071068 C16.0976311,19.3165825 16.0976311,18.6834175 15.7071068,18.2928932 L8.41421356,11 Z' fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e");
        display: block;
        background-repeat: no-repeat;
        padding: 0 0 0 28px;
        color: #fff;
        background-color: #000;
        width: 36px;
        height: 36px;
        line-height: 37px;
        background-size: 20px;
        background-position: 5px 50%;
        border-radius: 36px;
        position: absolute;
        top: 12px;
        z-index: 5;
        left: 12px;
}

.2search-input {
    width: calc(100% - 71px);
    margin: 12px 20px 0 60px;
    outline: 0;
    border: 0;
}

.2search-f {
    background: #000000;
    height: 62px;
}
.portfoliocat .ob-block {
    height: 520px;
}
}

@media screen and (max-width:920px){
.portfoliocat .ob-block {
    height: 470px;
}
}


@media screen and (max-width:860px){

.minihead h1 {
        font-size: 60px;
    }
.minihead p {
        font-size: 20px;
        max-width: 760px;
    }
    .minihead {
        min-height: 380px;
    }
}


@media screen and (max-width:820px){
.portfoliocat .ob-block {
    height: 420px;
}
}


@media screen and (max-width:760px){
.portfoliocat .ob-block {
    height: 380px;
}
}


@media screen and (max-width:720px){
.gallery-filter {
gap: 20px;
grid-template-columns: repeat(1, 1fr)!important;
}
.filter-group .filter-header{
border-radius:15px;
border: 1px solid #eee;
}
.filter-group:nth-child(1) .filter-header {
border-radius: 15px;
}
.filter-group:nth-last-child(1) .filter-header {
border-radius: 15px;
}
.f-elements{
grid-template-columns: repeat(4, 1fr);
}
.f-models {
grid-template-columns: repeat(2, 1fr);
}
.f-design {
grid-template-columns: repeat(2, 1fr);
}
.f-color {
grid-template-columns: repeat(3, 1fr);
}
.minihead h1 {
font-size: 55px;
}
.minihead p {
font-size: 18px;
}
.minihead {
height: 360px;
min-height: auto;
}


}


@media screen and (max-width:680px){
.portfoliocat .ob-block {
    height: 340px;
}
}




@media screen and (max-width:620px){
.minihead h1 {
font-size: 50px;
}
.minihead p {
font-size: 16px;
}

.filter-close{
top:12px;
right:12px;
}
.search-input{
margin:12px;
}
.search-input {
    width: calc(100% - 72px);
}
.search-f {
    height: 61px;
}
.f-elements {
    max-height: calc(100vh - 61px);
}

.portfoliocat .cat {
    grid-template-columns: repeat(1, 1fr);
}
.portfoliocat .ob-block{
    height: 660px;
}

}


@media screen and (max-width:580px){
.portfoliocat .ob-block{
    height: 600px;
}
}


@media screen and (max-width:530px){
.portfoliocat .ob-block {
    height: 530px;
}
}


@media screen and (max-width:520px){
.minihead h1 {
font-size: 45px;
}
	
	
}


@media screen and (max-width:480px){
.f-elements{
grid-template-columns: repeat(3, 1fr);
}
.f-models {
grid-template-columns: repeat(2, 1fr);
}
.f-design {
grid-template-columns: repeat(2, 1fr);
}
.f-color {
grid-template-columns: repeat(2, 1fr);
}
.f-models .f-img img {
width: 180px;
}
.f-models .f-img {
left: calc(50% - 90px);
}
.f-models .f-name {
margin: 120px 0 0 0;
}
.f-design .f-img img {
width: 180px;
}
.f-design .f-name {
margin: 180px 0 0 0;
}
.f-design .f-img {
left: calc(50% - 90px);
}
}


@media screen and (max-width:470px){
.portfoliocat .ob-block{
    height: 460px;
}
}


@media screen and (max-width:460px){
    .minihead h1 {
        font-size: 40px;
    }
}


@media screen and (max-width:420px){
.portfoliocat .ob-block {
    height: 420px;
}
}

@media screen and (max-width:390px){
.portfoliocat .ob-block {
    height: 390px;
}
}


@media screen and (max-width:360px){
.portfoliocat .ob-block {
    height: 360px;
}
}
@media screen and (max-width:340px){
.portfoliocat .ob-block {
    height: 340px;
}
}