/*@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Marko+One&family=Raleway:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Bokor&display=swap');

*, *::before, *::after{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0; 
}
img{
	display: block;
	max-width: 100%;
}

:root {
  --screen-lg: 1100px;
  /*--screen-lg: 900px;*/
  --black-color: #000;
  --black-color-25-half: rgba(0,0,0,.75);
  --black-color-50-half: rgba(0,0,0,.5);
  --black-color-25: #020202;
  --black-color-50: #050505;
  --black-color-75: #080808;
  --black-color-100: #090909;
  --black-color-200: #222;
  --black-color-300: #333;
  --grey-color-50: #efefef;
  --grey-color-100: #eee;
  --grey-color-150: #e7e7e7;
  --grey-color-200: #ddd;
  --grey-color-300: #ccc;
  --grey-color-350: #aaa;
  --grey-color-400: #999;
  --grey-color-600: #757575;
  --grey-color-900: #666;
  --grey-color-1100: #0d0d0d;
  --white-color: #fff;
  --error-color: #b52559;
  --acceptable-color: #f29f05;
  --green-color: #8ad264;
  
  --primary-color-200: #58b6c8;
  --primary-color-400: #4799AC;
  --primary-color-600: #357b8f;
  --secondary-color-200: #ffc100;
  --secondary-color-400: #EB923C;
  --secondary-color-600: #f5811e;
  --tertiary-color-200: #ffc100;
  --tertiary-color-400: #EB923C;
  --tertiary-color-600: #f5811e;

  --blue-color-400: #7e7ddf;

	--pie-main: hsl(168, 76%, 42);

}
::placeholder {
  color: var(--grey-color-200);
  opacity: 1;
}
:-ms-input-placeholder {
  color: var(--grey-color-200);
}
::-ms-input-placeholder {
  color: var(--grey-color-200);
}
::-moz-selection { /* Code for Firefox */
  color: var(--white-color);
  background: var(--primary-color-400);
}

::selection {
  color: var(--white-color);
  background: var(--primary-color-400);
}
html{
	overflow-x: hidden;
	height: 100%;
  height: fill-available;
  height: -webkit-fill-available;
  min-height: -moz-available;
}

