/*!
Theme Name: BlackMongoose
Theme URI: https://www.dinoballiana.com
Author: Dino Balliana
Author URI: https://www.dinoballiana.com
Description: Portfolio
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: blackmongoose
Tags: custom-portfolio

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

BlackMongoose is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Reset
	- Globals
	- Document
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/* FONTS */

 @font-face {
	 font-family: 'Moderat Extended';
	 src: url('fonts/Moderat-Extended-Bold.woff2') format('woff2'), url('fonts/Moderat-Extended-Bold.woff') format('woff');
	 font-weight: 700;
	 font-style: normal;
	 font-display: block;
}
 @font-face {
	 font-family: 'Moderat Extended';
	 src: url('fonts/Moderat-Extended-Bold-Italic.woff2') format('woff2'), url('fonts/Moderat-Extended-Bold-Italic.woff') format('woff');
	 font-weight: 700;
	 font-style: italic;
	 font-display: block;
}
 @font-face {
	 font-family: 'Moderat Extended';
	 src: url('fonts/Moderat-Extended-Regular.woff2') format('woff2'), url('fonts/Moderat-Extended-Regular.woff') format('woff');
	 font-weight: 400;
	 font-style: normal;
	 font-display: block;
}
/* GLOBALS */

/* variables */

 :root {

   /* colors */

	 --violet: #D446FF;
	 --green: #00fa58;
	 --orange: #ff5700;
	 --pink: #ff74ae;
	 --grey: #b2b2b2;

   /* text */

   --text-bigger:60px;
   --text-bigger-h:62px;

   --text-big:30px;
   --text-big-h:37px;

   --text-small:12px;
   --text-small-h:18px;

   /* spaces */

   --margin: 20px;
	--margin-s:8px;	 
   --margin-m: 50px;
	 --margin-b: 120px;
	 --margin-e: 180px;
   --header-h:52px;
	 --contact-h: 150px;
	 
	 /* Layers */
	 --first:99999;
	 --second:9999;
	 --third:999;
	 --last:99;
}

@media screen and (max-width:1024px){
	:root{
		--margin-b: 80px;
		--contact-h:229px;
		--margin-m: 40px;
	}
	.mobile-hide{
		display:none;
	}
}

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

   /* text */

   --text-bigger:38px;
   --text-bigger-h:39px;

   --text-big:20px;
   --text-big-h:25px;

   --text-small:11px;
   --text-small-h:20px;

   /* spaces */

   --margin: 10px;
   --header-h:31px;
	 --contact-h: 230px;

}

}


/* Document
	 ========================================================================== */

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html, html * {
    -webkit-tap-highlight-color: transparent;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	margin:0 !important;
	overflow: visible;
  height: 100%;
}

#wpadminbar{
display:none !important;
}

body {
	margin: 0 !important;
	background-color: white;
  color:black;
  font-family: 'Moderat Extended', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:var(--text-small);
	overscroll-behavior-y: none;
}

body.on-contact, body.home,body.slide-up.on-contact{
  overflow: hidden;
}

body.slide-up{
	overflow: visible;
  height: 100%;
}

body, html, .site, .site-main{

}

main {
	display: block;
}


/*--------------------------------------------------------------
# Text
--------------------------------------------------------------*/

/* selection */

::selection{
  background-color: var(--accent);
  color:black;
}

::-moz-selection{
	 background-color: var(--accent);
  color:black;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;

}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0;
}

address {
	margin: 0;
}

ul,
ol {
	margin:0;
}

ul, ol {
	list-style: none;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 0;
}

/* Text Style */

.text-accent{
	color:var(--accent);
}

.text-w-italic strong{
  font-style: italic;
}

.text-w-accent strong{
  color:var(--accent);
}

.text-bold{
  font-weight:700;
}


.text-bigger {
 font-size: var(--text-bigger);
 line-height: var(--text-bigger-h);
}

.text-big {
 font-size: var(--text-big);
 line-height: var(--text-big-h);
}

