/*all*/
#menu{
justify-content: flex-end;
    display: flex;
    flex-wrap: wrap;	
}
footer{
	z-index: 22;
	pointer-events: none;
}
footer *{
	pointer-events: none;
}
footer a{
	pointer-events: all;
}
#fieldCanvas *,
#fieldCanvas{
	pointer-events: none;
}
.home-page footer{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
}
footer  li{
	margin: 0 .5em;
}
footer #menu_f *{
	text-transform: uppercase;
}
footer #menu_f{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer nav{
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	padding: 1em 0;
}
footer .sp-h-nav{
	    display: none;
}
footer {
	display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: #D0D1CD;
    background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 1) 100%);
    z-index: -1;
    pointer-events: none;
}


body.open-l *{
	color: var(--col);
}
#logo *,
#logo_pp *,
.logo svg *{
	fill: var(--col) !important;
}
body.cred-open .post-item.active,
body.bts-open .post-item.active{
	opacity: 0;
	pointer-events: none;
     -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; 

}
.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;
}
.sort-grid .acc-cont{
	width: 100%;
}
.sort-grid[hidden]{
	display: none;
}
.sort-grid{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	z-index: 22;
}
.sort-grid .acc-cont a{
	pointer-events: all;
}
.sort-grid .acc-cont{
	pointer-events: none;
}
.sort-grid .acc-cont{
	position: absolute;
}
.sort-grid .acc-cont{
	padding-top: 1em;
}
#hg-preloader{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: var(--bg);
	top: 0;
	left: 0;
	z-index: 2222;
}
.h-pre #hg-preloader{
	opacity: 0;
	pointer-events: none;
}
.acc-cont{
	display: none;
}
.def_des b,
.def_des strong{
	font-family: 'hg-tit';
}
.def_des * {
	padding-bottom: 1em;
}
.hg-pad{
	padding: 1em;
}
.bgcov_v video{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: fill;
    width: 100%;
    height: 100%;
    background-position: center center;
    object-fit: cover;
    object-position: center center;
}
body{
	padding-top: 5em;
}
body.home-page{
	padding-top: 0;
}
header .logo{
	flex-direction: column;
}
header .logo span{
	font-weight: bold;
}
header .acc-cont{
	position: absolute;
	width: 100vw;
	left: 0;
	padding: 1em;
	top: 100%;
}
/*all*/
/*header*/
header > .hg-fl.sort-grid{
	justify-content: flex-start;
}
header > .hg-fl > div.for-sort,
header > .hg-fl > div.for-search,
header > .hg-fl > div.acc-tit{
	width: fit-content;
	position: relative;
}
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	justify-content: space-between;
	align-content: center;
	z-index: 22;

}
body.home-page header::after{
	content: none;
}
header::after{ 
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200%;
background: var(--bg);
background: linear-gradient(180deg,rgba(22, 22, 22, 1) 0%, rgba(22, 22, 22, 0) 100%);
z-index: -1;
pointer-events: none;
}
header >.hg-fl{
	width: 100%;
	justify-content: space-between;
	align-content: center;
}
header nav li{
	margin-left: 1em;
}
header .logo svg{
	height: 1em;
	width: auto;
}
header * {
	text-transform: uppercase;
}
/*header*/
/*home*/
 #logo-home{
    width: 100%;
    height: 100dvh;
    justify-content: center;
    align-content: center;
    flex-grow: 1;
    position: relative;
    z-index: 4;
    display: flex;
    padding: 0 ;
    pointer-events: none;
}
#logo-home div{
	    pointer-events: all;
}

#logo-home > div{
	pointer-events: none;
	width: fit-content;
	margin: 0 auto;
	pointer-events: all;
}
 #logo-home > div svg{
 	pointer-events: all;
 }
 #logo-home > div{
 	width: 100%;
 	pointer-events: none;
 }
.open-l #logo-home > div{
	width: 100%;
	pointer-events: none;
}
#logo-home svg{
    display: flex;
    justify-content: center;
    width: 100%;
    pointer-events: none;
}

#logo-home > div  #logo_p,
#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{
	pointer-events: all;
}
.open-l .home-des{
    opacity: 1;
    pointer-events: all;
}
.home-des{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    z-index: 2
}
.home-des .bgcov_v{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#logo_l{
        transform: translateX(calc(-50vw + (50% + 1em)));
        -webkit-transform: translateX(calc(-50vw + (50% + 1em)));
        -ms-transform: translateX(calc(-50vw + (50% + 1em)));
    }
#logo_r{
        transform: translateX(calc(50vw - (50% + 1em)));
        -webkit-transform: translateX(calc(50vw - (50% + 1em)));
        -ms-transform: translateX(calc(50vw - (50% + 1em)));
    }