body{
	font-size: 10pt;
	height: 100%;
  min-height: 100%;
  min-height: fill-available;
  min-height: -webkit-fill-available;
  min-height: -moz-available;
	position: relative;
	overflow-x: hidden;
	background-color: var(--black-color-50);
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	color: var(--white-color);
  font-family: 'Raleway', sans-serif;
}
body.fixed{
	overflow: hidden;
}
main{
	/*background: var(--black-color-100);*/
}
input, textarea, button{

    font-family: 'Raleway', sans-serif;
}
*.serif{
    font-family: 'Marko One', serif;
}
a, a:visited, a:hover, a:active{
	color: inherit;
	text-decoration: none;
	display: inline-block;
}
.text-shadow{
  text-shadow: 0 0 4px rgba(0,0,0,.3);
}
.box-shadow{
  box-shadow: 0 0 .25rem 0 rgba(0,0,0,.3);
}
.primary{
	color: var( --primary-color-600 );
}
.secondary{
	color: var( --secondary-color-600 );
}
.dark-grey{
	color: var(--grey-color-900);
}
.table-link-visible{
	color: var( --primary-color-600 );
}
.table-link:hover{
	color: var( --primary-color-400 );
	font-weight: 600;
}
.table-link:active{
	color: var( --primary-color-200 );
}
tr.table-link:hover {
	background: var(--black-color-100);
}
.link,
a.link,
.link:visited,
a.link:visited{
	font-weight: 600;
	color: var( --primary-color-400 );
	transition: .25s ease;
	background-image: linear-gradient( to right, transparent, transparent ), linear-gradient( to right, var(--primary-color-200), var(--primary-color-600) );
	background-size: 100% 2px, 0 2px;
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size .2s ease;
}
.link.weight-900,
a.link.weight-900{
	font-weight: 900;
}
.link:hover,
a.link:hover{
	color: var( --primary-color-400 );
  	background-size: 0 2px, 100% 2px;
}
.link:active,
a.link:active{
	color: var( --primary-color-200 );
}
.link.secondary,
a.link.secondary,
.link.secondary:visited,
a.link.secondary:visited{
	color: var( --secondary-color-600 );
	background-image: linear-gradient( to right, transparent, transparent ), linear-gradient( to right, var(--secondary-color-200), var(--secondary-color-600) );
}
.link.secondary:hover,
a.link.secondary:hover{
	color: var( --secondary-color-400 );
}
.link.secondary:active,
a.link.secondary:active{
	color: var( --secondary-color-200 );
}
.link.tertiary,
a.link.tertiary,
.link.tertiary:visited,
a.link.tertiary:visited{
	color: var( --tertiary-color-600 );
	background-image: linear-gradient( to right, transparent, transparent ), linear-gradient( to right, var(--tertiary-color-200), var(--tertiary-color-600) );
}
.link.tertiary:hover,
a.link.tertiary:hover{
	color: var( --tertiary-color-400 );
}
.link.tertiary:active,
a.link.tertiary:active{
	color: var( --tertiary-color-200 );
}
.link.white,
a.link.white,
.link.white:visited,
a.link.white:visited{
	color: var( --white-color );
	background-image: linear-gradient( to right, transparent, transparent ), linear-gradient( to right, var(--white-color), var(--white-color) );
}
.link.white:hover,
a.link.white:hover{
	color: var( --white-color );
}
.link.white:active,
a.link.white:active{
	color: var( --white-color );
}
.link.dark,
a.link.dark,
.link.dark:visited,
a.link.dark:visited{
	color: var( --black-color );
	background-image: linear-gradient( to right, transparent, transparent ), linear-gradient( to right, var(--black-color), var(--black-color) );
}
.link.dark:hover,
a.link.dark:hover{
	color: var( --black-color );
}
.link.dark:active,
a.link.dark:active{
	color: var( --black-color );
}
.btn,
a.btn{
	background-color: var( --primary-color-600 );
	background-image: linear-gradient( to bottom left, var( --primary-color-200 ), var( --primary-color-600 ) );
	color: var( --black-color-50 );
	font-weight: 600;
	padding: 1em 2em;
	cursor: pointer;
	box-shadow: 0 0 8px 1px rgba( 0, 0, 0, 0 );
	margin: .25rem;
	line-height: 1.5rem;
	transition: box-shadow .25s ease;
}
.btn:hover,
a.btn:hover{
	background-color: var( --primary-color-400 );
	background-image: linear-gradient( to bottom left, var( --primary-color-200 ), var( --primary-color-400 ) );
	/*border: 2px solid var( --primary-color-400 );*/
	box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, .05);
	transform: scale(1.01);
}
.btn:active,
a.btn:active{
	background-color: var( --primary-color-200 );
	/*border: 2px solid var( --primary-color-200 );*/
	box-shadow: 1px 4px 12px 0px rgba(0, 0, 0, .05);
	transform: scale(0.99);
}
.btn.secondary,
a.btn.secondary{
	background-image: linear-gradient( to bottom left, var( --secondary-color-200 ), var( --secondary-color-600 ) );
	background-color: var( --secondary-color-600 );
	/*border: 2px solid var( --secondary-color-600 );*/
}
.btn.secondary:hover,
a.btn.secondary:hover{
	background-color: var( --secondary-color-400 );
	background-image: linear-gradient( to bottom left, var( --secondary-color-200 ), var( --secondary-color-400 ) );
	/*border: 2px solid var( --secondary-color-400 );*/
}
.btn.secondary:active,
a.btn.secondary:active{
	background-color: var( --secondary-color-200 );
	/*border: 2px solid var( --secondary-color-200 );*/
}
.btn.tertiary,
a.btn.tertiary{
	background-color: var( --tertiary-color-600 );
	background-image: linear-gradient( to bottom left, var( --tertiary-color-200 ), var( --tertiary-color-600 ) );
	/*border: 2px solid var( --tertiary-color-600 );*/
	/*color: var( --black-color );*/
}
.btn.tertiary:hover,
a.btn.tertiary:hover{
	background-color: var( --tertiary-color-400 );
	background-image: linear-gradient( to bottom left, var( --tertiary-color-200 ), var( --tertiary-color-400 ) );
	/*border: 2px solid var( --tertiary-color-400 );*/
	/*color: var( --black-color );*/
}
.btn.tertiary:active,
a.btn.tertiary:active{
	background-color: var( --tertiary-color-200 );
	/*border: 2px solid var( --tertiary-color-200 );*/
	/*color: var( --black-color );*/
}
.btn.white,
a.btn.white{
	background-image: unset;
	background-color: var( --white-color );
	border: 2px solid var( --white-color );
	color: var( --black-color );
}
.btn.white:hover,
a.btn.white:hover{
	background-color: var( --white-color );
	border: 2px solid var( --white-color );
	color: var( --black-color );
}
.btn.white:active,
a.btn.white:active{
	background-color: var( --white-color );
	border: 2px solid var( --white-color );
	color: var( --black-color );
}
.btn.alt,
a.btn.alt{
	background-image: unset;
	background-color: transparent;
	color: var( --primary-color-600 );
	border: 4px solid var( --primary-color-600 );
}
.btn.alt:hover,
a.btn.alt:hover{
	background-color: transparent;
	color: var( --primary-color-400 );
	border: 4px solid var( --primary-color-400 );
}
.btn.alt:active,
a.btn.alt:active{
	background-color: transparent;
	color: var( --primary-color-200 );
	border: 4px solid var( --primary-color-200 );
}
.btn.alt.secondary,
a.btn.alt.secondary{
	background-color: transparent;
	color: var( --secondary-color-600 );
	border: 4px solid var( --secondary-color-600 );
}
.btn.alt.secondary:hover,
a.btn.alt.secondary:hover{
	background-color: transparent;
	color: var( --secondary-color-400 );
	border: 4px solid var( --secondary-color-400 );
}
.btn.alt.secondary:active,
a.btn.alt.secondary:active{
	background-color: transparent;
	color: var( --secondary-color-200 );
	border: 4px solid var( --secondary-color-200 );
}
.btn.alt.tertiary,
a.btn.alt.tertiary{
	background-color: transparent;
	color: var( --tertiary-color-600 );
	border: 4px solid var( --tertiary-color-600 );
}
.btn.alt.tertiary:hover,
a.btn.alt.tertiary:hover{
	background-color: transparent;
	color: var( --tertiary-color-400 );
	border: 4px solid var( --tertiary-color-400 );
}
.btn.alt.tertiary:active,
a.btn.alt.tertiary:active{
	background-color: transparent;
	color: var( --tertiary-color-200 );
	border: 4px solid var( --tertiary-color-200 );
}
.btn.alt.white,
a.btn.alt.white{
	background-color: transparent;
	color: var( --white-color );
	border: 4px solid var( --white-color );
}
.btn.alt.white:hover,
a.btn.alt.white:hover{
	background-color: var(--white-color);
	color: var( --primary-color-600 );
	border: 4px solid var( --white-color );
}
.btn.alt.white:active,
a.btn.alt.white:active{
	background-color: var(--white-color);
	color: var( --primary-color-600 );
	border: 4px solid var( --white-color );
}
.btn.grey,
a.btn.grey{
	background-color: var( --grey-color-300 );
	background-image: linear-gradient( to bottom left, var( --black-color-300 ), var( --black-color-200 ) );
	/*border: 2px solid var( --grey-color-300 );*/
	color: var(--white-color);
}
.btn.grey:hover,
a.btn.grey:hover{
	background-color: var( --grey-color-200 );
	/*border: 2px solid var( --grey-color-200 );*/
	color: var(--white-color);
}
.btn.grey:active,
a.btn.grey:active{
	background-color: var( --grey-color-200 );
	/*border: 2px solid var( --grey-color-200 );*/
	color: var(--white-color);
}
.btn.dark,
a.btn.dark{
	background-color: var( --black-color );
	background-image: linear-gradient( to bottom left, var( --black-color ), var( --black-color-100 ) );
	/*border: 2px solid var( --dark-color-300 );*/
	color: var(--white-color);
}
.btn.dark:hover,
a.btn.dark:hover{
	background-color: var( --black-color );
	/*border: 2px solid var( --black-color );*/
	color: var(--white-color);
}
.btn.dark:active,
a.btn.dark:active{
	background-color: var( --black-color );
	/*border: 2px solid var( --black-color );*/
	color: var(--white-color);
}
.btn:not( .btn-square ){
	border-radius: 2em;
}
.btn.btn-square{
	border-radius: 5px;
}
.btn.btn-circle{
    width: 3rem;
    height: 3rem;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.btn.btn-circle:hover{
	transform: scale(1.03);
	transform-origin: center center;
}
.btn[disabled]:active,
.btn[disabled]:hover,
.btn[disabled]{
	opacity: .75;
	cursor: not-allowed;
	box-shadow: 0 0 0 rgba( 0, 0, 0, .25 );
	transform: scale(1);
}
.btn.btn-small{
	padding: .5rem 1rem;
}
.btn.btn-circle.btn-small{
	width: 2.5rem;
	height: 2.5rem;
}
.list-buttons{
	border-radius: 5px;
	overflow: hidden;	
  box-shadow: 1px 2px 3px 0px rgb(0 0 0 / 15%);
}
.list-buttons .btn.btn-square,
.list-buttons .btn{
	border-radius: 0;
	padding-top: 10px;
	border-bottom: 1px solid var(--grey-color-300);
}

.list-buttons .btn:hover{
	transform: scale(1);
	box-shadow: unset;
	opacity: .8;

}
.list-buttons .btn:active{
	transform: scale(1);
	opacity: .6;
	box-shadow: unset;
}
.button-grid{
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 9rem, 1fr ) );
	grid-gap: 1rem;
}
.btn.button-grid-button{
	text-align: center;
	margin: 0;
	position: relative;
	padding: 0;
	padding-bottom: 100%;
	width: 100%;
}
.button-grid-button-inner{
	padding: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
.button-grid-button-inner .icon{
	min-height: 3.1rem;
}
.button-grid-button-inner i{
	margin-top: 1.5rem;
	min-height: 1.6rem;
}
.button-grid-button-inner i::before{
	font-size: 1.25rem;
}

.button-grid-button-inner .label{
	min-height: 3rem;
	margin-top: .5rem;
}
ul, ol, li{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
::placeholder {
  color: var( --grey-color );
  opacity: 1;
}
:-ms-input-placeholder {
  color: var( --grey-color );
}
::-ms-input-placeholder {
  color: var( --grey-color );
}
.display-1,
.display-1 span,
.display-1 a,
.display-1 strong{
	font-size: clamp( 2rem, 5vw, 3rem );
}
.display-2,
.display-2 span,
.display-2 a,
.display-2 strong{
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
}
.display-3,
.display-3 span,
.display-3 a,
.display-3 strong{
	font-size: clamp( 1.5rem, 3.5vw, 2rem );
}
.display-4,
.display-4 span,
.display-4 a,
.display-4 strong{
	font-size: 1.5rem;
}
.display-45,
.display-45 span,
.display-45 a,
.display-45 strong{
	font-size: 1.25rem;
}
.display-5,
.display-5 span,
.display-5 a,
.display-5 strong{
	font-size: 1rem;
}
.display-6,
.display-6 span,
.display-6 a,
.display-6 strong{
	font-size: .8rem;
}
.circle-avatar-container{
    width: 16rem;
    height: 16rem;
    max-width: 30vw;
    max-height: 30vw;
    border-radius: 50%;
    background-size: cover;
    float: right;
    margin: 0 0 1rem 1rem;
}

.square-avatar-container{
		width: 100%;
		padding-bottom: 60%;
    border-radius: 5px;
    background-size: cover;
    margin: 1rem 0;
}
.grey-bg{
	background: var(--grey-color-100);
}
.white-bg{
	background: var(--white-color);
}
.dark-bg{
	background: var(--black-color-50);
}
.darkgrey-bg{
	background: var(--black-color-100);
}
.black-bg{
	background: var(--black-color);
}
.primary-bg{
	background: var(--primary-color-600);
}
.bg-transparent{
	background: none !important;
}
.bg-gradient{
	background-color: var(--primary-color-600);
	background-image: linear-gradient( to bottom right, var(--primary-color-200), var(--primary-color-600) );
	/*background-image: linear-gradient( to right, var(--primary-color-600), var(--primary-color-200) );*/
}
.bg-gradient-alt{
	background-color: var(--primary-color-600);
	background-image: linear-gradient( to bottom right, var(--primary-color-200), var(--primary-color-600) );
	/*background-image: linear-gradient( to bottom right, var(--primary-color-400), #e8eaf5 );*/
}
.bg-gradient-radial{
	background-color: var(--primary-color-600);
	background-image: linear-gradient( to bottom right, var(--primary-color-200), var(--primary-color-600) );
	background-image: radial-gradient( at top right, var(--primary-color-200), var(--primary-color-600) );
	/*background-image: linear-gradient( to bottom right, var(--primary-color-400), #e8eaf5 );*/
}
.white{
	color: var(--white-color);
}

.fit-content{
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: -ms-fit-content;
}
.clickable{
	cursor: pointer;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}
.no-events{
	pointer-events: none;
}
.no-resize{
	resize: none;
}
.nowrap{
	white-space: nowrap;
}
.v-align-top{
	vertical-align: top;
}
.v-align-middle{
	vertical-align: middle;
}
.relative{
	position: relative;
}
.menu-nomob,
.nomob{
	display: none;
}
em,
.italic{
  font-variation-settings: 'slnt' 12;
}
.weight-600{
	font-weight: 600;
}
.weight-900{
	font-weight: 900;
}
.line-height, .line-height *{
	line-height: 1.5rem;
}
.line-height-2{
	line-height: 2rem;
}
.ch30 {
	max-width: 30ch;
}
.ch45 {
	max-width: 45ch;
}
.ch60 {
	/*max-width: 60ch;*/
	max-width: 100vw;
}
.ch75 {
	/*max-width: 75ch;*/
	max-width: 100vw;
}
.max-width-768{
	max-width: 100vw;
}
.m-0{
	margin: 0 !important;
}
.m-auto{
	margin-left: auto;
	margin-right: auto;
}
.mr-h{
	margin-right: .5rem;
}
.mr-1{
	margin-right: 1rem;
}
.mt-h{
	margin-top: .5rem;
}
.mt-1{
	margin-top: 1rem;
}
.mt-2{
	margin-top: 2rem;
}
.mt-4{
	margin-top: 4rem;
}
.mt-5{
	margin-top: 5rem;
}
.mb-q{
	margin-bottom: .25rem;
}
.mb-h{
	margin-bottom: .5rem;
}
.mb-1{
	margin-bottom: 1rem;
}
.mb-2{
	margin-bottom: 2rem;
}
.mb-3{
	margin-bottom: 3rem;
}
.mb-4{
	margin-bottom: 4rem;
}
.mb-6{
	margin-bottom: 6rem;
}
.mb-8{
	margin-bottom: 8rem;
}

.p-h{
	padding: .5rem;
}
.p-q{
	padding: .25rem;
}
.p-1{
	padding: 1rem;
}
.pt-0{
	padding-top: 0 !important;
}
.pt-h{
	padding-top: .5rem;
}
.pt-1{
	padding-top: 1rem;
}
.pt-2{
	padding-top: 2rem;
}
.pt-3{
	padding-top: 3rem;
}
.pt-4{
	padding-top: 4rem;
}
.pt-5{
	padding-top: 5rem;
}
.pb-0{
	padding-bottom: 0;
}
.pb-h{
	padding-bottom: .5rem;
}
.pb-1{
	padding-bottom: 1rem;
}
.pb-2{
	padding-bottom: 2rem;
}
.pb-4{
	padding-bottom: 4rem;
}
.max-width-100{
	max-width: 100%;
}
.width-100{
	width: 100%;
}
.height-100{
	height: 100%;
}
.flex-align-center{
	align-items: center;
}
.flex-grow{
	flex-grow: 1;
}
.loader{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: var( --black-color-50 );
	z-index: 1001;
	pointer-events: none;
	opacity: 0;
	transition: .25s ease;
}
.search-results-inner-grid .alt-loader-inner{
	background: var( --black-color-50 );
}
.suggestions-blog .search-results-inner-grid > a,
.section-blog .search-results-inner-grid > a,
.suggestions-journal .search-results-inner-grid > a,
.section-journal .search-results-inner-grid > a,
.suggestions-news .search-results-inner-grid > a,
.section-news .search-results-inner-grid > a{
	padding: 0 0 3rem 0;
	margin-bottom: 3rem;
	aspect-ratio: unset;
  background-image: unset !important;
  border-radius: 0;
  border-bottom: 1px solid var(--primary-color-600);
}

.suggestions-blog .search-results-inner-grid > a:active,
.section-blog .search-results-inner-grid > a:active,
.suggestions-journal .search-results-inner-grid > a:active,
.section-journal .search-results-inner-grid > a:active,
.suggestions-news .search-results-inner-grid > a:active,
.section-news .search-results-inner-grid > a:active{
	transform: scale(1);
}

.suggestions-blog .search-results-inner-grid > a:hover,
.section-blog .search-results-inner-grid > a:hover,
.suggestions-journal .search-results-inner-grid > a:hover,
.section-journal .search-results-inner-grid > a:hover,
.suggestions-news .search-results-inner-grid > a:hover,
.section-news .search-results-inner-grid > a:hover{
	opacity: 1;
}

.suggestions-blog .search-results-inner-grid > a::after,
.section-blog .search-results-inner-grid > a::after,
.suggestions-journal .search-results-inner-grid > a::after,
.section-journal .search-results-inner-grid > a::after,
.suggestions-news .search-results-inner-grid > a::after,
.section-news .search-results-inner-grid > a::after{
	display: none;
}
.suggestions-blog .search-results-inner-grid > a .portfolio-description,
.section-blog .search-results-inner-grid > a .portfolio-description,
.suggestions-journal .search-results-inner-grid > a .portfolio-description,
.section-journal .search-results-inner-grid > a .portfolio-description,
.suggestions-news .search-results-inner-grid > a .portfolio-description,
.section-news .search-results-inner-grid > a .portfolio-description{
	position: relative;
	bottom: unset;
	left: unset;
	right: unset;
	top: unset;
}

.suggestions-blog .search-results-inner-grid > a .portfolio-description > div:first-child,
.section-blog .search-results-inner-grid > a .portfolio-description > div:first-child,
.suggestions-journal .search-results-inner-grid > a .portfolio-description > div:first-child,
.section-journal .search-results-inner-grid > a .portfolio-description > div:first-child,
.suggestions-news .search-results-inner-grid > a .portfolio-description > div:first-child,
.section-news .search-results-inner-grid > a .portfolio-description > div:first-child{
	color: var(--primary-color-400);
}
.suggestions-blog .search-results-inner-grid,
.section-blog .search-results-inner-grid,
.suggestions-journal .search-results-inner-grid,
.section-journal .search-results-inner-grid,
.suggestions-news .search-results-inner-grid,
.section-news .search-results-inner-grid{
	text-align: left;
	display: block;
}
.portfolio-date{
	display: none;
}
.portfolio-text-description{
	margin: 1rem auto 0 auto;
	overflow: hidden;
	text-overflow: ellipsis;	
 	display: -webkit-box;
 	-webkit-line-clamp: 4;
 	-webkit-box-orient: vertical;
 	line-height: 1.5rem;

}
.suggestions-blog .portfolio-date,
.section-blog .portfolio-date,
.suggestions-journal .portfolio-date,
.section-journal .portfolio-date,
.suggestions-news .portfolio-date,
.section-news .portfolio-date{
	display: block;
}
.loader.page-loaded{
	background: rgba(0,0,0,.75);
}
.loader.active{
	pointer-events: unset;
	opacity: 1;
}
.form-alt-loader{
	position: fixed;
	pointer-events: none;
	bottom: 0;
	right: 50vw;
	transform: translateX( 50% );
	width: 100vw;
	max-width: var(--screen-lg );
	text-align: right;

	padding: 1rem;
	z-index: 1000;
}
.form-alt-loader.active .loader-inner,
.loader.active .loader-inner{
	display: block;
}
.loader-inner{
	display: none;
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	/*border-radius: 50%;*/
	/*width: 3rem;*/
	/*height: 3rem;*/
	z-index: 1;
	transition: 1s ease-out;
}

.form-alt-loader .loader-inner{
	display: none;
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	z-index: 1;
	transition: 1s ease-out;
}

.loader-inner .boat{
  animation: rocking 15s ease infinite;
}
.loader-inner .portal{
  animation: portal 15s linear infinite;
  width: 10rem;
}
@keyframes portal {
	from {
		transform: rotateY( 0deg );
	} to {

		transform: rotateY( 360deg );
	}
}
.loader-inner .boat svg{
	width: 7.5rem;
	height: auto;
	position: absolute;
	bottom: 0;
	right: 0;
  animation: float 7s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.form-alt-loader .loader-inner{
	top: unset;
	bottom: 1rem;
	right: 1rem;
	left: unset;
}
.form-alt-loader .loader-inner::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 50%;
	border-top: 3px solid var(--primary-color-600);
	border-left: 3px solid var(--primary-color-600);
	border-right: 3px solid var(--primary-color-600);
	border-bottom: 3px solid transparent;
	animation: colorSpin 6s linear infinite;
	z-index: 2;
}
.alt-loader{
	pointer-events: none;
	transition: .25s ease;
	position: relative;
	width: 3rem;
	height: 3rem;
}
.alt-loader-inner{
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: var(--black-color-100);
	width: 3rem;
	height: 3rem;
	z-index: 1;
	transition: 1s ease-out;
}
.alt-loader-inner::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 50%;
	border-top: 2px solid var(--primary-color-600);
	border-left: 2px solid var(--primary-color-600);
	border-right: 2px solid var(--primary-color-600);
	border-bottom: 2px solid transparent;
	animation: colorSpin 6s linear infinite;
	z-index: 2;
}

@keyframes rocking{
  0%, 100%{
    transform: rotate(1deg);
  }
  25%{
    transform: rotate(-1deg);
  }
  50%{
    transform: rotate(1deg);
  }
  75%{
    transform: rotate(-1deg);
  }
}
@keyframes float{
  0%, 100%{
    transform: translateY(.125rem);
  }
  50%{
    transform: translateY(-.125rem);
  }
}
.menu{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	background: var(--black-color);
	box-shadow: 0 0 .25rem rgba( 0,0,0,.1);
}
.menu-inner{
	display: flex;
	align-items: center;
	width: var(--screen-lg);
	max-width: 100vw;
	margin: auto;
	height: 5rem;
}

.menu-inner{
	margin-left: 2rem;
}
.menu .toggle-menu{
	position: fixed;
	top: 0;
	right: 0;
	cursor: pointer;
	width: 5rem;
	height: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}
.toggle-menu-inner{
	width: 2rem;
	height: 3px;
	background: var( --primary-color-400 );
	position: relative;
	transition: transform .25s ease;
}

.logo svg{
	height: 1.5rem;
}
.logo{
	width: 7.5rem;
	margin: 0 auto;
}
.logo img{
	max-width: 100%;
}
.toggle-menu-inner::before{
	content: '';
	top: -8px;
	width: 100%;
	height: 100%;
	background: inherit;
	position: absolute;
	left: 0;
	transition: transform .25s ease;
}
.toggle-menu-inner::after{
	content: '';
	bottom: -8px;
	width: 100%;
	height: 100%;
	background: inherit;
	position: absolute;
	left: 0;	
	transition: transform .25s ease;
}
.toggle-menu:hover .toggle-menu-inner{
	background-color: var(--primary-color-200);
}
.toggle-menu:active .toggle-menu-inner{
	background-color: var(--primary-color-200);
}
.menu.active{
	z-index: 1000;
}
.menu.active .toggle-menu-inner{
	background: var(--primary-color-200);
	transform: rotate( -45deg );
}
.menu.active .toggle-menu-inner::before{
	background: var(--primary-color-200);
	transform: rotate( 90deg );
	top: 0;
}
.menu.active .toggle-menu-inner::after{
	background: var(--primary-color-200);
	transform: rotate( 90deg );
	bottom: 0;
}
.menu .menu-list-container{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	overflow-y: auto;
	overflow-x: hidden;
	background: var( --black-color );
	padding: 4rem 2rem;
	pointer-events: none;
	opacity: 0;
	transition: .25s ease;
	display: grid;
	grid-template-areas: "logo" "left" "right";
	grid-template-rows: max-content max-content max-content;
}
.menu .menu-list-container .logo-outer{
	grid-area: logo;
	margin-bottom: 1rem;
}
.menu .menu-list-container .list-left{
	grid-area: left;
}
.menu .menu-list-container .list-right{
	grid-area: right;
}
.menu .menu-language-select{
	width: 5rem;
	height: 5rem;
	right: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu-language-select .language-select{
	margin-top: 2rem;
}
.menu.active .menu-list-container{
	pointer-events: unset;
	opacity: 1;	
}
.menu-list li{
	opacity: 0;
	transform: translateY( .5rem );
}
.menu.active .menu-list li{
	animation: trAppear .25s ease forwards;
}

.menu li button{
	width: 100%;
	background: unset;
	cursor: pointer;
	color: var(--black-color);
}
.menu li button,
.menu li a{
	min-width: 4rem;
	min-height: 4rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-weight: 900;
	padding: 0 .75rem 0 .75rem;
	transition: color .25s ease;
}
.menu li button i,
.menu li a i{
	/*min-height: 21px;*/
	/*margin-bottom: .5rem;*/
	/*color: var(--primary-color-600);*/
}

.menu li button .label,
.menu li a .label{
	text-transform: uppercase;
	font-weight: 600;
	/*font-size: .8rem;*/
}
.menu li button[disabled]{
	cursor: not-allowed !important;
}

.menu li button[disabled]:hover i,
.menu li button[disabled]:hover .label,
.menu li button[disabled] i,
.menu li button[disabled] .label{
	color: var(--grey-color-300);
}
.menu li button .custom-icon,
.menu li a .custom-icon{
	margin-bottom: 4px;
	color: var(--primary-color-600);
	user-select: none;
	font-weight: 900;
}
.menu li button.active .custom-icon,
.menu li button:hover .custom-icon,
.menu li a.active .custom-icon,
.menu li a:hover .custom-icon,
.menu li button.active i,
.menu li button:hover i,
.menu li a.active i,
.menu li a:hover i,
.menu li button.active,
.menu li button:hover,
.menu li a.active,
.menu li a:hover{
	color: var(--primary-color-200);
}
@media (min-width: 768px){
	.menu li a.menu-item-small{
		width: 2.5rem;
		min-width: 2.5rem;
		background: transparent;
		background-image: unset;
		color: var(--white-color);
	}

}
.language-select{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: .5rem;
}
.section{
}
.section-inner,
.portfolio-search-grid{
	width: var(--screen-lg);
	margin: auto;
	max-width: 100vw;
	min-height: calc( 100vh - 5rem );
	background: var(--black-color-50-half);
}
.section-inner.black-bg{
	background: var(--black-color-25);
}
.section-inner.darker-bg{
	background: var(--black-color-25-half);
}
.hr.section-inner,
.about-page-section.section-inner,
.section-inner.no-min-height,
.portfolio-page-section.section-inner{
	min-height: unset;
}
.section-discography .portfolio-search-results-container{
	margin-top: 1.5rem;
}
.portfolio-search-bar{
	position: fixed;
	top: calc( 5rem - 1px );
	z-index: 998;
	left: 0;
	right: 0;
	background: var(--black-color);
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	text-align:	center;
	justify-content: space-around;
}
.portfolio-search-grid .portfolio-search-bar.active{
	transform: translateX( 0 );

}
.portfolio-bar-backdrop{
	z-index: 996;
	background: var(--black-color);
	position: fixed;
	top: 0;
	left: 0;
	bottom: -3rem;
	right: 0;
	opacity: 0;
	pointer-events: none;
	transition: .25s ease;
}
.portfolio-search-grid .portfolio-search-bar.active + .portfolio-bar-backdrop{
	opacity: .3;
	pointer-events: unset;
}

.portfolio-search-bar-header{
	/*background-color: var(--primary-color-600);*/
	/*color: var(--white-color);*/
	font-weight: 900;
	padding: .5rem 1rem;
	margin-top: 1rem;
	/*font-size: 1rem;*/
}
.expand-filters{
	width: 100%;
	height: 33px;
	color: var(--grey-color-900);
	cursor: pointer;
	/*transition: box-shadow .125s ease;*/
	border-radius: 4px;
}
.expand-filters:hover{
	transform: scale( 1.01 );
	/*box-shadow: 1px 2px 3px 1px rgb(0 0 0 / 5%);*/
}
.expand-filters:active{
	transform: scale( 0.99 );
}
.handler-parent{
	text-align: center;
}
.handler-parent ul ~ .expand-filters{
	display: none;
}
.handler-parent ul.long ~ .expand-filters{
	display: block;
}
.handler-parent ul.expanded ~ .expand-filters::before{
	content: attr(data-collapse);
}

.handler-parent ul.expanded ~ .expand-filters i{
	transform: rotate( 180deg ) translateY( 2px );
}
.expand-filters::before{
	content: attr(data-expand);
}
.handler-parent ul{
	transition: max-height .25s ease;
}
.handler-parent ul.long{
	max-height: 165px;
	overflow: hidden;
}
.handler-parent ul.expanded,
.handler-parent ul.long.expanded{
	max-height: unset;
}
.handler-parent li{
	display: inline-block;
}
.portfolio-search-grid .portfolio-search-bar li{
	height: 33px;
}
.portfolio-search-bar input[type=checkbox]{
	display: none;
}	
.portfolio-search-bar input[type=checkbox] + label{
	position: relative;
	width: 100%;
	display: block;
	padding: .5rem 2rem .5rem 1rem;
	/*border-bottom: 1px solid var( --grey-color-200 );*/
	/*border-right: 1px solid var(--grey-color-200);*/
	/*border-left: 1px solid var(--grey-color-200);*/
	transition: .25s ease;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	opacity: 1;
	/*pointer-events: none;*/
}
.portfolio-search-bar input[type=checkbox] + label.active{
	cursor: pointer;
	/*opacity: 1;*/
	/*pointer-events: unset;*/
}
.reset-search-filters{
	transition: .25s ease;
	cursor: pointer;
	padding: .5rem 1.25rem .5rem 1.25rem;
	display: none;
}
.reset-search-filters:hover,
.reset-search-filters.active{
	padding: .5rem 1.5rem .5rem 1.25rem;
	font-weight: 600;
}
.portfolio-search-bar input[type=checkbox] + label:hover{
	padding: .5rem 2.25rem .5rem 1.25rem;
	font-weight: 600;
}
.portfolio-search-bar input[type=checkbox] + label::after{
/*	position: absolute;
	content: '';
	top: 50%;
	bottom: 0;
	right: .5rem;
	width: 1rem;
	height: 1rem;
	border-radius: 4px;
	border: 1px solid var( --grey-color-200 );
	transform: translateY( -50% );
	z-index: 1*/;
}
.portfolio-search-bar input[type=checkbox] + label:hover::after{
	background-color: var(--primary-color-200);
}
.portfolio-search-bar input[type=checkbox]:checked + label{
	padding: .5rem 2.25rem .5rem 1.25rem;
	font-weight: 600;
}
.portfolio-search-bar input[type=checkbox]:checked + label::after{
	background-color: var(--primary-color-600);
}
.portfolio-search-bar input[type=checkbox] + label span{
	/*font-size: .7rem;*/
	background: var( --grey-color-200 );
	color: var( --grey-color-600 );
	display: none;
	/*display: inline-flex;*/
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	max-width: 2rem;
	padding: .25rem .5rem;
	font-weight: 600;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	right: 2rem;
}
.portfolio-search-bar input[type=checkbox] + label i::before{
	/*font-size: .6rem;*/
}
.portfolio-search-bar input[type=checkbox] + label i{
	position: absolute;
	top: 50%;
	/*font-size: .7rem;*/
	color: var(--white-color);
	right: 10px;
	transform: translateY( -50% );
	z-index: 2;
	opacity: 0;
}
.portfolio-search-bar input[type=checkbox]:checked + label i{
	opacity: 1;
}
.portfolio-search-results-header{
	/*border-bottom: 1px solid var(--grey-color-200);*/
	align-items: center;
	grid-gap: 1rem;
}
button.menu-back-button{
	background: unset;
}
button.menu-back-button{
  width: 3rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
	color: var(--primary-color-600);
}

.toggle-filters-menu{
  height: 5rem;
  display: flex;
  padding-right: 1.5rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
	color: var(--primary-color-600);
}
button.menu-back-button:hover,
.toggle-filters-menu:hover{
	color: var(--primary-color-400);
}
button.menu-back-button i::before,
.toggle-filters-menu i::before{
	/*font-size: 1.5rem;*/
}

.toggle-filters-menu span{
	display: none;
}
.search-bar-input {
	display: grid;
	grid-template-columns: 1fr max-content;
}
.search-bar-input input{
	height: 3rem;
	border-radius: 2rem 0 0 2rem;
	border-bottom: 2px solid var(--primary-color-600);
	border-left: 2px solid var(--primary-color-600);
	border-top: 2px solid var(--primary-color-600);
	outline: none;
	padding: 0 1rem;
}
.search-bar-input button.btn,
.search-bar-input button.btn:hover,
.search-bar-input button.btn:active{
	height: 3rem;
	width: 3rem;
	padding: 0;
	border-radius: 0 2rem 2rem 0;
	border-left: unset;
	margin: 0;
	transform: scale(1);
}
.search-bar-select {
	display: grid;
	grid-template-columns: max-content 1fr;
}
.search-bar-input-alt label,
.search-bar-select label{
	display: block;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2rem 0 0 2rem;
	background: var(--primary-color-400);
	color: var(--white-color);
	font-weight: 600;
	padding: 0 .5rem 0 1rem;
}
.search-bar-select select{
	height: 3rem;
	border-radius: 0 2rem 2rem 0;
	border: 2px solid var(--primary-color-600);
	background: var(--black-color-100);
	outline: none;
	padding: 0 1rem;
}
.search-bar-input-alt {
	display: grid;
	grid-template-columns: max-content 1fr;
}
.search-bar-input-alt input{
	height: 3rem;
	border-radius: 0 2rem 2rem 0;
	border: 2px solid var(--primary-color-600);
	outline: none;
	padding: 0 1rem;
}
.search-results{
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	padding-right: 1rem;
	padding-left: 1rem;
	padding-top: 5rem;
}
.section-video{
	padding-top: 5rem;
}
.section-video .search-results{
	padding-top: 0;
}
#portfolio_suggestions .search-results{
	padding: 0;
	min-height: unset;
}
#news_page .search-results{
	padding: 0;
	min-height: unset;
}
.footer-container{
	z-index: 997;
	position: relative;
	box-shadow: 0 0 .25rem rgba( 0,0,0,.3);
}
.footer-inner{
	position: relative;
	width: var(--screen-lg);
	max-width: 100vw;
	margin: auto;
	padding: 4rem 2rem 2rem 2rem;
}
.sub-footer{
	position: relative;
}
.ds-border{
	position: absolute;
	top: .5rem;
	left: .5rem;
	pointer-events: none;
}
.ds-border.right{
	right: .5rem;
	left: unset;
 	transform: scaleX( -1 );
}
.ds-border.bottom-right{
	right: .5rem;
	left: unset;
	top: unset;
	bottom: .5rem;
 	transform: scale( -1 );
}
.ds-border.bottom-left{
	top: unset;
	bottom: .5rem;
 	transform: scaleY( -1 );
}
.menu .menu-list-container + .borders{
	position: fixed;
	inset: 0;
	pointer-events: none;
 	z-index: 3;
 	opacity: 0;
 	transition: .25s ease;
 	transform: scale(1.025);
}
.menu.active .menu-list-container + .borders{
	opacity: 1;
	transform: scale(1);
 	transition: 1s ease;
}
.menu .menu-list-container + .borders .ds-border svg path{
	fill: var(--primary-color-600);
}
.ds-border svg{
	width: 4rem;
	height: auto;
}
.sub-footer svg{
	width: 100%;
	max-width: 768px;
	height: auto;
	position: absolute;
	z-index: -1;
  bottom: calc( 100% - 2rem );
	left: 0;
}
.segment-borders,
.footer-borders{
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
}
.footer-borders::after{
	content: '';
	position: absolute;
	z-index: 3;
	pointer-events: none;
	background: #000;
	top: 8px;
	left: 3rem;
	right: 3rem;
	height: 3px;
}
.footer-borders::before{
	content: '';
	position: absolute;
	z-index: 3;
	pointer-events: none;
	border-left: 3px solid #000;
	border-right: 3px solid #000;
	top: 3rem;
	bottom: 0;
	left: 8px;
	right: 8px;
}
.segment-borders::after{
	content: '';
	position: absolute;
	z-index: 3;
	pointer-events: none;
	border-bottom: 3px solid var(--primary-color-400);
	border-top: 3px solid var(--primary-color-400);
	top: 8px;
	bottom: 8px;
	left: 3rem;
	right: 3rem;
}
.segment-borders::before{
	content: '';
	position: absolute;
	z-index: 3;
	pointer-events: none;
	border-left: 3px solid var(--primary-color-400);
	border-right: 3px solid var(--primary-color-400);
	top: 3rem;
	bottom: 3rem;
	left: 8px;
	right: 8px;
}
.segment-borders .ds-border svg path{
	fill: var(--primary-color-400);
}
.colspan-1-3{
	grid-column-start: 1;
	grid-column-end: 3;
}
.footer-image{
	/*display: none;*/
}
.footer-logo svg{
	height: 2rem;
}
.footer-logo svg .cls-1{
	fill: #000;
}
.footer-logo img{
	width: 10rem;
}
.sub-footer::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	/*background-image: linear-gradient( to right, var(--secondary-color-600), var(--secondary-color-200 ) );*/
	background: var(--black-color);
}
.sub-footer-inner{
	position: relative;
	width: var(--screen-lg);
	max-width: 100vw;
	margin: auto;
	padding: 1.75rem 2rem 1.5rem 2rem;
	z-index: 5;
}
.sub-footer-inner > div{
	position: relative;
	z-index: 5;
}
.footer-container::after{
	content: '';
	z-index: -3;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background-image: linear-gradient( to top, var(--primary-color-600 ), var(--black-color ) );*/
	/*opacity: .5;*/
}

