/*
 Theme Name:     Joe Walkling Child theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Child Theme
 Author:         Joe Walkling
 Author URI:     https://www.joewalkling.com
 Template:       Divi
 Version:        1.0.0
*/
 
/* ------------------------------------------------------------------------- */
/* -------------------- Theme customization starts here -------------------- */
/* ------------------------------------------------------------------------- */
@font-face {
  font-family: 'ivan-light';
  src: url('fonts/GT-America-Standard-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/GT-America-Standard-Light.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/GT-America-Standard-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: 'ivan-bold';
  src: url('fonts/GT-America-Standard-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/GT-America-Standard-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/GT-America-Standard-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

:root {
	--black: #000000;
	--half-black: rgba(14,15,16,0.5);
	--quarter-black: rgba(14,15,16,0.25);
	--white: #eef4f2;
	--half-white: rgba(238,244,242,0.5);
	--quarter-white: rgba(238,244,242,0.25);
	
	
	--dark-gray: #1a1a1a;
	--gray: #9fa3a1;
	
	--red: red;
	--yellow: yellow;
	--green: green; 
	--pink: pink;
	--blue: blue;
	
	--trans-500: all 500ms ease 0s;
	--trans-300: all 300ms ease 0s;
	--trans-3d-image: all 3s cubic-bezier(0,1,.32,.33) 0s;

	--trans-slow: all 2s cubic-bezier(.36,0,.3,1) 0s;
	--trans-med: all 1s cubic-bezier(.36,0,.3,1) 0s;
	--trans-fast: all 500ms cubic-bezier(.36,0,.3,1) 0s;
	
	/*fonts*/
	--font-regular: 'ivan-light', arial, helvetica, sans-serif !important;
	--font-bold: 'ivan-bold', arial, helvetica, sans-serif !important;
	
	--font-m: clamp(20px , 2.3vw , 40px);
	
	--line-height-normal: 1.4em;
	--line-height-slight: 1.1em;
	
}

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

body {
	--white: #000000;
	--black: #eef4f2;
}
body.dark{
	--white: #eef4f2 ;
	--black: #000000 ;

	--half-white: rgba(14,15,16,0.5);
	--quarter-white: rgba(14,15,16,0.25);

	--half-black: rgba(238,244,242,0.5);
	--quarter-black: rgba(238,244,242,0.25);
}
/* ------------------------------------------------------------------------- */
/* TYPOGRAPHY */
/* ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, h7{
	font-family: var(--font-bold) ;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: var(--black) !important;
}

body, p{
	font-family: var(--font-regular);
	font-weight: normal;
	font-style: normal;
	color: var(--black) !important;
}

strong, b{
	font-family: var(--font-bold);
	font-weight: bold;
	font-style: normal;
}

/* ------------------------------------------------------------------------- */
/* Toggle Light / Dark */
/* ------------------------------------------------------------------------- */
/* ---------- Switcher */
.switch, .dot{
	-webkit-transition: var(--trans-500) !important;
	-moz-transition: var(--trans-500) !important;
	-o-transition: var(--trans-500) !important;
	-ms-transition: var(--trans-500) !important;
	transition: var(--trans-500) !important;
}
.switch{
	display: block;
	position: fixed;
	top: 50%;
	right: 15px;
	height: 50px;
	width: 23px;
	border: 1px solid #eef4f2;
	border-radius: 15px ;
	transform: translateY(-50%);
	z-index: 999999 !important;
	mix-blend-mode: difference !important;
}

.dot{
	display: block;
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(-50%);
	height: 18px;
	width: 18px;
	cursor: pointer;
	background: #eef4f2 !important;
	border-radius: 50%;
}
.switch.dark .dot{
	top: 28px;
}

/* anti flicker */

.flickerclose .antiflicker, .antiflicker:not(.page-id-16 .antiflicker){
	display: none !important;
}
.antiflicker{
	content: '';
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--half-black);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	color: white !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000000 !important;
}
.antiflicker-text{
	padding: 15px;
	margin-top: 50vh;
	text-align: center ;
}
.af-ctr{
	display: flex;
	flex-flow: row nowrap;
	grid-gap: 15px;
}
#af-switch, #af-close{
	cursor: pointer !important;
}
.af-close{
	border: 1px solid var(--black);
	padding: 2em 6em;
	border-radius: 100px;
	transform: translateY(33vh);
}
.af-close:hover{
	color: var(--white) !important;
	background: var(--black) !important;
}
.af-switch{
	display: block;
	position: relative;
	height: 23px;
	width: 50px;
	border: 1px solid var(--black);
	border-radius: 15px ;
	z-index: 999999 !important;
}

.af-switch .dot{
	top: 50%;
	left: 2px;
	transform: translateY(-50%);
}
.noflicker .af-switch .dot{
	left: calc(100% - 20px);
}
.af-notice{
	opacity: 0;
	padding: 15px;
	color: orange;
}
.noflicker .af-notice{
	opacity: 1;
}
/* ------------------------------------------------------------------------- */
/* Hamburger (mobile navigation) */
/* ------------------------------------------------------------------------- */

/* transisiton */
#slide-in-open, .ham-line, a.mob-menu-item:before{
	-webkit-transition: var(--trans-500) !important;
	-moz-transition: var(--trans-500) !important;
	-o-transition: var(--trans-500) !important;
	-ms-transition: var(--trans-500) !important;
	transition: var(--trans-500) !important;
}

/* hamburger */
#slide-in-open{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
    position: fixed;
    height: 50px;
    width: 50px;
    mix-blend-mode: difference;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    z-index: 999999 !important;
	cursor: pointer !important;
}
.ham-line{
	content: '';
	display: block;
	height: 1px;
	background: #eef4f2;
	width: 50px ;
}
#slide-in-open.open{
	justify-content: center;
}
#slide-in-open.open .ham-line-1{
	transform: rotate(45deg);
}
#slide-in-open.open .ham-line-2{
	transform: rotate(-45deg);
}
/* slide in meny conrtainer*/
.ib.mobile-menu-container{
	overflow: hidden;
}
.slide-in-menu-container{
	position: fixed;
	top: 0;
	left: -100%;
	padding: 15px 15px 15px 20vw;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	z-index: 9 !important;
	background: var(--white);
	height: 100%;
	width: 40vw;
	border-right: 1px solid var(--black);
	-webkit-transition: var(--trans-med) !important;
	-moz-transition: var(--trans-med) !important;
	-o-transition: var(--trans-med) !important;
	-ms-transition: var(--trans-med) !important;
	transition: var(--trans-med) !important;
}
.slide-in-menu-container.slide-in-menu{
	left: 0;
}
/* mobile meny items */
a.mob-menu-item{
	position: relative;
	display: block;
	padding: 5px 0px 0px;
}
/* on hover */
@media only screen and (min-width: 767px){
	a.mob-menu-item:before{
		content: '';
		position: absolute;
		bottom: 0px;
		left: 0;
		right: 100%;
		height: 1px;
		background: var(--black);
		display: block;
	}
	a.mob-menu-item:hover:before{
		right: 0;
	}
}