.title-small {
 font-size: var(--text-small);
 line-height: var(--text-small);
}

.text-small {
 font-size: var(--text-small);
 line-height: var(--text-small-h);
}


/* Links
--------------------------------------------- */
a, button {
text-decoration:none;
	color:black;
	border:none;
	background-color:transparent;
	padding:0;
	text-transform:uppercase;
	font-family: 'Moderat Extended', sans-serif;
	font-size:var(--text-small);
	line-height:var(--text-small);
	cursor:pointer;
	display:inline-block;
}

button:hover,a:hover{
	transform: skew(-14deg);
}


a.logo-link:hover{
	transform: skew(0);
}



a:hover,
a:focus,
a:active,
button:hover,
button:focus,
button:active,
a:visited,
button:visited {
	outline: none;
	box-shadow:none;
}


.link-italic{
  position: relative;
  cursor: pointer;
}

.link-italic:hover{
  transform: skew(-14deg);
}

/* Animation
--------------------------------------------- */

/* Page default animation */

.first-animation{
	opacity:0;
}

.second-animation{
	opacity:0;
	transform:translate3d(0,30px,0);
}

.ready .first-animation{
	opacity:1;
}

.ready .second-animation{
	opacity:1;
	transform:translate3d(0,0px,0);
}

.first-animation{	
	transition:opacity 1s ease .8s;
}

.second-animation{	
	transition: opacity .6s ease 1.1s, transform 1s ease .9s;
}


/* Lazy animation */

.lazy-item .media_wrap{
	overflow: hidden;
	 background-color: var(--white);
}

.lazy-item .prj-item-media{
	position:relative;
	transform:scale(1.2);
	opacity:0;
}

.lazy-item .prj-item-media{
	position:relative;
	transform:scale(1.2);
	opacity:0;
}

.lazy-item .prj-item-info,.lazy-item .video-control,.lazy-item.text-item .col{
	opacity:0;
}

.loaded.lazy-item.text-item .col{
	opacity:1;
	transition: opacity 0.3s ease 0.6s;
}

.loaded.lazy-item.text-item .col.col-parag{
	opacity:1;
	transition: opacity 0.3s ease 0.8s;
}

.lazy-item.loaded .prj-item-media{
	transform:scale(1);
	opacity:1;
	transition: opacity 0.4s ease 0.6s, transform 0.8s ease 0.6s;
}

.lazy-item.loaded .prj-item-info,.lazy-item.loaded .video-control{
	opacity: 1;
	transition: opacity 0.3s ease 0.8s;
}


/* Media
--------------------------------------------- */
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img, video {
	height: auto;
	width: 100%;
	border-style: none;
	display:block;
}

/* Navigation
--------------------------------------------- */

/* header */

.header{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	padding:var(--margin);
	z-index:var(--first);
	mix-blend-mode:difference;
	display:flex;
	justify-content:space-between;
}

.header.contact-move{
	transform:translate3d(0px,0,40px);
}

.on-contact .header.contact-move{
	transform: translate3d(0%, var(--contact-h), 40px);
}

.header .header-col{
	width:25%;
	overflow:hidden;
	align-items: flex-start;
	overflow:hidden;
	color:white;
}

.header .menu-item{
	overflow:hidden;
}

.header .menu-item a{
	display:inline-block;
}

.header .show-el,.header .menu-item a {
	 transform: translate3d(0, -150%, 0);
}
 .slide-up header .show-el,.slide-up .header .menu-item a{
	 transform: translate3d(0, 0%, 0);
	 transition: transform .6s ease .2s;
}
.home.slide-up header .show-el,.home.slide-up .header .menu-item a{
  transition: transform .6s ease;
}

.header .menu-item:hover a{
	font-style: italic;
}

.fade-up header .claim-col {
  opacity:0;
}

.header .main-logo{
	fill:white;
	width:170px;
}

.header .logo-small{
	fill:white;
	display:none;
	width:40px;
}