/*.footer-container::before{
	content: '';
	z-index: -2;
	position: absolute;
	bottom: 10rem;
	left: calc( 90vw - 10rem );
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: var(--primary-color-200);
	box-shadow: inset 1rem -1rem 2rem 1rem var(--primary-color-600);
	opacity: .75;
}*/
footer{
	/*background: var(--black-color-100);*/
}
.footer{
	position: relative;
	color: var(--white-color);
	overflow: hidden;
	background-color: rgba(0,0,0,.75);
}

.cookie-popup{
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	z-index: 1000;
	width: 22rem;
	max-width: calc( 100vw - 2rem );
	background: var( --black-color-100 );
	padding: .5rem;
	box-shadow: 0 0 .25rem rgba( 0, 0, 0, .25 );
	border-radius: 1rem;
}
.flag{	
  object-fit: cover;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 2px var(--grey-color-400);
	/*border: 2px solid var( --grey-color-400 );*/
}
.flag .flag-inner{
	width: calc( 100% + 2px );
	height: calc( 100% + 2px );
	background-size: cover;
	background-position: center;
  transform: translate(-1px, -1px);
}
.language-select-flag{
	cursor: pointer;
	opacity: .5;
}
.language-select-flag:hover,
.language-select-flag.active{
	opacity: 1;
	box-shadow: 0 0 0 2px var(--secondary-color-600);
	/*border: 2px solid var( --secondary-color-600 );*/
}
.search-results-inner-grid{
	max-width: var(--screen-lg);
	margin: 0 auto;
	display: grid;
	grid-gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 18rem, 1fr ) );
  padding: 1rem 0 1rem 0;
  /*min-height: calc(100vh - 5rem);*/
  user-select: none;
}
.project-page.search-results-inner-grid{
	padding: 0;
}
#no_results.loading,
.search-results-inner-grid.loading{
	opacity: .75;
	transition: opacity .25s ease;
}
.small-portfolio-preview,
.search-results-inner-grid > a{
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	/*background-color: var( --grey-color-100 );*/
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	transition: box-shadow .25s ease, opacity .25s ease;
	box-shadow: 0 0 0 rgba( 0, 0, 0, 0 );
	border-radius: .75rem;
}
.suggestions-video .search-results-inner-grid > a,
.section-video .search-results-inner-grid > a{
	aspect-ratio: 16 / 9;
}
.scene-selector button{
	background-size: cover;
  width: 6rem;	
  height: 4.5rem;
  margin: 0 1rem 0 0;
  border: 3px solid var(--white-color);
  box-shadow: 0 0 0.25rem 0 rgb(0 0 0 / 20%);
  border-radius: 3px;
}
.scene-selector button.grey{
	opacity: .5;
}
.scene-selector button:hover{
	cursor: pointer;
	opacity: 1;
	transform: scale(1.01);
}
.scene-selector button:active{
	transform: scale(0.99);
}
.lazyload-placeholder{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	/*background-image: linear-gradient(to top right, var( --primary-color-600 ), var( --secondary-color-600 ) );*/
	background-color: var( --black-color-50 );
	z-index: 1;
}
.small-portfolio-preview:hover,
.search-results-inner-grid > a:hover{
	/*border-radius: 2rem 0 0 0;*/
	box-shadow: 0 0 .25rem rgba( 0, 0, 0, .25 );
	opacity: .8;
}

.small-portfolio-preview:active,
.search-results-inner-grid > a:active{
	transform: scale(0.99);
}
.small-portfolio-preview::after,
.search-results-inner-grid > a::after{
	content:  '';
	position: absolute;
	bottom: 0;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%);
	transition: .25s ease;
}
.small-portfolio-preview .portfolio-description,
.search-results-inner-grid > a .portfolio-description{
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	color: var(--white-color);
  text-shadow: 0 0 4px var(--black-color);
  z-index: 2;
  transition: .5s ease;
}
.small-portfolio-preview-grid{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 9rem, 1fr ) );
    grid-gap: 1rem;
  }
.small-portfolio-preview .image-container{
	position: absolute;
	z-index: 1;
	inset: 0;
	background-size: cover;
}
.portfolio-description .portfolio-title{
	max-width: 100%;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;	
 	display: -webkit-box;
 	-webkit-line-clamp: 3;
 	-webkit-box-orient: vertical;
}
.line-clamp-2{
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
}
.line-clamp-3{
 	display: -webkit-box;
 	-webkit-line-clamp: 3;
 	-webkit-box-orient: vertical;
}
.line-clamp-5{
 	display: -webkit-box;
 	-webkit-line-clamp: 5;
 	-webkit-box-orient: vertical;
}