/* ------------------------------------------------------------------------- */
/* Navigation */
/* ------------------------------------------------------------------------- */
/* ---------- Header/Navigation */
.ib-menu-left, .ib-menu-right{
	position: fixed !important;
    top: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-content: center ;
	max-width: 100vh !important;
	width: 100vh !important;
	mix-blend-mode: difference !important;
	z-index: 9999 !important;
	padding: 15px ;
}
.ib-menu-left *, .ib-menu-right *{
	text-transform: uppercase !important;
	font-size: clamp(20px , 2.9vw , 30px) !important;
	line-height: 1em !important;
	color: white !important;
}
.ib-menu-left .et_pb_column, .ib-menu-right .et_pb_column{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.ib-menu-left{
    transform: rotate(-90deg);
    right: 100%;
    transform-origin: top right;
}
.ib-menu-right{
    transform: rotate(90deg);
    left: 100%;
    top: 0;
    transform-origin: top left;
}
/* menu items */
a.menu-item{
	display: block;
	height: auto ;
	width: auto;
	position: relative;
}
@media only screen and (min-width: 1024px){
	/* hover arrow */
	.menu-item:before{
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		opacity: 0;
		height: 5px;
		width: 5px;
		border-radius: 50%;
		background-color: white;
		-webkit-transition: var(--trans-fast) !important;
		-moz-transition: var(--trans-fast) !important;
		-o-transition: var(--trans-fast) !important;
		-ms-transition: var(--trans-fast) !important;
		transition: var(--trans-fast) !important;
	}
	.menu-top:before{
		left: calc(100% + 10px);
	}
	.menu-btm:before{
		right: calc(100% + 10px);
	}
	.menu-item:hover:before{
		transform: translateY(-50%);
		opacity: 1;
	}

}




/* ------------------------------------------------------------------------- */
/* BODY */
/* ------------------------------------------------------------------------- */
/* ----- fullscreen video */
.video-sec{
	overflow: hidden !important;
}
.ib-video .et_pb_code_inner{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.ib-video .fluid-width-video-wrapper{
    height: 100% !important;
    position: absolute !important;
    width: 1000% !important;
	padding: 0px 0px 57% 0px!important;
}

/* buttons */
.ib-button{
	display: inline-block;
	padding: .3em 2em ;
	border-radius: 50px;
	border: 1px solid var(--black);
	line-height: 1em !important;
	text-transform: uppercase;
	-webkit-transition: var(--trans-fast) !important;
	-moz-transition: var(--trans-fast) !important;
	-o-transition: var(--trans-fast) !important;
	-ms-transition: var(--trans-fast) !important;
	transition: var(--trans-fast) !important;
}
.ib-button:hover{
	background-color: var(--gray);
}

/* logo background */
.ib-logo-2{
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: -1;
}

/* -------- Toggle Background */
.ivansec{
	background: var(--transparent) ;
}
.et-l--header{
}
#et-main-area, #main-content{
	background-color: var(--white) ;
}


/* ----- Padding and Margins */
.topsecpad	{	padding: 100px 0px 50px !important;}
.secpad		{	padding: 50px 0px !important;}
.pad15		{	padding: 15px;}
.mar15		{	margin: 15px;}
.btnmar15	{	margin: 0px 15px;}
.flexsec	{	display: flex; flex-direction: column;}


/* flex vertical align */
.jw-flex-center	{display:flex;flex-direction: column;justify-content:center;}
.jw-flex-end	{display:flex;flex-direction: column;justify-content:flex-end;}
.jw-flex-start	{display:flex;flex-direction: column;justify-content:flex-start;}



/* ------------------------------------------------------------------------- */
/* Homepage */
/* ------------------------------------------------------------------------- */

.homesec{
	background: var(--white) !important;
}

/* ------------------------------------------------------------------------- */
/* WORK */
/* ------------------------------------------------------------------------- */
/* ---project carousel */
.ib-project-carousel-sec{
	overflow: hidden !important;
}
.ib-project-carousel{
	transform: scale(1.05) rotate(-3deg);
}
.ib-project-carousel .owl-item:nth-child(3n - 1){
	transform: scale(.985);
}
.ib-project-carousel .owl-item:nth-child(3n - 2){
	transform: scale(.995);
}
.ib-project-carousel .owl-item:nth-child(3n - 3){
	transform: scale(1);
}
/* outer stage */
.ib-project-carousel .owl-stage-outer{
	overflow: visible !important;
}
/* items */
.ib-project-carousel .dp_oc_item{
	padding-top: 100%;
	position: relative;
	display: block;
	-webkit-transition: var(--trans-3d-image) !important;
	-moz-transition: var(--trans-3d-image) !important;
	-o-transition: var(--trans-3d-image) !important;
	-ms-transition: var(--trans-3d-image) !important;
	transition: var(--trans-3d-image) !important;
}
.ib-project-carousel .dp_oc_item img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* title */
.ib-project-carousel .dp_oc_item h2{
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 999999 !important;
	color: white !important;
	line-height: 1em ;
	text-align: center ;
	margin: 0px !important;
	padding: 15px !important;
	-webkit-transition: var(--trans-500) !important;
	-moz-transition: var(--trans-500) !important;
	-o-transition: var(--trans-500) !important;
	-ms-transition: var(--trans-500) !important;
	transition: var(--trans-500) !important;
}
.ib-project-carousel .dp_oc_item h2 a{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
}
.ib-project-carousel .dp_oc_item:hover h2{
	opacity: 1;
}
.owl-item.active:hover{
	z-index: 999999 !important;
}
@media only screen and (min-width: 1025px){

	/* hover images */
	.ib-project-carousel .dp_oc_item:hover {
		transform: scale(1.8);
	}
	/* hover with 3d Matrix */
	.owl-item{
		-webkit-transition: var(--trans-500) !important;
		-moz-transition: var(--trans-500) !important;
		-o-transition: var(--trans-500) !important;
		-ms-transition: var(--trans-500) !important;
		transition: var(--trans-500) !important;
	}
	.ib-project-carousel .owl-stage:hover .owl-item:nth-child(2n - 2){
		transform: matrix3d(
			1, 0, 0, 0.001,
			0, 1, 0, 0,
			0, 0, 1, 0,
			0, 0, 0, 1
		);
	}
	.ib-project-carousel .owl-stage:hover .owl-item:nth-child(2n - 1){
		transform: matrix3d(
			1, 0, 0, -0.001,
			0, 1, 0, 0,
			0, 0, 1, 0,
			0, 0, 0, 1
		);
	}

	.ib-project-carousel .owl-stage .owl-item:nth-child(2n - 2):hover{
		transform: matrix3d(
			1, 0, 0, 0.002,
			0, 1, 0, 0,
			0, 0, 1, 0,
			0, 0, 0, 1
		) scale(1.05)!important;
	}
	.ib-project-carousel .owl-stage .owl-item:nth-child(2n - 1):hover{
		transform: matrix3d(
			1, 0, 0, -0.002,
			0, 1, 0, 0,
			0, 0, 1, 0,
			0, 0, 0, 1
		) scale(1.05)!important;
	}
}
/* arrow carousel navigation */
/* transition */
.ib-project-carousel .owl-next, .ib-project-carousel .owl-prev, .ib-project-carousel .owl-next:before, .ib-project-carousel .owl-prev:before {
	-webkit-transition: var(--trans-300) !important;
	-moz-transition: var(--trans-300) !important;
	-o-transition: var(--trans-300) !important;
	-ms-transition: var(--trans-300) !important;
	transition: var(--trans-300) !important;
}

/* navigation container */
.ib-project-carousel .owl-nav{
	width: 40vw;
    position: relative;
    margin: 5px auto 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    transform: rotate(3deg) translate(-1.2vw , 100px);
}
/* navigation outer */
.ib-project-carousel .owl-next, .ib-project-carousel .owl-prev {
    opacity: 1 !important;
    display: block;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    z-index: 100;
    height: 30px !important;
    width: 30px !important;
    border: 1px solid var(--black) !important;
    border-radius: 50px !important;
}
.ib-project-carousel .owl-next{
	right: 0px !important;
}
.ib-project-carousel .owl-prev{
	left: 0px !important;
}
/* navigation dot*/
.ib-project-carousel .owl-next:before, .ib-project-carousel .owl-prev:before {
    content: '' !important;
    font-family: none !important;
    background: var(--black);
    height: 10px !important;
    width: 10px !important;
    display: block;
    border-radius: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
/* on hover */
.ib-project-carousel .owl-next:hover, .ib-project-carousel .owl-prev:hover {
	width: 50px !important;
}
.ib-project-carousel .owl-next:hover:before, .ib-project-carousel .owl-prev:hover:before {
	width: 15px !important;
}


/* ------------------------------------------------------------------------- */
/* Project Template */
/* ------------------------------------------------------------------------- */

/* projec nav */
.project-nav{
	width: 100% !important;
	max-width: 100% !important;
	position: fixed !important;
	padding: 0px 10vw !important;
	mix-blend-mode: difference ;
	z-index: 999999 !important;
}
.project-nav .nav-label{
	color: var(--gray) !important;
}
.project-nav .meta-nav{
	display: none !important;
}

/* project Grid */
.project-row{
	overflow: hidden !important;
}
.project-row .et_pb_column{
	display: -webkit-grid;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 33.334vh;
    grid-auto-rows: minmax(min-content , 33.334vh);
	grid-gap: 5vw 0px ;
}
/* project images */
.project-img{
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden !important;
}

/* project spacers */
.project-spacer{
}
.project-spacer-1x1{
	grid-column: span 1;
	grid-row: span 1;
}
.project-spacer-1x2{
	grid-column: span 1;
	grid-row: span 2;
}
.project-spacer-1x3{
	grid-column: span 1;
	grid-row: span 3;
}
.project-spacer-2x3{
	grid-column: span 2;
	grid-row: span 3;
}
.project-spacer-2x2{
	grid-column: span 2;
	grid-row: span 2;
}
.project-spacer-2x1{
	grid-column: span 2;
	grid-row: span 1;
}
.project-spacer-3x1{
	grid-column: span 3;
	grid-row: span 1;
}
.project-spacer-3x2{
	grid-column: span 3;
	grid-row: span 2;
}
.project-spacer-3x3{
	grid-column: span 3;
	grid-row: span 3;
}
/* project text */
.project-txt-2{
	grid-column: span 2;
	padding: 15px 4vw !important;
}
.project-txt{
	grid-column: span 3;
	padding-left: calc(20vw + 15px) !important;
}
.project-txt p{
	padding: 5px 4vw 5px 16vw !important;
	position: relative;
	line-height: 1.6em ;
}
.project-txt p:first-of-type:before{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 40px;
	transform: translateY(-50%);
	height: 1px;
	width: calc(16vw - 80px);
	background: var(--black);
}
/* dates */
.project-txt p:first-of-type:after{
	display: block;
	position: absolute;
	top: 0px;
	left: calc(1em + 4px);
	transform: rotate(90deg);
	transform-origin: top left;
	height: auto;
	width: auto;
}
.date-2010.project-txt p:first-of-type:after{
	content: '2010';
}
.date-2011.project-txt p:first-of-type:after{
	content: '2011';
}
.date-2012.project-txt p:first-of-type:after{
	content: '2012';
}
.date-2013.project-txt p:first-of-type:after{
	content: '2013';
}
.date-2014.project-txt p:first-of-type:after{
	content: '2014';
}
.date-2015.project-txt p:first-of-type:after{
	content: '2015';
}
.date-2016.project-txt p:first-of-type:after{
	content: '2016';
}
.date-2017.project-txt p:first-of-type:after{
	content: '2017';
}
.date-2018.project-txt p:first-of-type:after{
	content: '2018';
}
.date-2019.project-txt p:first-of-type:after{
	content: '2019';
}
.date-2020.project-txt p:first-of-type:after{
	content: '2020';
}
.date-2021.project-txt p:first-of-type:after{
	content: '2021';
}
.date-2022.project-txt p:first-of-type:after{
	content: '2022';
}
.date-2023.project-txt p:first-of-type:after{
	content: '2023';
}
.date-2024.project-txt p:first-of-type:after{
	content: '2024';
}
.date-2025.project-txt p:first-of-type:after{
	content: '2025';
}
.date-2026.project-txt p:first-of-type:after{
	content: '2026';
}
/* cateogries */
.cat-stage.project-txt p:first-of-type:after{
	content: 'STAGE';
}

/* project vidoes */
.project-video{
	overflow: hidden !important;
	background-color: var(--transparent);
}
.project-video .et_pb_code_inner{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.project-video .fluid-width-video-wrapper{
    height: 100% !important;
    position: absolute !important;
    width: 1000% !important;
}

/* ----- image and video */
/* image and video 3x1 */
.project-img-3x1, 
.project-video-3x1{
	grid-column: span 3;
	grid-row: span 1;
}
/* image and video 3x2 */
.project-img-3x2, 
.project-video-3x2{
	grid-column: span 3;
	grid-row: span 2;
}
/* image and video 3x3 */
.project-img-3x3, 
.project-video-3x3{
	grid-column: span 3;
	grid-row: span 3;
}
/* image and video 2x1 */
.project-img-2x1, 
.project-video-2x1{
	grid-column: span 2;
	grid-row: span 1;
}
/* image and video 2x2 */
.project-img-2x2, 
.project-video-2x2{
	grid-column: span 2;
	grid-row: span 2;
}
/* image and video 2x3 */
.project-img-2x3, 
.project-video-2x3{
	grid-column: span 2;
	grid-row: span 3;
}
/* image and video 1x1 */
.project-img-1x1, 
.project-video-1x1{
	grid-column: span 1;
	grid-row: span 1;
}
/* image and video 1x2 */
.project-img-1x2, 
.project-video-1x2{
	grid-column: span 1;
	grid-row: span 2;
}
/* image and video 1x3 */
.project-img-1x3, 
.project-video-1x3{
	grid-column: span 1;
	grid-row: span 3;
}
/* image and video rotation */
.project-img:nth-child(3n - 0), 
.project-video:nth-child(4n - 0) {
	transform: rotate(1deg) !important;
}
.project-img:nth-child(3n - 2), 
.project-video:nth-child(4n - 2){
	transform: rotate(-1deg) !important;
}


/* --- playable video */
.project-play-video{
	display: flex;
	flex-direction: column;
	justify-content: center;
	grid-row: span 1;
}
.project-play-video .et_pb_video_overlay{
	background-size: contain !important;
}
.project-play-video-5x3{
	grid-column: span 5;
}
.project-play-video-3x2{
	grid-column: span 3;
}
.project-play-video-2x1{
	grid-column: span 2;
}
/* play button */
.project-play-video .et_pb_video_play:before {
    font-family: inherit !important;
    content: "play";
	text-transform: uppercase;
	color: var(--black)!important;
}
.project-play-video .et_pb_video_play{
	font-size: 10vw !important;
    line-height: 1em !important;
    margin: 0px !important;
	transform: translate(-50% , -50%);
	top: 50% !important;
	left: 50% !important;
}

/* on hover */
.project-play-video .et_pb_video_overlay_hover:hover{
	background-color: var(--half-black) !important;
}
.project-play-video .et_pb_video_overlay_hover:hover .et_pb_video_play{
	animation: playbutton 5s cubic-bezier(0,1,.32,.33) 0s infinite alternate;
}

@keyframes playbutton {
	0% { transform: translate(-50% , -50%) matrix(1.6, 1, -7, 3, 0, 0) rotate(-90deg);		}
	15% { transform: translate(-50% , -50%) matrix(4, 2, 1, 3, 0, 0) rotate(-90deg);		}
	30% { transform: translate(-50% , -50%) matrix(1.43, 0, 0, 5, 0, 0) rotate(-450deg);		}
	45% { transform: translate(-50% , -50%) matrix(5, -2, 5, 1, 0, 0) rotate(-90deg);		}
	60% { transform: translate(-50% , -50%) matrix(1.5, -2, 7, 3, 0, 0) rotate(-90deg);	}
	75% { transform: translate(-50% , -50%) matrix(4, 0, -2, 8, 0, 0) rotate(-90deg);		}
	100% { transform: translate(-50% , -50%) matrix(1, 0, 0, 1, 0, 0) rotate(90deg);	}
}

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

.bio-txt {
	grid-column: span 2;
	padding: 15px 4vw !important;
}

/* ------------------------------------------------------------------------- */
/* LANDING Graph and items */
/* ------------------------------------------------------------------------- */
/* IVAN  */
.ivan-hdr-sec{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: var(--transparent) !important;
}
.ib-logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 101%;
	pointer-events: none !important;
	background: var(--white) ;
	overflow: visible;
}
.ib-logo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.logo-path-ctr{
	max-height: 100vh;
	max-width: none !important;
	overflow: visible;
}
.logo-path{
	fill: var(--black);
	transition: all 500ms ease 0s;
	transform-origin: center center;
}
/* graph */
.ib-graph .et_pb_code_inner{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template: repeat(3 , 1fr) / repeat(5 , 1fr);
	grid-gap : 0px ;
	grid-template-areas:
		'one two three four five'
		'six seven eight nine ten'
		'eleven twelve thirteen fourteen fifteen'
		;
	z-index: 99999 !important;
}
.graph-ctr{
	grid-column: span 5;
	grid-row: span 3;
}
.graph-item{}
.graph-item-1{	grid-area: one;	}
.graph-item-2{	grid-area: two;	}
.graph-item-3{	grid-area: three;	}
.graph-item-4{	grid-area: four;	}
.graph-item-5{	grid-area: five;	}
.graph-item-6{	grid-area: six;	}
.graph-item-7{	grid-area: seven;	}
.graph-item-8{	grid-area: eight;	}
.graph-item-9{	grid-area: nine;	}
.graph-item-10{	grid-area: ten;	}
.graph-item-11{	grid-area: eleven;	}
.graph-item-12{	grid-area: twelve;	}
.graph-item-13{	grid-area: thirteen;	}
.graph-item-14{	grid-area: fourteen;	}
.graph-item-15{	grid-area: fifteen;	}

.line{
	display: block;
	position: absolute;
	content: '' ;
	background: var(--gray);
	z-index: 999999 !important;
	opacity: .2 !important;
}
.hori-line{
	height: 1px !important;
	width: 100% !important;
}
.hori-line-1{ top: 33.334%;	}
.hori-line-2{ top: 66.667%;	}

.vert-line{
	width: 1px !important;
	height: 100% !important;
}
.vert-line-1{ left: 20%;	}
.vert-line-2{ left: 40%;	}
.vert-line-3{ left: 60%;	}
.vert-line-4{ left: 80%;	}

.graph-item:hover {
      cursor: pointer;
}


/* item 1 */
.graph-item-1:hover ~ .ib-logo .logo-path{
  animation: flicker 100ms linear 0s infinite ;
}
.graph-item-1:hover ~ .ib-logo{
	background: var(--white);
}
.noflicker .graph-item-1:hover ~ .ib-logo .logo-path{
  animation: flicker 3s alternate 0s infinite ;
}

/* item 2 */
.graph-item-2:hover ~ .ib-logo .logo-path{
	transform: matrix(10, 0, 0, 1, 1, 1);
	fill: var(--black);
}
.graph-item-2:hover ~ .ib-logo {
	background: var(--white);
}

/* item 3 */
.graph-item-3:hover ~ .ib-logo .logo-path{
	animation: color-flicker 300ms linear 0s infinite, matrix-2 3ms linear 0s infinite ;		
}
.graph-item-3:hover ~ .ib-logo{
	animation: back-flicker-2 1ms linear 0s infinite ;
}
.noflicker .graph-item-3:hover ~ .ib-logo .logo-path{
	animation: color-flicker 3s alternate 0s infinite, matrix-2 1s alternate 0s infinite ;		
}
.noflicker .graph-item-3:hover ~ .ib-logo{
	animation: back-flicker-2 3s alternate 0s infinite ;
}

/* item 4 */
.graph-item-4:hover ~ .ib-logo .logo-path{
	animation: sideways 3s cubic-bezier(0,1,.32,.33) 0s infinite alternate;
	fill: var(--black);
}
.graph-item-4:hover ~ .ib-logo {
	background: var(--white);
}
.noflicker .graph-item-4:hover ~ .ib-logo .logo-path{
	animation: sideways 10s cubic-bezier(0,1,.32,.33) 0s infinite alternate;
}

/* item 5 */
.graph-item-5:hover ~ .ib-logo .logo-path{
	transform: scale(.5);
}

/* item 6 */
.graph-item-6:hover ~ .ib-logo {
	animation: back-image-flicker 1ms linear 0s infinite alternate;
  	background-image: url('https://f6m.707.myftpupload.com/wp-content/uploads/2023/11/ivan-michael-blackstock-21.jpg') !important;
	background-repeat: no-repeat;
	background-position: 50% 35%;
}
.graph-item-6:hover ~ .ib-logo .logo-path{
	fill: none;
}
.noflicker .graph-item-6:hover ~ .ib-logo {
	animation: back-image-flicker 3s linear 0s infinite alternate;
  	background-image: url('https://f6m.707.myftpupload.com/wp-content/uploads/2023/11/ivan-michael-blackstock-21.jpg') !important;
	background-repeat: no-repeat;
	background-position: 50% 35%;
}

/* item 7 */
.graph-item-7:hover ~ .ib-logo {
	animation: back-slide 3750ms cubic-bezier(0,.78,.98,.29) 0s infinite alternate, back-glitch 9000ms ease 0s infinite alternate;
	background-image: url('https://f6m.707.myftpupload.com/wp-content/uploads/2023/11/ivan-michael-blackstock-22.jpg') !important;
	background-size: 100%;
	background-repeat: no-repeat;
}
.graph-item-7:hover ~ .ib-logo .logo-path-ctr{
	max-height: 300vh !important;
}
.graph-item-7:hover ~ .ib-logo .logo-path{
	fill: white;
	mix-blend-mode: difference ;
}


/* item 8 */
.graph-item-8:hover ~ .ib-logo {
  animation: back-flicker 10ms linear 0s infinite ;
}
.graph-item-8:hover ~ .ib-logo .logo-path{
	fill: var(--black);
}
.noflicker .graph-item-8:hover ~ .ib-logo {
  animation: back-flicker 5s alternate 0s infinite ;
}

/* item 9 */
.graph-item-9:hover ~ .ib-logo .logo-path{
	transform: rotate(720deg);
}

/* item 10 */
.graph-item-10:hover ~ .ib-logo .logo-path{
	transform: rotate(-90deg);
}

/* item 11 */
.graph-item-11:hover ~ .ib-logo .logo-path{
	transform: matrix(6, 0, -1, 1, 1, 1);
}

/* item 12 */
.graph-item-12:hover ~ .ib-logo .logo-path{
	animation: matrix 100ms ease 0s infinite alternate;
}
.noflicker .graph-item-12:hover ~ .ib-logo .logo-path{
	animation: matrix 1s ease 0s infinite alternate;
}

/* item 13 */
.graph-item-13:hover ~ .ib-logo .logo-path{
	  animation: rotate 10ms ease 0s infinite alternate;
}
.noflicker .graph-item-13:hover ~ .ib-logo .logo-path{
	  animation: rotate 1s ease 0s infinite alternate;
}

/* item 14 */
.graph-item-14:hover ~ .ib-logo {
	animation: background-shift 3s ease 0s infinite alternate;
	background-image: url('https://f6m.707.myftpupload.com/wp-content/uploads/2023/11/ivan-michael-blackstock-23.jpg') !important;
	background-repeat: repeat;
}
.graph-item-14:hover ~ .ib-logo .logo-path{
	fill: none;
}
.noflicker .graph-item-14:hover ~ .ib-logo {
	animation: background-shift 30s ease 0s infinite alternate;
	background-image: url('https://f6m.707.myftpupload.com/wp-content/uploads/2023/11/ivan-michael-blackstock-23.jpg') !important;
	background-repeat: repeat;
}

/* item 15 */
.graph-item-15:hover ~ .ib-logo .logo-path{
	fill: var(--black);
	stroke: var(--white);
	stroke-linejoin: miter;
	animation: stroke 2s cubic-bezier(0,.78,.98,.29) 0s infinite alternate, rotate-2 1ms ease 0s infinite alternate;
	mix-blend-mode: exclusion; 
	width: 300%;
}
.graph-item-15:hover ~ .ib-logo .logo-path-ctr{
	max-height: 500vw ;
}
.graph-item-15:hover ~ .ib-logo{
	background: transparent;
	animation: move 20s ease 0s infinite alternate;
}
.noflicker .graph-item-15:hover ~ .ib-logo .logo-path{
	fill: var(--black);
	stroke: var(--white);
	stroke-linejoin: square;
	animation: stroke 10s cubic-bezier(0,.78,.98,.29) 0s infinite alternate, rotate-2 1s ease 0s infinite alternate;
	mix-blend-mode: exclusion; 
	width: 300%;
}






/* ------------------------------------------------------------------------- */
/* Hide Landing animation on all pages execpt home */
/* ------------------------------------------------------------------------- */

.project-template-default .ib-logo,
.project-template-default .graph-item, 
.page:not(.page-id-16) .ib-logo, 
.page:not(.page-id-16) .graph-item, 
.error404 .ib-logo, 
.error404 .graph-item {
	display: none !important;
}
.project-template-default .ivan-hdr-sec,
.page:not(.page-id-16) .ivan-hdr-sec,
.error404 .ivan-hdr-sec{
	pointer-events: none !important;
}

/* ------------------------------------------------------------------------- */
/* FOOTER */
/* ------------------------------------------------------------------------- */
/* project footer navigation */
.ib-project-nav-ftr *{
	-webkit-transition: var(--trans-500) !important;
	-moz-transition: var(--trans-500) !important;
	-o-transition: var(--trans-500) !important;
	-ms-transition: var(--trans-500) !important;
	transition: var(--trans-500) !important;
}
.ib-project-nav-ftr .et_pb_ajax_pagination_container{
	display: grid;
	grid-template: auto / repeat(4 , 1fr);
	grid-gap: 5px;
}
/* post item */
.ib-project-nav-ftr .et_pb_post{
	margin: 0px !important;
}
@media only screen and (min-width: 769px){
	/* on hover */
	.ib-project-nav-ftr:hover .et_pb_post{
		transform: scale(.95)!important;
	}
	.ib-project-nav-ftr .et_pb_post:hover{
		transform: scale(1.03) !important;
	}
}
/* image ratio */
.ib-project-nav-ftr .entry-featured-image-url {
	padding-top: 100%;
	position: relative;
	display: block;
	margin: 0px !important;
}
.ib-project-nav-ftr .entry-featured-image-url img{
	position: absolute;
	top: 0;
	left: 0; 
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* image size */
.ib-project-nav-ftr .et_pb_post:nth-child(3n - 1){
	transform: scale(.985);
}
.ib-project-nav-ftr .et_pb_post:nth-child(3n - 2){
	transform: scale(.995);
}
.ib-project-nav-ftr .et_pb_post:nth-child(3n - 3){
	transform: scale(1);
}
/* entry-title*/
.ib-project-nav-ftr .entry-title{
	position: absolute;
	width: 100%;
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 999 !important;
}
@media only screen and (min-width: 769px){
	/* on hover */
	.ib-project-nav-ftr .et_pb_post:hover .entry-title{
		opacity: 1;
	}
}

/*post-content*/
.ib-project-nav-ftr .post-content{
	display: none !important;
}


/* ----- global footer */
.ib-footer-sec{
}
.ib-footer-row .et_pb_column{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}


/* ------------------------------------------------------------------------- */
/* LINKS */
/* ------------------------------------------------------------------------- */
a { 
	color: var(--black) !important;
}
a:visited {}
a:hover {}
a:active {}

/* ------------------------------------------------------------------------- */
/* Login */
/* ------------------------------------------------------------------------- */
.login-row{
	border: 1px solid var(--half-white) !important;
	background: var(--white) !important;
}

.tml{
	color: var(--black) !important;
	font-size: 14px !important;
}
.tml-field{
	padding: .7em 1em!important;
	border: 1px solid var(--black)!important;
	background: var(--transparent) !important;
	color: var(--black) !important;
}
.tml-button{
	font-size:14px!important;
	text-transform: uppercase !important;
	padding: .5em 2em!important;
	background:var(--white)!important;
	border: 1px solid var(--half-white)!important;
	border-radius: 50px !important;
	color: var(--black)!important;
}
.tml-button:hover{
	background: var(--black)!important;
	border: 1px solid var(--half-white)!important;
	color:var(--white)!important;
}

/* errors */.tml .tml-error {
	color: var(--red); 
	border: 1px solid var(--red)!important;
	text-transform: capitalize; 
	font-size: 18px;
	letter-spacing:0px;
	line-height:1.3em!important;
	box-shadow:none!important;
	padding:25px;
}

/* Success */.tml .tml-success {
	color: var(--green);
	border: 1px solid var(--green)!important;
	text-transform: capitalize; 
	font-size: 18px;
	letter-spacing:0px;
	line-height:1.3em!important;
	box-shadow:none!important;
	padding:25px!important;
}

/* message */.tml-message {
	color: var(--blue); 
	border: 1px solid var(--blue)!important;
	text-transform: capitalize; 
	font-size: 18px;
	letter-spacing:0px;
	line-height:1.3em!important;
	box-shadow:none!important;
	padding:25px!important;}

/* passwords */
#pass-strength-result.short {
    background-color: var(--red);
    border-color: var(--red);
    opacity: 1;
}
#pass-strength-result.bad {
    background-color: var(--pink);
    border-color: var(--pink);
    opacity: 1;
}
#pass-strength-result.good {
    background-color: var(--yellow);
    border-color: var(--yellow);
    opacity: 1;
}
#pass-strength-result.strong {
    background-color: var(--green);
    border-color: var(--green);
    opacity: 1;
}

