@media only screen and (min-width:1023px) and (max-width: 18023px){
#menu{
justify-content: center;
    display: flex;
    flex-wrap: wrap;	
}
header nav li:first-child{
	margin-left: 0;
}
.sp-close{
	text-align: left;
}
.sort-grid .acc-cont{
	position: absolute;
}
#hg_cursore{
    position: fixed;
    z-index: 2222;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: difference;

}
#hg_cursore span{
	display: none;
        transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        width: fit-content;
        color: #fff;
}
#hg_cursore.v-nav span.pp-btn {
	display: flex;

}
#hg_cursore.close-btn span.cl-btn,
#hg_cursore.v-nav-pl span.pl-btn {
	display: flex;
	
}
#hg_cursore.close-bt  span.pp-btn,
#hg_cursore.close-bt  span.pl-btn{
	display: none;
}
#hg_cursore.close-btn{
	opacity: 1;
}

#hg_cursore.v-nav{

	opacity: 1;
}
#hg_cursore.v-nav-pl{
	opacity: 1;
}
#hg_cursore *{
	text-transform: uppercase;
}
.v-i-btn span{
	cursor: pointer;
}
.v-i-btn span:hover:before{
	width: 0;
}
body.overlay-open main{
	z-index: 222;
	position: relative;
}
header .acc-cont{
	position: absolute;
	width: 25vw;
	left: auto;
	padding: 0;
}
	/*header*/
	header > div::after{
		content: '';
		position: relative;
		order: 10;
		width: 25%;
	}
	header > .hg-fl > div{
		width: 25%;
	}
	header > .hg-fl > div.m-nav{
		width: 50%;
	}
	header > .hg-fl {
		justify-content: space-between;
		width: 100%;
	}
	body.overlay-open{
		overflow-y: hidden;
	}
	header .logo{
		width: 38%;
	}
	.m-nav{
		justify-content: center;
	}
	.sort-grid{
		padding-left: 1em;
		z-index: 22;
		position: relative;
		display: flex;
	}
	/*header*/
	/*home*/
.is-wide #logo-home > div #logo_lp,
.is-wide #logo-home > div #logo_rp{
     -webkit-transition:all 0s ease-in-out;
     -webkit-transition-delay:0s;
     -o-transition:all 0s ease-in-out;
     -o-transition-delay:0s;
     -moz-transition:all 0s ease-in-out;
     -moz-transition-delay: 0s;
     transition:all 0s ease-in-out;
     transition-delay:0s; 	
}
#logo-home > div ,
#logo-home > div #logo_pp,
#logo-home > div #logo_l,
#logo-home > div #logo_r,
#logo-home > div #logo_lp,
#logo-home > div #logo_rp{
	cursor: pointer;
}



.home-des .links a:hover:before{
	width: 0;
}
.nn-pos #logo_lp,
 .nn-pos #logo_rp{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
    }	
#logo_lp{
        transform: translateX(calc(-50vw + (50% + 1em)));
        -webkit-transform: translateX(calc(-50vw + (50% + 1em)));
        -ms-transform: translateX(calc(-50vw + (50% + 1em)));
    }
#logo_rp{
        transform: translateX(calc(50vw - (50% + 1em)));
        -webkit-transform: translateX(calc(50vw - (50% + 1em)));
        -ms-transform: translateX(calc(50vw - (50% + 1em)));
    }
	.des-grid {
    position: absolute;
    top: calc(50% - 3em);
    top: -webkit-calc(50% - 3em);
    top: -moz-calc(50% - 3em);
    width: calc(100% - 30em);
    width: -webkit-calc(100% - 30em);
    width: -moz-calc(100% - 30em);
    left: 17em;
    justify-content: space-between;
	}
	/*home*/
	/*post*/
.sort-controls::after{
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgb(20 20 20 / 75%);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: -1;
}
.post-overlay-close.v-i-btn{
	width: fit-content;
	margin-left: 0;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
	z-index: 222;
	position: fixed;
	top: 1em;
	right: 1em;
	width: 100%;
}
.post-overlay-close *{
	pointer-events: all;
}
.post-overlay-close span{
 margin-bottom: 1em;
}