.portfolio-page-feature{
	background-color: var( --primary-color-600 );
	color: var(--white-color);
	padding: 2.5rem;
	border-radius: 4px;
	position: relative;
	max-width: 100%;
	background-size: cover;
	background-position: 50% 50%;
	overflow: hidden;
}
.portfolio-page-feature::after{
	position: absolute;
	z-index: 1;
	content: '';
	inset: 0;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	background: var(--white-color);
	opacity: .3;
}
.portfolio-page-feature > div,
.portfolio-page-feature > p{
	position: relative;
	z-index: 2;
  text-shadow: 1px 2px 8px rgb(0 0 0 / 100%);
}
div.close-portfolio-page-feature{
	cursor: pointer;
	padding: 1rem;
	position: absolute;
	top: .5rem;
	right: .5rem;
  text-shadow: unset;
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 .25rem 0 rgba( 0,0,0,.3 );
	background: var(--white-color);
	border-radius: 50%;
	color: var(--black-color);
}
div.close-portfolio-page-feature:hover{
	transform: scale( 1.05 );
}
div.close-portfolio-page-feature:active{
	transform: scale( 0.95 );
}
.close-portfolio-page-feature i::before{
	/*font-size: 1rem;*/
}
.no-results{
	max-width: 75ch;
}
.error-box{
  padding: 1rem 1.5rem;
  border-radius: 5px;
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: -ms-fit-content;
  background-color: var(--tertiary-color-200);
}

.popups{
  position: fixed;
  background: rgba( 30, 30, 30, 0 );
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: -3rem;
  padding-bottom: 3rem;
  pointer-events: none;
  transition: .25s ease;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
}
.popups.active{
    pointer-events: unset;
    background: rgba( 30, 30, 30, .25 );
}
.popup{
	position: relative;
	background: var(--black-color-100);
	box-shadow: 0 0 .25rem 0 rgba( 30, 30, 30, .5 );
	padding: 1rem;
	width: 22.5rem;
	max-width: calc( 100vw - 2rem );
	border-radius: 1rem;
	cursor: pointer;
	user-select: none;
	margin: 2rem 1rem;
	border: 3px solid var(--primary-color-600);
}
.popup + .popup.modal{
	display: none;
}
.popup.modal{
	width: unset;
	cursor: unset;
	user-select: unset;
}
.popup::before{
	position: absolute;
}
.popup .close-x{
	background: unset;
	position: absolute;
	top: 0;
	right: 0;
	width: 4.25rem;
	cursor: pointer;
	height: 4.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.popup .popup-title{
	padding-right: 4.5rem;
}
.popup .close-x i::before{
	/*font-size: 1.5rem;*/
}
.popup h1{
	padding-right: 3rem;
}
.rows-input{
	max-width: 60ch;
}
.filter-input-container{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr max-content;;
}

.select-container select,
.filter-input-container input{
	height: 3.25rem;
}
.filter-input-container button.btn{
	margin: 1rem 0 0 0;
	height: 3.25rem;

}
.input-container{
	position: relative;
}

.select-container select + label,
.input-container .tox.tox-tinymce + label,
.input-container textarea + label,
.input-container input + label {
  background-color: var(--black-color-100);
  top: 3px;
  left: 1rem;
  position: absolute;
  padding: .25rem .5rem;
  white-space: nowrap;
  max-width: calc( 100% - 2rem );
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.input-container .tox.tox-tinymce + label{
	top: -20px;
	pointer-events: none;
	padding-bottom: 2px;
}
.select-container select,
.input-container textarea,
.input-container input{
	background: var(--black-color-100);
  border: 2px solid var(--grey-color-300);
  margin: 1rem 0 0 0;
  width: 100%;
  padding: 1rem 1rem;
  outline: none;
  border-radius: 5px;
  color: var(--white-color);
}
.search-bar-select select,
.select-container select{
	cursor: pointer;
	background: var(--black-color-100);
	color: var(--white-color);
}
.select-container select[readonly],
.input-container input[readonly]{
	cursor: default;
}
.input-container textarea{
	resize: vertical;
	min-height: 5rem;
}
.input-container .tox.tox-tinymce{
  border: 2px solid var(--grey-color-300);
  margin: 1rem 0 0 0;
  width: 100%;
  border-radius: 5px;
  padding-top: 0px;
  min-height: 15rem;
}

.select-container select:hover,
.select-container select:focus,
.select-container select.active,
.input-container .tox.tox-tinymce:hover,
.input-container .tox.tox-tinymce.active,
.input-container textarea:hover,
.input-container textarea:focus,
.input-container textarea.active,
.input-container input:hover,
.input-container input:focus,
.input-container input.active{
  border: 2px solid var(--primary-color-600);
}

.input-container .tox.tox-tinymce:hover + label,
.input-container .tox.tox-tinymce.active + label,
.input-container textarea:hover + label,
.input-container textarea:focus + label,
.input-container textarea.active + label,
.input-container input:hover + label,
.input-container input:focus + label,
.input-container input.active + label {
	color: var(--primary-color-600);
}
.input-container textarea.red-border,
.input-container input.red-border{
  border: 2px solid var(--error-color);
}
.input-container textarea.red-border + label,
.input-container input.red-border + label{
	color: var(--error-color);
}

.validate-container, 
.match-container{
	position: relative;
	margin-top: .75rem;
	height: 5px;
	width: calc( 100% - 1.5rem );
	opacity: 1;
	background-color: var(--grey-color-900);
}
.validate-container.active, 
.match-container.active{
	opacity: 1;
}
.validate-score,
.progress-bar-inner,
.match-score{
	position: absolute;
	width: 0;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	transition: .25s ease;
}

.validate-container[data-score="bad"] .validate-score{
	background:	var(--error-color);
	width: 33%;
}

.validate-container[data-score="acceptable"] .validate-score{
	background:	var(--acceptable-color);
	width: 66%;
}

.validate-container[data-score="good"] .validate-score{
	background:	var(--green-color);
	width: 100%;
}
.validate-text{
	position: absolute;
	top: -6px;
	right: -1.75rem;
	/*opacity: 0;*/
	/*transition: .25s ease;*/
	pointer-events: none;
}

.validate-text i{
	padding-right: .5rem;
	color: var(--grey-color-900);
}
.match-container[data-score="good"] .validate-text i,
.validate-container[data-score="good"] .validate-text i{
	color: var(--green-color);
}

.match-container[data-score="bad"] .match-score{
	background:	var(--error-color);
	width: 50%;
}

.match-container[data-score="good"] .match-score{
	background:	var(--green-color);
	width: 100%;
}
.checkbox-container{
	position: relative;
}
.checkbox-container input[type="checkbox"]{
	display: none;
}
.checkbox-container input[type="checkbox"] + label{
	position: relative;
	line-height: 1.5rem;
  text-indent: 1.75rem;
  display: inline-block;
  cursor: pointer;
}
.checkbox-container input[type="checkbox"] + label::before{
	content: '';
	background: var(--black-color-100);
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 3px;
	border: 1px solid var(--grey-color-200);
	position: absolute;
	top: 1px;
	left: 0;
	opacity: .5;
	z-index: 1;
}

.checkbox-container input[type="checkbox"] + label i.fa-check{
	color: var(--primary-color-600);
	position: absolute;
	top: -1px;
  left: -26px;
  z-index: 2;
  opacity: 0;
}
.checkbox-container input[type="checkbox"] + label i.fa-check::before{
  font-size: 1.25rem;
}


.checkbox-container input[type="checkbox"]:checked + label::before{
	border: 1px solid var(--primary-color-600);

}
.checkbox-container input[type="checkbox"] + label:hover::before{
	border: 1px solid var(--primary-color-200);
}
.checkbox-container input[type="checkbox"] + label:active i.fa-check,
.checkbox-container input[type="checkbox"] + label:active::before{
	transform: scale(0.9);
}

.checkbox-container input[type="checkbox"]:hover + label i.fa-check{
  opacity: .5;
	color: var(--primary-color-400);
}

.checkbox-container input[type="checkbox"]:checked + label i.fa-check{
  opacity: 1;
	color: var(--primary-color-200);
}
.checkbox-container{
	position: relative;
}
.radio-container input[type="radio"]{
	display: none;
}
.radio-container input[type="radio"] + label{
	position: relative;
	line-height: 1.5rem;
  text-indent: 1.75rem;
  display: inline-block;
  cursor: pointer;
}
.radio-container input[type="radio"] + label::before{
	content: '';
	background: var(--white-color);
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	border: 1px solid var(--grey-color-200);
	position: absolute;
	top: 1px;
	left: 0;
	z-index: 1;
	box-shadow: inset 0 0 0 0px var(--primary-color-400);
	transition: .25s ease;
}

.radio-container input[type="radio"]:checked + label::before,
.radio-container input[type="radio"] + label:hover::before{
	box-shadow: inset 0 0 0 4px var(--primary-color-400);
}

.checkmark__circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: #e5f4e4;
	fill: none;
	animation: stroke 0.6s cubic-bezier( 0.65, 0, 0.45, 1 ) 1s forwards;
}
.checkmark {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: block;
	stroke-width: 2;
	stroke: #fff;
	stroke-miterlimit: 10;
	box-shadow: inset 0px 0px 0px #cbeac9;
	animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
}
.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}
.checkmark-input-grid{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 1rem;
    align-items: center;
}
.show-success{
	display: none;
}
.lg-image-width{
	min-height: calc( 100vh - 5rem );
	position: relative;
	/*padding: 1rem;*/
}

.lg-image-width .lg-image-container{
	display: none;
}

.lg-image-width .lg-content-container{
	/*background: var(--black-color-50);*/
	position: relative;
	z-index: 2;
	margin: 0 auto;
}
.portfolio-page-padding-content-container,
.padding-content-container,
.small-form-container{
	padding: 2rem;
}
.padding-content-container.padding-content-container-alt{
	padding: 2.5rem;
}
.breadcrumbs{
	white-space: nowrap;
	display: flex;
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	padding-top: 3px;
	background: var(--black-color-25);
	padding-left: 1.5rem;
}
#dashboard .breadcrumbs{
	padding-left: 0;
}	
.breadcrumbs li{
	padding: 1rem;
	position: relative;
}
.breadcrumbs li ~ li::before{
	content: '';
	position: absolute;
	top: calc( 50% - 2px );
	left: -.5rem;
	width: .5rem;
	height: .5rem;
	transform: rotate(45deg) translateY(-50%);
	border-top: 2px solid var(--primary-color-600);
	border-right: 2px solid var(--primary-color-600);
}
.scroll-table{
	width: 100%;
	overflow-x: auto;
}
table th.master-checkbox{
	padding-left: .5rem;
}
.master-checkbox > div {
	min-width: 1.5rem;
}
table tr td.list-checkbox {
	padding-left: .5rem;
	vertical-align: top;
}
.master-checkbox .checkbox-container,
.list-checkbox .checkbox-container{
	width: 1.25rem;
	position: relative;
	transform: translateY( -14px );
}
.manage-portfolio-row,
.manage-image-row{
	position: relative;
}
.manage-portfolio-row .list-checkbox,
.manage-image-row .list-checkbox{
	/*position: absolute;*/
	/*top: 0;*/
	/*left: 0;*/
}
.image-list-image{
	position: relative;
  max-width: 30rem;
  padding-bottom: 100%;
  background-position: center center;
  background-size: cover;
  border-radius: 4px;
  border: 2px solid var(--grey-color-200);
  transition: .25s ease;
}
.image-list-image:hover{
  border: 2px solid var(--secondary-color-600);
}
.inline-block{
	display: inline-block;
}
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
}
.table{
	border-collapse: collapse;
	text-align: left;
}
.table th{
	font-weight: 900;
}
.table th .link{
	font-weight: 900;
}
.table td{
	font-weight: 400;
}
.table td.weight-600{
	font-weight: 600;
}
.table td,
.table th{
	padding: .5rem 1rem .5rem 0;
}

.table td.right,
.table th.right{
	text-align: right;
}
[data-call]::before{
	content: attr( data-call );
}
[data-mailto]::before{
	content: attr( data-mailto );
}
[data-mailto]::after{
	content: attr( data-mailtoafter );
}
.slideshow-hero{
	transition: background 3s;
}
.hero{
	margin-top: 5rem;
	min-height: calc( 100vh - 5rem );
	background-size: cover;
	background-position: center center;
	position: relative;
	display: flex;
	align-items: center;
}
.hero::after{
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--black-color);
	opacity: .2;
}
.hero::before{
	content:  '';
	left: 0;
	right: 0;
	z-index: 2;
	bottom: 0;
	height: 3px;
	position: absolute;
	background-image: linear-gradient( to right, var(--primary-color-600), var(--secondary-color-600) );

}
.hero-inner{
	position: relative;
	z-index: 2;
	width: var(--screen-lg);
	max-width: calc( 100vw - 4rem );
	margin: 0 auto 0 auto;
}
.hero .title{
	color: var(--white-color);
	text-shadow: 1px 2px 6px rgba( 0, 0, 0, .5 );
}
.title-display-1{
	/*font-size: clamp( 2.5rem, 10vw, 4rem);*/
	max-width: 35rem;
}
.title-display-2 {
	/*font-size: clamp( 1rem, 2.5vw, 1.25rem);*/
	max-width: 35rem;
}

.hero + .section{
	padding-top: 0;
	min-height: unset;
}
.hero + .section .lg-image-width .lg-content-container,
.hero + .section .section-inner,
.hero + .section .lg-image-width,
.hero + .section .lg-image-width .lg-image-container{
	min-height: unset;
}
.my-dropzone.dropzone{
	padding: 1rem;
	border: 2px solid var(--grey-color-200);
	border-radius: 1rem;
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat( auto-fill, minmax( 8rem, 1fr ));
	position: relative;
  /*max-height: calc( 100vh - 15rem );*/
  overflow-x: hidden;
  overflow-y: auto;
}
.my-dropzone.dropzone.dz-drag-hover,
.my-dropzone.dropzone:hover{
	border: 2px solid var(--primary-color-600);
}
.my-dropzone.dropzone .dz-preview{
	margin: 0;
	width: 100%;
	border-radius: 1rem;
	overflow: hidden;
	background: transparent !important;
}
.my-dropzone.dropzone .dz-preview .dz-image{
	border-radius: 4px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.my-dropzone.dropzone .dz-preview.dz-file-preview .dz-image{
	border-radius: 4px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: var(--grey-color-300);
  background: linear-gradient( to top right, var(--primary-color-600), var(--secondary-color-600 ) );

}
.my-dropzone.dropzone .dz-preview .dz-error-message{
  background: var(--error-color);
  border-radius: 4px;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: unset;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.my-dropzone.dropzone .dz-preview.dz-error .dz-error-message{
	display: flex;
}
.my-dropzone.dropzone .dz-preview .dz-error-message:after{
	content: unset;
}
.my-dropzone.dropzone .dz-preview .dz-image img{
	width: 100%;
}
.my-dropzone.dropzone .dz-message{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	margin: 0;
}

.my-dropzone.dropzone.dz-drag-hover .dz-message,
.my-dropzone.dropzone:hover .dz-message{
	color: var(--primary-color-600);
}
.my-dropzone.dropzone .dz-preview:hover{
	z-index: 995;
}
.my-dropzone.dropzone .dz-preview .dz-progress .dz-upload{
	background-color: var(--primary-color-600);
	background-image: linear-gradient( to bottom, var(--primary-color-600), var(--primary-color-200) );
}
.m__grid {
  position: relative;
}
.m__grid .item {
  display: block;
  position: absolute;
  width: calc( 100vw - 4rem );
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: .5rem;
  z-index: 1;
  cursor: pointer;
}
.m__grid#filters_options_grid .item,
.m__grid#clients_grid .item,
.m__grid#filters_grid .item {
  width: 45ch;
  max-width: calc( 100vw - 4rem );
  height: 6.5rem;
  padding: .5rem 0;
  cursor: grab;
}
.m__grid#filters_options_grid .item:active,
.m__grid#clients_grid .item:active,
.m__grid#filters_grid .item:active {
  cursor: grabbing;

}
.m__grid#panorama_grid .item {
  width: calc( 100vw - 4rem );
  height: calc( ( 100vw - 4rem ) / 2 );
}
.m__grid#projects_grid_alt .item,
.m__grid#projects_grid .item {
  width: calc( ( 100vw - 4rem ) / 2 );
  height: calc( ( 100vw - 4rem ) / 2 );
  padding: 0;
}
.m__grid.is-gallery .item,
.m__grid#project_portfolio_grid .item {
  width: calc( ( 100vw - 4rem ) / 2 );
  height: calc( ( 100vw - 4rem ) / 2 );
}
.m__grid#available_tags_grid .item,
.m__grid#tags_grid .item {
  width: unset !important;
  height: unset !important;
  max-width: unset !important;
  max-height: unset !important;
  padding: .25rem;
}
.m__grid .item.muuri-item-dragging {
  z-index: 3;
}
.m__grid .item.muuri-item-releasing {
  z-index: 2;
}
.m__grid .item.muuri-item-hidden {
  z-index: 0;
}
.m__grid .item.main .item-content-inner{
  box-shadow: 0 0 0 3px var(--primary-color-600 ) inset;
	border: 2px solid var(--primary-color-600);
}
.m__grid .item-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.m__grid .item-content-inner {
	background-color: var(--grey-color-100);
	background-size: cover;
	border: 2px solid var(--grey-color-100);
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  transition: border .25s ease, box-shadow 1s ease;
  /*overflow: hidden;*/
  box-shadow: 0 0 0 0px var(--primary-color-600 ) inset;
}
.m__grid .item:hover .item-content-inner,
.m__grid .item.muuri-item-dragging .item-content-inner {
	border: 2px solid var(--secondary-color-600);
}
.client-logo-options{
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
	background: var(--black-color);
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0 0 0 1rem;
	transition: .25s ease;
	cursor: pointer;
	z-index: 3;
}
.item-content-options{
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 2;
	background: var(--black-color);
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0 1rem;
	transition: .25s ease;
	cursor: pointer;
	z-index: 3;
}
.item-content-options-icons{
	display: none;
	background: var(--black-color);
	border-radius: 0 1rem;
	overflow: hidden;
	position: absolute;
	right: 2px;
	top: 2px;
	z-index: 2;
	padding-right: 2.5rem;
	white-space: nowrap;
	max-width: calc( 100% - 4px );
}
.item-content-options-icon{
	width: 2.5rem;
	height: 2.5rem;
	justify-content: center;
	align-items: center;
	transition: .25s ease;
	cursor: pointer;
	display: inline-flex;
	border-radius: 0 0 0 4px;
}
.item-content-options-icon:hover{
	color: var(--white-color);
	background: var(--primary-color-600);
}
.m__grid#panorama_grid .item-content-inner.m__background{
	cursor: not-allowed;
}
.m__grid#images_grid .item-content-inner.m__background{
	cursor: move;
}
.m__grid .item-content-inner.m__draggable:hover{
	cursor: grab;
}
.m__grid .item-content-inner.m__draggable:active{
	cursor: grabbing;
}
.m__grid .item-content-inner.m__background .item-content-options-icons{
	display: flex;
}