.header .claim-col h2, .header .nav-col li a{
	font-weight:700;
	color:white;
}

.on-contact #menu-item-114 a{
    transform: skew(-14deg);
}

@media screen and (max-width:1024px){
	.header .claim-col,.header .space-col{
		display:none;
	}
	
	.header .header-col{
	width:50%;
}
}

@media screen and (max-width:767px){
	.header .main-logo{
	display:none;
}

.header .logo-small{
	display:block;
}
}


/* menu */

.header .nav-col #primary-menu{
	display:flex;
	justify-content:space-between;
}

.header .current_page_item a,
.header .current-menu-item a{
	font-style:italic;
	pointer-events:none;
}


/* footer */

.footer{
    min-height: calc(100lvh - var(--header-h));
    background-color: white;
    z-index: 10;
    transition: transform 0.3s ease;
    overflow: hidden;
	position:relative;
}

.footer-wrap {
    display: flex;
	min-height: calc(100lvh - var(--header-h));
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}





/* Claim */

.footer-claim{
	padding:var(--margin);
}

@media screen and (max-width:1024px){
	.footer-claim{
	padding-bottom:var(--margin-b);
}
}

@media screen and (max-width:500px){
	.footer-claim p{
	display:inline;
}
}

/* info */

.footer-info{
	padding:var(--margin);
}

@media screen and (max-width:1024px){
	.footer-info .col:first-child{
	margin-bottom:var(--margin-m);
}
}

/* logo */

.footer-logo{
	width: 100%;
    fill: black;
    position: relative;
    padding: var(--margin-m) var(--margin) var(--margin);
}


/* legal */

.footer-legal{
	background-color: var(--accent);
    padding: 10px var(--margin);
}

.footer .footer-legal .list-title{
	margin-bottom:0;
	font-size:10px;
	line-height:10px;
}

/* Animation */

.footer-section.top{
	opacity:0;
	transition:opacity .6s ease .3s;
}

.footer-section.bottom{
	opacity:0;
	transform:translate3d(0,30px,0);
}

.loaded.footer-section.top{
	opacity:1;
}

.loaded.footer-section.bottom{
	opacity:1;
	transform:translate3d(0,0px,0);
	transition: opacity .4s ease .3s, transform .6s ease .2s;
}