/* ------------------------------------------------------------------------- */
/* MOBILE */
/* ------------------------------------------------------------------------- */

.mob-logo-ctr{
	display: none;
}
@media only screen and (max-width: 1366px){}

@media only screen and (max-width: 1024px){}

@media only screen and (max-width: 980px){
/* GRAPH */
	.ib-graph .et_pb_code_inner {
		grid-template: repeat(5 , 1fr) / repeat(3 , 1fr);
    	grid-template-areas:
			'one two three'
			'four five six'
			'seven eight nine'
			'ten eleven twelve'
			'thirteen fourteen fifteen'
			;
	}
	/* graph lines */
	.hori-line-1{ top: 20%;	}
	.hori-line-2{ top: 40%;	}
	/* becomes horizontal */ .vert-line-1{ 
		left: 0;
		top: 60%;
		height: 1px !important;
		width: 100% !important;
	}	
	/* becomes horizontal */ .vert-line-2{ 
		left: 0;
		top: 80%;
		height: 1px !important;
		width: 100% !important;
	}	
	.vert-line-3{ left: 33.334%;	}
	.vert-line-4{ left: 66.667%;	}

/* main logo */
	.ib-logo-2{
		display: none !important;
	}
	/* display logo on homepage */ .page-id-16 .ib-logo-2{
		display: flex !important;
	}
	.logo-path-ctr {
		max-height: 66vh;
	}
/* graph hover items */
	/* item 15 */
	.graph-item-15:hover ~ .ib-logo .logo-path-ctr {
		max-height: none !important;
		width: 170vw !important;
		animation: stroke-mobile 2s cubic-bezier(0,.78,.98,.29) 0s infinite alternate, rotate-2 1ms ease 0s infinite alternate;
	}
	
/* ---------- Header/Navigation */
	.ib-menu-left, .ib-menu-right{
		padding: 5px 15px ;
	}
	
/* slide in meny container*/
	.slide-in-menu-container{
		width: 50vw;
	}
	
	/* --------- */
	/* Project Grid (also on other pages) */
	/* --------- */
/* project grid */
	.project-row .et_pb_column {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 20vh;
		grid-auto-rows: minmax(min-content , 20vh);
	}
/* project text */
	.project-txt {
		padding-left: calc(17vw + 15px) !important;
	}	
/* project spacers */
	.project-spacer{
		display: none !important;
	}
/* project image and video */
	.project-img-2x3, .project-video-2x3 {
		grid-column: span 1;
		grid-row: span 2;
	}
	.project-img-3x3, .project-video-3x3 {
		grid-column: span 3;
		grid-row: span 3;
	}
	.project-img-2x2, .project-video-2x2 {
		grid-column: span 2;
		grid-row: span 2;
	}
	.project-img-2x1, .project-video-2x1 {
		grid-column: span 1;
		grid-row: span 1;
	}
	.project-img-3x1, .project-video-3x1 {
		grid-column: span 3;
		grid-row: span 2;
	}
/* --- playable video */
	.project-play-video-5x3{
		grid-column: span 3;
	}
	.project-play-video-2x1{
		grid-column: span 3;
	}
	/* --------- */
	/* Project template */
	/* --------- */
/* footer carousel navigation */
	.ib-project-nav-ftr .et_pb_ajax_pagination_container {
		grid-template: auto / repeat(3 , 1fr);
	}
}