.item-content-options:hover{
	color: var(--white-color);
	background: var(--primary-color-600);
}
.m__grid .item:hover .item-content-inner.m__background,
.m__grid .item-content-inner.m__background{
	border: 2px solid var(--primary-color-600);
}
.bulkbar{
	position: fixed;
	z-index: 1000;
	bottom: 0;
	left: 0;
	right: 0;
	transition: .25s ease;
	transform: translateY( 100% );
	background: var(--black-color-100);
}
.bulkbar.active{
	transform: translateY( 0 );
}
.bulkbar.minimise.active{
	transform: translateY( calc( 100% - 2.5rem ) );
}
.bulkbar-toggle{
	position: absolute;
	top: 0;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bulkbar-header{
	height: 2.5rem;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	overflow-x: auto;
	background: var(--primary-color-600);
	color: var(--white-color);
}
.bulkbar-counter{
}
.bulkbar-counter-container{
	min-width: 8rem;
}
.home-cta{
	position: relative;
	margin: 0;
	width: 100%;
	padding-bottom: 50%;
	border-radius: 4px;
	background-size: cover;
	background-position: 0% center;
	cursor: pointer;
	box-shadow: 0 0 0 rgba( 30, 30, 30, 0 );
	transition: box-shadow .25s ease, opacity .25s ease;
}
.home-cta:hover{
	box-shadow: 0 0 .25rem rgba( 30, 30, 30, .5 );
	opacity: .95;
}
.home-cta:active{
	transform: scale( 0.99 );
}
.home-cta::after{
	content:  '';
	position: absolute;
	bottom: 0;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 1;
	transition: .25s ease;
	background: linear-gradient(to top, rgba(0,0,0,.25),transparent);
}

.home-cta h5{
	font-weight: 900;
	/*font-size: 2rem;*/
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	text-align: left;
	text-shadow: 1px 2px 4px rgb(0,0,0,.5);
	z-index: 2;
	transition: .25s ease;
}

.home-cta:hover h5{
	/*left: 1.125rem;*/
	/*right: .875rem;*/
}
.nav-footer{
	display: flex;

}
.portfolio-preview-small{
	position: relative;
	background-size: cover;
	background-position: center center;
	background-color: var(--grey-color-100);
	width: 7.5rem;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	border: 2px solid var(--grey-color-200);

}
.language-switch-handlers{
	/*display: flex;*/
}
.language-switch-handler{
	display: inline-block;
	cursor: pointer;
	opacity: .5;
	margin: .25rem;
}

.language-switch-handler:hover,
.language-switch-handler.active{
	opacity: 1;
}

.language-switch-handler:hover .flag,
.language-switch-handler.active .flag{
	/*border: 2px solid var(--tertiary-color-600);*/
	box-shadow: 0 0 0 2px var(--primary-color-600);

}
.language-switch.hidden{
	display: none;
}
.card-style{
	position: relative;
	background: var(--black-color-100);
	/*border: 2px solid var(--grey-color-200);*/
	border-radius: 1rem;
	padding: 1rem;
}
.card-style.p-0{
	padding: 0;
}
.card-style.alt-style{
	border: 0;
	background: var(--black-color-75);
	box-shadow: 2px 1px 1rem 0px rgb(0 0 0 / 10%);
}
.card-style.filter-card-style {
	border: 2px solid var(--grey-color-100);
}
.card-style.filter-card-style.active {
	border: 2px solid var(--grey-color-200);
}
.card-style.filter-card-style .title {
	color: var(--grey-color-300);
}
.card-style.filter-card-style.active .title {
	color: var(--primary-color-600);
}

.card-style.has-header{
	padding: 0;
	/*border: unset;*/
}
.card-style .flag{
	position: absolute;
	top: 1rem;	right: 1rem;
}
.card-header{
	position: relative;
	border-radius: 5px 5px 0 0;
	padding: 1rem;
}
.card-header::after{
	position: absolute;
	bottom: 0;
	height: 2px;
	left: 0;
	right: 0;
	content: '';
	background-color: var(--primary-color-600);
	background-image: linear-gradient( to top right, var(--primary-color-200 ), var(--primary-color-600) );
}
.card-header.secondary::after{
	background-color: var(--secondary-color-600);
	background-image: linear-gradient( to top right, var(--secondary-color-200 ), var(--secondary-color-600) );

}
.tabs{
	background-color: var(--black-color);
	/*background-image: linear-gradient( to top right, var(--grey-color-300), var(--grey-color-350) );*/
	display: flex;
	overflow-x: auto;
	max-width: 100%;
	padding-top: .5rem;
}
.tab{
	background-color: var(--black-color-50);
	color: var(--primary-color-600);
	padding: 1rem .75rem;
	position: relative;
	transition: padding .25s ease;
	cursor: pointer;
	white-space: nowrap;
}
.dashboard-min-height{
    min-height: calc( 100vh - 43rem );
}
/*.tab::after{
	content: '';
	background-color: var(--grey-color-300);
	clip-path: polygon(25% 5%, 50% 20%, 75% 80%, 85% 92%, 100% 100%, 0 100%, 0 0);
	position: absolute;
	top: 0;
	right: -.75rem;
	width: .75rem;
	bottom: 0;
	transform: translateX(-1px);
}
.tab::before{
	content: '';
	background-color: var(--grey-color-200);
	clip-path: polygon(25% 80%, 50% 20%, 75% 5%, 100% 0, 100% 100%, 0 100%, 15% 92%);
	position: absolute;
	top: 0;
	left: -.75rem;
	width: .75rem;
	bottom: 0;
	transform: translateX(1px);	
}*/
.tab.active:hover,
.tab.active{
	background: var(--primary-color-200);
	color: var(--black-color-50);
	/*z-index: 11 !important; */
	/*padding: 1rem .9rem;*/
	font-weight: 600;
}
/*.tab.active:hover::before,
.tab.active:hover::after,
.tab.active::before,
.tab.active::after{
	background: var(--white-color);

}*/
/*.tab:hover::before,
.tab:hover::after{
	background: var(--grey-color-100);
}*/
.tab:hover{
	/*padding: 1rem .9rem;*/
	background: var(--primary-color-600);
	color: var(--black-color-50);
}
.tabs .tab:nth-child(1) {
    z-index:10; 
    /*margin-left: .75rem;*/
}
.tabs .tab:nth-child(2) {   
    z-index:9;  
}
.tabs .tab:nth-child(3) {
    z-index:8;  
}
.tabs .tab:nth-child(4) {   
    z-index:7;  
}
.tabs .tab:nth-child(5) {
    z-index:6;  
}
.tabs .tab:nth-child(6) {   
    z-index:5;  
}
.info-container{
	width: fit-content;
	width: -ms-fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
}
.info-container i {
	padding: 0 1rem;
	display: flex;
	align-items: center;
	height: 100%;
	background-color: var(--tertiary-color-400);
	background-image: linear-gradient( to top right, var(--tertiary-color-400), var(--tertiary-color-600) );
	color: var(--black-color-50);
	border-radius: 5px 0 0 5px;
}
.info-container div{
	height: 100%;
	padding: .5rem 1rem;
	background-color: var(--tertiary-color-200);
	border-radius: 0 5px 5px 0;
	line-height: 1.5rem;
		color: var(--black-color-50);

}
.flag-input-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: 1rem;
	align-items: center;
}
.portfolio-address-grid{
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 1fr;
}
.portfolio-address-grid-address{
	display: grid;
	grid-column-gap: 1rem;
	grid-template-columns: 1fr;
}
.portfolio-address-grid-address-alt{
	display: grid;
	grid-column-gap: 1rem;
	grid-template-columns: 1fr;
}
.grid-sizer.one-item,
.grid-sizer.one-item ~ .masonry__item,
.grid-sizer,
.masonry__item{
	width: 100%;
}
.grid-sizer.one-item ~ .masonry__item img{
	width: 100%;
}
.masonry__item{
	margin-bottom: 2rem;
}
.masonry__grid.portfolio-page .masonry__item{
	margin-bottom: 0;
}
.masonry-filters-checkbox label{
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.item-content-inner-tags{
	font-weight: 600;
	background-color: var(--grey-color-200);
	background-image: linear-gradient( to top right, var(--grey-color-200), var(--grey-color-300) );
	color: var(--grey-color-900);
	padding: 1em 1.5rem;
	border-radius: 5px;
}
.item-content-inner-tags:hover{
	cursor: grab;
	background-color: var(--primary-color-600);
	background-image: linear-gradient( to top right, var(--primary-color-200), var(--primary-color-600) );
	color: var(--white-color);
}
.item-content-inner-tags:active{
	cursor: grabbing;
	transform: scale( 0.95 );
}
.portfolio-page::before{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--black-color-50);
	z-index: 1;
	opacity: 1;
	transition: opacity .25s ease;
	pointer-events: none;
}
.portfolio-page.active::before{
	opacity: 0;
}

.portfolio-page.active + .donut-size{
	opacity: 0;
}

.portfolio-page + .donut-size{
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	pointer-events: none;
}

.portfolio-page .masonry__item{
	opacity: 0;
}
.portfolio-page.active .masonry__item{
	opacity: 1;
}
.portfolio-card-image{
	position: absolute;
	inset: .25rem;
	background-size: cover;
	border-radius: .75rem;
}

.donut-size {
  font-size: 5rem;
  transition: opacity .125s ease;
}
.donut-size *{
  font-size: inherit;
}

.pie-wrapper {
  position: relative;
  width: 1em;
  height: 1em;
  margin: 0px auto;
}
.pie-wrapper .pie {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  clip: rect(0, 1em, 1em, 0.5em);
}
.pie-wrapper .half-circle {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: 0.1em solid var(--primary-color-600 );
  border-radius: 50%;
  clip: rect(0em, 0.5em, 1em, 0em);
}
.pie-wrapper .right-side {
  transform: rotate(0deg);
}
.pie-wrapper .label {
  position: absolute;
  top: 0.52em;
  right: 0.4em;
  bottom: 0.4em;
  left: 0.4em;
  display: block;
  background: none;
  border-radius: 50%;
  color: var(--grey-color-600);
  font-size: 0.25em;
  line-height: 2.6em;
  text-align: center;
  cursor: default;
  z-index: 2;
}
.pie-wrapper .smaller {
  padding-bottom: 20px;
  color: var(--grey-color-400);
  font-size: 0.45em;
  vertical-align: super;
}
.pie-wrapper .shadow {
  width: 100%;
  height: 100%;
  /*border: 0.1em solid var(--grey-color-100);*/
  border-radius: 50%;
}
.masonry__grid.portfolio-page{
	padding: .25rem 0;
}

.portfolio-page a{
	display: block;
	transition: opacity .25s ease;
	position: relative;
}
.portfolio-page a:hover{
	opacity: .95;
}
.portfolio-page a img{
	border-radius: 4px;
	overflow: hidden;
	position: absolute;
	inset: 0;
}
.colorcorrection-overlay-controls{
	position: fixed;
	left: calc( -100% + 25px );
	top: 50px;
	left: 1rem;
	background: var(--white-color);
	z-index: 100002;
	padding: 1rem;
	border-radius: 5px;
	box-shadow: 0 0 .25rem rgba(0,0,0,.5);
	max-height: 100vh;
	overflow: hidden;
	overflow-y: auto;
	transform: translateX( -100%);
	display: none;
	width: 12.5rem;
}
.colorcorrection-overlay-inner{
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	display: none;
}
.colorcorrection-overlay-inner.active{
	display: block;
}
.colorcorrection-overlay-inner.active + .colorcorrection-overlay-controls{
	display: block;
	transform: translateX( 0 );
	transition: .5s ease;
}
.colorcorrection-overlay-inner.controls-hidden + .colorcorrection-overlay-controls,
.colorcorrection-overlay-inner.active.controls-hidden + .colorcorrection-overlay-controls{
	transform: translateX( -100%);
	left: -5px;
}
.open-color-correction-button{
	position: fixed;
	top: calc( 50px + 1rem );
	transform: rotate(90deg);
	transform-origin: top left;
	z-index: 100001;
	left: -5px;
	height: 2.5rem;
	transition: .5s ease;
	pointer-events: none;
	opacity: 0;
}
.btn.btn-square.open-color-correction-button{
	border-radius: 5px 5px 0 0;
}
.btn.open-color-correction-button:hover{
	transform: rotate(90deg);
}
.colorcorrection-overlay-inner.active.controls-hidden + .colorcorrection-overlay-controls + .open-color-correction-button,
.colorcorrection-overlay-inner.active.controls-hidden + .colorcorrection-overlay-controls + .open-color-correction-button{
	left: 2.5rem;
}
.slidecontainer {
  width: 100%;
}
.slidecontainer *{
	user-select: none;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: var(--grey-color-300);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .25s;
  transition: opacity .25s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  width: 1rem;
  height: 1rem;
  background: var(--primary-color-600);
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--primary-color-600);
  border-radius: 50%;
  cursor: pointer;
}
.panorama-viewer{
	position: fixed;
	z-index: 1000;
	inset: 0;
	background: var(--black-color);
}
.panorama-viewer.active{
	/*display: block;*/
}
.panorama-overlay{
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: var(--grey-color-1100);
	display: none;
}
.panorama-overlay .loader-inner{
	display: block;
}
.panorama-button{
	color: var(--white-color);
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	cursor: pointer;
  text-shadow: 1px 2px 4px rgb(0 0 0 / 50%);
}
#panorama_controls{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000000;
	display: none;
}
#panorama_scenes{
	position: fixed;
	bottom: calc( 21px - .25rem );
	left: calc( 21px - .25rem );
	z-index: 1000000;
	display: none;
  max-width: calc(100vw - 5.5rem );
  overflow-y: auto;
}
.panorama-button i::before{
	/*font-size: 1.5rem;*/
	z-index: 1004;
}
.panorama-viewer.active + .panorama-overlay{
	display: block;
}
.panorama-viewer.active + .panorama-overlay + #panorama_controls{
	display: block;
}
.panorama-viewer.active + .panorama-overlay + #panorama_controls + #panorama_scenes{
	display: flex;
}
.panorama-viewer .pnlm-controls-container{
	top: unset;
	bottom: 21px;
	right: 21px;
	left: unset;
}
.portfolio-page-logged-out{
	overflow: hidden;
	position: relative;
	height: fit-content;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: -ms-fit-content;
}
.portfolio-page-logged-out.has-backdrop::after{
	content: '';
	position: absolute;
	inset: 0;
	/*backdrop-filter: blur( 10px );*/
	pointer-events: none;
	background: rgba(0,0,0,.5);
}
.more-cta{
	
}
.portfolio-page-logged-out.has-backdrop .more-cta{
	position: absolute;
	inset: 0;
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--white-color);
	text-shadow: 0 0 4px var(--black-color);
  z-index: 1;

}
.booking-form-preview {
	display: grid;
	grid-template-columns: max-content 1fr;
}
.booking-form-image{
	border-radius: 5px;
	width: 25vw;
	height: 25vw;
	max-width: 9rem;
	max-height: 9rem;
	background-size: cover;
	margin-right: 1rem;
	position: relative;
}
.project-info-image{
	border-radius: 5px;
	width: calc( 100vw - 4rem );
	max-width: 100%;
	background-size: cover;
	margin-right: 1rem;
	position: relative;
	overflow: hidden;
}