@media screen and (max-width:1024px){
	.footer-legal{
    padding: 20px;
}
	
	.footer-legal .col-layout{
		flex-direction:column;
		justify-content:center;
	}
	.footer-legal .col-layout .col{
		width:100%;
		text-align:center;
		padding-bottom:var(--margin-s);
	}
	
	.footer-legal .col-layout .col:last-child{
		padding-top:var(--margin-s);
		padding-bottom:0;
		justify-content:center;
		column-gap:10px;
	}
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

.page-title{
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
}

.internal-wrap{
	margin-top: calc(var(--header-h) + 20px);
}

/* On Contact */

.contact-move{
  transition: transform 0.3s ease;
  transform: translate3d(0, 0, 0);
}

.on-contact .contact-move{
  transform: translate3d(0%, var(--contact-h), 0);
}

/* col layout */

.col-layout{
	display:flex;
	justify-content:space-between;
	position:relative;
}

.col-layout .col{
	width:25%;
}

.col-layout .col-row span{
	display:block;
	margin-bottom:var(--margin-s);
}

.col-layout .list-title{
	font-weight:700;
	margin-bottom:20px;
}

.mobile-col{
	display:none;
}

@media screen and (max-width:1024px){
	.col-layout{
		flex-wrap:wrap;
	}
	.col-layout .col{
		width:50%;
	}
	.mobile-col{
		display:flex;
		justify-content:space-between;
		width:100%;
		margin-top:var(--margin-m);	
	}
}


/* 5 col */

.five-col-wrap .col:last-of-type{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}

/* Project grid */

.prj-layout{
	display:flex;
	justify-content:space-between;
	column-gap:var(--margin);
}

.prj-layout.col-two .col{
	width:50%;
}

.prj-layout.col-four .col{
	width:25%;
}


@media screen and (max-width:767px){
	.prj-layout.col-two{
		flex-wrap:wrap;
		row-gap:var(--margin);
	}
	.prj-layout.col-two .col{
	width:100%;
}
	.prj-layout.col-four{
		flex-wrap:wrap;
		row-gap:var(--margin);
	}
	.prj-layout.col-four .col{
	width:calc(50% - (var(--margin) / 2 ));
}
}


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/*----------- HERO ------------*/

.video-hero-wrap{
	position:relative;
	width:100%;
	height:100vh;
	height:100svh;
	overflow:hidden;
	z-index:10;
}

.video-hero-wrap .video-responsive{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;

}

.video-hero-wrap .video-poster{
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.video-hero-wrap.video-load .video-poster{
	opacity:0;
}

@keyframes hide{
	to{
		opacity:0;
	}
}



/*----------- TICKER ------------*/

.infinite-container{
    overflow:hidden;
}

.section_full.dark .infinite-container{
	padding:0;
}

.infinite-container .infinite-wrap{
    width:auto;
   display: flex;
   flex-wrap: nowrap;
}

.infinite-container .item-block{
    display:inline-block;
    white-space: nowrap;
  	padding-left:10px;
}

.infinite-container .item-block span{
  color:var(--accent);
  font-size: var(--text-big);
  line-height: var(--text-big);
}


/*----------- CONTACT ------------*/

.contact-wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index:var(--first);
	height: var(--contact-h);
	background-color: var(--accent);
	transform: translate3d(0, -100%, 0);
	transition: transform 0.3s ease;
	padding:var(--margin);
}

.on-contact .contact-wrap {
    transform: translate3d(0, 0, 0);
}

.contact-wrap .col-row span{
	font-weight:700;
}

@media screen and (max-width:1024px){
	.contact-wrap .five-col-wrap{
		padding-bottom:0;
	}
	.contact-wrap .five-col-wrap .col{
		margin-bottom:35px;
	}
	
	.contact-wrap .five-col-wrap .col:first-child{
		width:100%;
		margin-bottom:25px;	
	}
	
	.contact-wrap .contact-btn{
		position:fixed;
		top:var(--margin);
		right:var(--margin);
	}
}


/* Posts and pages
--------------------------------------------- */

/*----------- HOME ------------*/

/* Intro */

 #svg-intro {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100vh;
	 z-index: 20;
	 pointer-events:none;
	 transition:opacity .01s linear 2.6s;
}

.ready #svg-intro{
	opacity:0;
}
 #rect {
	 mask: url('#mask');
	 fill: white;
}

#link{
	opacity:0;
}

.ready #link{
	opacity:1;
} 

 #link path {
	 fill: black;
}
 #whiteLayer {
	 opacity: 0;
	  fill: transparent;
}
 .ready #whiteLayer {
	 opacity: 1;
	
	 animation: color-layer 2s linear forwards;
}
 @keyframes color-layer {
	 0% {
		 fill: var(--black);
	}
	 9% {
		 fill: var(--black);
	}
	 10% {
		 fill: var(--violet);
	}
	 19% {
		 fill: var(--violet);
	}
	 20% {
		 fill: var(--green);
	}
	 29% {
		 fill: var(--green);
	}
	 30% {
		 fill: var(--pink);
	}
	 39% {
		 fill: var(--pink);
	}
	 40% {
		 fill: var(--black);
	}
	 49% {
		 fill: var(--black);
	}
	 50% {
		 fill: var(--violet);
	}
	 59% {
		 fill: var(--violet);
	}
	 60% {
		 fill: var(--green);
	}
	 69% {
		 fill: var(--green);
	}
	 70% {
		 fill: var(--pink);
	}
	 79% {
		 fill: var(--pink);
	}
	 80% {
		 fill: var(--orange);
	}
	 89% {
		 fill: var(--orange);
	}
	 90% {
		 fill: transparent;
	}
	 100% {
		 fill: transparent;
	}
}