@media only screen and (max-width: 768px){
	/* --------- */
	/* Project template */
	/* --------- */
/* footer carousel navigation */
	.ib-project-nav-ftr .et_pb_ajax_pagination_container {
		grid-template: auto / repeat(2 , 1fr);
	}
	.ib-project-nav-ftr .entry-title {
		position: relative;
		top: 5px;
		left: 0;
		transform: translate(0 , 0) !important;
		opacity: 1;
	}
}
@media only screen and (max-width: 767px){	
/* ---------- Header/Navigation */
	.ib-menu-left, .ib-menu-right{
		display: none !important;
	}
/* mobile header container */
	.ib-mobile-menu-container{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: auto;
		display: flex;
		z-index: 999999 !important;
		background-color: var(--white);
		padding-bottom: 15px;
	}
	/* mob header on homepage */
	.page-id-16 .ib-mobile-menu-container{
		background-color: var(--transparent) !important;
	}
/* switch */
	.switch {
		top: 15px;
		right: auto;
		transform: translateY(0) rotate(-90deg);
		left: -8px;
		transform-origin: top right;
	}
/* hamburger */
	.ib-hamburger{
		display: flex;
    	flex-direction: column;
    	justify-content: center;
	}
	#slide-in-open{
		position: relative !important;
		top: auto !important;
		left: auto !important;
		margin-left: 15px ;
		transform: translate(0 , 0) !important;
		mix-blend-mode: normal !important;
	}
	.ham-line {
		background: var(--black);
	}