.project-info-image-inner{
	width: 100%;
	padding: 2rem;
	flex-direction: column;
	background: rgba(0,0,0,.3);
}

.project-info-image-inner > div,
.project-info-image-inner > p{
	position: relative;
	z-index: 2;
  text-shadow: 1px 2px 4px rgb(0 0 0 / 50%);
}
.project-form-buttons-grid{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
}
.project-buttons-grid{
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 12.5rem, 1fr ) );
	grid-gap: 1rem;
}
.btn.project-button{
	width: 100%;
	height: 100%;
	min-height: 9rem;
	aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  transition: opacity .25s ease;
}
.btn.project-button:hover{
	transform: scale(1);
	opacity: .95;
}
.btn.project-button:active{
	transform: scale(0.99);
}
.project-button-inner{
	padding: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	z-index: 3;
	inset: 0;
  display: flex;
  align-items: flex-end;
}
.project-button-inner > .title{
	text-align: left;
 	display: -webkit-box;
 	-webkit-line-clamp: 3;
 	-webkit-box-orient: vertical;
	overflow: hidden;
  text-overflow: ellipsis;
	width: 100%;
  text-shadow: 0 0 4px var(--black-color);
}
.project-button-inner .title-prepend{
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--white-color);
  color: var(--primary-color-600);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100vh;
  box-shadow: 1px 2px 3px 0px rgb(0 0 0 / 25%);
  /*font-size: .8rem;*/
}
.project-button-inner.new-project {
	text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.project-button-inner.new-project > .title{
	text-align: center;
	text-shadow: unset;
}
#project_portfolio_grid .project-button-inner > .title{
 	-webkit-line-clamp: 4;
}
.project-button-inner.new-project > i{
	border-radius: 50%;
	border: 2px solid var(--grey-color-300);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .5rem;
}
.project-button-inner.new-project > i::before{
	/*font-size: 1.5rem;*/
}
.project-button-backdrop{
	position: absolute;
	z-index: 1;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.project-button-backdrop::after{
	content: '';
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .75;
	background-image: linear-gradient( to top, var(--black-color ), transparent );
}
.project-button-backdrop.has-one-image{
	grid-template-columns: 1fr;
}
.project-button-backdrop.has-three-images > div:first-child{
 	grid-row-start: 1;
 	grid-row-end: 3;
 	padding-bottom: 50%;
}
.project-button-backdrop-image{
	width: 100%;
	padding-bottom: 100%;
	background-size: cover;	
  box-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 25%) inset;
}
.add-to-project-form-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: .5rem;
}
.add-to-project-form-grid-container{
	max-height: 300px;
	overflow-y: auto;
	padding: 0 0 1rem 0;
	margin-top: 1rem;
}
.add-to-project-form-grid .btn.project-button{
  height: calc( ( 100vw - 5rem ) / 2 - .25rem );	
  max-height: 15rem;
}
#projects_previewer{
	/*width: 60ch;*/
	max-width: calc( 100vw - 4rem );
}
.users-circles{
	overflow-x: auto;
	max-width: 100%;
  /*white-space: nowrap;*/
	user-select: none;
}
.user-circles-container{
	display: inline-block;
	user-select: none;
}
.user-circles-container .btn{
	padding-top: 8px;
	user-select: none;
}
.user-tooltip-container{
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: 1rem;
	align-items: center;
}
.resume-viewer.rotating i{
	animation: spin 5s linear infinite;
}
.this-max-length-counter.red{
	color: var(--error-color);
}
.project-page-reactions-container,
.project-page-description-container{
	max-height: 300px;
	overflow-y: auto;
}
.reaction-container{
	background: var(--grey-color-50);
	border-radius: 5px;
	padding: .75rem 4rem .75rem 1rem;
	grid-gap: .5rem;
	position: relative;
	margin-bottom: 1rem;
	padding-left: 1rem;
}

.reaction-time{
	position: absolute;
	bottom: 5px;
	right: 5px;
	user-select: none;
	/*font-size: .8rem;*/
	color: var(--grey-color-900);
	text-align: right;
}
.reaction-action{
	position: absolute;
	display: flex;
	top: 0;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	background-color: var(--grey-color-50);
	opacity: 0;
}
.reaction-container:hover .reaction-action{
	opacity: 1;
}
.reaction-action:hover{
	color: var(--grey-color-600);
}
.reaction-action:active{
	color: var(--grey-color-400);
}
.removed-message-container + .removed-message-container{
	display: none;
}
.project-portfolio-overlay{
	position: fixed;
	inset: 0;
	background: red;
	z-index: 1000;
	display: none;
	opacity: 0;
	pointer-events: none;
	transition: .25s ease;
}
.project-portfolio-overlay.active{
	opacity: 1;
	display: block;
	pointer-events: unset;
}
.project-page-grid{
	position: relative;
}
#project_settings_handler .btn{
  box-shadow: 1px 2px 3px 0px rgb(0 0 0 / 15%);
}
#project_settings_handler{
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 100;
}
#project_settings{
	position: absolute;
	top: 4rem;
	right: 1rem;
	z-index: 100;
	background: var(--white-color);
	display: none;
}
#project_settings.active{
	display: block;
}
#current_portfolio .portfolio-page-grid{
	min-height: calc( 100vh - 7rem );
}
#tooltip{
	z-index: 100000;
	transform: translate( -50%, -2.5rem );
	background: var(--black-color);
	/*font-size: .8rem;*/
	padding: .5rem .75rem;
	color: var(--white-color);
	pointer-events: none;
	white-space: nowrap;
	border-radius: 5px;
	box-shadow: 0 0 .25rem 0 rbga(0,0,0,.25);
}
#tooltip::after{
	content: '';
  position: absolute;
  bottom: -.35em;
  left: 50%;
  transform: translateX( -50% );
  width: 0;
  height: 0;
  border-left: .35rem solid transparent;
  border-right: .35rem solid transparent;
  border-top: .35rem solid var(--black-color);
}
.copy-url-container{
	display: grid;
	grid-template-columns: 1fr  max-content;
	grid-gap: 1rem;
	/*align-items: center;*/
}
.quotation-preview-grid{
	display: grid;
	grid-gap: 2rem;
}
#swipebox-overlay,
#swipebox-slider,
#swipebox-slider .slide,
#swipebox-container{
	touch-action: none;
}
.project-page-grid-left > h1.title{
	padding-right: 3rem;
}
.filter-inner-box{
	display: grid;
	grid-template-columns: 1fr max-content;
	grid-gap: 1rem;
	align-items: center;
}
img.large-image-viewer{
	border-radius: 5px;
}
.legend-color{
	border-radius: 5px;
	display: inline-block;
	text-align: center;
	color: var(--white-color);
	/*font-size: .8rem;*/
	font-weight: 500;
	min-width: 2rem;
	padding: .5rem;
	white-space: nowrap;
}
.legend-label{
	display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-loading{
	opacity: .75;
	transition: .25s ease;
}
.legend-container{
	display: grid;
	grid-template-columns: max-content 1fr;
	margin-bottom: .25rem;
	grid-gap: .5rem;
	align-items: center;
}
.grey-label{
	float: right;
	background: var(--grey-color-200);
	color: var(--grey-color-900);
	font-weight: 600;
	padding: .25rem .5rem;
	border-radius: 5px;
	/*font-size: .8rem;*/
	margin: 0 0 .5rem .5rem;
  height: 28px;
  display: flex;
  align-items: center;
  user-select: none;
}
.portfolio-stats-container-outer{
	overflow-x: auto;
	max-width: 100%;
}
.portfolio-stats-container-inner{
	padding: 0 .5rem .5rem .5rem;
	max-height: 30rem;
	min-width: calc( 768px - 8rem );
}
.svglogo{
	fill: url( #logo__1 ) var(--primary-color-600);
	width: 3rem;
	-webkit-filter: drop-shadow( 1px 2px 1px rgba( 0, 0, 0, .2 ) );
  filter: drop-shadow( 1px 2px 1px rgba( 0, 0, 0, .2 ) );
}
#logo__1 {
  --color-stop: var(--primary-color-600);
  --color-start: var(--primary-color-200);
}
.video-cards-container{
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 2rem;
	margin: auto;
}
.video-cards-container .card-style{
	width: 100%;
}
.video-card-inner{
	padding: 1rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.scouting-contact i::before{
	/*font-size: 1rem;*/
}
#download_in_progress{
	min-height: 1.6rem;
}
.still-working{
	padding-top: .5rem;
	animation: stillWorking 5s ease forwards;
}
.loader-text-container{
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: 1rem;
}
.sticky-results-container{
	display: none;
	position: sticky;
	z-index: 997;
	top: 0;
	left: 0;
	right: 0;
}
.sticky-results-container.close-searchbar{
	cursor: pointer;
}

.sticky-results-container::after{
	content: '';
	height: 1px;
	position: absolute;
	bottom: 0;
	left: -1rem;
	right: -1rem;
	background: var(--grey-color-50);
}
.sticky-results{
	display: flex;
	padding: 1rem 0;
	justify-content: space-between;
	align-items: center;
	background: var(--white-color);
	min-height: 4.5rem;
}
@keyframes stillWorking{
	from, to {
		opacity: 0;
	} 50% {
		opacity: 1;
	}
}
.portfolio-matches{
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary-color-600);
  color: var(--white-color);
  right: 0;
  padding: 0.5rem;
  /*font-size: .8rem;*/
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strike{
	text-decoration: line-through;
	opacity: .5;
	/*font-size: .8rem;*/
}
.daterangepicker *{
	user-select: none;
}
input#date_range{
	cursor: pointer;
}
.g-recaptcha{
	min-height: 10rem;
}
.faq-flag-grid{
	display: grid;
	grid-gap: 1rem;
	align-items: center;
	grid-template-columns: max-content  max-content;
}
.fs-hero-container{
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	height: calc( 50vh - 5rem );
	max-height: 100vh;
	min-height: 30rem;
}
.fs-video {
	width: 100vw;
	aspect-ratio: 16 / 9;
	position: relative;
	left: 50%;
	top: 100%;
	transform: translate( -50%, -100% );
}
.hero-image{
	position: absolute;
	inset: 0;
  background-position: center center;
  background-size: cover;

}
.fs-video .play-btn{
	pointer-events: none;
	position: absolute;
	top: calc( ( 100vw / 16 ) * 9 - ( ( ( 100vw / 16 ) * 9 ) / 3 ) ) ;
	left: 50%;
	transform: translateX( -50% );
	z-index: 5;
	padding: 1rem;
	cursor: pointer;
	background: transparent;
	color: var(--white-color);
	animation: playButton 10s ease infinite;
	opacity: 0;
}
.fs-video.active .play-btn{
	display: none;
}
@media ( max-width: 767px ){
	.person-container{
		position: relative;
		padding-bottom: 18rem;
	}
	.person-container > div:first-child{
		position: relative;
		z-index: 2;
	}
	.person-image{
		position: absolute;
		bottom: 0;
		left: 1rem;
		z-index: 0;
	}
	.person-image img.p-img{
		max-height: 25rem;
	} 

}
@keyframes playButton{
	from {
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
.fs-video.active{
}
.fs-video::before{
	content: '';
	position: absolute;
	cursor: pointer;
	z-index: 3;
  box-shadow: inset 0 0 0 calc( ( 150vw + 150vh ) / 2 ) var(--black-color);
  width: 150vw;
  height: 150vw;
  min-width: 150vh;
  min-height: 150vh;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  border-radius: 50%;
}
.fs-video.active::before{
	transition: 2s ease;
  box-shadow: inset 0 0 0 0 var(--black-color);
	cursor: default;
}
.fs-video .video-js{
	width: 100vw;
	aspect-ratio: 16 / 9;
}
.video-trigger{
	color: var(--white-color);
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	transition: .5s ease;
	pointer-events: none;
}
.video-trigger::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 0;
	height: 0;
	border-radius: 50%;
	box-shadow: 0 0 .75rem 0 rgb(255,255,255);
	animation: videoTrigger 3s ease infinite;
	animation-delay: 1.5s;
	opacity: 0;
}
.fs-video.active ~ .video-trigger{
	pointer-events: none;
}
.video-trigger span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	border-radius: 50%;	
	width: 8px;
	height: 8px;
	background: white;
	box-shadow: 0 0 .75rem 0 rgb(255,255,255);
	transition: 1s ease;
	animation: flicker 6s linear infinite;
}
.fs-video.active ~ .video-trigger span{
	animation: unset;
	background: transparent;
	width: 0;
	height: 0;
}
.fs-video.active ~ .video-trigger::after{
	animation: videoTrigger 2s ease forwards;
}
.video-cards-container .image-container,
.video_container,
.video-container:hover,
.video-container{
	max-width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	display: block;
	transition: .5s ease;
	background: var(--black-color)
}
.video_container iframe,
.video-container iframe{
	width: 100%;
	height: 100%;
	z-index: 1;
}
.video-container .thumbnail{
	width: 100%;
	height: 100%;
}
.video-container .thumbnail::after{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	box-shadow: inset 0 0 .25rem 0 rgba(0,0,0,.3);

}
.video-container .thumbnail img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.video-container .thumbnail i{
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 2;
		font-size: clamp( 1.25rem, 2.5vw, 2.5rem );
		transform: translate( -50%, -50% );
		text-shadow: 0 0 .25rem rgba(0,0,0,.3);
}
.video-container:hover .thumbnail i{
		transform: translate( -50%, -50% ) scale( 1.05 );
}
.video-container:active .thumbnail i{
		transform: translate( -50%, -50% ) scale( 0.95 );
}

.video-container:not(.active):hover{
	cursor: pointer;
	opacity: .95;
}