/* Hero */

.home-cover{
	position: fixed;
	 top: 0;
	 left: 0;
	 z-index: 10;
	transform:translateZ(30px);
	 pointer-events: none;
	 transition: transform 0.3s ease;
}

/* Testo fisso */

#text-fixed-wrap {
    position: fixed;
    top: 50%;
    left: 0%;
    transform: translate3d(0%, -50%, 0);
    width: 100%;
    z-index: 5;
    mix-blend-mode: difference;
    pointer-events: none;
    transition: transform 0.3s ease;
	color:white;
	text-align:center;
	font-size:var(--text-big);
	line-height:var(--text-big-h);
}

.on-contact #text-fixed-wrap {
  transform: translate3d(0%, calc(-50% + var(--contact-h)), 0);
}


#text-fixed-wrap strong{
	font-weight:700;
}

.text-reference.mobile-text{
	display:none;
	opacity:0;
}

@media screen and (max-width:767px){
	
	.loaded.mobile-text{
		opacity:1;
		transition: opacity 0.3s ease 0.6s;
	}
	.text-reference.mobile-text{
	display:flex;
	padding:0 var(--margin);	
}
	.text-reference.mobile-text .text-big{
		text-align:center;
	}
	
	.text-reference.mobile-text .text-big p{
		display:inline;
	}
	
	#text-fixed-wrap{
		display:none;
	}
}


/* Grid */

.marker{
	position:absolute;
	left:0;
	width:100px;
	z-index:999;
	height:1px;
}