/* mobile logo */	
	.mob-logo-ctr{
		width: 100%;
    	min-width: 200px;
    	display: flex !important;
    	flex-direction: column;
    	justify-content: center;
	}
	#mob-logo{
		padding: 5px 15px;
	}
	.mob-logo{
		fill: var(--black);
	}
	/* hide mob logo on homepage */ .page-id-16 .mob-logo{
		opacity: 0 !important;
	}
/* slide in meny container*/
	.slide-in-menu-container{
		left: calc(-100% - 2px) ;
		width: calc(100vw + 1px);
	}
	/* --------- */
	/* Work Page */
	/* --------- */
/* project carousel */
	.ib-project-carousel .dp_oc_item h2{
		opacity: 1 !important;
		top: 100% !important;
		height: auto;
	}
	/* --------- */
	/* Project template */
	/* --------- */
/* header navigation */
	.project-nav{
		padding: 0px 15px 0px 80px !important;
	}
	
	/* --------- */
	/* Footer  */
	/* --------- */
	.ib-footer-row{
		padding-bottom: 150px !important;
	}
}

@media only screen and (max-width: 600px){
	/* body */
	.pad15{
		padding: 15px 8vw;
		grid-column: span 3;
	}
	    
/* graph hover items */
	/* item 15 */
	.graph-item-15:hover ~ .ib-logo .logo-path-ctr {
		width: 200vw !important;
	}
	/* --------- */
	/* Work Page */
	/* --------- */
/* project carousel */
	.ib-project-carousel .dp_oc_item h2{
		font-size: 10px !important;
	}
	/* --------- */
	/* Project grid */
	/* --------- */
/* footer navigation */
	.ib-project-nav-ftr .entry-title{
		font-size: 10px !important;
	}
/* ----- image and video */
	/* image and video 3x1 */
	.project-img-3x1, 
	.project-video-3x1{
		grid-column: span 3;
		grid-row: span 1;
	}
	/* image and video 3x2 */
	.project-img-3x2, 
	.project-video-3x2{
		grid-column: span 3;
		grid-row: span 2;
	}
	/* image and video 3x3 */
	.project-img-3x3, 
	.project-video-3x3{
		grid-column: span 3;
		grid-row: span 3;
	}
	/* image and video 2x1 */
	.project-img-2x1, 
	.project-video-2x1{
		grid-column: span 3;
		grid-row: span 2;
	}
	/* image and video 2x2 */
	.project-img-2x2, 
	.project-video-2x2{
		grid-column: span 3;
		grid-row: span 3;
	}
	/* image and video 2x3 */
	.project-img-2x3, 
	.project-video-2x3{
		grid-column: span 3;
		grid-row: span 4;
	}
	/* image and video 1x1 */
	.project-img-1x1, 
	.project-video-1x1{
		grid-column: span 3;
		grid-row: span 3;
	}
	/* image and video 1x2 */
	.project-img-1x2, 
	.project-video-1x2{
		grid-column: span 3;
		grid-row: span 4;
	}
	/* image and video 1x3 */
	.project-img-1x3, 
	.project-video-1x3{
		grid-column: span 3;
		grid-row: span 5;
	}
/* project text */
	.project-txt {
		padding: 15px 4vw !important;
	}
	.project-txt-2 {
		grid-column: span 3;
	}
	.project-txt p {
		padding: 5px 4vw !important;
	}
	.project-txt p:first-of-type:before {
		display: none !important;
	}
	.project-txt p:first-of-type:after{
		display: none !important;
	}
	
	/* --------- */
	/* About and text pages  */
	/* --------- */
	.bio-txt {
		grid-column: span 3;
	}
	/* --------- */
	/* Footer  */
	/* --------- */
	.ib-footer-row{
		padding-bottom: 100px !important;
	}
}