.fs-image-inner{
	background-color: rgba(0,0,0,.5);
	position: relative;
	z-index: 2;
	min-height: calc( 100vh - 4rem );
}
.fs-image-head{
	max-width: var(--screen-lg);
	margin: 0 auto;
}
.hr-lg{
	height: 4rem;
	width: 100%;
	max-width: var(--screen-lg);
	margin: 0 auto;
	background: var(--black-color-25-half);
}
.fs-image{
	position: relative;
	background-size: cover;
	background-attachment: fixed;
	background-position: center 3.5rem;
	z-index: 0;
	background-repeat: no-repeat;
}
.fs-image::before{
	content: '';
	position: absolute;
	inset: -1px;
	z-index: 4;
	pointer-events: none;
	box-shadow: inset 0 0 .25rem 2px rgba(0,0,0);
}
.fs-image::after{
	content: '';
	position: absolute;
	inset: 0px;
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center;
	z-index: 1;
	background-image: url('../../img/assets/overlay.png');
	opacity: .5;
}
.video-selector{
	max-width: 900px;
}
.select-video-thumbnail-container{
	max-width: calc( 100vw - 6rem );
	overflow-x: auto ;
	white-space: nowrap;
}
.select-video-thumbnail-container .thumbnail{
	display: inline-block;
	margin: .5rem;
	width: 50vw;
	aspect-ratio: 16 / 9;
	border-radius: 1rem;
	overflow: hidden;
	background: var(--black-color-50);
	border: 3px solid transparent;
	position: relative;
}
.select-video-thumbnail-container .thumbnail.selected:hover,
.select-video-thumbnail-container .thumbnail:hover{
	cursor: pointer;
	border: 3px solid var(--primary-color-400);
}
.select-video-thumbnail-container .thumbnail.selected{
	border: 3px solid var(--primary-color-600);
}
.select-video-thumbnail-container .thumbnail img{
	object-fit: cover;
	height: 100%;
	width: 100%;
}
.upload-video-thumbnail::after{
	content: 'Upload';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50% );
}
.content-section *{
	overflow: hidden;
	text-overflow: ellipsis;
}
.portfolio-feature-footer{
	display: grid;
	grid-template-columns: 1fr max-content;
	align-items: center;
	grid-gap: 1rem;
}
.interview-segment{
	text-align: left;
}
.interview-segment.right{
	text-align: left;
}
@keyframes flicker {
	0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
		opacity: .99;
		box-shadow: -1px -1px 0 var(--white-color), 1px -1px 0 var(--white-color), -1px 1px 0 var(--white-color), 1px 1px 0 var(--white-color), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
	}
	20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
		opacity: 0.8;
		box-shadow: -1px -1px 0 var(--white-color), 1px -1px 0 var(--white-color), -1px 1px 0 var(--white-color), 1px 1px 0 var(--white-color), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;

	}
}
@keyframes videoTrigger{
	from{
		width: 0;
		height: 0;
		opacity: 0;
	} 
	25%{
		width: 0;
		height: 0;
		opacity: 1;
	}
	to {
		width: 10rem;
		height: 10rem;
		opacity: 0;

	}
}