.nn-pos #logo_lp,
.nn-pos #logo_l{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
    }
 .nn-pos #logo_rp,
.nn-pos #logo_r{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
    }


.des-grid{
	position: absolute;
	top: calc(50% + 8.93em);
    top: -webkit-calc(50% + 8.93em);
    top: -moz-calc(50% + 8.93em);
    left: 0;
	width: 100%;
}
.des-grid .links{
	margin-left: 2.66em;
	display: flex;
	flex-direction: column;
}
.des-grid .links a::before{
	content: '';
	position: absolute;
	border-bottom: 1px solid var(--col);
	left: 0;
	bottom: 0;
	width: 100%;
}
.des-grid .links a{
	margin-bottom: 1em;
	position: relative;
	display: inline-flex;
	width: fit-content;

}
/*home*/
/*post*/
.post-overlay-close.v-i-btn{

	justify-content: flex-end;
	display: flex;
	margin-bottom: 1em;
	width: 100%;
	position: fixed;
	top: 1em;
	left: 0;
	padding-right: 1em;
	z-index: 2222;
}
.post-overlay-close.v-i-btn span{
	width: fit-content;
}
body .sort-item.active{
	font-family: 'hg-tit';
}
div[data-sort="brand"] .loaction_item,
div[data-sort="brand"] .brand_item,
div[data-sort="director"] .directoc_item {
	order: -1;
}
div[data-sort="director"] .directoc_item{

}
.acc-tit{
	padding-top: 0;
	padding-left: 0;
	justify-content: space-between;
}
.acc-tit svg{
	height: 1em;
	width: auto;
	opacity: 0;
	pointer-events: none;
}

.acc-tit *,
.acc-tit{
	font-family: 'hg-des';
	cursor: pointer;
}
.acc-tit.active *,
.acc-tit.active{
	font-family: 'hg-tit';
}
.acc-tit,
.sort-controls,
.sort-controls *{
	text-transform: uppercase;
}
.sort-controls{
	top: 1em;
}
.sort-controls{
	flex-direction: column;
	display: flex;
	padding-left: 0;

}
.sort-controls span{
	margin-bottom: 1em;
}
.hg-img{
	margin-bottom: 6em;
}
.hg-img img{
	width: 100%;
	height: auto;
	position: relative;
}
.gall-items-post.active,
.des-p-gird.active{
	opacity: 1;
	pointer-events: all;
}
.gall-items-post,
.des-p-gird {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	background-color: var(--bg);
	z-index: 222;
	opacity: 1;
	pointer-events: all;
	padding-bottom: 2em;
}
.gall-items-post .btn-grid ,
.des-p-gird .btn-grid {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.gall-items-post .btn-grid .bts-btn span::before,
.des-p-gird .btn-grid .cred-btn span::before{
	border-bottom: 1px solid var(--col);
}
.gall-items-post .btn-grid .bts-btn,
.des-p-gird .btn-grid .cred-btn{
	width: fit-content;
}
.des-p-gird *,
.des-p-gird{
	text-align: center;
	align-items: center;
}
.des-p-gird *{
	width: 100%;
}
.play-btn.active .p-btn,
.ps-btn{
	display: none;
}
.play-btn .p-btn,
.active > .ps-btn{
	display: flex;
}
.btn-grid{
	margin-bottom: 4em;

}
.btn-grid *{
	text-transform: uppercase;
}
.btn-grid{
	align-content: flex-start;
}
.v-i-btn:first-child{
	padding-left: 0;
}
.v-i-btn{
	width: 25%;
	padding-left: 1em
}
.v-i-btn span{
	position: relative;
	width: fit-content;
	text-transform: uppercase;
}
.sp-close:hover:before{
	width: 0;
}
.sp-close::before,
.v-i-btn span::before{
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid var(--col);
}
.buffer-bar,
.buffer-bar *{
	pointer-events: none;
}
.time-bar {
	position: relative;
	width: 0;
}
#timeline{
    position: absolute;
    top: 2em;
    left: 0;
    padding: 0;
    margin-top: -1px;
    opacity: 0;
    z-index: 222;
    cursor: pointer;
}
.progress-bar {
	position: relative;
	width: 100%;
	margin: 2em 0;
	height: 1em;
}
.time-bar figure {
    background: var(--col);
    width: 1em;
    height: 1em;
    position: absolute;
    right: 0;
    bottom: .5em;
}
.progress-bar::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	margin-top: -.5px;
	width: 100%;
	border-bottom: 1px dashed var(--col);
}
.time-bar{
	position: absolute;
	left: 1em;
	bottom: -.5em;
	border-bottom:4px  #000;
}