.v-i-btn{
	width: 25%;
	margin-left: 0;
	padding-left: 0;
}
.btn-grid .v-i-btn span::before{
	border-color: #fff;
}
.cred-btn.v-i-btn{
	width: 16.6%;
}
#custom-timeline .btn-grid::before{
	content: none;
	position: relative;
	width: 25%;
}
#custom-timeline{
	position: relative;
	padding: 0 0;
	mix-blend-mode: difference;
	top: auto !important;
	width: 60%;
	margin: 0 auto;
}
#custom-timeline *{
	color: #fff;
	border-color: #fff;
}
#custom-timeline figure{
	background: #fff;
}
.post-grid{
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.post-item{
	width: 24.5%;
}
.post-item .bgcov{
	height: 18vw;
}
.post-item.unactive_pc{
	opacity: .5;
}
.post-item.active_pc {
	z-index: 1;

}
.post-item.active_pc *{
	font-family: 'hg-tit';
}

.post-item *{
 color: #fff;
 mix-blend-mode: difference;
}
#post-grid{
	z-index: 1;
	position: relative;
	background: var(--bg);
	padding-top: 2em;
}
.p-post-img.active{
	opacity: 1;
}
#post-grid::before,
#post-grid::after{
	content:'' ;
	position: relative;
	order: 999999;
	width: 24.5%;
}
.post-item {
  mix-blend-mode: difference;
  z-index: 1;
}
.p-post-img {
    width: 60vw;
    height: -webkit-calc(60vw * .55);
    height: -moz-calc(60vw * .55);
    height: calc(60vw * .55);
    height: calc(60vw * .55);
    position: relative;
    opacity: 0;
margin-top: 2.4em;
}
.pc-img-post{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}


	.hg-img{
		margin-bottom: 8em;
	}
	.sort-controls{
		position: absolute;
	}
	.post-item a {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
	.tit-gird {
		pointer-events: none;
	}
	.tit-gird .tit-t{
		order: -2;
	}
	.tit-gird{
		margin-bottom: 1em;
	}
	.tit-gird .tit-t,
	.tit-gird .tit-c,
	.post-item a h2{
		width: 25%;
	}
	.tit-gird .tit-dat{
		order: 22;
	}	
	.tit-gird .tit-d,
	.tit-gird .tit-l{
		width: 16.6%;
	}
	.post-item .post-data{
		width: 75%;
	}
	.brand_item {
		width: 33.33%;
	}
	.location_item ,
	.directoc_item {
		width: 22.22%;
	}
	.tit-gird{
		opacity: 0.5;
	}
	.tit-gird *{
		text-transform: uppercase;
	}
	div[data-sort="loaction"] .tit-l,
	div[data-sort="brand"] .tit-c,
	div[data-sort="director"] .tit-d {
		order: -1;
	}
.post-item.active{
	z-index:1;
	pointer-events: none;
}
.post-overlay > figure{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: block;
}
.post-overlay{
	position: fixed;
	height: 100vh;
	width: 100vw;
	left: 0;
	top: 0;
	margin-top: 0;
    background: rgb(20 20 20 / 65%);
	-webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}
#custom-timeline{
	z-index: 2;
}
.post-overlay .video-grid{
	pointer-events: none;
	z-index: 2;

}
.post-overlay .video-grid *{
	pointer-events: all;
}
.post-overlay .video-grid {
	width: 60%;
	margin: 0 auto;
	opacity: 0;
}
.overlay-open .post-overlay .video-grid {
	opacity: 1;
}
.gall-items-post, .des-p-gird{
	padding: 1em 20%;
	padding-top: 4em;
	background: transparent;
}
.des-p-gird{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.des-p-gird::after{
	content: '';
	position: relative;
	order: 3
}
.video-grid {
    width: 100%;
    height: calc(60vw * 0.55);
    height: -webkit-calc(60vw * 0.55);
    height: -moz-calc(60vw * 0.55);
    overflow: hidden;
    position: relative;
}	
/*post*/
/*page*/
.cot-i{
	width: 25%;
	min-height: 30vh;
}
.cont-page::before,
.cont-page::after{
	content: '';
	position: relative;
	width: 25%;
	order: 44;
}
.marks::after,
.marks::before{
content: '';
position: relative;
    width: calc(25% - 1em);
    width: -webkit-calc(25% - 1em);
    width: -moz-calc(25% - 1em);
    order: 222;
}
.mark-item{
    width: calc(25% - 1em);
    width: -webkit-calc(25% - 1em);
    width: -moz-calc(25% - 1em);
}
.mark-item .bgcov{
    height: calc(25vw - 2em);
    height: -webkit-calc(25vw - 2em);
    height: -moz-calc(25vw - 2em);

}
.rec-grid{
padding: 1em 38%;
}
.for-vieod canvas,
.for-vieod {
      height: calc((24vw - 9em) * 0.75);
    height: -webkit-calc((24vw - 9em) * 0.75);
    height: -moz-calc((24vw - 9em) * 0.75);

}
.mark-btn{
	float: none;
	margin-top: 0;
	margin-bottom: 1em;
	padding-left: 1em;
	cursor: pointer;

}
.cot-i .bgcov{
	width: 9em;
	height: 9em;
}
/*page*/
}