.stickybar{
	background: transparent;
	position: absolute;
	left: 2rem;
	bottom: -.5rem;
	right: 2rem;
	z-index: 10;
	cursor: pointer;
	user-select: none;
	transition: .5s ease;
}
.stickybar > div{
	border-left: 1px solid var(--white-color);
	height: 4rem;
	padding-left: 1rem;
	padding-top: .5rem;
	max-width: var(--screen-lg);
	margin: 0 auto;
}
.stickybar strong{
	transition: .75s ease;
	display: block;

}
.stickybar:hover{
	bottom: 0;
}
.stickybar:hover strong{
	transform: translateY( -.25rem );
}
.tab-folder{
}
.portfolio-images-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
}
.portfolio-images-grid img{
	border-radius: 1rem;
}
.portfolio-item-title{
	/*text-align: left;*/
}
.video-section{
	/*max-width: 900px;*/
	/*margin-left: auto;*/
	/*margin-right: auto;*/
}
#maxresdefault::after{
	content: 'HQ';
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
	font-weight: 600;
	user-select: none;
	text-shadow: 0 0 rgba(0,0,0,.3);
}
#hqdefault::after{
	content: 'LQ';
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
	font-weight: 600;
	user-select: none;
	text-shadow: 0 0 rgba(0,0,0,.3);
}
.client-item-outer{
	display: inline-block;
  margin: 0.5rem;
  vertical-align: top;
	/*aspect-ratio: 1 / 1;*/
	overflow: hidden;
}
.client-image{
	aspect-ratio: 1 / 1;
	width: 100%;
	margin-bottom: 1rem;
}
#client_logo,
.client-item{
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 12rem;
	/*aspect-ratio: 1 / 1;*/
	background: var(--black-color-50);
	/*border-radius: 1rem;*/
	overflow: hidden;
}
#client_logo{
	position: relative;
	box-sizing: content-box;
	border: 3px solid var(--primary-color-400);
}
#client_logo img,
.client-item img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.sub-footer-inner,
.footer-links,
.footer-text-content{
	text-align: 	center;
}
.person-image-arrow{
	position: absolute;
	top: 25%;
	right: 20%;
}
.person-image-arrow img{
	width: 2.5rem;
	transform: rotateZ( 45deg ) rotateX( 180deg );
}
.person-image-arrow span{
  font-family: 'Long Cang', cursive;
  font-size: 1.8rem;
  position: absolute;
  top: -24px;
  right: -47px;
  white-space: nowrap;
  transform: rotate(5deg);
}
.band-members{
	text-align: center;
}
.band-members .band-member{
	display: inline-block;
	width: 50%;
	margin: 0;
	position: relative;
}
.band-member::before{
	position: absolute;
	content: '';
	inset: 0;
	z-index: 2;
	transition: .25s ease;
	box-shadow: inset 0 0 1rem 1rem rgba(0,0,0,.3), inset 0 0 .25rem 0 rgba(0,0,0,.9);
}
.band-member span{
	transition: .25s ease;
}
.band-member img{
	display: block;
	width: 100%;
	transition: .25s ease;
	pointer-events: none;
}
@media (min-width: 360px){
	.has-filters .menu-inner{
		grid-template-columns: 7rem 1fr 7rem;
	}
	.toggle-filters-menu span{
		/*font-size: 1rem;*/
		font-weight: 900;
		display: block;
	}
	.toggle-filters-menu{

	  display: grid;
	  grid-template-columns: 1.5rem 1fr;
	  grid-gap: .5rem;
	}

}
@media (min-width: 400px){

.sub-footer svg{
	bottom: calc( 100% - 4rem );
}
}
@media (max-width: 535px){
	.client-item{
		width: 100%;
	}
}
@media (min-width: 535px){
	.band-members .band-member{
		width: 33.33%;
	}
	.sub-footer svg{
		bottom: 1rem;
	}
	.footer-image{
		max-width: 100%;
		display: inline-block;
	}
	.footer-logo-grid{
		display: grid;
		grid-template-columns: 140px 1fr;
		grid-gap: 2rem;
	}
	.footer-inner{
		padding-top: 0;
	}
	.footer-text-content{
		padding-top: 4rem;
	}
	.ch60 {
		max-width: 60ch;
	}
	.ch75 {
		max-width: 75ch;
	}

	.max-width-768{
		max-width: 768px;
	}
	.portfolio-address-grid-address{
		grid-template-columns: 1fr 9rem;
	}
	.portfolio-address-grid-address-alt{
		grid-template-columns: 1fr 1fr;
	}
	#project_settings_handler{
		top: 2rem;
		right: 2rem;
	}

	#project_settings{
		top: 5rem;
		right: 2rem;
	}
	.project-form-buttons-grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 1rem;
	}
	.form-dates-input{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 1rem;
	}
	.form-dates-input-alt{
		display: grid;
		grid-template-columns: 1fr 1fr max-content;
		grid-gap: 1rem;
	}
	.m__grid .item {
	  width: calc( ( 100vw - 4rem ) / 2 );
	}
	.sub-footer-inner{
		padding-left: 2rem;
		padding-right: 2rem;

	}
	.footer-inner{
		/*max-width: calc( 100vw - 4rem );*/
	}
	.search-results-inner-grid{
    /*grid-template-columns: repeat( auto-fill, minmax( 12rem, 1fr ) );*/
	}
	.lg-image-width{
		padding: 0rem;
	}
	.portfolio-page-padding-content-container,
	.padding-content-container,
	.small-form-container{
		padding: 2rem;
	}
	.grid-sizer,
	.masonry__item{
		width: calc( 50% - 1rem );
	}
	.stats-page .grid-sizer,
	.stats-page .masonry__item{
		width: calc( 50% - 14px );
	}
	.stats-page .masonry__item.item_width__2{
		width: 100%;
	}
	.portfolio-page .grid-sizer,
	.portfolio-page .masonry__item{
		width: 50%;
	}
	.masonry__grid.portfolio-page .masonry__item{
		margin-bottom: 0;
	}
	.colorcorrection-overlay-controls{
		top: 50px;
		max-height: calc( 100vh - 100px );

		width: unset;
	}
	.colorcorrection-overlay-inner.active + .colorcorrection-overlay-controls{
		left: 25px;
	}
	.footer-links{
		padding-top: 2rem;
	}
}
@media (min-width: 600px){
	.fs-video .play-btn{
		pointer-events: none;
		position: absolute;
		top: calc( ( 100vw / 16 ) * 9 - ( ( ( 100vw / 16 ) * 9 ) / 4 ) ) ;
	}

	.select-video-thumbnail-container .thumbnail{
		width: 30vw;
	}
	.sub-footer svg{
		bottom: 0rem;
	}
	.reset-search-filters{
		display: block;
	}

	.section-discography .portfolio-search-results-container{
		margin-top: 0;
	}
	.portfolio-search-bar{
		max-width: calc( 100vw - 4rem );
		overflow: unset;
		left: 50%;
		right: unset;
		transform: translate(-50%);
	}
	.portfolio-search-bar::before{
		content: '';
		background: var(--black-color);
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc( -2rem + 1px );
		width: 2rem;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 95%, 5% 20%);
	}
	.portfolio-search-bar::after{
		content: '';
		background: var(--black-color);
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc( -2rem + 1px );
		width: 2rem;
		clip-path: polygon(0 0, 100% 0, 95% 20%, 20% 95%, 0 100%);
	}
}
@media (max-width: 767px){
	.news-header{
		display: none;
	}
	.stickybar{
		/*display: none;*/
	}
	.fs-hero-container{
		margin-top: 5rem;
	}
	.menu .menu-list{
		/*display: flex;*/
		/*justify-content: center;*/
		/*flex-direction: column;*/
	}
	.more-work-title{
		text-align: left;
	}
}
@media (min-width: 768px){

	.interview-segment{
		max-width: 55ch;
	}
	.interview-segment.right{
		text-align: right;
		margin-left: auto;
	}
	#dashboard .breadcrumbs{
		padding-left: 0;
	}
	.breadcrumbs{
		padding-left: 3rem;	
	}
	.portfolio-search-bar{
		top: 5.75rem;
		border-radius: 100vh;
	}
	.portfolio-search-bar::after,
	.portfolio-search-bar::before{
		display: none;
	}
	.suggestions-video .search-results-inner-grid,
	.section-video .search-results-inner-grid{
		grid-template-columns: 1fr 1fr;
	}
	.news-header ~ .portfolio-search-results-container .search-results{
		padding-top: 1rem;
	}
	.fs-hero-container{
		height: 100vh;
	}
	.band-members .band-member{
		width: 33.33%;
	}
	.menu-nomob{
		display: inline-block;
	}
	.menu-nodesktop{
		display: none;
	}
	.person-image-arrow{
		top: unset;
		bottom: 460px;
		right: 40%;
	}
	.person-image-arrow img{
		transform: rotateZ( 342deg ) rotateX( 180deg );
	}
	.person-image-arrow span{
	  top: -33px;
	  right: 0px;
	  transform: rotate(-10deg);
	}
	.more-work-title{
		text-align: center;
	}
	.sub-footer-inner,
	.footer-text-content{
		text-align: left;
	}

	.menu .menu-list-container + .borders,
	.menu.active .menu-list-container + .borders{
		display: none;	
	}
	.menu .menu-list{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.menu-inner{
		justify-content: space-around;
	}
	.menu .menu-list-container{
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 1fr max-content 1fr;
  }
  .menu .menu-list li{
  	width: 6rem;
  }
	.select-video-thumbnail-container{
		max-width: calc( 900px );
	}
	.select-video-thumbnail-container .thumbnail{
		width: calc( 33% - 1rem );
	}
	.portfolio-item-title{
		/*text-align: center;*/
	}

	.menu:not(.scrolled) li.homebutton a.active{
		background-size: 0 0, 100% 0;
		color: var(--white-color);

		/*display: none;*/
	}
	.person-container{
		max-width: 1024px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 200px;
		min-height: 560px;
	}
	.person-image{
		display: block;
		position: relative;
	}
	.person-image img.p-img{
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 0;
		height: 550px;
		width: initial;
		max-width: initial;
		transform: translateX( 190px );
	}
	.person-container > div:first-child{
		position: relative;
		z-index: 2;
	}
	.person-container > div:first-child .content{
		max-width: 60ch;
		width: 52.5vw;
	}
	.footer-container::before{
		bottom: 7.5rem;
		left: calc( 768px - 10rem );
	}
	.sub-footer svg{
		bottom: -2.25rem;
	}
	.home-cta{
		padding-bottom: 100%;
	}
	.menu-language-select .language-select{
		margin-top: unset;
	}
	.menu{
		transition: .25s ease;
	}
	.client-gradient{
		position: relative;
		overflow: hidden;
	}
	.client-gradient::after{
		position: absolute;
		z-index: -1;
		inset: 0;
		content: '';
    background-image: url(/knot.png);
    background-size: contain;
	}
	.client-gradient::before {
	  --size: 0;
	  content: '';
	  position: absolute;
	  z-index: -2;
	  left: var(--x);
	  top: var(--y);
	  width: var(--size);
	  height: var(--size);
	  background-image: radial-gradient(circle closest-side, rgba(53,123,143), transparent);
	  transform: translate(-50%, -50%);
	  transition: width 1.5s ease, height 1.5s ease;
	  opacity: .5;
	}
	.client-gradient:hover::before {
	  --size: 200px;
	}
	.client-gradient-shadow{
		position: absolute;
		top: 0;
		left: 50%;
		bottom: 0;
		transform: translateX( -50% );
		z-index: 0;
		width: 100vw;
		max-width: var(--screen-lg);
		background-image: linear-gradient( to right, var(--black-color ), transparent, transparent, var( --black-color ) );

	}
	.menu.has-hero:not(.scrolled){
		background: transparent;
		box-shadow: unset;
		text-shadow: 0 0 .25rem rgba( 0,0,0,.3);
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.menu.has-hero:not(.scrolled) .logo > div{
		color: var(--white-color);
	}
	.logo svg{
		height: 1.75rem;
	}
	.menu.has-hero:not(.scrolled) .logo svg path{
		fill: var(--white-color);
	}
	.menu.has-hero:not(.scrolled) li a:hover{
		color: var(--white-color);
		background-size: 0;
	}
	.has-filters .menu-inner{
		display: flex;
		margin: 0 auto;
		max-width: 100vw;
		padding: 0 1rem 0 2rem;
	}
	.sticky-results-container{
		display: none !important;
	}
	.nopad{
		display: none;
	}
	.hero{
			align-items: flex-end;
	}
	.hero-inner{
	    max-width: calc( 100vw - 8rem );
			margin: 0 auto 4rem auto;
	}
	.menu-back-button + a.logo-outer,
	.has-filters button.menu-back-button{
		/*transform: translateX( -2.5rem );*/
	}
	.has-filters button.menu-back-button{
		display: none;
	}

	.manage-filters-grid{
		display: grid;
		grid-template-columns: max-content 1fr;
		grid-gap: 2rem;

	}
	.offer-portfolio-page{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.quotation-preview-grid{
		grid-template-columns: 1fr .5fr;
	}
	.colorcorrection-overlay-inner.active + .colorcorrection-overlay-controls{
		left: 50px;
	}
	.project-page-grid{
		display: grid;
		grid-template-columns: max-content 1fr;
		grid-column-gap: 2rem;
	}
	.editable-project .project-page-grid{
		grid-column-gap: 0;
	}
	.editable-project .project-page-grid-left .portfolio-page-padding-content-container{
		padding-right: 0;
	}
	.portfolio-page-grid{
		display: grid;
		grid-template-columns: .75fr 1fr;
	}
	.portfolio-page-grid-left{
		max-width: 30rem;
	}
	.project-page-grid-left{
		width: 20rem;
	}
	.grid-sizer,
	.masonry__item{
		width: calc( 33.334% - 1.334rem );
	}
	.portfolio-address-grid{
		grid-template-columns: 1fr .5fr;	
	}
	.m__grid#filters_options_grid .item,
	.m__grid#clients_grid .item,
	.m__grid#filters_grid .item {
	  width: calc( 100vw - 8rem );
	  max-width: 45ch;
	}
	.m__grid.is-gallery .item {
	  width: calc( ( 100vw - 8rem ) / 3 );
	  height: calc( ( 100vw - 8rem ) / 3 );
	}
	.m__grid .item {
	  width: calc( ( 100vw - 8rem ) / 2 );
	}

	.padding-content-container.padding-content-container-alt,
	.padding-content-container,
	.small-form-container{
		padding: 4rem;
	}
	.lg-image-width{
		display: grid;
		grid-template-columns: 1fr .5fr;
		padding: 0;
	}
	.lg-image-width .lg-image-container{
		min-height: calc( 100vh - 5rem );
		background-color: var(--grey-color-100);
		background-size: cover;
		background-position: center center;
		display: block;
	}
	.lg-image-width .lg-content-container{
		min-height: calc( 100vh - 5rem );
		/*background: unset;*/
		max-width: unset;
		margin: unset;
	}
	.portfolio-bar-backdrop{
		display: none;
	}
	.toggle-filters-menu{
		display: none;
	}
	.search-results{
		padding-top: 5rem;
		padding-left: 1rem;
		/*height: calc( 100vh - 5rem );*/
	}
	.portfolio-search-grid{
		display: grid;
		/*grid-gap: 1rem;*/
		grid-template-columns: 20rem 1fr;
	}	
	.menu .close-menu, .menu .toggle-menu{
		display: none;
	}
	.menu .menu-list-container{
		display: flex;
		position: relative;
		background: unset;
		top: unset;
		left: unset;
		bottom: unset;
		right: unset;
		pointer-events: unset;
		opacity: 1;
		transition: unset;
		padding: 0 0 0 0;
	}

	.menu .menu-list-container .logo-outer{
		margin-bottom: 0;
		height: 5rem;
		width: 7rem;
	}
	.logo{
		width: 7rem;
		-webkit-filter: drop-shadow(2px 2px 0 #000)
      drop-shadow(-2px 2px 0 #000)
      drop-shadow(2px -2px 0 #000)
      drop-shadow(-2px -2px 0 #000);
		filter: drop-shadow(2px 2px 0 #000)
      drop-shadow(-2px 2px 0 #000)
      drop-shadow(2px -2px 0 #000)
      drop-shadow(-2px -2px 0 #000);
    position: fixed;
    top: 10px;
    left: 50vw;
    transform: translate(-50%, 0px);
    pointer-events: none;
	}

	.menu-inner{
		max-width: calc( 100vw - 4rem );
	}

	.menu-inner{
		margin-left: auto;
	}
	.menu-list li{
		opacity: 1;
		transform: unset;
	}
	.menu li a,
	.menu li button:not([disabled]){
		/*background: linear-gradient( to top, transparent, transparent ), linear-gradient( to top, var(--primary-color-400), var(--primary-color-400) );*/
		/*background-size: 100% 3px, 0 3px;*/
		/*background-position: 100% 100%, 0 100%;*/
		/*background-repeat: no-repeat;*/
		/*transition: background-size .2s ease;*/
		color: var(--white-color);
		min-height: 5rem;
	}
	.menu li button.active,
	.menu li button:hover,
	.menu li a.active,
	.menu li a:hover{
	  	/*background-size: 0 3px, 100% 3px;*/
	}
	.cookie-popup{
		padding: 1rem;	
	}
	.footer-inner{
		max-width: 100vw;
		padding: 0 4rem 2rem 4rem;
	}
	.footer-inner-grid{
		display: grid;
		grid-template-columns: 1fr .5fr;
	}
	.footer-inner-grid > div:last-child{
		text-align: right;
	}
	.footer-inner-grid > div:last-child div{
		margin-left: auto;
	}
	.footer-links{
		padding-top: 4rem;
	}
	.search-results-inner-grid{
	    /*grid-template-columns: repeat( auto-fill, minmax( 14rem, 1fr ) );*/
	    padding: 1rem 0 1rem 0;
	}
	.sub-footer-inner{
		max-width: 100vw;
		padding: 1.75rem 4rem 1.5rem 4rem;
	}
	.video-cards-container{
		grid-template-columns: 1fr 1fr;	
	}
	.offer-portfolio-page .padding-content-container:first-child {
		padding-right: 0;
	}
	.home-feature-section{
		text-align: center;
	}
	.content-section{
		/*text-align: center;*/
		/*max-width: 75ch;*/
		/*margin-left: auto;*/
		/*margin-right: auto;*/
	}
	.content-images-section .content-section{
		margin-left: unset;
		margin-right: unset;
		text-align: left;
		max-width: unset;
	}
	.darken-left .fs-image-inner{
		background-color: rgba(0,0,0,.1);
		background-image: linear-gradient( to left, transparent, rgba(0,0,0,.9) );
	}
	.darken-right .fs-image-inner{
		background-color: rgba(0,0,0,.1);
		background-image: linear-gradient( to right, transparent, rgba(0,0,0,.9) );
	}
}
@media( min-width: 900px ){

	.band-members .band-member{
		width: 20%;
	}
	.band-member:hover span,
	.band-member:hover img,
	.band-member:hover::before{
		transform: translateY( -.5rem );

	}
	.person-image-arrow{
		bottom: 450px;
		right: 30%;
		transform: rotate( 15deg );
	}
	.title-section.has-video{
		/*text-align: center;*/
	}
	.person-image img.p-img{
		height: 575px;
		transform: translateX( 150px );
	}
	.content-section{
		grid-area: content;
	}
	.images-section{
		grid-area: images;
	}
	.video-section{
		/*max-width: 1000px;*/
	}
}
@media( min-width: 1024px ){
	.content-images-section{
		display: grid;
		grid-column-gap: 2rem;
		grid-template-areas: 
			"content images";
		grid-template-columns: .75fr 1fr;
	}
	.footer-logo-grid{
		grid-gap: 4rem;
	}
	.footer-links,
	.footer-text-content{
		padding-top: 6rem;
	}
	.offer-portfolio-page .padding-content-container:first-child {
		padding-right: 4rem;
	}

	.video-cards-container{
		grid-template-columns: 1fr 1fr 1fr;	
	}
	.stats-page .grid-sizer,
	.stats-page .masonry__item{
		width: calc( 33.334% - 19px );
	}
	.stats-page .masonry__item.item_width__2{
		width: calc( 66.667% - 9px );
	}

	#project_settings_handler{
		top: 3rem;
		right: 3rem;
	}

	#project_settings{
		top: 6rem;
		right: 3rem;
	}
	.project-page-grid-left{
		width: 25rem;
	}
	.portfolio-page-grid{
		display: grid;
		grid-template-columns: max-content 1fr;
	}
	.portfolio-page-padding-content-container{
		padding: 3rem;
	}
	.grid-sizer,
	.masonry__item{
		width: calc( 25% - 1.5rem );
	}
	.sub-footer-inner::after{
		clip-path: polygon(70% 0, 0% 100%, 100% 100%);
	}
	.footer-inner{
		padding: 0rem 4rem 2rem 4rem;
	}
	.nopad,
	.nodesktop{
		display: none;
	}
	.nomob{
		display: block;
	}

	.m__grid.is-gallery .item {
	  width: calc( ( 100vw - 8rem ) / 4 );
	  height: calc( ( 100vw - 8rem ) / 4 );
	}
	.m__grid .item {
	  width: calc( ( 100vw - 8rem ) / 3 );
	  aspect-ratio: 1 / 1;
	  max-width: calc( ( var(--screen-lg) - 8rem ) / 3 );
	}
	.title-display-1{
		/*font-size: clamp( 4rem, 5vw, 6rem );	*/
		max-width: 50rem;
	}
	.title-display-2{
		/*font-size: clamp( 1.25rem, 1.25vw, 1.25rem );	*/
		max-width: 50rem;
	}

	.hero-inner{
		max-width: calc( 100vw - 16rem );
		margin: 0 auto 8rem auto;
		width: 100vw;
	}
	.lg-image-width{
		grid-template-columns: 1fr 1fr;
	}
	.popup.modal{
		max-width: 1024px;	
	}
	.portfolio-search-grid{
		grid-template-columns: 20rem 1fr;
	}	
	.search-results-inner-grid{
	  grid-template-columns: 1fr 1fr 1fr;
	}
	.section-video .search-results-inner-grid{
		grid-template-columns: 1fr 1fr;
	}
}
@media ( min-width: 1200px ){
	.m__grid.is-gallery .item {
	  width: calc( ( 100vw - 8rem ) / 5 );
	  height: calc( ( 100vw - 8rem ) / 5 );
	  max-width: calc( ( var(--screen-lg ) - 8rem ) / 5 );
	  max-height: calc( ( var(--screen-lg ) - 8rem ) / 5 );
	}

	.circle-avatar-container{
		max-width: calc( 12.5vw );
		max-height: calc( 12.5vw );
	}
	.stats-page .grid-sizer,
	.stats-page .masonry__item{
		width: calc( 25% - 21px );
		max-width: calc( var( --screen-lg ) - 21px );
	}
	.stats-page .masonry__item.item_width__2{
		width: calc( 50% - 11px );
	}

	.portfolio-page .grid-sizer,
	.portfolio-page .masonry__item{
		width: 33.334%;
	}
}
@media (min-width: 1520px){
	.menu-back-button + a.logo-outer,
	.has-filters button.menu-back-button{
		transform: translateX( 0 );
	}
}
@media  (min-height: 1024px){
	.section,
	.section-inner,
	.lg-image-width,
	.lg-image-width .lg-image-container,
	#current_portfolio .portfolio-page-grid,
	.lg-image-width .lg-content-container{
		min-height: unset;
	}
	.fs-image-inner{
		min-height: unset;
	}
}
@keyframes trAppear{
	to {
		transform: translateY( 0 );
		opacity: 1;
	}
}
@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}
@keyframes scale {
	0%, 100% {
		transform: none;
	}
	50% {
		transform: scale3d(1.1, 1.1, 1);
	}
}
@keyframes fill {
	100% {
		box-shadow: inset 0px 0px 0px 30px var(--green-color);
	}
}
@keyframes colorSpin{
	from{
		transform: rotate( 0 );
    border-top: 3px solid var(--primary-color-600);
    border-left: 3px solid var(--primary-color-600);
    border-right: 3px solid var(--primary-color-600);
	} 
	20% {
		transform: rotate( 360deg );
    border-top: 3px solid var(--primary-color-200);
    border-left: 3px solid var(--primary-color-200);
    border-right: 3px solid var(--primary-color-200);
	}
	40% {
		transform: rotate( 720deg );
    border-top: 3px solid var(--secondary-color-600);
    border-left: 3px solid var(--secondary-color-600);
    border-right: 3px solid var(--secondary-color-600);
	}
	60% { 
		transform: rotate( 1080deg );
    border-top: 3px solid var(--secondary-color-200);
    border-left: 3px solid var(--secondary-color-200);
    border-right: 3px solid var(--secondary-color-200);
	}
	80% {
		transform: rotate( 1440deg );
    border-top: 3px solid var(--primary-color-200);
    border-left: 3px solid var(--primary-color-200);
    border-right: 3px solid var(--primary-color-200);
	}
	to{
		transform: rotate( 1800deg );
    border-top: 3px solid var(--primary-color-600);
    border-left: 3px solid var(--primary-color-600);
    border-right: 3px solid var(--primary-color-600);
	} 
}
@keyframes spin{
	from{
		transform: rotate( 0 );
	} 
	to{ 
		transform: rotate( 360deg );
	}
}
@keyframes bounce{
	from, to{
		transform: translateY( -.125rem );
	}
	50%{
		transform: translateY( .125rem );
	}
}

@supports ( backdrop-filter:blur() ) {
	.open-color-correction-button{
		pointer-events: unset;
		opacity: 1;
	}

	.portfolio-page-logged-out.has-backdrop::after{
		backdrop-filter: blur( 6px );
		background-color: transparent;
		background-image: radial-gradient( rgba(0,0,0,.125), rgba(0,0,0,0) );
	}
}
@supports ( background-clip:text ) or ( -webkit-background-clip:text ) {

	a.text-gradient,
	.text-gradient {
	    background-color: var(--primary-color-600);
	    background-image: linear-gradient( to right, var(--primary-color-600), var(--primary-color-400) );
	    background-clip: text;
	    -webkit-background-clip: text;
	    color: transparent;
	}

	.logo a.text-gradient,
	.logo .text-gradient {
	    background-image: linear-gradient( to right, var(--primary-color-200), var(--primary-color-400) );
	}

}
.display-amaranthe{
	font-family: 'Amarante', cursive;
}
.display-band-member{
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
  text-shadow: 0 0 0.25rem black;
  z-index: 3;
  text-transform: uppercase;
}
.display-h3{
	font-size: 2rem;
}
.display-h4{
	font-size: 1.5rem;
}
.display-h45{
	font-size: 1.25rem;
}
.display-h5{
	font-size: 1.125rem;
}
.current-page-title{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	height: 5rem;
	display: block;
	padding: 1.75rem 2rem 0 2rem;
	text-transform: uppercase;
}
@media (min-width: 768px){
	.current-page-title{
		display: none;
	}
}
.pattern-bg{
	opacity: .7;
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}
.spotify-iframe iframe{
	background: var(--black-color-50);
}
.portfolio-link-input-container{
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: .5rem;
}
.remove-portfolio-icon{
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	padding: 1rem;
}
.remove-portfolio-icon i{
	font-size: 1.25rem;
	color: var(--primary-color-400);
	transform: rotate( 45deg );
}
.media-selector{
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--black-color);
}
.media-selector a{
	padding: .5rem 0;
	text-align: center;
	font-size: 1.5rem;
	font-family: 'Amarante', sans-serif;
	cursor: pointer;
	transition: .25s ease;
}
.media-selector a.selected{
	background-color: var(--primary-color-400);
	background-image: linear-gradient( to top left, var(--primary-color-200 ), var(--primary-color-600 ) );
}

.media-selector a:hover{
	background-color: var(--primary-color-200);
	background-image: unset;

}
.type-label{
	background: var(--primary-color-400);
	color: var(--black-color);
	padding: .325rem .5rem;
	border-radius: 4px;
	display: inline-block;
	font-size: .8rem;
	text-shadow: none;
	margin-right: .25rem;
	transform: translateY( -3px );
}
.calendar-row{
	border-top: 1px solid var(--primary-color-600);
}
.calendar-row:first-child{
	border-top: unset;
}
.calendar-row-header{
	padding: .5rem;
}
.calendar-row-header.active,
.calendar-row-header:hover{
	background: var(--primary-color-400);
	cursor: pointer;
}
.calendar-row-header.active *,
.calendar-row-header:hover *{
	color: var(--white-color);
}
.calendar-row-body{
	border-left: 1px solid var(--primary-color-600);
	border-right: 1px solid var(--primary-color-600);
}
.calendar-row:last-child .calendar-row-body{
	border-bottom: 1px solid var(--primary-color-600);
}
.journal-icon{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: .5rem;
  background-size: cover;
  margin: 0 0 2rem 0;
}
@media (min-width: 535px){
.journal-icon{
  width: clamp( 7.5rem, 30vw, 14rem );
  float: left;
  margin: 0 1.5rem 1rem 0;
}

}