.preload-p-v{
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    filter: blur(10px);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.current-menu-item,
.current-menu-item *,
.post-item.active *{
	font-family: 'hg-tit';
}
.post-item.unactive{
	opacity: .5;
}
.post-item .bgcov{
	width: 100%;
	height: 90vw;
}
.post-item a{
	position: relative;
	display: flex;
	width: 100% ;
	flex-direction: column;
}
.post-item *{
	text-transform: uppercase;
}
.post-item h2,
.post-item  .post-data,
.post-item {
position: relative;
width: 100%;
}
.post-item h2{
	font-family: 'hg-des';
}
.post-item{
	margin-bottom: .5%;
}
.pr-tpl .des{
	flex-direction: column;
}
    .video-grid {
        width: 100%;
        height: calc(100vw * 0.55);
        height: -webkit-calc(100vw * 0.55);
        height: -moz-calc(100vw * 0.55);
        overflow: hidden;
        position: relative;


    }
#hg_vimeo_v {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#hg_vimeo_v .bgcov{
	position: absolute;
	top: -5%;
	left: -5%;
	width: 110%;
	height: 110%;
    filter: blur(20px);
    z-index: -1;
}
#hg_vimeo_v iframe {
    width: 110%;
    height: 110%;
    pointer-events: none;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    margin-left: -5%;
    margin-top: -2.5%;
}
.post-overlay{
	width: 100%;
	margin-top: 2em;
}
.post-overlay > figure{
display: none;
}
/*post*/
/*page*/
.mark-btn{
	margin-right: 1em;
	width: fit-content;
	float: right;
}
/*cont-page*/
.cont-page{
	align-items: stretch;
	justify-content: space-between;
}
.cot-i{
	margin-bottom: 3em;
	width: calc(50% - .5em);
    width: -webkit-calc(50% - .5em);
    width: -moz-calc(50% - .5em);
}
.cot-i .bgcov{
	width: 5em;
	height: 5em;
	margin-bottom: 1em;
	background-position: left center;
}
.hg-img span{
	text-transform: uppercase;
}
/*cont-page*/

/*page*/
.marks{
	justify-content: space-between;
	align-content: flex-start;
	position: relative;
} 
.mark-item{
	position: relative;
	width: 100%;
	height: auto;
    margin-bottom: 1em;
}
.mark-item *{
	text-transform: uppercase;
}
.mark-item .bgcov{
	width: 100%;
	height: calc(100vw - 2em);
    height: -webkit-calc(100vw - 2em);
    height: -moz-calc(100vw - 2em);
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    border: 1px solid var(--col);
    overflow: hidden;
    position: relative;

}

.rec-grid{
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100vw;
    	height: 100vh;
	    -webkit-backdrop-filter: blur(10px);
	    backdrop-filter: blur(10px);
	    background: rgb(255 255 255 / 25%);
    z-index: 222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: : center;
    padding: 0 1em;
    opacity: 0;
    pointer-events: none;
    }
.mark-open .rec-grid{
	opacity: 1;
	pointer-events: all;
}    

.rsh-ugc-recorder {
	width: 100%;
	margin: 0 auto;
	background: var(--bg);
	border: 1px solid var(--col);
	padding: 3em 3.5em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    overflow: hidden;
    position: relative;
}
.for-vieod canvas{
	width: 100%;
	height: calc((100vw - 9em) * 0.75);
    height: -webkit-calc((100vw - 9em) * 0.75);
    height: -moz-calc((100vw - 9em) * 0.75);
}
.for-vieod{
	width: 100%;
	height: calc((100vw - 9em) * 0.75);
    height: -webkit-calc((100vw - 9em) * 0.75);
    height: -moz-calc((100vw - 9em) * 0.75);
    position: relative;
    display: block;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    overflow: hidden;
	border: 1px solid var(--col);
}
.rsh-ugc-recorder video{
	width: 100%;
	height: auto;
}
.bnts-grid button{
	border: 0px solid;
	padding: 0;
	text-decoration: underline;
	text-transform: uppercase;
}
.bnts-grid{
	opacity: 1;
	pointer-events: all;
	padding: 5em 0;
	flex-direction: column;
}
.bnts-grid > div{
	width: 100%;
	position: relative;
}
.bnts-grid *{
	text-align: center;
}
.rsh-ugc-countdown,
.rsh-ugc-controls{

}
.rsh-ugc-status[hidden]{
	opacity: 0;
	pointer-events: none;
}
.rsh-ugc-status{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
	opacity: 1;
	pointer-events: all;
}
.close-mark.v-i-btn{
	width: 100%;
	justify-content: flex-end;
	margin-bottom: 1em;
	position: relative;
	display: flex;
}
.nf-page{
	height: 100vh;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
}
.nf-page .def_des{
	text-align: left;
	padding-right: 30%;
	padding-bottom: 20%;
}
@media only screen and (min-width:1px) and (max-width: 413px){
	body{
		font-size: 10px
	}
}