.home-content{
	position: relative;
    z-index: 0;
    padding-top: 50vh;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.home-grid-layout{
	display:flex;
	flex-direction: row;
	margin: 0 0 var(--margin-e) 0;
	position: relative;
    z-index: 5;
}

.home-grid-layout a:hover{
	transform:skew(0);
}

@media screen and (max-width:767px){
	.home-content{
    padding-top: 50vh;
}
}

/* col */

.home-grid-layout .col-small{
	width:20%;
}

.home-grid-layout .col-big{
	width:45%;
}

/* Two col */

.home-grid-layout.two-col{
	justify-content:space-between;
}

.home-grid-layout.three-col{
	justify-content:flex-start;
}

.home-grid-layout.three-col .col:nth-child(3){
	    margin-left: auto;
}

.home-grid-layout.three-col .col:nth-child(1){
	    margin-right: var(--margin);
}

/* Three col */

.home-grid-layout.three-col.reverse{
	justify-content:flex-end;
}

.home-grid-layout.three-col.reverse .col:nth-child(1){
	    margin-right: auto;
}

.home-grid-layout.three-col.reverse .col:nth-child(2){
	    margin-right: var(--margin);
}

.home-grid-layout.three-col.reverse .col:nth-child(3){
	    margin-left: 0;
}


/* item */

.single-prj-item .prj-item-info{
	margin-top:10px;
}

.single-prj-item .prj-item-info .client-name{
	font-weight:700;
	margin-bottom:5px;
}

.single-prj-item .prj-item-info .prj-name{
	padding:0 10px;
	line-height:14px;
}

@media screen and (max-width:767px){
	.home-grid-layout{
		flex-direction: column;
		row-gap:var(--margin-b);
		column-gap:0;
		margin:0 0 var(--margin-b) 0;
	}	
	
	.home-grid-layout .col-small{
		width:60%;
		margin-left:0 !important;
		margin-right:0 !important;
	}

	.home-grid-layout .col-big{
		width:100%;
	}

	.home-grid-layout.two-col .col:nth-child(1){
		align-self:flex-end;
	}
	
	.home-grid-layout.two-col.reverse .col:nth-child(2){
		align-self:flex-end;
	}
	.home-grid-layout.two-col.reverse .col:nth-child(1){
		align-self:flex-start;
	}
	
	.home-grid-layout.three-col .col:nth-child(2){
		align-self:flex-end;
	}
	
}


/*----------- ABOUT ------------*/


.about-wrap{
	padding: 0 var(--margin);
}

/* Intro */

.about-intro{
	max-width:85%;
}

.about-intro p{
	font-size: var(--text-big);
	line-height:var(--text-big-h);
}

.about-parag{
	margin-bottom:20px;
}

.about-parag:last-child{
	margin-bottom:var(--margin-b);
}

.about-intro p strong{
	font-style: italic;
	color:var(--accent);
}

@media screen and (max-width:1024px){
	.about-intro{
	max-width:100%;
}
}

/* Info */

.about-info{
	margin-bottom:var(--margin-b);
}

.about-info .clients-col{
	width:50%;
}

.about-info .contact-col ul{
	margin-bottom:var(--margin);
}

.about-info .clients-col ul {
    column-count: 2;
}

@media screen and (max-width:1024px){
	.about-info .mobile-col{
	width:100%;
	justify-content:space-between;
}
	.about-info .clients-col{
		width:100%;
		margin-bottom:var(--margin-m);
	}
}


/*----------- WORK ------------*/

.work .prj-layout{
	justify-content:flex-start;
	row-gap:var(--margin-m);
	flex-wrap:wrap;
	margin-bottom:var(--margin-b);
}

.work .prj-layout .single-prj-item.col{
	width:calc((100% - (var(--margin) * 3)) / 4);
}

.work .single-prj-item .prj-item-info{
	min-height:60px;
}

.work .prj-layout a{
	display:flex;
	flex-direction:column;
	height:100%;
}

.work .prj-layout .media_wrap{
	flex-grow:1;
}

.work .prj-layout .media_wrap img, .work .prj-layout .media_wrap video{
	height:100%;
	object-fit:cover;
	object-position:center;
}

.work .prj-layout a:hover{
	transform:skew(0);
}

@media screen and (max-width:1024px){
	.work .single-prj-item .prj-item-info{
		min-height:74px;
	}
}

@media screen and (max-width:767px){
	.work .prj-layout .single-prj-item.col{
		width:calc(50% - (var(--margin) / 2 ));
	}
	
	.work .prj-layout .media_wrap img, .work .prj-layout .media_wrap video{
	height:450px;
}
	
	.work .single-prj-item .prj-item-info{
		min-height:60px;
	}
}

/*----------- SINGLE WORK ------------*/

.single-project{
	margin-bottom:var(--margin-b);
	overflow:hidden;
}

.single-project .video-hero-wrap .video-responsive{
	transform:translate3d(-50%,-50%,0);
	background-size:cover;
	background-position:center;
}

.single-project .prj-layout{
	margin-top:var(--margin-b);
}

/* Video hero */

.single-project .video-poster{
	opacity:0;
}

.single-project .video-responsive{
	opacity:0;
}

.ready .single-project .video-poster{
	opacity:1;
	transition: opacity .6s ease;
}

.ready .video-hero-wrap.video-load .video-poster{
	opacity:0;
}

.video-hero-wrap.video-load .video-responsive{
	opacity:1;
}


/* Intro */

.block-text.project-intro{
	padding-top:var(--margin-m);
	margin-top:0;
}

/* block text module */

.block-text{
	padding:0 var(--margin);
}


.block-text .client-name{
	margin-bottom:var(--margin);
}

.block-text .credits-title{
	margin-top:20px;
	margin-bottom:10px;
	font-style:italic;
}

.block-text .credits-content p{
	margin-bottom:var(--margin-s);
}

.block-text.prj-layout.col-two .col-title{
	width:35%;
}

.block-text.prj-layout.col-two .col-parag{
	width:25%;
}

@media screen and (max-width:1024px){
	.block-text.prj-layout.col-two .col-title{
	width:50%;
}
	.block-text.prj-layout.col-two .col-parag{
		width:30%;
	}
}

@media screen and (max-width:767px){
	.block-text.prj-layout.col-two{
		row-gap:0;
	}
	.block-text.prj-layout.col-two .col-title,
.block-text.prj-layout.col-two .col-parag{
	width:100%;
}
	.block-text.prj-layout.col-two .col-title{
		margin-bottom:var(--margin-m);
	}
}

/* Block Media wide */

.single-project .prj-layout.col-one{
	display:block;
}

/* Video */

.video-wrap{
	cursor:pointer;
	position:relative;
}

.video-wrap.video-loop-wrap{
	cursor:default;
}

/* Controls */

.video-control{
	width:50px;
	height:50px;
}

.video-btn .circle{
	fill:var(--accent);
}

.video-btn .symbol{
	fill:var(--black);
}

.video-control:hover{
	transform:skew(0);
}

.video-control:hover .circle{
	fill:var(--black);
}

.video-control:hover .symbol{
	fill:var(--accent);
}

.video-control.main{
	position:absolute;
	z-index:10;
	top:50%;
	left:50%;
	transform:translate3d(-50%,-50%,0);
}

.video-control-wrap{
	position:absolute;
	bottom:var(--margin);
	left:var(--margin);
}

.on-touch .video-control-wrap{
	width:calc(100% - (var(--margin) * 2));
}

.on-touch .video-loop-wrap .video-control-wrap{
	height:50px;
}

.video-control-wrap .video-control{
	display:none;
}

.on-touch .video-loop-wrap .video-control-wrap .video-control.full-btn{
	display:block;
}

.video-control-wrap .video-control.full-btn{
	position:absolute;
	right:0;
	top:0;
}

.on-play .video-control-wrap .video-control.pause-btn{
	display:block;
}

.on-pause .video-control-wrap .video-control.play-btn{
	display:block;
}

.on-touch .on-play .video-control-wrap .video-control.full-btn,.on-touch .on-pause .video-control-wrap .video-control.full-btn{
	display:block;
}

.on-play .video-control.main, .on-pause .video-control.main{
	display:none;
}

.inactive_user.on-play .video-control{
	opacity:0;
}



/* Post Navigation */

#nav-single{
	text-align:center;
	margin-bottom:var(--margin-b);
}