/* ------------------------------------------------------------------------- */
/* ANIMATION KEYFRAMES */
/* ------------------------------------------------------------------------- */

@keyframes sideways{
	0% { transform: matrix(1.6, 1, -7, 3, 0, 0) rotate(-90deg);		}
	33% { transform: matrix(1.43, 0, 0, 5, 0, 0) rotate(-450deg);		}
	66% { transform: matrix(1.5, -2, 7, 3, 0, 0) rotate(-90deg);	}
	100% { transform: matrix(1, 0, 0, 1, 0, 0) rotate(90deg);	}
}
@keyframes move {
	0% { left: -15%; }
	100% { left: 115%; }
}

@keyframes flicker {
	0% { fill: orange; }
	50% {	fill: var(--black); }
	100%{ fill: var(--white); }
}
@keyframes back-flicker {
	0% { background: orange; }
	50% {	background: var(--white); }
	100%{ background: #00e520; }
}
@keyframes back-flicker-2 {
	0% { 	background: var(--white);	}
	100% {		background: var(--white);	}
}
@keyframes color-flicker {
	0% { 	fill: var(--black);}
	100% {		fill: var(--black);}
}

@keyframes rotate {
	0% { transform: rotate(-110deg); }
	50% { transform: rotate(-90deg); }
	100% { transform: rotate(90deg); }
}
@keyframes rotate-2 {
	0% { transform: rotate(-91deg); }
	50% { transform: rotate(-92deg); }
	100% { transform: rotate(-89deg); }
}
@keyframes back-image-flicker {
	0% { background-size: 100%; }
	10% { background-size: 105%; }
	100% { background-size: 150%; }
}
@keyframes matrix {
	0% { 	transform: matrix(6, 0, -1, 1, 1, 1);	}
	10% { 	transform: matrix(10, 0, 0, 1, 1, 1);	}
	100% { 		transform: matrix(6, 0, -1, 3, -4, 1); }
}
@keyframes matrix-2 {
	0% { 		transform: matrix(11, 0, 0, 1, 1, 1);	}
	50% { 		transform: matrix(10, 0, 0, 1, 1, 1);	}
	100% { 		transform: matrix(9, 0, 0, 1, 1, 1);	}
}
@keyframes back-slide {
	0% { 		background-position: bottom center;	}
	40% { 		background-position: center center;	}
	100% { 		background-position: top center;	}
}
@keyframes back-glitch {
	0% {		background-size: 100%;}
	25% {		filter: hue-rotate(0deg);}
	29% {		background-size: 100%;}
	30% {		background-size: 101%;}
	30.5% {		background-size: 100%;}
	32% {		filter: hue-rotate(360deg);}
	46% {		filter: hue-rotate(0deg);}
	100% {		background-size: 100%;}
}
@keyframes stroke {
	0% { 		stroke-dasharray: 5,5;		stroke-width: 2vw;}
	30% { 		stroke-dasharray: 4,4;		stroke-width: 2.2vw;}
	100% { 		stroke-dasharray: 3,3;		stroke-width: 5vw;}
}
@keyframes stroke-mobile {
	0% { 		stroke-dasharray: 5,5;		stroke-width: 30vw;}
	30% { 		stroke-dasharray: 4,4;		stroke-width: 40vw;}
	100% { 		stroke-dasharray: 3,3;		stroke-width: 50vw;}
}

@keyframes scaler {
	0% { 		transform:scale(101%);	}
	40% { 		transform:scale(103%);	}
	100% { 		transform:scale(99%);	}
}
@keyframes background-shift {
	0% { 		
	background-size: 10%;
	background-position: center center;	
	}
	10% { 		
	background-size: 20%;
	background-position: center center;	
	}
	20% { 		
	background-size: 20%;
	background-position: top left;	
	}
	30% { 		
	background-size: 50%;
	background-position: top left;	
	}
	40% { 		
	background-size: 50%;
	background-position: center right;	
	}
	60% { 		
	background-size: 100%;
	background-position: center center;	
	}
	70% { 		
	background-size: 3%;
	background-position: center center;	
	}
	100% { 		
	background-size: 3%;
	background-position: bottom center;	
	}
}