#nav-single .nav-next a{
	font-size: var(--text-big);
}



/*----------- 404 ------------*/

.error-404{
	min-height:100vh;
	min-height:100lvh;
	padding:0 var(--margin);
	position:relative;
	margin-bottom:var(--margin-m);
}

.error-text-wrap{
	position:absolute;
	bottom:var(--margin);
	left:var(--margin);
	width:60%;
}

@media screen and (max-width:767px){
	.error-text-wrap{
	width:80%;
}
}

/* PLUGIN
--------------------------------------------- */

/* Cookie banner */

#cookie-notice{
	left:auto;
	right:20px;
	width:350px;
	min-width:350px;
	bottom:20px;
	z-index:9999999;
	opacity:0;
	transition:opacity .4s ease .3s;
}

.slide-up #cookie-notice{
	opacity:1;
}

#cookie-notice .cookie-notice-container{
	padding:20px;
	border:2px solid var(--black);
}

#cookie-notice .cn-text-container{
	margin-bottom:15px;
	font-family: "Moderat Extended", sans-serif;
	font-weight:400;
	font-size:12px;
}

#cookie-notice #cn-close-notice{
	display:none;
}

#cookie-notice a.cn-button{
	font-family: "Moderat Extended", sans-serif !important;
	font-weight:700 !important; 
	
}

#cookie-notice .cn-button:not(.cn-button-custom){
	border-radius: 0;
    padding: 8.5px 25px;
	text-transform:uppercase;
	font-size:12px;
}


@media screen and (max-width:767px){
	#cookie-notice{
		left:20px;
		right:20px;
		width:calc(100% - 40px);
		min-width:350px;
		bottom:20px;
	}
}


/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}